From 338c2a3b7db3c786429c2ded41b988e0fbb8637f Mon Sep 17 00:00:00 2001
From: oat <oatkub402@gmail.com>
Date: Mon, 5 Feb 2024 14:04:00 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=9A=E0=B8=B8=E0=B8=84=E0=B8=84=E0=B8=A5:=20?=
 =?UTF-8?q?=E0=B8=95=E0=B9=88=E0=B8=ADAPI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/manage/api.person.ts                  | 24 +++++
 .../components/personal/01ListPrefix.vue      | 75 ++++++++++++----
 .../components/personal/02ListRank.vue        | 90 ++++++++++++-------
 .../components/personal/03ListBloodGroup.vue  | 82 +++++++++++------
 .../components/personal/04ListGender.vue      | 82 +++++++++++------
 .../components/personal/05ListReligion.vue    | 89 ++++++++++--------
 .../personal/06ListRelationship.vue           | 61 +++++++++++--
 .../personal/07ListEducationLevel.vue         | 84 +++++++++--------
 .../components/personal/DialogForm.vue        | 12 +--
 .../interface/response/personal/personal.ts   |  6 +-
 .../01_metadataNew/stores/personalStore.ts    |  5 +-
 src/modules/01_metadataNew/views/personal.vue |  3 +
 12 files changed, 415 insertions(+), 198 deletions(-)

diff --git a/src/api/manage/api.person.ts b/src/api/manage/api.person.ts
index 962cc5575..073b6bf8b 100644
--- a/src/api/manage/api.person.ts
+++ b/src/api/manage/api.person.ts
@@ -14,6 +14,14 @@ const gender = `${env.API_URI}/metadata/gender/`;
 const relationship = `${env.API_URI}/metadata/relationship/`;
 const religion = `${env.API_URI}/metadata/religion/`;
 
+const orgRelationship = `${env.API_URI}/org/relationship/`;
+const orgPrefix = `${env.API_URI}/org/prefix/`;
+const orgRank = `${env.API_URI}/org/rank/`;
+const orgBloodGroup = `${env.API_URI}/org/bloodGroup/`;
+const orgGender = `${env.API_URI}/org/gender/`;
+const orgReligion = `${env.API_URI}/org/religion/`;
+const orgEducationLevel = `${env.API_URI}/org/educationLevel/`;
+
 export default {
   person: `${person}person`,
 
@@ -105,4 +113,20 @@ export default {
   listEducationLevelHistoryId: (id: string) => `${educationLevel}history/${id}`,
   listEducationLevelPublished: `${educationLevel}history/published`,
   listEducationLevelPublishedHistory: `${educationLevel}history/published-history`,
+
+  // API ใหม่
+  orgRelationship,
+  orgRelationshipId: (id: string) => `${orgRelationship}${id}`,
+  orgPrefix,
+  orgPrefixId: (id: string) => `${orgPrefix}${id}`,
+  orgRank,
+  orgRankId: (id: string) => `${orgRank}${id}`,
+  orgBloodGroup,
+  orgBloodGroupId: (id: string) => `${orgBloodGroup}${id}`,
+  orgGender,
+  orgGenderId: (id: string) => `${orgGender}${id}`,
+  orgReligion,
+  orgReligionId: (id: string) => `${orgReligion}${id}`,
+  orgEducationLevel,
+  orgEducationLevelId: (id: string) => `${orgEducationLevel}${id}`,
 };
diff --git a/src/modules/01_metadataNew/components/personal/01ListPrefix.vue b/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
index 26dec7b35..2d7f2986c 100644
--- a/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
+++ b/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
@@ -2,17 +2,12 @@
 import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import { useRouter } from "vue-router";
 import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalStore";
-import dialogHeader from "@/components/DialogHeader.vue";
 import { useQuasar } from "quasar";
 import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
-
-const store = usePersonalDataStore();
-const router = useRouter();
-const mixin = useCounterMixin();
-const { dialogRemove, dialogConfirm } = mixin;
-const columns = ref<QTableProps["columns"]>([
+import http from "@/plugins/http";
+import config from "@/app.config";
+const TABLE_COLUMNS = [
   {
     name: "prefix",
     align: "left",
@@ -57,13 +52,17 @@ 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 store = usePersonalDataStore();
+const mixin = useCounterMixin();
+const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
 
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
 const prefix = ref<string>("");
+const editId = ref<string>("");
 const dialogStatus = ref<string>("");
 const personalName = ref<string>("คำนำหน้าชื่อ");
 const visibleColumns = ref<string[]>([
@@ -97,8 +96,43 @@ const data = [
   },
 ];
 
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.orgPrefix)
+    .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.orgPrefix, {
+    name: prefix.value,
+  });
+  fetchData();
+}
+
+async function editData(id: string) {
+  await http.put(config.API.orgPrefixId(id), {
+    name: prefix.value,
+  });
+  fetchData();
+}
+
+async function deleteData(id: string) {
+  await http.delete(config.API.orgPrefixId(id));
+  fetchData();
+}
+
 onMounted(async () => {
-  store.fetchData(data);
+  fetchData();
 });
 </script>
 
@@ -130,7 +164,7 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
         emit-value
         map-options
-        :options="columns"
+        :options="TABLE_COLUMNS"
         option-value="name"
         options-cover
         style="min-width: 150px"
@@ -140,7 +174,7 @@ onMounted(async () => {
 
   <d-table
     ref="table"
-    :columns="columns"
+    :columns="TABLE_COLUMNS"
     :rows="store.row"
     :filter="filterKeyword"
     row-key="name"
@@ -162,9 +196,7 @@ onMounted(async () => {
     <template v-slot:body="props">
       <q-tr :props="props" class="cursor-pointer">
         <q-td v-for="col in props.cols" :key="col.id">
-          <div>
-            {{ col.value }}
-          </div>
+          {{ col.value }}
         </q-td>
         <q-td auto-width>
           <q-btn
@@ -185,6 +217,8 @@ onMounted(async () => {
                     () => {
                       dialogStatus = 'edit';
                       dialog = true;
+                      prefix = props.row.name;
+                      editId = props.row.id;
                     }
                   "
                 >
@@ -197,7 +231,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">
@@ -219,5 +258,9 @@ onMounted(async () => {
     v-model:data="prefix"
     v-model:personalName="personalName"
     v-model:dialogStatus="dialogStatus"
+    v-model:editId="editId"
+    :addData="addData"
+    :fetch-data="fetchData"
+    :edit-data="editData"
   />
 </template>
diff --git a/src/modules/01_metadataNew/components/personal/02ListRank.vue b/src/modules/01_metadataNew/components/personal/02ListRank.vue
index cea8e5829..44645ac22 100644
--- a/src/modules/01_metadataNew/components/personal/02ListRank.vue
+++ b/src/modules/01_metadataNew/components/personal/02ListRank.vue
@@ -7,12 +7,9 @@ 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";
-
-const store = usePersonalDataStore();
-const router = useRouter();
-const mixin = useCounterMixin();
-const { dialogRemove, dialogConfirm } = mixin;
-const columns = ref<QTableProps["columns"]>([
+import http from "@/plugins/http";
+import config from "@/app.config";
+const columns = [
   {
     name: "rank",
     align: "left",
@@ -57,16 +54,21 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-]);
+] as const satisfies QTableProps["columns"];
+
+const store = usePersonalDataStore();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
 
 const $q = useQuasar();
 
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
 const rank = ref<string>("");
-const rankRef = ref<any>(null);
 const dialogStatus = ref<string>("");
 const personalName = ref<string>("ยศ");
+const editId = ref<string>("");
 const visibleColumns = ref<string[]>([
   "rank",
   "createdAt",
@@ -74,32 +76,43 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
 ]);
 
-const data = [
-  {
-    id: "1",
-    name: "ยศ 1",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "สาวิตรี ศรีสมัย",
-  },
-  {
-    id: "2",
-    name: "ยศ 2",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "System Administrator",
-  },
-  {
-    id: "3",
-    name: "ยศ 3",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-  },
-];
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.orgRank)
+    .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.orgRank, {
+    name: rank.value,
+  });
+  fetchData();
+}
+
+async function editData(id: string) {
+  await http.put(config.API.orgRankId(id), {
+    name: rank.value,
+  });
+  fetchData();
+}
+
+async function deleteData(id: string) {
+  await http.delete(config.API.orgRankId(id));
+  fetchData();
+}
 
 onMounted(async () => {
-  store.fetchData(data);
+  fetchData();
 });
 </script>
 
@@ -186,6 +199,8 @@ onMounted(async () => {
                     () => {
                       dialogStatus = 'edit';
                       dialog = true;
+                      rank = 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="rank"
     v-model:personalName="personalName"
     v-model:dialogStatus="dialogStatus"
+    v-model:editId="editId"
+    :addData="addData"
+    :fetch-data="fetchData"
+    :edit-data="editData"
   />
 </template>
diff --git a/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue b/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue
index 2c17ee9eb..6e9a5e066 100644
--- a/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue
+++ b/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>
diff --git a/src/modules/01_metadataNew/components/personal/04ListGender.vue b/src/modules/01_metadataNew/components/personal/04ListGender.vue
index ebb9e39b5..013960c03 100644
--- a/src/modules/01_metadataNew/components/personal/04ListGender.vue
+++ b/src/modules/01_metadataNew/components/personal/04ListGender.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: "gender",
     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 gender = ref<string>("");
-const genderRef = ref<any>(null);
+const editId = ref<string>("");
 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: "ชาย",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "สาวิตรี ศรีสมัย",
-  },
-  {
-    id: "2",
-    name: "หญิง",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "System Administrator",
-  },
-  {
-    id: "3",
-    name: "เพศทางเลือก",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-  },
-];
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.orgGender)
+    .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.orgGender, {
+    name: gender.value,
+  });
+  fetchData();
+}
+
+async function editData(id: string) {
+  await http.put(config.API.orgGenderId(id), {
+    name: gender.value,
+  });
+  fetchData();
+}
+
+async function deleteData(id: string) {
+  await http.delete(config.API.orgGenderId(id));
+  fetchData();
+}
 
 onMounted(async () => {
-  store.fetchData(data);
+  fetchData();
 });
 </script>
 
@@ -186,6 +199,8 @@ onMounted(async () => {
                     () => {
                       dialogStatus = 'edit';
                       dialog = true;
+                      gender = 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="gender"
     v-model:personalName="personalName"
     v-model:dialogStatus="dialogStatus"
+    v-model:editId="editId"
+    :addData="addData"
+    :fetch-data="fetchData"
+    :edit-data="editData"
   />
 </template>
diff --git a/src/modules/01_metadataNew/components/personal/05ListReligion.vue b/src/modules/01_metadataNew/components/personal/05ListReligion.vue
index ebfae39df..04f002454 100644
--- a/src/modules/01_metadataNew/components/personal/05ListReligion.vue
+++ b/src/modules/01_metadataNew/components/personal/05ListReligion.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: "religion",
     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 religion = ref<string>("");
-const religionRef = ref<any>(null);
+const editId = ref<string>("");
 const dialogStatus = ref<string>("");
 const personalName = ref<string>("ศาสนา");
 const visibleColumns = ref<string[]>([
@@ -74,39 +76,43 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
 ]);
 
-const data = [
-  {
-    id: "1",
-    name: "อิสลาม",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "สาวิตรี ศรีสมัย",
-  },
-  {
-    id: "2",
-    name: "พุทธ",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "System Administrator",
-  },
-  {
-    id: "3",
-    name: "ขงจื้อ",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-  },
-  {
-    id: "4",
-    name: "คริสต์",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-  },
-];
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.orgReligion)
+    .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.orgReligion, {
+    name: religion.value,
+  });
+  fetchData();
+}
+
+async function editData(id: string) {
+  await http.put(config.API.orgReligionId(id), {
+    name: religion.value,
+  });
+  fetchData();
+}
+
+async function deleteData(id: string) {
+  await http.delete(config.API.orgReligionId(id));
+  fetchData();
+}
 
 onMounted(async () => {
-  store.fetchData(data);
+  fetchData();
 });
 </script>
 
@@ -193,6 +199,8 @@ onMounted(async () => {
                     () => {
                       dialogStatus = 'edit';
                       dialog = true;
+                      religion = props.row.name;
+                      editId = props.row.id;
                     }
                   "
                 >
@@ -205,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">
@@ -227,5 +240,9 @@ onMounted(async () => {
     v-model:data="religion"
     v-model:personalName="personalName"
     v-model:dialogStatus="dialogStatus"
+    v-model:editId="editId"
+    :addData="addData"
+    :fetch-data="fetchData"
+    :edit-data="editData"
   />
 </template>
diff --git a/src/modules/01_metadataNew/components/personal/06ListRelationship.vue b/src/modules/01_metadataNew/components/personal/06ListRelationship.vue
index 2e38c6033..36e6a5218 100644
--- a/src/modules/01_metadataNew/components/personal/06ListRelationship.vue
+++ b/src/modules/01_metadataNew/components/personal/06ListRelationship.vue
@@ -4,15 +4,16 @@ import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter } from "vue-router";
 import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalStore";
-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: "relationship",
     align: "left",
@@ -57,14 +58,13 @@ 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 relationship = ref<string>("");
-const relationshipRef = ref<any>(null);
 const dialogStatus = ref<string>("");
 const personalName = ref<string>("สถานภาพ");
 const visibleColumns = ref<string[]>([
@@ -73,7 +73,7 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
-
+const editId = ref<string>("");
 const data = [
   {
     id: "1",
@@ -105,8 +105,43 @@ const data = [
   },
 ];
 
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.orgRelationship)
+    .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.orgRelationship, {
+    name: relationship.value,
+  });
+  fetchData();
+}
+
+async function editData(id: string) {
+  await http.put(config.API.orgRelationshipId(id), {
+    name: relationship.value,
+  });
+  fetchData();
+}
+
+async function deleteData(id: string) {
+  await http.delete(config.API.orgRelationshipId(id));
+  fetchData();
+}
+
 onMounted(async () => {
-  store.fetchData(data);
+  fetchData();
 });
 </script>
 
@@ -193,6 +228,7 @@ onMounted(async () => {
                     () => {
                       dialogStatus = 'edit';
                       dialog = true;
+                      editId = props.row.id;
                     }
                   "
                 >
@@ -205,7 +241,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">
@@ -227,5 +268,9 @@ onMounted(async () => {
     v-model:data="relationship"
     v-model:personalName="personalName"
     v-model:dialogStatus="dialogStatus"
+    v-model:editId="editId"
+    :addData="addData"
+    :fetch-data="fetchData"
+    :edit-data="editData"
   />
 </template>
diff --git a/src/modules/01_metadataNew/components/personal/07ListEducationLevel.vue b/src/modules/01_metadataNew/components/personal/07ListEducationLevel.vue
index 5edb111ae..34833037a 100644
--- a/src/modules/01_metadataNew/components/personal/07ListEducationLevel.vue
+++ b/src/modules/01_metadataNew/components/personal/07ListEducationLevel.vue
@@ -6,11 +6,13 @@ import { useRouter } from "vue-router";
 import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalStore";
 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 mixin = useCounterMixin();
-const { dialogRemove } = mixin;
-const columns = ref<QTableProps["columns"]>([
+const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
+const columns = [
   {
     name: "name",
     align: "left",
@@ -66,7 +68,7 @@ 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();
 
@@ -84,43 +86,45 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
 ]);
 
-const data = [
-  {
-    id: "1",
-    name: "เคยสมรสแต่ไม่ทราบสถานภาพสมรส",
-    rank: 1,
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "สาวิตรี ศรีสมัย",
-  },
-  {
-    id: "2",
-    name: "สมรส",
-    rank: 2,
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "System Administrator",
-  },
-  {
-    id: "3",
-    name: "แยกกันอยู่",
-    rank: 3,
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-  },
-  {
-    id: "4",
-    name: "โสด",
-    rank: 4,
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-  },
-];
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.orgEducationLevel)
+    .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.orgEducationLevel, {
+    name: educationLevel.value,
+    rank: educationRank.value,
+  });
+  fetchData();
+}
+
+async function editData(id: string) {
+  await http.put(config.API.orgEducationLevelId(id), {
+    name: educationLevel.value,
+    rank: educationRank.value,
+  });
+  fetchData();
+}
+
+async function deleteData(id: string) {
+  await http.delete(config.API.orgEducationLevelId(id));
+  fetchData();
+}
 
 onMounted(async () => {
-  store.fetchData(data);
+  fetchData();
 });
 </script>
 
@@ -242,5 +246,9 @@ onMounted(async () => {
     v-model:data="educationLevel"
     v-model:personalName="personalName"
     v-model:dialogStatus="dialogStatus"
+    v-model:editId="editId"
+    :addData="addData"
+    :fetch-data="fetchData"
+    :edit-data="editData"
   />
 </template>
diff --git a/src/modules/01_metadataNew/components/personal/DialogForm.vue b/src/modules/01_metadataNew/components/personal/DialogForm.vue
index e9f6f34b5..d6413a0c9 100644
--- a/src/modules/01_metadataNew/components/personal/DialogForm.vue
+++ b/src/modules/01_metadataNew/components/personal/DialogForm.vue
@@ -2,13 +2,14 @@
 import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import dialogHeader from "@/components/DialogHeader.vue";
-import { useQuasar } from "quasar";
+import { QInput, useQuasar } from "quasar";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogConfirm } = mixin;
 
-const dataRef = ref<any>(null);
+const dataRef = ref<QInput | null>(null);
+const educationRankRef = ref<QInput | null>(null);
 const data = defineModel<string>("data", {
   required: true,
 });
@@ -16,7 +17,7 @@ const personalName = defineModel<string>("personalName");
 const dialogStatus = defineModel<string>("dialogStatus");
 const editId = defineModel<string>("editId");
 const dialog = defineModel<boolean>("dialog");
-const educationRank = defineModel<any>("rank");
+const educationRank = defineModel<number>("rank");
 const props = defineProps({
   fetchData: {
     type: Function,
@@ -36,8 +37,8 @@ function closeDialog() {
 }
 
 function validateForm() {
-  dataRef.value.validate();
-  educationRank.value.validate();
+  dataRef.value?.validate();
+  educationRankRef.value?.validate();
   onSubmit();
 }
 
@@ -98,6 +99,7 @@ async function onSubmit() {
             type="number"
             lazy-rules
             borderless
+            min="1"
             class="col-12 bg-white q-ma-md"
             :rules="[(val) => val != undefined || 'กรุณากรอกลำดับ']"
             hide-bottom-space
diff --git a/src/modules/01_metadataNew/interface/response/personal/personal.ts b/src/modules/01_metadataNew/interface/response/personal/personal.ts
index 3da7540a2..b5dfaa78b 100644
--- a/src/modules/01_metadataNew/interface/response/personal/personal.ts
+++ b/src/modules/01_metadataNew/interface/response/personal/personal.ts
@@ -4,11 +4,12 @@ interface DataResponse {
   lastUpdateFullName: String;
   lastUpdatedAt: Date;
   prefix?: string;
-  rank?: string;
+  rank?: number;
   bloodgroup?: string;
   gender?: string;
   religion?: string;
   relationship?: string;
+  name?: string;
 }
 
 interface DataRow {
@@ -17,11 +18,12 @@ interface DataRow {
   lastUpdateFullName: String;
   lastUpdatedAt: string | null;
   prefix?: string;
-  rank?: string;
+  rank?: number;
   bloodgroup?: string;
   gender?: string;
   religion?: string;
   relationship?: string;
+  name?: string;
 }
 
 export type { DataResponse, DataRow };
diff --git a/src/modules/01_metadataNew/stores/personalStore.ts b/src/modules/01_metadataNew/stores/personalStore.ts
index 1237aa021..700296a19 100644
--- a/src/modules/01_metadataNew/stores/personalStore.ts
+++ b/src/modules/01_metadataNew/stores/personalStore.ts
@@ -10,7 +10,8 @@ const { date2Thai } = useCounterMixin();
 
 export const usePersonalDataStore = defineStore("PersonalData", () => {
   const row = ref<DataRow[]>([]);
-  function fetchData(data: DataResponse[]) {
+
+  function save(data: DataResponse[]) {
     const list = data.map((e) => ({
       ...e,
       createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
@@ -19,7 +20,7 @@ export const usePersonalDataStore = defineStore("PersonalData", () => {
     row.value = list;
   }
   return {
-    fetchData,
+    save,
     row,
   };
 });
diff --git a/src/modules/01_metadataNew/views/personal.vue b/src/modules/01_metadataNew/views/personal.vue
index 29bb58dae..f107f339f 100644
--- a/src/modules/01_metadataNew/views/personal.vue
+++ b/src/modules/01_metadataNew/views/personal.vue
@@ -6,6 +6,7 @@ import ListBloodGroup from "@/modules/01_metadataNew/components/personal/03ListB
 import ListGender from "@/modules/01_metadataNew/components/personal/04ListGender.vue";
 import ListReligion from "@/modules/01_metadataNew/components/personal/05ListReligion.vue";
 import ListRelationship from "@/modules/01_metadataNew/components/personal/06ListRelationship.vue";
+import ListEducation from "@/modules/01_metadataNew/components/personal/07ListEducationLevel.vue";
 
 const currentTab = ref<string>("list_prefix");
 const tabs = ref<Array<any>>([]);
@@ -18,6 +19,7 @@ onMounted(() => {
     { label: "เพศ", value: "list_gender" },
     { label: "ศาสนา", value: "list_religion" },
     { label: "สถานภาพ", value: "list_relationship" },
+    { label: "ระดับการศึกษา", value: "list_education" },
   ];
   tabs.value = tabsPerson;
 });
@@ -57,6 +59,7 @@ onMounted(() => {
         <ListGender v-if="currentTab == 'list_gender'" />
         <ListReligion v-if="currentTab == 'list_religion'" />
         <ListRelationship v-if="currentTab == 'list_relationship'" />
+        <ListEducation v-if="currentTab == 'list_education'" />
       </div>
     </div>
   </q-card>