Merge branch 'nice' into develop

src/modules/03_recruiting/views/03_editor/index.vue

@@ -59,8 +59,11 @@ const qeditor = ref<string>("");
 const title = ref<string>("");
 const filter = ref<string>(""); //search data table
 const filterAgency = ref<string>(""); //search data table
+const provinceOptionsMain = ref<DataOption[]>([]);
 const provinceOptions = ref<DataOption[]>([]);
+const districtOptionsMain = ref<DataOption[]>([]);
 const districtOptions = ref<DataOption[]>([]);
+const subdistrictOptionsMain = ref<zipCodeOption[]>([]);
 const subdistrictOptions = ref<zipCodeOption[]>([]);
 const cmsGoverment = ref<CmsTable[]>([]);
 const cmsAgency = ref<CmsTable[]>([]);
@@ -570,6 +573,7 @@ async function fetchProvince() {
         option.push({ id: r.id.toString(), name: r.name.toString() });
       });
       provinceOptions.value = option;
+      provinceOptionsMain.value = option;
     })
     .catch((e: any) => {
       messageError($q, e);
@@ -595,6 +599,7 @@ async function fetchDistrict(id: string | null) {
           option.push({ id: r.id.toString(), name: r.name.toString() });
         });
         districtOptions.value = option;
+        districtOptionsMain.value = option;
       })
       .catch((e: any) => {
         messageError($q, e);
@@ -625,6 +630,7 @@ async function fetchSubDistrict(id: string | null) {
           });
         });
         subdistrictOptions.value = option;
+        subdistrictOptionsMain.value = option;
       })
       .catch((e: any) => {
         messageError($q, e);
@@ -737,6 +743,33 @@ function getClass(val: boolean) {
   };
 }
 
+function filterSelector(val: string, update: Function, refData: string) {
+  switch (refData) {
+    case "province":
+      update(() => {
+        provinceOptions.value = provinceOptionsMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "district":
+      update(() => {
+        districtOptions.value = districtOptionsMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "subdistrict":
+      update(() => {
+        subdistrictOptions.value = subdistrictOptionsMain.value.filter(
+          (v: zipCodeOption) => v.name.indexOf(val) > -1
+        );
+      });
+    default:
+      break;
+  }
+}
+
 onMounted(async () => {
   await fetchData();
   await fetchProvince();
@@ -1017,8 +1050,22 @@ onMounted(async () => {
               :options="provinceOptions"
               option-value="id"
               :label="`${'จังหวัด'}`"
-              @update:model-value="(value:any) => selectProvince(value)"
-            />
+              use-input
+              hide-selected
+              fill-input
+              @update:model-value="(value:string) => selectProvince(value)"
+              @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'province'
+              )"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-italic text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
           </div>
           <div class="col-xs-6 col-sm-3 col-md-3">
             <q-select
@@ -1037,8 +1084,22 @@ onMounted(async () => {
               :options="districtOptions"
               option-value="id"
               :label="`${'เขต / อำเภอ'}`"
-              @update:model-value="(value:any) => selectDistrict(value)"
-            />
+              use-input
+              hide-selected
+              fill-input
+              @update:model-value="(value:string) => selectDistrict(value)"
+              @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'district'
+              )"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-italic text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
           </div>
           <div class="col-xs-6 col-sm-3 col-md-3">
             <q-select
@@ -1056,9 +1117,23 @@ onMounted(async () => {
               option-label="name"
               :options="subdistrictOptions"
               option-value="id"
-              :label="`${'แขวง/ตำบล '}`"
-              @update:model-value="(value:any) => selectSubDistrict(value)"
-            />
+              :label="`${'แขวง/ตำบล'}`"
+              use-input
+              hide-selected
+              fill-input
+              @update:model-value="(value:string) => selectSubDistrict(value)"
+              @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'subdistrict'
+              )"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-italic text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template></q-select
+            >
           </div>
           <div class="col-xs-6 col-sm-3 col-md-3">
             <q-input