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

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

@@ -280,14 +280,16 @@ onMounted(() => {
 
 <template>
   <div class="bg-white">
-    <div class="row q-pa-md">
+    <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="$q.screen.gt.sm ? 'col-3' : 'col-5'"
+          class="col"
+          style="max-width: 300px"
           :enableTimePicker="false"
           @update:modelValue="selectedDate"
           week-start="0"
@@ -299,7 +301,6 @@ onMounted(() => {
           <template #trigger>
             <q-input
               outlined
-            style="min-width: 250px"
               dense
               :model-value="dateThaiRange(date)"
               hide-bottom-space
@@ -311,18 +312,20 @@ onMounted(() => {
             </q-input>
           </template>
         </datepicker>
-      <div class="q-pl-sm row">
+
-        <div class="row items-center">
+        <div class="q-pl-sm row items-center">
           ตั้งแต่
           <q-input
             v-model="startTime"
             outlined
             clearable
+            @clear="selectedDate()"
             @update:model-value="
-            (v:string) => {
+            (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) => {
+            (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="col row row-color"
-          :class="{ 'bg-grey-3': index % 2 }"
           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>