feat: admin crud

Author: HaoNguyen-Ron

app/components/roles/AddEditRoleDialog.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
+import { cloneDeep, debounce } from 'lodash-es'
 import { VForm } from 'vuetify/components/VForm'
 import { usePermissionStore } from '~/stores/admin/permission'
+import type { PivotRolePermission, Role } from '~/stores/admin/role'
 
 interface Props {
   isDialogVisible: boolean
-  roleData?: Partial<Role>
+  roleData?: Partial<PivotRolePermission>
 }
 interface Emit {
   (e: 'update:isDialogVisible', value: boolean): void
-  (e: 'update:rolePermissions', value: Partial<Role>): void
+  (e: 'update:rolePermissions', value: Partial<PivotRolePermission>): void
 }
 
 const props = defineProps<Props>()
@@ -21,89 +23,61 @@ const { fetchPermissions } = permissionStore
 const refPermissionForm = ref<VForm>()
 const isFormValid = ref(false)
 
-const isSelectAll = ref(false)
-const localRoleData = ref<Partial<Role>>({
+const localRoleData = ref<Partial<PivotRolePermission>>({
   id: '',
   name: '',
+  permissions: [],
 })
 
-const permissions = [
-  {
-    action: 'Read',
-    subject: 'All',
-    value: {
-      action: 'read',
-      subject: 'all',
-    },
-  },
-  {
-    action: 'Read',
-    subject: 'Category',
-    value: {
-      action: 'read',
-      subject: 'category',
-    },
-  },
-  {
-    action: 'Create',
-    subject: 'All',
-    value: {
-      action: 'create',
-      subject: 'all',
-    },
-  },
-]
-
-// // select all
-// watch(isSelectAll, (val) => {
-//   permissions.value = permissions.value.map(permission => ({
-//     ...permission,
-//     read: val,
-//     write: val,
-//     create: val,
-//   }))
-// })
-
-// // if Indeterminate is false, then set isSelectAll to false
-// watch(isIndeterminate, () => {
-//   if (!isIndeterminate.value)
-//     isSelectAll.value = false
-// })
-
-// // if all permissions are checked, then set isSelectAll to true
-// watch(permissions, () => {
-//   if (checkedCount.value === (permissions.value.length * 3))
-//     isSelectAll.value = true
-// }, { deep: true })
-
-// // if rolePermissions is not empty, then set permissions
-// watch(() => props, () => {
-//   if (props.rolePermissions && props.rolePermissions.permissions.length) {
-//     role.value = props.rolePermissions.name
-//     permissions.value = permissions.value.map((permission) => {
-//       const rolePermission = props.rolePermissions?.permissions.find(item => item.name === permission.name)
-
-//       if (rolePermission) {
-//         return {
-//           ...permission,
-//           ...rolePermission,
-//         }
-//       }
-
-//       return permission
-//     })
-//   }
-// })
+// 👉 Fetch Query
+const queryKeyword = ref('')
+const queryOptions = ref<ParsedFilterQuery> ({
+  keyword: '',
+  keywordLower: '',
+  sortBy: 'action',
+  sortAsc: true,
+  limit: 10,
+  page: 1,
+  withCount: true,
+})
+
+const handleSearch = debounce((keyword: string) => {
+  queryOptions.value.keyword = keyword
+}, 1000)
 
+watch(queryKeyword, (newValue) => {
+  handleSearch(newValue)
+})
+
+watch(queryOptions.value, async () => {
+  await fetchPermissions(queryOptions.value)
+})
+
+// 👉 select all and none
+const isSelectAll = computed(() => {
+  return (
+    localRoleData.value.permissions?.length === permissionList.value.length
+  )
+})
+
+function handleCheckAllPermissions() {
+  localRoleData.value.permissions = [...permissionList.value]
+}
+
+function handleCheckNonePermissions() {
+  localRoleData.value.permissions = []
+}
+
+// 👉 Submit
 function onReset() {
   emit('update:isDialogVisible', false)
 
-  isSelectAll.value = false
   refPermissionForm.value?.reset()
 
   localRoleData.value = {
     id: '',
     name: '',
+    permissions: [],
   }
 }
 
@@ -114,6 +88,7 @@ function onSubmit() {
         ? localRoleData.value
         : {
             name: localRoleData.value.name,
+            permissions: localRoleData.value.permissions,
           })
 
       onReset()
@@ -123,12 +98,26 @@ function onSubmit() {
 
 watch(() => props.roleData, (newRoleData) => {
   if (newRoleData) {
-    localRoleData.value = { ...newRoleData }
+    localRoleData.value = {
+      id: newRoleData.id,
+      name: newRoleData.name,
+      permissions: permissionList.value.filter(permission =>
+        newRoleData.permissions?.some(p => p.id === permission.id),
+      ),
+    }
   }
 }, { immediate: true })
 
-onMounted(() => {
-  fetchPermissions()
+onMounted(async () => {
+  await fetchPermissions()
+
+  if (props.roleData) {
+    localRoleData.value.permissions = permissionList.value.filter(permission =>
+      props.roleData?.permissions?.some(p =>
+        p.id === permission.id,
+      ),
+    )
+  }
 })
 </script>
 
@@ -169,7 +158,7 @@ onMounted(() => {
           <VRow>
             <VCol cols="12" md="4" class="d-flex align-center">
               <h5 class="text-h5">
-                Role Permissions
+                Permissions
               </h5>
             </VCol>
 
@@ -180,20 +169,22 @@ onMounted(() => {
                 </p>
 
                 <VBtn
-                  color="secondary"
+                  :color="isSelectAll ? 'primary' : 'secondary'"
                   variant="text"
                   text="All"
+                  @click="handleCheckAllPermissions"
                 />
 
                 <VBtn
-                  color="secondary"
+                  :color="localRoleData?.permissions?.length === 0 ? 'primary' : 'secondary'"
                   variant="text"
                   text="None"
+                  @click="handleCheckNonePermissions"
                 />
 
                 <div class="flex-grow-1">
                   <VTextField
-                    v-model="search"
+                    v-model="queryKeyword"
                     placeholder="Search"
                     density="compact"
                     prepend-inner-icon="ri-search-line"
@@ -204,12 +195,22 @@ onMounted(() => {
           </VRow>
 
           <!-- 👉 Role Permissions -->
-          <div class="mt-6 d-flex flex-wrap gap-3">
-            <div v-for="permission in permissionList" :key="permission.id" class="d-flex align-center gap-2 flex-wrap border px-3 py-2">
+          <div class="mt-6 d-flex flex-wrap gap-3 permission-container">
+            <div v-for="permission in permissionList" :key="permission.id" class="d-flex align-center gap-2 flex-wrap">
               <VLabel>
-                <VCheckboxBtn />
-
-                {{ permission.action }}:{{ permission.subject }}
+                <VCheckbox
+                  v-model="localRoleData.permissions"
+                  :value="permission"
+                  class="border pa-2"
+                  :class="{ 'border border-primary text-primary': localRoleData?.permissions && localRoleData?.permissions.some(p => p.id === permission.id) }"
+                  multiple
+                >
+                  <template #label>
+                    <span class="pr-3" :class="{ 'text-primary': localRoleData?.permissions && localRoleData?.permissions.some(p => p.id === permission.id) }">
+                      {{ permission.action }} : {{ permission.subject }}
+                    </span>
+                  </template>
+                </VCheckbox>
               </VLabel>
             </div>
           </div>
@@ -235,4 +236,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
+.permission-container {
+  min-block-size: 150px;
+}
 </style>

app/components/roles/RoleCards.vue

@@ -195,7 +195,7 @@ function editPermission(value: RoleDetails) {
 </script>
 
 <template>
-  <VRow>
+  <VRow class="card-container">
     <!-- 👉 Roles -->
     <VCol
       v-for="item in roles"
@@ -309,3 +309,11 @@ function editPermission(value: RoleDetails) {
     v-model:role-permissions="roleDetail"
   />
 </template>
+
+<style lang="scss" scoped>
+.card-container {
+  max-height: 600px;
+  overflow-y: auto;
+  margin-bottom: 2rem;
+}
+</style>

app/pages/test-role.vue

@@ -20,9 +20,10 @@ const { roleList, totalRoles, roleDetail } = storeToRefs(roleStore)
 const { fetchRoles, fetchRoleDetail, createRole, updateRole, deleteRole, joinRolePermissions } = roleStore
 
 const currentRoleId = ref<string>('')
-const currentRoleData = ref<Partial<Role>>({
+const currentRoleData = ref<Partial<PivotRolePermission>>({
   id: '',
   name: '',
+  permissions: [],
 })
 const currentDialogAction = ref<DrawerActionTypes>('add')
 const currentDialogConfig = ref<RoleDialog>({
@@ -58,6 +59,7 @@ async function handleOpenEditDialog(roleId: string) {
   currentRoleData.value = {
     id: roleDetail.value?.id,
     name: roleDetail.value?.name,
+    permissions: cloneDeep(roleDetail.value?.permissions),
   }
 
   currentDialogConfig.value = {
@@ -67,7 +69,7 @@ async function handleOpenEditDialog(roleId: string) {
 }
 
 // 👉 Create or Update
-async function handleRoleChange(data: Partial<Role>) {
+async function handleRoleChange(data: Partial<PivotRolePermission>) {
   if (currentDialogAction.value === DRAWER_ACTION_TYPES.EDIT) {
     const { id, ...body } = data
 
@@ -215,7 +217,3 @@ useLazyAsyncData(
     />
   </div>
 </template>
-
-<style lang="scss" scoped>
-
-</style>

app/pages/test-user.vue

@@ -305,7 +305,15 @@ useLazyAsyncData(
           </div>
           <!-- 👉 Add user button -->
           <VBtn @click="handleOpenAddDrawer()">
-            Add New User
+            <template v-if="$vuetify.display.xs">
+              <VIcon icon="ri-add-line" />
+            </template>
+            <template v-else-if="$vuetify.display.mdAndDown">
+              <span>Add</span>   <VIcon icon="ri-add-line" />
+            </template>
+            <template v-else>
+              Add New User
+            </template>
           </VBtn>
         </div>
       </VCardText>

app/stores/admin/permission.ts

@@ -1,13 +1,18 @@
 import type { InferSelectModel } from 'drizzle-orm'
 import type { ParsedFilterQuery } from '@base/server/utils/filter'
 import type { sysPermissionTable } from '@base/server/db/schemas/sys_permissions.schema'
+import type { RolePermission } from './role'
 
 export type Permission = InferSelectModel<typeof sysPermissionTable>
 
+export interface PermissionWithRelations extends Permission {
+  rolePermission: RolePermission[]
+}
+
 export const usePermissionStore = defineStore('permission', () => {
-  const permissionList = ref<Permission[]>([])
+  const permissionList = ref<PermissionWithRelations[]>([])
   const totalPermissions = ref(0)
-  const permissionDetail = ref<Permission | null>(null)
+  const permissionDetail = ref<PermissionWithRelations | null>(null)
 
   async function fetchPermissions(options?: ParsedFilterQuery) {
     try {

app/stores/admin/role.ts

@@ -1,13 +1,19 @@
 import type { InferSelectModel } from 'drizzle-orm'
 import type { sysRoleTable } from '@base/server/db/schemas/sys_roles.schema'
 import type { ParsedFilterQuery } from '@base/server/utils/filter'
+import type { Permission } from './permission'
+import type { sysRolePermissionTable } from '~~/server/db/schemas'
 
 export type Role = InferSelectModel<typeof sysRoleTable>
+export type RolePermission = InferSelectModel<typeof sysRolePermissionTable>
+export interface PivotRolePermission extends Partial<Role> {
+  permissions: Permission[]
+}
 
 export const useRoleStore = defineStore('role', () => {
   const roleList = ref<Role[]>([])
   const totalRoles = ref<number>(0)
-  const roleDetail = ref<Role | null>(null)
+  const roleDetail = ref<RoleWithRelations | null>(null)
 
   async function fetchRoles(options?: ParsedFilterQuery) {
     try {
@@ -29,7 +35,7 @@ export const useRoleStore = defineStore('role', () => {
         method: 'GET',
       })
 
-      roleDetail.value = response.data
+      roleDetail.value = response
     }
     catch (error) {
       console.error('Error fetching role detail:', error)