Added roles for menu items

Author: balajidharma

app/Http/Controllers/Admin/MenuItemController.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\Admin;
 
 use App\Http\Controllers\Controller;
+use App\Models\Role;
 use BalajiDharma\LaravelAdminCore\Requests\StoreMenuItemRequest;
 use BalajiDharma\LaravelAdminCore\Requests\UpdateMenuItemRequest;
 use BalajiDharma\LaravelMenu\Models\Menu;
@@ -47,12 +48,10 @@ public function index(Menu $menu)
      */
     public function create(Menu $menu)
     {
-        $item_options = MenuItem::selectOptions($menu->id, null, true);
+        $itemOptions = MenuItem::selectOptions($menu->id, null, true);
+        $roles = Role::all()->pluck('name', 'id');
 
-        return Inertia::render('Admin/Menu/Item/Create', [
-            'menu' => $menu,
-            'item_options' => $item_options,
-        ]);
+        return Inertia::render('Admin/Menu/Item/Create', compact('menu', 'itemOptions', 'roles'));
     }
 
     /**
@@ -62,7 +61,10 @@ public function create(Menu $menu)
      */
     public function store(StoreMenuItemRequest $request, Menu $menu)
     {
-        $menu->menuItems()->create($request->all());
+        $menu->menuItems()->create($request->except(['roles']));
+
+        $roles = $request->roles ?? [];
+        $menu->assignRole($roles);
 
         return redirect()->route('admin.menu.item.index', $menu->id)
             ->with('message', 'Menu created successfully.');
@@ -75,13 +77,11 @@ public function store(StoreMenuItemRequest $request, Menu $menu)
      */
     public function edit(Menu $menu, MenuItem $item)
     {
-        $item_options = MenuItem::selectOptions($menu->id, $item->parent_id ?? $item->id);
+        $itemOptions = MenuItem::selectOptions($menu->id, $item->parent_id ?? $item->id);
+        $roles = Role::all()->pluck('name', 'id');
+        $itemHasRoles = array_column(json_decode($item->roles, true), 'id');
 
-        return Inertia::render('Admin/Menu/Item/Edit', [
-            'menu' => $menu,
-            'item' => $item,
-            'item_options' => $item_options,
-        ]);
+        return Inertia::render('Admin/Menu/Item/Edit', compact('menu', 'item', 'itemOptions', 'roles', 'itemHasRoles'));
     }
 
     /**
@@ -91,7 +91,10 @@ public function edit(Menu $menu, MenuItem $item)
      */
     public function update(UpdateMenuItemRequest $request, Menu $menu, MenuItem $item)
     {
-        $item->update($request->all());
+        $item->update($request->except(['roles']));
+
+        $roles = $request->roles ?? [];
+        $item->syncRoles($roles);
 
         return redirect()->route('admin.menu.item.index', $menu->id)
             ->with('message', 'Menu Item updated successfully.');

app/Http/Middleware/HandleInertiaRequests.php

@@ -46,7 +46,7 @@ public function share(Request $request)
                 'message' => fn () => $request->session()->get('message'),
             ],
             'navigation' => [
-                'menu' => Menu::getMenuTree('admin'),
+                'menu' => Menu::getMenuTree('admin', false, true),
             ],
         ]);
     }

resources/js/Components/AsideMenuItem.vue

@@ -38,7 +38,7 @@ const componentClass = computed(() => (
   ]
 ))
 
-const hasDropdown = computed(() => props.item.children)
+const hasDropdown = computed(() => props.item.children && props.item.children.length)
 
 const menuClick = event => {
   emit('menu-click', event, props.item)

resources/js/Pages/Admin/Menu/Item/Create.vue

@@ -13,13 +13,18 @@ import FormControl from '@/Components/FormControl.vue'
 import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue'
 import BaseButton from '@/Components/BaseButton.vue'
 import BaseButtons from '@/Components/BaseButtons.vue'
+import BaseDivider from '@/Components/BaseDivider.vue'
 
 const props = defineProps({
   menu: {
     type: Object,
     default: () => ({}),
   },
-  item_options: {
+  itemOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+  roles: {
     type: Object,
     default: () => ({}),
   },
@@ -31,7 +36,8 @@ const form = useForm({
   description: '',
   enabled: true,
   parent_id: '',
-  weight: ''
+  weight: '',
+  roles: []
 })
 
 </script>
@@ -121,7 +127,7 @@ const form = useForm({
             type="select"
             placeholder="--ROOT--"
             :error="form.errors.parent_id"
-            :options="item_options"
+            :options="itemOptions"
           >
             <div class="text-red-400 text-sm" v-if="form.errors.parent_id">
               {{ form.errors.parent_id }}
@@ -146,6 +152,21 @@ const form = useForm({
             </div>
           </FormControl>
         </FormField>
+
+        <BaseDivider />
+
+        <FormField
+          label="Roles"
+          wrap-body
+        >
+          <FormCheckRadioGroup
+            v-model="form.roles"
+            name="roles"
+            is-column
+            :options="props.roles"
+          />
+        </FormField>
+
         <template #footer>
           <BaseButtons>
             <BaseButton

resources/js/Pages/Admin/Menu/Item/Edit.vue

@@ -13,6 +13,7 @@ import FormControl from '@/Components/FormControl.vue'
 import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue'
 import BaseButton from '@/Components/BaseButton.vue'
 import BaseButtons from '@/Components/BaseButtons.vue'
+import BaseDivider from '@/Components/BaseDivider.vue'
 
 const props = defineProps({
   menu: {
@@ -23,7 +24,15 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
-  item_options: {
+  itemOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+  roles: {
+    type: Object,
+    default: () => ({}),
+  },
+  itemHasRoles: {
     type: Object,
     default: () => ({}),
   },
@@ -37,7 +46,8 @@ const form = useForm({
   description: props.item.description,
   enabled: props.item.enabled,
   parent_id: props.item.parent_id,
-  weight: props.item.weight
+  weight: props.item.weight,
+  roles: props.itemHasRoles
 })
 </script>
 
@@ -126,7 +136,7 @@ const form = useForm({
             type="select"
             placeholder="--ROOT--"
             :error="form.errors.parent_id"
-            :options="item_options"
+            :options="itemOptions"
           >
             <div class="text-red-400 text-sm" v-if="form.errors.parent_id">
               {{ form.errors.parent_id }}
@@ -151,6 +161,21 @@ const form = useForm({
             </div>
           </FormControl>
         </FormField>
+        
+        <BaseDivider />
+
+        <FormField
+          label="Roles"
+          wrap-body
+        >
+          <FormCheckRadioGroup
+            v-model="form.roles"
+            name="roles"
+            is-column
+            :options="props.roles"
+          />
+        </FormField>
+
         <template #footer>
           <BaseButtons>
             <BaseButton