ข้อมูลบุคคล: ต่อAPI

src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue

@@ -7,12 +7,14 @@ import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalSt
 import dialogHeader from "@/components/DialogHeader.vue";
 import { useQuasar } from "quasar";
 import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const store = usePersonalDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { dialogRemove, dialogConfirm } = mixin;
-const columns = ref<QTableProps["columns"]>([
+const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
+const columns = [
   {
     name: "bloodGroup",
     align: "left",
@@ -57,14 +59,14 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-]);
+] as const satisfies QTableProps["columns"];
 
 const $q = useQuasar();
 
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
+const editId = ref<string>("");
 const bloodGroup = ref<string>("");
-const bloodGroupRef = ref<any>(null);
 const dialogStatus = ref<string>("");
 const personalName = ref<string>("กลุ่มเลือด");
 const visibleColumns = ref<string[]>([
@@ -74,32 +76,43 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
 ]);
 
-const data = [
-  {
-    id: "1",
-    name: "A",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "สาวิตรี ศรีสมัย",
-  },
-  {
-    id: "2",
-    name: "AB",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "System Administrator",
-  },
-  {
-    id: "3",
-    name: "O",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-  },
-];
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.orgBloodGroup)
+    .then(async (res) => {
+      console.log(res.data.result);
+      store.save(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function addData() {
+  await http.post(config.API.orgBloodGroup, {
+    name: bloodGroup.value,
+  });
+  fetchData();
+}
+
+async function editData(id: string) {
+  await http.put(config.API.orgBloodGroupId(id), {
+    name: bloodGroup.value,
+  });
+  fetchData();
+}
+
+async function deleteData(id: string) {
+  await http.delete(config.API.orgBloodGroupId(id));
+  fetchData();
+}
 
 onMounted(async () => {
-  store.fetchData(data);
+  fetchData();
 });
 </script>
 
@@ -186,6 +199,8 @@ onMounted(async () => {
                     () => {
                       dialogStatus = 'edit';
                       dialog = true;
+                      bloodGroup = props.row.name;
+                      editId = props.row.id;
                     }
                   "
                 >
@@ -198,7 +213,12 @@ onMounted(async () => {
                 </q-item>
                 <q-item clickable>
                   <q-item-section
-                    @click="dialogRemove($q, async () => {})"
+                    @click="
+                      dialogRemove(
+                        $q,
+                        async () => await deleteData(props.row.id)
+                      )
+                    "
                     v-close-popup
                   >
                     <div class="row items-center white">
@@ -220,5 +240,9 @@ onMounted(async () => {
     v-model:data="bloodGroup"
     v-model:personalName="personalName"
     v-model:dialogStatus="dialogStatus"
+    v-model:editId="editId"
+    :addData="addData"
+    :fetch-data="fetchData"
+    :edit-data="editData"
   />
 </template>