fix: role edit

imrim12 · imrim12 · commit 44ce900949b6 · 2024-11-22T00:08:33.000+07:00
diff --git a/app/components/roles/AddEditRoleDialog.vue b/app/components/roles/AddEditRoleDialog.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { debounce, values } from 'lodash-es'
-import { VForm } from 'vuetify/components/VForm'
-import { usePermissionStore } from '@base/stores/admin/permission'
 import type { Permission } from '@base/stores/admin/permission'
-import type { PivotRolePermission, RoleWithPermissions } from '@base/stores/admin/role'
+import type { RoleWithPermissions } from '@base/stores/admin/role'
 import { requiredValidator } from '#imports'
+import { VForm } from 'vuetify/components/VForm'
 
 const props = defineProps<{
   role?: RoleWithPermissions | null
@@ -13,7 +11,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: 'edit', payload: ReturnType<typeof getDefaultFormData>): void
-  (e: 'create', payload: ReturnType<typeof getDefaultFormData>): void
+  (e: 'create', payload: Omit<ReturnType<typeof getDefaultFormData>, 'id'>): void
 }>()
 
 const modelValue = defineModel<boolean>({
@@ -30,6 +28,8 @@ function getDefaultFormData(): { id: string, name: string, permissions: string[]
 
 const formData = ref(getDefaultFormData())
 
+const formTemplate = useTemplateRef('formRef')
+
 syncRef(computed(() => props.role), formData, {
   direction: 'ltr',
   transform: {
@@ -57,18 +57,26 @@ watch(modelValue, (value) => {
   }
 })
 
-const formTemplate = useTemplateRef('formRef')
-
 async function handleSubmit() {
   try {
     if (formTemplate.value) {
-      const { valid } = await formTemplate.value.validate()
+      const { valid, errors } = await formTemplate.value.validate()
 
       if (valid) {
-        if (formData.value.id)
+        if (formData.value.id) {
           emit('edit', formData.value)
-        else
-          emit('create', formData.value)
+        }
+        else {
+          emit('create', {
+            name: formData.value.name,
+            permissions: formData.value.permissions,
+          })
+        }
+      }
+      else if (errors.length) {
+        notifyWarning({
+          content: errors[0]?.errorMessages[0],
+        })
       }
     }
   }
@@ -98,7 +106,7 @@ async function handleSubmit() {
         </div>
 
         <!-- 👉 Form -->
-        <VForm ref="formRef" @submit.prevent="handleSubmit">
+        <VForm ref="formRef">
           <!-- 👉 Role name -->
           <VTextField
             v-model="formData.name"
@@ -114,14 +122,14 @@ async function handleSubmit() {
               <VLabel>
                 <VCheckbox
                   v-model="formData.permissions"
-                  :value="permission.id"
-                  class="border pa-2"
-                  :class="{ 'border border-primary text-primary': formData.permissions.includes(permission.id) }"
                   multiple
+                  :class="{ 'text-primary': formData.permissions.includes(permission.id) }"
+                  :value="permission.id"
+                  :rules="[requiredValidator(formData.permissions)]"
                 >
                   <template #label>
                     <span class="pr-3" :class="{ 'text-primary': formData.permissions.includes(permission.id) }">
-                      {{ permission.action }}:{{ permission.subject }}
+                      {{ permission.action.toLowerCase() }}:{{ permission.subject.toLowerCase() }}
                     </span>
                   </template>
                 </VCheckbox>
@@ -131,7 +139,7 @@ async function handleSubmit() {
 
           <!-- 👉 Actions button -->
           <div class="d-flex align-center justify-center gap-3 mt-6">
-            <VBtn type="submit">
+            <VBtn @click="handleSubmit">
               {{ role ? $t('Update Role') : $t('Create Role') }}
             </VBtn>
 
diff --git a/app/components/roles/RoleCards.vue b/app/components/roles/RoleCards.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import poseM from '@base/images/pages/pose_m1.png'
+import type { Permission } from '@base/stores/admin/permission'
 
 import type { RoleWithPermissions } from '@base/stores/admin/role'
-import type { Permission } from '@base/stores/admin/permission'
+import poseM from '@base/images/pages/pose_m1.png'
 import AddEditRoleDialog from './AddEditRoleDialog.vue'
 
 defineProps<{
@@ -12,7 +12,7 @@ defineProps<{
 
 const emit = defineEmits<{
   (e: 'edit', payload: { id: string, name: string, permissions: string[] }): void
-  (e: 'create', payload: { id: string, name: string, permissions: string[] }): void
+  (e: 'create', payload: { name: string, permissions: string[] }): void
   (e: 'delete', payload: RoleWithPermissions): void
 }>()
 
@@ -54,7 +54,7 @@ function handleSubmitEdit(role: { id: string, name: string, permissions: string[
   dialogVisible.value = false
 }
 
-function handleSubmitCreate(role: { id: string, name: string, permissions: string[] }) {
+function handleSubmitCreate(role: { name: string, permissions: string[] }) {
   emit('create', role)
 
   dialogVisible.value = false
@@ -168,20 +168,16 @@ function handleSubmitCreate(role: { id: string, name: string, permissions: strin
           </VCol>
         </VRow>
       </VCard>
-      <AddEditRoleDialog
-        v-model="dialogVisible"
-        :role="roleSelected"
-        :permissions="permissions"
-        @edit="handleSubmitEdit"
-      />
     </VCol>
-  </VRow>
 
-  <AddEditRoleDialog
-    v-model="dialogVisible"
-    :permissions="permissions"
-    @create="handleSubmitCreate"
-  />
+    <AddEditRoleDialog
+      v-model="dialogVisible"
+      :role="roleSelected"
+      :permissions="permissions"
+      @edit="handleSubmitEdit"
+      @create="handleSubmitCreate"
+    />
+  </VRow>
 </template>
 
 <style lang="scss" scoped>
diff --git a/app/pages/admin/roles.vue b/app/pages/admin/roles.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import RoleCards from '@base/components/roles/RoleCards.vue'
 import type { RoleWithPermissions } from '@base/stores/admin/role'
-import { useRoleStore } from '@base/stores/admin/role'
+import RoleCards from '@base/components/roles/RoleCards.vue'
 import { usePermissionStore } from '@base/stores/admin/permission'
+import { useRoleStore } from '@base/stores/admin/role'
+import { sortBy } from 'lodash-es'
 // import UserList from '@base/components/roles/UserList.vue'
 
 definePageMeta({
@@ -28,6 +29,12 @@ const { data: roleData, refresh: reFetchRoles } = useLazyAsyncData('roles', () =
 
 const { data: permissionData } = useLazyAsyncData('permissions', () => permissionStore.fetchPermissions({ page: 1, limit: 100, keyword: '' }), {
   server: false,
+  transform(permissionData) {
+    return {
+      ...permissionData,
+      data: sortBy(permissionData.data, ['subject', 'action']),
+    }
+  },
 })
 
 async function handleSubmitEdit(role: { id: string, name: string, permissions: string[] }) {
@@ -40,7 +47,7 @@ async function handleSubmitEdit(role: { id: string, name: string, permissions: s
   await reFetchRoles()
 }
 
-async function handleSubmitCreate(role: { id: string, name: string, permissions: string[] }) {
+async function handleSubmitCreate(role: { name: string, permissions: string[] }) {
   await roleStore.createRole(role)
 
   notifySuccess({
diff --git a/app/stores/admin/role.ts b/app/stores/admin/role.ts
@@ -1,7 +1,7 @@
-import type { InferSelectModel } from 'drizzle-orm'
+import type { sysRolePermissionTable } from '@base/server/db/schemas'
 import type { sysRoleTable } from '@base/server/db/schemas/sys_roles.schema'
 import type { ParsedFilterQuery } from '@base/server/utils/filter'
-import type { sysRolePermissionTable } from '@base/server/db/schemas'
+import type { InferSelectModel } from 'drizzle-orm'
 import type { Permission } from './permission'
 
 export type Role = InferSelectModel<typeof sysRoleTable>
@@ -20,60 +20,35 @@ export interface PivotRolePermission extends Partial<Role> {
 
 export const useRoleStore = defineStore('role', () => {
   async function fetchRoles(options?: ParsedFilterQuery) {
-    try {
-      return await $api<{ total: number, data: RoleWithPermissions[] }>('/roles', {
-        query: options,
-      })
-    }
-    catch (error) {
-      console.error('Error fetching roles:', error)
-    }
+    return await $api<{ total: number, data: RoleWithPermissions[] }>('/roles', {
+      query: options,
+    })
   }
 
   async function fetchRoleDetail(roleId: string) {
-    try {
-      return await $api(`/roles/${roleId}`, {
-        method: 'GET',
-      })
-    }
-    catch (error) {
-      console.error('Error fetching role detail:', error)
-    }
+    return await $api(`/roles/${roleId}`, {
+      method: 'GET',
+    })
   }
 
-  async function createRole(body: { id: string, name: string, permissions: string[] }) {
-    try {
-      return await $api<Role>('/roles', {
-        method: 'POST',
-        body: omit(body, ['id']),
-      })
-    }
-    catch (error) {
-      console.error('Error creating role:', error)
-    }
+  async function createRole(body: { name: string, permissions: string[] }) {
+    return await $api<Role>('/roles', {
+      method: 'POST',
+      body,
+    })
   }
 
   async function updateRole(roleId: string, body: { id: string, name: string, permissions: string[] }) {
-    try {
-      return await $api(`/roles/${roleId}`, {
-        method: 'PATCH',
-        body,
-      })
-    }
-    catch (error) {
-      console.error('Error updating role:', error)
-    }
+    return await $api(`/roles/${roleId}`, {
+      method: 'PATCH',
+      body,
+    })
   }
 
   async function deleteRole(roleId: string) {
-    try {
-      return await $api(`/roles/${roleId}`, {
-        method: 'DELETE',
-      })
-    }
-    catch (error) {
-      console.error('Error deleting role:', error)
-    }
+    return await $api(`/roles/${roleId}`, {
+      method: 'DELETE',
+    })
   }
 
   return {
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -39,6 +39,10 @@ export default defineNuxtConfig({
 
   devtools: {
     enabled: true,
+
+    timeline: {
+      enabled: true,
+    },
   },
 
   css: [
diff --git a/server/api/roles/index.post.ts b/server/api/roles/index.post.ts
@@ -12,7 +12,7 @@ export default defineEventHandler(async (event) => {
 
     setResponseStatus(event, 201)
 
-    return response.data
+    return response
   }
   catch (error: any) {
     throw parseError(error)
diff --git a/server/composables/useRole.ts b/server/composables/useRole.ts
@@ -72,29 +72,23 @@ export function useRole() {
   }
 
   async function createRole(body: any) {
-    await db.transaction(async (tx) => {
-      const data = await tx.insert(sysRoleTable).values({ name: body.name }).returning({ id: sysRoleTable.id })
+    const data = await db.insert(sysRoleTable).values({ name: body.name }).returning({ id: sysRoleTable.id })
 
-      await tx.delete(sysRolePermissionTable).where(eq(sysRolePermissionTable.role_id, data[0].id))
-
-      await tx.insert(sysRolePermissionTable).values(body.permissions.map((permissionId: string) => ({
-        role_id: data[0].id,
-        permission_id: permissionId,
-      })))
-    })
+    await db.insert(sysRolePermissionTable).values(body.permissions.map((permissionId: string) => ({
+      role_id: data[0].id,
+      permission_id: permissionId,
+    })))
   }
 
   async function updateRoleById(id: string, body: any) {
-    await db.transaction(async (tx) => {
-      await tx.update(sysRoleTable).set({ name: body.name }).where(eq(sysRoleTable.id, id))
+    await db.update(sysRoleTable).set({ name: body.name }).where(eq(sysRoleTable.id, id))
 
-      await tx.delete(sysRolePermissionTable).where(eq(sysRolePermissionTable.role_id, id))
+    await db.delete(sysRolePermissionTable).where(eq(sysRolePermissionTable.role_id, id))
 
-      await tx.insert(sysRolePermissionTable).values(body.permissions.map((permissionId: string) => ({
-        role_id: id,
-        permission_id: permissionId,
-      })))
-    })
+    await db.insert(sysRolePermissionTable).values(body.permissions.map((permissionId: string) => ({
+      role_id: id,
+      permission_id: permissionId,
+    })))
   }
 
   async function deleteRoleById(id: string) {

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ export default defineEventHandler(async (event) => {`
`12`	`12`
`13`	`13`	`setResponseStatus(event, 201)`
`14`	`14`
`15`		`- return response.data`
	`15`	`+ return response`
`16`	`16`	`}`
`17`	`17`	`catch (error: any) {`
`18`	`18`	`throw parseError(error)`