fix: move menuList To Store

src/components/DialogDebug.vue

@@ -17,11 +17,9 @@ import DialogHeader from "@/components/DialogHeader.vue";
 const $q = useQuasar();
 const store = usePositionKeycloakStore();
 const dataStore = useDataStore();
-const { menuData } = storeToRefs(store);
 const { findOrgName } = store;
-const { dataprofilePosition } = storeToRefs(dataStore);
+const { dataprofilePosition, menuList } = storeToRefs(dataStore);
 
-// const { menuList } = storeToRefs(useMenuDataStore());
 const { dialogConfirm, showLoader, hideLoader, messageError, success } =
   useCounterMixin();
 
@@ -37,7 +35,7 @@ interface OptionSelect {
 const title = computed(() => "แจ้งปัญหาการใช้งานระบบ");
 const orgName = computed(() => findOrgName(dataprofilePosition.value) || "");
 const optionData = computed(() => {
-  return menuData.value.map((menu: MenuMainList) => ({
+  return menuList.value.map((menu: MenuMainList) => ({
     label: menu.title,
     value: menu.title,
   }));

src/modules/01_dashboard/views/Dashboard.vue

@@ -30,125 +30,6 @@ const inboxList = ref<InboxDetail[]>([]); // รายการกล่อง
 const idInboxActive = ref<string>(); // Id ข้อความที่เลือก
 const isLoadingInbox = ref<boolean>(true); // สถานะการโหลดกล่องข้อความ
 
-// รายการเมนูหลักของระบบ
-const filteredItems = computed(() => {
-  const isOfficer = dataStore.officerType === "OFFICER";
-  const conditions: Record<string, boolean> = {
-    ทดลองปฏิบัติหน้าที่ราชการ: dataStore.isProbation,
-    ประเมินบุคคล: isOfficer,
-    ผลงาน: isOfficer,
-    ขอโอน: isOfficer,
-    "ผู้ขอรับการประเมิน (KPI)": isOfficer,
-    "ผู้ประเมิน (KPI)": isOfficer,
-    "ทุนการศึกษา/ฝึกอบรม": isOfficer,
-    การพัฒนารายบุคคล: isOfficer,
-  };
-
-  const data = items.value.filter((item) => conditions[item.title] ?? true);
-  positionKeycloakStore.menuData = data;
-  return data;
-});
-
-const items = ref<MenuMainList[]>([
-  {
-    icon: "mdi-account-group-outline",
-    title: "แผนผังองค์กร",
-    sub: "ดูแผนผังองค์กร",
-    // color: "blue-3",
-    color: "grey-3",
-    path: "/organization-chart",
-    active: false,
-  },
-  {
-    icon: "mdi-clipboard-account-outline",
-    title: "ทะเบียนประวัติ",
-    sub: "ข้อมูลทะเบียนประวัติ",
-    color: "blue-4",
-    path: "/registry",
-    active: false,
-  },
-  {
-    icon: "mdi-clipboard-account-outline",
-    title: "ประเมินบุคคล",
-    sub: "ข้อมูลการประเมินบุคคล",
-    color: "lime-4",
-    path: "/evaluate",
-    active: false,
-  },
-  {
-    icon: "mdi-calendar-account-outline",
-    title: "การลา",
-    sub: "ดู/ลงเวลา ทำเรื่องลา",
-    color: "cyan-3",
-    path: "/leave",
-    active: false,
-  },
-  {
-    icon: "mdi-folder-account-outline",
-    title: "ผลงาน",
-    sub: "ดูผลงาน",
-    color: "light-green-3",
-    path: "/portfolio",
-    active: false,
-  },
-  {
-    icon: "mdi-account-arrow-right-outline",
-    title: "ขอโอน",
-    sub: "ทำเรื่องขอโอนย้าย",
-    color: "deep-purple-3",
-    path: "/transfer",
-    active: false,
-  },
-  {
-    icon: "mdi-scale-balance",
-    title: "อุทธรณ์/ร้องทุกข์",
-    sub: "ทำเรื่องขออุทธรณ์ หรือร้องทุกข์",
-    color: "green-3",
-    path: "/appeal-complain",
-    active: false,
-  },
-  {
-    icon: "mdi-account-box-outline",
-    title: "ผู้ขอรับการประเมิน (KPI)",
-    sub: "ประเมินผลการปฏิบัติหน้าที่ราชการ",
-    color: "red-2",
-    path: "/KPI",
-    active: false,
-  },
-  {
-    icon: "mdi-elevator",
-    title: "ผู้ประเมิน (KPI)",
-    sub: "ประเมินผลการปฏิบัติหน้าที่ราชการ",
-    color: "red-2",
-    path: "/KPI-evaluator",
-    active: false,
-  },
-  {
-    icon: "mdi-school",
-    title: "ทุนการศึกษา/ฝึกอบรม",
-    sub: "รายการทุนการศึกษา/ฝึกอบรม",
-    color: "teal-2",
-    path: "/scholarship",
-    active: false,
-  },
-  {
-    icon: "mdi-human-handsup",
-    title: "การพัฒนารายบุคคล",
-    sub: "Individual Development Plan",
-    color: "orange-3",
-    path: "/IDP",
-    active: false,
-  },
-  {
-    icon: "mdi-poll",
-    title: "ทดลองปฏิบัติหน้าที่ราชการ",
-    sub: "ผลการทดลองปฏิบัติหน้าที่ราชการและแบบสำรวจความคิดเห็น",
-    color: "yellow-3",
-    path: "/probation-report",
-    active: false,
-  },
-]);
-
 /**
  * ฟังก์ชั่นดึงข้อมูลกล่องข้อความ
  * @param index หน้าที่โหลดข้อมูล
@@ -296,7 +177,7 @@ onMounted(async () => {
       <div class="row justify-start q-col-gutter-md">
         <div
           class="col-xs-6 col-sm-4 col-md-4 col-lg-3 col-xl-2 row"
-          v-for="(item, j) in filteredItems"
+          v-for="(item, j) in dataStore.menuList"
           :key="j"
         >
           <q-card v-if="dataStore.isLoadingMenu" bordered class="col-12">

src/stores/data.ts

@@ -7,6 +7,7 @@ import { useQuasar } from "quasar";
 import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
 import { useCounterMixin } from "./mixin";
 import type { ProfileData, DataProfile } from "@/interface/Main";
+import type { MenuMainList } from "@/modules/01_dashboard/interface/Main";
 
 export const useDataStore = defineStore("dataMain", () => {
   const isLoadingMenu = ref<boolean>(false);
@@ -154,6 +155,127 @@ export const useDataStore = defineStore("dataMain", () => {
     return convertEmType(officerType.value);
   }
 
+  // รายการเมนูหลักของระบบ
+  const menuDataMain = ref<MenuMainList[]>([
+    {
+      icon: "mdi-account-group-outline",
+      title: "แผนผังองค์กร",
+      sub: "ดูแผนผังองค์กร",
+      // color: "blue-3",
+      color: "grey-3",
+      path: "/organization-chart",
+      active: false,
+    },
+    {
+      icon: "mdi-clipboard-account-outline",
+      title: "ทะเบียนประวัติ",
+      sub: "ข้อมูลทะเบียนประวัติ",
+      color: "blue-4",
+      path: "/registry",
+      active: false,
+    },
+    {
+      icon: "mdi-clipboard-account-outline",
+      title: "ประเมินบุคคล",
+      sub: "ข้อมูลการประเมินบุคคล",
+      color: "lime-4",
+      path: "/evaluate",
+      active: false,
+    },
+    {
+      icon: "mdi-calendar-account-outline",
+      title: "การลา",
+      sub: "ดู/ลงเวลา ทำเรื่องลา",
+      color: "cyan-3",
+      path: "/leave",
+      active: false,
+    },
+    {
+      icon: "mdi-folder-account-outline",
+      title: "ผลงาน",
+      sub: "ดูผลงาน",
+      color: "light-green-3",
+      path: "/portfolio",
+      active: false,
+    },
+    {
+      icon: "mdi-account-arrow-right-outline",
+      title: "ขอโอน",
+      sub: "ทำเรื่องขอโอนย้าย",
+      color: "deep-purple-3",
+      path: "/transfer",
+      active: false,
+    },
+    {
+      icon: "mdi-scale-balance",
+      title: "อุทธรณ์/ร้องทุกข์",
+      sub: "ทำเรื่องขออุทธรณ์ หรือร้องทุกข์",
+      color: "green-3",
+      path: "/appeal-complain",
+      active: false,
+    },
+    {
+      icon: "mdi-account-box-outline",
+      title: "ผู้ขอรับการประเมิน (KPI)",
+      sub: "ประเมินผลการปฏิบัติหน้าที่ราชการ",
+      color: "red-2",
+      path: "/KPI",
+      active: false,
+    },
+    {
+      icon: "mdi-elevator",
+      title: "ผู้ประเมิน (KPI)",
+      sub: "ประเมินผลการปฏิบัติหน้าที่ราชการ",
+      color: "red-2",
+      path: "/KPI-evaluator",
+      active: false,
+    },
+    {
+      icon: "mdi-school",
+      title: "ทุนการศึกษา/ฝึกอบรม",
+      sub: "รายการทุนการศึกษา/ฝึกอบรม",
+      color: "teal-2",
+      path: "/scholarship",
+      active: false,
+    },
+    {
+      icon: "mdi-human-handsup",
+      title: "การพัฒนารายบุคคล",
+      sub: "Individual Development Plan",
+      color: "orange-3",
+      path: "/IDP",
+      active: false,
+    },
+    {
+      icon: "mdi-poll",
+      title: "ทดลองปฏิบัติหน้าที่ราชการ",
+      sub: "ผลการทดลองปฏิบัติหน้าที่ราชการและแบบสำรวจความคิดเห็น",
+      color: "yellow-3",
+      path: "/probation-report",
+      active: false,
+    },
+  ]);
+
+  // กรองเมนู ตามประเภทบุคลากร
+  const menuList = computed(() => {
+    const isOfficer = officerType.value === "OFFICER";
+    const conditions: Record<string, boolean> = {
+      ทดลองปฏิบัติหน้าที่ราชการ: isProbation.value,
+      ประเมินบุคคล: isOfficer,
+      ผลงาน: isOfficer,
+      ขอโอน: isOfficer,
+      "ผู้ขอรับการประเมิน (KPI)": isOfficer,
+      "ผู้ประเมิน (KPI)": isOfficer,
+      "ทุนการศึกษา/ฝึกอบรม": isOfficer,
+      การพัฒนารายบุคคล: isOfficer,
+    };
+
+    const data = menuDataMain.value.filter(
+      (item: MenuMainList) => conditions[item.title] ?? true,
+    );
+    return data;
+  });
+
   return {
     count,
     doubleCount,
@@ -181,6 +303,8 @@ export const useDataStore = defineStore("dataMain", () => {
     dataprofilePosition,
     isLoadingMenu,
     isLoadingProfile,
+
+    menuList,
   };
 });
 

src/stores/positionKeycloak.ts

@@ -1,9 +1,6 @@
-import { ref } from "vue";
 import { defineStore } from "pinia";
 
 export const usePositionKeycloakStore = defineStore("positionKeycloak", () => {
-  const menuData = ref<any[]>([]);
-
   function findOrgName(obj: any) {
     if (obj) {
       let name =
@@ -52,5 +49,5 @@ export const usePositionKeycloakStore = defineStore("positionKeycloak", () => {
     }
   }
 
-  return { findOrgName, menuData };
+  return { findOrgName };
 });