จัดการบทบาทและสิทธิ์ => 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>