popup "แก้ไขสถานะการเข้า-ออกงาน

src/modules/09_leave/components/1_Work/DialogEdit.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import type { DataOption } from "@/modules/09_leave/interface/index/Main";
+
+import HeaderDialog from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, success } = mixin;
+
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    require: true,
+  },
+  detail: {
+    type: Object,
+    require: true,
+  },
+  close: {
+    type: Function,
+    require: true,
+  },
+});
+
+const morningStatus = ref<string>("");
+const afternoonStatus = ref<string>("");
+const reason = ref<string>("");
+
+const morningStatusRef = ref<any>();
+const afternoonStatusRef = ref<any>();
+
+const optionsMain = ref<DataOption[]>([
+  { id: "NORMAL", name: "ปกติ" },
+  { id: "LATE", name: "สาย" },
+  { id: "ABSENT", name: "ขาดราชการ" },
+]);
+const options = ref<DataOption[]>(optionsMain.value);
+
+async function onClickSave() {
+  morningStatusRef.value?.validate();
+  afternoonStatusRef.value?.validate();
+  if (!morningStatusRef.value.hasError && !afternoonStatusRef.value.hasError) {
+    const body = {
+      morningStatus: morningStatus.value,
+      afternoonStatus: afternoonStatus.value,
+      reason: reason.value,
+    };
+    dialogConfirm($q, async () => {
+      console.log(body);
+
+      success($q, "บันทึกข้อมูสำเร็จ");
+      props.close?.();
+    });
+  }
+}
+
+function filterFnOptions(val: any, update: Function) {
+  update(() => {
+    options.value = optionsMain.value.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+watch(
+  () => props.modal,
+  () => {
+    props.modal &&
+      ((morningStatus.value = ""),
+      (afternoonStatus.value = ""),
+      (reason.value = ""));
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="props.modal">
+    <q-card class="column" style="width: 300px">
+      <HeaderDialog :tittle="'แก้ไขสถานะการเข้า-ออกงาน'" :close="props.close" />
+
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <q-card flat bordered class="col-12 q-mt-sm">
+          <div class="q-pa-sm text-green">
+            สถานะช่วงเช้า
+            <q-select
+              ref="morningStatusRef"
+              class="q-pa-sm"
+              dense
+              outlined
+              v-model="morningStatus"
+              :options="options"
+              label="สถานะ"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              :rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
+              hide-bottom-space
+              use-input
+              @filter="(inputValue: any,doneFn: Function) => filterFnOptions(inputValue, doneFn)"
+              ><template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template></q-select
+            >
+          </div>
+        </q-card>
+        <q-card flat bordered class="col-12 q-mt-sm">
+          <div class="q-pa-sm text-green">
+            สถานะช่วงบ่าย
+            <q-select
+              ref="afternoonStatusRef"
+              class="q-pa-sm"
+              dense
+              outlined
+              v-model="afternoonStatus"
+              :options="options"
+              label="สถานะ"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              :rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
+              hide-bottom-space
+              use-input
+              @filter="(inputValue: any,doneFn: Function) => filterFnOptions(inputValue, doneFn)"
+              ><template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template></q-select
+            >
+          </div>
+        </q-card>
+
+        <q-card flat class="col-12 q-mt-sm">
+          <q-input
+            outlined
+            dense
+            v-model="reason"
+            type="textarea"
+            label="เหตุผล"
+          />
+        </q-card>
+      </q-card-section>
+
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn dense color="secondary" label="บันทึก" @click="onClickSave" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>