hrms-mgt/src/modules/18_command/components/Main/DialogFormCommand.vue

<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";

import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

import type { DataListCommand } from "@/modules/18_command/interface/response/Main";

import DialogHeader from "@/components/DialogHeader.vue";

import { useCounterMixin } from "@/stores/mixin";

const $q = useQuasar();
const router = useRouter();
const { dialogConfirm, showLoader, hideLoader, messageError } =
  useCounterMixin();

const modal = defineModel<boolean>("modal", { required: true });
const isCopy = defineModel<boolean>("isCopy", { required: true });

const commandType = ref<string>("");
const commandNo = ref<string>("");
const commandYear = ref<string>("");

const listCommand = ref<DataListCommand[]>([]);
const commandOp = ref<DataListCommand[]>([]);

async function fetchCommandType() {
  showLoader();
  await http
    .get(config.API.commandType)
    .then(async (res) => {
      const data = await res.data.result;
      listCommand.value = data;
      commandOp.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function onSubmit() {
  dialogConfirm($q, () => {
    !isCopy.value && router.push(`/command/edit/1234`);
    console.log(commandNo.value);
    console.log(commandYear.value);
    onClose();
  });
}

function filterSelector(val: string, update: Function, refData: string) {
  switch (refData) {
    case "OrderTypeOption":
      update(() => {
        commandType.value = val ? "" : commandType.value;
        commandOp.value = listCommand.value.filter(
          (v: any) => v.name.indexOf(val) > -1
        );
      });
      break;

    default:
      break;
  }
}

function onClose() {
  modal.value = false;
  commandNo.value = "";
  commandYear.value = "";
}

watch(modal, () => {
  if (modal.value && !isCopy.value) {
    fetchCommandType();
  }
});
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="max-width: 35%">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader
          :tittle="isCopy ? 'ทำสำเนาคำสั่ง' : 'เพิ่มคำสั่ง'"
          :close="onClose"
        />
        <q-separator />
        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-12" v-if="!isCopy">
              <q-select
                class="inputgreen"
                v-model="commandType"
                :label="`${'ประเภทคำสั่ง'}`"
                dense
                emit-value
                map-options
                option-label="name"
                :options="commandOp"
                option-value="id"
                lazy-rules
                use-input
                hide-bottom-space
                outlined
                :rules="[(val) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
                @filter="(inputValue:any,
                    doneFn:Function) => filterSelector(inputValue, doneFn,'OrderTypeOption'
                    ) "
              >
                <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-6">
              <q-input
                class="inputgreen"
                outlined
                dense
                v-model="commandNo"
                hide-bottom-space
                :label="`${'คำสั่งเลขที่'}`"
                :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเลขที่'}`]"
                lazy-rules
              />
            </div>
            <label class="col-1 flex justify-center items-center text-bold"
              >/</label
            >
            <div class="col-5">
              <q-input
                class="inputgreen"
                outlined
                dense
                v-model="commandYear"
                hide-bottom-space
                :label="`${'พ.ศ.'}`"
                mask="####"
                :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
                lazy-rules
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />

        <q-card-actions align="right">
          <q-btn label="บันทึก" color="public" type="submit" />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>