ฟิลเตอร์

src/modules/14_KPI/components/competency/03ListLinkGroup.vue

@@ -23,28 +23,12 @@ const groupName = ref<any>();
 const position = ref<any>(null);
 const competency = ref<any>(null);
 
-const groupNameOp = ref<DataOption[]>([
-  {
-    id: "ID1",
-    name: "กลุ่ม 1",
-  },
-  {
-    id: "ID2",
-    name: "กลุ่ม 2",
-  },
-]);
+const groupNameOp = ref<DataOption[]>([]);
+const groupNameOpMain = ref<DataOption[]>([]);
 const positionOp = ref<DataOption[]>([]);
 const positionMainOp = ref<DataOption[]>([]);
-const competencyOp = ref<DataOption[]>([
-  {
-    id: "ID1",
-    name: "สมรรถนะ 1",
-  },
-  {
-    id: "ID2",
-    name: "สมรรถนะ 2",
-  },
-]);
+const competencyOp = ref<DataOption[]>([]);
+const competencyOpMain = ref<DataOption[]>([]);
 
 const columns = ref<QTableProps["columns"]>([
   {
@@ -143,13 +127,24 @@ async function deleteData(id: string) {
 async function getListGroup() {
   showLoader();
   await http
-    .get(config.API.kpiGroup)
+    .get(config.API.kpiGroup+`?pageSize=50`)
     .then(async (res) => {
-      const data = res.data.result.data;
-      groupNameOp.value = data.map((item: ListGroup) => ({
-        id: item.id,
-        name: item.nameGroupKPI,
-      }));
+      const dataOp = res.data.result.data;
+      const uniqueNames = new Set();
+      const filteredData = dataOp
+        .filter((item: any) => {
+          if (!uniqueNames.has(item.id)) {
+            uniqueNames.add(item.nameGroupKPI);
+            return true;
+          }
+          return false;
+        })
+        .map((item: any) => ({
+          id: item.id,
+          name: item.nameGroupKPI,
+        }));
+
+      groupNameOpMain.value = filteredData;
     })
     .catch((err) => {
       messageError($q, err);
@@ -163,13 +158,24 @@ async function getListGroup() {
 async function getCompetency() {
   showLoader();
   await http
-    .get(config.API.kpiCapacity + `?type=GROUP`)
+    .get(config.API.kpiCapacity + `?type=GROUP&pageSize=50`)
     .then(async (res) => {
-      const data = res.data.result.data;
-      competencyOp.value = data.map((item: any) => ({
-        id: item.id,
-        name: item.name,
-      }));
+      const dataOp = res.data.result.data;
+      const uniqueNames = new Set();
+      const filteredData = dataOp
+        .filter((item: any) => {
+          if (!uniqueNames.has(item.id)) {
+            uniqueNames.add(item.name);
+            return true;
+          }
+          return false;
+        })
+        .map((item: any) => ({
+          id: item.id,
+          name: item.name,
+        }));
+
+      competencyOpMain.value = filteredData;
     })
     .catch((err) => {
       messageError($q, err);
@@ -264,6 +270,20 @@ function getOptions() {
   });
 }
 
+/**
+ * function ต้นหาข้อมูลของ Option
+ * @param val ค่าที่ต้องการฟิลเตอร์
+ * @param update  อัพเดทค่า
+ * @param refData ดาต้าที่ต้องการฟิลเตอร์
+ */
+function filterOptionGroup(val: any, update: Function) {
+  update(() => {
+    groupNameOp.value = groupNameOpMain.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
 /**
  * function ต้นหาข้อมูลของ Option
  * @param val ค่าที่ต้องการฟิลเตอร์
@@ -278,6 +298,20 @@ function filterOption(val: any, update: Function) {
   });
 }
 
+/**
+ * function ต้นหาข้อมูลของ Option
+ * @param val ค่าที่ต้องการฟิลเตอร์
+ * @param update  อัพเดทค่า
+ * @param refData ดาต้าที่ต้องการฟิลเตอร์
+ */
+function filterOptionCompetency(val: any, update: Function) {
+  update(() => {
+    competencyOp.value = competencyOpMain.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
 /**
  * function updatePagination
  * @param newPagination ข้อมูล Pagination ใหม่
@@ -459,7 +493,17 @@ onMounted(async () => {
                 option-label="name"
                 option-value="id"
                 :options="groupNameOp"
-              />
+                use-input
+                @filter="(inputValue:any,doneFn:Function) => filterOptionGroup(inputValue, doneFn) "
+                >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template></q-select
+              >
             </div>
             <div class="col-4">
               <q-select
@@ -499,7 +543,17 @@ onMounted(async () => {
                 option-label="name"
                 option-value="id"
                 :options="competencyOp"
-              />
+                use-input
+                @filter="(inputValue:any,doneFn:Function) => filterOptionCompetency(inputValue, doneFn) "
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template></q-select
+              >
             </div>
           </div>
         </q-card-section>