ปรับ เครื่องราง

src/modules/07_insignia/components/2_Manage/Tab1.vue

@@ -21,6 +21,7 @@ const DataStore = useInsigniaDataStore();
 
 const modalNote = ref<boolean>(false);
 const modalAdd = ref<boolean>(false);
+const modalEdit = ref<boolean>(false);
 const organization = ref<string>("");
 const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
 const visibleColumns = ref<string[]>([
@@ -255,6 +256,7 @@ const props = defineProps({
 });
 const typeinsignia = ref<number | string>("all");
 const typeinsigniaOptions = reactive<any>([{ id: "all", name: "ทั้งหมด" }]);
+const typeinsigniaValues: Set<number> = new Set();
 onMounted(async () => {
   organizationOptions.value = DataStore.optionsTypeOc;
   organization.value = organizationOptions.value[0].id;
@@ -269,7 +271,7 @@ onMounted(async () => {
         "officer",
         props.tab
       );
-    
+      filtertypeInsignia();
     }
   }
 });
@@ -353,10 +355,10 @@ const addlistperson = async (id: string) => {
   showLoader();
   let data = {
     profileId: id,
-    insigniaId: organization.value,
+    // insigniaId: organization.value,
     insigniaPeriodId: props.roundId,
   };
-  // console.log(data);
+  console.log(data);
   await http
     .post(config.API.insigniaCreate(), data)
     .then(() => {
@@ -387,7 +389,12 @@ const addlistperson = async (id: string) => {
 //   actionModal.value = action;
 //   modalNote.value = true;
 // };
-const clickEdit = () => {
+const clickmodalEdit = () => {
+  modalEdit.value = true;
+  fecthInsignia();
+  fecthInsigniaType();
+};
+const clickSave = () => {
   dialogConfirm(
     $q,
     async () => {
@@ -449,6 +456,52 @@ const listdelete = async () => {
       messageError($q, err);
     });
 };
+const insignia = ref<string>("");
+const insigniaOptions = ref<any>([]);
+const insigniaType = ref<string>("");
+const insigniaTypeOptions = ref<any>([]);
+
+const fecthInsignia = async () => {
+  await http
+    .get(config.API.insignia)
+    .then((res) => {
+      insigniaOptions.value = res.data.result;
+    })
+    .catch((err) => {});
+};
+const fecthInsigniaType = async () => {
+  await http(config.API.insigniaType)
+    .then((res) => {
+      insigniaTypeOptions.value = res.data.result;
+    })
+    .catch((err) => {});
+};
+
+const listinsignia = ref<any>([]);
+const filtertypeInsignia = async () => {
+  listinsignia.value = rows.value;
+  for (const data of listinsignia.value) {
+    const Type = data.insigniaType;
+    if (Type !== null && !typeinsigniaValues.has(Type)) {
+      typeinsigniaOptions.push({
+        id: Type.toString(),
+        name: Type.toString(),
+      });
+      typeinsigniaValues.add(Type);
+    }
+  }
+};
+const searchFilterTable = async () => {
+  if (typeinsignia.value !== undefined && typeinsignia.value !== null) {
+    if (typeinsignia.value === "all") {
+      rows.value = listinsignia.value;
+    } else {
+      rows.value = listinsignia.value.filter(
+        (e) => e.insigniaType === typeinsignia.value
+      );
+    }
+  }
+};
 
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
@@ -519,7 +572,7 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
           :outlined="true"
           :hide-dropdown-icon="false"
           style="min-width: 150px"
-          @update:model-value="changtypeOc"
+          @update:model-value="searchFilterTable"
         />
         <div>
           <q-btn size="md" icon="mdi-download" flat round color="primary">
@@ -648,7 +701,7 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
                       <q-item
                         clickable
                         v-close-popup
-                        @click="clickEdit(props.row)"
+                        @click="clickmodalEdit(props.row)"
                       >
                         <q-item-section
                           style="min-width: 0px"
@@ -814,6 +867,77 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
     </q-card>
   </q-dialog>
 
+  <!-- Edit -->
+  <q-dialog v-model="modalEdit" persistent>
+    <q-card style="width: 450px; max-width: 80vw" class="q-pb-md">
+      <q-toolbar class="q-py-md">
+        <q-toolbar-title class="text-h6"
+          >แก้ไขเครื่องราชฯ ที่ยื่นขอ
+        </q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="modalEdit = false"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator />
+
+      <div class="q-pa-md">
+        <div class="row q-col-gutter-sm">
+          <div class="col">
+            <q-select
+              v-model="insigniaType"
+              label="ประเภทเครื่องราชฯ"
+              dense
+              emit-value
+              map-options
+              :options="insigniaTypeOptions"
+              option-value="id"
+              option-label="name"
+              lazy-rules
+              hide-bottom-space
+              :readonly="false"
+              :borderless="false"
+              :outlined="true"
+              :hide-dropdown-icon="false"
+              style="min-width: 150px"
+              @update:model-value="changtypeOc"
+            />
+          </div>
+          <div class="col">
+            <q-select
+              v-model="insignia"
+              label="ชั้นเครื่องราชฯ"
+              dense
+              emit-value
+              map-options
+              :options="insigniaOptions"
+              option-value="id"
+              option-label="name"
+              lazy-rules
+              hide-bottom-space
+              :readonly="false"
+              :borderless="false"
+              :outlined="true"
+              :hide-dropdown-icon="false"
+              style="min-width: 150px"
+              @update:model-value="changtypeOc"
+            />
+          </div>
+        </div>
+      </div>
+      <q-separator />
+      <div class="q-pa-md">
+        <div class="row justify-end">
+          <q-btn label="บันทึก" @click="clickSave" color="public" />
+        </div>
+      </div>
+    </q-card>
+  </q-dialog>
+
   <!-- note -->
   <q-dialog v-model="modalNote" persistent>
     <q-card style="min-width: 350px">

src/modules/07_insignia/components/2_Manage/Tab2.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, reactive } from "vue";
 import type { QTableProps } from "quasar";
 import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 import http from "@/plugins/http";
@@ -207,6 +207,7 @@ onMounted(async () => {
         "officer",
         props.tab
       );
+      filtertypeInsignia();
     }
   }
 });
@@ -220,23 +221,35 @@ const changtypeOc = () => {
     );
   }
 };
-// const fecthInsigniaAll = async () => {
+
-//   let data: any = [];
+const typeinsignia = ref<number | string>("all");
-//   for (const item of DataStore.optionsTypeOc) {
+const typeinsigniaOptions = reactive<any>([{ id: "all", name: "ทั้งหมด" }]);
-//     await http
+const typeinsigniaValues: Set<number> = new Set();
-//       .get(
+const listinsignia = ref<any>([]);
-//         config.API.insigniaList(props.roundId, item["id"], "officer", props.tab)
+const filtertypeInsignia = async () => {
-//       )
+  listinsignia.value = rows.value;
-//       .then((res) => {
+  for (const data of listinsignia.value) {
-//         // console.log(res);
+    const Type = data.insigniaType;
-//         data.push(res.data.result);
+    if (Type !== null && !typeinsigniaValues.has(Type)) {
-//       })
+      typeinsigniaOptions.push({
-//       .catch((err) => {
+        id: Type.toString(),
-//         console.log(err);
+        name: Type.toString(),
-//       });
+      });
-//   }
+      typeinsigniaValues.add(Type);
-//   console.log(data);
+    }
-// };
+  }
+};
+const searchFilterTable = async () => {
+  if (typeinsignia.value !== undefined && typeinsignia.value !== null) {
+    if (typeinsignia.value === "all") {
+      rows.value = listinsignia.value;
+    } else {
+      rows.value = listinsignia.value.filter(
+        (e) => e.insigniaType === typeinsignia.value
+      );
+    }
+  }
+};
 
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
@@ -278,14 +291,24 @@ const paginationLabel = (start: string, end: string, total: string) => {
           style="min-width: 150px"
           @update:model-value="changtypeOc"
         />
-        <!-- <div>
+        <q-select
-          <q-btn size="md" icon="mdi-download" flat round color="primary">
+          v-model="typeinsignia"
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
+          label="ปรเภทเครื่องราชฯ"
-          </q-btn>
+          dense
-          <q-btn size="12px" flat round color="add" icon="mdi-plus">
+          emit-value
-            <q-tooltip>เพิ่ม</q-tooltip>
+          map-options
-          </q-btn>
+          :options="typeinsigniaOptions"
-        </div> -->
+          option-value="id"
+          option-label="name"
+          lazy-rules
+          hide-bottom-space
+          :readonly="false"
+          :borderless="false"
+          :outlined="true"
+          :hide-dropdown-icon="false"
+          style="min-width: 150px"
+          @update:model-value="searchFilterTable"
+        />
         <q-space />
 
         <q-input

src/modules/07_insignia/components/2_Manage/Tab3.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, reactive } from "vue";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
 import { useInsigniaDataStore } from "@/modules/07_insignia/store";
@@ -206,6 +206,7 @@ onMounted(async () => {
         "officer",
         props.tab
       );
+      filtertypeInsignia();
     }
   }
 });
@@ -220,6 +221,35 @@ const changtypeOc = () => {
   }
 };
 
+const typeinsignia = ref<number | string>("all");
+const typeinsigniaOptions = reactive<any>([{ id: "all", name: "ทั้งหมด" }]);
+const typeinsigniaValues: Set<number> = new Set();
+const listinsignia = ref<any>([]);
+const filtertypeInsignia = async () => {
+  listinsignia.value = rows.value;
+  for (const data of listinsignia.value) {
+    const Type = data.insigniaType;
+    if (Type !== null && !typeinsigniaValues.has(Type)) {
+      typeinsigniaOptions.push({
+        id: Type.toString(),
+        name: Type.toString(),
+      });
+      typeinsigniaValues.add(Type);
+    }
+  }
+};
+const searchFilterTable = async () => {
+  if (typeinsignia.value !== undefined && typeinsignia.value !== null) {
+    if (typeinsignia.value === "all") {
+      rows.value = listinsignia.value;
+    } else {
+      rows.value = listinsignia.value.filter(
+        (e) => e.insigniaType === typeinsignia.value
+      );
+    }
+  }
+};
+
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
 const resetFilter = () => {
@@ -260,14 +290,24 @@ const paginationLabel = (start: string, end: string, total: string) => {
           style="min-width: 150px"
           @update:model-value="changtypeOc"
         />
-        <!-- <div>
+        <q-select
-          <q-btn size="md" icon="mdi-download" flat round color="primary">
+          v-model="typeinsignia"
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
+          label="ปรเภทเครื่องราชฯ"
-          </q-btn>
+          dense
-          <q-btn size="12px" flat round color="add" icon="mdi-plus">
+          emit-value
-            <q-tooltip>เพิ่ม</q-tooltip>
+          map-options
-          </q-btn>
+          :options="typeinsigniaOptions"
-        </div> -->
+          option-value="id"
+          option-label="name"
+          lazy-rules
+          hide-bottom-space
+          :readonly="false"
+          :borderless="false"
+          :outlined="true"
+          :hide-dropdown-icon="false"
+          style="min-width: 150px"
+          @update:model-value="searchFilterTable"
+        />
         <q-space />
 
         <q-input