updated ux registry filter

src/modules/04_registryPerson/components/TableView.vue

@@ -35,7 +35,7 @@ const props = defineProps({
   rows: { type: Array },
   fetchData: { type: Function },
   fetchType: { type: Function },
-  total: { type: Number },
+  total: { type: Number, default: 0 },
 });
 
 /**
@@ -239,6 +239,9 @@ watch(
       >
     </div>
     <q-space />
+    <div v-if="total > 0" class="text-teal">
+      พบข้อมูลทั้งหมด {{ total.toLocaleString() }} รายการ
+    </div>
     <q-select
       v-if="store.mode === 'table'"
       v-model="visibleColumns"

src/modules/04_registryPerson/interface/request/Main.ts

@@ -9,6 +9,7 @@ interface FormFilter {
   rangeYear: { min: number; max: number };
   isShowRetire: boolean | null;
   isProbation: boolean | null;
+  isAll?: boolean;
 }
 
 interface FormAddPerson {

src/modules/04_registryPerson/store.ts

@@ -61,6 +61,7 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
     rangeYear: { min: 0, max: 60 },
     isShowRetire: false,
     isProbation: false,
+    isAll: true,
   });
 
   const labelOption = reactive({

src/modules/04_registryPerson/views/list.vue

@@ -147,6 +147,8 @@ function fetchDataPerson() {
     queryParams.node = store.nodeData.node;
     queryParams.nodeId = store.nodeData.nodeId;
   }
+
+  queryParams.isAll = store.formFilter.isAll;
   http
     .get(
       config.API.registryNew(empType.value !== "officer" ? "-employee" : ""),
@@ -242,6 +244,8 @@ async function selectType() {
     store.formFilter.isProbation = null;
     fetchOptionGroup();
   } else {
+    store.formFilter.isShowRetire = false;
+    store.formFilter.isProbation = false;
     fetchType();
   }
 
@@ -432,7 +436,7 @@ onMounted(async () => {
                   clearable
                   placeholder="ค้นหา"
                   class="col-9 q-pr-md"
-                  @clear="fetchDataPerson"
+                  @clear="store.formFilter.keyword = ''"
                 >
                   <template v-slot:before>
                     <q-icon name="search" color="deep-orange" />
@@ -450,18 +454,16 @@ onMounted(async () => {
               </div>
             </div>
           </q-form>
-          <div v-if="isShowBtnFilter" class="col-12 row q-mt-sm">
-            <q-space />
-            พบข้อมูลทั้งหมด {{ total.toLocaleString() }} รายการ
-            <!-- <q-btn
+          <!-- <div v-if="isShowBtnFilter" class="col-12 row q-mt-sm">
+            <q-btn
               flat
               label="ตัวเลือกเพิ่มเติม"
               icon-right="mdi-tune"
               @click="onClickShowFilter"
               dense
               class="q-px-sm"
-            ></q-btn> -->
-          </div>
+            ></q-btn>
+          </div> -->
 
           <div
             :class="
@@ -597,10 +599,18 @@ onMounted(async () => {
               inset
               vertical
               class="lineFil"
-              v-if="empType === 'officer'"
+              v-if="empType !== 'officer'"
             />
 
-            <q-btn-dropdown
+            <q-toggle
+              v-if="empType !== 'officer'"
+              v-model="store.formFilter.isAll"
+              color="primary"
+              label="แสดงตำแหน่งทั้งหมด"
+              @update:model-value="fetchDataPerson"
+            />
+
+            <!-- <q-btn-dropdown
               v-if="empType === 'officer'"
               flat
               dense
@@ -632,7 +642,31 @@ onMounted(async () => {
                   </q-item-section>
                 </q-item>
               </q-list>
-            </q-btn-dropdown>
+            </q-btn-dropdown> -->
+          </div>
+
+          <div
+            v-if="empType === 'officer'"
+            class="row q-gutter-sm justify-center"
+          >
+            <q-toggle
+              v-model="store.formFilter.isProbation"
+              color="primary"
+              label="ทดลองปฏิบัติหน้าที่ราชการ"
+              @update:model-value="fetchDataPerson"
+            />
+            <q-toggle
+              v-model="store.formFilter.isShowRetire"
+              color="primary"
+              label="แสดงข้อมูลผู้พ้นจากราชการ"
+              @update:model-value="fetchDataPerson"
+            />
+            <q-toggle
+              v-model="store.formFilter.isAll"
+              color="primary"
+              label="แสดงตำแหน่งทั้งหมด"
+              @update:model-value="fetchDataPerson"
+            />
           </div>
         </div>
       </div>
@@ -723,8 +757,8 @@ onMounted(async () => {
       <q-separator />
 
       <q-card-actions align="right">
-        <q-btn label="ค้นหา" color="secondary" @click="sendNode"
-          ><q-tooltip>ค้นหา</q-tooltip></q-btn
+        <q-btn label="ค้นหา" color="secondary" @click="sendNode">
+          <q-tooltip>ค้นหา</q-tooltip></q-btn
         >
       </q-card-actions>
     </q-card>