Skip to content

Commit a5774a4

Browse files
balajidharmabalajidharma
committed
Applied Admin One template to Permission CRUD
1 parent f51cfd6 commit a5774a4

File tree

8 files changed

+328
-552
lines changed

8 files changed

+328
-552
lines changed

‎resources/js/Components/BaseButton.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ const componentClass = computed(() => {
112112
<component
113113
:is="is"
114114
:class="componentClass"
115-
:href="routeName ? route(routeName) : href"
115+
:href="routeName ? routeName : href"
116116
:type="computedType"
117117
:target="target"
118118
:disabled="disabled"

‎resources/js/Components/FormControl.vue

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@ const props = defineProps({
4343
required: Boolean,
4444
borderless: Boolean,
4545
transparent: Boolean,
46-
ctrlKFocus: Boolean
46+
ctrlKFocus: Boolean,
47+
error: Boolean
4748
})
4849
4950
const emit = defineEmits(['update:modelValue', 'setRef'])
@@ -57,11 +58,12 @@ const computedValue = computed({
5758
5859
const inputElClass = computed(() => {
5960
const base = [
60-
'px-3 py-2 max-w-full focus:ring focus:outline-none border-gray-700 rounded w-full',
61+
'px-3 py-2 max-w-full focus:ring focus:outline-none rounded w-full',
6162
'dark:placeholder-gray-400',
6263
computedType.value === 'textarea' ? 'h-24' : 'h-12',
6364
props.borderless ? 'border-0' : 'border',
64-
props.transparent ? 'bg-transparent' : 'bg-white dark:bg-slate-800'
65+
props.transparent ? 'bg-transparent' : 'bg-white dark:bg-slate-800',
66+
props.error ? 'border-red-400' : 'border-gray-700'
6567
]
6668
6769
if (props.icon) {
@@ -163,5 +165,6 @@ if (props.ctrlKFocus) {
163165
:icon="icon"
164166
:h="controlIconH"
165167
/>
168+
<slot />
166169
</div>
167170
</template>

‎resources/js/Pages/Admin/Permission/Create.vue

Lines changed: 61 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,72 @@
11
<script setup>
2-
import BreezeAuthenticatedLayout from "@/Layouts/Authenticated.vue";
32
import { Head, Link, useForm } from "@inertiajs/inertia-vue3";
4-
import BreezeButton from "@/Components/Button.vue";
3+
import {
4+
mdiAccountKey,
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 BaseButton from '@/Components/BaseButton.vue';
14+
import BaseButtons from '@/Components/BaseButtons.vue'
515
616
const form = useForm({
717
name: '',
818
});
919
</script>
1020

1121
<template>
12-
<Head title="Create permission" />
13-
14-
<BreezeAuthenticatedLayout>
15-
<template #header>
16-
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
17-
Permissions
18-
</h2>
19-
</template>
20-
21-
<div class="py-12">
22-
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
23-
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
24-
<div class="p-6 bg-white border-b border-gray-200">
25-
<div class="flex flex-col">
26-
<div>
27-
<h1
28-
class="
29-
inline-block
30-
text-2xl
31-
sm:text-3xl
32-
font-extrabold
33-
text-slate-900
34-
tracking-tight
35-
dark:text-slate-200
36-
py-4
37-
block
38-
sm:inline-block
39-
flex
40-
"
41-
>
42-
Create permission
43-
</h1>
44-
<Link
45-
:href="route('permission.index')"
46-
class="
47-
no-underline
48-
hover:underline
49-
text-cyan-600
50-
dark:text-cyan-400
51-
"
52-
>&lt;&lt; Back to all permissions</Link
53-
>
54-
</div>
55-
<div class="w-full py-2 bg-white overflow-hidden">
56-
<form @submit.prevent="form.post(route('permission.store'))">
57-
<div class="py-2">
58-
<label
59-
class="block font-bold text-sm text-gray-700"
60-
:class="{ 'text-red-400': form.errors.name }"
61-
for="name"
62-
>
63-
Name
64-
</label>
65-
66-
<input
67-
class="
68-
my-2
69-
rounded-md
70-
shadow-sm
71-
border-gray-300
72-
focus:border-indigo-300
73-
focus:ring
74-
focus:ring-indigo-200
75-
focus:ring-opacity-50
76-
block
77-
w-full
78-
"
79-
:class="{ 'border-red-400': form.errors.name }"
80-
id="name"
81-
type="text"
82-
v-model="form.name"
83-
/>
84-
<div class="text-red-400 text-sm" v-if="form.errors.name">
85-
{{ form.errors.name }}
86-
</div>
87-
</div>
88-
89-
<div class="flex justify-end mt-4">
90-
<BreezeButton
91-
class="ml-4"
92-
:class="{ 'opacity-25': form.processing }"
93-
:disabled="form.processing"
94-
>
95-
Create
96-
</BreezeButton>
97-
</div>
98-
</form>
99-
</div>
22+
<LayoutAuthenticated>
23+
<Head title="Create permission" />
24+
<SectionMain>
25+
<SectionTitleLineWithButton
26+
:icon="mdiAccountKey"
27+
title="Add permission"
28+
main
29+
>
30+
<BaseButton
31+
:routeName="route('permission.index')"
32+
:icon="mdiArrowLeftBoldOutline"
33+
label="Back"
34+
color="white"
35+
rounded-full
36+
small
37+
/>
38+
</SectionTitleLineWithButton>
39+
<CardBox
40+
form
41+
@submit.prevent="form.post(route('permission.store'))"
42+
>
43+
<FormField
44+
label="Name"
45+
:class="{ 'text-red-400': form.errors.name }"
46+
>
47+
<FormControl
48+
v-model="form.name"
49+
type="text"
50+
placeholder="Name"
51+
:error="form.errors.name"
52+
>
53+
<div class="text-red-400 text-sm" v-if="form.errors.name">
54+
{{ form.errors.name }}
10055
</div>
101-
</div>
102-
</div>
103-
</div>
104-
</div>
105-
</BreezeAuthenticatedLayout>
56+
</FormControl>
57+
</FormField>
58+
<template #footer>
59+
<BaseButtons>
60+
<BaseButton
61+
type="submit"
62+
color="info"
63+
label="Submit"
64+
:class="{ 'opacity-25': form.processing }"
65+
:disabled="form.processing"
66+
/>
67+
</BaseButtons>
68+
</template>
69+
</CardBox>
70+
</SectionMain>
71+
</LayoutAuthenticated>
10672
</template>

‎resources/js/Pages/Admin/Permission/Edit.vue

Lines changed: 61 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
11
<script setup>
2-
import BreezeAuthenticatedLayout from "@/Layouts/Authenticated.vue";
32
import { Head, Link, useForm } from "@inertiajs/inertia-vue3";
4-
import BreezeButton from "@/Components/Button.vue";
3+
import {
4+
mdiAccountKey,
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 BaseButton from '@/Components/BaseButton.vue';
14+
import BaseButtons from '@/Components/BaseButtons.vue'
515
616
const props = defineProps({
717
permission: {
@@ -17,102 +27,54 @@ const form = useForm({
1727
</script>
1828

1929
<template>
20-
<Head title="Update permission" />
21-
22-
<BreezeAuthenticatedLayout>
23-
<template #header>
24-
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
25-
Permissions
26-
</h2>
27-
</template>
28-
29-
<div class="py-12">
30-
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
31-
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
32-
<div class="p-6 bg-white border-b border-gray-200">
33-
<div class="flex flex-col">
34-
<div>
35-
<h1
36-
class="
37-
inline-block
38-
text-2xl
39-
sm:text-3xl
40-
font-extrabold
41-
text-slate-900
42-
tracking-tight
43-
dark:text-slate-200
44-
py-4
45-
block
46-
sm:inline-block
47-
flex
48-
"
49-
>
50-
Update permission
51-
</h1>
52-
<Link
53-
:href="route('permission.index')"
54-
class="
55-
no-underline
56-
hover:underline
57-
text-cyan-600
58-
dark:text-cyan-400
59-
"
60-
>&lt;&lt; Back to all permissions</Link
61-
>
62-
</div>
63-
<div class="w-full py-2 bg-white overflow-hidden">
64-
<form
65-
@submit.prevent="
66-
form.post(route('permission.update', this.permission.id))
67-
"
68-
>
69-
<div class="py-2">
70-
<label
71-
class="block font-bold text-sm text-gray-700"
72-
:class="{ 'text-red-400': form.errors.name }"
73-
for="name"
74-
>
75-
Name
76-
</label>
77-
78-
<input
79-
class="
80-
my-2
81-
rounded-md
82-
shadow-sm
83-
border-gray-300
84-
focus:border-indigo-300
85-
focus:ring
86-
focus:ring-indigo-200
87-
focus:ring-opacity-50
88-
block
89-
w-full
90-
"
91-
:class="{ 'border-red-400': form.errors.name }"
92-
id="name"
93-
type="text"
94-
v-model="form.name"
95-
/>
96-
<div class="text-red-400 text-sm" v-if="form.errors.name">
97-
{{ form.errors.name }}
98-
</div>
99-
</div>
100-
101-
<div class="flex justify-end mt-4">
102-
<BreezeButton
103-
class="ml-4"
104-
:class="{ 'opacity-25': form.processing }"
105-
:disabled="form.processing"
106-
>
107-
Update
108-
</BreezeButton>
109-
</div>
110-
</form>
111-
</div>
30+
<LayoutAuthenticated>
31+
<Head title="Update permission" />
32+
<SectionMain>
33+
<SectionTitleLineWithButton
34+
:icon="mdiAccountKey"
35+
title="Update permission"
36+
main
37+
>
38+
<BaseButton
39+
:routeName="route('permission.index')"
40+
:icon="mdiArrowLeftBoldOutline"
41+
label="Back"
42+
color="white"
43+
rounded-full
44+
small
45+
/>
46+
</SectionTitleLineWithButton>
47+
<CardBox
48+
form
49+
@submit.prevent="form.post(route('permission.update', this.permission.id))"
50+
>
51+
<FormField
52+
label="Name"
53+
:class="{ 'text-red-400': form.errors.name }"
54+
>
55+
<FormControl
56+
v-model="form.name"
57+
type="text"
58+
placeholder="Name"
59+
:error="form.errors.name"
60+
>
61+
<div class="text-red-400 text-sm" v-if="form.errors.name">
62+
{{ form.errors.name }}
11263
</div>
113-
</div>
114-
</div>
115-
</div>
116-
</div>
117-
</BreezeAuthenticatedLayout>
64+
</FormControl>
65+
</FormField>
66+
<template #footer>
67+
<BaseButtons>
68+
<BaseButton
69+
type="submit"
70+
color="info"
71+
label="Submit"
72+
:class="{ 'opacity-25': form.processing }"
73+
:disabled="form.processing"
74+
/>
75+
</BaseButtons>
76+
</template>
77+
</CardBox>
78+
</SectionMain>
79+
</LayoutAuthenticated>
11880
</template>

0 commit comments

Comments
 (0)