ปรับ UI รายการลงเวลา

src/modules/09_leave/components/1_Work/ToolBar.vue

@@ -11,8 +11,8 @@ const { filterFn, searchDataFn } = workStore;
 </script>
 
 <template>
-  <q-toolbar style="padding: 0" class="q-gutter-sm q-mb-sm">
-    <div class="col-2">
+  <div class="row col-12 q-col-gutter-sm q-mb-sm">
+    <div class="col-xs-12 col-sm-3 col-md-2">
       <datepicker
         menu-class-name="modalfix"
         v-model="workStore.selectDate"
@@ -50,7 +50,7 @@ const { filterFn, searchDataFn } = workStore;
         </template>
       </datepicker>
     </div>
-    <div class="col-3">
+    <div class="col-xs-12 col-sm-3 col-md-2">
       <q-select
         for="selectStatus"
         emit-value
@@ -76,16 +76,21 @@ const { filterFn, searchDataFn } = workStore;
       >
     </div>
     <q-space />
-    <div class="col-2">
+    <div class="col-xs-12 col-sm-3 col-md-2">
       <q-input
         for="filterTable"
         dense
         outlined
         v-model="workStore.filterTable"
         label="ค้นหา"
-      />
+        debounce="300"
+      >
+        <template v-slot:append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
     </div>
-    <div class="col-2">
+    <div class="col-xs-12 col-sm-3 col-md-2">
       <q-select
         for="visibleColumns"
         v-model="workStore.visibleColumns"
@@ -101,7 +106,7 @@ const { filterFn, searchDataFn } = workStore;
         options-cover
       />
     </div>
-  </q-toolbar>
+  </div>
 </template>
 
 <style scoped></style>