Logs: ดึงข้อมูลใหม่เมื่อกด clear เวลา

src/modules/03_logs/components/LogTable.vue

@@ -280,49 +280,52 @@ onMounted(() => {
 
 <template>
   <div class="bg-white">
-    <div class="row q-pa-md">
-      <datepicker
-        menu-class-name="modalfix"
-        v-model="date"
-        :locale="'th'"
-        autoApply
-        range
-        :class="$q.screen.gt.sm ? 'col-3' : 'col-5'"
-        :enableTimePicker="false"
-        @update:modelValue="selectedDate"
-        week-start="0"
-      >
-        <template #year="{ year }">{{ year + 543 }}</template>
-        <template #year-overlay-value="{ value }">{{
-          parseInt(value + 543)
-        }}</template>
-        <template #trigger>
-          <q-input
-            outlined
-            style="min-width: 250px"
-            dense
-            :model-value="dateThaiRange(date)"
-            hide-bottom-space
-          >
-            <template v-slot:prepend>
-              <q-icon name="event" class="cursor-pointer" color="primary">
-              </q-icon>
-            </template>
-          </q-input>
-        </template>
-      </datepicker>
-      <div class="q-pl-sm row">
-        <div class="row items-center">
+    <div class="row q-pa-md no-wrap">
+      <div class="row col-7">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="date"
+          :locale="'th'"
+          autoApply
+          range
+          class="col"
+          style="max-width: 300px"
+          :enableTimePicker="false"
+          @update:modelValue="selectedDate"
+          week-start="0"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              :model-value="dateThaiRange(date)"
+              hide-bottom-space
+            >
+              <template v-slot:prepend>
+                <q-icon name="event" class="cursor-pointer" color="primary">
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <div class="q-pl-sm row items-center">
           ตั้งแต่
           <q-input
             v-model="startTime"
             outlined
             clearable
+            @clear="selectedDate()"
             @update:model-value="
-            (v:string) => {
-              replaceTimeInISOString(startDate,v,'start'),
-              selectedDate()
-        }
+            (v:string) =>{
+              if(v){
+                replaceTimeInISOString(startDate,v,'start'),
+                selectedDate()
+              }}
           "
             hide-bottom-space
             dense
@@ -336,21 +339,28 @@ onMounted(() => {
             v-model="endTime"
             outlined
             clearable
+            @clear="selectedDate()"
             hide-bottom-space
             @update:model-value="
-            (v:string) => {
-              replaceTimeInISOString(endDate,v,'end'),
-              selectedDate()
-            }
+            (v:string) =>{
+              if(v){
+                replaceTimeInISOString(endDate,v,'end'),
+                selectedDate()
+              }}
           "
             dense
+            stack-label="test"
             class="q-px-sm"
             type="time"
           />
         </div>
       </div>
+
       <q-space />
-      <div class="items-center q-gutter-md" style="display: flex">
+      <div
+        class="items-center justify-end q-gutter-md col-5"
+        style="display: flex"
+      >
         <!-- ค้นหาข้อความใน table -->
         <q-input
           standout
@@ -567,8 +577,7 @@ onMounted(() => {
     <div style="border: #f0ecec 1px solid; border-radius: 7px">
       <template :key="key" v-for="(item, key, index) in currentlogData">
         <div
-          class="col row"
-          :class="{ 'bg-grey-3': index % 2 }"
+          class="col row row-color"
           style="border-bottom: #f0ecec 1px solid"
           v-if="!!item"
         >
@@ -721,4 +730,8 @@ onMounted(() => {
   </DialogDataDiff>
 </template>
 
-<style scoped></style>
+<style scoped>
+.row-color:nth-child(2n + 1) {
+  background-color: #eeeeee;
+}
+</style>