เพิ่ม filter dateAppoint

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

@@ -128,6 +128,10 @@ async function fetchDataPerson() {
     queryParams.isAll = store.formFilter.isAll;
   }
 
+  if (store.formFilter.dateAppoint) {
+    queryParams.dateAppoint = store.formFilter.dateAppoint;
+  }
+
   await http
     .get(
       config.API.registryNew(empType.value !== "officer" ? "-employee" : ""),
@@ -215,7 +219,6 @@ function selectType() {
     fetchOptionGroup();
   } else {
     store.formFilter.isProbation = false;
-
     fetchType();
   }
 
@@ -224,6 +227,7 @@ function selectType() {
     store.labelOption.posType = "ทั้งหมด";
     store.labelOption.posLevel = "ทั้งหมด";
     store.formFilter.type = empType.value;
+    store.formFilter.dateAppoint = "";
     store.labelOption.node =
       empType.value === "officer"
         ? "เลือกหน่วยงาน/ส่วนราชการ"
@@ -237,7 +241,8 @@ function selectType() {
       store.labelOption.posLevel != "ทั้งหมด" ||
       store.formFilter.isShowRetire ||
       store.formFilter.isProbation ||
-      store.formFilter.nodeId != null
+      store.formFilter.nodeId != null ||
+      store.formFilter.dateAppoint != ""
     ) {
       store.formFilter.page = 1;
       fetchDataPerson();
@@ -282,6 +287,12 @@ function selectRetireType(item: DataOption) {
   fetchDataPerson();
 }
 
+function selectDisplayOrderType(item: DataOption) {
+  store.formFilter.page = 1;
+  store.formFilter.dateAppoint = item.id;
+  fetchDataPerson();
+}
+
 /**
  * function เคลีย์ตัวเลือก
  * @param t ประเภทตัวเลือก
@@ -362,12 +373,12 @@ watch(selectNode, () => {
   isLoad.value && hideLoader();
 });
 
-/** hook เมื่อมีการเรียกใช้ Components*/
 function getSearch() {
   store.formFilter.page = 1;
   fetchDataPerson();
 }
 
+/** hook เมื่อมีการเรียกใช้ Components*/
 onMounted(async () => {
   await Promise.all([selectType(), fetchTree()]);
 });
@@ -582,7 +593,6 @@ onMounted(async () => {
               label="แสดงข้อมูลผู้พ้นจากราชการ"
               @update:model-value="getSearch"
             />
-
             <q-btn-dropdown
               v-if="store.formFilter.isShowRetire"
               rounded
@@ -622,6 +632,41 @@ onMounted(async () => {
                 </q-item>
               </q-list>
             </q-btn-dropdown>
+
+            <q-separator inset vertical class="lineFil" />
+            <q-btn-dropdown
+              rounded
+              flat
+              dense
+              label-color="white"
+              dropdown-icon="mdi-chevron-down"
+              class="q-px-sm"
+            >
+              <template v-slot:label>
+                {{
+                  `ลำดับการแสดผล ${
+                    store.formFilter.dateAppoint
+                      ? store.formFilter.dateAppoint === "ASC"
+                        ? "ล่าสุด-เก่า"
+                        : "เก่า-ล่าสุด"
+                      : ""
+                  }`
+                }}
+              </template>
+              <q-list>
+                <q-item
+                  v-for="(item, index) in store.displayOrderOps"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="selectDisplayOrderType(item)"
+                >
+                  <q-item-section>
+                    <q-item-label>{{ item.name }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
           </div>
 
           <div
@@ -687,6 +732,41 @@ onMounted(async () => {
                 </q-item>
               </q-list>
             </q-btn-dropdown>
+
+            <q-separator inset vertical class="lineFil" />
+            <q-btn-dropdown
+              rounded
+              flat
+              dense
+              label-color="white"
+              dropdown-icon="mdi-chevron-down"
+              class="q-px-sm"
+            >
+              <template v-slot:label>
+                {{
+                  `ลำดับการแสดผล ${
+                    store.formFilter.dateAppoint
+                      ? store.formFilter.dateAppoint === "ASC"
+                        ? "ล่าสุด-เก่า"
+                        : "เก่า-ล่าสุด"
+                      : ""
+                  }`
+                }}
+              </template>
+              <q-list>
+                <q-item
+                  v-for="(item, index) in store.displayOrderOps"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="selectDisplayOrderType(item)"
+                >
+                  <q-item-section>
+                    <q-item-label>{{ item.name }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
           </div>
         </div>
       </div>