From dabc016e39e97723710052c67eb5732ed573e954 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Thu, 25 Jan 2024 14:53:55 +0700
Subject: [PATCH 1/4] upgrade vue 3.2 to 3.4

---
 .gitignore   | 2 ++
 package.json | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 38adffa64..e1f03e1c4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,5 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+package-lock.json
\ No newline at end of file
diff --git a/package.json b/package.json
index 4964772b7..403f6f025 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "pinia": "^2.0.29",
     "quasar": "^2.11.1",
     "structure-chart": "^0.0.9",
-    "vue": "^3.2.45",
+    "vue": "^3.4.15",
     "vue-currency-input": "^3.0.5",
     "vue-router": "^4.1.6",
     "vue3-datepicker": "^0.3.4",

From 42e7fd6b1d44cfd8a7c84dcbe0621dec414212a7 Mon Sep 17 00:00:00 2001
From: oat <oatkub402@gmail.com>
Date: Thu, 25 Jan 2024 15:05:51 +0700
Subject: [PATCH 2/4] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20UI=20?=
 =?UTF-8?q?=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/insignia/InsigniaDetail.vue    | 121 +++++++-
 .../components/insignia/InsigniaList.vue      | 264 +++++++++++++-----
 .../components/insignia/InsigniaType.vue      | 244 ++++++++++++----
 .../interface/response/insignia/Insignia.ts   |  45 ++-
 .../01_metadataNew/stores/InsigniaStore.ts    |  28 ++
 5 files changed, 557 insertions(+), 145 deletions(-)
 create mode 100644 src/modules/01_metadataNew/stores/InsigniaStore.ts

diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue b/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
index 5dd585c69..075bf3125 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
@@ -1,15 +1,120 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { useRouter } from "vue-router";
-import InsigniaDetail from "@/modules/01_metadataNew/components/insignia/InsigniaList.vue";
-
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import InsigniaList from "@/modules/01_metadataNew/components/insignia/InsigniaList.vue";
 const router = useRouter();
-
+const route = useRoute();
 const nameType = ref<string>("");
+import { useCounterMixin } from "@/stores/mixin";
+import type {
+  DetailResponse,
+  DetailRow,
+} from "@/modules/01_metadataNew/interface/response/insignia/Insignia";
 
+const row = ref<DetailRow[]>();
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const id = ref<string>(route.params.id.toString());
 function fetchName(name: string) {
   nameType.value = name;
 }
+
+const data = ref<DetailResponse[]>([
+  {
+    id: "1",
+    level: 1,
+    shortName: "จ.ม.",
+    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
+    insigniaTypeId: "1",
+    note: "-",
+    name: "จัตุรถาภรณ์มงกุฎไทย",
+    createdAt: new Date(),
+    lastUpdatedAt: new Date(),
+    lastUpdateFullName: "System Administrator",
+    isActive: true,
+  },
+  {
+    id: "2",
+    level: 1,
+    shortName: "จ.ช.",
+    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
+    insigniaTypeId: "1",
+    note: "-",
+    name: "จัตุรถาภรณ์ช้างเผือก",
+    createdAt: new Date(),
+    lastUpdatedAt: new Date(),
+    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+    isActive: false,
+  },
+  {
+    id: "1",
+    level: 1,
+    shortName: "บ.ม.",
+    insigniaType: "ชั้นสายสะพาย",
+    insigniaTypeId: "2",
+    note: "-",
+    name: "เบญจมาภรณ์มงกุฎไทย",
+    createdAt: new Date(),
+    lastUpdatedAt: new Date(),
+    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+    isActive: true,
+  },
+  {
+    id: "2",
+    level: 1,
+    shortName: "ท.ม.",
+    insigniaType: "ชั้นสายสะพาย",
+    insigniaTypeId: "2",
+    note: "-",
+    name: "ทวีติยาภรณ์มงกุฎไทย",
+    createdAt: new Date(),
+    lastUpdatedAt: new Date(),
+    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+    isActive: true,
+  },
+  {
+    id: "1",
+    level: 1,
+    shortName: "บ.ช.",
+    insigniaType: "เหรียญบำเหน็จในราชการ",
+    insigniaTypeId: "3",
+    note: "-",
+    name: "เบญจมาภรณ์ช้างเผือก",
+    createdAt: new Date(),
+    lastUpdatedAt: new Date(),
+    lastUpdateFullName: "สาวิตรี ศรีสมัย",
+    isActive: true,
+  },
+  {
+    id: "2",
+    level: 1,
+    shortName: "ท.ม.",
+    insigniaType: "เหรียญบำเหน็จในราชการ",
+    insigniaTypeId: "3",
+    note: "-",
+    name: "ทวีติยาภรณ์มงกุฎไทย",
+    createdAt: new Date(),
+    lastUpdatedAt: new Date(),
+    lastUpdateFullName: "System Administrator",
+    isActive: true,
+  },
+]);
+
+function fetchData() {
+  const datafilter = data.value.find((e) => e.insigniaTypeId === id.value);
+  console.log(datafilter);
+  datafilter && fetchName(datafilter.insigniaType);
+  const list = data.value.map((e) => ({
+    ...e,
+    createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
+    lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
+  }));
+  row.value = list.filter((e) => e.insigniaTypeId === id.value);
+}
+
+onMounted(() => {
+  fetchData();
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -27,7 +132,11 @@ function fetchName(name: string) {
   </div>
 
   <q-card flat bordered>
-    <InsigniaDetail @update:fetchName="fetchName" />
+    <InsigniaList
+      :data="row"
+      @update:fetchName="fetchName"
+      :nameType="nameType"
+    />
   </q-card>
 </template>
 
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
index aba244496..846725371 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter } from "vue-router";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
 
 const router = useRouter();
 const mixin = useCounterMixin();
-const { date2Thai, dialogRemove } = mixin;
+const { date2Thai, dialogRemove, dialogConfirm } = mixin;
+const $q = useQuasar();
 const columns = ref<QTableProps["columns"]>([
   {
     name: "level",
@@ -123,8 +126,9 @@ const isActive = ref<boolean>(false);
 const name = ref<string>("");
 const shortName = ref<string>("");
 const note = ref<string>("");
-const insigniaTypeId = ref<string>("บำเหน็จ");
-
+const insigniaTypeId = ref<string>("");
+const nameRef = ref<any>(null);
+const shortNameRef = ref<any>(null);
 const dialogStatus = ref<string>("");
 const visibleColumns = ref<string[]>([
   "level",
@@ -138,30 +142,36 @@ const visibleColumns = ref<string[]>([
   "note",
 ]);
 
-const row = ref([
-  {
-    level: 1,
-    shortName: "เทส",
-    insigniaType: "บำเหน็จ",
-    note: "-",
-    name: "testInside1",
-    createdAt: date2Thai(new Date()),
-    lastUpdatedAt: date2Thai(new Date()),
-    lastUpdateFullName: "TestTest",
-    isActive: true,
-  },
-  {
-    level: 2,
-    shortName: "เทส2",
-    insigniaType: "บำนาญ",
-    note: "-",
-    name: "testInside2",
-    createdAt: date2Thai(new Date()),
-    lastUpdatedAt: date2Thai(new Date()),
-    lastUpdateFullName: "TestTest",
-    isActive: false,
-  },
-]);
+const props = defineProps({
+  data: { type: Object },
+  nameType: { type: String },
+});
+
+function closeDialog() {
+  dialog.value = false;
+}
+
+function validateForm() {
+  nameRef.value.validate();
+  shortNameRef.value.validate();
+  onSubmit();
+}
+
+async function onSubmit() {
+  if (name.value.length > 0 && shortName.value.length > 0) {
+    dialogConfirm(
+      $q,
+      async () => {
+        console.log("สำเร็จ");
+        closeDialog();
+        name.value = "";
+        shortName.value = "";
+      },
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+    );
+  }
+}
 </script>
 
 <template>
@@ -204,7 +214,7 @@ const row = ref([
     <d-table
       ref="table"
       :columns="columns"
-      :rows="row"
+      :rows="props.data"
       :filter="filterKeyword"
       row-key="name"
       flat
@@ -292,52 +302,164 @@ const row = ref([
     </d-table>
 
     <q-dialog v-model="dialog" class="dialog" persistent>
-      <q-card style="width: 400px">
-        <q-card-section class="flex justify-between">
-          <div v-if="dialogStatus == 'edit'" class="text-h6">แก้ไข</div>
-          <div v-else class="text-h6">เพิ่ม</div>
-          <q-btn flat v-close-popup round dense icon="close" color="red" />
-        </q-card-section>
+      <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-card-section class="q-pt-none q-gutter-md">
-          <q-input
-            outlined
-            v-model="insigniaTypeId"
-            label="ลำดับชั้นเครื่องราชฯ"
-            dense
-            readonly
-          />
-          <q-input outlined v-model="name" label="ชื่อเครื่องราชฯ" dense />
-          <q-input outlined v-model="shortName" label="ชื่อย่อ" dense />
-          <q-input
-            outlined
-            v-model="note"
-            type="textarea"
-            label="หมายเหตุ"
-            dense
-          />
-          <div class="row justify-between q-mt-md">
-            <span class="text-bold"> สถานะการใช้งาน </span>
-            <q-toggle v-model="isActive" dense />
-          </div>
-        </q-card-section>
+          <q-separator color="grey-4" />
+          <q-card-section class="q-pa-none">
+            <q-input
+              outlined
+              :model-value="nameType"
+              label="ลำดับชั้นเครื่องราชฯ"
+              dense
+              lazy-rules
+              borderless
+              class="col-12 bg-white q-ma-md"
+              hide-bottom-space
+              readonly
+            />
+            <q-input
+              ref="nameRef"
+              outlined
+              v-model="name"
+              label="ชื่อเครื่องราช"
+              dense
+              lazy-rules
+              borderless
+              class="col-12 bg-white q-ma-md"
+              :rules="[
+                (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
+              ]"
+              hide-bottom-space
+            />
+            <q-input
+              ref="shortNameRef"
+              outlined
+              v-model="shortName"
+              label="ชื่อย่อ"
+              dense
+              lazy-rules
+              borderless
+              class="col-12 bg-white q-ma-md"
+              :rules="[
+                (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
+              ]"
+              hide-bottom-space
+            />
+            <q-input
+              outlined
+              v-model="note"
+              label="หมายเหตุ"
+              dense
+              type="textarea"
+              borderless
+              class="col-12 bg-white q-ma-md"
+              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" @change="" />
+                  <span class="control"></span>
+                </label>
+              </div>
+            </div>
+          </q-card-section>
 
-        <q-card-actions align="right">
-          <q-btn
-            flat
-            label="ตกลง"
-            color="primary"
-            v-close-popup
-            @click="
-              () => {
-                (name = ''), (isActive = false);
-              }
-            "
-          />
-        </q-card-actions>
+          <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>
   </div>
 </template>
 
-<style></style>
+<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/insignia/InsigniaType.vue b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
index bd6d020a5..00b0f97b9 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { ref } from "vue";
+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 { date2Thai, dialogRemove } = mixin;
+const { dialogRemove, dialogConfirm } = mixin;
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -65,11 +69,13 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const $q = useQuasar();
+
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
 const isActive = ref<boolean>(false);
 const name = ref<string>("");
-
+const nameRef = ref<any>(null);
 const dialogStatus = ref<string>("");
 const visibleColumns = ref<string[]>([
   "name",
@@ -79,28 +85,68 @@ const visibleColumns = ref<string[]>([
   "isActive",
 ]);
 
-const row = ref([
-  {
-    id: "",
-    name: "test",
-    createdAt: date2Thai(new Date()),
-    lastUpdatedAt: date2Thai(new Date()),
-    lastUpdateFullName: "TestTest",
-    isActive: true,
-  },
-  {
-    id: "",
-    name: "test2",
-    createdAt: date2Thai(new Date()),
-    lastUpdatedAt: date2Thai(new Date()),
-    lastUpdateFullName: "TestTest",
-    isActive: false,
-  },
-]);
+// const row = ref([]);
 
-function onclickDetail(data: (typeof row)["value"][number]) {
-  const id = data.id;
-  router.push(`/master-data/insignia/detail/test`);
+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 onclickDetail(id: string) {
+  router.push(`/master-data/insignia/detail/${id}`);
+}
+
+function validateForm() {
+  nameRef.value.validate();
+  onSubmit();
+}
+
+async function onSubmit() {
+  if (name.value.length > 0) {
+    dialogConfirm(
+      $q,
+      async () => {
+        console.log("สำเร็จ");
+        closeDialog();
+        name.value = "";
+      },
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+    );
+  }
 }
 </script>
 
@@ -143,7 +189,7 @@ function onclickDetail(data: (typeof row)["value"][number]) {
   <d-table
     ref="table"
     :columns="columns"
-    :rows="row"
+    :rows="store.row"
     :filter="filterKeyword"
     row-key="name"
     flat
@@ -165,7 +211,7 @@ function onclickDetail(data: (typeof row)["value"][number]) {
       <q-tr
         :props="props"
         class="cursor-pointer"
-        @click.stop="onclickDetail(props.row)"
+        @click.stop="onclickDetail(props.row.id)"
       >
         <q-td v-for="col in props.cols" :key="col.id">
           <div v-if="col.name == 'isActive'">
@@ -230,36 +276,128 @@ function onclickDetail(data: (typeof row)["value"][number]) {
   </d-table>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="width: 400px">
-      <q-card-section class="flex justify-between">
-        <div v-if="dialogStatus == 'edit'" class="text-h6">แก้ไข</div>
-        <div v-else class="text-h6">เพิ่ม</div>
-        <q-btn flat v-close-popup round dense icon="close" color="red" />
-      </q-card-section>
+    <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-card-section class="q-pt-none">
-        <q-input outlined v-model="name" label="ลำดับชั้นเครื่องราชฯ" dense />
-        <div class="row justify-between q-mt-md">
-          <span class="text-bold"> สถานะการใช้งาน </span>
-          <q-toggle v-model="isActive" dense />
-        </div>
-      </q-card-section>
+        <q-separator color="grey-4" />
+        <q-card-section class="q-pa-none">
+          <q-input
+            ref="nameRef"
+            outlined
+            v-model="name"
+            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" @change="" />
+                <span class="control"></span>
+              </label>
+            </div>
+          </div>
+        </q-card-section>
 
-      <q-card-actions align="right">
-        <q-btn
-          flat
-          label="ตกลง"
-          color="primary"
-          v-close-popup
-          @click="
-            () => {
-              (name = ''), (isActive = false);
-            }
-          "
-        />
-      </q-card-actions>
+        <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></style>
+<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/interface/response/insignia/Insignia.ts b/src/modules/01_metadataNew/interface/response/insignia/Insignia.ts
index 6fb21a2ca..afa2247f4 100644
--- a/src/modules/01_metadataNew/interface/response/insignia/Insignia.ts
+++ b/src/modules/01_metadataNew/interface/response/insignia/Insignia.ts
@@ -1,18 +1,33 @@
-//ข้อมูล
-interface ResponseHistoryObject {
-  createdAt?: Date;
-  createdFullName: String;
-  createdUserId: String;
-  id: String;
-  isActive: Boolean;
+interface DataResponse {
+  createdAt: Date;
+  id: string;
+  isActive: boolean;
   lastUpdateFullName: String;
-  lastUpdateUserId: String;
-  lastUpdatedAt?: Date;
-  level: number;
-  name: String;
-  shortName: String;
-  insigniaType?: any;
-  note: string;
+  lastUpdatedAt: Date;
+  name: string;
 }
 
-export type { ResponseHistoryObject };
+interface DataRow {
+  createdAt: string | null;
+  id: string;
+  isActive: boolean;
+  lastUpdateFullName: String;
+  lastUpdatedAt: string | null;
+  name: string;
+}
+
+interface DetailResponse extends DataResponse {
+  note: string;
+  shortName: string;
+  insigniaType: string;
+  insigniaTypeId: string;
+  level: number;
+}
+
+interface DetailRow
+  extends Omit<DetailResponse, "createdAt" | "lastUpdatedAt"> {
+  createdAt: string | null;
+  lastUpdatedAt: string | null;
+}
+
+export type { DataResponse, DataRow, DetailResponse, DetailRow };
diff --git a/src/modules/01_metadataNew/stores/InsigniaStore.ts b/src/modules/01_metadataNew/stores/InsigniaStore.ts
new file mode 100644
index 000000000..55ca005ed
--- /dev/null
+++ b/src/modules/01_metadataNew/stores/InsigniaStore.ts
@@ -0,0 +1,28 @@
+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 useInsigniaDataStore = defineStore("insigniaData", () => {
+  const row = ref<DataRow[]>();
+  function fetchData(data: DataResponse[]) {
+    console.log(data);
+    const list = data.map((e) => ({
+      ...e,
+      createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
+      lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
+    }));
+    console.log(list);
+    row.value = list;
+  }
+
+  return {
+    fetchData,
+    row,
+  };
+});

From 1d77c2315e431008f2ec71b0558d997f8afa9d45 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 25 Jan 2024 15:59:08 +0700
Subject: [PATCH 3/4] =?UTF-8?q?Popup=20=E0=B9=82=E0=B8=84=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=87=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=A3=E0=B8=B2=E0=B8=81=E0=B8=B3=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=87=E0=B9=83=E0=B8=AB=E0=B8=A1=E0=B9=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogFormAgency.vue           | 212 +++++++++++++++
 .../components/DialogFormPosition.vue         | 241 ++++++++++++++++++
 .../components/DialogHistory.vue              | 114 +++++++++
 .../interface/index/Main.ts                   |  33 ++-
 .../02_organizationalNew/views/main.vue       |  26 +-
 5 files changed, 623 insertions(+), 3 deletions(-)
 create mode 100644 src/modules/02_organizationalNew/components/DialogFormAgency.vue
 create mode 100644 src/modules/02_organizationalNew/components/DialogFormPosition.vue
 create mode 100644 src/modules/02_organizationalNew/components/DialogHistory.vue

diff --git a/src/modules/02_organizationalNew/components/DialogFormAgency.vue b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
new file mode 100644
index 000000000..95563f0ed
--- /dev/null
+++ b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type {
+  FormDataAgency,
+  FormAgencyRef,
+  DataOption,
+} from "@/modules/02_organizationalNew/interface/index/Main";
+
+const props = defineProps({
+  modal: Boolean,
+  close: Function,
+});
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
+
+const ocLevelOp = ref<DataOption[]>([]);
+
+const ocNameRef = ref<Object | null>(null);
+const shortNameRef = ref<Object | null>(null);
+const ocNoRef = ref<Object | null>(null);
+const ocLevelRef = ref<Object | null>(null);
+const telOutRef = ref<Object | null>(null);
+const telInRef = ref<Object | null>(null);
+const telRef = ref<Object | null>(null);
+
+const formData = reactive<FormDataAgency>({
+  ocName: "",
+  shortName: "",
+  ocNo: "",
+  ocLevel: "",
+  telOut: "",
+  telIn: "",
+  tel: "",
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const objectComplaintsRef: FormAgencyRef = {
+  ocName: ocNameRef,
+  shortName: shortNameRef,
+  ocNo: ocNoRef,
+  ocLevel: ocLevelRef,
+  telOut: telOutRef,
+  telIn: telInRef,
+  tel: telRef,
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateForm() {
+  const hasError = [];
+  for (const key in objectComplaintsRef) {
+    if (Object.prototype.hasOwnProperty.call(objectComplaintsRef, key)) {
+      const property = objectComplaintsRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  } else {
+  }
+}
+
+/** ฟังชั่น บันทึก */
+function onSubmit() {
+  dialogConfirm($q, () => {
+    console.log(formData)
+  });
+}
+
+watch(
+  () => props.modal,
+  () => {
+    if (props.modal === true) {
+      ocLevelOp.value = [
+        {
+          id: "id1",
+          name: "id1",
+        },
+        {
+          id: "id2",
+          name: "id2",
+        },
+      ];
+    }
+  }
+);
+</script>
+<template>
+  <template>
+    <q-dialog v-model="props.modal" persistent>
+      <q-card style="min-width: 50vw">
+        <form @submit.prevent="validateForm">
+          <DialogHeader :tittle="`เพิ่มหน่วยงาน`" :close="props.close" />
+          <q-separator />
+
+          <q-card-section>
+            <div class="row q-col-gutter-sm">
+              <div class="col-4">
+                <q-input
+                  v-model="formData.ocName"
+                  ref="ocNameRef"
+                  dense
+                  outlined
+                  for="#ocName"
+                  label="สรุปผลการพิจารณา"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกสรุปผลการพิจารณา'}`]"
+                />
+              </div>
+              <div class="col-2">
+                <q-input
+                  v-model="formData.shortName"
+                  ref="shortNameRef"
+                  dense
+                  outlined
+                  for="#shortName"
+                  label="ชื่อย่อ"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกชื่อย่อ'}`]"
+                />
+              </div>
+              <div class="col-2">
+                <q-input
+                  v-model="formData.ocNo"
+                  ref="ocNoRef"
+                  dense
+                  outlined
+                  for="#ocNo"
+                  label="รหัสหน่วยงาน"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกรหัสหน่วยงาน'}`]"
+                />
+              </div>
+              <div class="col-4">
+                <q-select
+                  for="#ocLevel"
+                  ref="ocLevelRef"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.ocLevel"
+                  :options="ocLevelOp"
+                  label="ระดับของหน่วยงาน"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกระดับของหน่วยงาน'}`]"
+                  lazy-rules
+                />
+              </div>
+              <div class="col-4">
+                <q-input
+                  v-model="formData.telOut"
+                  ref="telOutRef"
+                  dense
+                  outlined
+                  for="#telOut"
+                  label="หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก"
+                  hide-bottom-space
+                  :rules="[
+                    (val) =>
+                      !!val ||
+                      `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อจากภายนอก'}`,
+                  ]"
+                />
+              </div>
+              <div class="col-4">
+                <q-input
+                  v-model="formData.telIn"
+                  ref="telInRef"
+                  dense
+                  outlined
+                  for="#telIn"
+                  label="หมายเลขโทรศัพท์ที่ติดต่อจากภายใน"
+                  hide-bottom-space
+                  :rules="[
+                    (val) =>
+                      !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อจากภายใน'}`,
+                  ]"
+                />
+              </div>
+              <div class="col-4">
+                <q-input
+                  v-model="formData.tel"
+                  ref="telRef"
+                  dense
+                  outlined
+                  for="#tel"
+                  label="หมายเลขโทรสาร"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกหมายเลขโทรสาร'}`]"
+                />
+              </div>
+            </div>
+          </q-card-section>
+          <q-separator />
+          <q-card-actions align="right" class="bg-white text-teal">
+            <q-btn type="submit" :label="`บันทึก`" color="public" />
+          </q-card-actions>
+        </form>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>
diff --git a/src/modules/02_organizationalNew/components/DialogFormPosition.vue b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
new file mode 100644
index 000000000..78381a629
--- /dev/null
+++ b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type {
+  FormDataPosition,
+  FormPositionRef,
+  DataOption,
+} from "@/modules/02_organizationalNew/interface/index/Main";
+
+const props = defineProps({
+  modal: Boolean,
+  close: Function,
+});
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
+
+const rows = ref<any[]>([]);
+const ocLevelOp = ref<DataOption[]>([]);
+
+const prefixNoRef = ref<Object | null>(null);
+const positionNoRef = ref<Object | null>(null);
+
+const formData = reactive<FormDataPosition>({
+  prefixNo: "",
+  positionNo: "",
+  suffixNo: "",
+  confirm: false,
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const objectPositionRef: FormPositionRef = {
+  prefixNo: prefixNoRef,
+  positionNo: positionNoRef,
+};
+
+const columns = ref<QTableProps["columns"]>([
+    {
+      name: "no",
+      align: "left",
+      label: "ลำดับ",
+      sortable: false,
+      field: "no",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "positionType",
+      align: "left",
+      label: "ประเภทตำเเหน่ง",
+      sortable: true,
+      field: "positionType",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "positionLevel",
+      align: "left",
+      label: "ระดับตำแหน่ง ด้าน/สาขา",
+      sortable: true,
+      field: "positionLevel",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "positionAdmin",
+      align: "left",
+      label: "ตำแหน่งทางการบริหาร",
+      sortable: true,
+      field: "positionAdmin",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "other",
+      align: "left",
+      label: "ฯลฯ",
+      sortable: true,
+      field: "other",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+
+  ]);
+  const visibleColumns = ref<string[]>([
+    "no",
+    "positionType",
+    "positionLevel",
+    "positionAdmin",
+    "other",
+  ]);
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateForm() {
+  const hasError = [];
+  for (const key in objectPositionRef) {
+    if (Object.prototype.hasOwnProperty.call(objectPositionRef, key)) {
+      const property = objectPositionRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  } else {
+  }
+}
+
+/** ฟังชั่น บันทึก */
+function onSubmit() {
+  dialogConfirm($q, () => {
+    console.log(formData);
+  });
+}
+
+watch(
+  () => props.modal,
+  () => {
+    if (props.modal === true) {
+      ocLevelOp.value = [
+        {
+          id: "id1",
+          name: "id1",
+        },
+        {
+          id: "id2",
+          name: "id2",
+        },
+      ];
+    }
+  }
+);
+</script>
+<template>
+  <template>
+    <q-dialog v-model="props.modal" persistent>
+      <q-card style="min-width: 50vw">
+        <form @submit.prevent="validateForm">
+          <DialogHeader :tittle="`เพิ่มตำแหน่ง`" :close="props.close" />
+          <q-separator />
+
+          <q-card-section>
+            <div class="row q-col-gutter-sm">
+              <div class="col-4">
+                <q-input
+                  v-model="formData.prefixNo"
+                  ref="prefixNoRef"
+                  dense
+                  outlined
+                  for="#prefixNo"
+                  label="Prefix เลขที่ตำเเหน่ง"
+                  hide-bottom-space
+                  :rules="[
+                    (val) => !!val || `${'กรุณากรอกPrefix เลขที่ตำเเหน่ง'}`,
+                  ]"
+                />
+              </div>
+              <div class="col-4">
+                <q-input
+                  v-model="formData.positionNo"
+                  ref="positionNoRef"
+                  dense
+                  outlined
+                  for="#positionNo"
+                  label="เลขที่ตำแหน่ง"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
+                />
+              </div>
+              <div class="col-4">
+                <q-input
+                  v-model="formData.suffixNo"
+                  dense
+                  outlined
+                  for="#suffixNo"
+                  label="Suffix เลขที่ตำแหน่ง"
+                />
+              </div>
+              <div class="col-12">
+                <d-table
+                  ref="table"
+                  :columns="columns"
+                  :rows="rows"
+                  row-key="idcard"
+                  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"
+                        style="color: #000000; font-weight: 500"
+                      >
+                        <span class="text-weight-medium">{{ col.label }}</span>
+                      </q-th>
+                    </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.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>
+              </div>
+              <div class="col-12 q-mt-sm">
+                <q-checkbox dense v-model="formData.confirm" label="ไม่ผูกกับตำแหน่งก่อนหน้า" color="teal" />
+              </div>
+            </div>
+          </q-card-section>
+          <q-separator />
+          <q-card-actions align="right" class="bg-white text-teal">
+            <q-btn type="submit" :label="`บันทึก`" color="public" />
+          </q-card-actions>
+        </form>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>
diff --git a/src/modules/02_organizationalNew/components/DialogHistory.vue b/src/modules/02_organizationalNew/components/DialogHistory.vue
new file mode 100644
index 000000000..d00af4e58
--- /dev/null
+++ b/src/modules/02_organizationalNew/components/DialogHistory.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const props = defineProps({
+  modal: Boolean,
+  close: Function,
+});
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
+
+const rows = ref<any[]>([]);
+
+
+const columns = ref<QTableProps["columns"]>([
+    {
+      name: "no",
+      align: "left",
+      label: "ลำดับ",
+      sortable: false,
+      field: "no",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "name",
+      align: "left",
+      label: "ชื่อ",
+      sortable: true,
+      field: "name",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "lastUpdatedAt",
+      align: "left",
+      label: "วันที่แก้ไข",
+      sortable: true,
+      field: "lastUpdatedAt",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+
+  ]);
+  const visibleColumns = ref<string[]>([
+    "no",
+    "name",
+    "lastUpdatedAt",
+  ]);
+
+</script>
+<template>
+  <template>
+    <q-dialog v-model="props.modal" persistent>
+      <q-card style="min-width: 40vw">
+          <DialogHeader :tittle="`ประวัติโครงสร้าง`" :close="props.close" />
+          <q-separator />
+
+          <q-card-section>
+            <div class="row q-col-gutter-sm">
+              <div class="col-12">
+                <d-table
+                  ref="table"
+                  :columns="columns"
+                  :rows="rows"
+                  row-key="idcard"
+                  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"
+                        style="color: #000000; font-weight: 500"
+                      >
+                        <span class="text-weight-medium">{{ col.label }}</span>
+                      </q-th>
+                    </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.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>
+              </div>
+            </div>
+          </q-card-section>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>
diff --git a/src/modules/02_organizationalNew/interface/index/Main.ts b/src/modules/02_organizationalNew/interface/index/Main.ts
index 46133c9b9..f34843c9f 100644
--- a/src/modules/02_organizationalNew/interface/index/Main.ts
+++ b/src/modules/02_organizationalNew/interface/index/Main.ts
@@ -7,4 +7,35 @@ interface DataOption {
   name: string;
 }
 
-export type { Pagination, DataOption };
+interface FormDataAgency {
+ocName:string
+shortName:string
+ocNo:string
+ocLevel:string
+telOut:string
+telIn:string
+tel:string
+}
+interface FormDataPosition {
+prefixNo:string
+positionNo:string
+suffixNo:string
+confirm:boolean
+}
+
+interface FormAgencyRef {
+  ocName: object | null;
+  shortName: object | null;
+  ocNo: object | null;
+  ocLevel: object | null;
+  telOut: object | null;
+  telIn: object | null;
+  tel: object | null;
+  [key: string]: any;
+}
+interface FormPositionRef {
+  prefixNo: object | null;
+  positionNo: object | null;
+  [key: string]: any;
+}
+export type { Pagination, DataOption,FormDataAgency,FormDataPosition,FormAgencyRef,FormPositionRef };
diff --git a/src/modules/02_organizationalNew/views/main.vue b/src/modules/02_organizationalNew/views/main.vue
index 2a55fa61c..4795a8c07 100644
--- a/src/modules/02_organizationalNew/views/main.vue
+++ b/src/modules/02_organizationalNew/views/main.vue
@@ -1,7 +1,29 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import DialogFormAgency from "@/modules/02_organizationalNew/components/DialogFormAgency.vue";
+import DialogFormPosition from "@/modules/02_organizationalNew/components/DialogFormPosition.vue";
+import DialogFormHistory from "@/modules/02_organizationalNew/components/DialogHistory.vue";
+
+const modalAgency = ref<boolean>(false);
+const modalPosition = ref<boolean>(false);
+const modalHistory = ref<boolean>(false);
+
+function close() {
+  modalAgency.value = false;
+  modalPosition.value = false;
+  modalHistory.value = false;
+}
+</script>
+
 <template>
   โครงสร้างอัตรากำลัง (ใหม่)
+  <q-btn @click="modalAgency = true" color="primary">pop up test (agency)</q-btn>
+  <q-btn @click="modalPosition = true" color="blue">pop up test (position)</q-btn>
+  <q-btn @click="modalHistory = true" color="warning">pop up test (history)</q-btn>
+
+  <DialogFormAgency :modal="modalAgency" :close="close" />
+  <DialogFormPosition :modal="modalPosition" :close="close" />
+  <DialogFormHistory :modal="modalHistory" :close="close" />
 </template>
 
-<script setup lang="ts"></script>
-
 <style scoped></style>

From b9d04bef5c8a21adcc4da8bf00327ec0ac78c152 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 25 Jan 2024 16:54:23 +0700
Subject: [PATCH 4/4] =?UTF-8?q?pop=20up=20=E0=B8=95=E0=B8=B1=E0=B9=89?=
 =?UTF-8?q?=E0=B8=87=E0=B9=80=E0=B8=A7=E0=B8=A5=E0=B8=B2=E0=B9=80=E0=B8=9C?=
 =?UTF-8?q?=E0=B8=A2=E0=B9=81=E0=B8=9E=E0=B8=A3=E0=B9=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogFormDateTime.vue         | 115 ++++++++++++++++++
 .../interface/index/Main.ts                   |   6 +-
 .../02_organizationalNew/views/main.vue       |   5 +
 3 files changed, 125 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/02_organizationalNew/components/DialogFormDateTime.vue

diff --git a/src/modules/02_organizationalNew/components/DialogFormDateTime.vue b/src/modules/02_organizationalNew/components/DialogFormDateTime.vue
new file mode 100644
index 000000000..d3567a49f
--- /dev/null
+++ b/src/modules/02_organizationalNew/components/DialogFormDateTime.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type { FormDateTimeRef } from "@/modules/02_organizationalNew/interface/index/Main";
+
+const props = defineProps({
+  modal: Boolean,
+  close: Function,
+});
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, date2Thai } = mixin;
+
+const dateTimeRef = ref<Object | null>(null);
+
+const dateTime = ref<Date>();
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const objectRef: FormDateTimeRef = {
+  dateTime: dateTimeRef,
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateForm() {
+  const hasError = [];
+  for (const key in objectRef) {
+    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
+      const property = objectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  } else {
+  }
+}
+
+/** ฟังชั่น บันทึก */
+function onSubmit() {
+  dialogConfirm($q, () => {
+    console.log(dateTime.value);
+  });
+}
+</script>
+<template>
+  <template>
+    <q-dialog v-model="props.modal" persistent>
+      <q-card style="min-width: 10vw">
+        <form @submit.prevent="validateForm">
+          <DialogHeader :tittle="`ตั้งเวลาเผยแพร่`" :close="props.close" />
+          <q-separator />
+
+          <q-card-section>
+            <div class="row q-col-gutter-sm">
+              <div class="col-12">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dateTime"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      for="#dateTime"
+                      ref="dateTimeRef"
+                      outlined
+                      dense
+                      hide-bottom-space
+                      :model-value="
+                        dateTime != null ? date2Thai(dateTime) : null
+                      "
+                      label="วันเวลาเผยแพร่"
+                      :rules="[
+                        (val) => !!val || `${'กรุณาเลือกวันเวลาเผยแพร่'}`,
+                      ]"
+                      lazy-rules
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+            </div>
+          </q-card-section>
+          <q-separator />
+          <q-card-actions align="right" class="bg-white text-teal">
+            <q-btn type="submit" :label="`บันทึก`" color="public" />
+          </q-card-actions>
+        </form>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>
diff --git a/src/modules/02_organizationalNew/interface/index/Main.ts b/src/modules/02_organizationalNew/interface/index/Main.ts
index f34843c9f..afc90fbf9 100644
--- a/src/modules/02_organizationalNew/interface/index/Main.ts
+++ b/src/modules/02_organizationalNew/interface/index/Main.ts
@@ -38,4 +38,8 @@ interface FormPositionRef {
   positionNo: object | null;
   [key: string]: any;
 }
-export type { Pagination, DataOption,FormDataAgency,FormDataPosition,FormAgencyRef,FormPositionRef };
+interface FormDateTimeRef {
+  dateTime: object | null;
+  [key: string]: any;
+}
+export type { Pagination, DataOption,FormDataAgency,FormDataPosition,FormAgencyRef,FormPositionRef,FormDateTimeRef };
diff --git a/src/modules/02_organizationalNew/views/main.vue b/src/modules/02_organizationalNew/views/main.vue
index 4795a8c07..4b81929a5 100644
--- a/src/modules/02_organizationalNew/views/main.vue
+++ b/src/modules/02_organizationalNew/views/main.vue
@@ -3,15 +3,18 @@ import { ref } from "vue";
 import DialogFormAgency from "@/modules/02_organizationalNew/components/DialogFormAgency.vue";
 import DialogFormPosition from "@/modules/02_organizationalNew/components/DialogFormPosition.vue";
 import DialogFormHistory from "@/modules/02_organizationalNew/components/DialogHistory.vue";
+import DialogFormDateTime from "@/modules/02_organizationalNew/components/DialogFormDateTime.vue";
 
 const modalAgency = ref<boolean>(false);
 const modalPosition = ref<boolean>(false);
 const modalHistory = ref<boolean>(false);
+const modalDate = ref<boolean>(false);
 
 function close() {
   modalAgency.value = false;
   modalPosition.value = false;
   modalHistory.value = false;
+  modalDate.value = false;
 }
 </script>
 
@@ -20,10 +23,12 @@ function close() {
   <q-btn @click="modalAgency = true" color="primary">pop up test (agency)</q-btn>
   <q-btn @click="modalPosition = true" color="blue">pop up test (position)</q-btn>
   <q-btn @click="modalHistory = true" color="warning">pop up test (history)</q-btn>
+  <q-btn @click="modalDate = true" color="public">pop up test (Date)</q-btn>
 
   <DialogFormAgency :modal="modalAgency" :close="close" />
   <DialogFormPosition :modal="modalPosition" :close="close" />
   <DialogFormHistory :modal="modalHistory" :close="close" />
+  <DialogFormDateTime :modal="modalDate" :close="close" />
 </template>
 
 <style scoped></style>