Merge branch 'develop' into setthawut

# Conflicts:
#	src/views/HomeView.vue

src/components/FormTime.vue

@@ -20,7 +20,6 @@ const {
   hideLoader,
   messageError,
   convertDateToAPI,
-  convertDatetimeToAPI,
 } = useCounterMixin()
 
 /**
@@ -42,6 +41,10 @@ const props = defineProps({
       console.log('fetchData func')
     },
   },
+  action: {
+    type: String,
+    default: '',
+  },
 })
 
 const dataByIdVal = ref<DataCheckIn>() //ข้อมูลประวัติการลงเวลา
@@ -84,6 +87,13 @@ function onCkickSave() {
       }
     }
   }
+
+  // ลงเวลาพิเศษบังคับให้แก้ทั้งเข้าและออก
+  if (props.action === 'special') {
+    checkboxIn.value = true
+    checkboxOut.value = true
+  }
+
   if (checkboxIn.value === false && checkboxOut.value === false) {
     checkstatusBox.value = true
   }
@@ -94,7 +104,7 @@ function onCkickSave() {
   ) {
     dialogConfirm($q, async () => {
       const data: FormTimeStemp = {
-        checkDate: convertDatetimeToAPI(date.value as Date),
+        checkDate: convertDateToAPI(date.value as Date),
         checkInEdit: checkboxIn.value,
         checkOutEdit: checkboxOut.value,
         description: reason.value,
@@ -151,10 +161,11 @@ onMounted(() => {
   if (dataByIdVal.value == null) {
     statusAction.value = true
   } else {
-    date.value = convertDatetimeToAPI(new Date(dataByIdVal.value.checkInDateTime))
+    date.value = convertDateToAPI(new Date(dataByIdVal.value.checkInDateTime))
   }
 })
 </script>
+
 <template>
   <div class="col-12 row">
     <div class="row q-col-q-gutter-sm q-pa-md">
@@ -201,7 +212,11 @@ onMounted(() => {
                 outlined
                 dense
                 :model-value="date !== null ? date2Thai(new Date(date)) : null"
-                :label="`${'วันที่ขอแก้ไข'}`"
+                :label="`${
+                  action === 'edit'
+                    ? 'วันที่ขอแก้ไข'
+                    : 'วันที่ขอลงเวลากรณีพิเศษ'
+                }`"
                 format-header="YYYY-MM-DD"
                 lazy-rules
                 :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
@@ -221,6 +236,7 @@ onMounted(() => {
       </q-card>
 
       <q-card
+        v-if="action === 'edit'"
         flat
         bordered
         class="q-pa-sm col-12 q-mt-sm"
@@ -257,7 +273,12 @@ onMounted(() => {
         กรุณาเลือก
       </div>
 
-      <q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
+      <q-card
+        flat
+        bordered
+        class="q-pa-sm col-12 q-mt-sm"
+        :style="action == 'special' ? 'margin-bottom: 150px' : ''"
+      >
         <q-input
           ref="reasonRef"
           dense

src/components/PopUp.vue

@@ -31,6 +31,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log('not function'),
   },
+  action: {
+    type: String,
+    default: '',
+  },
 })
 
 const data = ref<DataCheckIn>() // ข้อมูลลงเวลา
@@ -56,7 +60,7 @@ watch(
 )
 </script>
 <template>
-  <q-dialog v-model="props.modal" persistent>
+  <q-dialog v-model="props.modal" persistent m>
     <q-card :style="$q.screen.lt.sm ? 'width: 100%;' : 'width: 320px;'">
       <HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
 
@@ -64,6 +68,7 @@ watch(
         :data-byId="data"
         :close-popup="clickClosePopup"
         :fetch-data="props.fetchData"
+        :action="props.action"
       />
     </q-card>
   </q-dialog>

src/components/TableHistory.vue

@@ -361,7 +361,11 @@ watch(
         </q-td>
         <q-td v-if="tab === 'history'">
           <q-btn
-            v-if="!props.row.isEdit"
+            v-if="
+              !props.row.isEdit &&
+              (props.row.checkInStatus != 'ปกติ' ||
+                props.row.checkOutStatus != 'ปกติ')
+            "
             style="min-width: 110px"
             outline
             icon="edit"
@@ -495,6 +499,7 @@ watch(
     :click-close="closePopup"
     :title="titlePopup"
     :data-ById="dataRow"
+    action="edit"
   />
 </template>
 

src/components/ToolBar.vue

@@ -30,7 +30,7 @@ const filterYear = ref<number>(stores.year) //ปีงบประมาณ
 const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ') //หัว popup
 const dateMonth = ref<DataDateMonthObject>({
   month: new Date().getMonth(),
-  year: stores.year ? stores.year:new Date().getFullYear(),
+  year: stores.year ? stores.year : new Date().getFullYear(),
 })
 const modalPopup = ref<boolean>(false) // modal เพิ่มรายการลงเวลากรณีพิเศษ
 
@@ -154,6 +154,7 @@ watch(
 
     <q-space />
     <q-btn
+      v-if="tab === 'time'"
       unelevated
       icon="add"
       :dense="$q.screen.lt.sm"
@@ -168,6 +169,7 @@ watch(
     :title="titleName"
     :clickClose="onClickClose"
     :fetchData="props.fetchData"
+    action="special"
   />
 </template>
 

src/views/HomeView.vue

@@ -17,8 +17,8 @@ const { date2Thai, showLoader, hideLoader, messageError, dialogConfirm } = mixin
 const $q = useQuasar()
 
 const modalTime = ref<boolean>(false) // Dailog ลงเวลาเข้างานของคุณ
-const stetusCheckin = ref<boolean>(true) // สถานะเวลา เข้า,ออก
 const checkStatus = ref<string>('')
+const statusCheckin = ref<boolean>(true) // สถานะเวลา เข้า,ออก
 
 const msgCheckTime = ref<string>('') // ข้อความแจ้งเตือน
 const isDisabledCheckTime = ref<boolean>(false) // ข้อความแจ้งเตือน
@@ -31,7 +31,7 @@ async function fetchCheckTime() {
     .get(config.API.checkTime())
     .then(async (res) => {
       const data = await res.data.result
-      stetusCheckin.value = data.checkInId ? false : true
+      statusCheckin.value = data.checkInId ? false : true
       checkInId.value = data.checkInId ? data.checkInId : ''
     })
     .catch((err) => {
@@ -103,7 +103,7 @@ const model = ref<string>('') //  สถานที่ทำงาน
 // ตัวเลือกสถานที่ทำงาน
 const options = ref<string[]>([
   'ปฏิบัติงานที่บ้าน',
-  'ลืมลงเวลาปฏิบัติงาน',
+  // 'ลืมลงเวลาปฏิบัติงาน',
   'ไปประชุม/อบรม/สัมมนา/ปฏิบัติงานที่บ้านนอกสถานที่',
   'ขออนุญาตออกนอกสถานที่',
   'อื่นๆ',
@@ -189,9 +189,9 @@ function validateForm() {
     }
   }
   if (hasError.every((result) => result === true)) {
-    if (stetusCheckin.value == false) {
+    if (statusCheckin.value == false) {
       getCheck()
-    } else if (stetusCheckin.value) {
+    } else if (statusCheckin.value) {
       confirm()
     }
   }
@@ -268,8 +268,8 @@ async function getCheck() {
 /** ปิด popup แสดงการลงเวลา*/
 async function onClickConfirm() {
   showLoader()
-  if (!stetusCheckin.value) {
+  if (!statusCheckin.value) {
-    stetusCheckin.value = true
+    statusCheckin.value = true
   }
 
   // await fetchCheckTime()
@@ -289,19 +289,19 @@ function updateWorkplace() {
 
 /**
  *  รี้เทินร์ class สีพื้นหลัง
- * @param val ค่า stetusCheckin
+ * @param val ค่า statusCheckin
  */
 const getClass = (val: boolean) => {
   return {
     'bg-primary text-white col-12 row items-center q-px-md q-py-sm ': val,
-    'bg-red-9 text-white col-12 row items-center q-px-md q-py-sm ': !val,
+    'bg-red-8 text-white col-12 row items-center q-px-md q-py-sm ': !val,
   }
 }
 
 const getClassXS = (val: boolean) => {
   return {
-    'bg-topIn text-white q-pa-lg col-12 row': val,
+    'text-white q-pa-lg col-12 row bg-primary': val,
-    'bg-topOut text-white q-pa-lg col-12 row': !val,
+    'text-white q-pa-lg col-12 row bg-red-8': !val,
   }
 }
 const inQueue = ref<boolean>(false)
@@ -367,22 +367,18 @@ onMounted(async () => {
           "
         >
           <!-- <q-header elevated class="bg-purple"> -->
-          <div :class="getClass(stetusCheckin)" class="gt-xs">
+          <div :class="getClass(statusCheckin)" class="gt-xs">
             <div class="col">
               <div class="row col-12 justify-center q-py-sm text-subtitle1">
-                <!-- <strong v-if="stetusCheckin" style="font-size: 1rem">
+                <strong v-if="!statusCheckin && inQueue">
-                    ลงเวลาเข้างาน
-                  </strong> -->
-                <!-- <strong v-else style="font-size: 1rem">ลงเวลาออกงาน</strong> -->
-                <strong v-if="!stetusCheckin && inQueue">
                   ลงเวลาออกงาน (ระบบกำลังประมวลผล)
                 </strong>
 
-                <strong v-else-if="stetusCheckin && inQueue">
+                <strong v-else-if="statusCheckin && inQueue">
                   ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
                 </strong>
 
-                <strong v-else-if="stetusCheckin && !inQueue">
+                <strong v-else-if="statusCheckin && !inQueue">
                   ลงเวลาเข้างาน
                 </strong>
 
@@ -701,8 +697,10 @@ onMounted(async () => {
                   *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
                 </p>
                 <q-btn
-                  :label="stetusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
+                  :label="statusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
-                  :color="img == null ? 'grey-6' : 'primary'"
+                  :color="
+                    img == null ? 'grey-6' : statusCheckin ? 'primary' : 'red-8'
+                  "
                   push
                   size="18px"
                   :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
@@ -725,23 +723,23 @@ onMounted(async () => {
 
   <!--  top page sticky  หน้ามือถือ-->
   <q-page-sticky expand position="top" v-if="$q.screen.xs">
-    <div :class="getClassXS(stetusCheckin)">
+    <div :class="getClassXS(statusCheckin)">
       <div class="col">
-        <div class="row col-12 justify-right items-center text-body1">
+        <div class="row col-12 justify-right items-center text-subtitle1">
-          <strong v-if="!stetusCheckin && inQueue">
+          <strong v-if="!statusCheckin && inQueue">
             ลงเวลาออกงาน (ระบบกำลังประมวลผล)
           </strong>
 
-          <strong v-else-if="stetusCheckin && inQueue">
+          <strong v-else-if="statusCheckin && inQueue">
             ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
           </strong>
 
-          <strong v-else-if="stetusCheckin && !inQueue"> ลงเวลาเข้างาน </strong>
+          <strong v-else-if="statusCheckin && !inQueue"> ลงเวลาเข้างาน </strong>
 
           <strong v-else> ลงเวลาออกงาน </strong>
         </div>
         <div
-          class="text-white text-body2 row col-12"
+          class="text-white text-subtitle1 row col-12"
           style="line-height: 1.5rem"
         >
           {{ date2Thai(Thai) }}
@@ -781,8 +779,8 @@ onMounted(async () => {
         *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
       </p>
       <q-btn
-        :label="stetusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
+        :label="statusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
-        :color="img == null ? 'grey-6' : 'primary'"
+        :color="img == null ? 'grey-6' : statusCheckin ? 'primary' : 'red-8'"
         push
         size="18px"
         :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
@@ -800,20 +798,27 @@ onMounted(async () => {
   <!-- แสดงการลงเวลา -->
   <q-dialog v-model="modalTime" persistent>
     <q-card class="full-width cardNone">
-      <div :class="getClass(stetusCheckin)">
+      <div class="col-12 row items-center q-px-md q-py-sm bg-grey-2">
         <div class="text-body1 text-center col-12 text-weight-bold">
-          <span v-if="stetusCheckin">ลงเวลาเข้างานของคุณ</span>
+          <span v-if="statusCheckin">ลงเวลาเข้างานของคุณ</span>
           <span v-else>ลงเวลาออกงานของคุณ</span>
         </div>
       </div>
       <q-card-section class="row col-12 justify-center">
-        <div class="bg-grey-2 rounded-borders q-pa-md col-11">
+        <div
-          <div class="col-12 text-subtitle1 text-center text-weight-medium">
+          class="rounded-borders q-pa-md col-11"
+          :class="statusCheckin ? 'bg-primary' : 'bg-red-8'"
+        >
+          <div
+            class="col-12 text-subtitle1 text-center text-white text-weight-medium"
+          >
             {{ date2Thai(Thai) }}
           </div>
           <div class="row col-12 justify-center q-pt-sm">
-            <div class="text-h3 text-weight-bold"></div>
+            <!-- <div class="text-h3 text-white text-weight-bold"></div> -->
-            <div class="text-h3 text-weight-bold">{{ timeChickin }}</div>
+            <div class="text-h3 text-white text-weight-bold">
+              {{ timeChickin }}
+            </div>
           </div>
         </div>
         <div class="col-12 text-center row q-pt-md">

src/views/MapView.vue

@@ -99,7 +99,7 @@ const location = ref<string>('')
 const model = ref<string>('')
 const options = ref<string[]>([
   'ปฏิบัติงานที่บ้าน',
-  'ลืมลงเวลาปฏิบัติงาน',
+  // 'ลืมลงเวลาปฏิบัติงาน',
   'ไปประชุม/อบรม/สัมมนา/ปฏิบัติงานที่บ้านนอกสถานที่',
   'ขออนุญาตออกนอกสถานที่',
   'อื่นๆ',