🚧 Theme make UI

modules/DevTool/Http/Controllers/ThemeController.php

@@ -14,45 +14,50 @@
 use Illuminate\Http\Request;
 use Inertia\Response;
 use Juzaweb\CMS\Contracts\LocalThemeRepositoryContract;
-use Juzaweb\CMS\Http\Controllers\BackendController;
 
-class ThemeController extends BackendController
+class ThemeController extends Controller
 {
- protected string $template = 'inertia';
-
  public function __construct(
  protected LocalThemeRepositoryContract $themeRepository
  ) {
  //
  }
 
- public function index(Request $request, string $name): View|Response
+ public function index(Request $request): View|Response
+ {
+ $title = "Dev tool for themes";
+
+ $configs = $this->getConfigs('themes');
+
+ return $this->view(
+ 'cms::backend.dev-tool.theme.index',
+ compact('title', 'configs')
+ );
+ }
+
+ public function edit(Request $request, string $name): View|Response
  {
+ die;
  $theme = $this->themeRepository->findOrFail($name);
 
  $title = "Dev tool for theme: {$theme->getName()}";
 
- $configs = $this->getThemeConfigs();
+ $configs = $this->getConfigs('themes');
 
  return $this->view(
- 'cms::backend.dev-tool.theme.index',
+ 'cms::backend.dev-tool.theme.edit',
  compact('theme', 'title', 'configs')
  );
  }
 
- protected function getThemeConfigs(): array
+ public function create()
  {
- $configs = config("dev-tool.themes", []);
-
- $convertToArray = function (array $item, string $key) {
- $item['key'] = $key;
- return $item;
- };
+ $title = "Make new themes";
+ $configs = $this->getConfigs('themes');
 
- $configs['options'] = collect($configs['options'])
- ->map($convertToArray)
- ->values();
-
- return $configs;
+ return $this->view(
+ 'cms::backend.dev-tool.theme.create',
+ compact('configs', 'title')
+ );
  }
 }

modules/DevTool/routes/admin.php

@@ -34,9 +34,10 @@ function () {
 );
 
 Route::group(
- ['prefix' => 'dev-tools/themes/{name}'],
+ ['prefix' => 'dev-tools/themes'],
  function () {
- Route::get('/', [ThemeController::class, 'index']);
+ Route::resource('/', ThemeController::class)
+ ->only(['index', 'edit', 'create', 'destroy']);
  }
 );
 

package.json

@@ -52,11 +52,7 @@
  "dependencies": {
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
  "@babel/preset-react": "^7.22.5",
- "@inertiajs/inertia": "^0.11.1",
- "@inertiajs/inertia-react": "^0.8.1",
- "@inertiajs/progress": "^0.2.7",
  "@inertiajs/react": "^1.0.9",
- "@inertiajs/server": "^0.1.0",
  "@radix-ui/react-alert-dialog": "^1.0.4",
  "@radix-ui/react-avatar": "^1.0.3",
  "@radix-ui/react-checkbox": "^1.0.4",

resources/js/app.tsx

@@ -9,7 +9,7 @@ axios.interceptors.request.use((config) => {
 });
 
 createInertiaApp({
- title: (title) => `${title}`,
+ title: (title) => title,
  resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
  setup({ el, App, props }) {
  const root = createRoot(el);

resources/js/components/form/buttons/button.tsx

@@ -16,9 +16,10 @@ export default function Button(props: ButtonProps) {
  className={`btn ${props.class || 'btn-primary'}`}
  disabled={props.loading}
  >
- {props.loading ? (<>
+ {/*{props.loading ? (<>
  <i className="fa fa-spinner fa-spin"></i> {__('Please wait...')}
- </>) : props.label}
+ </>) : props.label}*/}
+ {props.label}
  </button>
  );
 }

resources/js/components/form/inputs/input.tsx

@@ -24,7 +24,7 @@ export default function Input(props: InputProps = {type: 'text', required: false
  name={props.name}
  className={`form-control ${props.class || ''}`}
  id={props.id}
- value={props.value}
+ defaultValue={props.value}
  autoComplete="off"
  placeholder={props.placeholder}
  required={props.required}

resources/js/pages/dev-tool/components/top-options.tsx

@@ -4,7 +4,7 @@ import axios from "axios";
 import {Theme} from "@/types/themes";
 import {Plugin} from "@/types/plugins";
 import {Configs} from "@/pages/dev-tool/types/module";
-import {router, usePage} from "@inertiajs/react";
+import {Link, router, usePage} from "@inertiajs/react";
 
 export default function TopOptions(
  {
@@ -87,5 +87,22 @@ export default function TopOptions(
  ))}
  </select>
  </div>
- </div>;
+
+ <div className="col-md-4">
+ <div className="dropdown">
+ <button className="btn btn-info dropdown-toggle"
+ type="button"
+ id="dropdownMakeButton"
+ data-toggle="dropdown"
+ aria-haspopup="true"
+ aria-expanded="false"
+ >
+ Make
+ </button>
+ <div className="dropdown-menu" aria-labelledby="dropdownMakeButton">
+ <Link className="dropdown-item" href={admin_url(`dev-tools/themes/create`)}>{__('Make New Theme')}</Link>
+ </div>
+ </div>
+ </div>
+ </div>
 }

resources/js/pages/dev-tool/theme/create.tsx

@@ -0,0 +1,55 @@
+import TopOptions from "@/pages/dev-tool/components/top-options";
+import Admin from "@/layouts/admin";
+import {useState} from "react";
+import Button from "@/components/form/buttons/button";
+import Input from "@/components/form/inputs/input";
+import Textarea from "@/components/form/inputs/textarea";
+
+export default function Create() {
+ const [buttonLoading, setButtonLoading] = useState<boolean>(false);
+ const [message, setMessage] = useState<{
+ status: boolean,
+ message: string
+ }>();
+
+ const handleMakeTheme = (e: any ) => {
+ e.preventDefault();
+
+ }
+
+ return (
+ <Admin>
+ <TopOptions
+ moduleType={'themes'}
+ />
+
+ <div className="row">
+ <div className="col-md-12">
+
+ {message && (
+ <div className={`alert alert-${message.status ? 'success' : 'danger' } jw-message`}>
+ {message.message}
+ </div>
+ )}
+
+ <form method={'POST'} onSubmit={handleMakeTheme}>
+
+ <Input name="name" label={'Name'} required={true}/>
+
+ <Input name="title" label={'Title'} required={true}/>
+
+ <Textarea name="description" label={'Description'} rows={3} />
+
+ <Input name="author" label={'Author'}/>
+
+ <Input name="version" label={'Version'} required={true} value={'1.0'}/>
+
+ <Button label={'Create Theme'} type={'submit'} loading={buttonLoading}/>
+
+ </form>
+ </div>
+ </div>
+
+ </Admin>
+ );
+}

yarn.lock

@@ -1440,29 +1440,6 @@
  nprogress "^0.2.0"
  qs "^6.9.0"
 
-"@inertiajs/inertia-react@^0.8.1":
- version "0.8.1"
- resolved "https://registry.yarnpkg.com/@inertiajs/inertia-react/-/inertia-react-0.8.1.tgz#730e1f592086c8e97e21e3f4ed639cb952bcfd77"
- integrity sha512-9Uu7t4EA9FrcREwWnOU/qW5i4hYFt+uFn5cqP6RGJo8lJS4u8t6Q9358oHuQUKbFEbaIjUu7aslCL3/Istctlg==
- dependencies:
- lodash.isequal "^4.5.0"
-
-"@inertiajs/inertia@^0.11.1":
- version "0.11.1"
- resolved "https://registry.yarnpkg.com/@inertiajs/inertia/-/inertia-0.11.1.tgz#f324f09a03e1dd944404bd09935c0141a4b3a85d"
- integrity sha512-btmV53c54oW4Z9XF0YyTdIUnM7ue0ONy3/KJOz6J1C5CYIwimiKfDMpz8ZbGJuxS+SPdOlNsqj2ZhlHslpJRZg==
- dependencies:
- axios "^0.21.1"
- deepmerge "^4.0.0"
- qs "^6.9.0"
-
-"@inertiajs/progress@^0.2.7":
- version "0.2.7"
- resolved "https://registry.yarnpkg.com/@inertiajs/progress/-/progress-0.2.7.tgz#b42ac849b6f227fe8a45a91d663719c5bd362131"
- integrity sha512-zxadfLlBPIUvTE9g5k71V/Ayzo8P9kEp4hV4UKywCC2kURufxV7bycbZqU1GeMCFGDT+VRrjXNl676Pwwa1HoQ==
- dependencies:
- nprogress "^0.2.0"
-
 "@inertiajs/react@^1.0.9":
  version "1.0.9"
  resolved "https://registry.yarnpkg.com/@inertiajs/react/-/react-1.0.9.tgz#ca707cbf5c4315be3419a8b2fd2fa4e9d1062847"
@@ -1471,11 +1448,6 @@
  "@inertiajs/core" "1.0.9"
  lodash.isequal "^4.5.0"
 
-"@inertiajs/server@^0.1.0":
- version "0.1.0"
- resolved "https://registry.yarnpkg.com/@inertiajs/server/-/server-0.1.0.tgz#bc48738b1c1c1f806bee6c9e9ea827cd03521e16"
- integrity sha512-Ab1DqaRgW53nZq3sPN1AitHPJ1UoHiTRLbdGGgrswO6HhTYu6m7aewY80+YtiL1VEWGJfOumeNPqhnY+3/414w==
-
 "@jridgewell/gen-mapping@^0.1.0":
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
@@ -2841,7 +2813,7 @@ autoprefixer@^10.4.12:
  picocolors "^1.0.0"
  postcss-value-parser "^4.2.0"
 
-axios@0.21.4, axios@^0.21.1:
+axios@0.21.4:
  version "0.21.4"
  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
  integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==