Skip to content

Commit 2b15736

Browse files
HaoNguyen-Ronimrim12
HaoNguyen-Ron
authored and
imrim12
committed
feat: role CRUD
1 parent a66cf6b commit 2b15736

File tree

11 files changed

+331
-170
lines changed

11 files changed

+331
-170
lines changed

‎app/components/permissions/AddEditPermissionDialog.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script setup lang="ts">
2-
import { on } from 'node:events'
32
import type { VForm } from 'vuetify/components/VForm'
43
import type { Permission } from '~/stores/admin/permission'
54
import { useRoleStore } from '~/stores/admin/role'
@@ -38,6 +37,8 @@ const localPermissionData = ref<Partial<Permission>>({
3837
function onReset() {
3938
emit('update:isDialogVisible', false)
4039
40+
refForm.value?.reset()
41+
4142
localPermissionData.value = {
4243
id: '',
4344
role_id: '',

‎app/components/roles/AddEditRoleDialog.vue

+105-158
Original file line numberDiff line numberDiff line change
@@ -1,171 +1,121 @@
11
<script setup lang="ts">
22
import { VForm } from 'vuetify/components/VForm'
3-
4-
interface Permission {
5-
name: string
6-
read: boolean
7-
write: boolean
8-
create: boolean
9-
}
10-
11-
interface Roles {
12-
name: string
13-
permissions: Permission[]
14-
}
3+
import { usePermissionStore } from '~/stores/admin/permission'
4+
import { type Role, useRoleStore } from '~/stores/admin/role'
155
166
interface Props {
17-
rolePermissions?: Roles
187
isDialogVisible: boolean
8+
roleData?: Partial<Role>
199
}
2010
interface Emit {
2111
(e: 'update:isDialogVisible', value: boolean): void
22-
(e: 'update:rolePermissions', value: Roles): void
12+
(e: 'update:rolePermissions', value: Partial<Role>): void
2313
}
2414
25-
const props = withDefaults(defineProps<Props>(), {
26-
rolePermissions: () => ({
27-
name: '',
28-
permissions: [],
29-
}),
30-
})
31-
15+
const props = defineProps<Props>()
3216
const emit = defineEmits<Emit>()
3317
34-
// 👉 Permission List
35-
const permissions = ref<Permission[]>([
36-
{
37-
name: 'User Management',
38-
read: false,
39-
write: false,
40-
create: false,
41-
},
42-
{
43-
name: 'Content Management',
44-
read: false,
45-
write: false,
46-
create: false,
47-
},
48-
{
49-
name: 'Disputes Management',
50-
read: false,
51-
write: false,
52-
create: false,
53-
},
54-
{
55-
name: 'Database Management',
56-
read: false,
57-
write: false,
58-
create: false,
59-
},
60-
{
61-
name: 'Financial Management',
62-
read: false,
63-
write: false,
64-
create: false,
65-
},
66-
{
67-
name: 'Reporting',
68-
read: false,
69-
write: false,
70-
create: false,
71-
},
72-
{
73-
name: 'API Control',
74-
read: false,
75-
write: false,
76-
create: false,
77-
},
78-
{
79-
name: 'Repository Management',
80-
read: false,
81-
write: false,
82-
create: false,
83-
},
84-
{
85-
name: 'Payroll',
86-
read: false,
87-
write: false,
88-
create: false,
89-
},
90-
])
18+
const roleStore = useRoleStore()
19+
const { roleList } = storeToRefs(roleStore)
20+
const permissionStore = usePermissionStore()
21+
const { permissionList } = storeToRefs(permissionStore)
9122
92-
const isSelectAll = ref(false)
93-
const role = ref('')
9423
const refPermissionForm = ref<VForm>()
24+
const isFormValid = ref(false)
9525
96-
const checkedCount = computed(() => {
97-
let counter = 0
98-
99-
permissions.value.forEach((permission) => {
100-
Object.entries(permission).forEach(([key, value]) => {
101-
if (key !== 'name' && value)
102-
counter++
103-
})
104-
})
105-
106-
return counter
26+
const isSelectAll = ref(false)
27+
const localRoleData = ref<Partial<Role>>({
28+
id: '',
29+
name: '',
10730
})
10831
109-
const isIndeterminate = computed(() => checkedCount.value > 0 && checkedCount.value < (permissions.value.length * 3))
32+
// const checkedCount = computed(() => {
33+
// let counter = 0
34+
35+
// permissions.value.forEach((permission) => {
36+
// Object.entries(permission).forEach(([key, value]) => {
37+
// if (key !== 'name' && value)
38+
// counter++
39+
// })
40+
// })
41+
42+
// return counter
43+
// })
44+
45+
// const isIndeterminate = computed(() => checkedCount.value > 0 && checkedCount.value < (permissions.value.length * 3))
46+
47+
// // select all
48+
// watch(isSelectAll, (val) => {
49+
// permissions.value = permissions.value.map(permission => ({
50+
// ...permission,
51+
// read: val,
52+
// write: val,
53+
// create: val,
54+
// }))
55+
// })
56+
57+
// // if Indeterminate is false, then set isSelectAll to false
58+
// watch(isIndeterminate, () => {
59+
// if (!isIndeterminate.value)
60+
// isSelectAll.value = false
61+
// })
62+
63+
// // if all permissions are checked, then set isSelectAll to true
64+
// watch(permissions, () => {
65+
// if (checkedCount.value === (permissions.value.length * 3))
66+
// isSelectAll.value = true
67+
// }, { deep: true })
68+
69+
// // if rolePermissions is not empty, then set permissions
70+
// watch(() => props, () => {
71+
// if (props.rolePermissions && props.rolePermissions.permissions.length) {
72+
// role.value = props.rolePermissions.name
73+
// permissions.value = permissions.value.map((permission) => {
74+
// const rolePermission = props.rolePermissions?.permissions.find(item => item.name === permission.name)
75+
76+
// if (rolePermission) {
77+
// return {
78+
// ...permission,
79+
// ...rolePermission,
80+
// }
81+
// }
82+
83+
// return permission
84+
// })
85+
// }
86+
// })
11087
111-
// select all
112-
watch(isSelectAll, (val) => {
113-
permissions.value = permissions.value.map(permission => ({
114-
...permission,
115-
read: val,
116-
write: val,
117-
create: val,
118-
}))
119-
})
88+
function onReset() {
89+
emit('update:isDialogVisible', false)
12090
121-
// if Indeterminate is false, then set isSelectAll to false
122-
watch(isIndeterminate, () => {
123-
if (!isIndeterminate.value)
124-
isSelectAll.value = false
125-
})
91+
isSelectAll.value = false
92+
refPermissionForm.value?.reset()
12693
127-
// if all permissions are checked, then set isSelectAll to true
128-
watch(permissions, () => {
129-
if (checkedCount.value === (permissions.value.length * 3))
130-
isSelectAll.value = true
131-
}, { deep: true })
132-
133-
// if rolePermissions is not empty, then set permissions
134-
watch(() => props, () => {
135-
if (props.rolePermissions && props.rolePermissions.permissions.length) {
136-
role.value = props.rolePermissions.name
137-
permissions.value = permissions.value.map((permission) => {
138-
const rolePermission = props.rolePermissions?.permissions.find(item => item.name === permission.name)
139-
140-
if (rolePermission) {
141-
return {
142-
...permission,
143-
...rolePermission,
144-
}
145-
}
146-
147-
return permission
148-
})
94+
localRoleData.value = {
95+
id: '',
96+
name: '',
14997
}
150-
})
98+
}
15199
152100
function onSubmit() {
153-
const rolePermissions = {
154-
name: role.value,
155-
permissions: permissions.value,
156-
}
157-
158-
emit('update:rolePermissions', rolePermissions)
159-
emit('update:isDialogVisible', false)
160-
isSelectAll.value = false
161-
refPermissionForm.value?.reset()
101+
refPermissionForm.value?.validate().then(({ valid }) => {
102+
if (valid) {
103+
emit('update:rolePermissions', props.roleData
104+
? localRoleData.value
105+
: {
106+
name: localRoleData.value.name,
107+
})
108+
109+
onReset()
110+
}
111+
})
162112
}
163113
164-
function onReset() {
165-
emit('update:isDialogVisible', false)
166-
isSelectAll.value = false
167-
refPermissionForm.value?.reset()
168-
}
114+
watch(() => props.roleData, (newRoleData) => {
115+
if (newRoleData) {
116+
localRoleData.value = { ...newRoleData }
117+
}
118+
}, { immediate: true })
169119
</script>
170120

171121
<template>
@@ -186,19 +136,16 @@ function onReset() {
186136
<!-- 👉 Title -->
187137
<div class="text-center mb-10">
188138
<h4 class="text-h4 mb-2">
189-
{{ props.rolePermissions.name ? 'Edit' : 'Add' }} Role
139+
{{ !props.roleData ? 'Add' : 'Edit' }} Role
190140
</h4>
191-
192-
<p class="text-body-1">
193-
{{ props.rolePermissions.name ? 'Edit' : 'Add' }} Role
194-
</p>
195141
</div>
196142

197143
<!-- 👉 Form -->
198-
<VForm ref="refPermissionForm">
144+
<VForm ref="refPermissionForm" v-model="isFormValid" @submit.prevent>
199145
<!-- 👉 Role name -->
200146
<VTextField
201-
v-model="role"
147+
v-model="localRoleData.name"
148+
:rules="[requiredValidator]"
202149
label="Role Name"
203150
placeholder="Enter Role Name"
204151
/>
@@ -211,9 +158,9 @@ function onReset() {
211158

212159
<VTable class="permission-table text-no-wrap">
213160
<!-- 👉 Admin -->
214-
<tr>
161+
<!-- <tr>
215162
<td class="text-h6">
216-
Administrator Access
163+
Admin
217164
</td>
218165
<td colspan="3">
219166
<div class="d-flex justify-end">
@@ -224,16 +171,16 @@ function onReset() {
224171
/>
225172
</div>
226173
</td>
227-
</tr>
174+
</tr> -->
228175

229176
<!-- 👉 Other permission loop -->
230-
<template
231-
v-for="permission in permissions"
232-
:key="permission.name"
177+
<!-- <template
178+
v-for="permission in permissionList"
179+
:key="permission.id"
233180
>
234181
<tr>
235182
<td class="text-h6">
236-
{{ permission.name }}
183+
{{ permission.action }}
237184
</td>
238185
<td style="inline-size: 5.75rem;">
239186
<div class="d-flex justify-end">
@@ -260,7 +207,7 @@ function onReset() {
260207
</div>
261208
</td>
262209
</tr>
263-
</template>
210+
</template> -->
264211
</VTable>
265212

266213
<!-- 👉 Actions button -->

‎app/pages/test-permission.vue

+2
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,9 @@ async function handleOpenEditDialog(permissionId: string) {
7777
async function handlePermissionChange(payload: Partial<Permission>) {
7878
if (currentDialogAction.value === DRAWER_ACTION_TYPES.EDIT) {
7979
const { id, ...body } = payload
80+
8081
await updatePermission(id!, body)
82+
8183
nextTick(() => {
8284
handleResetPermissionData()
8385
})

0 commit comments

Comments
 (0)