👍 Custom post type make UI

juzaweb · Aug 6, 2023 · 468632b · 468632b
1 parent cdda9f1
commit 468632b
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 8 deletions.
diff --git a/modules/DevTool/Http/Controllers/PluginController.php b/modules/DevTool/Http/Controllers/PluginController.php
@@ -12,6 +12,7 @@
 
 use Illuminate\Contracts\View\View;
 use Illuminate\Http\JsonResponse;
+use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\File;
 use Illuminate\Support\Str;
@@ -35,7 +36,7 @@ public function index(Request $request, string $vendor, string $name): View|Resp
         //
     }
 
-    public function makePostType(PostTypeRequest $request, string $vendor, string $name): JsonResponse
+    public function makePostType(PostTypeRequest $request, string $vendor, string $name): JsonResponse|RedirectResponse
     {
         $plugin = $this->pluginRepository->find("{$vendor}/{$name}");
 

diff --git a/resources/js/components/form/buttons/button.tsx b/resources/js/components/form/buttons/button.tsx
@@ -1,8 +1,11 @@
+import {__} from "@/helpers/functions";
+
 export interface ButtonProps {
     id?: string
     type?: 'button' | 'submit' | 'reset'
     label?: string
     class?: string
+    loading?: boolean
 }
 
 export default function Button(props: ButtonProps) {
@@ -11,8 +14,9 @@ export default function Button(props: ButtonProps) {
             type={props.type || 'button'}
             id={props.id}
             className={`btn ${props.class || 'btn-primary'}`}
+            disabled={props.loading}
         >
-            {props.label}
+            {props.loading ? <i className="fa fa-spinner fa-spin"></i> + __('Please wait...') : props.label}
         </button>
     );
 }
diff --git a/resources/js/components/form/inputs/checkbox.tsx b/resources/js/components/form/inputs/checkbox.tsx
@@ -4,6 +4,7 @@ export interface CheckboxProps {
     label?: string;
     class?: string;
     value?: string;
+    checked?: boolean;
     required?: boolean;
 }
 
@@ -17,7 +18,9 @@ export default function Checkbox(props: CheckboxProps = {required: false, class:
                     className={`form-control ${props.class || ''}`}
                     id={props.id}
                     value={props.value || '1'}
-                    autoComplete="off" />
+                    autoComplete="off"
+                    defaultChecked={props.checked || false}
+                />
 
                 <span className="jw__utils__control__indicator"></span>
 

diff --git a/resources/js/pages/dev-tool/components/plugins/make-custom-post-type.tsx b/resources/js/pages/dev-tool/components/plugins/make-custom-post-type.tsx
@@ -6,16 +6,32 @@ import Checkbox from "@/components/form/inputs/checkbox";
 import Button from "@/components/form/buttons/button";
 import axios from "axios";
 import {admin_url} from "@/helpers/functions";
+import {useState} from "react";
 
 export default function MakeCustomPostType({ module }: { module: Theme | Plugin }) {
+    const [buttonLoading, setButtonLoading] = useState<boolean>(false);
 
     const handleMakeCustomPostType = (e: any ) => {
         e.preventDefault();
 
-        let formData = new FormData(e.target);
+        let formData: FormData = new FormData(e.target);
+        setButtonLoading(true);
 
-
-        axios.post(admin_url('dev-tools/plugin/' + module.name + '/make-post-type'), formData);
+        axios.post(
+            admin_url('dev-tools/plugin/' + module.name + '/make-post-type'),
+            formData,
+            {
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }
+        )
+            .then((response) => {
+                setButtonLoading(false);
+                if (response.data.status === true) {
+                    e.target.reset();
+                }
+            });
 
         return false;
     }
@@ -26,19 +42,22 @@ export default function MakeCustomPostType({ module }: { module: Theme | Plugin
                 <h5>Make Custom Post Type</h5>
 
                 <form method={'POST'} onSubmit={handleMakeCustomPostType}>
+
                     <Input name="key" label={'Post Type'} required={true} />
 
                     <Input name="label" label={'Label'} required={true} />
 
-                    <Textarea name="description" label={'Description'} rows={4} />
+                    <Textarea name="description" label={'Description'} rows={3} />
 
                     <Checkbox name={'support[]'} label={'Has Comments'} value={'comment'} />
 
                     <Checkbox name={'support[]'} label={'Has Category'} value={'category'} />
 
                     <Checkbox name={'support[]'} label={'Has Tag'} value={'tag'}/>
 
-                    <Button label={'Make Post Type'} type={'submit'} />
+                    <Checkbox name={'show_in_menu'} label={'Show In Menu'} checked={true} />
+
+                    <Button label={'Make Post Type'} type={'submit'} loading={buttonLoading} />
 
                 </form>
             </div>