จัดการบทบาทและสิทธิ์ => API

src/modules/02_users/views/listsRole.vue

@@ -23,13 +23,7 @@ const { dialogRemove, messageError, showLoader, hideLoader, success } =
   useCounterMixin();
 
 /** Table*/
-const rows = ref<Roles[]>([
-  {
-    id: "1",
-    name: "ชื่อบทบาท",
-    description: "คำอธิบาย",
-  },
-]);
+const rows = ref<Roles[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -41,30 +35,28 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "roleName",
     align: "left",
     label: "ชื่อบทบาท",
     sortable: true,
-    field: "name",
+    field: "roleName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "description",
+    name: "roleDescription",
     align: "left",
     label: "คำอธิบาย",
     sortable: true,
-    field: "description",
+    field: "roleDescription",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
-const visibleColumns = ref<string[]>(["no", "name", "description"]);
+const visibleColumns = ref<string[]>(["no", "roleName", "roleDescription"]);
 const keyword = ref<string>("");
 
 const modalDialogAdd = ref<boolean>(false);
-const isStatusEdit = ref<boolean>(false);
-const roleId = ref<string>("");
 
 /** List Mune*/
 const itemMenu = ref<ItemsMenu[]>([
@@ -84,19 +76,19 @@ const itemMenu = ref<ItemsMenu[]>([
 
 /** function fetch รายการบทบาท*/
 function fetchListRole() {
-  // showLoader();
-  // http
-  //   .get(config.API.managementUser)
-  //   .then((res) => {
-  //     const data = res.data;
-  //     rows.value = data;
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
+  showLoader();
+  http
+    .get(config.API.managementAuth + `/list`)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /**
@@ -106,9 +98,7 @@ function fetchListRole() {
  */
 function onClickAction(type: string, data: Roles) {
   if (type === "edit") {
-    modalDialogAdd.value = true;
-    isStatusEdit.value = true;
-    roleId.value = data.id;
+    router.push(`/roles/${data.id}`);
   } else if (type === "delete") {
     onDeleteRole(data.id);
   }
@@ -116,8 +106,6 @@ function onClickAction(type: string, data: Roles) {
 
 function openDialog() {
   modalDialogAdd.value = true;
-  isStatusEdit.value = false;
-  roleId.value = "";
 }
 
 /**
@@ -126,26 +114,22 @@ function openDialog() {
  */
 function onDeleteRole(id: string) {
   dialogRemove($q, () => {
-    // showLoader();
-    // http
-    //   .delete(config.API.managementUser + `/${id}`)
-    //   .then(() => {
-    //     success($q, "ลบข้อมูลสำเร็จ");
-    //     fetchListRole();
-    //   })
-    //   .catch((err) => {
-    //     messageError($q, err);
-    //   })
-    //   .finally(() => {
-    //     hideLoader();
-    //   });
+    showLoader();
+    http
+      .delete(config.API.managementAuth + `/${id}`)
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        fetchListRole();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
-function viewDetail(id: string) {
-  router.push(`/roles/${id}`);
-}
-
 onMounted(() => {
   fetchListRole();
 });
@@ -216,12 +200,7 @@ onMounted(() => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="viewDetail(props.row.id)"
-            >
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div>
                 {{ col.value ? col.value : "-" }}
               </div>
@@ -265,12 +244,9 @@ onMounted(() => {
     </div>
   </q-card>
 
-  <DialogAddRole
-    :fetchlist="fetchListRole"
-    v-model:modal="modalDialogAdd"
-    v-model:isStatusEdit="isStatusEdit"
-    :roleId="roleId"
-  />
+  <DialogAddRole v-model:modal="modalDialogAdd" />
+  <!-- :fetchlist="fetchListRole" v-model:isStatusEdit="isStatusEdit"
+  :roleId="roleId" -->
 </template>
 
 <style scoped></style>

src/modules/02_users/views/permissionDetail.vue

@@ -1,8 +1,20 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
-import { useRouter } from "vue-router";
+import { onMounted, reactive, ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type { FormRole } from "@/modules/02_users/interface/request/Main";
 
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const { dialogConfirm, messageError, showLoader, hideLoader, success } =
+  useCounterMixin();
+
 const attrPrivilege = ref<any[]>([]);
 const attrPrivilegeOp = ref<any[]>([
   {
@@ -23,9 +35,12 @@ const attrPrivilegeOp = ref<any[]>([
   },
 ]);
 const router = useRouter();
+const route = useRoute();
+
+const roleId = ref<string>(route.params.id.toString());
 const formData = reactive<FormRole>({
-  role: "",
-  description: "",
+  roleName: "",
+  roleDescription: "",
 });
 
 const columns = ref<any>([]);
@@ -1154,9 +1169,49 @@ const systemLists = ref<any>([
   },
 ]);
 
+function fetchDataRole() {
+  showLoader();
+  http
+    .get(config.API.managementAuth + `/${roleId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      formData.roleName = data.roleName;
+      formData.roleDescription = data.roleDescription;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    const body = {
+      ...formData,
+      authRoleAttrs: [],
+    };
+    http
+      .patch(config.API.managementAuth + `/${roleId.value}`, body)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        fetchDataRole();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
   console.log(systemLists.value);
 }
+
+onMounted(() => {
+  fetchDataRole();
+});
 </script>
 
 <template>
@@ -1182,7 +1237,7 @@ function onSubmit() {
             <div class="row q-col-gutter-md">
               <div class="col-4">
                 <q-input
-                  v-model="formData.role"
+                  v-model="formData.roleName"
                   outlined
                   dense
                   :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อบทบาท'}`,]"
@@ -1194,7 +1249,7 @@ function onSubmit() {
               </div>
               <div class="col-8">
                 <q-input
-                  v-model="formData.description"
+                  v-model="formData.roleDescription"
                   outlined
                   dense
                   lazy-rules