From 4ab7c4abb2386724d7c63858dd508924e7ce1583 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Mon, 6 Nov 2023 15:08:36 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20ui=20pop=20up=20=E0=B8=AD=E0=B8=99=E0=B8=B8=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=84=E0=B8=B3=E0=B8=82=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../4_specialTime/DialogApprove.vue           | 428 ++++++++++++++++++
 .../interface/response/specialTime.ts         |  16 +-
 .../09_leave/stores/SpecialTimeStore.ts       |   4 +
 .../09_leave/views/SpecialTimeMain.vue        | 109 +++--
 4 files changed, 498 insertions(+), 59 deletions(-)
 create mode 100644 src/modules/09_leave/components/4_specialTime/DialogApprove.vue

diff --git a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
new file mode 100644
index 000000000..546748699
--- /dev/null
+++ b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
@@ -0,0 +1,428 @@
+<script setup lang="ts">
+import { ref, reactive, watchEffect, watch } from "vue";
+import type {
+  dataRowRound,
+  MyObjectRoundRef,
+} from "@/modules/09_leave/interface/response/specialTime";
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
+
+const SpecialTimeStore = useSpecialTimeStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, date2Thai } = mixin;
+const currentDate = ref<Date | null>(new Date());
+const startTimeMorningRef = ref<Object | null>(null);
+const endTimeMorningRef = ref<Object | null>(null);
+const startTimeAfternoonRef = ref<Object | null>(null);
+const endTimeAfternoonRef = ref<Object | null>(null);
+
+const formData = reactive<dataRowRound>({
+  startTimeMorning: "",
+  endTimeMorning: "",
+  startTimeAfternoon: "",
+  endTimeAfternoon: "",
+  note: "",
+});
+
+const objectRound: MyObjectRoundRef = {
+  startTimeMorning: startTimeMorningRef,
+  endTimeMorning: endTimeMorningRef,
+  startTimeAfternoon: startTimeAfternoonRef,
+  endTimeAfternoon: endTimeAfternoonRef,
+};
+
+function validateForm() {
+  const hasError = [];
+  for (const key in objectRound) {
+    if (Object.prototype.hasOwnProperty.call(objectRound, key)) {
+      const property = objectRound[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  } else {
+    console.log(hasError);
+  }
+}
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      props.closeDialog?.();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+const props = defineProps({
+  modal: { type: Boolean, default: "" },
+  editCheck: { type: String, default: "" },
+  date: { type: String, default: "" },
+  dateFix: { type: String, default: "" },
+  closeDialog: { type: Function, default: () => {} },
+  detailData: Object,
+});
+
+function close() {
+  if (props.closeDialog) {
+    props.closeDialog();
+  }
+}
+watch(
+  () => props.modal,
+  (newDetailData, oldDetailData) => {
+    if (props.editCheck === "APPROVE") {
+      formData.startTimeMorning = "";
+      formData.endTimeMorning = "";
+      formData.startTimeAfternoon = "";
+      formData.endTimeAfternoon = "";
+      formData.note = "";
+    } else if (props.editCheck === "PENDING") {
+      if (props.detailData) {
+        formData.startTimeMorning = props.detailData.startTimeMorning;
+        formData.endTimeMorning = props.detailData.endTimeMorning;
+        formData.startTimeAfternoon = props.detailData.startTimeAfternoon;
+        formData.endTimeAfternoon = props.detailData.endTimeAfternoon;
+        formData.note = props.detailData.note;
+      }
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="min-width: 350px" class="bg-grey-11">
+      <form @submit.prevent="validateForm">
+        <DialogHeader
+          :tittle="
+            props.editCheck === 'PENDING'
+              ? 'อนุมัติคำขอ'
+              : props.detailData
+              ? `REJECT ${props.detailData.round}`
+              : ''
+          "
+          :close="close"
+        />
+        <q-separator color="grey-4" />
+        <q-card-section style="max-height: 50vh" class="scroll q-pa-none">
+          <div
+            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+          >
+            <div>
+              <q-card class="my-card bg-primary text-white">
+                <div>
+                  <q-card-section class="border-primary">
+                    <div class="text center">เวลาที่กรอก</div>
+                  </q-card-section>
+                </div>
+                <q-separator dark />
+                <div>
+                  <q-card-actions
+                    class="my-card bg-white text-black border-primary"
+                  >
+                    {{ props.date }}
+                  </q-card-actions>
+                </div>
+              </q-card>
+            </div>
+          </div>
+
+          <div
+            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+          >
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="props.dateFix"
+              :locale="'th'"
+              autoApply
+              :enableTimePicker="false"
+              week-start="0"
+              disabled
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  for="selectDate"
+                  dense
+                  outlined
+                  readonly
+                  lazy-rules
+                  :model-value="props.dateFix"
+                  hide-bottom-space
+                  :label="`${'วันที่ขอแก้ไข'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="event" class="cursor-pointer text-primary">
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div
+            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+          >
+            <p style="color: #06884d; font-size: 16px">ครึ่งเช้า</p>
+            <div class="row justify-between q-my-sm items-start">
+              <p class="q-ma-none mt">เวลาเข้างาน</p>
+              <q-input
+                ref="startTimeMorningRef"
+                class="inputgreen"
+                dense
+                lazy-rules
+                borderless
+                outlined
+                v-model="formData.startTimeMorning"
+                :rules="[
+                  (val) => !!val || 'กรุณากรอกเวลาเข้างาน',
+                  (val) => {
+                    if (val && formData.endTimeMorning) {
+                      if (val > formData.endTimeMorning) {
+                        return 'ต้องน้อยกว่าเวลาออกงาน';
+                      }
+                      if (
+                        val >= formData.startTimeAfternoon &&
+                        val <= formData.endTimeAfternoon
+                      ) {
+                        return 'ช่วงเวลาทับซ้อนกับช่วงบ่าย';
+                      }
+                      if (val === formData.endTimeMorning) {
+                        return 'เวลาเข้างานช่วงเช้าต้องไม่ซ้ำกับออกงานเช้า';
+                      }
+                    }
+                    return true;
+                  },
+                ]"
+                hide-bottom-space
+                type="time"
+                style="width: 140px"
+              />
+            </div>
+            <q-separator inset />
+            <div class="row items-start q-my-sm justify-between">
+              <p class="q-ma-none mt">เวลาออกงาน</p>
+              <q-input
+                ref="endTimeMorningRef"
+                class="inputgreen"
+                dense
+                v-model="formData.endTimeMorning"
+                lazy-rules
+                borderless
+                outlined
+                :rules="[
+                  (val) => !!val || 'กรุณากรอกเวลาออกงาน',
+                  (val) => {
+                    if (val && formData.startTimeMorning) {
+                      if (val < formData.startTimeMorning) {
+                        return 'ต้องมากกว่าเวลาเข้างาน';
+                      }
+                      if (
+                        val >= formData.startTimeAfternoon &&
+                        val <= formData.endTimeAfternoon
+                      ) {
+                        return 'ช่วงเวลาทับซ้อนกับช่วงบ่าย';
+                      }
+                      if (val === formData.startTimeMorning) {
+                        return 'เวลาออกงานช่วงเช้าต้องไม่ซ้ำกับเข้างานเช้า';
+                      }
+                    }
+                    return true;
+                  },
+                ]"
+                hide-bottom-space
+                type="time"
+                style="width: 140px"
+              />
+            </div>
+          </div>
+          <div
+            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+          >
+            <p style="color: #06884d; font-size: 16px">ครึ่งบ่าย</p>
+            <div class="row justify-between q-my-sm items-start">
+              <p class="q-ma-none mt">เวลาเข้างาน</p>
+              <q-input
+                ref="startTimeAfternoonRef"
+                :rules="[
+                  (val) => !!val || 'กรุณากรอกเวลาเข้างาน',
+                  (val) => {
+                    if (val && formData.endTimeAfternoon) {
+                      if (val > formData.endTimeAfternoon) {
+                        return 'ต้องน้อยกว่าเวลาออกงาน';
+                      }
+                      if (
+                        val >= formData.startTimeMorning &&
+                        val <= formData.endTimeMorning
+                      ) {
+                        return 'ช่วงเวลาทับซ้อนกับช่วงเช้า';
+                      }
+                      if (val === formData.endTimeAfternoon) {
+                        return 'เวลาเข้างานช่วงบ่ายต้องไม่ซ้ำกับออกงานช่วงบ่าย';
+                      }
+                    }
+                    return true;
+                  },
+                ]"
+                class="inputgreen"
+                dense
+                lazy-rules
+                borderless
+                v-model="formData.startTimeAfternoon"
+                hide-bottom-space
+                type="time"
+                outlined
+                style="width: 140px"
+              />
+            </div>
+            <q-separator inset />
+            <div class="row items-start q-my-sm justify-between">
+              <p class="q-ma-none mt">เวลาออกงาน</p>
+              <q-input
+                ref="endTimeAfternoonRef"
+                :rules="[
+                  (val) => !!val || 'กรุณากรอกเวลาออกงาน',
+                  (val) => {
+                    if (val && formData.startTimeAfternoon) {
+                      if (val < formData.startTimeAfternoon) {
+                        return 'ต้องมากกว่าเวลาเข้างาน';
+                      }
+                      if (
+                        val >= formData.startTimeMorning &&
+                        val <= formData.endTimeMorning
+                      ) {
+                        return 'ช่วงเวลาทับซ้อนกับช่วงเช้า';
+                      }
+                      if (val === formData.startTimeAfternoon) {
+                        return 'เวลาออกงานช่วงบ่ายต้องไม่ซ้ำกับเข้างานช่วงบ่าย';
+                      }
+                    }
+                    return true;
+                  },
+                ]"
+                class="inputgreen"
+                dense
+                v-model="formData.endTimeAfternoon"
+                lazy-rules
+                borderless
+                hide-bottom-space
+                type="time"
+                outlined
+                style="width: 140px"
+              />
+            </div>
+          </div>
+          <q-input
+            class="col-12 bg-white q-ma-md"
+            outlined
+            stack-label
+            v-model="formData.note"
+            label="เหตุผล"
+            hide-bottom-space
+            type="textarea"
+          ></q-input>
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <div class="q-pa-xs">
+          <div class="row justify-end">
+            <q-btn
+              dense
+              unelevated
+              label="บันทึก"
+              color="public"
+              id="onSubmit"
+              type="submit"
+              class="q-px-md"
+            >
+              <!-- icon="mdi-content-save-outline" -->
+              <q-tooltip>บันทึก</q-tooltip>
+            </q-btn>
+          </div>
+        </div>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.mt {
+  margin-top: 10px;
+}
+.border_custom {
+  border-radius: 6px !important;
+  border: 1px solid #e1e1e1;
+}
+$toggle-background-color-on: #06884d;
+$toggle-background-color-off: darkgray;
+$toggle-control-color: white;
+$toggle-width: 40px;
+$toggle-height: 25px;
+$toggle-gutter: 3px;
+$toggle-radius: 50%;
+$toggle-control-speed: 0.15s;
+$toggle-control-ease: ease-in;
+
+// These are our computed variables
+// change at your own risk.
+$toggle-radius: $toggle-height / 2;
+$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
+
+.toggle-control {
+  display: block;
+  position: relative;
+  papproveing-left: $toggle-width;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  user-select: none;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: $toggle-background-color-on;
+
+    &:after {
+      left: $toggle-width - $toggle-control-size - $toggle-gutter;
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: -7px;
+    left: -15px;
+    height: $toggle-height;
+    width: $toggle-width;
+    border-radius: $toggle-radius;
+    background-color: $toggle-background-color-off;
+    transition: background-color $toggle-control-speed $toggle-control-ease;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: $toggle-gutter;
+      top: $toggle-gutter;
+      width: $toggle-control-size;
+      height: $toggle-control-size;
+      border-radius: $toggle-radius;
+      background: $toggle-control-color;
+      transition: left $toggle-control-speed $toggle-control-ease;
+    }
+  }
+}
+</style>
diff --git a/src/modules/09_leave/interface/response/specialTime.ts b/src/modules/09_leave/interface/response/specialTime.ts
index fa2d52ffe..a1ad43572 100644
--- a/src/modules/09_leave/interface/response/specialTime.ts
+++ b/src/modules/09_leave/interface/response/specialTime.ts
@@ -7,4 +7,18 @@ interface DataRows {
   timeAfternoon: string;
   status: string;
 }
-export type { DataRows };
+interface dataRowRound {
+  startTimeMorning: string;
+  endTimeMorning: string;
+  startTimeAfternoon: string;
+  endTimeAfternoon: string;
+  note: string;
+}
+interface MyObjectRoundRef {
+  startTimeMorning: object | null;
+  endTimeMorning: object | null;
+  startTimeAfternoon: object | null;
+  endTimeAfternoon: object | null;
+  [key: string]: any;
+}
+export type { DataRows, dataRowRound, MyObjectRoundRef };
diff --git a/src/modules/09_leave/stores/SpecialTimeStore.ts b/src/modules/09_leave/stores/SpecialTimeStore.ts
index fa33244b1..dab9019cc 100644
--- a/src/modules/09_leave/stores/SpecialTimeStore.ts
+++ b/src/modules/09_leave/stores/SpecialTimeStore.ts
@@ -26,6 +26,10 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
         e.startTimeAfternoon == null
           ? "-"
           : e.startTimeAfternoon + " - " + e.endTimeAfternoon,
+      startTimeMorning: e.startTimeMorning,
+      endTimeMorning: e.endTimeMorning,
+      startTimeAfternoon: e.startTimeAfternoon,
+      endTimeAfternoon: e.endTimeAfternoon,
       status: e.status,
     }));
     rows.value = datalist;
diff --git a/src/modules/09_leave/views/SpecialTimeMain.vue b/src/modules/09_leave/views/SpecialTimeMain.vue
index 1dd3d8bdc..e5500531d 100644
--- a/src/modules/09_leave/views/SpecialTimeMain.vue
+++ b/src/modules/09_leave/views/SpecialTimeMain.vue
@@ -5,6 +5,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
 import DialogReason from "@/components/Dialogs/PopupReason.vue";
+import DialogApprove from "@/modules/09_leave/components/4_specialTime/DialogApprove.vue";
 
 import { useRouter } from "vue-router";
 const dataSpecialTime = useSpecialTimeStore();
@@ -14,6 +15,9 @@ const mixin = useCounterMixin();
 const router = useRouter();
 const { hideLoader, monthYear2Thai } = mixin;
 const modalUnapprove = ref(false);
+const modalApprove = ref(false);
+const detailData = ref<any>();
+const editCheck = ref<string>("");
 const pagination = ref({
   // sortBy: "desc",
   descending: false,
@@ -22,14 +26,28 @@ const pagination = ref({
 });
 const dialogTitle = ref<string>("");
 const dialogDesc = ref<string>("");
-const name = ref("");
+const name = ref<string>("");
+const dateDialog = ref<string>("");
+const dateFixDialog = ref<string>("");
 const unapprove = async (fullname: string) => {
   dialogTitle.value = " ไม่อนุมัติการลงเวลาพิเศษของ" + fullname;
   name.value = fullname;
   modalUnapprove.value = true;
 };
-const closeReason = () => {
+function openModal(data: any, check: string, date: string, dateFix: string) {
+  modalApprove.value = true;
+  dateDialog.value = date;
+  dateFixDialog.value = dateFix;
+  editCheck.value = check;
+  if (check === "PENDING") {
+    detailData.value = data;
+  }
+  console.log(data);
+}
+const closeDialog = () => {
   modalUnapprove.value = false;
+  modalApprove.value = false;
+  editCheck.value = "PENDING";
 };
 const clickSave = () => {
   modalUnapprove.value = false;
@@ -221,77 +239,52 @@ const monthYearThai = (val: any) => {
                 class="q-px-md q-ml-sm"
                 dense
                 unelevated
+                @click="
+                  openModal(
+                    props.row,
+                    'PENDING',
+                    props.row.date,
+                    props.row.dateFix
+                  )
+                "
                 >อนุมัติ</q-btn
               >
-
-              <q-badge v-if="props.row.status == 'APPROVE'" rounded outline color="green" label="อนุมัติ" />
-              <q-badge v-if="props.row.status == 'REJECT'" rounded outline color="red" label="ไม่อนุมัติ" />
+              <q-badge
+                v-if="props.row.status == 'APPROVE'"
+                rounded
+                outline
+                color="green"
+                label="อนุมัติ"
+              />
+              <q-badge
+                v-if="props.row.status == 'REJECT'"
+                rounded
+                outline
+                color="red"
+                label="ไม่อนุมัติ"
+              />
             </q-td>
           </q-tr>
         </template>
       </d-table>
-
-      <!-- <Table
-        style="max-height: 80vh"
-        :rows="dataSpecialTime.rows"
-        :columns="dataSpecialTime.columns"
-        :filter="filter"
-        :visible-columns="dataSpecialTime.visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="dataSpecialTime.visibleColumns"
-        :pagination="initialPagination"
-        :nornmalData="true"
-        :paging="true"
-        :titleText="''"
-      >
-        <template #columns="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
-              </div>
-              <div v-else>
-                {{ col.value }}
-              </div>
-              <q-th auto-width />
-              <q-th auto-width />
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                v-if="props.row.status == 'PENDING'"
-                color="orange"
-                class="q-px-md"
-                dense
-                unelevated
-                @click="unapprove(props.row.fullname)"
-                >ไม่อนุมัติ</q-btn
-              >
-              <span>{{ props.row.unapprove }}</span>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                v-if="props.row.status == 'PENDING'"
-                color="primary"
-                class="q-px-md"
-                dense
-                unelevated
-                >อนุมัติ</q-btn
-              >
-              <span>{{ props.row.approve }}</span>
-            </q-td>
-          </q-tr>
-        </template>
-      </Table> -->
     </div>
   </q-card>
   <DialogReason
     :modal="modalUnapprove"
     :title="dialogTitle"
     :desc="dialogDesc"
-    :click-close="closeReason"
+    :click-close="closeDialog"
     label="เหตุผล"
     :savaForm="clickSave"
   />
+  <DialogApprove
+    :modal="modalApprove"
+    :closeDialog="closeDialog"
+    :date="dateDialog"
+    :dateFix="dateFixDialog"
+    :editCheck="editCheck"
+    :detailData="detailData"
+  />
 </template>
 
 <style></style>