UI *รอ API สำหรับส่งคนไปออกคำสั่ง PART 2

src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue

@@ -6,15 +6,19 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
+import { useCommandMainStore } from "@/modules/18_command/store/Main";
 
+import type { ListCommand } from "@/modules/18_command/interface/index/Main";
 import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
 import type { OpType } from "@/modules/05_placement/interface/response/Main";
 import type { DataPerson } from "@/modules/11_discipline/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
 
 const $q = useQuasar();
 const route = useRoute();
+const storeCommand = useCommandMainStore();
 const mixin = useCounterMixin();
 const {
   showLoader,
@@ -25,12 +29,18 @@ const {
   dialogMessageNotify,
 } = mixin;
 
+const commandType = ref<string>(""); //ตัวแปรเก็บคำสั่งที่เลือก
+const commandOp = ref<ListCommand[]>([]);
+const listCommand = ref<ListCommand[]>([]); // เก็บคำสั่งทั้งหมด
+
+const modalCommand = ref<boolean>(false);
 const optionsType = ref<[]>([]);
 const idPath = ref<string>(route.params.id as string);
 const type = ref<string>("");
 const rows = ref<DataPerson[]>([]);
 const selected = ref<ResponseData[]>([]);
 
+const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   data: {
     type: Object,
@@ -45,7 +55,6 @@ const props = defineProps({
     type: Array,
     default: [],
   },
-  Modal: Boolean,
   closeModal: Function,
   getData: Function,
   rows2: Array,
@@ -61,16 +70,15 @@ const checkSelected = computed(() => {
 
 //popup ยืนยันส่งัว
 function saveOrder() {
-  if (type.value) {
-    dialogConfirm(
-      $q,
-      () => Ordersave(),
-      `ยืนยัน${props.title}`,
-      `ต้องการยืนยัน${props.title}ใช่หรือไม่?`
-    );
-  } else {
-    dialogMessageNotify($q, "กรุณาเลือกประเภทคำสั่ง");
-  }
+  dialogConfirm(
+    $q,
+    async () => {
+      modalCommand.value = true;
+      modal.value = false;
+    },
+    "ยืนยันส่งไปออกคำสั่ง",
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  );
 }
 //ส่งไปออกคำสั่ง
 async function Ordersave() {
@@ -111,51 +119,50 @@ function Reset() {
   emit("update:filterKeyword2", "");
 }
 
-//----(ดึงข้อมูลประเภทคำสั่ง)------//
-async function fecthTypeOption() {
-  showLoader();
-  await http
-    .get(config.API.typeOrder())
-    .then((res) => {
-      optionsType.value = res.data.result.filter(
-        (e: OpType) =>
-          e.commandCode === "C-PM-19" ||
-          e.commandCode === "C-PM-20" ||
-          e.commandCode === "C-PM-27" ||
-          e.commandCode === "C-PM-28" ||
-          e.commandCode === "C-PM-29" ||
-          e.commandCode === "C-PM-30" ||
-          e.commandCode === "C-PM-31"
-      );
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+/**
+ * ฟิลเตอร์ คำสั่ง
+ * @param val ค่าจาก Input
+ * @param update Funtion quasar
+ */
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    commandType.value = val ? "" : commandType.value;
+    commandOp.value = listCommand.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
 }
 
-watchEffect(() => {
-  if (props.Modal === true) {
-    selected.value = [];
-    type.value = "";
-    rows.value = props.data.persons.filter(
-      (item: any) => item.status === "NEW"
-    );
-  }
-});
-
+/**
+ * เมื่อ props.modal เป็น true
+ * กำหนดให้  selected เป็นค่าว่างและกำหนด filter ประเภทตำแหน่งตามประเภทการสอบ
+ */
 watch(
-  () => props.title,
-  () => {
-    fecthTypeOption();
+  () => modal.value,
+  async () => {
+    if (modal.value === true) {
+      selected.value = [];
+      commandType.value = "";
+      rows.value = props.data.persons ? props.data.persons : [];
+
+      const data = await storeCommand.getCommandTypes();
+      listCommand.value = data.filter(
+        (v: any) =>
+          v.code == "C-PM-19" ||
+          v.code == "C-PM-20" ||
+          v.code == "C-PM-27" ||
+          v.code == "C-PM-28" ||
+          v.code == "C-PM-29" ||
+          v.code == "C-PM-30" ||
+          v.code == "C-PM-31"
+      );
+    }
   }
 );
 </script>
 
 <template>
-  <q-dialog v-model="props.Modal" persistent>
+  <q-dialog v-model="modal" persistent>
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader :tittle="props.title" :close="closeModal" />
       <q-separator />
@@ -164,25 +171,30 @@ watch(
           <div class="col-5">
             <q-toolbar style="padding: 0">
               <q-select
-                outlined
+                v-model="commandType"
                 dense
-                v-model="type"
-                :options="optionsType"
+                outlined
                 label="ประเภทคำสั่ง"
-                style="width: 400px; max-width: auto"
+                :options="commandOp"
+                option-label="name"
+                option-value="code"
                 emit-value
                 map-options
-                option-label="name"
-                option-value="id"
                 use-input
-                ><template v-slot:no-option>
+                style="width: 350px; max-width: auto"
+                @update:model-value="selected = []"
+                @filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn
+                    ) "
+              >
+                <template v-slot:no-option>
                   <q-item>
                     <q-item-section class="text-grey">
                       ไม่มีข้อมูล
                     </q-item-section>
                   </q-item>
-                </template>
-              </q-select>
+                </template></q-select
+              >
             </q-toolbar>
           </div>
 
@@ -241,6 +253,7 @@ watch(
               keep-color
               color="primary"
               dense
+              :disable="commandType"
               v-model="scope.selected"
             />
           </template>
@@ -251,6 +264,7 @@ watch(
                   keep-color
                   color="primary"
                   dense
+                  :disable="commandType"
                   v-model="props.selected"
                 />
               </q-td>
@@ -280,10 +294,17 @@ watch(
         <q-btn
           :label="props.title"
           @click="saveOrder"
-          :disable="checkSelected"
+          :disable="selected.length === 0"
           color="public"
         />
       </q-card-actions>
     </q-card>
   </q-dialog>
+
+  <!-- dialog สร้างคำสั่ง -->
+  <DialogCreateCommand
+    v-model:modal="modalCommand"
+    :command-type-code="commandType"
+    :persons-id="selected.map((r:any) => r.id)"
+  />
 </template>