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

src/modules/02_users/components/Permissions/DialogAdd.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
 
 /** importType*/
 import type { QTableProps } from "quasar";
+import type { Roles } from "@/modules/02_users/interface/response/Main";
 import type { FilterReqMaster } from "@/modules/02_users/interface/request/Main";
 
 /** importStore*/
@@ -34,42 +37,61 @@ const props = defineProps({
   },
 });
 
-const rows = ref<any[]>([{ name: "ชื่อ", description: "คำอธิบาย" }]);
+const rows = ref<Roles[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
-    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[]>(["name", "description"]);
+const visibleColumns = ref<string[]>(["roleName", "roleDescription"]);
 
 const keyword = ref<string>("");
-const selected = ref<any[]>([]);
+const selected = ref<Roles[]>([]);
 
 function closeDialog() {
   modal.value = false;
   selected.value = [];
 }
 
+function fetchListRoles() {
+  showLoader();
+  http
+    .get(config.API.managementAuth + `/list`)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function onSubmit() {
   if (selected.value.length === 0) {
     dialogMessageNotify($q, "กรุณาเลือกสิทธิ์อย่างน้อง 1 สิทธิ์");
   } else {
     dialogConfirm($q, () => {
+      const arrayId = selected.value.map((e: Roles) => e.id);
+      console.log(arrayId);
+
       showLoader();
       closeDialog();
       props.fetchDataTable(
@@ -81,6 +103,13 @@ function onSubmit() {
     });
   }
 }
+
+watch(
+  () => modal.value,
+  () => {
+    modal.value && fetchListRoles();
+  }
+);
 </script>
 
 <template>