เพิ่มลงเวลากรณีพิเศษ (USER) #32

src/api/api.history.ts

@@ -1,6 +1,8 @@
 import env from './index'
 const history = `${env.API_URI}/leave/check-in/history`
+const TimeStamp = `${env.API_URI}/leave`
 
 export default {
   history: () => `${history}`,
+  createTimeStamp: () => `${TimeStamp}/user/edit`,
 }

src/components/FormTime.vue

@@ -2,15 +2,19 @@
 import { ref, watch, onMounted } from 'vue'
 import { useQuasar } from 'quasar'
 import moment from 'moment'
+import http from '@/plugins/http'
+import config from '@/app.config'
+
+import type { FormRef } from '@/interface/index/Main'
+import type { FormTimeStemp } from '@/interface/response/checkin'
 
 // importStores
 import { useCounterMixin } from '@/stores/mixin'
 // importType
-import type { FormRef } from '@/interface/index/Main'
 
 const $q = useQuasar()
 const mixin = useCounterMixin()
-const { date2Thai, covertDateObject, dialogConfirm } = mixin
+const { date2Thai, success, dialogConfirm } = mixin
 
 const props = defineProps({
   dataById: {
@@ -21,6 +25,10 @@ const props = defineProps({
     type: Function,
     required: true,
   },
+  fetcthDataTable: {
+    type: Function,
+    require: true,
+  },
 })
 
 const dataByIdVal = ref<any>([])
@@ -30,13 +38,6 @@ const checkboxOut = ref<boolean>(false)
 const reason = ref<string>('')
 const statusAction = ref<boolean>(false)
 
-onMounted(() => {
-  updateClock()
-  dataByIdVal.value = props.dataById
-  if (dataByIdVal.value == null) {
-    statusAction.value = true
-  }
-})
 const dateNow = ref<Date>(new Date())
 const timeNoew = ref<string>('')
 
@@ -55,7 +56,10 @@ const objectRef: FormRef = {
   reason: reasonRef,
 }
 const checkstatusBox = ref<boolean>(false)
+
+/** function checkValidate*/
 function onCkickSave() {
+  props.fetcthDataTable?.()
   const hasError = []
   for (const key in objectRef) {
     if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
@@ -75,14 +79,50 @@ function onCkickSave() {
     )
   ) {
     dialogConfirm($q, async () => {
-      console.log('save')
+      const data: FormTimeStemp = {
-      props.closePopup()
+        checkDate: date.value,
+        checkInEdit: checkboxIn.value,
+        checkOutEdit: checkboxOut.value,
+        description: reason.value,
+      }
+      createListTime(data)
     })
   } else {
     console.log('ไม่ผ่าน ')
   }
 }
 
+/**
+ * function  เพิ่มลงเวลากรณีพิเศษ
+ * @param data body Request
+ */
+async function createListTime(data: FormTimeStemp) {
+  await http
+    .post(config.API.createTimeStamp(), data)
+    .then(() => {
+      success($q, 'บันทึกข้อมูลาำเร็จ')
+    })
+    .catch((err) => {
+      console.log(err)
+    })
+    .finally(() => {
+      props.fetcthDataTable?.()
+      props.closePopup?.()
+    })
+}
+
+/** Hook */
+onMounted(() => {
+  updateClock()
+  dataByIdVal.value = props.dataById
+
+  if (dataByIdVal.value == null) {
+    statusAction.value = true
+  } else {
+    date.value = new Date(dataByIdVal.value.checkInDateTime)
+  }
+})
+
 watch(
   [() => checkboxIn.value, () => checkboxOut.value],
   ([newCheckboxIn, newCheckboxOut]) => {
@@ -116,7 +156,7 @@ watch(
 
       <q-card flat bordered class="col-12 q-mt-sm" v-if="statusAction">
         <div class="q-pa-sm">
-          <VueDatePicker
+          <datepicker
             v-model="date"
             :locale="'th'"
             autoApply
@@ -136,7 +176,7 @@ watch(
                 outlined
                 dense
                 :model-value="date !== null ? date2Thai(date) : null"
-                :label="`${'กรอกวันที่'}`"
+                :label="`${'วันที่ขอแก้ไข'}`"
                 :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                 lazy-rules
                 hide-bottom-space
@@ -150,7 +190,7 @@ watch(
                   </q-icon>
                 </template>
               </q-input> </template
-          ></VueDatePicker>
+          ></datepicker>
         </div>
       </q-card>
 
@@ -159,7 +199,7 @@ watch(
           <div class="col-1">
             <q-icon color="grey-5" name="calendar_today" />
           </div>
-          <div class="col">{{ covertDateObject(dataByIdVal.date) }}</div>
+          <div class="col">{{ dataByIdVal.checkInDate }}</div>
         </div>
       </q-card>
 
@@ -199,7 +239,7 @@ watch(
       >
         กรุณาเลือก
       </div>
-      
+
       <q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
         <q-input
           ref="reasonRef"

src/components/PopUp.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+
 import HeaderPopup from '@/components/HeaderPopup.vue'
 import FormTime from '@/components/FormTime.vue'
 
@@ -20,24 +21,33 @@ const props = defineProps({
     type: Object,
     default: null,
   },
+  fetcthDataTable: {
+    type: Function,
+    require: true,
+  },
 })
 
-// -ข้อมูล
 const data = ref<any>()
 function clickClosePopup() {
   props.clickClose()
 }
-watch(props, () => {
+
-  if (props.modal === true) {
+watch(
-    data.value = props.dataById
+  () => props.modal,
+  () => {
+    data.value = props.modal ? props.dataById : null
   }
-})
+)
 </script>
 <template>
   <q-dialog v-model="props.modal">
-    <q-card class="column" style="width: 300px; min-height: 600px;">
+    <q-card class="column" style="width: 300px; min-height: 600px">
       <HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
-      <FormTime :dataById="data" :closePopup="clickClosePopup" />
+      <FormTime
+        :dataById="data"
+        :closePopup="clickClosePopup"
+        :fetcthDataTable="props.fetcthDataTable"
+      />
     </q-card>
   </q-dialog>
 </template>

src/components/ToolBar.vue

@@ -1,16 +1,24 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-// import type { DataOption } from '@/interface/index/Main'
+
 import Popup from '@/components/PopUp.vue'
 // import HeaderPopup from "@/components/HeaderPopup.vue";
 // import FormTime from "@/components/FormTime.vue";
 
+const props = defineProps({
+  fetchData: {
+    type: Function,
+    require: true,
+  },
+})
+const emit = defineEmits(['update:year'])
+
 const filterYear = ref<number>(new Date().getFullYear())
 // const yearOption = ref<DataOption[]>([{ id: '2566', name: '2566' }])
 const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ')
 
 function filterYearFn() {
-  console.log('test')
+  emit('update:year', filterYear.value)
 }
 
 const modalPopup = ref<boolean>(false)
@@ -57,16 +65,7 @@ function onClickClose() {
           </q-input>
         </template>
       </datepicker>
-      <!-- <q-select
+
-        dense
-        outlined
-        style="width: 180px"
-        label="ปีงบประมาณ"
-        v-model="filterYear"
-        :options="yearOption"
-        option-label="name"
-        option-value="id"
-      /> -->
       <q-space />
       <q-btn
         unelevated
@@ -80,7 +79,12 @@ function onClickClose() {
     </div>
   </div>
 
-  <Popup :modal="modalPopup" :title="titleName" :clickClose="onClickClose" />
+  <Popup
+    :modal="modalPopup"
+    :title="titleName"
+    :clickClose="onClickClose"
+    :fetcthDataTable="props.fetchData"
+  />
 </template>
 
 <style scoped></style>

src/interface/response/checkin.ts

@@ -6,11 +6,31 @@ interface FormRef {
 
 interface FormData {
   checkInId: string
-  checkInDate: string | null
+  checkInDate: Date | null
+  checkInDateTime: Date
   checkInTime: string
   checkOutTime: string
   checkInStatus: string
   checkOutStatus: string
   checkInLocation: string
+  checkOutLocation: string
 }
-export type { FormRef, FormData }
+interface Datalist {
+  checkInId: string
+  checkInDate: string | null
+  checkInDateTime: Date | null
+  checkInTime: string
+  checkOutTime: string
+  checkInStatus: string
+  checkOutStatus: string
+  checkInLocation: string
+  checkOutLocation: string
+}
+
+interface FormTimeStemp {
+  checkDate: Date | null
+  checkInEdit: boolean
+  checkOutEdit: boolean
+  description: string
+}
+export type { FormRef, FormData, Datalist, FormTimeStemp }

src/stores/chekin.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import http from '@/plugins/http'
+
-import config from '@/app.config'
+import type { FormData, Datalist } from '@/interface/response/checkin'
 
 // importStores
 import { useCounterMixin } from '@/stores/mixin'
@@ -10,14 +10,14 @@ const mixin = useCounterMixin()
 const { date2Thai } = mixin
 
 export const useChekIn = defineStore('checkin', () => {
-  const rows = ref<any>()
+  const rows = ref<Datalist[]>()
 
-  async function fetchHistoryList(data: FormData) {
+  async function fetchHistoryList(data: FormData[]) {
-    // console.log(data)
     rows.value = []
-    const datalist = await data.map((e: any) => ({
+    const datalist: Datalist[] = await data.map((e: FormData) => ({
       checkInId: e.checkInId,
-      checkInDate: date2Thai(e.checkInDate),
+      checkInDate: e.checkInDate ? date2Thai(e.checkInDate) : null,
+      checkInDateTime: e.checkInDate,
       checkInTime: e.checkInTime,
       checkOutTime: e.checkOutTime != '' ? e.checkOutTime : '-',
       checkInStatus: convertStatus(e.checkInStatus),
@@ -42,31 +42,31 @@ export const useChekIn = defineStore('checkin', () => {
         return ''
     }
   }
-  function convertStatusEdit(val: string) {
+  // function convertStatusEdit(val: string) {
-    switch (val) {
+  //   switch (val) {
-      case 'edit':
+  //     case 'edit':
-        return 'ขอแก้ไข'
+  //       return 'ขอแก้ไข'
-      case 'wait':
+  //     case 'wait':
-        return 'รออนุมัติ'
+  //       return 'รออนุมัติ'
-      case 'approve':
+  //     case 'approve':
-        return 'อนุมัติ'
+  //       return 'อนุมัติ'
-    }
+  //   }
-  }
+  // }
-  function classColorStatus(val: string) {
+  // function classColorStatus(val: string) {
-    switch (val) {
+  //   switch (val) {
-      case 'wait':
+  //     case 'wait':
-        return 'orange'
+  //       return 'orange'
-      case 'approve':
+  //     case 'approve':
-        return 'green'
+  //       return 'green'
-      case 'reject':
+  //     case 'reject':
-        return 'red'
+  //       return 'red'
-    }
+  //   }
-  }
+  // }
 
   return {
     rows,
     fetchHistoryList,
-    classColorStatus,
+    // classColorStatus,
     // fetchlistHistory,
   }
 })

src/stores/mixin.ts

@@ -208,6 +208,36 @@ export const useCounterMixin = defineStore('mixin', () => {
     }
   }
 
+  const success = (q: any, val: string) => {
+    // useQuasar ไม่สามารถใช้นอกไฟล์ .vue
+    if (val !== '') {
+      return q.notify({
+        message: val,
+        color: 'primary',
+        icon: 'mdi-information',
+        position: 'bottom-right',
+        multiLine: true,
+        timeout: 1000,
+        badgeColor: 'positive',
+        classes: 'my-notif-class',
+      })
+    }
+  }
+
+  function notify(q: any, val: string) {
+    if (val !== '') {
+      q.notify({
+        color: 'teal-10',
+        message: val,
+        icon: 'mdi-information',
+        position: 'bottom-right',
+        multiLine: true,
+        timeout: 7000,
+        actions: [{ label: 'ปิด', color: 'white', handler: () => {} }],
+      })
+    }
+  }
+
   return {
     date2Thai,
     showLoader,
@@ -215,5 +245,7 @@ export const useCounterMixin = defineStore('mixin', () => {
     covertDateObject,
     dialogConfirm,
     messageError,
+    success,
+    notify,
   }
 })

src/views/HistoryView.vue

@@ -17,14 +17,10 @@ const { showLoader, hideLoader, messageError } = mixin
 const { fetchHistoryList } = stores
 const $q = useQuasar() //ใช้ noti quasar
 
-onMounted(() => {
-  fetchlistHistory()
-})
-
 // paging
 const page = ref<number>(1)
-const year = ref<number>(2023)
+const year = ref<number>(new Date().getFullYear())
-const pageSize = ref<number>(2)
+const pageSize = ref<number>(10)
 const total = ref<number>(0)
 const maxPage = ref<number>(1)
 const filter = ref<string>('') //search data table
@@ -47,22 +43,20 @@ async function changePage(
 
 /**
  * ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลาจาก api มาแสดง
- * @param loading แสดง loading ไหม true คือแสดง, false คือไม่แสดง 
+ * @param loading แสดง loading ไหม true คือแสดง, false คือไม่แสดง
  */
-const fetchlistHistory = async (loading = true) => {
+async function fetchlistHistory(loading = true) {
-  loading === true ?? showLoader()
+  loading === true && showLoader()
   await http
     .get(
       config.API.history() +
         `?year=${year.value}&page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
     )
     .then(async (res) => {
-      const data = res.data.result
+      const data = res.data.result.data
-      total.value = data.total ? data.total : 5
+      total.value = res.data.result.total
       maxPage.value = await Math.ceil(total.value / pageSize.value)
-      maxPage.value = maxPage.value < 1 ? 1 : maxPage.value
       fetchHistoryList(data) // ปิดกรณีมี total
-      // fetchHistoryList(data.data) // เปิดกรณีมี total
     })
     .catch((err) => {
       messageError($q, err)
@@ -71,6 +65,20 @@ const fetchlistHistory = async (loading = true) => {
       hideLoader()
     })
 }
+
+/**
+ * function updateYear
+ * @param y ปีที่อัปเดท
+ */
+async function updateYear(y: number) {
+  year.value = y
+  y && fetchlistHistory(true)
+}
+
+/** Hook*/
+onMounted(() => {
+  fetchlistHistory()
+})
 </script>
 <template>
   <div class="col-12 row justify-center">
@@ -96,7 +104,7 @@ const fetchlistHistory = async (loading = true) => {
           <div class="col-2"></div>
         </div>
         <div class="col-12 q-pa-md text-grey-9">
-          <ToolBar />
+          <ToolBar :fetchData="fetchlistHistory" @update:year="updateYear" />
           <Table
             :page-size="pageSize"
             :total="total"