Skip to content

Commit 63a423f

Browse files
balajidharmabalajidharma
committed
Added menu item edit and create
1 parent 69a4cad commit 63a423f

File tree

6 files changed

+419
-63
lines changed

6 files changed

+419
-63
lines changed

‎app/Http/Controllers/Admin/MenuItemController.php‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,18 @@ public function index(Menu $menu)
4040
]);
4141
}
4242

43-
/**
43+
/**
4444
* Show the form for creating a new resource.
4545
*
46-
* @return \Illuminate\View\View
46+
* @return \Inertia\Response
4747
*/
4848
public function create(Menu $menu)
4949
{
5050
$item_options = MenuItem::selectOptions($menu->id);
51-
return view('admin.menu.item.create', compact('menu', 'item_options'));
51+
return Inertia::render('Admin/Menu/Item/Create', [
52+
'menu' => $menu,
53+
'item_options' => $item_options
54+
]);
5255
}
5356

5457
/**
@@ -70,12 +73,16 @@ public function store(StoreMenuItemRequest $request, Menu $menu)
7073
* Show the form for editing the specified resource.
7174
*
7275
* @param \BalajiDharma\LaravelMenu\Models\Menu $menu
73-
* @return \Illuminate\View\View
76+
* @return \Inertia\Response
7477
*/
7578
public function edit(Menu $menu, MenuItem $item)
7679
{
7780
$item_options = MenuItem::selectOptions($menu->id, $item->parent_id ?? $item->id);
78-
return view('admin.menu.item.edit', compact('menu', 'item', 'item_options'));
81+
return Inertia::render('Admin/Menu/Item/Edit', [
82+
'menu' => $menu,
83+
'item' => $item,
84+
'item_options' => $item_options
85+
]);
7986
}
8087

8188
/**

‎resources/js/Components/Admin/MenuItemList.vue‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<script setup>
2+
import { Link } from "@inertiajs/vue3"
3+
import BaseButton from "@/Components/BaseButton.vue"
4+
import BaseButtons from "@/Components/BaseButtons.vue"
5+
import {
6+
mdiSquareEditOutline,
7+
mdiTrashCan,
8+
} from "@mdi/js"
9+
10+
const props = defineProps({
11+
item: {
12+
type: Object,
13+
default: () => ({}),
14+
},
15+
menu: {
16+
type: Object,
17+
default: () => ({}),
18+
},
19+
can: {
20+
type: Object,
21+
default: () => ({}),
22+
},
23+
level: {
24+
type: Number,
25+
default: 0
26+
},
27+
})
28+
</script>
29+
30+
<template>
31+
<tr :key="item.id">
32+
<td data-label="Name">
33+
<div :style="{ 'margin-left': level*20 + 'px' }">{{ item.name }}</div>
34+
</td>
35+
<td data-label="Description">
36+
{{ item.description }}
37+
</td>
38+
<td data-label="Enabled">
39+
{{ item.enabled }}
40+
</td>
41+
<td
42+
v-if="can.edit || can.delete"
43+
class="before:hidden lg:w-1 whitespace-nowrap"
44+
>
45+
<BaseButtons type="justify-start lg:justify-end" no-wrap>
46+
<BaseButton
47+
v-if="can.edit"
48+
:route-name="route('menu.item.edit', {menu: menu.id, item: item.id})"
49+
color="info"
50+
:icon="mdiSquareEditOutline"
51+
small
52+
/>
53+
<BaseButton
54+
v-if="can.delete"
55+
color="danger"
56+
:icon="mdiTrashCan"
57+
small
58+
@click="destroy(item.id)"
59+
/>
60+
</BaseButtons>
61+
</td>
62+
</tr>
63+
<template v-for="item in item.children">
64+
<MenuItemList :item="item" :menu="menu" :can="can" :level="level + 1" />
65+
</template>
66+
</template>

‎resources/js/Components/FormControl.vue‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const props = defineProps({
2929
default: null
3030
},
3131
options: {
32-
type: Array,
32+
type: [Array, Object],
3333
default: null
3434
},
3535
type: {
@@ -133,12 +133,13 @@ if (props.ctrlKFocus) {
133133
:name="name"
134134
:class="inputElClass"
135135
>
136+
<option value="" v-if="placeholder"> {{ placeholder }}</option>
136137
<option
137-
v-for="option in options"
138-
:key="option.id ?? option"
139-
:value="option"
138+
v-for="(option, index) in options"
139+
:key="index"
140+
:value="index"
141+
v-html="option"
140142
>
141-
{{ option.label ?? option }}
142143
</option>
143144
</select>
144145
<textarea

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

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<script setup>
2+
import { Head, Link, useForm } from "@inertiajs/vue3"
3+
import {
4+
mdiMenu,
5+
mdiArrowLeftBoldOutline
6+
} from "@mdi/js"
7+
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
8+
import SectionMain from "@/Components/SectionMain.vue"
9+
import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
10+
import CardBox from "@/Components/CardBox.vue"
11+
import FormField from '@/Components/FormField.vue'
12+
import FormControl from '@/Components/FormControl.vue'
13+
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue'
14+
import BaseButton from '@/Components/BaseButton.vue'
15+
import BaseButtons from '@/Components/BaseButtons.vue'
16+
17+
const props = defineProps({
18+
menu: {
19+
type: Object,
20+
default: () => ({}),
21+
},
22+
item_options: {
23+
type: Object,
24+
default: () => ({}),
25+
},
26+
})
27+
28+
const form = useForm({
29+
name: '',
30+
uri: '',
31+
description: '',
32+
enabled: true,
33+
parent_id: '',
34+
weight: ''
35+
})
36+
37+
</script>
38+
39+
<template>
40+
<LayoutAuthenticated>
41+
<Head title="Create menu item" />
42+
<SectionMain>
43+
<SectionTitleLineWithButton
44+
:icon="mdiMenu"
45+
title="Add menu item"
46+
main
47+
>
48+
<BaseButton
49+
:route-name="route('menu.item.index', menu.id)"
50+
:icon="mdiArrowLeftBoldOutline"
51+
label="Back"
52+
color="white"
53+
rounded-full
54+
small
55+
/>
56+
</SectionTitleLineWithButton>
57+
<CardBox
58+
form
59+
@submit.prevent="form.post(route('menu.item.store', menu.id))"
60+
>
61+
<FormField
62+
label="Name"
63+
:class="{ 'text-red-400': form.errors.name }"
64+
>
65+
<FormControl
66+
v-model="form.name"
67+
type="text"
68+
placeholder="Enter Name"
69+
:error="form.errors.name"
70+
>
71+
<div class="text-red-400 text-sm" v-if="form.errors.name">
72+
{{ form.errors.name }}
73+
</div>
74+
</FormControl>
75+
</FormField>
76+
<FormField
77+
label="Link"
78+
:class="{ 'text-red-400': form.errors.uri }"
79+
>
80+
<FormControl
81+
v-model="form.uri"
82+
type="text"
83+
placeholder="Enter Link"
84+
:error="form.errors.name"
85+
>
86+
<div class="item-list">
87+
You can also enter an internal path such as <em class="placeholder">/home</em> or an external URL such as <em class="placeholder">http://example.com</em>.
88+
Add prefix <em class="placeholder">&lt;admin&gt;</em> to link for admin page. Enter <em class="placeholder">&lt;nolink&gt;</em> to display link text only.
89+
</div>
90+
<div class="text-red-400 text-sm" v-if="form.errors.uri">
91+
{{ form.errors.uri }}
92+
</div>
93+
</FormControl>
94+
</FormField>
95+
<FormField
96+
label="Description"
97+
:class="{ 'text-red-400': form.errors.description }"
98+
>
99+
<FormControl
100+
v-model="form.description"
101+
type="text"
102+
placeholder="Enter Description"
103+
:error="form.errors.description"
104+
>
105+
<div class="text-red-400 text-sm" v-if="form.errors.description">
106+
{{ form.errors.description }}
107+
</div>
108+
</FormControl>
109+
</FormField>
110+
<FormCheckRadioGroup
111+
v-model="form.enabled"
112+
name="enabled"
113+
:options="{ enabled: 'Enabled' }"
114+
/>
115+
<FormField
116+
label="Parent Item"
117+
:class="{ 'text-red-400': form.errors.parent_id }"
118+
>
119+
<FormControl
120+
v-model="form.parent_id"
121+
type="select"
122+
placeholder="--ROOT--"
123+
:error="form.errors.parent_id"
124+
:options="item_options"
125+
>
126+
<div class="text-red-400 text-sm" v-if="form.errors.parent_id">
127+
{{ form.errors.parent_id }}
128+
</div>
129+
<div>
130+
The maximum depth for a link and all its children is fixed. Some menu links may not be available as parents if selecting them would exceed this limit.
131+
</div>
132+
</FormControl>
133+
</FormField>
134+
<FormField
135+
label="Weight"
136+
:class="{ 'text-red-400': form.errors.weight }"
137+
>
138+
<FormControl
139+
v-model="form.weight"
140+
type="text"
141+
placeholder="Enter Weight"
142+
:error="form.errors.weight"
143+
>
144+
<div class="text-red-400 text-sm" v-if="form.errors.weight">
145+
{{ form.errors.weight }}
146+
</div>
147+
</FormControl>
148+
</FormField>
149+
<template #footer>
150+
<BaseButtons>
151+
<BaseButton
152+
type="submit"
153+
color="info"
154+
label="Submit"
155+
:class="{ 'opacity-25': form.processing }"
156+
:disabled="form.processing"
157+
/>
158+
</BaseButtons>
159+
</template>
160+
</CardBox>
161+
</SectionMain>
162+
</LayoutAuthenticated>
163+
</template>

0 commit comments

Comments
 (0)