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

---
 .../components/personal/01ListPrefix.vue      | 397 ++++++++++++++++-
 .../components/personal/02ListRank.vue        | 408 +++++++++++++++++-
 .../components/personal/03ListBloodGroup.vue  | 397 ++++++++++++++++-
 .../components/personal/04ListGender.vue      | 397 ++++++++++++++++-
 .../components/personal/05ListReligion.vue    | 397 ++++++++++++++++-
 .../personal/06ListRelationship.vue           | 405 ++++++++++++++++-
 .../01_metadataNew/stores/personalStore.ts    |  25 ++
 7 files changed, 2414 insertions(+), 12 deletions(-)
 create mode 100644 src/modules/01_metadataNew/stores/personalStore.ts

diff --git a/src/modules/01_metadataNew/components/personal/01ListPrefix.vue b/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
index dd89f390e..ba01b3bed 100644
--- a/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
+++ b/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
@@ -1,3 +1,396 @@
+<script setup lang="ts">
+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 dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+
+const store = useInsigniaDataStore();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { dialogRemove, dialogConfirm } = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const $q = useQuasar();
+
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const isActive = ref<boolean>(false);
+const prefix = ref<string>("");
+const prefixRef = ref<any>(null);
+const dialogStatus = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "prefix",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+]);
+
+function fetchData() {
+  const data = [
+    {
+      id: "1",
+      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: "3",
+      name: "นาย",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+      isActive: false,
+    },
+  ];
+  store.fetchData(data);
+}
+
+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>
-    คำนำหน้าชื่อ
-</template>
\ No newline at end of file
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+        }
+      "
+    >
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+      />
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.row"
+    :filter="filterKeyword"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <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
+              v-if="col.value == false"
+              name="mdi-close"
+              color="red"
+              class="text-h5"
+            />
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="grey"
+            flat
+            dense
+            round
+            size="14px"
+            icon="more_vert"
+            @click.stop
+          >
+            <q-menu>
+              <q-list dense>
+                <q-item
+                  v-close-popup
+                  clickable
+                  @click.stop="
+                    () => {
+                      dialogStatus = 'edit';
+                      dialog = true;
+                    }
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center white">
+                      <q-icon name="o_edit" color="positive" />
+                      <span class="q-ml-sm">แก้ไข</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section
+                    @click="dialogRemove($q, async () => {})"
+                    v-close-popup
+                  >
+                    <div class="row items-center white">
+                      <q-icon name="mdi-trash-can-outline" color="negative" />
+                      <span class="q-ml-sm">ลบ</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </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>
+</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 c033171b7..610d59cef 100644
--- a/src/modules/01_metadataNew/components/personal/02ListRank.vue
+++ b/src/modules/01_metadataNew/components/personal/02ListRank.vue
@@ -1,3 +1,407 @@
+<script setup lang="ts">
+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";
+
+const store = usePersonalDataStore();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { dialogRemove, dialogConfirm } = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "rank",
+    align: "left",
+    label: "ยศ",
+    sortable: true,
+    field: "rank",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const $q = useQuasar();
+
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const isActive = ref<boolean>(false);
+const rank = ref<string>("");
+const rankRef = ref<any>(null);
+const dialogStatus = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "rank",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+]);
+
+function fetchData() {
+  const data = [
+    {
+      id: "1",
+      rank: "ยศ1",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "สาวิตรี ศรีสมัย",
+      isActive: true,
+    },
+    {
+      id: "2",
+      rank: "ยศ2",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "System Administrator",
+      isActive: false,
+    },
+    {
+      id: "3",
+      rank: "ยศ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);
+}
+
+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>
-    ยศ
-</template>
\ No newline at end of file
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+        }
+      "
+    >
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+      />
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.row"
+    :filter="filterKeyword"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.id">
+          <div v-if="col.name == 'isActive'">
+            <q-icon
+              v-if="col.value == false"
+              name="mdi-close"
+              color="red"
+              class="text-h5"
+            />
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="grey"
+            flat
+            dense
+            round
+            size="14px"
+            icon="more_vert"
+            @click.stop
+          >
+            <q-menu>
+              <q-list dense>
+                <q-item
+                  v-close-popup
+                  clickable
+                  @click.stop="
+                    () => {
+                      dialogStatus = 'edit';
+                      dialog = true;
+                    }
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center white">
+                      <q-icon name="o_edit" color="positive" />
+                      <span class="q-ml-sm">แก้ไข</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section
+                    @click="dialogRemove($q, async () => {})"
+                    v-close-popup
+                  >
+                    <div class="row items-center white">
+                      <q-icon name="mdi-trash-can-outline" color="negative" />
+                      <span class="q-ml-sm">ลบ</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </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>
+</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 06e1e95ca..fa57a5735 100644
--- a/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue
+++ b/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue
@@ -1,3 +1,396 @@
+<script setup lang="ts">
+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 dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+
+const store = useInsigniaDataStore();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { dialogRemove, dialogConfirm } = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "bloodGroup",
+    align: "left",
+    label: "กลุ่มเลือด",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const $q = useQuasar();
+
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const isActive = ref<boolean>(false);
+const bloodGroup = ref<string>("");
+const bloodGroupRef = ref<any>(null);
+const dialogStatus = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "bloodGroup",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+]);
+
+function fetchData() {
+  const data = [
+    {
+      id: "1",
+      name: "A",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "สาวิตรี ศรีสมัย",
+      isActive: true,
+    },
+    {
+      id: "2",
+      name: "AB",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "System Administrator",
+      isActive: false,
+    },
+    {
+      id: "3",
+      name: "O",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+      isActive: false,
+    },
+  ];
+  store.fetchData(data);
+}
+
+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>
-    กลุ่มเลือด
-</template>
\ No newline at end of file
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+        }
+      "
+    >
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+      />
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.row"
+    :filter="filterKeyword"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <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
+              v-if="col.value == false"
+              name="mdi-close"
+              color="red"
+              class="text-h5"
+            />
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="grey"
+            flat
+            dense
+            round
+            size="14px"
+            icon="more_vert"
+            @click.stop
+          >
+            <q-menu>
+              <q-list dense>
+                <q-item
+                  v-close-popup
+                  clickable
+                  @click.stop="
+                    () => {
+                      dialogStatus = 'edit';
+                      dialog = true;
+                    }
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center white">
+                      <q-icon name="o_edit" color="positive" />
+                      <span class="q-ml-sm">แก้ไข</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section
+                    @click="dialogRemove($q, async () => {})"
+                    v-close-popup
+                  >
+                    <div class="row items-center white">
+                      <q-icon name="mdi-trash-can-outline" color="negative" />
+                      <span class="q-ml-sm">ลบ</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </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>
+</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 fe540f2ec..ded75420b 100644
--- a/src/modules/01_metadataNew/components/personal/04ListGender.vue
+++ b/src/modules/01_metadataNew/components/personal/04ListGender.vue
@@ -1,3 +1,396 @@
+<script setup lang="ts">
+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 dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+
+const store = useInsigniaDataStore();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { dialogRemove, dialogConfirm } = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "gender",
+    align: "left",
+    label: "เพศ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const $q = useQuasar();
+
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const isActive = ref<boolean>(false);
+const gender = ref<string>("");
+const genderRef = ref<any>(null);
+const dialogStatus = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "gender",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+]);
+
+function fetchData() {
+  const data = [
+    {
+      id: "1",
+      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: "3",
+      name: "เพศทางเลือก",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+      isActive: false,
+    },
+  ];
+  store.fetchData(data);
+}
+
+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>
-   เพศ 
-</template>
\ No newline at end of file
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+        }
+      "
+    >
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+      />
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.row"
+    :filter="filterKeyword"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <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
+              v-if="col.value == false"
+              name="mdi-close"
+              color="red"
+              class="text-h5"
+            />
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="grey"
+            flat
+            dense
+            round
+            size="14px"
+            icon="more_vert"
+            @click.stop
+          >
+            <q-menu>
+              <q-list dense>
+                <q-item
+                  v-close-popup
+                  clickable
+                  @click.stop="
+                    () => {
+                      dialogStatus = 'edit';
+                      dialog = true;
+                    }
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center white">
+                      <q-icon name="o_edit" color="positive" />
+                      <span class="q-ml-sm">แก้ไข</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section
+                    @click="dialogRemove($q, async () => {})"
+                    v-close-popup
+                  >
+                    <div class="row items-center white">
+                      <q-icon name="mdi-trash-can-outline" color="negative" />
+                      <span class="q-ml-sm">ลบ</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </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>
+</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 a71807508..d0a3d1e64 100644
--- a/src/modules/01_metadataNew/components/personal/05ListReligion.vue
+++ b/src/modules/01_metadataNew/components/personal/05ListReligion.vue
@@ -1,3 +1,396 @@
+<script setup lang="ts">
+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 dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+
+const store = useInsigniaDataStore();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { dialogRemove, dialogConfirm } = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "religion",
+    align: "left",
+    label: "ศาสนา",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const $q = useQuasar();
+
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const isActive = ref<boolean>(false);
+const religion = ref<string>("");
+const religionRef = ref<any>(null);
+const dialogStatus = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "religion",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+]);
+
+function fetchData() {
+  const data = [
+    {
+      id: "1",
+      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: "3",
+      name: "อิสลาม",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+      isActive: false,
+    },
+  ];
+  store.fetchData(data);
+}
+
+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>
-   ศาสนา 
-</template>
\ No newline at end of file
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+        }
+      "
+    >
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+      />
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.row"
+    :filter="filterKeyword"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <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
+              v-if="col.value == false"
+              name="mdi-close"
+              color="red"
+              class="text-h5"
+            />
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="grey"
+            flat
+            dense
+            round
+            size="14px"
+            icon="more_vert"
+            @click.stop
+          >
+            <q-menu>
+              <q-list dense>
+                <q-item
+                  v-close-popup
+                  clickable
+                  @click.stop="
+                    () => {
+                      dialogStatus = 'edit';
+                      dialog = true;
+                    }
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center white">
+                      <q-icon name="o_edit" color="positive" />
+                      <span class="q-ml-sm">แก้ไข</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section
+                    @click="dialogRemove($q, async () => {})"
+                    v-close-popup
+                  >
+                    <div class="row items-center white">
+                      <q-icon name="mdi-trash-can-outline" color="negative" />
+                      <span class="q-ml-sm">ลบ</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </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>
+</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 9a64c12af..f0052b4b3 100644
--- a/src/modules/01_metadataNew/components/personal/06ListRelationship.vue
+++ b/src/modules/01_metadataNew/components/personal/06ListRelationship.vue
@@ -1,3 +1,404 @@
+<script setup lang="ts">
+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 dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+
+const store = useInsigniaDataStore();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { dialogRemove, dialogConfirm } = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "relationship",
+    align: "left",
+    label: "สถานภาพ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const $q = useQuasar();
+
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const isActive = ref<boolean>(false);
+const relationship = ref<string>("");
+const relationshipRef = ref<any>(null);
+const dialogStatus = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "relationship",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+]);
+
+function fetchData() {
+  const data = [
+    {
+      id: "1",
+      name: "สมรส",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "สาวิตรี ศรีสมัย",
+      isActive: false,
+    },
+    {
+      id: "2",
+      name: "เคยสมรสแต่ไม่ทราบสถานภาพสมรส",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "System Administrator",
+      isActive: true,
+    },
+    {
+      id: "3",
+      name: "แยกกันอยู่",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+      isActive: true,
+    },
+    {
+      id: "4",
+      name: "โสด",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+      isActive: true,
+    },
+  ];
+  store.fetchData(data);
+}
+
+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>
-   สถานภาพ 
-</template>
\ No newline at end of file
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+        }
+      "
+    >
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+      />
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.row"
+    :filter="filterKeyword"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <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
+              v-if="col.value == false"
+              name="mdi-close"
+              color="red"
+              class="text-h5"
+            />
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="grey"
+            flat
+            dense
+            round
+            size="14px"
+            icon="more_vert"
+            @click.stop
+          >
+            <q-menu>
+              <q-list dense>
+                <q-item
+                  v-close-popup
+                  clickable
+                  @click.stop="
+                    () => {
+                      dialogStatus = 'edit';
+                      dialog = true;
+                    }
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center white">
+                      <q-icon name="o_edit" color="positive" />
+                      <span class="q-ml-sm">แก้ไข</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section
+                    @click="dialogRemove($q, async () => {})"
+                    v-close-popup
+                  >
+                    <div class="row items-center white">
+                      <q-icon name="mdi-trash-can-outline" color="negative" />
+                      <span class="q-ml-sm">ลบ</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </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>
+</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/stores/personalStore.ts b/src/modules/01_metadataNew/stores/personalStore.ts
new file mode 100644
index 000000000..43aef4bdc
--- /dev/null
+++ b/src/modules/01_metadataNew/stores/personalStore.ts
@@ -0,0 +1,25 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type {
+  DataResponse,
+  DataRow,
+} from "../interface/response/insignia/Insignia";
+import { useCounterMixin } from "@/stores/mixin";
+
+const { date2Thai } = useCounterMixin();
+
+export const usePersonalDataStore = defineStore("PersonalData", () => {
+  const row = ref<DataRow[]>([]);
+  function fetchData(data: DataResponse[]) {
+    const list = data.map((e) => ({
+      ...e,
+      createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
+      lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
+    }));
+    row.value = list;
+  }
+  return {
+    fetchData,
+    row,
+  };
+});

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 2/5] =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=9A=E0=B8=B8=E0=B8=84=E0=B8=84=E0=B8=A5?=
 =?UTF-8?q?=20=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>

From 48b330b53ac0d1c3bb801f436212c388267f516b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 2 Feb 2024 14:30:07 +0700
Subject: [PATCH 3/5] =?UTF-8?q?=E0=B8=A2=E0=B9=89=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/02_organizational/api.organization.ts |   1 +
 .../components/DialogMovePos.vue              | 264 ++++++++++++++++++
 .../components/listView.vue                   |  11 +-
 .../components/mainTree.vue                   |   3 +-
 .../components/tableTree.vue                  |  57 +++-
 .../interface/request/organizational.ts       |   8 +-
 6 files changed, 332 insertions(+), 12 deletions(-)
 create mode 100644 src/modules/02_organizationalNew/components/DialogMovePos.vue

diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index 520ca9db7..fb85cff32 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -25,6 +25,7 @@ export default {
   orgPosMasterById: (id: string) => `${orgPos}/master/${id}`,
   orgPosMasterList: `${orgPos}/master/list`,
   orgPosSort: `${orgPos}/sort`,
+  orgPosMove: `${orgPos}/move`,
   organizationShortName: `${organization}/sort`,
   organizationPublishGet: `${organization}/get/publish`,
 };
diff --git a/src/modules/02_organizationalNew/components/DialogMovePos.vue b/src/modules/02_organizationalNew/components/DialogMovePos.vue
new file mode 100644
index 000000000..fe44ad51a
--- /dev/null
+++ b/src/modules/02_organizationalNew/components/DialogMovePos.vue
@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type {
+  OrgTree,
+  PosMaster2,
+} from "@/modules/02_organizationalNew/interface/response/organizational";
+import type { MovePos } from "@/modules/02_organizationalNew/interface/request/organizational";
+
+import HeaderDialog from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
+
+const $q = useQuasar();
+const store = useOrganizational();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  dialogMessageNotify,
+  success,
+} = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const nodeTree = defineModel<OrgTree[]>("nodeTree", { required: true });
+const columns = defineModel<QTableProps[]>("columns", {});
+const rows = defineModel<PosMaster2[]>("rows", { required: true });
+
+const props = defineProps({
+  fetchDataTree: {
+    type: Function,
+    required: true,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+  rowId: {
+    type: String,
+    required: true,
+  },
+});
+
+const title = ref<string>("ย้ายตำแหน่ง");
+const filterTree = ref<string>("");
+const filterRef = ref();
+const selectedTree = ref<string>("");
+const levelTree = ref<number>(0);
+
+const filterTable = ref<string>("");
+const selectedFilter = ref<PosMaster2[]>([]);
+
+function resetFilter() {
+  filterTree.value = "";
+  filterRef.value.focus();
+}
+
+function updateSelected(orgLevel: number) {
+  levelTree.value = orgLevel;
+}
+
+const isDisable = computed(() => {
+  if (selectedTree.value === "" && selectedFilter.value.length === 0) {
+    return true;
+  } else return false;
+});
+
+function onClickMovePos() {
+  if (selectedTree.value === "" || selectedTree.value === null) {
+    console.log("เลือกหน่วยงาน");
+    dialogMessageNotify($q, "กรุณาเลือกหน่วยงานที่จะย้ายไป");
+  } else if (selectedFilter.value.length === 0) {
+    console.log("เลือกตำแห่นง");
+    dialogMessageNotify($q, "กรุณาเลือกตำแห่นงที่จะย้าย");
+  } else {
+    dialogConfirm(
+      $q,
+      async () => {
+        const position = selectedFilter.value.map((e: PosMaster2) => e.id);
+        const body: MovePos = {
+          id: selectedTree.value,
+          type: levelTree.value,
+          positionMaster: position,
+        };
+        showLoader();
+        await http
+          .post(config.API.orgPosMove, body)
+          .then(() => {
+            props.fetchDataTree?.(store.draftId);
+            modal.value = false;
+            success($q, "ย้ายตำแหน่งสำเร็จ");
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      },
+      "ยืนยันการย้ายตำแหน่ง",
+      "ต้องการยืนยันการย้ายตำแหน่งนี้หรือไม่ ?"
+    );
+  }
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value && props.type === "SINGER") {
+      const data = rows.value.filter((e: PosMaster2) => e.id === props.rowId);
+      selectedFilter.value = data;
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" full-width persistent>
+    <q-card>
+      <HeaderDialog :tittle="title" :close="() => (modal = false)" />
+      <q-separator />
+
+      <q-card-section class="q-pt-none bg-grey-2 q-pa-md">
+        <div class="row">
+          <q-card
+            class="col-12 col-sm-3 scroll q-pa-sm"
+            style="max-height: 70vh"
+          >
+            <q-input
+              ref="filterRef"
+              dense
+              outlined
+              v-model="filterTree"
+              label="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterTree !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+            <q-tree
+              class="q-pa-md q-gutter-sm"
+              dense
+              default-expand-all
+              selected-color="primary"
+              :nodes="nodeTree"
+              node-key="orgTreeId"
+              label-key="orgTreeName"
+              :filter="filterTree"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+              v-model:selected="selectedTree"
+            >
+              <template v-slot:default-header="prop">
+                <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                <div
+                  class="row items-center q-px-xs q-pt-xs q-gutter-sm"
+                  @click="updateSelected(prop.node.orgLevel)"
+                >
+                  <div>
+                    <div class="text-weight-medium">
+                      {{ prop.node.orgTreeName }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                      {{
+                        prop.node.orgTreeShortName == null
+                          ? null
+                          : prop.node.orgTreeShortName
+                      }}
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </q-tree>
+          </q-card>
+
+          <q-card class="col-12 col-sm-9 q-pa-sm">
+            <q-toolbar style="padding: 0">
+              <q-space />
+
+              <div>
+                <q-input outlined dense v-model="filterTable" label="ค้นหา" />
+              </div>
+            </q-toolbar>
+
+            <d-table
+              flat
+              bordered
+              :rows="rows"
+              :columns="columns"
+              row-key="id"
+              :filter="filterTable"
+              no-data-label="ไม่มีข้อมูล"
+              selection="multiple"
+              v-model:selected="selectedFilter"
+            >
+              <template v-slot:header-selection="scope">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="scope.selected"
+                />
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td>
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="props.selected"
+                    />
+                  </q-td>
+
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </q-card>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right">
+        <q-btn
+          dense
+          unelevated
+          label="ย้ายตำแหน่ง"
+          color="public"
+          @click="onClickMovePos"
+          class="q-px-md"
+          :disable="isDisable"
+        >
+          <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/02_organizationalNew/components/listView.vue b/src/modules/02_organizationalNew/components/listView.vue
index 6eaf9a271..ec060f33d 100644
--- a/src/modules/02_organizationalNew/components/listView.vue
+++ b/src/modules/02_organizationalNew/components/listView.vue
@@ -32,6 +32,7 @@ const count = defineModel<number>("count", { required: true });
 const nodeId = ref<string>(""); // id ของ Tree
 const orgLevel = ref<number>(0); // levelTree
 const isLoad = ref<boolean>(false); // loadTable
+const selected = ref<string>("");
 const nodeData = ref<any>();
 const reqMaster = reactive<FilterMaster>({
   id: "",
@@ -51,14 +52,14 @@ const posMaster = ref<PosMaster2[]>([]);
  */
 async function fetchDataTree(id: string) {
   showLoader();
-  // const id =
-  //   store.typeOrganizational === "current" ? store.activeId : store.draftId;
-  // id &&
+
   await http
     .get(config.API.orgByid(id.toString()))
     .then((res) => {
       const data = res.data.result;
       nodeTree.value = data;
+      selected.value = "";
+      nodeId.value = "";
     })
     .catch((err) => {
       messageError($q, err);
@@ -66,7 +67,6 @@ async function fetchDataTree(id: string) {
     .finally(() => {
       hideLoader();
     });
-  // console.log(nodeTree.value);
 }
 
 /**
@@ -172,6 +172,7 @@ watch(
             v-model:nodeTree="nodeTree"
             v-model:nodeId="nodeId"
             v-model:isLoad="isLoad"
+            v-model:selected="selected"
             :fetchDataTree="fetchDataTree"
             :fetchDataTable="fetchDataTable"
           />
@@ -197,6 +198,7 @@ watch(
           <div v-else class="col-12 row items-center">
             <TableView
               v-if="nodeId !== ''"
+              v-model:nodeTree="nodeTree"
               v-model:orgLevel="orgLevel"
               v-model:treeId="nodeId"
               v-model:reqMaster="reqMaster"
@@ -204,6 +206,7 @@ watch(
               v-model:posMaster="posMaster"
               :fetchDataTable="fetchDataTable"
               :filterKeyword="filterKeyword"
+              :fetchDataTree="fetchDataTree"
             />
 
             <q-banner v-else class="q-pa-lg col-12 text-center">
diff --git a/src/modules/02_organizationalNew/components/mainTree.vue b/src/modules/02_organizationalNew/components/mainTree.vue
index 1f4cdfb8c..824db0407 100644
--- a/src/modules/02_organizationalNew/components/mainTree.vue
+++ b/src/modules/02_organizationalNew/components/mainTree.vue
@@ -86,6 +86,7 @@ const listAdd = ref<ListMenu[]>([
 const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
 const nodeId = defineModel<string>("nodeId", { required: true });
 const isLoad = defineModel<boolean>("isLoad", { required: true });
+const selected = defineModel<string>("selected", { required: true });
 const filter = ref<string>("");
 
 const nodes = ref<Array<OrgTree>>([]);
@@ -94,7 +95,7 @@ const lazy = ref(nodes);
 const expanded = ref<Array<any>>([]);
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
 const noData = ref<string>("ไม่มีข้อมูล");
-const selected = ref("");
+// const selected = ref("");
 const orgLevel = ref<number>(0);
 const type = ref<number>(0);
 const orgId = ref<string>("");
diff --git a/src/modules/02_organizationalNew/components/tableTree.vue b/src/modules/02_organizationalNew/components/tableTree.vue
index a59dc0125..f143b4837 100644
--- a/src/modules/02_organizationalNew/components/tableTree.vue
+++ b/src/modules/02_organizationalNew/components/tableTree.vue
@@ -17,6 +17,7 @@ import type { PosMaster2 } from "@/modules/02_organizationalNew/interface/respon
 import DialogFormPosotion from "@/modules/02_organizationalNew/components/DialogFormPosition.vue";
 import DialogPositionDetail from "@/modules/02_organizationalNew/components/PositionDetail.vue";
 import DialogSort from "@/modules/02_organizationalNew/components/DialogSortPosition.vue";
+import DialogMovePos from "@/modules/02_organizationalNew/components/DialogMovePos.vue";
 
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
@@ -33,20 +34,22 @@ const props = defineProps({
     require: true,
     default: () => {},
   },
+  fetchDataTree: {
+    type: Function,
+    require: true,
+    default: () => {},
+  },
 });
 
-const dataSort = ref<Array<any>>([]);
 const modalSort = ref<boolean>(false);
-const showAllData = ref<boolean>(false);
 
-const currentPage = ref<number>(1);
+const nodeTree = defineModel<any>("nodeTree", { required: true });
 const orgLevel = defineModel<number>("orgLevel", { required: true });
 const treeId = defineModel<string>("treeId", { required: true });
 const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
 const totalPage = defineModel<number>("totalPage", { required: true });
 const posMaster = defineModel<PosMaster2[]>("posMaster", { required: true });
 const stroe = useOrganizational();
-const filter = ref<string>("");
 const actionType = ref<string>("");
 const listMenu = ref<ListMenu[]>([
   {
@@ -61,6 +64,12 @@ const listMenu = ref<ListMenu[]>([
     type: "DEL",
     color: "red",
   },
+  {
+    label: "ย้ายตำแหน่ง",
+    icon: "mdi-cursor-move",
+    type: "MOVE",
+    color: "positive",
+  },
   {
     label: "ดูรายละเอียด",
     icon: "mdi-eye",
@@ -247,6 +256,15 @@ function onClickDelete(id: string) {
 function onClickSort() {
   modalSort.value = true;
 }
+
+const modalDialogMMove = ref<boolean>(false);
+const typeMove = ref<string>("");
+
+function onClickMovePos(id: string, type: string) {
+  modalDialogMMove.value = !modalDialogMMove.value;
+  typeMove.value = type;
+  rowId.value = id;
+}
 function updatePagination(newPagination: NewPagination) {
   reqMaster.value.pageSize = newPagination.rowsPerPage;
   reqMaster.value.page = 1;
@@ -278,6 +296,17 @@ function updatePagination(newPagination: NewPagination) {
         >
           <q-tooltip>จัดลำดับ</q-tooltip>
         </q-btn>
+
+        <q-btn
+          flat
+          round
+          dense
+          color="positive"
+          icon="mdi-cursor-move"
+          @click="onClickMovePos('', 'All')"
+        >
+          <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
+        </q-btn>
       </div>
 
       <q-btn flat round dense color="blue-10" icon="save_alt">
@@ -395,6 +424,8 @@ function updatePagination(newPagination: NewPagination) {
                         ? onClickPosition('EDIT', props.row.id)
                         : item.type === 'DEL'
                         ? onClickDelete(props.row.id)
+                        : item.type === 'MOVE'
+                        ? onClickMovePos(props.row.id, 'SINGER')
                         : null
                     "
                   >
@@ -502,6 +533,10 @@ function updatePagination(newPagination: NewPagination) {
     </d-table>
   </div>
 
+  <!-- รายละเอียดตำแหน่ง -->
+  <DialogPositionDetail v-model:position-detail="dialogDetail" />
+
+  <!-- อัตรากำลัง -->
   <DialogFormPosotion
     :modal="dialogPosition"
     :close="onClickPosition"
@@ -513,9 +548,19 @@ function updatePagination(newPagination: NewPagination) {
     :fetchDataTable="props.fetchDataTable"
   />
 
-  <!-- รายละเอียดตำแหน่ง -->
-  <DialogPositionDetail v-model:position-detail="dialogDetail" />
+  <!-- จัดลำดับ -->
   <DialogSort v-model:sort-position="modalSort" />
+
+  <!-- ย้ายตำแหน่ง -->
+  <DialogMovePos
+    v-model:modal="modalDialogMMove"
+    v-model:nodeTree="nodeTree"
+    v-model:columns="columns as QTableProps[]"
+    v-model:rows="posMaster"
+    :fetchDataTree="props.fetchDataTree"
+    :type="typeMove"
+    :rowId="rowId"
+  />
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/02_organizationalNew/interface/request/organizational.ts b/src/modules/02_organizationalNew/interface/request/organizational.ts
index b3e510938..986608635 100644
--- a/src/modules/02_organizationalNew/interface/request/organizational.ts
+++ b/src/modules/02_organizationalNew/interface/request/organizational.ts
@@ -6,4 +6,10 @@ interface FilterMaster {
   pageSize: number; //*จำนวนแถวต่อหน้า
   keyword: string; //ข้อความที่ต้องการค้นหา
 }
-export type { FilterMaster };
+interface MovePos {
+  id: string;
+  type: number;
+  positionMaster: string[];
+}
+
+export type { FilterMaster, MovePos };

From 029c03b51b9096651a9f4532b51749b2e8711fec Mon Sep 17 00:00:00 2001
From: oat <oatkub402@gmail.com>
Date: Fri, 2 Feb 2024 14:43:26 +0700
Subject: [PATCH 4/5] =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=9A=E0=B8=B8=E0=B8=84=E0=B8=84=E0=B8=A5?=
 =?UTF-8?q?:=20=E0=B8=A5=E0=B8=9A=E0=B8=AA=E0=B8=96=E0=B8=B2=E0=B8=99?=
 =?UTF-8?q?=E0=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/personal/01ListPrefix.vue      | 28 +------
 .../components/personal/02ListRank.vue        | 28 +------
 .../components/personal/03ListBloodGroup.vue  | 28 +------
 .../components/personal/04ListGender.vue      | 28 +------
 .../components/personal/05ListReligion.vue    | 29 +------
 .../personal/06ListRelationship.vue           | 29 +------
 .../components/personal/DialogForm.vue        | 83 -------------------
 7 files changed, 6 insertions(+), 247 deletions(-)

diff --git a/src/modules/01_metadataNew/components/personal/01ListPrefix.vue b/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
index 10c34609a..7be892d64 100644
--- a/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
+++ b/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
@@ -57,24 +57,12 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "isActive",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "isActive",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
 ]);
 
 const $q = useQuasar();
 
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
-const isActive = ref<boolean>(false);
 const prefix = ref<string>("");
 const prefixRef = ref<any>(null);
 const dialogStatus = ref<string>("");
@@ -84,7 +72,6 @@ const visibleColumns = ref<string[]>([
   "createdAt",
   "lastUpdatedAt",
   "lastUpdateFullName",
-  "isActive",
 ]);
 
 function fetchData() {
@@ -95,7 +82,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "สาวิตรี ศรีสมัย",
-      isActive: true,
     },
     {
       id: "2",
@@ -103,7 +89,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "System Administrator",
-      isActive: false,
     },
     {
       id: "3",
@@ -111,7 +96,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-      isActive: false,
     },
   ];
   store.fetchData(data);
@@ -186,16 +170,7 @@ onMounted(async () => {
         @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
-              v-if="col.value == false"
-              name="mdi-close"
-              color="red"
-              class="text-h5"
-            />
-            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
-          </div>
-          <div v-else>
+          <div>
             {{ col.value }}
           </div>
         </q-td>
@@ -250,7 +225,6 @@ onMounted(async () => {
   <DialogForm
     v-model:dialog="dialog"
     v-model:data="prefix"
-    v-model:isActive="isActive"
     v-model:personalName="personalName"
     v-model:dialogStatus="dialogStatus"
   />
diff --git a/src/modules/01_metadataNew/components/personal/02ListRank.vue b/src/modules/01_metadataNew/components/personal/02ListRank.vue
index 4af44a565..df9d09915 100644
--- a/src/modules/01_metadataNew/components/personal/02ListRank.vue
+++ b/src/modules/01_metadataNew/components/personal/02ListRank.vue
@@ -57,24 +57,12 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "isActive",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "isActive",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
 ]);
 
 const $q = useQuasar();
 
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
-const isActive = ref<boolean>(false);
 const rank = ref<string>("");
 const rankRef = ref<any>(null);
 const dialogStatus = ref<string>("");
@@ -84,7 +72,6 @@ const visibleColumns = ref<string[]>([
   "createdAt",
   "lastUpdatedAt",
   "lastUpdateFullName",
-  "isActive",
 ]);
 
 function fetchData() {
@@ -95,7 +82,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "สาวิตรี ศรีสมัย",
-      isActive: true,
     },
     {
       id: "2",
@@ -103,7 +89,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "System Administrator",
-      isActive: false,
     },
     {
       id: "3",
@@ -111,7 +96,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-      isActive: true,
     },
   ];
   store.fetchData(data);
@@ -186,16 +170,7 @@ onMounted(async () => {
         @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
-              v-if="col.value == false"
-              name="mdi-close"
-              color="red"
-              class="text-h5"
-            />
-            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
-          </div>
-          <div v-else>
+          <div>
             {{ col.value }}
           </div>
         </q-td>
@@ -250,7 +225,6 @@ onMounted(async () => {
   <DialogForm
     v-model:dialog="dialog"
     v-model:data="rank"
-    v-model:isActive="isActive"
     v-model:personalName="personalName"
     v-model:dialogStatus="dialogStatus"
   />
diff --git a/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue b/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue
index 6b3b350b8..d100c6d26 100644
--- a/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue
+++ b/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue
@@ -57,24 +57,12 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "isActive",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "isActive",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
 ]);
 
 const $q = useQuasar();
 
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
-const isActive = ref<boolean>(false);
 const bloodGroup = ref<string>("");
 const bloodGroupRef = ref<any>(null);
 const dialogStatus = ref<string>("");
@@ -84,7 +72,6 @@ const visibleColumns = ref<string[]>([
   "createdAt",
   "lastUpdatedAt",
   "lastUpdateFullName",
-  "isActive",
 ]);
 
 function fetchData() {
@@ -95,7 +82,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "สาวิตรี ศรีสมัย",
-      isActive: true,
     },
     {
       id: "2",
@@ -103,7 +89,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "System Administrator",
-      isActive: false,
     },
     {
       id: "3",
@@ -111,7 +96,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-      isActive: true,
     },
   ];
   store.fetchData(data);
@@ -186,16 +170,7 @@ onMounted(async () => {
         @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
-              v-if="col.value == false"
-              name="mdi-close"
-              color="red"
-              class="text-h5"
-            />
-            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
-          </div>
-          <div v-else>
+          <div>
             {{ col.value }}
           </div>
         </q-td>
@@ -250,7 +225,6 @@ onMounted(async () => {
   <DialogForm
     v-model:dialog="dialog"
     v-model:data="bloodGroup"
-    v-model:isActive="isActive"
     v-model:personalName="personalName"
     v-model:dialogStatus="dialogStatus"
   />
diff --git a/src/modules/01_metadataNew/components/personal/04ListGender.vue b/src/modules/01_metadataNew/components/personal/04ListGender.vue
index a16cf338a..915f14c2a 100644
--- a/src/modules/01_metadataNew/components/personal/04ListGender.vue
+++ b/src/modules/01_metadataNew/components/personal/04ListGender.vue
@@ -57,24 +57,12 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "isActive",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "isActive",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
 ]);
 
 const $q = useQuasar();
 
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
-const isActive = ref<boolean>(false);
 const gender = ref<string>("");
 const genderRef = ref<any>(null);
 const dialogStatus = ref<string>("");
@@ -84,7 +72,6 @@ const visibleColumns = ref<string[]>([
   "createdAt",
   "lastUpdatedAt",
   "lastUpdateFullName",
-  "isActive",
 ]);
 
 function fetchData() {
@@ -95,7 +82,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "สาวิตรี ศรีสมัย",
-      isActive: false,
     },
     {
       id: "2",
@@ -103,7 +89,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "System Administrator",
-      isActive: true,
     },
     {
       id: "3",
@@ -111,7 +96,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-      isActive: false,
     },
   ];
   store.fetchData(data);
@@ -186,16 +170,7 @@ onMounted(async () => {
         @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
-              v-if="col.value == false"
-              name="mdi-close"
-              color="red"
-              class="text-h5"
-            />
-            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
-          </div>
-          <div v-else>
+          <div>
             {{ col.value }}
           </div>
         </q-td>
@@ -250,7 +225,6 @@ onMounted(async () => {
   <DialogForm
     v-model:dialog="dialog"
     v-model:data="gender"
-    v-model:isActive="isActive"
     v-model:personalName="personalName"
     v-model:dialogStatus="dialogStatus"
   />
diff --git a/src/modules/01_metadataNew/components/personal/05ListReligion.vue b/src/modules/01_metadataNew/components/personal/05ListReligion.vue
index 1d24c2ec2..cf79f1bb8 100644
--- a/src/modules/01_metadataNew/components/personal/05ListReligion.vue
+++ b/src/modules/01_metadataNew/components/personal/05ListReligion.vue
@@ -57,24 +57,12 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "isActive",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "isActive",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
 ]);
 
 const $q = useQuasar();
 
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
-const isActive = ref<boolean>(false);
 const religion = ref<string>("");
 const religionRef = ref<any>(null);
 const dialogStatus = ref<string>("");
@@ -84,7 +72,6 @@ const visibleColumns = ref<string[]>([
   "createdAt",
   "lastUpdatedAt",
   "lastUpdateFullName",
-  "isActive",
 ]);
 
 function fetchData() {
@@ -95,7 +82,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "สาวิตรี ศรีสมัย",
-      isActive: false,
     },
     {
       id: "2",
@@ -103,7 +89,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "System Administrator",
-      isActive: true,
     },
     {
       id: "3",
@@ -111,7 +96,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-      isActive: false,
     },
     {
       id: "4",
@@ -119,7 +103,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-      isActive: true,
     },
   ];
   store.fetchData(data);
@@ -194,16 +177,7 @@ onMounted(async () => {
         @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
-              v-if="col.value == false"
-              name="mdi-close"
-              color="red"
-              class="text-h5"
-            />
-            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
-          </div>
-          <div v-else>
+          <div>
             {{ col.value }}
           </div>
         </q-td>
@@ -258,7 +232,6 @@ onMounted(async () => {
   <DialogForm
     v-model:dialog="dialog"
     v-model:data="religion"
-    v-model:isActive="isActive"
     v-model:personalName="personalName"
     v-model:dialogStatus="dialogStatus"
   />
diff --git a/src/modules/01_metadataNew/components/personal/06ListRelationship.vue b/src/modules/01_metadataNew/components/personal/06ListRelationship.vue
index 5f56c5cf5..78e0e2201 100644
--- a/src/modules/01_metadataNew/components/personal/06ListRelationship.vue
+++ b/src/modules/01_metadataNew/components/personal/06ListRelationship.vue
@@ -57,24 +57,12 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "isActive",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "isActive",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
 ]);
 
 const $q = useQuasar();
 
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
-const isActive = ref<boolean>(false);
 const relationship = ref<string>("");
 const relationshipRef = ref<any>(null);
 const dialogStatus = ref<string>("");
@@ -84,7 +72,6 @@ const visibleColumns = ref<string[]>([
   "createdAt",
   "lastUpdatedAt",
   "lastUpdateFullName",
-  "isActive",
 ]);
 
 function fetchData() {
@@ -95,7 +82,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "สาวิตรี ศรีสมัย",
-      isActive: false,
     },
     {
       id: "2",
@@ -103,7 +89,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "System Administrator",
-      isActive: true,
     },
     {
       id: "3",
@@ -111,7 +96,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-      isActive: false,
     },
     {
       id: "4",
@@ -119,7 +103,6 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-      isActive: true,
     },
   ];
   store.fetchData(data);
@@ -194,16 +177,7 @@ onMounted(async () => {
         @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
-              v-if="col.value == false"
-              name="mdi-close"
-              color="red"
-              class="text-h5"
-            />
-            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
-          </div>
-          <div v-else>
+          <div>
             {{ col.value }}
           </div>
         </q-td>
@@ -258,7 +232,6 @@ onMounted(async () => {
   <DialogForm
     v-model:dialog="dialog"
     v-model:data="relationship"
-    v-model:isActive="isActive"
     v-model:personalName="personalName"
     v-model:dialogStatus="dialogStatus"
   />
diff --git a/src/modules/01_metadataNew/components/personal/DialogForm.vue b/src/modules/01_metadataNew/components/personal/DialogForm.vue
index b7d9bf42b..370429407 100644
--- a/src/modules/01_metadataNew/components/personal/DialogForm.vue
+++ b/src/modules/01_metadataNew/components/personal/DialogForm.vue
@@ -12,7 +12,6 @@ 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");
@@ -33,7 +32,6 @@ async function onSubmit() {
       async () => {
         closeDialog();
         data.value = "";
-        isActive.value = false;
       },
       "ยืนยันการบันทึกข้อมูล",
       "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -67,17 +65,6 @@ async function onSubmit() {
             :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">
@@ -97,73 +84,3 @@ async function onSubmit() {
     </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>

From a0959017c8248e5c487f81a19557b7e7d38ed742 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 2 Feb 2024 14:50:19 +0700
Subject: [PATCH 5/5] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=AA=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogNewStructure.vue         | 47 +++++++++++--------
 .../components/listView.vue                   | 30 +++++++++++-
 .../components/mainTree.vue                   | 22 ++++++---
 .../interface/response/organizational.ts      | 17 +++++--
 .../store/organizational.ts                   | 23 ++++++++-
 .../02_organizationalNew/views/main.vue       |  2 +-
 6 files changed, 106 insertions(+), 35 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/DialogNewStructure.vue b/src/modules/02_organizationalNew/components/DialogNewStructure.vue
index 113a38b66..4e5556634 100644
--- a/src/modules/02_organizationalNew/components/DialogNewStructure.vue
+++ b/src/modules/02_organizationalNew/components/DialogNewStructure.vue
@@ -90,26 +90,33 @@ function validateForm() {
 
 /** ฟังชั่น บันทึก */
 function onSubmit() {
-  dialogConfirm($q, () => {
-    showLoader();
-    http
-      .post(config.API.createOrganization, formData)
-      .then((res) => {
-        status.value = true;
-        store.typeOrganizational = "draft";
-        store.draftId = res.data.result.id;
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        // props.fetchActive?.();
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(async () => {
-        modal.value = await false;
-        await close();
-        await hideLoader();
-      });
-  });
+  dialogConfirm(
+    $q,
+    () => {
+      showLoader();
+      http
+        .post(config.API.createOrganization, formData)
+        .then((res) => {
+          status.value = true;
+          store.typeOrganizational = "draft";
+          store.draftId = res.data.result.id;
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          // props.fetchActive?.();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(async () => {
+          modal.value = await false;
+          await close();
+          await hideLoader();
+        });
+    },
+    "ยืนยันการเพิ่มโครงสร้าง",
+    store.draftId
+      ? "คุณมีแบบร่างอยู่หากคุณกดยืนยันระบบจะทำการลบแบบร่างเดิมและสร้างแบบร่างใหม่ ต้องการยืนยันการเพิ่มโครงสร้างนี้ใช่หรือไม่?"
+      : "ต้องการยืนยันการเพิ่มโครงสร้างนี้ใช่หรือไม่?"
+  );
 }
 
 function close() {
diff --git a/src/modules/02_organizationalNew/components/listView.vue b/src/modules/02_organizationalNew/components/listView.vue
index ec060f33d..00bced78e 100644
--- a/src/modules/02_organizationalNew/components/listView.vue
+++ b/src/modules/02_organizationalNew/components/listView.vue
@@ -196,6 +196,28 @@ watch(
           </div>
 
           <div v-else class="col-12 row items-center">
+            <!-- summary -->
+            <div
+              v-if="nodeId"
+              class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1"
+            >
+              <div class="row col q-pa-sm item">
+                <div class="ellipsis">ตำแหน่งทั้งหมด</div>
+                <q-space />
+                <q-badge color="secondary" :label="store.sumPosition.total" />
+              </div>
+              <div class="row col q-pa-sm item bg-grey-1">
+                <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
+                <q-space />
+                <q-badge color="primary" :label="store.sumPosition.use" />
+              </div>
+              <div class="row col q-pa-sm item bg-grey-1">
+                <div class="ellipsis">ตำแหน่งว่าง</div>
+                <q-space />
+                <q-badge color="red" :label="store.sumPosition.vacant" />
+              </div>
+            </div>
+
             <TableView
               v-if="nodeId !== ''"
               v-model:nodeTree="nodeTree"
@@ -220,4 +242,10 @@ watch(
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.list-summary .item {
+  border: 1px solid rgb(231, 231, 231);
+  border-radius: 4px;
+  background-color: white;
+}
+</style>
diff --git a/src/modules/02_organizationalNew/components/mainTree.vue b/src/modules/02_organizationalNew/components/mainTree.vue
index 824db0407..052b4a5c2 100644
--- a/src/modules/02_organizationalNew/components/mainTree.vue
+++ b/src/modules/02_organizationalNew/components/mainTree.vue
@@ -100,14 +100,22 @@ const orgLevel = ref<number>(0);
 const type = ref<number>(0);
 const orgId = ref<string>("");
 
-const updateSelected = (id: string, level: number) => {
-  store.treeId = id;
-  store.level = level;
-  if (id === nodeId.value) {
+const updateSelected = (data: any) => {
+  store.treeId = data.orgTreeId;
+  store.level = data.orgLevel;
+  if (data.orgTreeId === nodeId.value) {
     nodeId.value = "";
   } else {
-    nodeId.value = id ? id : "";
-    id && props.fetchDataTable?.(id, level, true);
+    nodeId.value = data.orgTreeId ? data.orgTreeId : "";
+    data.orgTreeId &&
+      props.fetchDataTable?.(data.orgTreeId, data.orgLevel, true);
+    store.getSumPosition({
+      totalPosition: data.totalPosition,
+      totalPositionCurrentUse: data.totalPositionCurrentUse,
+      totalPositionCurrentVacant: data.totalPositionCurrentVacant,
+      totalPositionNextUse: data.totalPositionNextUse,
+      totalPositionNextVacant: data.totalPositionNextVacant,
+    });
   }
 };
 
@@ -353,7 +361,7 @@ onMounted(async () => {});
 
             <div
               class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-              @click="updateSelected(prop.node.orgTreeId, prop.node.orgLevel)"
+              @click="updateSelected(prop.node)"
             >
               <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
               <div>
diff --git a/src/modules/02_organizationalNew/interface/response/organizational.ts b/src/modules/02_organizationalNew/interface/response/organizational.ts
index e0a2b2927..8e1e922fb 100644
--- a/src/modules/02_organizationalNew/interface/response/organizational.ts
+++ b/src/modules/02_organizationalNew/interface/response/organizational.ts
@@ -3,8 +3,16 @@ interface DataActive {
   activeName: string;
   draftId: string;
   draftName: string;
-  isPublic: boolean,
-  orgPublishDate: Date | null,
+  isPublic: boolean;
+  orgPublishDate: Date | null;
+}
+
+interface SumPosition {
+  totalPosition: number;
+  totalPositionCurrentUse: number;
+  totalPositionCurrentVacant: number;
+  totalPositionNextUse: number;
+  totalPositionNextVacant: number;
 }
 
 interface OrgTree {
@@ -80,7 +88,7 @@ interface Position {
 
 interface PosMaster {
   id: string; // id อัตรากำลัง posmaster
-  orgShortname: string;  // อักษรย่อตำแหน่ง
+  orgShortname: string; // อักษรย่อตำแหน่ง
   posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
   posMasterNo: number | string; // เลขที่ตำแหน่ง เป็นตัวเลข
   posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
@@ -114,7 +122,7 @@ interface Position2 {
 
 interface PosMaster2 {
   id: string; // id อัตรากำลัง posmaster
-  orgShortname: string;  // อักษรย่อตำแหน่ง
+  orgShortname: string; // อักษรย่อตำแหน่ง
   posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
   posMasterNo: number | string; // เลขที่ตำแหน่ง เป็นตัวเลข
   posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
@@ -144,4 +152,5 @@ export type {
   PosMaster2,
   Position,
   Position2,
+  SumPosition
 };
diff --git a/src/modules/02_organizationalNew/store/organizational.ts b/src/modules/02_organizationalNew/store/organizational.ts
index 1efed1c44..92648777f 100644
--- a/src/modules/02_organizationalNew/store/organizational.ts
+++ b/src/modules/02_organizationalNew/store/organizational.ts
@@ -1,10 +1,10 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { reactive, ref } from "vue";
 
 /** importType*/
 import type {
   DataActive,
-  Position,
+  SumPosition,
   PosMaster,
 } from "@/modules/02_organizationalNew/interface/response/organizational";
 
@@ -19,6 +19,23 @@ export const useOrganizational = defineStore("organizationalStore", () => {
   const level = ref<number>();
   const isPublic = ref<boolean>(false);
   const orgPublishDate = ref<Date | null>(null);
+  const sumPosition = reactive({
+    total: 0,
+    use: 0,
+    vacant: 0,
+  });
+
+  function getSumPosition(data: SumPosition) {
+    sumPosition.total = data.totalPosition;
+    sumPosition.use =
+      typeOrganizational.value == "draft"
+        ? data.totalPositionNextUse
+        : data.totalPositionCurrentUse;
+    sumPosition.vacant =
+      typeOrganizational.value == "draft"
+        ? data.totalPositionNextVacant
+        : data.totalPositionCurrentVacant;
+  }
 
   function fetchDataActive(data: DataActive) {
     activeId.value = data.activeId;
@@ -100,5 +117,7 @@ export const useOrganizational = defineStore("organizationalStore", () => {
     isPublic,
     orgPublishDate,
     fetchPosMaster,
+    sumPosition,
+    getSumPosition,
   };
 });
diff --git a/src/modules/02_organizationalNew/views/main.vue b/src/modules/02_organizationalNew/views/main.vue
index 740689886..aff66a6dc 100644
--- a/src/modules/02_organizationalNew/views/main.vue
+++ b/src/modules/02_organizationalNew/views/main.vue
@@ -240,7 +240,7 @@ onMounted(async () => {
               </q-btn-dropdown>
             </q-btn-group>
 
-            <q-btn-dropdown color="green" label="ประวัติโครงสร้าง">
+            <q-btn-dropdown color="green" label="เพิ่มโครงสร้าง">
               <q-list>
                 <q-item
                   dense