เพิ่ม validateForm

src/components/FormTime.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { ref, onMounted, defineProps } from "vue";
+import { ref, watch, onMounted, defineProps } from "vue";
 import { useQuasar } from "quasar";
 import moment, { Moment } from "moment";
 
 // importStores
 import { useCounterMixin } from "@/stores/mixin";
+// importType
+import type { FormRef } from "@/interface/index/Main";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -45,12 +47,52 @@ function updateClock() {
   timeNoew.value = `${hh}:${mm} น.`;
 }
 
+const dateRef = ref<object | null>(null);
+const reasonRef = ref<object | null>(null);
+
+const objectRef: FormRef = {
+  date: dateRef,
+  reason: reasonRef,
+};
+const checkstatusBox = ref<boolean>(false);
 function onCkickSave() {
-  dialogConfirm($q, async () => {
-    console.log("save");
-    props.closePopup();
-  });
+  const hasError = [];
+  for (const key in objectRef) {
+    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
+      const property = objectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (checkboxIn.value === false && checkboxOut.value === false) {
+    checkstatusBox.value = true;
+  }
+  if (
+    hasError.every(
+      (result) => result === true && checkstatusBox.value === false
+    )
+  ) {
+    dialogConfirm($q, async () => {
+      console.log("save");
+      props.closePopup();
+    });
+  } else {
+    console.log("ไม่ผ่าน ");
+  }
 }
+
+watch(
+  [() => checkboxIn.value, () => checkboxOut.value],
+  ([newCheckboxIn, newCheckboxOut]) => {
+    if (checkstatusBox.value) {
+      if (newCheckboxIn || newCheckboxOut) {
+        checkstatusBox.value = false;
+      }
+    }
+  }
+);
 </script>
 <template>
   <q-card-section class="col q-pt-none">
@@ -60,11 +102,11 @@ function onCkickSave() {
         bordered
         :class="$q.screen.gt.xs ? 'col-12 bg-grey-1' : 'col-12 '"
       >
-        <q-card-section class="bg-primary text-white" v-if="!$q.screen.gt.xs">
-          <div class="text-center">เวลาปัจจุบัน</div>
+        <q-card-section class="bg-primary text-white q-pa-sm">
+          <div class="text-center text-bold">เวลาปัจจุบัน</div>
         </q-card-section>
-        <div v-else class="q-pa-sm text-primary">เวลาปัจจุบัน</div>
-        <q-card-section class="text-center">
+        <!-- <div class="q-pa-sm text-primary">เวลาปัจจุบัน</div> -->
+        <q-card-section class="text-center q-pa-sm">
           <div class="row q-gutter-md">
             <div class="col">{{ date2Thai(dateNow) }}</div>
             <div class="col">{{ timeNoew }}</div>
@@ -73,38 +115,43 @@ function onCkickSave() {
       </q-card>
 
       <q-card flat bordered class="col-12 q-mt-sm" v-if="statusAction">
-        <VueDatePicker
-          v-model="date"
-          :locale="'th'"
-          autoApply
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              borderless
-              dense
-              :model-value="date !== null ? date2Thai(date) : null"
-              :label="`${'กรอกวันที่'}`"
-            >
-              <!-- :rules="[(val) => !!val || 'Field is required']" -->
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input> </template
-        ></VueDatePicker>
+        <div class="q-pa-sm">
+          <VueDatePicker
+            v-model="date"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            outlined
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                ref="dateRef"
+                outlined
+                dense
+                :model-value="date !== null ? date2Thai(date) : null"
+                :label="`${'กรอกวันที่'}`"
+                :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                lazy-rules
+                hide-bottom-space
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input> </template
+          ></VueDatePicker>
+        </div>
       </q-card>
 
       <q-card flat bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm" v-else>
@@ -115,7 +162,16 @@ function onCkickSave() {
           <div class="col">{{ covertDateObject(dataById.date) }}</div>
         </div>
       </q-card>
-      <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="{
+          borderColor: checkstatusBox ? '#B22222' : '',
+          borderWidth: checkstatusBox ? '2px' : '',
+        }"
+      >
         <div class="row q-gutter-xs">
           <div class="col-12">
             <q-checkbox
@@ -135,14 +191,27 @@ function onCkickSave() {
           </div>
         </div>
       </q-card>
+      <div
+        v-if="checkstatusBox"
+        class="text-red-9 q-pa-sm"
+        style="font-size: 10px"
+      >
+        กรุณาเลือก
+      </div>
       <q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
         <q-input
-          borderless
+          ref="reasonRef"
+          dense
+          outlined
           v-model="reason"
           label="เหตุผล"
           type="textarea"
           :rows="$q.screen.gt.xs ? '5' : '1'"
           label-color="grey-5"
+          :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+          lazy-rules
+          hide-bottom-space
+          class="custom-aqua-border"
         />
       </q-card>
     </div>

src/interface/index/Main.ts

@@ -2,4 +2,9 @@ interface DataOption {
   id: string;
   name: string;
 }
-export type { DataOption };
+interface FormRef {
+  date: object | null;
+  reason: object | null;
+  [key: string]: any;
+}
+export type { DataOption, FormRef };