validateForm เพิ่มเรื่องร้องเรียน

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

@@ -1,23 +1,27 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 
-import type { DataOption } from "../../interface/index/Main";
+// import Type
+import type {
+  DataOption,
+  MyObjectComplaintsRef,
+} from "../../interface/index/Main";
 
 // importStroe
 import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "../../stroes/ComplaintsStore";
 
-const route = useRoute();
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { date2Thai, dialogConfirm } = mixin;
+const { date2Thai, dialogConfirm } = mixin; //function จาก stores หลัก
 
 const complainstStore = useComplainstDataStore();
-const { selectComplainantTpye, filterSelector, fectOptioin } = complainstStore;
+const { selectComplainantTpye, filterSelector, fectOptioin } = complainstStore; // function จาก store complainstStore
 
+// options ทั้งหมด
 const complainantoptions = ref<DataOption[]>([
   { id: "0", name: "บุคคล" },
   { id: "1", name: "หน่ายงาน" },
@@ -67,15 +71,15 @@ const fileDocDataUpload = ref<File[]>([]);
 onMounted(() => {
   fectOptioin(complainantoptions.value, agencytoptions.value);
 });
-
+// เลือกผู้ร้องเรียน
 async function selectComplainant(val: string) {
   complainant.value = "";
   office.value = "";
   agency.value = "";
   if (val === "0") {
-    await fectListname();
+    await fectListname(); // ถ้าเลือกบุกคลจะเรียก function fectListname เรียกรายชื่อจากทะเบียน
   } else if (val === "1") {
-    await fectOffice();
+    await fectOffice(); // ถ้าเลือกหน่วยงานจะเรียก function fectOffice  เรียกโครงสร้างสำนักงาน
   }
 }
 // เรียกรายชื่อ
@@ -96,6 +100,7 @@ async function fectListname() {
   ];
   selectComplainantTpye(listName);
 }
+// เรียกโครงสร้างสำนักงาน
 async function fectOffice() {
   // const listOffice = [
   //   {
@@ -112,22 +117,23 @@ async function fectOffice() {
   //   },
   // ];
 }
+// อัพโหลดไฟล์
 const fileUploadDoc = async (files: any) => {
   files.forEach((file: any) => {
     fileDocDataUpload.value.push(file);
   });
 };
-
+// เลือกระดับการพิจารณา
 function selectLevel(val: string) {
   let dayNum = 0;
   if (val == "0") {
-    dayNum = 45;
+    dayNum = 45; // ปกติ
   } else if (val == "1") {
-    dayNum = 30;
+    dayNum = 30; // ด่วน
   } else {
-    dayNum = 15;
+    dayNum = 15; // ด่วนมาก
   }
-
+  // วันแจ้งเตือนล่วงหน้า
   if (dateconsideration.value) {
     const currentDate = new Date(dateconsideration.value);
     const newDate = new Date(
@@ -136,7 +142,56 @@ function selectLevel(val: string) {
     datewarn.value = newDate;
   }
 }
+// validateForm
+const complainantTypeRef = ref<any>(null);
+const complainantRef = ref<any>(null);
+const officeRef = ref<any>(null);
+const agencyRef = ref<any>(null);
+const topicComplaintRef = ref<any>(null);
+const detailRef = ref<any>(null);
+const datereceiveRef = ref<any>();
+const dateconsiderationRef = ref<any>(null);
+const offenseDescriptionRef = ref<any>(null);
+const considerationLevelRef = ref<any>(null);
+const datewarnRef = ref<any>(null);
+const receivecomplaintsRef = ref<any>(null);
+const petitionerRef = ref<any>(null);
+const filesRef = ref<any>(null);
 
+const objectComplaintsRef: MyObjectComplaintsRef = {
+  complainantType: complainantTypeRef,
+  complainant: complainantRef,
+  office: officeRef,
+  agency: agencyRef,
+  topicComplaint: topicComplaintRef,
+  detail: detailRef,
+  datereceive: datereceiveRef,
+  dateconsideration: dateconsiderationRef,
+  offenseDescription: offenseDescriptionRef,
+  considerationLevel: considerationLevelRef,
+  datewarn: datewarnRef,
+  receivecomplaints: receivecomplaintsRef,
+  petitioner: petitionerRef,
+  files: filesRef,
+};
+function validateForm() {
+  const hasError = [];
+  for (const key in objectComplaintsRef) {
+    if (Object.prototype.hasOwnProperty.call(objectComplaintsRef, key)) {
+      const property = objectComplaintsRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  } else {
+    console.log("ไม่ผ่าน ");
+  }
+}
+// บันทึกข้อมูล
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -162,13 +217,14 @@ function onSubmit() {
   </div>
   <div class="col-12 q-mt-sm">
     <q-card flat bordered>
-      <q-form @submit.prevent="onSubmit">
+      <form @submit.prevent="validateForm">
         <div class="col-12 row q-pa-md">
           <div
             class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs"
           >
             <div class="col-xs-12 col-sm-2">
               <q-select
+                ref="complainantTypeRef"
                 dense
                 outlined
                 v-model="complainantType"
@@ -185,26 +241,58 @@ function onSubmit() {
                 @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantType'
                 )"
-              />
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
             </div>
+
             <div class="col-xs-12 col-sm-2" v-if="complainantType === '0'">
               <q-select
+                ref="complainantRef"
                 dense
                 outlined
                 v-model="complainant"
                 :options="complainstStore.optionListName"
-                label="ราชชื่อจากทะเบียรประวัติ"
+                label="รายชื่อจากทะเบียรประวัติ"
                 option-value="id"
                 option-label="name"
                 emit-value
                 map-options
-              />
+                :rules="[(val) => !!val || `${'กรุณาเลือกรายชื่อ'}`]"
+                lazy-rules
+                use-input
+                @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'filtercomplainantOP'
+                )"
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
             </div>
             <div class="col-xs-12 col-sm-2" v-if="complainantType === '1'">
-              <q-input dense outlined v-model="office" label="เลือกสำนักงาน" />
+              <q-input
+                ref="officeRef"
+                dense
+                outlined
+                v-model="office"
+                label="เลือกสำนักงาน"
+                :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
+                lazy-rules
+              />
             </div>
             <div class="col-xs-12 col-sm-2">
               <q-select
+                ref="agencyRef"
                 dense
                 outlined
                 v-model="agency"
@@ -220,10 +308,19 @@ function onSubmit() {
                 @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'filteragencytoptions'
                 )"
-              />
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
             </div>
             <div class="col-xs-12 col-sm-12">
               <q-input
+                ref="topicComplaintRef"
                 dense
                 outlined
                 v-model="topicComplaint"
@@ -236,6 +333,7 @@ function onSubmit() {
             </div>
             <div class="col-xs-12 col-sm-12">
               <q-input
+                ref="detailRef"
                 dense
                 outlined
                 v-model="detail"
@@ -264,6 +362,7 @@ function onSubmit() {
                 </template>
                 <template #trigger>
                   <q-input
+                    ref="datereceiveRef"
                     outlined
                     dense
                     class="full-width datepicker"
@@ -306,6 +405,7 @@ function onSubmit() {
                 </template>
                 <template #trigger>
                   <q-input
+                    ref="dateconsiderationRef"
                     outlined
                     dense
                     class="full-width datepicker"
@@ -334,6 +434,7 @@ function onSubmit() {
             </div>
             <div class="col-xs-12 col-sm-2">
               <q-select
+                ref="offenseDescriptionRef"
                 dense
                 outlined
                 v-model="offenseDescription"
@@ -349,6 +450,7 @@ function onSubmit() {
             </div>
             <div class="col-xs-12 col-sm-2">
               <q-select
+                ref="considerationLevelRef"
                 dense
                 outlined
                 v-model="considerationLevel"
@@ -382,6 +484,7 @@ function onSubmit() {
                 </template>
                 <template #trigger>
                   <q-input
+                    ref="datewarnRef"
                     outlined
                     dense
                     class="full-width datepicker"
@@ -407,6 +510,7 @@ function onSubmit() {
             </div>
             <div class="col-xs-12 col-sm-2">
               <q-select
+                ref="receivecomplaintsRef"
                 dense
                 outlined
                 v-model="receivecomplaints"
@@ -423,6 +527,7 @@ function onSubmit() {
             <div class="col-xs-12 col-sm-6"></div>
             <div class="col-xs-12 col-sm-4">
               <q-input
+                ref="petitionerRef"
                 dense
                 outlined
                 v-model="petitioner"
@@ -433,6 +538,7 @@ function onSubmit() {
             </div>
             <div class="col-xs-12 col-sm-4">
               <q-file
+                ref="filesRef"
                 class="col-xs-12 col-sm-10"
                 outlined
                 dense
@@ -443,6 +549,7 @@ function onSubmit() {
                 lazy-rules
                 accept=".pdf,.xlsx,.doc"
                 clearable
+                :rules="[(val) => !!val || `${'กรุณาเพิ่มไฟล์เอกสารหลักฐาน'}`]"
               >
                 <template v-slot:prepend>
                   <q-icon name="attach_file" />
@@ -463,7 +570,7 @@ function onSubmit() {
             ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
           >
         </div>
-      </q-form>
+      </form>
     </q-card>
   </div>
 </template>

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

@@ -7,7 +7,7 @@ import { useComplainstDataStore } from "../../stroes/ComplaintsStore";
 const router = useRouter();
 
 const complainstStore = useComplainstDataStore();
-const { fectComplainst } = complainstStore;
+const { fectComplainst } = complainstStore; // function จาก stores
 
 //ข้อมูล Table
 const filterTable = ref<string>("");
@@ -99,6 +99,7 @@ onMounted(async () => {
   await fecthListComplaints();
 });
 
+// เรีนกรายการเรื่องร้องเรียน
 async function fecthListComplaints() {
   const listData = [
     {

src/modules/11_discipline/components/4_Order/MainPage.vue

@@ -8,8 +8,9 @@ import { useOrderStore } from "../../stroes/OrderStore";
 
 const router = useRouter();
 const OrderStore = useOrderStore();
-const { fecthOrder } = OrderStore;
+const { fecthOrder } = OrderStore; // function จาก stores
 
+// ข้อมูล table
 const columns = ref<QTableProps["columns"]>([
   {
     name: "subject",
@@ -74,13 +75,13 @@ const visibleColumns = ref<string[]>([
   "signer",
   "statusorder",
 ]);
-
 const filterTable = ref<string>("");
 
 onMounted(async () => {
   await fecthListOrder();
 });
 
+// เรียกรายการคำสั่ง จาก API
 async function fecthListOrder() {
   const listData = [
     {
@@ -108,9 +109,10 @@ async function fecthListOrder() {
       statusorder: "เสร็จสิ้นแล้ว",
     },
   ];
-  await fecthOrder(listData);
+  await fecthOrder(listData); // ส่งข้อมูลไปยัง stores
 }
 
+// redirect ไปยังการเพิ่มออกคำสั่งลงโทษทางวินัย
 function redirectToPageadd() {
   router.push(`/discipline-order/add`);
 }

src/modules/11_discipline/components/4_Order/OrderPage.vue

@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 
+// import step
 import step01 from "./Step01.vue";
 import step02 from "./Step02.vue";
 import step03 from "./Step03.vue";
@@ -9,11 +10,12 @@ import step03 from "./Step03.vue";
 const router = useRouter();
 
 const step = ref<number>(1);
-
+// nextStep
 const nextStep = async () => {
   localStorage.setItem("currentStep", step.value.toString());
   step.value++;
 };
+// previousStep
 const previousStep = async () => {
   localStorage.setItem("currentStep", step.value.toString());
   step.value--;

src/modules/11_discipline/components/4_Order/Step01.vue

@@ -2,7 +2,7 @@
 import { ref } from "vue";
 import { useQuasar } from "quasar";
 
-import type { DataOption } from "../../interface/index/Main";
+import type { DataOption, MyObjectRef } from "../../interface/index/Main";
 // importStroe
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -21,7 +21,7 @@ const props = defineProps({
   },
 });
 const next = () => props.next();
-
+// Options ต่างๆ
 const orderTypeOptions = ref<DataOption[]>([
   { id: "0", name: "ประเภทคำสั่ง 1" },
   { id: "1", name: "ประเภทคำสั่ง 2" },
@@ -37,7 +37,7 @@ const listInvestigationOptions = ref<DataOption[]>([
   { id: "1", name: "รายการสอบสวนความผิดทางวินัย 2" },
   { id: "2", name: "รายการสอบสวนความผิดทางวินัย 3" },
 ]);
-
+// ตัวแปรทั้งหมด
 const orderType = ref<string>("");
 const orderBy = ref<string>("");
 const listInvestigation = ref<string>("");
@@ -49,6 +49,47 @@ const authorityPosition = ref<string>("");
 const subject = ref<string>("");
 const mistakeDetail = ref<string>("");
 
+// validateForm
+const orderTypeRef = ref<any>(null);
+const orderByRef = ref<any>(null);
+const listInvestigationRef = ref<any>(null);
+const authorityRef = ref<any>(null);
+const orderNumberRef = ref<any>(null);
+const dateYearRef = ref<any>(null);
+const dateRef = ref<any>(null);
+const authorityPositionRef = ref<any>(null);
+const subjectRef = ref<any>(null);
+const mistakeDetailRef = ref<any>(null);
+const myObjectRef: MyObjectRef = {
+  orderType: orderTypeRef,
+  orderBy: orderByRef,
+  listInvestigation: listInvestigationRef,
+  authority: authorityRef,
+  orderNumber: orderNumberRef,
+  dateYear: dateYearRef,
+  date: dateRef,
+  authorityPosition: authorityPositionRef,
+  subject: subjectRef,
+  mistakeDetail: mistakeDetailRef,
+};
+function validateForm() {
+  const hasError = [];
+  for (const key in myObjectRef) {
+    if (Object.prototype.hasOwnProperty.call(myObjectRef, key)) {
+      const property = myObjectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  } else {
+    console.log("ไม่ผ่าน ");
+  }
+}
+
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -62,12 +103,13 @@ function onSubmit() {
 </script>
 
 <template>
-  <q-form @submit.prevent="onSubmit">
+  <form @submit.prevent.stop="validateForm">
     <div class="col-12 row q-pa-lg">
       <div class="col-xs-12 col-sm-12 q-col-gutter-x-lg row q-col-gutter-y-xs">
         <div class="col-xs-12 col-sm-6">
           ประเภทคำสั่ง
           <q-select
+            ref="orderTypeRef"
             dense
             outlined
             v-model="orderType"
@@ -84,6 +126,7 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-6">
           คำสั่งโดย
           <q-select
+            ref="orderByRef"
             dense
             outlined
             v-model="orderBy"
@@ -100,6 +143,7 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-6">
           เลือกรายการสอบสวนความผิดทางวินัย
           <q-select
+            ref="listInvestigationRef"
             dense
             outlined
             v-model="listInvestigation"
@@ -118,6 +162,7 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-6">
           ผู้มีอำนาจลงนาม
           <q-input
+            ref="authorityRef"
             dense
             outlined
             v-model="authority"
@@ -130,6 +175,7 @@ function onSubmit() {
           <div class="col-6">
             คำสั่งที่
             <q-input
+              ref="orderNumberRef"
               outlined
               dense
               v-model="orderNumber"
@@ -157,6 +203,7 @@ function onSubmit() {
               }}</template>
               <template #trigger>
                 <q-input
+                  ref="dateYearRef"
                   :model-value="dateYear + 543"
                   :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
                   :label="`${'พ.ศ.'}`"
@@ -187,6 +234,7 @@ function onSubmit() {
             </template>
             <template #trigger>
               <q-input
+                ref="dateRef"
                 outlined
                 dense
                 class="full-width datepicker"
@@ -208,6 +256,7 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-6">
           ตำแหน่งผู้มีอำนาจลงนาม
           <q-input
+            ref="authorityPositionRef"
             dense
             outlined
             v-model="authorityPosition"
@@ -219,6 +268,7 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-6">
           คำสั่งเรื่อง
           <q-input
+            ref="subjectRef"
             dense
             outlined
             v-model="subject"
@@ -230,6 +280,7 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-12">
           รายละเอียดการกระทำความผิด
           <q-input
+            ref="mistakeDetailRef"
             dense
             outlined
             v-model="mistakeDetail"
@@ -252,7 +303,7 @@ function onSubmit() {
         type="submit"
       />
     </q-card-actions>
-  </q-form>
+  </form>
 </template>
 
 <style scoped></style>

src/modules/11_discipline/components/4_Order/Step02.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from "vue";
 const props = defineProps({
   next: {
     type: Function,
@@ -11,10 +12,79 @@ const props = defineProps({
 });
 const next = () => props.next();
 const previous = () => props.previous();
+
+const name = ref<string>("");
+const lastname = ref<string>("");
+const age = ref<string>("");
+
+const nameRef = ref<any>(null);
+const ageRef = ref<any>(null);
+const lastnameRef = ref<any>(null);
+const myObject: MyObject = {
+  name: nameRef,
+  lastname: lastnameRef,
+  age: ageRef,
+};
+interface MyObject {
+  name: any;
+  lastname: any;
+  age: any;
+  [key: string]: any;
+}
+
+function onSubmit() {
+  const hasError = [];
+  for (const key in myObject) {
+    if (Object.prototype.hasOwnProperty.call(myObject, key)) {
+      const property = myObject[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    console.log("ผ่าน  สำเร็จ!");
+  } else {
+    console.log("ไม่ผ่าน ");
+  }
+}
 </script>
 
 <template>
   <div><h1>step02</h1></div>
+  <form @submit.prevent.stop="onSubmit" class="q-gutter-md">
+    <q-input
+      ref="nameRef"
+      filled
+      v-model="name"
+      label="Your name *"
+      hint="Name and surname"
+      lazy-rules
+      :rules="[(val) => !!val || `${'Name and surname'}`]"
+    />
+    <q-input
+      ref="lastnameRef"
+      filled
+      v-model="lastname"
+      label="lastname *"
+      lazy-rules
+      :rules="[(val) => !!val || `${'lastname'}`]"
+    />
+    <q-input
+      ref="ageRef"
+      filled
+      type="number"
+      v-model="age"
+      label="Your age *"
+      lazy-rules
+      :rules="[(val) => !!val || `${'Your age'}`]"
+    />
+
+    <div>
+      <q-btn label="Submit" type="submit" color="primary" />
+    </div>
+  </form>
   <q-card-actions align="right">
     <q-btn
       dense

src/modules/11_discipline/interface/index/Main.ts

@@ -22,11 +22,28 @@ interface MyObjectRef {
     mistakeDetail: any,
     [key: string]: any;
 }
+interface MyObjectComplaintsRef {
+    complainantType: any
+    complainant: any
+    office: any
+    agency: any
+    topicComplaint: any
+    datereceive: any
+    dateconsideration: any
+    offenseDescription: any
+    considerationLevel: any
+    datewarn: any
+    receivecomplaints: any
+    petitioner: any
+    files: any
+    [key: string]: any;
+}
 
 export type {
     DataOption,
     investigatefactsDataRowType,
     MyObjectRef,
+    MyObjectComplaintsRef,
 };
 
 

src/modules/11_discipline/stroes/ComplaintsStore.ts

@@ -5,7 +5,7 @@ import type { DataOption } from "../interface/index/Main";
 
 export const useComplainstDataStore = defineStore("DisciplineComplainst", () => {
     const rows = ref<any>([])
-    const optionListName = ref<any>([{}])
+
 
 
     function fectComplainst(data: any) {
@@ -21,49 +21,39 @@ export const useComplainstDataStore = defineStore("DisciplineComplainst", () =>
         rows.value = datalist
     }
 
-    function selectComplainantTpye(list: any) {
+
-        optionListName.value = list
-    }
 
     const complainantoptionsMain = ref<DataOption[]>()
     const complainantoptions = ref<DataOption[]>()
     const agencytoptionsMain = ref<DataOption[]>()
     const agencytoptions = ref<DataOption[]>()
+    const optionListNameMain = ref<DataOption[]>([])
+    const optionListName = ref<DataOption[]>([])
     function fectOptioin(complainantoptions: any, agencytoptions: any) {
         complainantoptionsMain.value = complainantoptions
         agencytoptionsMain.value = agencytoptions
-
+    }
+    function selectComplainantTpye(list: any) {
+        optionListNameMain.value = list
+        optionListName.value = list
     }
     function filterSelector(val: any, update: Function, type: string) {
-        console.log(val, type);
+        update(() => {
-        let data: DataOption[] | undefined = undefined;
+            if (type === "filtercomplainantType" && complainantoptionsMain.value) {
-        let filter: DataOption[] | undefined = undefined;
+                complainantoptions.value = complainantoptionsMain.value.filter(
-        if (type == "filtercomplainantType") {
+                    (e) => e.name.search(val) !== -1
-            data = complainantoptionsMain.value
+                );
-        } else if (type == "filteragencytoptions") {
+            } else if (type === "filteragencytoptions" && agencytoptionsMain.value) {
-            data = agencytoptionsMain.value
+                agencytoptions.value = agencytoptionsMain.value.filter(
-        }
+                    (e) => e.name.search(val) !== -1
-        if (val == "") {
+                );
-            update(() => {
+            } else if (type === "filtercomplainantOP" && optionListNameMain.value) {
-                filter = data;
+                optionListName.value = optionListNameMain.value.filter(
-            });
+                    (e) => e.name.search(val) !== -1
-        } else {
+                );
-            update(() => {
-                if (data) {
-                    filter = data.filter(
-                        (e) => e.name.search(val) !== -1
-                    );
-                }
-            });
-        }
-        if (filter) {
-            if (type == "filtercomplainantType") {
-                complainantoptions.value = filter
-            } else if (type = "filteragencytoptions") {
-                agencytoptions.value = filter
             }
-        }
 
+        })
     }
     return {
         rows,