Merge pull request #35 from FAIRsharing/dev

Dev

Author: prakhyatox

src/components/Loaders/Loaders.vue

@@ -1,38 +1,25 @@
 <template>
   <div class="mb-6 text-center">
-    <v-fade-transition v-if="getLoadingStatus">
-      <div>
-        <v-overlay
-          :absolute="false"
-          :model-value="getLoadingStatus"
-          class="align-center justify-center"
-          opacity="0.8"
-        >
-          <Loaders />
-        </v-overlay>
-      </div>
-    </v-fade-transition>
     <v-btn
       :disabled="!getRecordTypeSelected.length"
       class="full-width"
       color="accent"
       data-testid="applyFilter"
       max-width="200"
       min-width="200"
-      @click="store.fetchAdvancedSearchResults()"
+      @click="fetchResults()"
       >Apply Filter
     </v-btn>
   </div>
 </template>
 
 <script>
 import { useAdvancedSearchStore } from "@/stores/advancedSearch.js";
+import { generateSelectionQuery } from "@/utils/queryUtil.js";
 import { storeToRefs } from "pinia";
-import Loaders from "@/components/Loaders/Loaders.vue";
 
 export default {
   name: "ApplyFilterButton",
-  components: { Loaders },
   data: () => {
     return {
       filtersSelected: [],
@@ -41,9 +28,19 @@ export default {
   },
   setup() {
     const store = useAdvancedSearchStore();
-    const { getFairassistID, getRecordTypeSelected, getLoadingStatus } =
-      storeToRefs(store);
-    return { store, getFairassistID, getRecordTypeSelected, getLoadingStatus };
+    const {
+      getFairassistID,
+      getRecordTypeSelected,
+      getFilterSelected,
+      getFairassistName,
+    } = storeToRefs(store);
+    return {
+      store,
+      getFairassistID,
+      getRecordTypeSelected,
+      getFilterSelected,
+      getFairassistName,
+    };
   },
   watch: {
     getFairassistID(newValue, oldValue) {
@@ -53,5 +50,19 @@ export default {
       }
     },
   },
+
+  methods: {
+    async fetchResults() {
+      await this.store.fetchAdvancedSearchResults();
+      this.$router.push({
+        query: {
+          search: generateSelectionQuery(
+            this.getFairassistName,
+            this.getFilterSelected,
+          ),
+        },
+      });
+    },
+  },
 };
 </script>

src/components/Registry/ApplyFilterButton.vue

@@ -7,15 +7,17 @@
     rounded
     sticky
   >
-    <h3 class="d-inline">Search Results For :&nbsp;</h3>
-    <v-chip
-      v-for="selection in userSelection"
-      :keys="selection"
-      :text="formatString(selection)"
-      class="ma-1 text-capitalize"
-      color="primary"
-      variant="elevated"
-    />
+    <div>
+      <h3 class="d-inline">Search Results For :&nbsp;</h3>
+      <v-chip
+        v-for="selection in userSelection"
+        :keys="selection"
+        :text="formatString(selection)"
+        class="ma-1 text-capitalize"
+        color="primary"
+        variant="elevated"
+      />
+    </div>
   </v-banner>
 </template>
 <script>

src/components/Registry/Breadcrumbs/Breadcrumbs.vue

@@ -40,6 +40,14 @@ export default {
     return { store };
   },
 
+  watch: {
+    fairassistID(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.store.advancedSearchResponse = [];
+      }
+    },
+  },
+
   mounted() {
     this.getGraphData();
   },
@@ -52,6 +60,7 @@ export default {
           "/search_utils/fairassist_components/" +
           this.fairassistID;
         const getData = await axios.get(url);
+        this.store.fairAssistName = getData.data.name;
         let divSelected = this.$refs.chartdiv;
         d3Graph(divSelected, getData.data);
       } catch (error) {

src/components/Registry/CollapseTreeGraph.vue

@@ -1,11 +1,13 @@
 <template>
   <SelectComponent
+    v-model="model"
     :disabled="disabled"
     :format="true"
     :item-list="toolsList"
     :item-value="itemValue"
     :label="labelText"
     :tool-tip-text="toolTipText"
+    data-testid="selectComponent"
     @input="selectedValue"
   />
 </template>
@@ -19,10 +21,12 @@ import { storeToRefs } from "pinia";
 export default {
   name: "MetricsToolFilter",
   components: { SelectComponent },
+  emits: ["input"],
   setup() {
     const advancedSearchStore = useAdvancedSearchStore();
-    const { getRecordTypeSelected } = storeToRefs(advancedSearchStore);
-    return { advancedSearchStore, getRecordTypeSelected };
+    const { getRecordTypeSelected, getToolsSelected } =
+      storeToRefs(advancedSearchStore);
+    return { advancedSearchStore, getRecordTypeSelected, getToolsSelected };
   },
   data: () => {
     return {
@@ -36,6 +40,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 +69,7 @@ export default {
   },
   mounted() {
     this.getTools();
+    this.fetchOnLoad();
   },
   methods: {
     selectedValue(item) {
@@ -76,6 +89,18 @@ export default {
         }
       }
     },
+
+    /**
+     * Fetch tools from the store on load
+     */
+    fetchOnLoad() {
+      this.$nextTick(() => {
+        let filterArr = this.getToolsSelected;
+        if (filterArr.toolNames && filterArr.toolNames.length) {
+          this.itemValue = filterArr.toolNames;
+        }
+      });
+    },
   },
 };
 </script>

src/components/Registry/FilterComponents/MetricsToolFilter.vue

@@ -1,10 +1,12 @@
 <template>
   <SelectComponent
+    v-model="model"
     :disabled="disabled"
     :item-list="getObjectTypes"
     :item-value="itemValue"
     :label="labelText"
     :tool-tip-text="toolTipText"
+    data-testid="selectComponent"
     @input="selectedValue"
   />
 </template>
@@ -17,17 +19,20 @@ import { useAdvancedSearchStore } from "@/stores/advancedSearch.js";
 export default {
   name: "ObjectTypeFilter",
   components: { SelectComponent },
+  emits: ["input"],
   setup() {
     const store = useObjectTypesStore();
     const advancedSearchStore = useAdvancedSearchStore();
     const { getObjectTypes, getLoadingStatus } = storeToRefs(store);
-    const { getRecordTypeSelected } = storeToRefs(advancedSearchStore);
+    const { getRecordTypeSelected, getObjectTypeSelected } =
+      storeToRefs(advancedSearchStore);
     return {
       store,
       getObjectTypes,
       getLoadingStatus,
       advancedSearchStore,
       getRecordTypeSelected,
+      getObjectTypeSelected,
     };
   },
   data: () => {
@@ -40,6 +45,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,11 +78,24 @@ export default {
   },
   mounted() {
     this.store.fetchObjectTypes();
+    this.fetchOnLoad();
   },
   methods: {
     selectedValue(item) {
       this.itemSelected = item;
     },
+
+    /**
+     * Fetch object types from the store on load
+     */
+    fetchOnLoad() {
+      this.$nextTick(() => {
+        let filterArr = this.getObjectTypeSelected;
+        if (filterArr.objectType && filterArr.objectType.length) {
+          this.itemValue = filterArr.objectType;
+        }
+      });
+    },
   },
 };
 </script>

src/components/Registry/FilterComponents/ObjectTypeFilter.vue

@@ -1,29 +1,28 @@
 <template>
   <SelectComponent
+    v-model="model"
     :item-list="organisationsList"
     :item-value="itemValue"
     :label="labelText"
     :tool-tip-text="toolTipText"
+    data-testid="selectComponent"
     @input="selectedValue"
   />
 </template>
 <script>
 import axios from "axios";
 import { useAdvancedSearchStore } from "@/stores/advancedSearch.js";
 import SelectComponent from "@/components/Registry/UtilComponents/SelectComponent.vue";
+import { storeToRefs } from "pinia";
 
 export default {
   name: "OrganisationsFilter",
   components: { SelectComponent },
+  emits: ["input"],
   setup() {
     const advancedSearchStore = useAdvancedSearchStore();
-    return { advancedSearchStore };
-  },
-  props: {
-    value: {
-      type: Array,
-      default: () => [],
-    },
+    const { getOrganisationSelected } = storeToRefs(advancedSearchStore);
+    return { advancedSearchStore, getOrganisationSelected };
   },
   data: () => {
     return {
@@ -36,7 +35,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 +60,7 @@ export default {
 
   mounted() {
     this.getOrganisations();
+    this.fetchOnLoad();
   },
 
   methods: {
@@ -71,6 +80,18 @@ export default {
         }
       }
     },
+
+    /**
+     * Fetch organisations from the store on load
+     */
+    fetchOnLoad() {
+      this.$nextTick(() => {
+        let filterArr = this.getOrganisationSelected;
+        if (filterArr.organisations && filterArr.organisations.length) {
+          this.itemValue = filterArr.organisations;
+        }
+      });
+    },
   },
 };
 </script>