Merge pull request #37 from FAIRsharing/reset-results-and-filters-36

Adding code to reset the results if principle selection is changed

Author: prakhyatox

src/components/Registry/ApplyFilterButton.vue

@@ -22,34 +22,20 @@ export default {
   name: "ApplyFilterButton",
   data: () => {
     return {
-      filtersSelected: [],
       isClicked: false,
     };
   },
   setup() {
     const store = useAdvancedSearchStore();
-    const {
-      getFairassistID,
-      getRecordTypeSelected,
-      getFilterSelected,
-      getFairassistName,
-    } = storeToRefs(store);
+    const { getRecordTypeSelected, getFilterSelected, getFairassistName } =
+      storeToRefs(store);
     return {
       store,
-      getFairassistID,
       getRecordTypeSelected,
       getFilterSelected,
       getFairassistName,
     };
   },
-  watch: {
-    getFairassistID(newValue, oldValue) {
-      if (newValue !== oldValue) {
-        this.filtersSelected = [];
-        this.store.advancedSearchResponse = [];
-      }
-    },
-  },
 
   methods: {
     async fetchResults() {

src/components/Registry/CollapseTreeGraph.vue

@@ -1,13 +1,19 @@
 <template>
   <div>
+    <WarningDailog
+      :show-dialog="showDialog"
+      @noReset="noResetSelection"
+      @yesReset="yesResetSelection"
+    />
     <v-select
       v-model="fairassistID"
       :items="itemList"
       data-testid="selectGraph"
       item-title="name"
       item-value="id"
-      @update:model-value="getGraphData()"
-    />
+      @update:model-value="resetPopup()"
+    >
+    </v-select>
     <div v-if="noData">No data available</div>
     <div v-else ref="chartdiv" class="chartdiv" />
   </div>
@@ -16,9 +22,12 @@
 import axios from "axios";
 import d3Graph from "@/utils/d3Graph";
 import { useAdvancedSearchStore } from "@/stores/advancedSearch.js";
+import { storeToRefs } from "pinia";
+import WarningDialog from "@/components/Registry/WarningDialog.vue";
 
 export default {
   name: "CollapseTreeGraph",
+  components: { WarningDailog: WarningDialog },
   data: () => {
     return {
       noData: false,
@@ -33,17 +42,24 @@ export default {
           name: "FAIR Principles for Research Software",
         },
       ],
+      showDialog: false,
+      currentId: Number,
     };
   },
   setup() {
     const store = useAdvancedSearchStore();
-    return { store };
+    const { getAdvancedSearchResponse, getNoData } = storeToRefs(store);
+    return {
+      store,
+      getAdvancedSearchResponse,
+      getNoData,
+    };
   },
 
   watch: {
-    fairassistID(newValue, oldValue) {
+    fairassistID(oldValue, newValue) {
       if (newValue !== oldValue) {
-        this.store.advancedSearchResponse = [];
+        this.currentId = newValue;
       }
     },
   },
@@ -52,6 +68,9 @@ export default {
     this.getGraphData();
   },
   methods: {
+    /**
+     * Get the graph data from the API
+     */
     async getGraphData() {
       this.store.fairassistID = this.fairassistID;
       try {
@@ -68,6 +87,40 @@ export default {
           this.noData = true;
         }
       }
+      this.store.resetSelection = false;
+    },
+
+    /**
+     * Reset the graph data if there is any selection or no data available else get the graph data
+     */
+    resetPopup() {
+      if (this.getAdvancedSearchResponse.length || this.getNoData) {
+        this.showDialog = true;
+      } else {
+        this.getGraphData();
+      }
+    },
+
+    /**
+     * On Reset of the selection call graph and hide the dialog
+     * @param value
+     */
+    yesResetSelection(value) {
+      if (value) {
+        this.getGraphData();
+        this.showDialog = false;
+      }
+    },
+
+    /**
+     * On Cancel of the selection hide the dialog and keep the current graph data
+     * @param value
+     */
+    noResetSelection(value) {
+      if (value) {
+        this.fairassistID = this.currentId;
+        this.showDialog = false;
+      }
     },
   },
 };

src/components/Registry/UtilComponents/SelectComponent.vue

@@ -51,6 +51,8 @@
 <script>
 import { capitalize } from "lodash";
 import stringUtils from "@/utils/stringUtils.js";
+import { useAdvancedSearchStore } from "@/stores/advancedSearch.js";
+import { storeToRefs } from "pinia";
 
 export default {
   name: "SelectComponent",
@@ -82,6 +84,15 @@ export default {
     },
   },
   emits: ["input"],
+  setup() {
+    const store = useAdvancedSearchStore();
+    const { getFairassistID, getResetSelection } = storeToRefs(store);
+    return {
+      store,
+      getFairassistID,
+      getResetSelection,
+    };
+  },
   computed: {
     model: {
       get() {
@@ -107,9 +118,12 @@ export default {
         this.model = [];
       }
     },
-    // model(newValue) {
-    //   this.$emit("input", newValue);
-    // },
+    //Reset the selections when getResetSelection is true
+    getResetSelection(newValue) {
+      if (newValue) {
+        this.model = [];
+      }
+    },
   },
   methods: {
     capitalize,

src/components/Registry/UtilComponents/__tests__/SelectComponent.spec.js

@@ -35,7 +35,7 @@ describe("SelectComponent.vue", function () {
 
   it("can be instantiated", () => {
     wrapper.vm.$options.watch.disabled.call(wrapper.vm, true);
-    // wrapper.vm.$options.watch.model.call(wrapper.vm, ["xyz"]);
+    wrapper.vm.$options.watch.getResetSelection.call(wrapper.vm, true);
     expect(wrapper.vm.$options.name).toMatch("SelectComponent");
   });
 

src/components/Registry/WarningDialog.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <v-dialog :model-value="showPopup" max-width="400">
+      <v-card class="pa-4">
+        <v-card-text>
+          <div>
+            Changing between FAIR and FAIR4RS principles will clear your search
+            results.
+          </div>
+        </v-card-text>
+        <v-card-actions
+          :class="{
+            'flex-column align-center': $vuetify.display.smAndDown,
+          }"
+          class="px-6 justify-space-between"
+        >
+          <v-btn
+            :class="{
+              'mb-3': $vuetify.display.smAndDown,
+            }"
+            :width="$vuetify.display.smAndDown ? '100%' : '150'"
+            class="text-white bg-green"
+            data-testid="resetSelection"
+            elevation="2"
+            fdfdfd
+            variant="text"
+            @click="resetSelection()"
+          >
+            OK
+          </v-btn>
+          <v-btn
+            :width="$vuetify.display.smAndDown ? '100%' : '150'"
+            class="ml-0 bg-accent3"
+            data-testid="noResetSelection"
+            elevation="2"
+            variant="text"
+            @click="noResetSelection()"
+          >
+            Cancel
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+<script>
+import { useAdvancedSearchStore } from "@/stores/advancedSearch.js";
+
+export default {
+  name: "WarningDialog",
+  emits: ["yesReset", "noReset"],
+  props: {
+    showDialog: { type: Boolean, default: false },
+  },
+  data: () => {
+    return {
+      showPopup: false,
+    };
+  },
+  setup() {
+    const store = useAdvancedSearchStore();
+    return {
+      store,
+    };
+  },
+  watch: {
+    showDialog(newValue) {
+      if (newValue) {
+        this.showPopup = true;
+      }
+    },
+  },
+
+  methods: {
+    /**
+     * Reset the selection and the results
+     */
+    resetSelection() {
+      this.showPopup = false;
+      this.store.resetSelection = true;
+      this.store.resetAdvancedSearch();
+      this.$router.replace("/registry");
+      this.$emit("yesReset", true);
+    },
+
+    /**
+     * Do not reset the selection and keep the results
+     */
+    noResetSelection() {
+      this.$emit("noReset", true);
+      // this.fairassistID = this.currentId;
+      this.showPopup = false;
+    },
+  },
+};
+</script>

src/components/Registry/__tests__/ApplyFilterButton.spec.js

@@ -25,7 +25,6 @@ describe("ApplyFilterButton.vue", function () {
   });
 
   it("can be instantiated", () => {
-    wrapper.vm.$options.watch.getFairassistID.call(wrapper.vm, 12);
     expect(wrapper.vm.$options.name).toMatch("ApplyFilterButton");
   });
 

src/components/Registry/__tests__/CollapseTreeGraph.spec.js

@@ -7,8 +7,14 @@ import sinon from "sinon";
 import d3GraphData from "./data/d3GraphData.json";
 import { createPinia, setActivePinia } from "pinia";
 import { createTestingPinia } from "@pinia/testing";
+import { useAdvancedSearchStore } from "@/stores/advancedSearch.js";
 
 const vuetify = createVuetify();
+const $router = { replace: vi.fn() };
+
+if (!globalThis.visualViewport) {
+  vi.stubGlobal("visualViewport", new EventTarget());
+}
 
 describe("CollapseTreeGraph.vue", function () {
   vi.mock("d3", () => ({}));
@@ -18,10 +24,12 @@ describe("CollapseTreeGraph.vue", function () {
 
   beforeEach(() => {
     setActivePinia(createPinia());
+
     wrapper = mount(CollapseTreeGraph, {
       global: {
         plugins: [vuetify, createTestingPinia()],
         stubs: { vSelect: true },
+        mocks: { $router },
       },
     });
   });
@@ -30,7 +38,7 @@ describe("CollapseTreeGraph.vue", function () {
     expect(wrapper.vm.$options.name).toMatch("CollapseTreeGraph");
   });
 
-  it("getGraphData method is called on v-select when mounted", async () => {
+  it("getGraphData() method is called on v-select when mounted", async () => {
     let itemList = [
       {
         id: 1,
@@ -47,9 +55,30 @@ describe("CollapseTreeGraph.vue", function () {
     expect(component.vm.modelValue).toBe("2");
   });
 
-  it("can check if getGraphData method have the error in catch block", async () => {
+  it("can check if getGraphData() method have the error in catch block", async () => {
     getStub.returns(new Error("error"));
     await wrapper.vm.getGraphData();
     expect(wrapper.vm.noData).toBe(true);
   });
+
+  it("can check resetPopup() method", () => {
+    let store = useAdvancedSearchStore();
+    store.advancedSearchResponse = ["test", "test1", "test2"];
+    store.noData = true;
+    wrapper.vm.resetPopup();
+    expect(wrapper.vm.showDialog).toBe(true);
+  });
+
+  it("can check if yesResetSelection() method ", () => {
+    wrapper.vm.yesResetSelection(true);
+    expect(wrapper.vm.getGraphData).toHaveBeenCalled;
+    expect(wrapper.vm.showDialog).toBe(false);
+  });
+
+  it("can check if noResetSelection() method ", () => {
+    wrapper.vm.currentId = 1;
+    wrapper.vm.noResetSelection(true);
+    expect(wrapper.vm.fairassistID).toBe(1);
+    expect(wrapper.vm.showDialog).toBe(false);
+  });
 });