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>

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

@@ -6,6 +6,7 @@ import type { QTableProps } from "quasar";
 
 /** importComponents */
 import DialogDetail from "@/modules/09_leave/components/1_Work/DialogDetail.vue";
+import DialogEdit from "@/modules/09_leave/components/1_Work/DialogEdit.vue";
 
 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
@@ -45,6 +46,7 @@ const emit = defineEmits(["update:pagination"]);
 /** ข้อมูล popup */
 const modal = ref<boolean>(false);
 const dataDetail = ref<any>([]);
+const modalEdit = ref<boolean>(false);
 
 /** pagination */
 const currentPage = ref<number>(1);
@@ -65,6 +67,7 @@ function updateProp(newPagination: any, page: number) {
 }
 
 const typeTab = ref<string>("");
+
 /**
  * Function openPopup และแสดงรายละเอียด
  * @param data ข้อมูลรายละเอียด
@@ -75,6 +78,11 @@ function clickDetail(data: any) {
   dataDetail.value = data;
 }
 
+function onClickEdit(data: any) {
+  modalEdit.value = !modalEdit.value;
+  dataDetail.value = modalEdit.value ? data : [];
+}
+
 /** Function ปิด popup */
 function closeDetail() {
   modal.value = false;
@@ -93,6 +101,10 @@ function updateRowsPerPagen(newPagination: any) {
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
   currentPage.value = 1;
 }
+
+onMounted(() => {
+  typeTab.value = props.tab as string;
+});
 </script>
 
 <template>
@@ -115,6 +127,7 @@ function updateRowsPerPagen(newPagination: any) {
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           <span class="text-weight-medium">{{ col.label }}</span>
         </q-th>
+        <q-th auto-width v-if="typeTab === 'time-record'"></q-th>
       </q-tr>
     </template>
     <template v-slot:body="props">
@@ -156,6 +169,18 @@ function updateRowsPerPagen(newPagination: any) {
             {{ col.value }}
           </div>
         </q-td>
+        <q-td v-if="typeTab === 'time-record'">
+          <q-btn
+            flat
+            dense
+            round
+            color="primary"
+            icon="edit"
+            @click.prevent="onClickEdit(props.row)"
+          >
+            <q-tooltip>แก้ไข</q-tooltip>
+          </q-btn>
+        </q-td>
       </q-tr>
     </template>
     <template v-slot:pagination="scope">
@@ -177,6 +202,7 @@ function updateRowsPerPagen(newPagination: any) {
     :typeTab="typeTab"
     :close="closeDetail"
   />
-</template>
 
+  <DialogEdit :modal="modalEdit" :detail="dataDetail" :close="onClickEdit" />
+</template>
 <style scoped></style>