adding code to fill the filters with options from URLs if any

Author: prakhyatox

src/components/Loaders/Loaders.vue

@@ -8,7 +8,7 @@
           class="align-center justify-center"
           opacity="0.8"
         >
-          <Loaders />
+          <Loaders v-if="getLoadingStatus" />
         </v-overlay>
       </div>
     </v-fade-transition>

src/components/Registry/ApplyFilterButton.vue

@@ -1,5 +1,6 @@
 <template>
   <SelectComponent
+    v-model="model"
     :disabled="disabled"
     :format="true"
     :item-list="toolsList"
@@ -19,6 +20,7 @@ import { storeToRefs } from "pinia";
 export default {
   name: "MetricsToolFilter",
   components: { SelectComponent },
+  emits: ["input"],
   setup() {
     const advancedSearchStore = useAdvancedSearchStore();
     const { getRecordTypeSelected } = storeToRefs(advancedSearchStore);
@@ -36,6 +38,14 @@ export default {
     };
   },
   computed: {
+    model: {
+      get() {
+        return this.itemSelected;
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
     //Disable this filter if benchmark is selected
     disabled() {
       if (
@@ -57,6 +67,14 @@ export default {
   },
   mounted() {
     this.getTools();
+
+    //Pre-fill selected values from the URL in the component if any
+    this.$nextTick(() => {
+      let filterArr = this.advancedSearchStore.toolsSelected["toolNames"];
+      if (filterArr && filterArr.length) {
+        this.itemValue = this.advancedSearchStore.toolsSelected["toolNames"];
+      }
+    });
   },
   methods: {
     selectedValue(item) {

src/components/Registry/FilterComponents/MetricsToolFilter.vue

@@ -1,5 +1,6 @@
 <template>
   <SelectComponent
+    v-model="model"
     :disabled="disabled"
     :item-list="getObjectTypes"
     :item-value="itemValue"
@@ -17,6 +18,7 @@ import { useAdvancedSearchStore } from "@/stores/advancedSearch.js";
 export default {
   name: "ObjectTypeFilter",
   components: { SelectComponent },
+  emits: ["input"],
   setup() {
     const store = useObjectTypesStore();
     const advancedSearchStore = useAdvancedSearchStore();
@@ -40,6 +42,14 @@ export default {
     };
   },
   computed: {
+    model: {
+      get() {
+        return this.itemSelected;
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
     //Disable this filter if benchmark is selected
     disabled() {
       if (
@@ -65,6 +75,15 @@ export default {
   },
   mounted() {
     this.store.fetchObjectTypes();
+
+    //Pre-fill selected values from the URL in the component if any
+    this.$nextTick(() => {
+      let filterArr = this.advancedSearchStore.objectTypeSelected["objectType"];
+      if (filterArr && filterArr.length) {
+        this.itemValue =
+          this.advancedSearchStore.objectTypeSelected["objectType"];
+      }
+    });
   },
   methods: {
     selectedValue(item) {

src/components/Registry/FilterComponents/ObjectTypeFilter.vue

@@ -1,5 +1,6 @@
 <template>
   <SelectComponent
+    v-model="model"
     :item-list="organisationsList"
     :item-value="itemValue"
     :label="labelText"
@@ -15,16 +16,11 @@ import SelectComponent from "@/components/Registry/UtilComponents/SelectComponen
 export default {
   name: "OrganisationsFilter",
   components: { SelectComponent },
+  emits: ["input"],
   setup() {
     const advancedSearchStore = useAdvancedSearchStore();
     return { advancedSearchStore };
   },
-  props: {
-    value: {
-      type: Array,
-      default: () => [],
-    },
-  },
   data: () => {
     return {
       organisationsList: [],
@@ -36,7 +32,16 @@ export default {
       labelText: "Filter Metrics and/or Benchmarks by Organisation",
     };
   },
-
+  computed: {
+    model: {
+      get() {
+        return this.itemSelected;
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
+  },
   watch: {
     itemSelected(newValue) {
       if (newValue.length) {
@@ -52,6 +57,16 @@ export default {
 
   mounted() {
     this.getOrganisations();
+
+    //Pre-fill selected values from the URL in the component if any
+    this.$nextTick(() => {
+      let filterArr =
+        this.advancedSearchStore.organisationSelected["organisations"];
+      if (filterArr && filterArr.length) {
+        this.itemValue =
+          this.advancedSearchStore.organisationSelected["organisations"];
+      }
+    });
   },
 
   methods: {

src/components/Registry/FilterComponents/OrganisationsFilter.vue

@@ -1,5 +1,6 @@
 <template>
   <SelectComponent
+    v-model="model"
     :item-list="itemList"
     :item-value="itemValue"
     :label="labelText"
@@ -15,6 +16,7 @@ import SelectComponent from "@/components/Registry/UtilComponents/SelectComponen
 export default {
   name: "SelectRecordType",
   components: { SelectComponent },
+  emits: ["input"],
   data: () => {
     return {
       itemSelected: [],
@@ -28,11 +30,30 @@ export default {
     const advancedSearchStore = useAdvancedSearchStore();
     return { advancedSearchStore };
   },
+  computed: {
+    model: {
+      get() {
+        return this.itemSelected;
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
+  },
   watch: {
     itemSelected(newValue) {
       this.advancedSearchStore.recordTypeSelected = newValue;
+      this.recordTypeValues(newValue);
     },
   },
+  mounted() {
+    //Pre-fill selected values from the URL in the component if any
+    this.$nextTick(() => {
+      if (this.advancedSearchStore.recordTypeSelected.length) {
+        this.recordTypeValues(this.advancedSearchStore.recordTypeSelected);
+      }
+    });
+  },
 
   methods: {
     selectedValue(item) {
@@ -42,6 +63,14 @@ export default {
       });
       this.itemSelected = itemIds;
     },
+
+    recordTypeValues(item) {
+      let itemNames = item.map((e) => {
+        if (e === "metric_ids") return "Metrics";
+        else if (e === "benchmark_ids") return "Benchmarks";
+      });
+      this.itemValue = itemNames;
+    },
   },
 };
 </script>

src/components/Registry/FilterComponents/SelectRecordType.vue

@@ -1,5 +1,6 @@
 <template>
   <SelectComponent
+    v-model="model"
     :item-list="subjectsList"
     :item-value="itemValue"
     :label="labelText"
@@ -15,6 +16,7 @@ import SelectComponent from "@/components/Registry/UtilComponents/SelectComponen
 export default {
   name: "SubjectFilter",
   components: { SelectComponent },
+  emits: ["input"],
   setup() {
     const advancedSearchStore = useAdvancedSearchStore();
     return { advancedSearchStore };
@@ -31,6 +33,17 @@ export default {
     };
   },
 
+  computed: {
+    model: {
+      get() {
+        return this.itemSelected;
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
+  },
+
   watch: {
     itemSelected(newValue) {
       if (newValue.length) {
@@ -46,6 +59,14 @@ export default {
 
   mounted() {
     this.getSubjects();
+
+    //Pre-fill selected values from the URL in the component if any
+    this.$nextTick(() => {
+      let filterArr = this.advancedSearchStore.subjectSelected["subjects"];
+      if (filterArr && filterArr.length) {
+        this.itemValue = this.advancedSearchStore.subjectSelected["subjects"];
+      }
+    });
   },
 
   methods: {

src/components/Registry/FilterComponents/SubjectFilter.vue

@@ -57,7 +57,7 @@ export default {
   mixins: [stringUtils],
   data: () => {
     return {
-      model: [],
+      // model: [],
     };
   },
   props: {
@@ -88,6 +88,14 @@ export default {
   },
   emits: ["input"],
   computed: {
+    model: {
+      get() {
+        return this.itemValue;
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
     cleanTextList() {
       return this.itemList.map((item) => {
         if (this.format) {
@@ -104,9 +112,9 @@ export default {
         this.model = [];
       }
     },
-    model(newValue) {
-      this.$emit("input", newValue);
-    },
+    // model(newValue) {
+    //   this.$emit("input", newValue);
+    // },
   },
   methods: {
     capitalize,