ปรับวินัย

src/modules/11_discipline/components/1_Complaint/MainPage.vue

@@ -22,13 +22,13 @@ const router = useRouter();
 /** stoer */
 const complainstStore = useComplainstDataStore();
 const { fetchComplainst } = complainstStore;
-
+const filterRef = ref<HTMLInputElement | null>(null);
 const filterTable = ref<string>("");
 const filterKeyword = ref<string>("");
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
 const rowsPerPage = ref<number>(10);
-const statusFilter = ref<string>('ALL')
+const statusFilter = ref<string>("ALL");
 
 async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
   rowsPerPage.value = rowPerpage;
@@ -69,8 +69,16 @@ function filterFn() {
   getList();
 }
 
-function dataUpdate(){
-console.log(statusFilter.value)
+function dataUpdate() {
+  console.log(statusFilter.value);
+}
+
+function resetFilter() {
+  filterKeyword.value = "";
+  if (filterRef.value) {
+    filterRef.value.focus();
+    getList();
+  }
 }
 
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
@@ -80,7 +88,9 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">รายการเรื่องร้องเรียน</div>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการเรื่องร้องเรียน
+  </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
       <div class="col-2">
@@ -113,18 +123,25 @@ onMounted(async () => {
       <q-space />
 
       <q-input
+        for="#search"
         class="col-xs-12 col-sm-3 col-md-2"
-        id="filterTable"
-        for="filterTable"
+        standout
         dense
-        outlined
         v-model="filterKeyword"
-        label="ค้นหา"
+        ref="filterRef"
+        outlined
         debounce="300"
+        placeholder="ค้นหา"
         @keydown.enter.prevent="filterFn"
       >
         <template v-slot:append>
-          <q-icon name="search" />
+          <q-icon v-if="filterKeyword == ''" name="search" />
+          <q-icon
+            v-if="filterKeyword !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
         </template>
       </q-input>