From 71763f43f3879111e874f602069440774727ea68 Mon Sep 17 00:00:00 2001
From: oat <oatkub402@gmail.com>
Date: Fri, 2 Feb 2024 13:54:39 +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=B9=83=E0=B8=8A=E0=B9=89dialog=E0=B8=A3=E0=B9=88=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=81=E0=B8=B1=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/personal/01ListPrefix.vue      | 161 +--------------
 .../components/personal/02ListRank.vue        | 186 ++---------------
 .../components/personal/03ListBloodGroup.vue  | 163 ++-------------
 .../components/personal/04ListGender.vue      | 165 ++-------------
 .../components/personal/05ListReligion.vue    | 189 +++---------------
 .../personal/06ListRelationship.vue           | 167 ++--------------
 .../components/personal/DialogForm.vue        | 169 ++++++++++++++++
 7 files changed, 266 insertions(+), 934 deletions(-)

diff --git a/src/modules/01_metadataNew/components/personal/01ListPrefix.vue b/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
index ba01b3bed..10c34609a 100644
--- a/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
+++ b/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
@@ -3,11 +3,12 @@ import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter } from "vue-router";
-import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
+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 = useInsigniaDataStore();
+const store = usePersonalDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
 const { dialogRemove, dialogConfirm } = mixin;
@@ -77,6 +78,7 @@ const isActive = ref<boolean>(false);
 const prefix = ref<string>("");
 const prefixRef = ref<any>(null);
 const dialogStatus = ref<string>("");
+const personalName = ref<string>("คำนำหน้าชื่อ");
 const visibleColumns = ref<string[]>([
   "prefix",
   "createdAt",
@@ -118,31 +120,6 @@ function fetchData() {
 onMounted(async () => {
   fetchData();
 });
-
-function closeDialog() {
-  dialog.value = false;
-}
-
-function validateForm() {
-  prefixRef.value.validate();
-  onSubmit();
-}
-
-async function onSubmit() {
-  if (prefix.value.length > 0) {
-    dialogConfirm(
-      $q,
-      async () => {
-        console.log("สำเร็จ");
-        closeDialog();
-        prefix.value = "";
-        isActive.value = false;
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
-}
 </script>
 
 <template>
@@ -270,127 +247,11 @@ async function onSubmit() {
     </template>
   </d-table>
 
-  <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 350px" class="bg-grey-11">
-      <form @submit.prevent="validateForm">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :close="closeDialog"
-          />
-        </q-card-section>
-
-        <q-separator color="grey-4" />
-        <q-card-section class="q-pa-none">
-          <q-input
-            ref="prefixRef"
-            outlined
-            v-model="prefix"
-            label="คำนำหน้าชื่อ"
-            dense
-            lazy-rules
-            borderless
-            class="col-12 bg-white q-ma-md"
-            :rules="[(val) => val.length > 0 || 'กรุณากรอกคำนำหน้าชื่อ']"
-            hide-bottom-space
-          />
-          <div
-            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
-          >
-            <div class="row items-center q-my-sm justify-between">
-              <p class="q-ma-none">สถานะการใช้งาน</p>
-              <label class="toggle-control">
-                <input type="checkbox" dense v-model="isActive" />
-                <span class="control"></span>
-              </label>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
+  <DialogForm
+    v-model:dialog="dialog"
+    v-model:data="prefix"
+    v-model:isActive="isActive"
+    v-model:personalName="personalName"
+    v-model:dialogStatus="dialogStatus"
+  />
 </template>
-
-<style scoped lang="scss">
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
-}
-$toggle-background-color-on: #06884d;
-$toggle-background-color-off: darkgray;
-$toggle-control-color: white;
-$toggle-width: 40px;
-$toggle-height: 25px;
-$toggle-gutter: 3px;
-$toggle-radius: 50%;
-$toggle-control-speed: 0.15s;
-$toggle-control-ease: ease-in;
-
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $toggle-height / 2;
-$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
-
-.toggle-control {
-  display: block;
-  position: relative;
-  padding-left: $toggle-width;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 22px;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  input:checked ~ .control {
-    background-color: $toggle-background-color-on;
-
-    &:after {
-      left: $toggle-width - $toggle-control-size - $toggle-gutter;
-    }
-  }
-
-  .control {
-    position: absolute;
-    top: -7px;
-    left: -15px;
-    height: $toggle-height;
-    width: $toggle-width;
-    border-radius: $toggle-radius;
-    background-color: $toggle-background-color-off;
-    transition: background-color $toggle-control-speed $toggle-control-ease;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: $toggle-gutter;
-      top: $toggle-gutter;
-      width: $toggle-control-size;
-      height: $toggle-control-size;
-      border-radius: $toggle-radius;
-      background: $toggle-control-color;
-      transition: left $toggle-control-speed $toggle-control-ease;
-    }
-  }
-}
-</style>
diff --git a/src/modules/01_metadataNew/components/personal/02ListRank.vue b/src/modules/01_metadataNew/components/personal/02ListRank.vue
index 610d59cef..4af44a565 100644
--- a/src/modules/01_metadataNew/components/personal/02ListRank.vue
+++ b/src/modules/01_metadataNew/components/personal/02ListRank.vue
@@ -6,6 +6,7 @@ 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();
@@ -17,7 +18,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ยศ",
     sortable: true,
-    field: "rank",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -77,6 +78,7 @@ const isActive = ref<boolean>(false);
 const rank = ref<string>("");
 const rankRef = ref<any>(null);
 const dialogStatus = ref<string>("");
+const personalName = ref<string>("ยศ");
 const visibleColumns = ref<string[]>([
   "rank",
   "createdAt",
@@ -89,7 +91,7 @@ function fetchData() {
   const data = [
     {
       id: "1",
-      rank: "ยศ1",
+      name: "ยศ 1",
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "สาวิตรี ศรีสมัย",
@@ -97,7 +99,7 @@ function fetchData() {
     },
     {
       id: "2",
-      rank: "ยศ2",
+      name: "ยศ 2",
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "System Administrator",
@@ -105,28 +107,12 @@ function fetchData() {
     },
     {
       id: "3",
-      rank: "ยศ3",
+      name: "ยศ 3",
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
       isActive: true,
     },
-    {
-      id: "4",
-      rank: "ยศ4",
-      createdAt: new Date(),
-      lastUpdatedAt: new Date(),
-      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-      isActive: false,
-    },
-    {
-      id: "5",
-      rank: "ยศ5",
-      createdAt: new Date(),
-      lastUpdatedAt: new Date(),
-      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-      isActive: false,
-    },
   ];
   store.fetchData(data);
 }
@@ -134,30 +120,6 @@ function fetchData() {
 onMounted(async () => {
   fetchData();
 });
-
-function closeDialog() {
-  dialog.value = false;
-}
-
-function validateForm() {
-  rankRef.value.validate();
-  onSubmit();
-}
-
-async function onSubmit() {
-  if (rank.value.length > 0) {
-    dialogConfirm(
-      $q,
-      async () => {
-        closeDialog();
-        rank.value = "";
-        isActive.value = false;
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
-}
 </script>
 
 <template>
@@ -218,7 +180,11 @@ async function onSubmit() {
       </q-tr>
     </template>
     <template v-slot:body="props">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr
+        :props="props"
+        class="cursor-pointer"
+        @click.stop="onclickDetail(props.row.id)"
+      >
         <q-td v-for="col in props.cols" :key="col.id">
           <div v-if="col.name == 'isActive'">
             <q-icon
@@ -281,127 +247,11 @@ async function onSubmit() {
     </template>
   </d-table>
 
-  <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 350px" class="bg-grey-11">
-      <form @submit.prevent="validateForm">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :close="closeDialog"
-          />
-        </q-card-section>
-
-        <q-separator color="grey-4" />
-        <q-card-section class="q-pa-none">
-          <q-input
-            ref="rankRef"
-            outlined
-            v-model="rank"
-            label="ยศ"
-            dense
-            lazy-rules
-            borderless
-            class="col-12 bg-white q-ma-md"
-            :rules="[(val) => val.length > 0 || 'กรุุณากรอกยศ']"
-            hide-bottom-space
-          />
-          <div
-            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
-          >
-            <div class="row items-center q-my-sm justify-between">
-              <p class="q-ma-none">สถานะการใช้งาน</p>
-              <label class="toggle-control">
-                <input type="checkbox" dense v-model="isActive" />
-                <span class="control"></span>
-              </label>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
+  <DialogForm
+    v-model:dialog="dialog"
+    v-model:data="rank"
+    v-model:isActive="isActive"
+    v-model:personalName="personalName"
+    v-model:dialogStatus="dialogStatus"
+  />
 </template>
-
-<style scoped lang="scss">
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
-}
-$toggle-background-color-on: #06884d;
-$toggle-background-color-off: darkgray;
-$toggle-control-color: white;
-$toggle-width: 40px;
-$toggle-height: 25px;
-$toggle-gutter: 3px;
-$toggle-radius: 50%;
-$toggle-control-speed: 0.15s;
-$toggle-control-ease: ease-in;
-
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $toggle-height / 2;
-$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
-
-.toggle-control {
-  display: block;
-  position: relative;
-  padding-left: $toggle-width;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 22px;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  input:checked ~ .control {
-    background-color: $toggle-background-color-on;
-
-    &:after {
-      left: $toggle-width - $toggle-control-size - $toggle-gutter;
-    }
-  }
-
-  .control {
-    position: absolute;
-    top: -7px;
-    left: -15px;
-    height: $toggle-height;
-    width: $toggle-width;
-    border-radius: $toggle-radius;
-    background-color: $toggle-background-color-off;
-    transition: background-color $toggle-control-speed $toggle-control-ease;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: $toggle-gutter;
-      top: $toggle-gutter;
-      width: $toggle-control-size;
-      height: $toggle-control-size;
-      border-radius: $toggle-radius;
-      background: $toggle-control-color;
-      transition: left $toggle-control-speed $toggle-control-ease;
-    }
-  }
-}
-</style>
diff --git a/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue b/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue
index fa57a5735..6b3b350b8 100644
--- a/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue
+++ b/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue
@@ -3,11 +3,12 @@ import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter } from "vue-router";
-import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
+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 = useInsigniaDataStore();
+const store = usePersonalDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
 const { dialogRemove, dialogConfirm } = mixin;
@@ -77,6 +78,7 @@ const isActive = ref<boolean>(false);
 const bloodGroup = ref<string>("");
 const bloodGroupRef = ref<any>(null);
 const dialogStatus = ref<string>("");
+const personalName = ref<string>("กลุ่มเลือด");
 const visibleColumns = ref<string[]>([
   "bloodGroup",
   "createdAt",
@@ -109,7 +111,7 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-      isActive: false,
+      isActive: true,
     },
   ];
   store.fetchData(data);
@@ -118,31 +120,6 @@ function fetchData() {
 onMounted(async () => {
   fetchData();
 });
-
-function closeDialog() {
-  dialog.value = false;
-}
-
-function validateForm() {
-  bloodGroupRef.value.validate();
-  onSubmit();
-}
-
-async function onSubmit() {
-  if (bloodGroup.value.length > 0) {
-    dialogConfirm(
-      $q,
-      async () => {
-        console.log("สำเร็จ");
-        closeDialog();
-        bloodGroup.value = "";
-        isActive.value = false;
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
-}
 </script>
 
 <template>
@@ -270,127 +247,11 @@ async function onSubmit() {
     </template>
   </d-table>
 
-  <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 350px" class="bg-grey-11">
-      <form @submit.prevent="validateForm">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :close="closeDialog"
-          />
-        </q-card-section>
-
-        <q-separator color="grey-4" />
-        <q-card-section class="q-pa-none">
-          <q-input
-            ref="bloodGroupRef"
-            outlined
-            v-model="bloodGroup"
-            label="กลุ่มเลือด"
-            dense
-            lazy-rules
-            borderless
-            class="col-12 bg-white q-ma-md"
-            :rules="[(val) => val.length > 0 || 'กรุณากรอกกลุ่มเลือด']"
-            hide-bottom-space
-          />
-          <div
-            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
-          >
-            <div class="row items-center q-my-sm justify-between">
-              <p class="q-ma-none">สถานะการใช้งาน</p>
-              <label class="toggle-control">
-                <input type="checkbox" dense v-model="isActive" />
-                <span class="control"></span>
-              </label>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
+  <DialogForm
+    v-model:dialog="dialog"
+    v-model:data="bloodGroup"
+    v-model:isActive="isActive"
+    v-model:personalName="personalName"
+    v-model:dialogStatus="dialogStatus"
+  />
 </template>
-
-<style scoped lang="scss">
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
-}
-$toggle-background-color-on: #06884d;
-$toggle-background-color-off: darkgray;
-$toggle-control-color: white;
-$toggle-width: 40px;
-$toggle-height: 25px;
-$toggle-gutter: 3px;
-$toggle-radius: 50%;
-$toggle-control-speed: 0.15s;
-$toggle-control-ease: ease-in;
-
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $toggle-height / 2;
-$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
-
-.toggle-control {
-  display: block;
-  position: relative;
-  padding-left: $toggle-width;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 22px;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  input:checked ~ .control {
-    background-color: $toggle-background-color-on;
-
-    &:after {
-      left: $toggle-width - $toggle-control-size - $toggle-gutter;
-    }
-  }
-
-  .control {
-    position: absolute;
-    top: -7px;
-    left: -15px;
-    height: $toggle-height;
-    width: $toggle-width;
-    border-radius: $toggle-radius;
-    background-color: $toggle-background-color-off;
-    transition: background-color $toggle-control-speed $toggle-control-ease;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: $toggle-gutter;
-      top: $toggle-gutter;
-      width: $toggle-control-size;
-      height: $toggle-control-size;
-      border-radius: $toggle-radius;
-      background: $toggle-control-color;
-      transition: left $toggle-control-speed $toggle-control-ease;
-    }
-  }
-}
-</style>
diff --git a/src/modules/01_metadataNew/components/personal/04ListGender.vue b/src/modules/01_metadataNew/components/personal/04ListGender.vue
index ded75420b..a16cf338a 100644
--- a/src/modules/01_metadataNew/components/personal/04ListGender.vue
+++ b/src/modules/01_metadataNew/components/personal/04ListGender.vue
@@ -3,11 +3,12 @@ import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter } from "vue-router";
-import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
+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 = useInsigniaDataStore();
+const store = usePersonalDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
 const { dialogRemove, dialogConfirm } = mixin;
@@ -77,6 +78,7 @@ const isActive = ref<boolean>(false);
 const gender = ref<string>("");
 const genderRef = ref<any>(null);
 const dialogStatus = ref<string>("");
+const personalName = ref<string>("เพศ");
 const visibleColumns = ref<string[]>([
   "gender",
   "createdAt",
@@ -93,7 +95,7 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "สาวิตรี ศรีสมัย",
-      isActive: true,
+      isActive: false,
     },
     {
       id: "2",
@@ -101,7 +103,7 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "System Administrator",
-      isActive: false,
+      isActive: true,
     },
     {
       id: "3",
@@ -118,31 +120,6 @@ function fetchData() {
 onMounted(async () => {
   fetchData();
 });
-
-function closeDialog() {
-  dialog.value = false;
-}
-
-function validateForm() {
-  genderRef.value.validate();
-  onSubmit();
-}
-
-async function onSubmit() {
-  if (gender.value.length > 0) {
-    dialogConfirm(
-      $q,
-      async () => {
-        console.log("สำเร็จ");
-        closeDialog();
-        gender.value = "";
-        isActive.value = false;
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
-}
 </script>
 
 <template>
@@ -270,127 +247,11 @@ async function onSubmit() {
     </template>
   </d-table>
 
-  <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 350px" class="bg-grey-11">
-      <form @submit.prevent="validateForm">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :close="closeDialog"
-          />
-        </q-card-section>
-
-        <q-separator color="grey-4" />
-        <q-card-section class="q-pa-none">
-          <q-input
-            ref="genderRef"
-            outlined
-            v-model="gender"
-            label="เพศ"
-            dense
-            lazy-rules
-            borderless
-            class="col-12 bg-white q-ma-md"
-            :rules="[(val) => val.length > 0 || 'กรุณากรอกเพศ']"
-            hide-bottom-space
-          />
-          <div
-            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
-          >
-            <div class="row items-center q-my-sm justify-between">
-              <p class="q-ma-none">สถานะการใช้งาน</p>
-              <label class="toggle-control">
-                <input type="checkbox" dense v-model="isActive" />
-                <span class="control"></span>
-              </label>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
+  <DialogForm
+    v-model:dialog="dialog"
+    v-model:data="gender"
+    v-model:isActive="isActive"
+    v-model:personalName="personalName"
+    v-model:dialogStatus="dialogStatus"
+  />
 </template>
-
-<style scoped lang="scss">
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
-}
-$toggle-background-color-on: #06884d;
-$toggle-background-color-off: darkgray;
-$toggle-control-color: white;
-$toggle-width: 40px;
-$toggle-height: 25px;
-$toggle-gutter: 3px;
-$toggle-radius: 50%;
-$toggle-control-speed: 0.15s;
-$toggle-control-ease: ease-in;
-
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $toggle-height / 2;
-$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
-
-.toggle-control {
-  display: block;
-  position: relative;
-  padding-left: $toggle-width;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 22px;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  input:checked ~ .control {
-    background-color: $toggle-background-color-on;
-
-    &:after {
-      left: $toggle-width - $toggle-control-size - $toggle-gutter;
-    }
-  }
-
-  .control {
-    position: absolute;
-    top: -7px;
-    left: -15px;
-    height: $toggle-height;
-    width: $toggle-width;
-    border-radius: $toggle-radius;
-    background-color: $toggle-background-color-off;
-    transition: background-color $toggle-control-speed $toggle-control-ease;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: $toggle-gutter;
-      top: $toggle-gutter;
-      width: $toggle-control-size;
-      height: $toggle-control-size;
-      border-radius: $toggle-radius;
-      background: $toggle-control-color;
-      transition: left $toggle-control-speed $toggle-control-ease;
-    }
-  }
-}
-</style>
diff --git a/src/modules/01_metadataNew/components/personal/05ListReligion.vue b/src/modules/01_metadataNew/components/personal/05ListReligion.vue
index d0a3d1e64..1d24c2ec2 100644
--- a/src/modules/01_metadataNew/components/personal/05ListReligion.vue
+++ b/src/modules/01_metadataNew/components/personal/05ListReligion.vue
@@ -3,11 +3,12 @@ import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter } from "vue-router";
-import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
+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 = useInsigniaDataStore();
+const store = usePersonalDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
 const { dialogRemove, dialogConfirm } = mixin;
@@ -77,6 +78,7 @@ const isActive = ref<boolean>(false);
 const religion = ref<string>("");
 const religionRef = ref<any>(null);
 const dialogStatus = ref<string>("");
+const personalName = ref<string>("ศาสนา");
 const visibleColumns = ref<string[]>([
   "religion",
   "createdAt",
@@ -89,28 +91,36 @@ function fetchData() {
   const data = [
     {
       id: "1",
-      name: "พุทธศาสนา",
+      name: "อิสลาม",
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "สาวิตรี ศรีสมัย",
-      isActive: true,
-    },
-    {
-      id: "2",
-      name: "คริสต์ศาสนา",
-      createdAt: new Date(),
-      lastUpdatedAt: new Date(),
-      lastUpdateFullName: "System Administrator",
       isActive: false,
     },
+    {
+      id: "2",
+      name: "พุทธ",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "System Administrator",
+      isActive: true,
+    },
     {
       id: "3",
-      name: "อิสลาม",
+      name: "ขงจื้อ",
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
       isActive: false,
     },
+    {
+      id: "4",
+      name: "คริสต์",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+      isActive: true,
+    },
   ];
   store.fetchData(data);
 }
@@ -118,31 +128,6 @@ function fetchData() {
 onMounted(async () => {
   fetchData();
 });
-
-function closeDialog() {
-  dialog.value = false;
-}
-
-function validateForm() {
-  religionRef.value.validate();
-  onSubmit();
-}
-
-async function onSubmit() {
-  if (religion.value.length > 0) {
-    dialogConfirm(
-      $q,
-      async () => {
-        console.log("สำเร็จ");
-        closeDialog();
-        religion.value = "";
-        isActive.value = false;
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
-}
 </script>
 
 <template>
@@ -270,127 +255,11 @@ async function onSubmit() {
     </template>
   </d-table>
 
-  <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 350px" class="bg-grey-11">
-      <form @submit.prevent="validateForm">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :close="closeDialog"
-          />
-        </q-card-section>
-
-        <q-separator color="grey-4" />
-        <q-card-section class="q-pa-none">
-          <q-input
-            ref="religionRef"
-            outlined
-            v-model="religion"
-            label="ศาสนา"
-            dense
-            lazy-rules
-            borderless
-            class="col-12 bg-white q-ma-md"
-            :rules="[(val) => val.length > 0 || 'กรุณากรอกศาสนา']"
-            hide-bottom-space
-          />
-          <div
-            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
-          >
-            <div class="row items-center q-my-sm justify-between">
-              <p class="q-ma-none">สถานะการใช้งาน</p>
-              <label class="toggle-control">
-                <input type="checkbox" dense v-model="isActive" />
-                <span class="control"></span>
-              </label>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
+  <DialogForm
+    v-model:dialog="dialog"
+    v-model:data="religion"
+    v-model:isActive="isActive"
+    v-model:personalName="personalName"
+    v-model:dialogStatus="dialogStatus"
+  />
 </template>
-
-<style scoped lang="scss">
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
-}
-$toggle-background-color-on: #06884d;
-$toggle-background-color-off: darkgray;
-$toggle-control-color: white;
-$toggle-width: 40px;
-$toggle-height: 25px;
-$toggle-gutter: 3px;
-$toggle-radius: 50%;
-$toggle-control-speed: 0.15s;
-$toggle-control-ease: ease-in;
-
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $toggle-height / 2;
-$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
-
-.toggle-control {
-  display: block;
-  position: relative;
-  padding-left: $toggle-width;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 22px;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  input:checked ~ .control {
-    background-color: $toggle-background-color-on;
-
-    &:after {
-      left: $toggle-width - $toggle-control-size - $toggle-gutter;
-    }
-  }
-
-  .control {
-    position: absolute;
-    top: -7px;
-    left: -15px;
-    height: $toggle-height;
-    width: $toggle-width;
-    border-radius: $toggle-radius;
-    background-color: $toggle-background-color-off;
-    transition: background-color $toggle-control-speed $toggle-control-ease;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: $toggle-gutter;
-      top: $toggle-gutter;
-      width: $toggle-control-size;
-      height: $toggle-control-size;
-      border-radius: $toggle-radius;
-      background: $toggle-control-color;
-      transition: left $toggle-control-speed $toggle-control-ease;
-    }
-  }
-}
-</style>
diff --git a/src/modules/01_metadataNew/components/personal/06ListRelationship.vue b/src/modules/01_metadataNew/components/personal/06ListRelationship.vue
index f0052b4b3..5f56c5cf5 100644
--- a/src/modules/01_metadataNew/components/personal/06ListRelationship.vue
+++ b/src/modules/01_metadataNew/components/personal/06ListRelationship.vue
@@ -3,11 +3,12 @@ import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter } from "vue-router";
-import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
+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 = useInsigniaDataStore();
+const store = usePersonalDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
 const { dialogRemove, dialogConfirm } = mixin;
@@ -77,6 +78,7 @@ const isActive = ref<boolean>(false);
 const relationship = ref<string>("");
 const relationshipRef = ref<any>(null);
 const dialogStatus = ref<string>("");
+const personalName = ref<string>("สถานภาพ");
 const visibleColumns = ref<string[]>([
   "relationship",
   "createdAt",
@@ -89,7 +91,7 @@ function fetchData() {
   const data = [
     {
       id: "1",
-      name: "สมรส",
+      name: "เคยสมรสแต่ไม่ทราบสถานภาพสมรส",
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "สาวิตรี ศรีสมัย",
@@ -97,7 +99,7 @@ function fetchData() {
     },
     {
       id: "2",
-      name: "เคยสมรสแต่ไม่ทราบสถานภาพสมรส",
+      name: "สมรส",
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "System Administrator",
@@ -109,7 +111,7 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-      isActive: true,
+      isActive: false,
     },
     {
       id: "4",
@@ -126,31 +128,6 @@ function fetchData() {
 onMounted(async () => {
   fetchData();
 });
-
-function closeDialog() {
-  dialog.value = false;
-}
-
-function validateForm() {
-  relationshipRef.value.validate();
-  onSubmit();
-}
-
-async function onSubmit() {
-  if (relationship.value.length > 0) {
-    dialogConfirm(
-      $q,
-      async () => {
-        console.log("สำเร็จ");
-        closeDialog();
-        relationship.value = "";
-        isActive.value = false;
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
-}
 </script>
 
 <template>
@@ -278,127 +255,11 @@ async function onSubmit() {
     </template>
   </d-table>
 
-  <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 350px" class="bg-grey-11">
-      <form @submit.prevent="validateForm">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :close="closeDialog"
-          />
-        </q-card-section>
-
-        <q-separator color="grey-4" />
-        <q-card-section class="q-pa-none">
-          <q-input
-            ref="relationshipRef"
-            outlined
-            v-model="relationship"
-            label="สถานภาพ"
-            dense
-            lazy-rules
-            borderless
-            class="col-12 bg-white q-ma-md"
-            :rules="[(val) => val.length > 0 || 'กรุณากรอกสถานภาพ']"
-            hide-bottom-space
-          />
-          <div
-            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
-          >
-            <div class="row items-center q-my-sm justify-between">
-              <p class="q-ma-none">สถานะการใช้งาน</p>
-              <label class="toggle-control">
-                <input type="checkbox" dense v-model="isActive" />
-                <span class="control"></span>
-              </label>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
+  <DialogForm
+    v-model:dialog="dialog"
+    v-model:data="relationship"
+    v-model:isActive="isActive"
+    v-model:personalName="personalName"
+    v-model:dialogStatus="dialogStatus"
+  />
 </template>
-
-<style scoped lang="scss">
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
-}
-$toggle-background-color-on: #06884d;
-$toggle-background-color-off: darkgray;
-$toggle-control-color: white;
-$toggle-width: 40px;
-$toggle-height: 25px;
-$toggle-gutter: 3px;
-$toggle-radius: 50%;
-$toggle-control-speed: 0.15s;
-$toggle-control-ease: ease-in;
-
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $toggle-height / 2;
-$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
-
-.toggle-control {
-  display: block;
-  position: relative;
-  padding-left: $toggle-width;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 22px;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  input:checked ~ .control {
-    background-color: $toggle-background-color-on;
-
-    &:after {
-      left: $toggle-width - $toggle-control-size - $toggle-gutter;
-    }
-  }
-
-  .control {
-    position: absolute;
-    top: -7px;
-    left: -15px;
-    height: $toggle-height;
-    width: $toggle-width;
-    border-radius: $toggle-radius;
-    background-color: $toggle-background-color-off;
-    transition: background-color $toggle-control-speed $toggle-control-ease;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: $toggle-gutter;
-      top: $toggle-gutter;
-      width: $toggle-control-size;
-      height: $toggle-control-size;
-      border-radius: $toggle-radius;
-      background: $toggle-control-color;
-      transition: left $toggle-control-speed $toggle-control-ease;
-    }
-  }
-}
-</style>
diff --git a/src/modules/01_metadataNew/components/personal/DialogForm.vue b/src/modules/01_metadataNew/components/personal/DialogForm.vue
index e69de29bb..b7d9bf42b 100644
--- a/src/modules/01_metadataNew/components/personal/DialogForm.vue
+++ b/src/modules/01_metadataNew/components/personal/DialogForm.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogRemove, dialogConfirm } = mixin;
+
+const dataRef = ref<any>(null);
+const data = defineModel<string>("data", {
+  required: true,
+});
+const isActive = defineModel<boolean>("isActive");
+const personalName = defineModel<string>("personalName");
+const dialogStatus = defineModel<string>("dialogStatus");
+const dialog = defineModel<boolean>("dialog");
+
+function closeDialog() {
+  dialog.value = false;
+}
+
+function validateForm() {
+  dataRef.value.validate();
+  onSubmit();
+}
+
+async function onSubmit() {
+  if (data.value.length > 0) {
+    dialogConfirm(
+      $q,
+      async () => {
+        closeDialog();
+        data.value = "";
+        isActive.value = false;
+      },
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+    );
+  }
+}
+</script>
+
+<template>
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="min-width: 350px" class="bg-grey-11">
+      <form @submit.prevent="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :close="closeDialog"
+          />
+        </q-card-section>
+
+        <q-separator color="grey-4" />
+        <q-card-section class="q-pa-none">
+          <q-input
+            ref="dataRef"
+            outlined
+            v-model="data"
+            :label="personalName"
+            dense
+            lazy-rules
+            borderless
+            class="col-12 bg-white q-ma-md"
+            :rules="[(val) => val.length > 0 || 'กรุณากรอก' + personalName]"
+            hide-bottom-space
+          />
+          <div
+            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+          >
+            <div class="row items-center q-my-sm justify-between">
+              <p class="q-ma-none">สถานะการใช้งาน</p>
+              <label class="toggle-control">
+                <input type="checkbox" dense v-model="isActive" />
+                <span class="control"></span>
+              </label>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.border_custom {
+  border-radius: 6px !important;
+  border: 1px solid #e1e1e1;
+}
+$toggle-background-color-on: #06884d;
+$toggle-background-color-off: darkgray;
+$toggle-control-color: white;
+$toggle-width: 40px;
+$toggle-height: 25px;
+$toggle-gutter: 3px;
+$toggle-radius: 50%;
+$toggle-control-speed: 0.15s;
+$toggle-control-ease: ease-in;
+
+// These are our computed variables
+// change at your own risk.
+$toggle-radius: $toggle-height / 2;
+$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
+
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: $toggle-width;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  user-select: none;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: $toggle-background-color-on;
+
+    &:after {
+      left: $toggle-width - $toggle-control-size - $toggle-gutter;
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: -7px;
+    left: -15px;
+    height: $toggle-height;
+    width: $toggle-width;
+    border-radius: $toggle-radius;
+    background-color: $toggle-background-color-off;
+    transition: background-color $toggle-control-speed $toggle-control-ease;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: $toggle-gutter;
+      top: $toggle-gutter;
+      width: $toggle-control-size;
+      height: $toggle-control-size;
+      border-radius: $toggle-radius;
+      background: $toggle-control-color;
+      transition: left $toggle-control-speed $toggle-control-ease;
+    }
+  }
+}
+</style>