From 1e63d3ec9f41850cb275255956416899a698b4e3 Mon Sep 17 00:00:00 2001 From: Juzaweb Date: Fri, 11 Aug 2023 21:21:10 +0700 Subject: [PATCH] :construction: Theme make UI --- .../Http/Controllers/ThemeController.php | 43 ++++++++------- modules/DevTool/routes/admin.php | 5 +- package.json | 4 -- resources/js/app.tsx | 2 +- .../js/components/form/buttons/button.tsx | 5 +- resources/js/components/form/inputs/input.tsx | 2 +- .../pages/dev-tool/components/top-options.tsx | 21 ++++++- resources/js/pages/dev-tool/theme/create.tsx | 55 +++++++++++++++++++ yarn.lock | 30 +--------- 9 files changed, 107 insertions(+), 60 deletions(-) create mode 100644 resources/js/pages/dev-tool/theme/create.tsx diff --git a/modules/DevTool/Http/Controllers/ThemeController.php b/modules/DevTool/Http/Controllers/ThemeController.php index c9844f81c..4d6e33237 100644 --- a/modules/DevTool/Http/Controllers/ThemeController.php +++ b/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') + ); } } diff --git a/modules/DevTool/routes/admin.php b/modules/DevTool/routes/admin.php index 2bb8ef79b..83501e910 100644 --- a/modules/DevTool/routes/admin.php +++ b/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']); } ); diff --git a/package.json b/package.json index 0ce9055d7..ef96f665e 100644 --- a/package.json +++ b/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", diff --git a/resources/js/app.tsx b/resources/js/app.tsx index ede9de770..f02653b83 100644 --- a/resources/js/app.tsx +++ b/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); diff --git a/resources/js/components/form/buttons/button.tsx b/resources/js/components/form/buttons/button.tsx index 52c624760..e9f1efbff 100644 --- a/resources/js/components/form/buttons/button.tsx +++ b/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 ? (<> {__('Please wait...')} - ) : props.label} + ) : props.label}*/} + {props.label} ); } diff --git a/resources/js/components/form/inputs/input.tsx b/resources/js/components/form/inputs/input.tsx index ec0079b78..ffc406773 100644 --- a/resources/js/components/form/inputs/input.tsx +++ b/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} diff --git a/resources/js/pages/dev-tool/components/top-options.tsx b/resources/js/pages/dev-tool/components/top-options.tsx index fd5a3b024..8d2b69f99 100644 --- a/resources/js/pages/dev-tool/components/top-options.tsx +++ b/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( ))} - ; + +
+
+ +
+ {__('Make New Theme')} +
+
+
+ } diff --git a/resources/js/pages/dev-tool/theme/create.tsx b/resources/js/pages/dev-tool/theme/create.tsx new file mode 100644 index 000000000..f94d76c80 --- /dev/null +++ b/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(false); + const [message, setMessage] = useState<{ + status: boolean, + message: string + }>(); + + const handleMakeTheme = (e: any ) => { + e.preventDefault(); + + } + + return ( + + + +
+
+ + {message && ( +
+ {message.message} +
+ )} + +
+ + + + + +