From d0687adfc3b4087fea205f739458421a5cd3a2f2 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Fri, 7 Mar 2025 14:07:08 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=A3=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=9B=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B9=80=E0=B8=A7=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2=E0=B9=80=E0=B8=9B=E0=B9=87=E0=B8=99=2024=20=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=A1.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/01_RoundTime/DialogForm.vue    | 279 ++++++++++++++----
 src/style/quasar-variables.sass               |   6 +
 2 files changed, 231 insertions(+), 54 deletions(-)

diff --git a/src/modules/09_leave/components/01_RoundTime/DialogForm.vue b/src/modules/09_leave/components/01_RoundTime/DialogForm.vue
index e225204db..c6883cb11 100644
--- a/src/modules/09_leave/components/01_RoundTime/DialogForm.vue
+++ b/src/modules/09_leave/components/01_RoundTime/DialogForm.vue
@@ -54,6 +54,25 @@ const objectRound: MyObjectRoundRef = {
   endTimeAfternoon: pmOutRef,
 };
 
+const formDate = reactive<any>({
+  startTimeMorning: {
+    hours: new Date().getHours(),
+    minutes: new Date().getMinutes(),
+  },
+  endTimeMorning: {
+    hours: new Date().getHours(),
+    minutes: new Date().getMinutes(),
+  },
+  startTimeAfternoon: {
+    hours: new Date().getHours(),
+    minutes: new Date().getMinutes(),
+  },
+  endTimeAfternoon: {
+    hours: new Date().getHours(),
+    minutes: new Date().getMinutes(),
+  },
+});
+
 /** Form ข้อมูล */
 const formData = reactive<FormData>({
   startTimeMorning: "",
@@ -200,16 +219,29 @@ watch(
             <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="amRef"
-                class="inputgreen"
+
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDate.startTimeMorning"
+                time-picker
                 :readonly="props.editCheck === 'edit' || isRead"
-                :outlined="props.editCheck === 'add'"
-                dense
-                lazy-rules
-                borderless
-                v-model="formData.startTimeMorning"
-                :rules="[
+                :enableTimePicker="true"
+                @update:model-value="(value:any)=>(formData.startTimeMorning = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
+              >
+                <template #trigger>
+                  <q-input
+                    ref="amRef"
+                    class="inputgreen"
+                    :readonly="props.editCheck === 'edit' || isRead"
+                    :outlined="props.editCheck === 'add'"
+                    dense
+                    borderless
+                    :model-value="
+                      formData.startTimeMorning
+                        ? `${formData.startTimeMorning} น.`
+                        : '--:-- --'
+                    "
+                    :rules="[
                   (val:string) => !!val || 'กรุณากรอกเวลาเข้างาน',
                   (val:string) => {
                     if (val && formData.endTimeMorning) {
@@ -229,24 +261,59 @@ watch(
                     return true;
                   },
                 ]"
-                hide-bottom-space
-                type="time"
-                style="width: 140px"
-              />
+                    hide-bottom-space
+                    style="width: 140px"
+                    ><template v-slot:append>
+                      <q-icon
+                        v-if="props.editCheck !== 'edit' && !isRead"
+                        name="mdi-clock-outline"
+                        size="15px"
+                        color="dark"
+                      ></q-icon> </template
+                  ></q-input>
+                </template>
+                <template
+                  #action-row="{ internalModelValue, selectDate, closePicker }"
+                >
+                  <div class="time_picker action-row q-gutter-sm">
+                    <q-btn
+                      label="ยกเลิก"
+                      @click="closePicker"
+                      color="grey"
+                      outline
+                    >
+                    </q-btn>
+                    <q-btn label="ตกลง" @click="selectDate" color="primary">
+                    </q-btn>
+                  </div>
+                </template>
+              </datepicker>
             </div>
             <q-separator inset />
             <div class="row items-start q-my-sm justify-between">
               <p class="q-ma-none mt">เวลาออกงาน</p>
-              <q-input
-                ref="amOutRef"
-                class="inputgreen"
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDate.endTimeMorning"
+                time-picker
                 :readonly="props.editCheck === 'edit' || isRead"
-                :outlined="props.editCheck === 'add'"
-                dense
-                v-model="formData.endTimeMorning"
-                lazy-rules
-                borderless
-                :rules="[
+                :enableTimePicker="true"
+                @update:model-value="(value:any)=>(formData.endTimeMorning = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
+              >
+                <template #trigger>
+                  <q-input
+                    ref="amOutRef"
+                    class="inputgreen"
+                    :readonly="props.editCheck === 'edit' || isRead"
+                    :outlined="props.editCheck === 'add'"
+                    dense
+                    :model-value="
+                      formData.endTimeMorning
+                        ? `${formData.endTimeMorning} น.`
+                        : '--:-- --'
+                    "
+                    borderless
+                    :rules="[
                   (val:string) => !!val || 'กรุณากรอกเวลาออกงาน',
                   (val:string) => {
                     if (val && formData.startTimeMorning) {
@@ -266,10 +333,33 @@ watch(
                     return true;
                   },
                 ]"
-                hide-bottom-space
-                type="time"
-                style="width: 140px"
-              />
+                    hide-bottom-space
+                    style="width: 140px"
+                    ><template v-slot:append>
+                      <q-icon
+                        v-if="props.editCheck !== 'edit' && !isRead"
+                        name="mdi-clock-outline"
+                        size="15px"
+                        color="dark"
+                      ></q-icon> </template
+                  ></q-input>
+                </template>
+                <template
+                  #action-row="{ internalModelValue, selectDate, closePicker }"
+                >
+                  <div class="time_picker action-row q-gutter-sm">
+                    <q-btn
+                      label="ยกเลิก"
+                      @click="closePicker"
+                      color="grey"
+                      outline
+                    >
+                    </q-btn>
+                    <q-btn label="ตกลง" @click="selectDate" color="primary">
+                    </q-btn>
+                  </div>
+                </template>
+              </datepicker>
             </div>
           </div>
           <div
@@ -278,9 +368,18 @@ watch(
             <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="pmRef"
-                :rules="[
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDate.startTimeAfternoon"
+                time-picker
+                :readonly="props.editCheck === 'edit' || isRead"
+                :enableTimePicker="true"
+                @update:model-value="(value:any)=>(formData.startTimeAfternoon = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
+              >
+                <template #trigger>
+                  <q-input
+                    ref="pmRef"
+                    :rules="[
                   (val:string) => !!val || 'กรุณากรอกเวลาเข้างาน',
                   (val:string) => {
                     if (val && formData.endTimeAfternoon) {
@@ -300,24 +399,60 @@ watch(
                     return true;
                   },
                 ]"
-                class="inputgreen"
-                :readonly="props.editCheck === 'edit' || isRead"
-                :outlined="props.editCheck === 'add'"
-                dense
-                lazy-rules
-                borderless
-                v-model="formData.startTimeAfternoon"
-                hide-bottom-space
-                type="time"
-                style="width: 140px"
-              />
+                    class="inputgreen"
+                    :readonly="props.editCheck === 'edit' || isRead"
+                    :outlined="props.editCheck === 'add'"
+                    dense
+                    borderless
+                    :model-value="
+                      formData.startTimeAfternoon
+                        ? `${formData.startTimeAfternoon} น.`
+                        : '--:-- --'
+                    "
+                    hide-bottom-space
+                    style="width: 140px"
+                  >
+                    <template v-slot:append>
+                      <q-icon
+                        v-if="props.editCheck !== 'edit' && !isRead"
+                        name="mdi-clock-outline"
+                        size="15px"
+                        color="dark"
+                      ></q-icon> </template
+                  ></q-input>
+                </template>
+                <template
+                  #action-row="{ internalModelValue, selectDate, closePicker }"
+                >
+                  <div class="time_picker action-row q-gutter-sm">
+                    <q-btn
+                      label="ยกเลิก"
+                      @click="closePicker"
+                      color="grey"
+                      outline
+                    >
+                    </q-btn>
+                    <q-btn label="ตกลง" @click="selectDate" color="primary">
+                    </q-btn>
+                  </div>
+                </template>
+              </datepicker>
             </div>
             <q-separator inset />
             <div class="row items-start q-my-sm justify-between">
               <p class="q-ma-none mt">เวลาออกงาน</p>
-              <q-input
-                ref="pmOutRef"
-                :rules="[
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDate.endTimeAfternoon"
+                time-picker
+                :readonly="props.editCheck === 'edit' || isRead"
+                :enableTimePicker="true"
+                @update:model-value="(value:any)=>(formData.endTimeAfternoon = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
+              >
+                <template #trigger>
+                  <q-input
+                    ref="pmOutRef"
+                    :rules="[
                   (val:string) => !!val || 'กรุณากรอกเวลาออกงาน',
                   (val:string) => {
                     if (val && formData.startTimeAfternoon) {
@@ -337,17 +472,45 @@ watch(
                     return true;
                   },
                 ]"
-                class="inputgreen"
-                :readonly="props.editCheck === 'edit' || isRead"
-                :outlined="props.editCheck === 'add'"
-                dense
-                v-model="formData.endTimeAfternoon"
-                lazy-rules
-                borderless
-                hide-bottom-space
-                type="time"
-                style="width: 140px"
-              />
+                    class="inputgreen"
+                    :readonly="props.editCheck === 'edit' || isRead"
+                    :outlined="props.editCheck === 'add'"
+                    dense
+                    :model-value="
+                      formData.endTimeAfternoon
+                        ? `${formData.endTimeAfternoon} น.`
+                        : '--:-- --'
+                    "
+                    borderless
+                    hide-bottom-space
+                    style="width: 140px"
+                  >
+                    <template v-slot:append>
+                      <q-icon
+                        v-if="props.editCheck !== 'edit' && !isRead"
+                        name="mdi-clock-outline"
+                        size="15px"
+                        color="dark"
+                      ></q-icon>
+                    </template>
+                  </q-input>
+                </template>
+                <template
+                  #action-row="{ internalModelValue, selectDate, closePicker }"
+                >
+                  <div class="time_picker action-row q-gutter-sm">
+                    <q-btn
+                      label="ยกเลิก"
+                      @click="closePicker"
+                      color="grey"
+                      outline
+                    >
+                    </q-btn>
+                    <q-btn label="ตกลง" @click="selectDate" color="primary">
+                    </q-btn>
+                  </div>
+                </template>
+              </datepicker>
             </div>
           </div>
           <q-input
@@ -426,6 +589,14 @@ watch(
   border-radius: 6px !important;
   border: 1px solid #e1e1e1;
 }
+
+.action-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  width: 100%;
+}
+
 $toggle-background-color-on: #06884d;
 $toggle-background-color-off: darkgray;
 $toggle-control-color: white;
diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass
index 10599d251..87f324307 100644
--- a/src/style/quasar-variables.sass
+++ b/src/style/quasar-variables.sass
@@ -48,6 +48,8 @@ $activetab: #4a5568
 .bg-activetab
     background: $activetab !important
 
+
+
 .inputgreen .q-field__prefix,
 .inputgreen .q-field__suffix,
 .inputgreen .q-field__input,
@@ -55,6 +57,10 @@ $activetab: #4a5568
 
     color: rgb(6, 136, 77)
 
+.dp__action_row
+    padding: 10px 0,
+    border-top: 1px solid #e1e1e1
+
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap')
 
 $noto-thai: 'Noto Sans Thai', sans-serif