fixing

src/modules/01_masterdata/components/Indicators/Assignment/DetailView.vue

@@ -6,8 +6,8 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importType*/
-import type { FormDataRole } from "@/modules/01_metadataNew/interface/request/Main";
-import type { DataOption } from "@/modules/01_metadataNew/interface/index/Main";
+import type { FormDataRole } from "@/modules/01_masterdata/interface/request/Main";
+import type { DataOption } from "@/modules/01_masterdata/interface/index/Main";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";

src/modules/01_masterdata/components/Indicators/indicatorByPlan/DetailView.vue

@@ -3,7 +3,7 @@ import { ref } from "vue";
 
 import { useRouter, useRoute } from "vue-router";
 
-import IndicatorByPlan from "@/modules/01_metadataNew/components/Indicators/indicatorByPlan/IndicatorByPlan.vue";
+import IndicatorByPlan from "@/modules/01_masterdata/components/Indicators/indicatorByPlan/IndicatorByPlan.vue";
 
 const router = useRouter();
 const route = useRoute();
@@ -19,7 +19,7 @@ const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม
       class="q-mr-sm"
       icon="mdi-arrow-left"
       color="primary"
-      @click="router.push(`/KPI-indicator-plan`)"
+      @click="router.push(`/masterdata/indicator-plan`)"
     />
     {{ `${title}ตัวชี้วัดตามแผนฯ` }}
   </div>

src/modules/01_masterdata/components/Indicators/indicatorByPlan/IndicatorByPlan.vue

@@ -6,7 +6,7 @@ import config from "@/app.config";
 import http from "@/plugins/http";
 
 /** importType*/
-import type { DataOption } from "@/modules/01_metadataNew/interface/index/Main";
+import type { DataOption } from "@/modules/01_masterdata/interface/index/Main";
 
 /** importStore*/
 import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
@@ -249,7 +249,7 @@ function onSubmit() {
           success($q, "บันทึกข้อมูลสำเร็จ");
           editStatus.value
             ? fetchDataById(id.value)
-            : router.push(`/KPI-indicator-plan/${res.data.result}`);
+            : router.push(`/masterdata/indicator-plan/${res.data.result}`);
         } catch (e) {
           messageError($q, e);
         } finally {
@@ -272,7 +272,6 @@ onMounted(() => {
 </script>
 
 <template>
-  
   <q-card>
     <q-form @submit.prevent greedy @validation-success="onSubmit()">
       <q-card-section>

src/modules/01_masterdata/components/Indicators/indicatorByRole/DetailView.vue

@@ -7,8 +7,8 @@ import config from "@/app.config";
 
 import { useCounterMixin } from "@/stores/mixin";
 
-import type { FormDataRole } from "@/modules/01_metadataNew/interface/request/Main";
-import type { DataOption } from "@/modules/01_metadataNew/interface/index/Main";
+import type { FormDataRole } from "@/modules/01_masterdata/interface/request/Main";
+import type { DataOption } from "@/modules/01_masterdata/interface/index/Main";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -153,7 +153,7 @@ function onSubmit() {
       http[id.value ? "put" : "post"](url, body)
         .then(() => {
           success($q, "บันทึกสำเร็จ");
-          id.value ? getDetail() : router.push(`/KPI-indicator-role`);
+          id.value ? getDetail() : router.push(`/masterdata/indicator-role`);
         })
         .catch((err) => {
           messageError($q, err);

src/modules/01_masterdata/components/competency/01ListCompetency.vue

@@ -3,22 +3,24 @@ import { ref, onMounted, reactive, watch } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type {
   DataOption,
   NewPagination,
-} from "@/modules/01_metadataNew/interface/index/Main";
-import type { FormQueryCapacity } from "@/modules/01_metadataNew/interface/request/Main";
-import type { ResDataCapacity } from "@/modules/01_metadataNew/interface/response/Main";
+} from "@/modules/01_masterdata/interface/index/Main";
+import type { FormQueryCapacity } from "@/modules/01_masterdata/interface/request/Main";
+import type { ResDataCapacity } from "@/modules/01_masterdata/interface/response/Main";
 
-import { useKPIDataStore } from "@/modules/01_metadataNew/stores/KPIStore";
+import { useKPIDataStore } from "@/modules/01_masterdata/stores/KPIStore";
+import { checkPermission } from "@/utils/permissions";
 
 const total = ref<number>();
 const store = useKPIDataStore();
 const router = useRouter();
+const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
@@ -91,7 +93,7 @@ async function fetchList() {
 }
 
 async function onViewDetail(id: string) {
-  router.push(`/KPI-competency/${id}`);
+  router.push(`/masterdata/competency/${id}`);
 }
 
 function deleteData(id: string) {
@@ -113,7 +115,7 @@ function deleteData(id: string) {
 
 /** เปลี่ยนเป็นหน้าเพิ่มข้อมูล */
 function onAdd() {
-  router.push(`/KPI-competency/add`);
+  router.push(`/masterdata/competency/add`);
 }
 
 function fetchNewList() {
@@ -157,7 +159,14 @@ onMounted(() => {
       map-options
       @update:model-value="fetchNewList"
     />
-    <q-btn flat round color="primary" icon="add" @click="onAdd()">
+    <q-btn
+      v-if="checkPermission($route)?.attrIsCreate"
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click="onAdd()"
+    >
       <q-tooltip> เพิ่มข้อมูล </q-tooltip>
     </q-btn>
     <q-space />
@@ -222,6 +231,7 @@ onMounted(() => {
       <q-tr :props="props" class="cursor-pointer">
         <q-td auto-width>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             color="edit"
             flat
             dense
@@ -235,6 +245,7 @@ onMounted(() => {
             <q-tooltip>แก้ไข</q-tooltip>
           </q-btn>
           <q-btn
+            v-if="checkPermission($route)?.attrIsDelete"
             color="red"
             flat
             dense
@@ -251,7 +262,6 @@ onMounted(() => {
         <q-td v-for="col in props.cols" :key="col.id">
           {{ col.value }}
         </q-td>
-
       </q-tr>
     </template>
     <template v-slot:pagination="scope">

src/modules/01_masterdata/components/competency/03ListLinkGroup.vue

@@ -10,7 +10,7 @@ import Header from "@/components/DialogHeader.vue";
 import type {
   DataOption,
   NewPagination,
-} from "@/modules/01_metadataNew/interface/index/Main";
+} from "@/modules/01_masterdata/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -457,7 +457,6 @@ onMounted(async () => {
             {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
-
       </q-tr>
     </template>
     <template v-slot:pagination="scope">

src/modules/01_masterdata/components/competency/AddPage.vue

@@ -2,12 +2,12 @@
 import { ref, reactive } from "vue";
 import { useRouter } from "vue-router";
 
-import Main from "@/modules/01_metadataNew/components/competency/Forms/Main.vue";
+import Main from "@/modules/01_masterdata/components/competency/Forms/Main.vue";
 
-import { useKPIDataStore } from "@/modules/01_metadataNew/stores/KPIStore";
+import { useKPIDataStore } from "@/modules/01_masterdata/stores/KPIStore";
 
-import type { DataOption } from "@/modules/01_metadataNew/interface/index/Main";
-import type { FormCompetency } from "@/modules/01_metadataNew/interface/request/Main";
+import type { DataOption } from "@/modules/01_masterdata/interface/index/Main";
+import type { FormCompetency } from "@/modules/01_masterdata/interface/request/Main";
 
 const router = useRouter();
 const store = useKPIDataStore();

src/modules/01_masterdata/components/competency/Forms/01_FormMain.vue

@@ -2,7 +2,7 @@
 import { reactive } from "vue";
 
 import { useCounterMixin } from "@/stores/mixin";
-import { useKPIDataStore } from "@/modules/01_metadataNew/stores/KPIStore";
+import { useKPIDataStore } from "@/modules/01_masterdata/stores/KPIStore";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
@@ -49,18 +49,6 @@ function onSubmit() {
       levels: formData.levels,
       evaluation: formData.evaluation,
     };
-    // showLoader()
-    //   http
-    //   .put(config.API.???,body)
-    //   .then((res)=>{
-    //     success($q,'บันทึกสำเร็จ')
-    //     router.push(`/KPI-competency`)
-    //   }).catch((e)=>{
-    //     messageError($q,e)
-    //   }).finally(()=>{
-    //     hideLoader()
-    //   })
-    console.log(body);
   });
 }
 </script>

src/modules/01_masterdata/components/competency/Forms/02_FormGroup.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useKPIDataStore } from "@/modules/01_metadataNew/stores/KPIStore";
+import { useKPIDataStore } from "@/modules/01_masterdata/stores/KPIStore";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
@@ -65,18 +65,6 @@ function onSubmit() {
       levels5: formScore.score5,
       evaluation: formData.evaluation,
     };
-    // showLoader()
-    //   http
-    //   .put(config.API.???,body)
-    //   .then((res)=>{
-    //     success($q,'บันทึกสำเร็จ')
-    //     router.push(`/KPI-competency`)
-    //   }).catch((e)=>{
-    //     messageError($q,e)
-    //   }).finally(()=>{
-    //     hideLoader()
-    //   })
-    console.log(body);
   });
 }
 </script>

src/modules/01_masterdata/components/competency/Forms/03_FormExecutive.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useKPIDataStore } from "@/modules/01_metadataNew/stores/KPIStore";
+import { useKPIDataStore } from "@/modules/01_masterdata/stores/KPIStore";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
@@ -89,18 +89,6 @@ function onSubmit() {
       postype: formData.form,
       evaluation: formData.evaluation,
     };
-    // showLoader()
-    //   http
-    //   .put(config.API.???,body)
-    //   .then((res)=>{
-    //     success($q,'บันทึกสำเร็จ')
-    //     router.push(`/KPI-competency`)
-    //   }).catch((e)=>{
-    //     messageError($q,e)
-    //   }).finally(()=>{
-    //     hideLoader()
-    //   })
-    console.log(body);
   });
 }
 

src/modules/01_masterdata/components/competency/Forms/04_FormExecutivePosition.vue

@@ -3,7 +3,7 @@ import { ref, reactive } from "vue";
 import type { QTableProps } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
-import { useKPIDataStore } from "@/modules/01_metadataNew/stores/KPIStore";
+import { useKPIDataStore } from "@/modules/01_masterdata/stores/KPIStore";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
@@ -46,18 +46,6 @@ function onSubmit() {
       levels3: formData.level3,
       evaluation: formData.evaluation,
     };
-    // showLoader()
-    //   http
-    //   .put(config.API.???,body)
-    //   .then((res)=>{
-    //     success($q,'บันทึกสำเร็จ')
-    //     router.push(`/KPI-competency`)
-    //   }).catch((e)=>{
-    //     messageError($q,e)
-    //   }).finally(()=>{
-    //     hideLoader()
-    //   })
-    console.log(body);
   });
 }
 </script>

src/modules/01_masterdata/components/competency/Forms/05_FormExecutiveLevel.vue

@@ -2,7 +2,7 @@
 import { ref, reactive } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import { useKPIDataStore } from "@/modules/01_metadataNew/stores/KPIStore";
+import { useKPIDataStore } from "@/modules/01_masterdata/stores/KPIStore";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
@@ -42,18 +42,6 @@ function onSubmit() {
       levels2: formData.level2,
       evaluation: formData.evaluation,
     };
-    // showLoader()
-    //   http
-    //   .put(config.API.???,body)
-    //   .then((res)=>{
-    //     success($q,'บันทึกสำเร็จ')
-    //     router.push(`/KPI-competency`)
-    //   }).catch((e)=>{
-    //     messageError($q,e)
-    //   }).finally(()=>{
-    //     hideLoader()
-    //   })
-    console.log(body);
   });
 }
 </script>

src/modules/01_masterdata/components/competency/Forms/Main.vue

@@ -7,7 +7,7 @@ import config from "@/app.config";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
-import { useKPIDataStore } from "@/modules/01_metadataNew/stores/KPIStore";
+import { useKPIDataStore } from "@/modules/01_masterdata/stores/KPIStore";
 
 /**use*/
 const $q = useQuasar();
@@ -81,7 +81,7 @@ function onSubmit() {
       const method = competencyId.value ? "put" : "post";
       await http[method](url, formBody);
       if (!competencyId.value) {
-        router.push(`/KPI-competency`);
+        router.push(`/masterdata/competency`);
       } else {
         fetchDetail();
       }

src/modules/01_masterdata/router.ts

@@ -0,0 +1,149 @@
+const IndicatorByPlan = () =>
+  import("@/modules/01_masterdata/views/indicatorByPlan.vue");
+const IndicatorByPlanDetail = () =>
+  import(
+    "@/modules/01_masterdata/components/Indicators/indicatorByPlan/DetailView.vue"
+  );
+const IndicatorByRole = () =>
+  import("@/modules/01_masterdata/views/indicatorByRole.vue");
+const IndicatorByRoleDetail = () =>
+  import(
+    "@/modules/01_masterdata/components/Indicators/indicatorByRole/DetailView.vue"
+  );
+const competencyPage = () =>
+  import("@/modules/01_masterdata/views/competency.vue");
+const competencyAddPage = () =>
+  import("@/modules/01_masterdata/components/competency/AddPage.vue");
+const StrategicView = () =>
+  import("@/modules/01_masterdata/views/Strategic.vue");
+const AssignmentView = () =>
+  import("@/modules/01_masterdata/views/Assignment.vue");
+const AssignmentDetailView = () =>
+  import(
+    "@/modules/01_masterdata/components/Indicators/Assignment/DetailView.vue"
+  );
+
+export default [
+  {
+    path: "/masterdata/indicator-plan",
+    name: "KPIIndicatorByPlan",
+    component: IndicatorByPlan,
+    meta: {
+      Auth: true,
+      Key: "SYS_EVA_INDICATOR",
+      Role: "STAFF",
+    },
+  },
+
+  {
+    path: "/masterdata/indicator-plan/add",
+    name: "KPIIndicatorByPlan/Add",
+    component: IndicatorByPlanDetail,
+    meta: {
+      Auth: true,
+      Key: "SYS_EVA_INDICATOR",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/masterdata/indicator-plan/:id",
+    name: "KPIIndicatorByPlanByid",
+    component: IndicatorByPlanDetail,
+    meta: {
+      Auth: true,
+      Key: "SYS_EVA_INDICATOR",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/masterdata/indicator-role",
+    name: "KPIIndicatorByRole",
+    component: IndicatorByRole,
+    meta: {
+      Auth: true,
+      Key: "SYS_EVA_INDICATOR",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/masterdata/indicator-role/add",
+    name: "KPIIndicatorByRoleAdd",
+    component: IndicatorByRoleDetail,
+    meta: {
+      Auth: true,
+      Key: "SYS_EVA_INDICATOR",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/masterdata/indicator-role/:id",
+    name: "KPIIndicatorByRoleByid",
+    component: IndicatorByRoleDetail,
+    meta: {
+      Auth: true,
+      Key: "SYS_EVA_INDICATOR",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/masterdata/competency",
+    name: "KPICompetency",
+    component: competencyPage,
+    meta: {
+      Auth: true,
+      Key: "SYS_EVA_COMPETENCY",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/masterdata/competency/add",
+    name: "KPICompetencyAdd",
+    component: competencyAddPage,
+    meta: {
+      Auth: true,
+      Key: "SYS_EVA_COMPETENCY",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/masterdata/competency/:id",
+    name: "KPICompetencyByid",
+    component: competencyAddPage,
+    meta: {
+      Auth: true,
+      Key: "SYS_EVA_COMPETENCY",
+      Role: "STAFF",
+    },
+  },
+
+  {
+    path: "/masterdata/strategic",
+    name: "strategic",
+    component: StrategicView,
+    meta: {
+      Auth: true,
+      Key: "SYS_EVA_STRATIGIC",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/masterdata/indicator-assignment",
+    name: "KPIAssignment",
+    component: AssignmentView,
+    meta: {
+      Auth: true,
+      Key: "SYS_EVA_INDICATOR",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/masterdata/indicator-assignment/:id",
+    name: "KPIAssignmentById",
+    component: AssignmentDetailView,
+    meta: {
+      Auth: true,
+      Key: "SYS_EVA_INDICATOR",
+      Role: "STAFF",
+    },
+  },
+];

src/modules/01_masterdata/stores/positionEmployeeStore.ts

@@ -5,10 +5,10 @@ import type {
   DataResponse,
   DataRow,
 } from "../interface/response/position/ListType";
-import type { ResGroup } from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
+import type { ResGroup } from "@/modules/01_masterdata/interface/response/positionEmployee/Main";
 
 import { useCounterMixin } from "@/stores/mixin";
-import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
+import { useMainOptionDataStore } from "@/modules/01_masterdata/stores/main";
 const storeOption = useMainOptionDataStore();
 
 const { date2Thai } = useCounterMixin();

src/modules/01_masterdata/stores/positionListStore.ts

@@ -4,7 +4,7 @@ import type {
   DataResponse,
   DataRow,
 } from "../interface/response/position/ListType";
-import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
+import { useMainOptionDataStore } from "@/modules/01_masterdata/stores/main";
 import { useCounterMixin } from "@/stores/mixin";
 const storeOption = useMainOptionDataStore();
 

src/modules/01_masterdata/views/Assignment.vue

@@ -10,9 +10,9 @@ import type {
   DataOption,
   NewPagination,
   DataAssignment,
-} from "@/modules/01_metadataNew/interface/index/Main";
-import type { FormFilterAssignment } from "@/modules/01_metadataNew/interface/request/Main";
-import type { ResAssignment } from "@/modules/01_metadataNew/interface/response/Main";
+} from "@/modules/01_masterdata/interface/index/Main";
+import type { FormFilterAssignment } from "@/modules/01_masterdata/interface/request/Main";
+import type { ResAssignment } from "@/modules/01_masterdata/interface/response/Main";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -82,7 +82,7 @@ function fetchList() {
 }
 
 function onClickView(id: string = "") {
-  router.push(`/assignment/${id}`);
+  router.push(`/masterdata/indicator-assignment/${id}`);
 }
 
 function onClickDelete(id: string) {
@@ -291,7 +291,6 @@ onMounted(() => {
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
-
           </q-tr>
         </template>
         <template v-slot:pagination="scope">

src/modules/01_masterdata/views/Strategic.vue

@@ -4,8 +4,8 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { ItemsMenu } from "@/modules/01_metadataNew/interface/index/Main";
-import type { DataStrategic } from "@/modules/01_metadataNew/interface/response/Strategic";
+import type { ItemsMenu } from "@/modules/01_masterdata/interface/index/Main";
+import type { DataStrategic } from "@/modules/01_masterdata/interface/response/Strategic";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 

src/modules/01_masterdata/views/calendar.vue

@@ -4,9 +4,9 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { DataSumCalendarObject } from "@/modules/01_metadataNew/interface/index/Calendar";
+import type { DataSumCalendarObject } from "@/modules/01_masterdata/interface/index/Calendar";
 
-import calendarComponent from "@/modules/01_metadataNew/components/calendar/calendarMain.vue";
+import calendarComponent from "@/modules/01_masterdata/components/calendar/calendarMain.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 

src/modules/01_masterdata/views/competency.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 
-import ListCompetency from "@/modules/01_metadataNew/components/competency/01ListCompetency.vue";
-import ListLinkPosition from "@/modules/01_metadataNew/components/competency/02ListLinkPosition.vue";
-import ListLinkGroup from "@/modules/01_metadataNew/components/competency/03ListLinkGroup.vue";
-import ListCriteria from "@/modules/01_metadataNew/components/competency/04ListCriteria.vue";
-import ListDetail from "@/modules/01_metadataNew/components/competency/05ListDetail.vue";
+import ListCompetency from "@/modules/01_masterdata/components/competency/01ListCompetency.vue";
+import ListLinkPosition from "@/modules/01_masterdata/components/competency/02ListLinkPosition.vue";
+import ListLinkGroup from "@/modules/01_masterdata/components/competency/03ListLinkGroup.vue";
+import ListCriteria from "@/modules/01_masterdata/components/competency/04ListCriteria.vue";
+import ListDetail from "@/modules/01_masterdata/components/competency/05ListDetail.vue";
 
 const currentTab = ref<string>("list_competency");
 const tabs = ref<Array<any>>([]);
@@ -24,7 +24,6 @@ onMounted(() => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">สมรรถนะ</div>
-
   <q-card flat bordered>
     <div class="text-subtitle1 text-grey-9">
       <q-tabs

src/modules/01_masterdata/views/indicatorByPlan.vue

@@ -6,8 +6,8 @@ import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { DataOption } from "@/modules/01_metadataNew/interface/index/Main";
-import DialogHistory from "@/modules/01_metadataNew/components/Indicators/DialogHistory.vue";
+import type { DataOption } from "@/modules/01_masterdata/interface/index/Main";
+import DialogHistory from "@/modules/01_masterdata/components/Indicators/DialogHistory.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -96,8 +96,8 @@ function fetchList() {
 
 function onClickAddOrView(status: boolean = false, id: string = "") {
   status
-    ? router.push(`/KPI-indicator-plan/${id}`)
-    : router.push("/KPI-indicator-plan/add");
+    ? router.push(`/masterdata/indicator-plan/${id}`)
+    : router.push("/masterdata/indicator-plan/add");
 }
 
 function fetchActive() {
@@ -481,7 +481,6 @@ onMounted(() => {
                     {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
-
               </q-tr>
             </template>
           </d-table>

src/modules/01_masterdata/views/indicatorByRole.vue

@@ -5,13 +5,13 @@ import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { FormListMainByRole } from "@/modules/01_metadataNew/interface/request/Main";
+import type { FormListMainByRole } from "@/modules/01_masterdata/interface/request/Main";
 import type {
   DataOption,
   NewPagination,
-} from "@/modules/01_metadataNew/interface/index/Main";
+} from "@/modules/01_masterdata/interface/index/Main";
 
-import DialogHistory from "@/modules/01_metadataNew/components/Indicators/DialogHistory.vue";
+import DialogHistory from "@/modules/01_masterdata/components/Indicators/DialogHistory.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -103,8 +103,8 @@ function fetchList() {
 
 function onClickAddOrView(status: boolean = false, id: string = "") {
   status
-    ? router.push(`/KPI-indicator-role/${id}`)
-    : router.push("/KPI-indicator-role/add");
+    ? router.push(`/masterdata/indicator-role/${id}`)
+    : router.push("/masterdata/indicator-role/add");
 }
 
 function onClickDelete(id: number) {
@@ -494,7 +494,6 @@ onMounted(async () => {
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
-
           </q-tr>
         </template>
       </d-table>

src/modules/01_masterdata/views/insignia.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import InsigniaType from "@/modules/01_metadataNew/components/insignia/InsigniaType.vue";
+import InsigniaType from "@/modules/01_masterdata/components/insignia/InsigniaType.vue";
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">

src/modules/01_masterdata/views/personal.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { usePersonalDataStore } from '@/modules/01_metadataNew/stores/personalStore'
-import ListPrefix from "@/modules/01_metadataNew/components/personal/01ListPrefix.vue";
-import ListRank from "@/modules/01_metadataNew/components/personal/02ListRank.vue";
-import ListBloodGroup from "@/modules/01_metadataNew/components/personal/03ListBloodGroup.vue";
-import ListGender from "@/modules/01_metadataNew/components/personal/04ListGender.vue";
-import ListReligion from "@/modules/01_metadataNew/components/personal/05ListReligion.vue";
-import ListRelationship from "@/modules/01_metadataNew/components/personal/06ListRelationship.vue";
-import ListEducation from "@/modules/01_metadataNew/components/personal/07ListEducationLevel.vue";
-import ListProvince from "@/modules/01_metadataNew/components/personal/08ListProvince.vue";
+import { usePersonalDataStore } from "@/modules/01_masterdata/stores/personalStore";
+import ListPrefix from "@/modules/01_masterdata/components/personal/01ListPrefix.vue";
+import ListRank from "@/modules/01_masterdata/components/personal/02ListRank.vue";
+import ListBloodGroup from "@/modules/01_masterdata/components/personal/03ListBloodGroup.vue";
+import ListGender from "@/modules/01_masterdata/components/personal/04ListGender.vue";
+import ListReligion from "@/modules/01_masterdata/components/personal/05ListReligion.vue";
+import ListRelationship from "@/modules/01_masterdata/components/personal/06ListRelationship.vue";
+import ListEducation from "@/modules/01_masterdata/components/personal/07ListEducationLevel.vue";
+import ListProvince from "@/modules/01_masterdata/components/personal/08ListProvince.vue";
 
-const store = usePersonalDataStore()
+const store = usePersonalDataStore();
 const tabs = ref<Array<any>>([]);
 
 onMounted(() => {

src/modules/01_masterdata/views/position.vue

@@ -1,9 +1,9 @@
 div
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import ListPosition from "@/modules/01_metadataNew/components/position/01ListPosition.vue";
-import ListType from "@/modules/01_metadataNew/components/position/02ListType.vue";
-import ListExecutive from "@/modules/01_metadataNew/components/position/04ListExecutive.vue";
+import ListPosition from "@/modules/01_masterdata/components/position/01ListPosition.vue";
+import ListType from "@/modules/01_masterdata/components/position/02ListType.vue";
+import ListExecutive from "@/modules/01_masterdata/components/position/04ListExecutive.vue";
 import { usePositionDataStore } from "../stores/positionListStore";
 // const store.pathLocation = ref<string>("list_position");
 const tabs = ref<Array<any>>([]);

src/modules/01_masterdata/views/positionEmployee.vue

@@ -1,8 +1,8 @@
 div
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import ListPosition from "@/modules/01_metadataNew/components/position-employee/01ListPosition.vue";
-import ListType from "@/modules/01_metadataNew/components/position-employee/02ListType.vue";
+import ListPosition from "@/modules/01_masterdata/components/position-employee/01ListPosition.vue";
+import ListType from "@/modules/01_masterdata/components/position-employee/02ListType.vue";
 import { usePositionEmployeeDataStore } from "../stores/positionEmployeeStore";
 // const store.pathLocation = ref<string>("list_position");
 const tabs = ref<Array<any>>([]);

src/modules/01_metadataNew/components/calendar/Calendar.vue

@@ -1,856 +0,0 @@
-<!-- tab ปฏิทิน หน้าปฏิทินวันหยุด -->
-<template>
-  <div class="q-mt-md">
-    <div class="row q-gutter-sm q-pb-sm main-content">
-      <div class="demo-app-main">
-        <!-- แสดงปฏิทิน -->
-        <FullCalendar
-          ref="fullCalendar"
-          class="demo-app-calendar"
-          :options="calendarOptions"
-        >
-          <template v-slot:eventContent="arg">
-            <b>{{ arg.timeText }}</b>
-            <i>{{ arg.event.title }}</i>
-            <q-tooltip style="font-size: 15px">{{ arg.event.title }}</q-tooltip>
-          </template>
-        </FullCalendar>
-      </div>
-    </div>
-    <div class="row q-col-gutter-md">
-      <div class="items-center row">
-        <q-icon color="blue" name="mdi-circle" class="q-mr-sm" />
-        วันทำงาน 5 วัน
-      </div>
-      <div class="items-center row">
-        <q-icon color="orange" name="mdi-circle" class="q-mr-sm" />
-        วันทำงาน 6 วัน
-      </div>
-    </div>
-  </div>
-
-  <!-- modal เพิ่มวันหยุด -->
-  <q-dialog v-model="modalAdd" persistent>
-    <q-card style="min-width: 550px">
-      <q-form ref="formDate" @submit.prevent.stop="onSubmit">
-        <q-card-section class="row items-center q-pa-sm">
-          <div class="text-bold" v-if="showEdit">แก้ไขวันหยุด</div>
-          <div class="text-bold" v-else>เพิ่มวันหยุด</div>
-          <q-space />
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            v-close-popup
-            style="color: #ff8080; background-color: #ffdede"
-          />
-        </q-card-section>
-        <q-separator />
-        <q-card-section class="q-p-md row q-gutter-y-md">
-          <div class="row col-12">
-            <div class="col-12" v-if="!showEdit">
-              {{ dateThaiRange(dateRange) }}
-            </div>
-            <datepicker
-              v-else
-              :readonly="!edit"
-              v-model="dateRange"
-              :locale="'th'"
-              autoApply
-              range
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  :class="getClass(edit)"
-                  hide-bottom-space
-                  :outlined="edit"
-                  dense
-                  label="วันที่"
-                 
-                  :borderless="!edit"
-                  :model-value="dateThaiRange(dateRange)"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            label="คำอธิบาย"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="name"
-            autogrow
-            :rules="[(val) => (val && val.length > 0) || '']"
-          />
-          <q-option-group
-            v-if="showEdit == false"
-            v-model="category"
-            :options="categoryOptions"
-            color="primary"
-            inline
-          />
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right" class="text-primary">
-          <q-btn
-            v-if="showEdit && edit"
-            flat
-            color="red"
-            @click="cancelClick()"
-            label="ยกเลิกแก้ไข"
-          >
-            <!-- icon="mdi-undo"
-            <q-tooltip>ยกเลิก</q-tooltip> -->
-          </q-btn>
-          <q-btn
-            v-if="showEdit && edit"
-            unelevated
-            color="red"
-            @click="deleteClick()"
-            label="ลบวันหยุด"
-          >
-            <!-- icon="mdi-delete"
-            <q-tooltip>ลบ</q-tooltip> -->
-          </q-btn>
-          <q-btn
-            v-if="edit"
-            unelevated
-            color="public"
-            label="บันทึก"
-            type="submit"
-          >
-            <!-- icon="mdi-content-save-outline"
-            <q-tooltip>บันทึก</q-tooltip> -->
-          </q-btn>
-          <q-btn
-            v-if="!edit"
-            outline
-            color="primary"
-            @click="editClick"
-            label="แก้ไขข้อมูล"
-          >
-            <!-- icon="mdi-pencil-outline"
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-
-  <!-- modal ลบวันหยุด -->
-  <q-dialog v-model="modalDelete" persistent>
-    <q-card style="min-width: 550px">
-      <q-card-section class="row items-center q-pb-xs">
-        <div class="text-bold">ต้องการลบข้อมูลนี้หรือไม่?</div>
-        <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          v-close-popup
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-card-section>
-      <q-separator />
-      <q-card-section class="row items-center">
-        <div class="q-pr-md">
-          <q-avatar
-            icon="mdi-trash-can-outline"
-            font-size="25px"
-            size="lg"
-            color="red-1"
-            text-color="red"
-          />
-        </div>
-        <div class="col text-dark">
-          <span>ข้อมูลที่กำลังถูกลบนี้จะมีผลใช้งานทันที</span>
-        </div>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="ยกเลิก" flat color="grey-8" @click="cancelClick" />
-        <q-btn label="ตกลง" color="primary" @click="deleteData" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
-import { useQuasar } from "quasar";
-import FullCalendar from "@fullcalendar/vue3";
-import dayGridPlugin from "@fullcalendar/daygrid";
-import timeGridPlugin from "@fullcalendar/timegrid";
-import interactionPlugin from "@fullcalendar/interaction";
-import allLocales from "@fullcalendar/core/locales-all";
-import listPlugin from "@fullcalendar/list";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type {
-  RequestItemsObject,
-  DataDateRowObject,
-  DataDateAddObject,
-} from "@/modules/01_metadataNew/interface/index/Calendar";
-
-import { useCounterMixin } from "@/stores/mixin";
-
-const props = defineProps({
-  dateYear: {
-    //filter ปี วันหยุด
-    type: Number,
-    default: () => new Date().getFullYear(),
-  },
-  dateMonth: {
-    //filter เดือน วันหยุด
-    type: Number,
-    default: () => new Date().getMonth(),
-  },
-  refreshData: {
-    //หน้า main มีการอัพเดทค่าให้ refresh data
-    type: Boolean,
-    required: true,
-  },
-  fetchDataSummaryCalendar: {
-    //ฟังก์ชันอัพเดทสรุปวันหยุด
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { success, dateToISO, date2Thai, messageError, showLoader, hideLoader } =
-  mixin;
-const $q = useQuasar(); //ใช้ noti quasar
-const modalAdd = ref<boolean>(false); //modal เพิ่มวันหยุด
-const modalDelete = ref<boolean>(false); //modal ลบวันหยุด
-const edit = ref<boolean>(false); //modal เลือกวันหยุดกับวันลบวันหยุด
-const showEdit = ref<boolean>(false); //กด event แก้ไขหรือเพิ่ม
-const name = ref<string>(""); //ชื่อวันหยุด
-const type = ref<string>(""); //ประเภทวันหยุด
-const isSpecial = ref<boolean>(true); //เช็ควันหยุด
-const id = ref<string>(""); //id ที่แก้ไขวันหยุด
-const fullCalendar = ref<any>(); //ref calendar
-const dateRange = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ที่เพิ่มเป็นวันหยุด
-const formDate = ref<any>(); //ref เพิ่ม แก้ไข วันหยุดสำหรับ validate
-
-const category = ref<string>("all");
-const categoryOptions = ref<any>([
-  {
-    label: "ทั้งหมด",
-    value: "all",
-  },
-  {
-    label: "ทำงาน 5 วัน",
-    value: "normal",
-  },
-  {
-    label: "ทำงาน 6 วัน",
-    value: "6days",
-  },
-]);
-const dataHistory = ref<RequestItemsObject[]>([]);
-const dataNormalRaw = ref<RequestItemsObject[]>([]);
-const dataSixDaysRaw = ref<RequestItemsObject[]>([]);
-
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(async () => {
-  hideLoader();
-  const calen = fullCalendar.value.getApi();
-  const date = new Date(props.dateYear, props.dateMonth);
-  calen.gotoDate(date);
-  await fetchData();
-});
-
-/**
- * ค่า props(วันเดือนปีที่เลือก) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
- */
-watch(props, async (count, prevCount) => {
-  const calen = fullCalendar.value.getApi();
-  const date = new Date(props.dateYear, props.dateMonth);
-  calen.gotoDate(date);
-  await fetchData();
-});
-
-/**
- * เลือกค่าปฏิทินในช่องว่าง
- * @param selectInfo ค่าที่เลือกในฏิทิน
- */
-const handleDateSelect = async (selectInfo: any) => {
-  edit.value = true;
-  category.value = "all";
-  selectInfo.start;
-  const checkNormalDate = dataNormalRaw.value.filter(
-    (r: RequestItemsObject) =>
-      dateToISO(new Date(r.holidayDate)) == dateToISO(selectInfo.start)
-  );
-  const checkSixDaysDate = dataSixDaysRaw.value.filter(
-    (r: RequestItemsObject) =>
-      dateToISO(new Date(r.holidayDate)) == dateToISO(selectInfo.start)
-  );
-  if (checkNormalDate.length == 0 || checkSixDaysDate.length == 0) {
-    name.value = "";
-    isSpecial.value = true;
-    dateRange.value = [
-      selectInfo.startStr,
-      new Date(
-        new Date(selectInfo.endStr).setDate(
-          new Date(selectInfo.endStr).getDate() - 1
-        )
-      ),
-    ];
-    showEdit.value = false;
-    modalAdd.value = true;
-  }
-};
-
-/**
- * เลือกค่า event ในปฏิทิน
- * @param selectInfo ค่าที่เลือกในฏิทิน
- */
-const handleEventClick = async (selectInfo: any) => {
-  modalAdd.value = true;
-  edit.value = false;
-  showEdit.value = true;
-  name.value = selectInfo.event.title;
-  type.value = selectInfo.event.id;
-  isSpecial.value = true;
-  id.value = selectInfo.event.groupId;
-  dataHistory.value = selectInfo.event.extendedProps.dataRangeRow;
-  dateRange.value = [
-    selectInfo.event.startStr,
-    selectInfo.event.endStr == ""
-      ? selectInfo.event.startStr
-      : dateToISO(
-          new Date(
-            new Date(selectInfo.event.endStr).setDate(
-              new Date(selectInfo.event.endStr).getDate() - 1
-            )
-          )
-        ),
-  ];
-};
-
-/**
- * กดปุ่มแก้ไขให้แสดง modal แก้ไข
- */
-const editClick = async () => {
-  showEdit.value = true;
-  edit.value = true;
-};
-
-/**
- * กดปุ่มลบให้แสดง modal ลบ
- */
-const deleteClick = async () => {
-  modalDelete.value = true;
-};
-
-/**
- * ปุ่มยกเลิกให้ย้อนกลับไป modal เลือกแก้ไขหรือลบ
- */
-const cancelClick = async () => {
-  modalDelete.value = false;
-  modalAdd.value = true;
-  edit.value = false;
-};
-
-/**
- * option calendar
- */
-const calendarOptions = ref<any>({
-  plugins: [
-    dayGridPlugin,
-    timeGridPlugin,
-    interactionPlugin, // needed for dateClick
-    listPlugin,
-  ],
-  headerToolbar: null,
-  selectable: true,
-  select: handleDateSelect,
-  eventClick: handleEventClick,
-  locale: "th",
-  locales: allLocales,
-  height: "100%",
-  eventColor: "#e4f3ff",
-  eventTextColor: "#50a5fc",
-  eventBorderColor: "#50a5fc",
-  events: <any>[],
-  firstDay: 0,
-});
-
-/**
- * ปุ่มบันทึกข้อมูลวันหยุด
- */
-const onSubmit = async () => {
-  if (showEdit.value === true) {
-    await editData();
-  } else {
-    await addDate();
-  }
-};
-
-/**
- * fetch วันหยุดในปฏิทิน
- */
-const fetchData = async () => {
-  calendarOptions.value.events = [];
-  showLoader();
-  await http
-    .get(
-      config.API.listHolidayHistoryYearMonth(
-        props.dateYear,
-        props.dateMonth + 1
-      )
-    )
-    .then((res) => {
-      const dataNormal = res.data.result.normal;
-      const dataSixDays = res.data.result.sixDays;
-      const dateStart = ref<Date | null>();
-      const firstEvent = ref<boolean>(true);
-      const dateRow = ref<DataDateRowObject[]>([]);
-      dataNormalRaw.value = res.data.result.normal;
-      dataSixDaysRaw.value = res.data.result.sixDays;
-      dataNormal.map((e: RequestItemsObject, index: number) => {
-        dateRow.value.push({
-          holidayDate: new Date(e.holidayDate),
-          name: e.name,
-          isSpecial: true,
-          id: e.id,
-        });
-        if (
-          index == dataNormal.length - 1 ||
-          dataNormal[index + 1].name != e.name ||
-          (dataNormal[index + 1].name == e.name &&
-            dateToISO(new Date(dataNormal[index + 1].holidayDate)) !=
-              dateToISO(
-                new Date(
-                  new Date(e.holidayDate).setDate(
-                    new Date(e.holidayDate).getDate() + 1
-                  )
-                )
-              ))
-        ) {
-          firstEvent.value = true;
-          calendarOptions.value.events.push({
-            id: "normal",
-            groupId: e.id,
-            title:
-              dateToISO(new Date(e.holidayDate)) ==
-              dateToISO(new Date(e.originalDate))
-                ? e.name
-                : `ชดเชย ${e.name}`,
-            start: dateStart.value ? dateStart.value : new Date(e.holidayDate),
-            end: new Date(
-              new Date(e.holidayDate).setDate(
-                new Date(e.holidayDate).getDate() + 1
-              )
-            ),
-            isSpecial: true,
-            allDay: true,
-            dataRangeRow: dateRow.value,
-            backgroundColor: "#CCE5FF",
-            textColor: "#0080FF",
-          });
-          dateStart.value = null;
-          dateRow.value = [];
-        } else if (firstEvent.value == true) {
-          firstEvent.value = false;
-          dateStart.value = new Date(e.holidayDate);
-        }
-      });
-      dataSixDays.map((e: RequestItemsObject, index: number) => {
-        dateRow.value.push({
-          holidayDate: new Date(e.holidayDate),
-          name: e.name,
-          isSpecial: true,
-          id: e.id,
-        });
-        if (
-          index == dataSixDays.length - 1 ||
-          dataSixDays[index + 1].name != e.name ||
-          (dataSixDays[index + 1].name == e.name &&
-            dateToISO(new Date(dataSixDays[index + 1].holidayDate)) !=
-              dateToISO(
-                new Date(
-                  new Date(e.holidayDate).setDate(
-                    new Date(e.holidayDate).getDate() + 1
-                  )
-                )
-              ))
-        ) {
-          firstEvent.value = true;
-          calendarOptions.value.events.push({
-            id: "sixdays",
-            groupId: e.id,
-            title:
-              dateToISO(new Date(e.holidayDate)) ==
-              dateToISO(new Date(e.originalDate))
-                ? e.name
-                : `ชดเชย ${e.name}`,
-            start: dateStart.value ? dateStart.value : new Date(e.holidayDate),
-            end: new Date(
-              new Date(e.holidayDate).setDate(
-                new Date(e.holidayDate).getDate() + 1
-              )
-            ),
-            isSpecial: true,
-            allDay: true,
-            dataRangeRow: dateRow.value,
-            backgroundColor: "#FFE5CC",
-            textColor: "#FF8000",
-          });
-          dateStart.value = null;
-          dateRow.value = [];
-        } else if (firstEvent.value == true) {
-          firstEvent.value = false;
-          dateStart.value = new Date(e.holidayDate);
-        }
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await props.fetchDataSummaryCalendar();
-    });
-};
-
-/**
- * บันทึกแก้ไขวันหยุด
- */
-const editData = async () => {
-  await formDate.value.validate().then(async (result: boolean) => {
-    if (result) {
-      const dataEdit = ref<DataDateAddObject[]>([]);
-      let i = 0;
-      const dateStart = ref<Date>(dateRange.value[0]);
-      do {
-        i = i + 1;
-        dataEdit.value.push({
-          year: new Date(dateStart.value).getFullYear(),
-          holidayDate: dateToISO(new Date(dateStart.value)),
-          name: name.value,
-          isSpecial: true,
-        });
-        dateStart.value = new Date(
-          new Date(dateStart.value).setDate(
-            new Date(dateStart.value).getDate() + 1
-          )
-        );
-      } while (new Date(dateStart.value) <= new Date(dateRange.value[1]));
-
-      const _dataHistory = ref<RequestItemsObject[]>([]);
-      dataHistory.value.map((e: RequestItemsObject, index: number) => {
-        _dataHistory.value.push({
-          ...e,
-          holidayDate: dateToISO(new Date(e.holidayDate)),
-        });
-      });
-
-      showLoader();
-      await http
-        .post(config.API.listHolidayHistoryEdit(type.value), {
-          history: _dataHistory.value,
-          updated: dataEdit.value,
-        })
-        .then((res) => {
-          modalAdd.value = false;
-          success($q, "แก้ไขข้อมูลสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await fetchData();
-        });
-    }
-  });
-};
-
-/**
- * บันทึกเพิ่มวันหยุด
- */
-const addDate = async () => {
-  await formDate.value.validate().then(async (result: boolean) => {
-    if (result) {
-      const dataAdd = ref<DataDateAddObject[]>([]);
-      let i = 0;
-      const dateStart = ref<Date>(dateRange.value[0]);
-      do {
-        i = i + 1;
-        dataAdd.value.push({
-          year: new Date(dateStart.value).getFullYear(),
-          holidayDate: dateToISO(new Date(dateStart.value)),
-          name: name.value,
-          isSpecial: true,
-        });
-        dateStart.value = new Date(
-          new Date(dateStart.value).setDate(
-            new Date(dateStart.value).getDate() + 1
-          )
-        );
-      } while (new Date(dateStart.value) <= new Date(dateRange.value[1]));
-      showLoader();
-      await http
-        .post(config.API.listHolidayHistoryAdd(category.value), dataAdd.value)
-        .then((res) => {
-          modalAdd.value = false;
-          success($q, "เพิ่มข้อมูลสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await fetchData();
-        });
-    }
-  });
-};
-
-/**
- * ลบข้อมูลวันหยุด
- */
-const deleteData = async () => {
-  modalDelete.value = false;
-  const dataDelete = ref<DataDateAddObject[]>([]);
-  let i = 0;
-  const dateStart = ref<Date>(dateRange.value[0]);
-  do {
-    i = i + 1;
-    dataDelete.value.push({
-      year: new Date(dateStart.value).getFullYear(),
-      holidayDate: dateToISO(new Date(dateStart.value)),
-      name: name.value,
-      isSpecial: true,
-    });
-    dateStart.value = new Date(
-      new Date(dateStart.value).setDate(new Date(dateStart.value).getDate() + 1)
-    );
-  } while (new Date(dateStart.value) <= new Date(dateRange.value[1]));
-  showLoader();
-  await http
-    .post(config.API.listHolidayHistoryDelete(type.value), dataDelete.value)
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      modalAdd.value = false;
-      await fetchData();
-    });
-};
-
-/**
- * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
- * @param val ช่วงวันที่
- */
-const dateThaiRange = (val: [Date, Date]) => {
-  if (val === null) {
-  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
-    return `${date2Thai(val[0])}`;
-  } else {
-    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
-  }
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
-
-<style scope lang="scss">
-.main-content {
-  height: 70vh;
-}
-
-.color-main {
-  color: #18a259;
-}
-
-.padding-content {
-  padding: 10px;
-}
-
-.demo-app-main {
-  flex-grow: 1;
-  /* padding: 3em; */
-}
-
-.fc {
-  /* the calendar root */
-  max-width: 1100px;
-  margin: 0 auto;
-  background-color: white;
-  border-radius: 10px;
-}
-
-.fc-day-today {
-  background-color: rgb(255, 255, 255) !important;
-}
-
-// .fc-day-sun {
-//   background-color: rgba(207, 205, 205, 0.177) !important;
-//   width: 80px;
-// }
-
-// .fc-day-sat {
-//   background-color: rgba(207, 205, 205, 0.177) !important;
-//   width: 80px;
-// }
-
-.fc-day-today .fc-daygrid-day-number {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  /* border: 2px solid #17a259; */
-  border-radius: 50%;
-  height: 25px;
-  width: 25px;
-  font-weight: bold;
-  color: white !important;
-  background: #17a259;
-}
-
-.fc-day-today .fc-daygrid-day-frame {
-  padding: 5%;
-}
-
-.fc .fc-button-group > .fc-button {
-  color: black;
-  background-color: #fafafa;
-  border: none;
-}
-
-.fc .fc-button-group > .fc-button:active {
-  color: white;
-  background-color: #22a15e;
-  border: none;
-}
-
-.fc .fc-button-group > .fc-button.fc-button-active {
-  color: white;
-  background-color: #22a15e;
-  border: none;
-}
-
-.fc-header-toolbar {
-  background-color: white;
-  padding: 0px 10px 0px 10px;
-  border-radius: 10px 10px 0px 0px;
-}
-
-.fc .fc-scrollgrid-liquid > thead {
-  background-color: #f8f8f8;
-}
-
-.dp-custom-cell {
-  border-radius: 50%;
-}
-
-.dp__today {
-  border: 1px solid var(--q-primary);
-}
-
-.dp__range_end,
-.dp__range_start,
-.dp__active_date {
-  background: var(--q-primary);
-  color: var(--dp-primary-text-color);
-}
-
-.datepicker .q-field__label {
-  padding-left: 5px;
-}
-
-.datepicker .q-field__messages {
-  padding-left: 20px;
-}
-
-.datepicker .q-field__native {
-  padding-left: 5px;
-  color: var(--q-primary) !important;
-}
-
-.datepicker .q-field__prepend {
-  padding-left: 6px;
-}
-
-.datepicker .q-field__append {
-  padding-right: 6px;
-}
-
-.datepicker .q-field__after {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  font-weight: 500;
-}
-
-.fc .fc-popover {
-  z-index: 6000;
-}
-
-.fc-direction-ltr .fc-daygrid-event.fc-event-end,
-.fc-direction-rtl .fc-daygrid-event.fc-event-start {
-  cursor: pointer;
-}
-
-.subName {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  font-weight: 500;
-}
-
-.subInput {
-  display: flex;
-  align-items: center;
-}
-
-.fc-event {
-  overflow: hidden;
-  border-color: transparent !important;
-  font-weight: 500;
-}
-
-.fc-event-main {
-  text-align: center;
-}
-
-.fc-direction-ltr .fc-daygrid-event.fc-event-end,
-.fc-direction-rtl .fc-daygrid-event.fc-event-start {
-  padding-left: 0px;
-}
-</style>

src/modules/01_metadataNew/components/calendar/CalendarList.vue

@@ -1,651 +0,0 @@
-<!-- tab รายการ หน้าปฏิทินวันหยุด -->
-<template>
-  <q-card class="q-mt-md" flat bordered>
-    <!-- list รายการันหยุด -->
-    <q-tabs
-      dense
-      v-model="currentTab"
-      indicator-color="primary"
-      active-color="primary bg-teal-1"
-      class="text-body2 text-grey-7"
-    >
-      <q-tab
-        v-for="tab in tabs"
-        :key="tab.value"
-        v-on:click="changeTab(tab.value)"
-        :label="tab.label"
-        :name="tab.value"
-        class="q-py-xs col-6 row"
-      />
-    </q-tabs>
-    <q-separator />
-
-    <q-tab-panels v-model="currentTab" animated>
-      <q-tab-panel name="normal">
-        <q-table
-          ref="table"
-          flat
-          bordered
-          class="custom-header-table"
-          virtual-scroll
-          :rows="calendarData"
-          :columns="columns"
-          dense
-          :rows-per-page-options="[0]"
-          hide-header
-        >
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                <div v-if="col.name == 'week'" class="">
-                  {{ dayThaiRange(props.row.dateRange) }}
-                </div>
-                <div v-else-if="col.name == 'holidayDate'" class="">
-                  {{ dateThaiRange(props.row.dateRange) }}
-                </div>
-                <div v-else class="my-table-details">
-                  {{ col.value }}
-                </div>
-              </q-td>
-              <q-td auto-width>
-                <q-btn
-                  flat
-                  round
-                  color="grey"
-                  @click.stop
-                  size="10px"
-                  icon="more_vert"
-                >
-                  <q-menu>
-                    <q-list>
-                      <q-item
-                        clickable
-                        v-close-popup
-                        @click="editCalendar(props.row)"
-                      >
-                        <q-item-section>
-                          <q-item-label>แก้ไขวันหยุด</q-item-label>
-                        </q-item-section>
-                      </q-item>
-                      <q-item
-                        clickable
-                        v-close-popup
-                        @click="deleteClick(props.row)"
-                      >
-                        <q-item-section>
-                          <q-item-label>ลบวันหยุด</q-item-label>
-                        </q-item-section>
-                      </q-item>
-                    </q-list>
-                  </q-menu>
-                </q-btn>
-              </q-td>
-            </q-tr>
-          </template>
-        </q-table>
-      </q-tab-panel>
-
-      <q-tab-panel name="6day">
-        <q-table
-          ref="table"
-          flat
-          bordered
-          class="custom-header-table"
-          virtual-scroll
-          :rows="calendarData"
-          :columns="columns"
-          dense
-          :rows-per-page-options="[0]"
-          hide-header
-        >
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                <div v-if="col.name == 'week'" class="">
-                  {{ dayThaiRange(props.row.dateRange) }}
-                </div>
-                <div v-else-if="col.name == 'holidayDate'" class="">
-                  {{ dateThaiRange(props.row.dateRange) }}
-                </div>
-                <div v-else class="my-table-details">
-                  {{ col.value }}
-                </div>
-              </q-td>
-              <q-td auto-width>
-                <q-btn
-                  flat
-                  round
-                  color="grey"
-                  @click.stop
-                  size="10px"
-                  icon="more_vert"
-                >
-                  <q-menu>
-                    <q-list>
-                      <q-item
-                        clickable
-                        v-close-popup
-                        @click="editCalendar(props.row)"
-                      >
-                        <q-item-section>
-                          <q-item-label>แก้ไขวันหยุด</q-item-label>
-                        </q-item-section>
-                      </q-item>
-                      <q-item
-                        clickable
-                        v-close-popup
-                        @click="deleteClick(props.row)"
-                      >
-                        <q-item-section>
-                          <q-item-label>ลบวันหยุด</q-item-label>
-                        </q-item-section>
-                      </q-item>
-                    </q-list>
-                  </q-menu>
-                </q-btn>
-              </q-td>
-            </q-tr>
-          </template>
-        </q-table>
-      </q-tab-panel>
-    </q-tab-panels>
-  </q-card>
-
-  <!-- modal เพิ่มวันหยุด -->
-  <q-dialog v-model="modalAdd" persistent>
-    <q-card style="min-width: 550px">
-      <q-form ref="formDate" @submit.prevent.stop="editData">
-        <q-card-section class="row items-center q-pb-xs">
-          <div class="text-bold">แก้ไขวันหยุด</div>
-          <q-space />
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            v-close-popup
-            style="color: #ff8080; background-color: #ffdede"
-          />
-        </q-card-section>
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-2 subName">
-              <label>เลือกวันที่</label>
-            </div>
-            <div class="col-10">
-              <datepicker
-                v-model="dateAdd"
-                :locale="'th'"
-                autoApply
-                range
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    outlined
-                    dense
-                    class="full-width datepicker"
-                    :model-value="dateThaiRange(dateAdd)"
-                  >
-                    <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>
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-2 subName">
-              <label>คำอธิบาย</label>
-            </div>
-            <div class="col-10">
-              <q-input
-                dense
-                borderless
-                class="full-width datepicker q-pb-none"
-                v-model="name"
-                type="textarea"
-                :rules="[(val) => (val && val.length > 0) || '']"
-              />
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right" class="text-primary">
-          <q-btn unelevated label="บันทึก" color="public" type="submit">
-            <!-- icon="mdi-content-save-outline"
-            <q-tooltip>บันทึก</q-tooltip> -->
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-
-  <!-- modal ลบวันหยุด -->
-  <q-dialog v-model="modalDelete" persistent>
-    <q-card style="min-width: 550px">
-      <q-card-section class="row items-center q-pb-xs">
-        <div class="text-bold">ต้องการลบข้อมูลนี้หรือไม่?</div>
-        <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          v-close-popup
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-card-section>
-      <q-separator />
-      <q-card-section class="row items-center">
-        <div class="q-pr-md">
-          <q-avatar
-            icon="mdi-trash-can-outline"
-            font-size="25px"
-            size="lg"
-            color="red-1"
-            text-color="red"
-          />
-        </div>
-        <div class="col text-dark">
-          <span>ข้อมูลที่กำลังถูกลบนี้จะมีผลใช้งานทันที</span>
-        </div>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="ตกลง" color="primary" @click="deleteConfirm" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-<script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type {
-  RequestItemsObject,
-  DataDateRowObject,
-  DataDateAddObject,
-  DataDateListsObject,
-  TabsObject,
-} from "@/modules/01_metadataNew/interface/index/Calendar";
-
-import { useCounterMixin } from "@/stores/mixin";
-
-const props = defineProps({
-  dateYear: {
-    //filter ปี วันหยุด
-    type: Number,
-    required: true,
-  },
-  refreshData: {
-    //หน้า main มีการอัพเดทค่าให้ refresh data
-    type: Boolean,
-    required: true,
-  },
-  fetchDataSummaryCalendar: {
-    //ฟังก์ชันอัพเดทสรุปวันหยุด
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  success,
-  dateToISO,
-  dateMonth2Thai,
-  weekThai,
-  messageError,
-  showLoader,
-  hideLoader,
-} = mixin;
-const $q = useQuasar(); //ใช้ noti quasar
-const calendarData = ref<DataDateListsObject[]>([]); //data วันหยุด
-const modalAdd = ref<boolean>(false); //modal เพิ่มวันหยุด
-const modalDelete = ref<boolean>(false); //modal ลบวันหยุด
-const name = ref<string>(""); //ชื่อวันหยุด
-const isSpecial = ref<boolean>(true); //เช็ควันหยุด
-const dateAdd = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ที่เพิ่มเป็นวันหยุด
-const rowData = ref<DataDateListsObject>(); //data ที่ถูกเลือกใน row นั้น
-const formDate = ref<any>(); //ref เพิ่ม แก้ไข วันหยุดสำหรับ validate
-
-const currentTab = ref<string>("normal"); //เลือก tab ประเภทวันหยุด
-const tabs = ref<TabsObject[]>([
-  { label: "ทำงานจันทร์-ศุกร์ (5 วัน)", value: "normal" },
-  { label: "ทำงานจันทร์-เสาร์ (6 วัน)", value: "6day" },
-]); //tab ประเภทวันหยุดทั้งหมด
-
-//columns รายการวันหยุด
-const columns = ref<any>([
-  {
-    name: "week",
-    align: "left",
-    label: "-",
-    sortable: true,
-    field: "week",
-    style: "font-size: 15px",
-  },
-  {
-    name: "holidayDate",
-    align: "left",
-    label: "-",
-    sortable: true,
-    field: "holidayDate",
-    style: "font-size: 15px",
-  },
-  {
-    name: "detail",
-    align: "left",
-    label: "-",
-    sortable: true,
-    field: "detail",
-    style: "font-size: 15px",
-  },
-]);
-
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(async () => {
-  await fetchData();
-});
-
-/**
- * ค่า props(วันปีที่เลือก และเพิ่มหรือแก้ไข) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
- */
-watch(props, async (count, prevCount) => {
-  await fetchData();
-});
-
-/**
- * กดปุ่มแก้ไขวันหยุด
- * @param val data วันหยุดทั้ง row
- */
-const editCalendar = async (val: DataDateListsObject) => {
-  rowData.value = val;
-  dateAdd.value = [val.dateRange[0], val.dateRange[1]];
-  name.value = val.detail;
-  isSpecial.value = true;
-  modalAdd.value = true;
-};
-
-/**
- * กดปุ่มลบวันหยุด
- * @param val data วันหยุดทั้ง row
- */
-const deleteClick = async (val: DataDateListsObject) => {
-  rowData.value = val;
-  modalDelete.value = true;
-};
-
-/**
- * fetch วันหยุดในรายการ
- */
-const fetchData = async () => {
-  calendarData.value = [];
-  showLoader();
-  await http
-    .get(config.API.listHolidayHistoryYear(props.dateYear))
-    .then((res) => {
-      let data = res.data.result.normal;
-      if (currentTab.value == "6day") {
-        data = res.data.result.sixDays;
-      }
-      const dateStart = ref<Date | null>();
-      const firstEvent = ref<boolean>(true);
-      const dateRow = ref<DataDateRowObject[]>([]);
-      data.map((e: RequestItemsObject, index: number) => {
-        dateRow.value.push({
-          holidayDate: new Date(e.holidayDate),
-          name: e.name,
-          isSpecial: true,
-          id: e.id,
-        });
-        if (
-          index == data.length - 1 ||
-          data[index + 1].name != e.name ||
-          (data[index + 1].name == e.name &&
-            dateToISO(new Date(data[index + 1].holidayDate)) !=
-              dateToISO(
-                new Date(
-                  new Date(e.holidayDate).setDate(
-                    new Date(e.holidayDate).getDate() + 1
-                  )
-                )
-              ))
-        ) {
-          firstEvent.value = true;
-          calendarData.value.push({
-            id: e.id,
-            dateRange: [
-              dateStart.value ? dateStart.value : new Date(e.holidayDate),
-              new Date(e.holidayDate),
-            ],
-            dataRangeRow: dateRow.value,
-            detail:
-              dateToISO(new Date(e.holidayDate)) ==
-              dateToISO(new Date(e.originalDate))
-                ? e.name
-                : `ชดเชย ${e.name}`,
-            isSpecial: true,
-          });
-          dateStart.value = null;
-          dateRow.value = [];
-        } else if (firstEvent.value == true) {
-          firstEvent.value = false;
-          dateStart.value = new Date(e.holidayDate);
-        }
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await props.fetchDataSummaryCalendar();
-    });
-};
-
-/**
- * ลบข้อมูลวันหยุด
- */
-const deleteConfirm = async () => {
-  modalDelete.value = false;
-  const dataDelete = ref<DataDateAddObject[]>([]);
-  if (rowData.value != null) {
-    await rowData.value.dataRangeRow.map((e: DataDateRowObject) => {
-      dataDelete.value.push({
-        year: new Date(e.holidayDate).getFullYear(),
-        holidayDate: dateToISO(e.holidayDate),
-        name: e.name,
-        isSpecial: true,
-      });
-    });
-  } else {
-    return;
-  }
-  showLoader();
-  await http
-    .post(
-      config.API.listHolidayHistoryDelete(currentTab.value),
-      dataDelete.value
-    )
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
-};
-
-/**
- * บันทึกแก้ไขวันหยุด
- */
-const editData = async () => {
-  await formDate.value.validate().then(async (result: boolean) => {
-    if (result) {
-      const dataEdit = ref<DataDateAddObject[]>([]);
-      let i = 0;
-      const dateStart = ref<Date>(dateAdd.value[0]);
-      do {
-        i = i + 1;
-        dataEdit.value.push({
-          year: new Date(dateStart.value).getFullYear(),
-          holidayDate: dateToISO(new Date(dateStart.value)),
-          name: name.value,
-          isSpecial: true,
-        });
-        dateStart.value = new Date(
-          new Date(dateStart.value).setDate(
-            new Date(dateStart.value).getDate() + 1
-          )
-        );
-      } while (new Date(dateStart.value) <= new Date(dateAdd.value[1]));
-      const _dataHistory = ref<DataDateAddObject[]>([]);
-      if (rowData.value != null) {
-        rowData.value.dataRangeRow.map(
-          (e: DataDateRowObject, index: number) => {
-            _dataHistory.value.push({
-              year: new Date(e.holidayDate).getFullYear(),
-              holidayDate: dateToISO(e.holidayDate),
-              name: e.name,
-              isSpecial: true,
-            });
-          }
-        );
-      }
-      showLoader();
-      await http
-        .post(config.API.listHolidayHistoryEdit(currentTab.value), {
-          history: _dataHistory.value,
-          updated: dataEdit.value,
-        })
-        .then((res) => {
-          modalAdd.value = false;
-          success($q, "แก้ไขข้อมูลสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await fetchData();
-        });
-    } else {
-    }
-  });
-};
-
-/**
- * เปลี่ยน tab ดูวันหยุดตามประเภท
- * @param tab tab ประเภทวันหยุดที่เลือก
- */
-const changeTab = async (tab: string) => {
-  currentTab.value = tab;
-  await fetchData();
-};
-
-/**
- * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
- * @param val ช่วงวันที่
- */
-const dateThaiRange = (val: [Date, Date]) => {
-  if (val === null) {
-    return "";
-  } else if (dateMonth2Thai(val[0], true) === dateMonth2Thai(val[1], true)) {
-    return `${dateMonth2Thai(val[0], true)}`;
-  } else {
-    return `${dateMonth2Thai(val[0], true)} - ${dateMonth2Thai(val[1], true)}`;
-  }
-};
-
-/**
- * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง(เช่นวันจันทร์ -วันศุกร์)
- * @param val ช่วงวันที่
- */
-const dayThaiRange = (val: [Date, Date]) => {
-  if (val === null) {
-  } else if (dateToISO(val[0]) == dateToISO(val[1])) {
-    return `${weekThai(new Date(val[0]).getDay())}`;
-  } else {
-    return `${weekThai(new Date(val[0]).getDay())} - ${weekThai(
-      new Date(val[1]).getDay()
-    )}`;
-  }
-};
-</script>
-
-<style lang="scss" scope>
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-
-.my-table-details {
-  white-space: -moz-pre-wrap !important;
-  /* Mozilla, since 1999 */
-  white-space: -webkit-pre-wrap;
-  /* Chrome & Safari */
-  white-space: -pre-wrap;
-  /* Opera 4-6 */
-  white-space: -o-pre-wrap;
-  /* Opera 7 */
-  white-space: pre-wrap;
-  /* CSS3 */
-  word-wrap: break-word;
-  /* Internet Explorer 5.5+ */
-  word-break: break-all;
-  white-space: normal;
-}
-
-.table_ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: wrap;
-  max-width: 250px;
-}
-</style>

src/modules/01_metadataNew/components/calendar/calendarMain.vue

@@ -1,589 +0,0 @@
-<!-- page:จัดการข้อมูลหลัก tab วันหยุด -->
-<template>
-  <div>
-    <div class="row col-12 q-col-gutter-sm">
-      <div class="row items-center">
-        <!-- filter เลือกเดือนปี -->
-        <datepicker
-          v-model="dateMonth"
-          :locale="'th'"
-          autoApply
-          month-picker
-          :enableTimePicker="false"
-          v-if="currentTab === 'calendar'"
-          @update:modelValue="updateMonth"
-        >
-          <template #year="{ year }">{{ year + 543 }}</template>
-          <template #year-overlay-value="{ value }">{{
-            parseInt(value + 543)
-          }}</template>
-          <template #trigger>
-            <q-input
-              :model-value="monthYearThai(dateMonth)"
-              dense
-              outlined
-              style="width: 130px"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-
-        <!-- filter เลือกปี -->
-        <datepicker
-          v-model="dateYear"
-          :locale="'th'"
-          autoApply
-          year-picker
-          :enableTimePicker="false"
-          v-if="currentTab === 'list'"
-          @update:modelValue="updateYear"
-        >
-          <template #year="{ year }">{{ year + 543 }}</template>
-          <template #year-overlay-value="{ value }">{{
-            parseInt(value + 543)
-          }}</template>
-          <template #trigger>
-            <q-input
-              :model-value="dateYear + 543"
-              dense
-              outlined
-              style="width: 100px"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-        <div class="q-ml-sm">
-          <!-- icon เพิ่มวันหยุด -->
-          <q-btn round dense flat size="13px" class="q-px-sm">
-            <q-icon
-              name="mdi-plus"
-              size="25px"
-              color="primary"
-              @click="addCalendar()"
-            />
-            <q-tooltip>เพิ่มวันหยุด</q-tooltip>
-          </q-btn>
-          <!-- icon คัดลอกวันหยุด -->
-          <q-btn round dense flat size="13px" class="q-px-sm">
-            <q-icon
-              name="mdi-content-copy"
-              size="22px"
-              color="blue-6"
-              @click="copyCalendar()"
-            />
-            <q-tooltip>คัดลอกวันหยุด</q-tooltip>
-          </q-btn>
-        </div>
-      </div>
-      <q-space />
-      <div class="justify-center row q-gutter-md items-center">
-        <!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
-        <q-tabs
-          v-model="currentTab"
-          indicator-color="transparent"
-          align="left"
-          active-color="activetab"
-          class="text-nativetab"
-          inline-label
-          dense
-        >
-          <q-btn
-            name="calendar"
-            round
-            flat
-            icon="mdi-calendar-month"
-            @click="currentTab = 'calendar'"
-            :color="currentTab == 'calendar' ? 'primary' : ''"
-            class="q-mr-sm"
-          >
-            <q-tooltip>ปฏิทิน</q-tooltip>
-          </q-btn>
-          <q-separator vertical inset />
-          <q-btn
-            name="list"
-            round
-            flat
-            icon="mdi-format-list-bulleted"
-            @click="currentTab = 'list'"
-            :color="currentTab == 'list' ? 'primary' : ''"
-            class="q-ml-sm"
-          >
-            <q-tooltip>รายการ</q-tooltip>
-          </q-btn>
-        </q-tabs>
-      </div>
-    </div>
-    <div>
-      <!-- component ปฏิทินวันหยุด -->
-      <subCalendarComponent
-        v-if="currentTab === 'calendar'"
-        :dateYear="dateMonth.year"
-        :dateMonth="dateMonth.month"
-        :refreshData="refreshData"
-        :fetchDataSummaryCalendar="fetchDataSummaryCalendar"
-      />
-      <!-- component รายการวันหยุด -->
-      <subCalendarListComponent
-        v-if="currentTab === 'list'"
-        :dateYear="dateYear"
-        :refreshData="refreshData"
-        :fetchDataSummaryCalendar="fetchDataSummaryCalendar"
-      />
-    </div>
-  </div>
-  <!-- modal เพิ่มวันหยุด -->
-  <q-dialog v-model="modalAdd" persistent>
-    <q-card style="min-width: 550px">
-      <q-form ref="formDate" @submit.prevent.stop="onSubmit">
-        <q-card-section class="row items-center q-py-sm">
-          <div class="text-bold">เพิ่มวันหยุด</div>
-          <q-space />
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            v-close-popup
-            style="color: #ff8080; background-color: #ffdede"
-          />
-        </q-card-section>
-        <q-separator />
-        <q-card-section class="q-p-md row q-gutter-y-sm">
-          <datepicker
-            v-model="dateAdd"
-            :locale="'th'"
-            autoApply
-            range
-            :enableTimePicker="false"
-            week-start="0"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                :model-value="dateThaiRange(dateAdd)"
-                outlined
-                label="เลือกวันที่"
-                dense
-                class="full-width datepicker"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-          <q-input
-            dense
-            label="คำอธิบาย"
-            outlined
-            class="full-width datepicker q-pb-none"
-            v-model="name"
-            type="textarea"
-            :rules="[(val) => (val && val.length > 0) || '']"
-          />
-          <q-option-group
-            dense
-            v-model="category"
-            :options="categoryOptions"
-            color="primary"
-            inline
-          />
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right" class="text-primary">
-          <q-btn unelevated label="บันทึก" color="public" type="submit">
-            <!-- icon="mdi-content-save-outline"
-            <q-tooltip>บันทึก</q-tooltip> -->
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-
-  <!-- modal คัดลอกวันหยุด -->
-  <q-dialog v-model="modalCopy" persistent>
-    <q-card style="min-width: 500px">
-      <q-form @submit.prevent.stop="onSubmitCopy">
-        <q-card-section class="row items-center q-py-sm">
-          <div class="text-bold">คัดลอกวันหยุดปีก่อนหน้า</div>
-          <q-space />
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            v-close-popup
-            style="color: #ff8080; background-color: #ffdede"
-          />
-        </q-card-section>
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div class="row col-12 q-col-gutter-sm">
-            <datepicker
-              v-model="dateYearStart"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  :model-value="dateYearStart + 543"
-                  dense
-                  outlined
-                  class="q-pb-sm"
-                  label="ปีที่คัดลอกวันหยุด"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <datepicker
-              v-model="dateYearEnd"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-              :min-date="minDate"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  :model-value="dateYearEnd + 543"
-                  dense
-                  outlined
-                  label="ปีที่ลงวันหยุดคัดลอก"
-                  class="q-pb-sm"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right" class="text-primary">
-          <q-btn unelevated label="บันทึก" color="public" type="submit">
-            <!-- icon="mdi-content-save-outline"
-            <q-tooltip>บันทึก</q-tooltip> -->
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, onMounted } from "vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useQuasar } from "quasar";
-
-import type {
-  DataDateMonthObject,
-  DataDateAddObject,
-} from "@/modules/01_metadataNew/interface/index/Calendar";
-
-import subCalendarComponent from "@/modules/01_metadataNew/components/calendar/Calendar.vue";
-import subCalendarListComponent from "@/modules/01_metadataNew/components/calendar/CalendarList.vue";
-
-import { useCounterMixin } from "@/stores/mixin";
-
-const props = defineProps({
-  dateYear: Number, //ปีที่ส่งไป parent สรุปวันหยุด
-  fetchDataSummaryCalendar: {
-    //ฟังก์ชันอัพเดทสรุปวันหยุด
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-const $q = useQuasar(); //ใช้ noti quasar
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  success,
-  dateToISO,
-  monthYear2Thai,
-  date2Thai,
-  messageError,
-  dialogMessage,
-  showLoader,
-  hideLoader,
-} = mixin;
-
-const currentTab = ref<string>("calendar"); //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ
-const modalAdd = ref<boolean>(false); //แสดง modal add calendar
-const modalCopy = ref<boolean>(false); //แสดง modal copy calendar
-const dateMonth = ref<DataDateMonthObject>({
-  month: new Date().getMonth(),
-  year: new Date().getFullYear(),
-}); //ค่าเดือนที่เลือก tab ปฏิทิน
-const dateYear = ref<number>(new Date().getFullYear()); //ค่าปีที่เลือก tab รายการ
-const dateYearStart = ref<number>(new Date().getFullYear()); //ค่าปีที่ copy วันหยุด
-const dateYearEnd = ref<number>(new Date().getFullYear()); //ค่าปีที่จะลงวันหยุด copy
-const dateAdd = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ที่เพิ่มเป็นวันหยุด
-const formDate = ref<any>(); //ref เช็ค validate เพิ่มวันหยุด
-const name = ref<string>(""); //ชื่อวันหยุด
-const isSpecial = ref<boolean>(true); //เช็ควันหยุดพิเศษ
-
-const category = ref<string>("all");
-const categoryOptions = ref<any>([
-  {
-    label: "ทั้งหมด",
-    value: "all",
-  },
-  {
-    label: "ทำงาน 5 วัน",
-    value: "normal",
-  },
-  {
-    label: "ทำงาน 6 วัน",
-    value: "6days",
-  },
-]);
-const minDate = ref<Date>();
-const refreshData = ref<boolean>(false); //ส่งค่าให้ component refresh data วันหยุด
-const emit = defineEmits(["update:dateYear"]);
-
-/**
- * มีการเลือก datepicker ให้แปลงค่าเป็น text ที่แสดง
- */
-watch(dateYearStart, () => {
-  dateYearEnd.value = dateYearStart.value + 1;
-  minDate.value = new Date(`${dateYearStart.value + 1}-01-01`);
-});
-
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(async () => {
-  dateYearEnd.value = dateYearStart.value + 1;
-  minDate.value = new Date(`${dateYearStart.value + 1}-01-01`);
-});
-
-/**
- * ค่าเดือนปีที่ถูกเลือกใน component ปฏิทินจะให้อัพเดทค่าสรุปวันหยุดรวม
- * @param e เลือกเดือนปี tab ปฏิทิน
- */
-const updateMonth = async (e: DataDateMonthObject) => {
-  if (e != null) {
-    dateYear.value = e.year;
-    emit("update:dateYear", e.year);
-    await props.fetchDataSummaryCalendar();
-  }
-};
-
-/**
- * ค่าปีที่ถูกเลือกใน component รายการจะให้อัพเดทค่าสรุปวันหยุดรวม
- * @param e เลือกปี tab รายการ
- */
-const updateYear = async (e: number) => {
-  dateMonth.value = { month: 0, year: e };
-  emit("update:dateYear", dateYear.value);
-  await props.fetchDataSummaryCalendar();
-};
-
-/**
- * ฟังก์ชันปุ่มเพิ่มวันหยุดแบบเลือกวันได้
- */
-const addCalendar = () => {
-  dateAdd.value = [new Date(), new Date()];
-  name.value = "";
-  category.value = "all";
-  isSpecial.value = true;
-  modalAdd.value = true;
-};
-
-/**
- * ฟังก์ชัน copy วันหยุดจากปีนิงไปอีกปี
- */
-const copyCalendar = () => {
-  modalCopy.value = true;
-  dateYearStart.value = new Date().getFullYear();
-  dateYearEnd.value = new Date().getFullYear() + 1;
-};
-
-/**
- * ฟังก์ชันปุ่มบันทึกเพิ่มวันหยุด
- */
-const onSubmit = async () => {
-  await formDate.value.validate().then(async (result: boolean) => {
-    if (result) {
-      const dataAdd = ref<DataDateAddObject[]>([]);
-      let i = 0;
-      const dateStart = ref<Date>(dateAdd.value[0]);
-      do {
-        i = i + 1;
-        dataAdd.value.push({
-          year: new Date(dateStart.value).getFullYear(),
-          holidayDate: dateToISO(new Date(dateStart.value)),
-          name: name.value,
-          isSpecial: true,
-        });
-        dateStart.value = new Date(
-          new Date(dateStart.value).setDate(
-            new Date(dateStart.value).getDate() + 1
-          )
-        );
-      } while (new Date(dateStart.value) <= new Date(dateAdd.value[1]));
-      showLoader();
-      await http
-        .post(config.API.listHolidayHistoryAdd(category.value), dataAdd.value)
-        .then(() => {
-          modalAdd.value = false;
-          success($q, "เพิ่มวันหยุดสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          refreshData.value = !refreshData.value;
-          hideLoader();
-        });
-    }
-  });
-  await props.fetchDataSummaryCalendar();
-};
-
-/**
- * ฟังก์ชันคัดลอกวันหยุด
- */
-const onSubmitCopy = async () => {
-  if (dateYearStart.value >= dateYearEnd.value) {
-    dialogMessage(
-      $q,
-      "ไม่สามารถคัดลอกวันหยุดได้",
-      "ปีที่เริ่มต้นคัดลอกต้องมากกว่าปีที่จะลงวันคัดลอก",
-      "warning",
-      undefined,
-      "orange",
-      undefined,
-      undefined,
-      true
-    );
-    return;
-  }
-  showLoader();
-  await http
-    .post(config.API.listHolidayCopy, {
-      fromYear: dateYearStart.value,
-      toYear: dateYearEnd.value,
-    })
-    .then(() => {
-      modalCopy.value = false;
-      success($q, "คัดลอกวันหยุดสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      refreshData.value = !refreshData.value;
-      await props.fetchDataSummaryCalendar();
-    });
-};
-
-/**
- * แปลง ปีและเดือนเป็นภาษาไทย
- * @param val datepicker แบบเลือกปีและเดือน
- */
-const monthYearThai = (val: DataDateMonthObject) => {
-  if (val == null) return "";
-  else return monthYear2Thai(val.month, val.year);
-};
-
-/**
- * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
- * @param val ช่วงวันที่
- */
-const dateThaiRange = (val: [Date, Date] | []) => {
-  if (val.length === 0) {
-  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
-    return `${date2Thai(val[0])}`;
-  } else {
-    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
-  }
-};
-</script>
-
-<style scoped>
-.my-menu-link {
-  color: black;
-  background: #d0d0d0;
-}
-
-.my-list-link {
-  color: black;
-  border-radius: 5px;
-  background: #f4f4f4;
-}
-
-.my-list {
-  padding: 10px 10px;
-}
-
-.my-card {
-  width: 100%;
-  max-width: 160px;
-}
-
-.sub-card {
-  height: 100%;
-  max-height: 265px;
-}
-
-.cardNum {
-  border-radius: 5px;
-}
-
-.fc-direction-ltr .fc-daygrid-event.fc-event-end,
-.fc-direction-rtl .fc-daygrid-event.fc-event-start {
-  padding-left: 5px;
-}
-</style>

src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { useRouter } from "vue-router";
-import InsigniaList from "@/modules/01_metadataNew/components/insignia/InsigniaList.vue";
-
-const router = useRouter();
-
-const nameId = ref<string>("");
-</script>
-
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.go(-1)"
-    />
-    รายการข้อมูลเครื่องราชอิสริยาภรณ์ {{ nameId }}
-  </div>
-
-  <q-card flat bordered>
-    <InsigniaList v-model:insigniaTypeName="nameId" />
-  </q-card>
-</template>
-
-<style scoped></style>

src/modules/01_metadataNew/components/insignia/InsigniaList.vue

@@ -1,581 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRoute } from "vue-router";
-import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
-import dialogHeader from "@/components/DialogHeader.vue";
-import TableDraggable from "@/modules/01_metadataNew/components/insignia/TableDraggable.vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-const store = useInsigniaDataStore();
-const mixin = useCounterMixin();
-
-const insigniaTypeName = defineModel<string>("insigniaTypeName", {
-  required: true,
-});
-
-const {
-  dialogRemove,
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-} = mixin;
-const $q = useQuasar();
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px; width:0px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    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: "shortName",
-    align: "left",
-    label: "ชื่อย่อ",
-    sortable: true,
-    field: "shortName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "insigniaType",
-    align: "left",
-    label: "ลำดับชั้นเครื่องราชฯ",
-    sortable: true,
-    field: "insigniaType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "createdAt",
-    align: "center",
-    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: "center",
-    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" }),
-  },
-
-  {
-    name: "note",
-    align: "left",
-    label: "หมายเหตุ",
-    sortable: true,
-    field: "note",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const route = useRoute();
-const id = ref<string>(route.params.id.toString());
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const isActive = ref<boolean>(false);
-const shortName = ref<string>("");
-const note = ref<string>("");
-const name = ref<string>("");
-const insigniaTypeId = ref<string>("");
-const nameRef = ref<any>(null);
-const shortNameRef = ref<any>(null);
-const dialogStatus = ref<string>("");
-const editId = ref<string>("");
-const visibleColumns = ref<string[]>([
-  "no",
-  "name",
-  "shortName",
-  "insigniaType",
-  "createdAt",
-  "lastUpdatedAt",
-  "lastUpdateFullName",
-  "isActive",
-  "note",
-]);
-
-function closeDialog() {
-  dialog.value = false;
-  name.value = "";
-  isActive.value = false;
-  shortName.value = "";
-  note.value = "";
-}
-
-function validateForm() {
-  nameRef.value.validate();
-  shortNameRef.value.validate();
-  onSubmit();
-}
-
-async function fetchData(id: string) {
-  showLoader();
-  await http
-    .get(config.API.insigniaTypeNewIdOrg(id))
-    .then(async (res) => {
-      insigniaTypeId.value = res.data.result.name;
-      store.fetchData(res.data.result.insignias, res.data.result.name);
-      insigniaTypeName.value = res.data.result.name;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-onMounted(async () => {
-  await fetchData(id.value);
-});
-
-async function onSubmit() {
-  if (name.value.length > 0 && shortName.value.length > 0) {
-    dialogConfirm(
-      $q,
-      async () => {
-        dialogStatus.value === "create" ? addData() : editData(editId.value);
-        closeDialog();
-        name.value = "";
-        shortName.value = "";
-        isActive.value = false;
-        note.value = "";
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
-}
-
-async function addData() {
-  await http
-    .post(config.API.insigniaOrg, {
-      name: name.value,
-      isActive: isActive.value,
-      shortName: shortName.value,
-      note: note.value == "" || note.value == null ? "" : note.value,
-      insigniaTypeId: id.value,
-    })
-    .then(() => {
-      fetchData(id.value);
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function editData(idData: string) {
-  console.log(note.value);
-
-  await http
-    .put(config.API.insigniaNewIdOrg(idData), {
-      name: name.value,
-      isActive: isActive.value,
-      shortName: shortName.value,
-      note: note.value == "" || note.value == null ? "" : note.value,
-      insigniaTypeId: id.value,
-    })
-    .then(() => {
-      fetchData(id.value);
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function deleteData(idData: string) {
-  await http
-    .delete(config.API.insigniaNewIdOrg(idData))
-    .then(() => {
-      fetchData(id.value);
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-import { defineEmits } from "vue";
-
-const emit = defineEmits(["nameType"]);
-const dialogOrder = ref<boolean>(false);
-</script>
-
-<template>
-  <div class="q-pa-md">
-    <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-btn
-        v-if="store.row.length > 0"
-        flat
-        round
-        color="blue-6"
-        icon="mdi-sort"
-        @click.stop="() => (dialogOrder = true)"
-      >
-        <q-tooltip> จัดลำดับการแสดงผล </q-tooltip>
-      </q-btn>
-      <TableDraggable v-model:modal="dialogOrder" :fetchData="fetchData" />
-      <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-bold">{{ 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, index) in props.cols" :key="col.id">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else-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="edit"
-              flat
-              dense
-              round
-              class="q-mr-xs"
-              size="12px"
-              icon="edit"
-              clickable
-              @click.stop="
-                () => {
-                  dialogStatus = 'edit';
-                  dialog = true;
-                  editId = props.row.id;
-                  name = props.row.name;
-                  shortName = props.row.shortName;
-                  note = props.row.note;
-                  isActive = props.row.isActive;
-                }
-              "
-            >
-              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-            </q-btn>
-            <q-btn
-              color="red"
-              flat
-              dense
-              round
-              size="12px"
-              icon="mdi-delete"
-              clickable
-              @click.stop="
-                dialogRemove($q, async () => await deleteData(props.row.id))
-              "
-              v-close-popup
-            >
-              <q-tooltip>ลบข้อมูล</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-    </d-table>
-  </div>
-
-  <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 350px">
-      <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">
-          <div class="col-12 q-ma-md">
-            <q-input
-              outlined
-              :model-value="insigniaTypeId"
-              label="ลำดับชั้นเครื่องราชฯ"
-              dense
-              lazy-rules
-              borderless
-              hide-bottom-space
-              readonly
-              class="inputgreen"
-            />
-          </div>
-          <div class="col-12 q-ma-md">
-            <q-input
-              ref="nameRef"
-              outlined
-              v-model="name"
-              label="ชื่อเครื่องราชฯ"
-              dense
-              lazy-rules
-              borderless
-              :rules="[
-                (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
-              ]"
-              hide-bottom-space
-              class="inputgreen"
-            />
-          </div>
-          <div class="col-12 q-ma-md">
-            <q-input
-              ref="shortNameRef"
-              outlined
-              v-model="shortName"
-              label="ชื่อย่อ"
-              dense
-              lazy-rules
-              borderless
-              :rules="[
-                (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
-              ]"
-              hide-bottom-space
-              class="inputgreen"
-            />
-          </div>
-          <div class="col-12 q-ma-md">
-            <q-input
-              outlined
-              v-model="note"
-              label="หมายเหตุ"
-              dense
-              type="textarea"
-              borderless
-              hide-bottom-space
-              class="inputgreen"
-            />
-          </div>
-          <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
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-          >
-            <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>

src/modules/01_metadataNew/components/insignia/InsigniaType.vue

@@ -1,442 +0,0 @@
-<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";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const store = useInsigniaDataStore();
-const router = useRouter();
-const mixin = useCounterMixin();
-const {
-  dialogRemove,
-  dialogConfirm,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-} = mixin;
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "name",
-    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: "center",
-    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: "center",
-    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 editId = ref<string>("");
-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",
-  "createdAt",
-  "lastUpdatedAt",
-  "lastUpdateFullName",
-  "isActive",
-]);
-
-async function fetchData() {
-  showLoader();
-  await http
-    .get(config.API.insigniaTypeOrg)
-    .then(async (res) => {
-      store.fetchData(res.data.result);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-onMounted(async () => {
-  fetchData();
-});
-
-function closeDialog() {
-  dialog.value = false;
-}
-
-function onclickDetail(id: string) {
-  router.push(`/master-data/insignia/detail/${id}`);
-}
-
-async function addData() {
-  await http
-    .post(config.API.insigniaTypeOrg, {
-      name: name.value,
-      isActive: isActive.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function editData(id: string) {
-  await http
-    .put(config.API.insigniaTypeNewIdOrg(id), {
-      name: name.value,
-      isActive: isActive.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.insigniaTypeNewIdOrg(id))
-    .then(() => {
-      fetchData();
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function validateForm() {
-  nameRef.value.validate();
-  onSubmit();
-}
-
-async function onSubmit() {
-  if (name.value.length > 0) {
-    dialogConfirm(
-      $q,
-      async () => {
-        dialogStatus.value === "create" ? addData() : editData(editId.value);
-        closeDialog();
-        name.value = "";
-        isActive.value = false;
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
-}
-</script>
-
-<template>
-  <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="edit"
-            flat
-            dense
-            round
-            class="q-mr-xs"
-            size="12px"
-            icon="edit"
-            clickable
-            @click.stop="
-              () => {
-                dialogStatus = 'edit';
-                dialog = true;
-                editId = props.row.id;
-                name = props.row.name;
-                isActive = props.row.isActive;
-              }
-            "
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            color="red"
-            flat
-            dense
-            round
-            size="12px"
-            icon="mdi-delete"
-            clickable
-            @click.stop="
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
-            v-close-popup
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn>
-        </q-td>
-      </q-tr>
-    </template>
-  </d-table>
-
-  <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 350px">
-      <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">
-          <div class="col-12 q-ma-md">
-            <q-input
-              ref="nameRef"
-              outlined
-              v-model="name"
-              label="ลำดับชั้นเครื่องราชฯ"
-              dense
-              lazy-rules
-              borderless
-              :rules="[
-                (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
-              ]"
-              hide-bottom-space
-            />
-          </div>
-          <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
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-          >
-            <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>

src/modules/01_metadataNew/components/insignia/TableDraggable.vue

@@ -1,163 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import type { QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRouter, useRoute } from "vue-router";
-import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
-import dialogHeader from "@/components/DialogHeader.vue";
-import { useQuasar } from "quasar";
-import DialogHeader from "@/components/DialogHeader.vue";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-const store = useInsigniaDataStore();
-const mixin = useCounterMixin();
-const { dialogRemove, dialogConfirm, showLoader, hideLoader, messageError } =
-  mixin;
-const $q = useQuasar();
-const route = useRoute();
-const modal = defineModel("modal", { type: Boolean });
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "name",
-    required: true,
-    label: "ชื่อเครื่องราชฯ",
-    align: "left",
-    field: "name",
-    sortable: true,
-  },
-  {
-    name: "shortName",
-    align: "center",
-    label: "ชื่อย่อ",
-    field: "shortName",
-  },
-  {
-    name: "insigniaType",
-    align: "left",
-    label: "ลำดับชั้นเครื่องราชฯ",
-    field: "insigniaType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sortable: true,
-  },
-]);
-const id = ref<string>(route.params.id.toString());
-
-const props = defineProps({
-  fetchData: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-function onDrop(from: any, to: any) {
-  onDropRow(from, to);
-}
-
-const rows = ref<any[]>([]);
-function onDropRow(from: any, to: any) {
-  rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
-}
-
-async function save() {
-  const dataPost = await rows.value.map((obj: any) => {
-    return obj.id;
-  });
-  modal.value = false;
-
-  showLoader();
-  await http
-    .put(config.API.insigniaSortOrg(id.value), { id: dataPost })
-    .then(() => {
-      store.row = rows.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-      // props.fetchData(id.value);
-    });
-}
-
-async function onSubmit() {
-  dialogConfirm($q, async () => {
-    save();
-  });
-}
-
-watch(modal, () => {
-  if (modal.value === true) {
-    // rows.value = store.row;
-    rows.value = [...store.row]; // ดึงมาใช้ sort แล้วใน store ไม่เปลี่ยน
-  }
-});
-</script>
-
-<template>
-  <q-dialog v-model="modal" class="dialog" persistent>
-    <q-card style="min-width: 50vw" class="bg-grey-11">
-      <form @submit.prevent="onSubmit">
-        <DialogHeader
-          tittle="จัดลำดับการแสดงผล"
-          :close="() => (modal = false)"
-        />
-        <q-separator />
-        <q-card-section class="q-pa-md bg-grey-1">
-          <q-table
-            v-draggable-table="{
-              options: {
-                mode: 'row',
-                onlyBody: true,
-                dragHandler: 'th,td',
-              },
-              onDrop,
-            }"
-            flat
-            bordered
-            :rows="rows"
-            :columns="columns"
-            :rows-per-page-options="[100]"
-            row-key="name"
-            hide-bottom
-            hide-pagination
-            hide-header
-          />
-          <!-- <q-table
-            v-draggable-table="{
-              options: {
-                mode: 'row',
-                onlyBody: true,
-                dragHandler: 'tr',
-              },
-              onDrop,
-            }"
-            ref="table"
-            :columns="columns"
-            :rows="rows"
-            row-key="name"
-            flat
-            bordered
-            hide-bottom
-          /> -->
-        </q-card-section>
-
-        <q-separator />
-        <q-card-actions align="right">
-          <q-btn
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
-            <!-- icon="mdi-content-save-outline" -->
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
-</template>

src/modules/01_metadataNew/components/personal/01ListPrefix.vue

@@ -1,257 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalStore";
-import { useQuasar } from "quasar";
-import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-const TABLE_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" }),
-  },
-] as const satisfies QTableProps["columns"];
-
-const $q = useQuasar();
-const store = usePersonalDataStore();
-const mixin = useCounterMixin();
-const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
-
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const prefix = ref<string>("");
-const editId = ref<string>("");
-const dialogStatus = ref<string>("");
-const personalName = ref<string>("คำนำหน้าชื่อ");
-const visibleColumns = ref<string[]>([
-  "prefix",
-  "createdAt",
-  "lastUpdatedAt",
-  "lastUpdateFullName",
-]);
-
-async function fetchData() {
-  showLoader();
-  await http
-    .get(config.API.orgPrefix)
-    .then(async (res) => {
-      store.save(res.data.result);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function addData() {
-  await http
-    .post(config.API.orgPrefix, {
-      name: prefix.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function editData(id: string) {
-  await http
-    .put(config.API.orgPrefixId(id), {
-      name: prefix.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.orgPrefixId(id))
-    .then(() => {
-      fetchData();
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-onMounted(async () => {
-  fetchData();
-});
-</script>
-
-<template>
-  <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="TABLE_COLUMNS"
-        option-value="name"
-        options-cover
-        style="min-width: 150px"
-      />
-    </div>
-  </q-toolbar>
-
-  <d-table
-    ref="table"
-    :columns="TABLE_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">
-          {{ col.value }}
-        </q-td>
-        <q-td auto-width>
-          <q-btn
-            color="edit"
-            flat
-            dense
-            round
-            class="q-mr-xs"
-            size="12px"
-            icon="edit"
-            clickable
-            @click.stop="
-              () => {
-                dialogStatus = 'edit';
-                dialog = true;
-                prefix = props.row.name;
-                editId = props.row.id;
-              }
-            "
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            color="red"
-            flat
-            dense
-            round
-            size="12px"
-            icon="mdi-delete"
-            clickable
-            @click.stop="
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
-            v-close-popup
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn>
-        </q-td>
-      </q-tr>
-    </template>
-  </d-table>
-
-  <DialogForm
-    v-model:dialog="dialog"
-    v-model:data="prefix"
-    v-model:personalName="personalName"
-    v-model:dialogStatus="dialogStatus"
-    v-model:editId="editId"
-    :addData="addData"
-    :fetch-data="fetchData"
-    :edit-data="editData"
-  />
-</template>

src/modules/01_metadataNew/components/personal/02ListRank.vue

@@ -1,263 +0,0 @@
-<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";
-import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-const columns = [
-  {
-    name: "rank",
-    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" }),
-  },
-] as const satisfies QTableProps["columns"];
-
-const store = usePersonalDataStore();
-const router = useRouter();
-const mixin = useCounterMixin();
-const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
-
-const $q = useQuasar();
-
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const rank = ref<string>("");
-const dialogStatus = ref<string>("");
-const personalName = ref<string>("ยศ");
-const editId = ref<string>("");
-const visibleColumns = ref<string[]>([
-  "rank",
-  "createdAt",
-  "lastUpdatedAt",
-  "lastUpdateFullName",
-]);
-
-async function fetchData() {
-  showLoader();
-  await http
-    .get(config.API.orgRank)
-    .then(async (res) => {
-      store.save(res.data.result);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function addData() {
-  await http
-    .post(config.API.orgRank, {
-      name: rank.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function editData(id: string) {
-  await http
-    .put(config.API.orgRankId(id), {
-      name: rank.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.orgRankId(id))
-    .then(() => {
-      fetchData();
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-onMounted(async () => {
-  fetchData();
-});
-</script>
-
-<template>
-  <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>
-            {{ col.value }}
-          </div>
-        </q-td>
-        <q-td auto-width>
-          <q-btn
-            color="edit"
-            flat
-            dense
-            round
-            class="q-mr-xs"
-            size="12px"
-            icon="edit"
-            clickable
-            @click.stop="
-              () => {
-                dialogStatus = 'edit';
-                dialog = true;
-                rank = props.row.name;
-                editId = props.row.id;
-              }
-            "
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            color="red"
-            flat
-            dense
-            round
-            size="12px"
-            icon="mdi-delete"
-            clickable
-            @click.stop="
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
-            v-close-popup
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn>
-        </q-td>
-      </q-tr>
-    </template>
-  </d-table>
-
-  <DialogForm
-    v-model:dialog="dialog"
-    v-model:data="rank"
-    v-model:personalName="personalName"
-    v-model:dialogStatus="dialogStatus"
-    v-model:editId="editId"
-    :addData="addData"
-    :fetch-data="fetchData"
-    :edit-data="editData"
-  />
-</template>

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

@@ -1,263 +0,0 @@
-<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";
-import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const store = usePersonalDataStore();
-const router = useRouter();
-const mixin = useCounterMixin();
-const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
-const 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" }),
-  },
-] as const satisfies QTableProps["columns"];
-
-const $q = useQuasar();
-
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const editId = ref<string>("");
-const bloodGroup = ref<string>("");
-const dialogStatus = ref<string>("");
-const personalName = ref<string>("กลุ่มเลือด");
-const visibleColumns = ref<string[]>([
-  "bloodGroup",
-  "createdAt",
-  "lastUpdatedAt",
-  "lastUpdateFullName",
-]);
-
-async function fetchData() {
-  showLoader();
-  await http
-    .get(config.API.orgBloodGroup)
-    .then(async (res) => {
-      store.save(res.data.result);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function addData() {
-  await http
-    .post(config.API.orgBloodGroup, {
-      name: bloodGroup.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function editData(id: string) {
-  await http
-    .put(config.API.orgBloodGroupId(id), {
-      name: bloodGroup.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.orgBloodGroupId(id))
-    .then(() => {
-      fetchData();
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-onMounted(async () => {
-  fetchData();
-});
-</script>
-
-<template>
-  <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>
-            {{ col.value }}
-          </div>
-        </q-td>
-        <q-td auto-width>
-          <q-btn
-            color="edit"
-            flat
-            dense
-            round
-            class="q-mr-xs"
-            size="12px"
-            icon="edit"
-            clickable
-            @click.stop="
-              () => {
-                dialogStatus = 'edit';
-                dialog = true;
-                bloodGroup = props.row.name;
-                editId = props.row.id;
-              }
-            "
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            color="red"
-            flat
-            dense
-            round
-            size="12px"
-            icon="mdi-delete"
-            clickable
-            @click.stop="
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
-            v-close-popup
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn>
-        </q-td>
-      </q-tr>
-    </template>
-  </d-table>
-
-  <DialogForm
-    v-model:dialog="dialog"
-    v-model:data="bloodGroup"
-    v-model:personalName="personalName"
-    v-model:dialogStatus="dialogStatus"
-    v-model:editId="editId"
-    :addData="addData"
-    :fetch-data="fetchData"
-    :edit-data="editData"
-  />
-</template>

src/modules/01_metadataNew/components/personal/04ListGender.vue

@@ -1,263 +0,0 @@
-<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";
-import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const store = usePersonalDataStore();
-const router = useRouter();
-const mixin = useCounterMixin();
-const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
-const 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" }),
-  },
-] as const satisfies QTableProps["columns"];
-
-const $q = useQuasar();
-
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const gender = ref<string>("");
-const editId = ref<string>("");
-const dialogStatus = ref<string>("");
-const personalName = ref<string>("เพศ");
-const visibleColumns = ref<string[]>([
-  "gender",
-  "createdAt",
-  "lastUpdatedAt",
-  "lastUpdateFullName",
-]);
-
-async function fetchData() {
-  showLoader();
-  await http
-    .get(config.API.orgGender)
-    .then(async (res) => {
-      store.save(res.data.result);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function addData() {
-  await http
-    .post(config.API.orgGender, {
-      name: gender.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function editData(id: string) {
-  await http
-    .put(config.API.orgGenderId(id), {
-      name: gender.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.orgGenderId(id))
-    .then(() => {
-      fetchData();
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-onMounted(async () => {
-  fetchData();
-});
-</script>
-
-<template>
-  <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>
-            {{ col.value }}
-          </div>
-        </q-td>
-        <q-td auto-width>
-          <q-btn
-            color="edit"
-            flat
-            dense
-            round
-            class="q-mr-xs"
-            size="12px"
-            icon="edit"
-            clickable
-            @click.stop="
-              () => {
-                dialogStatus = 'edit';
-                dialog = true;
-                gender = props.row.name;
-                editId = props.row.id;
-              }
-            "
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            color="red"
-            flat
-            dense
-            round
-            size="12px"
-            icon="mdi-delete"
-            clickable
-            @click.stop="
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
-            v-close-popup
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn>
-        </q-td>
-      </q-tr>
-    </template>
-  </d-table>
-
-  <DialogForm
-    v-model:dialog="dialog"
-    v-model:data="gender"
-    v-model:personalName="personalName"
-    v-model:dialogStatus="dialogStatus"
-    v-model:editId="editId"
-    :addData="addData"
-    :fetch-data="fetchData"
-    :edit-data="editData"
-  />
-</template>

src/modules/01_metadataNew/components/personal/05ListReligion.vue

@@ -1,263 +0,0 @@
-<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";
-import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const store = usePersonalDataStore();
-const router = useRouter();
-const mixin = useCounterMixin();
-const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
-const 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" }),
-  },
-] as const satisfies QTableProps["columns"];
-
-const $q = useQuasar();
-
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const religion = ref<string>("");
-const editId = ref<string>("");
-const dialogStatus = ref<string>("");
-const personalName = ref<string>("ศาสนา");
-const visibleColumns = ref<string[]>([
-  "religion",
-  "createdAt",
-  "lastUpdatedAt",
-  "lastUpdateFullName",
-]);
-
-async function fetchData() {
-  showLoader();
-  await http
-    .get(config.API.orgReligion)
-    .then(async (res) => {
-      store.save(res.data.result);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function addData() {
-  await http
-    .post(config.API.orgReligion, {
-      name: religion.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function editData(id: string) {
-  await http
-    .put(config.API.orgReligionId(id), {
-      name: religion.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.orgReligionId(id))
-    .then(() => {
-      fetchData();
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-onMounted(async () => {
-  fetchData();
-});
-</script>
-
-<template>
-  <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>
-            {{ col.value }}
-          </div>
-        </q-td>
-        <q-td auto-width>
-          <q-btn
-            color="edit"
-            flat
-            dense
-            round
-            class="q-mr-xs"
-            size="12px"
-            icon="edit"
-            clickable
-            @click.stop="
-              () => {
-                dialogStatus = 'edit';
-                dialog = true;
-                religion = props.row.name;
-                editId = props.row.id;
-              }
-            "
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            color="red"
-            flat
-            dense
-            round
-            size="12px"
-            icon="mdi-delete"
-            clickable
-            @click.stop="
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
-            v-close-popup
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn>
-        </q-td>
-      </q-tr>
-    </template>
-  </d-table>
-
-  <DialogForm
-    v-model:dialog="dialog"
-    v-model:data="religion"
-    v-model:personalName="personalName"
-    v-model:dialogStatus="dialogStatus"
-    v-model:editId="editId"
-    :addData="addData"
-    :fetch-data="fetchData"
-    :edit-data="editData"
-  />
-</template>

src/modules/01_metadataNew/components/personal/06ListRelationship.vue

@@ -1,291 +0,0 @@
-<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 { useQuasar } from "quasar";
-import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const store = usePersonalDataStore();
-const router = useRouter();
-const mixin = useCounterMixin();
-const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
-const 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" }),
-  },
-] as const satisfies QTableProps["columns"];
-
-const $q = useQuasar();
-
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const relationship = ref<string>("");
-const dialogStatus = ref<string>("");
-const personalName = ref<string>("สถานภาพ");
-const visibleColumns = ref<string[]>([
-  "relationship",
-  "createdAt",
-  "lastUpdatedAt",
-  "lastUpdateFullName",
-]);
-const editId = ref<string>("");
-const data = [
-  {
-    id: "1",
-    name: "เคยสมรสแต่ไม่ทราบสถานภาพสมรส",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "สาวิตรี ศรีสมัย",
-  },
-  {
-    id: "2",
-    name: "สมรส",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "System Administrator",
-  },
-  {
-    id: "3",
-    name: "แยกกันอยู่",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-  },
-  {
-    id: "4",
-    name: "โสด",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-  },
-];
-
-async function fetchData() {
-  showLoader();
-  await http
-    .get(config.API.orgRelationship)
-    .then(async (res) => {
-      store.save(res.data.result);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function addData() {
-  await http
-    .post(config.API.orgRelationship, {
-      name: relationship.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-async function editData(id: string) {
-  await http
-    .put(config.API.orgRelationshipId(id), {
-      name: relationship.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.orgRelationshipId(id))
-    .then(() => {
-      fetchData();
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-onMounted(async () => {
-  fetchData();
-});
-</script>
-
-<template>
-  <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>
-            {{ col.value }}
-          </div>
-        </q-td>
-        <q-td auto-width>
-          <q-btn
-            color="edit"
-            flat
-            dense
-            round
-            class="q-mr-xs"
-            size="12px"
-            icon="edit"
-            clickable
-            @click.stop="
-              () => {
-                dialogStatus = 'edit';
-                dialog = true;
-                relationship = props.row.name;
-                editId = props.row.id;
-              }
-            "
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            color="red"
-            flat
-            dense
-            round
-            size="12px"
-            icon="mdi-delete"
-            clickable
-            @click.stop="
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
-            v-close-popup
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn>
-        </q-td>
-      </q-tr>
-    </template>
-  </d-table>
-
-  <DialogForm
-    v-model:dialog="dialog"
-    v-model:data="relationship"
-    v-model:personalName="personalName"
-    v-model:dialogStatus="dialogStatus"
-    v-model:editId="editId"
-    :addData="addData"
-    :fetch-data="fetchData"
-    :edit-data="editData"
-  />
-</template>

src/modules/01_metadataNew/components/personal/07ListEducationLevel.vue

@@ -1,279 +0,0 @@
-<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 { useQuasar } from "quasar";
-import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const store = usePersonalDataStore();
-const mixin = useCounterMixin();
-const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
-const columns = [
-  {
-    name: "name",
-    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: "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" }),
-  },
-] as const satisfies QTableProps["columns"];
-
-const $q = useQuasar();
-const editId = ref<string>("");
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const educationLevel = ref<string>("");
-const educationRank = ref<number>();
-const dialogStatus = ref<string>("");
-const personalName = ref<string>("ระดับการศึกษา");
-const visibleColumns = ref<string[]>([
-  "name",
-  "rank",
-  "createdAt",
-  "lastUpdatedAt",
-  "lastUpdateFullName",
-]);
-
-async function fetchData() {
-  showLoader();
-  await http
-    .get(config.API.orgEducationLevel)
-    .then(async (res) => {
-      store.save(res.data.result);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function addData() {
-  await http
-    .post(config.API.orgEducationLevel, {
-      name: educationLevel.value,
-      rank: educationRank.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function editData(id: string) {
-  await http
-    .put(config.API.orgEducationLevelId(id), {
-      name: educationLevel.value,
-      rank: educationRank.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.orgEducationLevelId(id))
-    .then(() => {
-      fetchData();
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-onMounted(async () => {
-  fetchData();
-});
-</script>
-
-<template>
-  <q-toolbar style="padding: 0">
-    <q-btn
-      flat
-      round
-      color="primary"
-      icon="add"
-      @click.stop="
-        () => {
-          dialogStatus = 'create';
-          dialog = true;
-          educationLevel = '';
-          educationRank = undefined;
-        }
-      "
-    >
-      <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>
-            {{ col.value }}
-          </div>
-        </q-td>
-        <q-td auto-width>
-          <q-btn
-            color="edit"
-            flat
-            dense
-            round
-            class="q-mr-xs"
-            size="12px"
-            icon="edit"
-            clickable
-            @click.stop="
-              () => {
-                dialogStatus = 'edit';
-                dialog = true;
-                editId = props.row.id;
-                educationLevel = props.row.name;
-                educationRank = props.row.rank;
-              }
-            "
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            color="red"
-            flat
-            dense
-            round
-            size="12px"
-            icon="mdi-delete"
-            clickable
-            @click.stop="
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
-            v-close-popup
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn>
-        </q-td>
-      </q-tr>
-    </template>
-  </d-table>
-
-  <DialogForm
-    v-model:educationRank="educationRank"
-    v-model:dialog="dialog"
-    v-model:data="educationLevel"
-    v-model:personalName="personalName"
-    v-model:dialogStatus="dialogStatus"
-    v-model:editId="editId"
-    :addData="addData"
-    :fetch-data="fetchData"
-    :edit-data="editData"
-  />
-</template>