24769584990

Committed 22 Apr 2026 08:57AM UTC coverage: 95.892% (-4.1%) from 100.0%

Build # 24769584990

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #2746 from FAIRsharing/dev

Dev

Coverage Stats

3653 of 3813 branches covered (95.8%)

Branch coverage included in aggregate %.

17344 of 18229 new or added lines in 282 files covered. (95.15%)

766 existing lines in 50 files now uncovered.

38617 of 40268 relevant lines covered (95.9%)

5.48 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

92.63

/src/components/Records/Search/Input/AdvancedSearch/AdvancedSearchDialogBox.vue

<template>
  <v-row justify="center">
    <v-dialog
      :model-value="dialog"
      :retain-focus="false"
      fullscreen
      persistent
      @keydown.esc="closeDialog()"
    >
      <v-card>
        <div
          :class="{
            'flex-column align-end': $vuetify.display.smAndDown,
          }"
          class="d-flex pt-6 px-6 justify-space-between"
        >
          <!--Close Button -->
          <div class="order-md-3" style="padding-left: 14.4%">
            <v-btn icon @click="closeDialog()">
              <v-icon icon="fas fa-xmark fa-solid" size="40" />
            </v-btn>
          </div>
          <!--FAIRsharing Logo -->
          <router-link
            :class="{
              'mt-n15 mx-auto': $vuetify.display.smAndDown,
            }"
            class="mt-n5 order-md-1"
            to="/"
          >
            <img
              alt="FAIRsharing logo"
              src="/assets/fairsharing-logo.svg"
              @click="closeDialog()"
            />
          </router-link>
          <!--Advanced Search Header Text -->
          <div
            class="order-sm-2"
            style="text-align: center; margin: 0 auto 0 auto"
          >
            <h2 class="text-primary">
              Advanced filtering and searching for FAIRsharing records
            </h2>
            <p style="text-align: center">
              Find out more about our Advanced Search in our
              <a
                class="text-decoration-underline"
                href="https://fairsharing.gitbook.io/fairsharing/how-to/advanced-search"
                target="_blank"
                >gitbook documentation
                <v-icon size="x-small">
                  {{ "fas fa-link" }}
                </v-icon>
              </a>
            </p>
          </div>
        </div>
        <v-card-title>
          <!--It will print the advancedSearch text on the dialog box when the search text is entered in the search field on the home page and advancedSearch is click-->
          <!--          <div v-if="!getEditDialogStatus">-->
          <!--            <span class="text-h5">-->
          <!--              {{ advancedSearchTerm }}-->
          <!--            </span>-->
          <!--          </div>-->

          <div class="d-flex full-width align-center">
            <TooltipComponent
              :tool-tip-text="toolTipText"
              text-colour="text-black"
            />
            <v-text-field
              v-if="!getEditDialogStatus"
              ref="inputRef"
              class="text-h5 full-width"
              clearable
              hide-details
              label="Add Search text"
              variant="outlined"
              @update:model-value="updateSearchText($event)"
            />
            <v-text-field
              v-else
              :model-value="updatedAdvancedSearchText"
              class="text-h5 full-width"
              clearable
              hide-details
              label="Add Search text"
              variant="outlined"
              @update:model-value="updateSearchText($event)"
            />
          </div>
        </v-card-title>
        <v-card-text>
          <QueryBuilderView :is-dialog="dialog" />
        </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,
            }"
            :disabled="isContinue"
            :width="$vuetify.display.smAndDown ? '100%' : '250'"
            class="text-white order-md-2 bg-green"
            elevation="2"
            variant="text"
            @click="goToAdvancedSearch()"
          >
            Proceed
          </v-btn>
          <v-btn
            :width="$vuetify.display.smAndDown ? '100%' : '250'"
            class="order-md-1 ml-0 bg-accent3"
            elevation="2"
            variant="text"
            @click="closeDialog()"
          >
            Close
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
import { isBoolean } from "lodash";
import { mapActions, mapGetters } from "vuex";

import TooltipComponent from "@/components/Records/Search/Input/AdvancedSearch/QueryBuilderComponents/UtilComponents/TooltipComponent.vue";
import QueryBuilderView from "@/components/Records/Search/Input/AdvancedSearch/QueryBuilderView.vue";
import advancedSearch from "@/store";
import { uniqueValues } from "@/utils/advancedSearchUtils";

export default {
  name: "AdvancedSearchDialogBox",
  components: { QueryBuilderView, TooltipComponent },
  props: {
    advancedSearchTerm: {
      default: "",
      type: String,
    },
  },
  emits: ["clearSearchField"],
  data: () => {
    return {
      dialog: false,
      updatedAdvancedSearchText: "",
      toolTipText:
        "Text will be searched against record fields such as name, abbreviation, description, tags, etc. Then, the results of that search will be filtered by the filters you have specified below.",
      queryString: "",
    };
  },
  computed: {
    ...mapGetters("advancedSearch", [
      "getAdvancedSearch",
      "getAdvancedSearchText",
      "getEditDialogStatus",
      "getAdvancedSearchDialogStatus",
    ]),
    /**
     * Enables the proceed button when all the selected fields are non-empty
     * @returns {boolean}
     */
    isContinue() {
      let isDisabled = true;
      let isTrue, allTrue;
      let isTrueArr = [];
      if (
        this.getAdvancedSearch["children"] &&
        this.getAdvancedSearch["children"].length
      ) {
        this.getAdvancedSearch["children"].forEach(({ children }) => {
          if (children && children.length) {
            isTrue = children.every(
              ({ value }) => value.length || isBoolean(value),
            );
            isTrueArr.push(isTrue);
          }
        });
      }
      //Check if all values in the array is true
      if (isTrueArr && isTrueArr.length)
        allTrue = isTrueArr.every((item) => item);
      if (allTrue) isDisabled = !allTrue;
      return isDisabled;
    },
  },
  watch: {
    getEditDialogStatus(newValue) {
      this.dialog = newValue;
      this.updatedAdvancedSearchText = this.getAdvancedSearchText;
    },
    getAdvancedSearchDialogStatus(newValue) {
      this.dialog = newValue;
      //Reset searchText field
      if (
        newValue &&
        this.$refs.inputRef !== undefined &&
        this.$refs.inputRef !== null
      ) {
        this.$refs.inputRef.reset();
      }
    },
  },
  mounted() {
    //When the user is redirected to advancedsearch url directly
    //it will open the dialog box
    if (this.$route.fullPath.toLowerCase() === "/advancedsearch") {
      advancedSearch.commit(
        "advancedSearch/setAdvancedSearchDialogStatus",
        true,
      );
    }
  },
  methods: {
    ...mapActions("advancedSearch", ["fetchAdvancedSearchResults"]),

    closeDialog() {
      advancedSearch.commit("advancedSearch/setEditDialogStatus", false);
      advancedSearch.commit(
        "advancedSearch/setAdvancedSearchDialogStatus",
        false,
      );
      // Redirecting to home page after closing
      if (this.$route.fullPath.toLowerCase() === "/advancedsearch") {
        this.$router.push("/");
      }

      this.dialog = false;
    },

    isAdvancedSearchTerm(queryString) {
      const queryValues = {
        q: this.getAdvancedSearchText,
        operator: this.getAdvancedSearch["operatorIdentifier"],
        fields: queryString,
      };
      return queryValues;
    },

    noAdvancedSearchTerm(queryString) {
      const queryValues = {
        operator: this.getAdvancedSearch["operatorIdentifier"],
        fields: queryString,
      };
      return queryValues;
    },
    /**
     * Method called on the click of the proceed button
     * in dialog box
     */
    goToAdvancedSearch() {
      if (this.updatedAdvancedSearchText) {
        this.fetchAdvancedSearchResults(this.updatedAdvancedSearchText);
      } else {
        this.fetchAdvancedSearchResults(this.advancedSearchTerm);
      }

      //Clear search text field flag
      this.$emit("clearSearchField", true);

      this.advancedSearchQueryString();
      this.advancedSearchNavigation(this.queryString);
      this.closeDialog();
    },

    /**
     * Add advancedSearch selection to query params in
     * and create URL by inserting array of objects into string
     */
    advancedSearchQueryString() {
      if (
        this.getAdvancedSearch["children"] &&
        this.getAdvancedSearch["children"].length
      ) {
        this.getAdvancedSearch["children"].forEach((item) => {
          this.queryString = "";
          this.queryString += "(operator=";
          this.queryString += item["operatorIdentifier"];
          const mergedValues = uniqueValues(item["children"]);
          mergedValues.forEach((params) => {
            this.queryString += "&";
            this.queryString += params["identifier"];
            this.queryString += "=";
            if (Array.isArray(params["value"])) {
              this.queryString += params["value"].join("+");
            } else if (params["value"]) {
              this.queryString += params["value"];
            }
          });
          this.queryString += ")";
        });
      }
    },

    /**
     * Navigation method called on the click of the proceed button
     * and on the advancedSearch page
     */
    advancedSearchNavigation(queryString) {
      //When not on advancedSearch page
      if (this.$route.path !== "/advancedsearch") {
        if (this.getAdvancedSearchText) {
          this.$router.push({
            name: "AdvancedSearchResult",
            query: this.isAdvancedSearchTerm(queryString),
          });
        } else {
          this.$router.push({
            name: "AdvancedSearchResult",
            query: this.noAdvancedSearchTerm(queryString),
          });
        }
      }
      //When on advancedSearch page
      else {
        if (this.getAdvancedSearchText) {
          this.$router.push({
            query: this.isAdvancedSearchTerm(queryString),
          });
        } else {
          this.$router.push({
            query: this.noAdvancedSearchTerm(queryString),
          });
        }
      }
    },

    /**
     * Method to fetch/update the searchTerm
     * @param {String} -- item
     */
    updateSearchText(item) {
      this.updatedAdvancedSearchText = item;
    },
  },
};
</script>

1	<template>
2	<v-row justify="center">	1✔
3	<v-dialog	1✔
4	:model-value="dialog"	1✔
5	:retain-focus="false"	1✔
6	fullscreen	1✔
7	persistent	1✔
8	@keydown.esc="closeDialog()"	1✔
9	>
10	<v-card>	1✔
11	<div	1✔
12	:class="{	1✔
13	'flex-column align-end': $vuetify.display.smAndDown,
14	}"
15	class="d-flex pt-6 px-6 justify-space-between"	1✔
16	>
17	<!--Close Button -->	1✔
18	<div class="order-md-3" style="padding-left: 14.4%">	1✔
19	<v-btn icon @click="closeDialog()">	1✔
20	<v-icon icon="fas fa-xmark fa-solid" size="40" />	1✔
21	</v-btn>	1✔
22	</div>	1✔
23	<!--FAIRsharing Logo -->	1✔
24	<router-link	1✔
25	:class="{	1✔
26	'mt-n15 mx-auto': $vuetify.display.smAndDown,
27	}"
28	class="mt-n5 order-md-1"	1✔
29	to="/"	1✔
30	>
31	<img	1✔
32	alt="FAIRsharing logo"	1✔
33	src="/assets/fairsharing-logo.svg"	1✔
34	@click="closeDialog()"	1✔
35	/>	1✔
36	</router-link>	1✔
37	<!--Advanced Search Header Text -->	1✔
38	<div	1✔
39	class="order-sm-2"	1✔
40	style="text-align: center; margin: 0 auto 0 auto"	1✔
41	>
42	<h2 class="text-primary">	1✔
43	Advanced filtering and searching for FAIRsharing records
44	</h2>	1✔
45	<p style="text-align: center">	1✔
46	Find out more about our Advanced Search in our
47	<a	1✔
48	class="text-decoration-underline"	1✔
49	href="https://fairsharing.gitbook.io/fairsharing/how-to/advanced-search"	1✔
50	target="_blank"	1✔
51	>gitbook documentation	1✔
52	<v-icon size="x-small">	1✔
53	{{ "fas fa-link" }}	1✔
54	</v-icon>	1✔
55	</a>	1✔
56	</p>	1✔
57	</div>	1✔
58	</div>	1✔
59	<v-card-title>	1✔
60	<!--It will print the advancedSearch text on the dialog box when the search text is entered in the search field on the home page and advancedSearch is click-->	1✔
61	<!-- <div v-if="!getEditDialogStatus">-->	1✔
62	<!-- <span class="text-h5">-->	1✔
63	<!-- {{ advancedSearchTerm }}-->	1✔
64	<!-- </span>-->	1✔
65	<!-- </div>-->	1✔
66
67	<div class="d-flex full-width align-center">	1✔
68	<TooltipComponent	1✔
69	:tool-tip-text="toolTipText"	1✔
70	text-colour="text-black"	1✔
71	/>	1✔
72	<v-text-field	1✔
73	v-if="!getEditDialogStatus"	1✔
74	ref="inputRef"	1✔
75	class="text-h5 full-width"	1✔
76	clearable	1✔
77	hide-details	1✔
78	label="Add Search text"	1✔
79	variant="outlined"	1✔
80	@update:model-value="updateSearchText($event)"	1✔
81	/>	1✔
82	<v-text-field	1✔
83	v-else
84	:model-value="updatedAdvancedSearchText"	1✔
85	class="text-h5 full-width"	1✔
86	clearable	1✔
87	hide-details	1✔
88	label="Add Search text"	1✔
89	variant="outlined"	1✔
90	@update:model-value="updateSearchText($event)"	1✔
91	/>	1✔
92	</div>	1✔
93	</v-card-title>	1✔
94	<v-card-text>	1✔
95	<QueryBuilderView :is-dialog="dialog" />	1✔
96	</v-card-text>	1✔
97	<v-card-actions	1✔
98	:class="{	1✔
99	'flex-column align-center': $vuetify.display.smAndDown,
100	}"
101	class="px-6 justify-space-between"	1✔
102	>
103	<v-btn	1✔
104	:class="{	1✔
105	'mb-3': $vuetify.display.smAndDown,
106	}"
107	:disabled="isContinue"	1✔
108	:width="$vuetify.display.smAndDown ? '100%' : '250'"	1✔
109	class="text-white order-md-2 bg-green"	1✔
110	elevation="2"	1✔
111	variant="text"	1✔
112	@click="goToAdvancedSearch()"	1✔
113	>	1✔
114	Proceed
115	</v-btn>	1✔
116	<v-btn	1✔
117	:width="$vuetify.display.smAndDown ? '100%' : '250'"	1✔
118	class="order-md-1 ml-0 bg-accent3"	1✔
119	elevation="2"	1✔
120	variant="text"	1✔
121	@click="closeDialog()"	1✔
122	>	1✔
123	Close
124	</v-btn>	1✔
125	</v-card-actions>	1✔
126	</v-card>	1✔
127	</v-dialog>	1✔
128	</v-row>	1✔
129	</template>
130
131	<script>
132	import { isBoolean } from "lodash";	1✔
133	import { mapActions, mapGetters } from "vuex";	1✔
134
135	import TooltipComponent from "@/components/Records/Search/Input/AdvancedSearch/QueryBuilderComponents/UtilComponents/TooltipComponent.vue";	1✔
136	import QueryBuilderView from "@/components/Records/Search/Input/AdvancedSearch/QueryBuilderView.vue";	1✔
137	import advancedSearch from "@/store";	1✔
138	import { uniqueValues } from "@/utils/advancedSearchUtils";	1✔
139
140	export default {	1✔
141	name: "AdvancedSearchDialogBox",	1✔
142	components: { QueryBuilderView, TooltipComponent },	1✔
143	props: {	1✔
144	advancedSearchTerm: {	1✔
145	default: "",	1✔
146	type: String,	1✔
147	},	1✔
148	},	1✔
149	emits: ["clearSearchField"],	1✔
150	data: () => {	1✔
151	return {	13✔
152	dialog: false,	13✔
153	updatedAdvancedSearchText: "",	13✔
154	toolTipText:	13✔
155	"Text will be searched against record fields such as name, abbreviation, description, tags, etc. Then, the results of that search will be filtered by the filters you have specified below.",	13✔
156	queryString: "",	13✔
157	};	13✔
158	},	1✔
159	computed: {	1✔
160	...mapGetters("advancedSearch", [	1✔
161	"getAdvancedSearch",	1✔
162	"getAdvancedSearchText",	1✔
163	"getEditDialogStatus",	1✔
164	"getAdvancedSearchDialogStatus",	1✔
165	]),	1✔
166	/**	1✔
167	* Enables the proceed button when all the selected fields are non-empty	1✔
168	* @returns {boolean}	1✔
169	*/	1✔
170	isContinue() {	1✔
171	let isDisabled = true;	2✔
172	let isTrue, allTrue;	2✔
173	let isTrueArr = [];	2✔
174	if (	2✔
175	this.getAdvancedSearch["children"] &&	2✔
176	this.getAdvancedSearch["children"].length	2✔
177	) {	2✔
178	this.getAdvancedSearch["children"].forEach(({ children }) => {	1✔
179	if (children && children.length) {	1✔
180	isTrue = children.every(	1✔
181	({ value }) => value.length \|\| isBoolean(value),	1!
182	);	1✔
183	isTrueArr.push(isTrue);	1✔
184	}	1✔
185	});	1✔
186	}	1✔
187	//Check if all values in the array is true	2✔
188	if (isTrueArr && isTrueArr.length)	2✔
189	allTrue = isTrueArr.every((item) => item);	2✔
190	if (allTrue) isDisabled = !allTrue;	2✔
191	return isDisabled;	2✔
192	},	1✔
193	},	1✔
194	watch: {	1✔
195	getEditDialogStatus(newValue) {	1✔
196	this.dialog = newValue;	1✔
197	this.updatedAdvancedSearchText = this.getAdvancedSearchText;	1✔
198	},	1✔
199	getAdvancedSearchDialogStatus(newValue) {	1✔
200	this.dialog = newValue;	3✔
201	//Reset searchText field	3✔
202	if (	3✔
203	newValue &&	3✔
204	this.$refs.inputRef !== undefined &&	3✔
205	this.$refs.inputRef !== null	1✔
206	) {	3✔
207	this.$refs.inputRef.reset();	1✔
208	}	1✔
209	},	1✔
210	},	1✔
211	mounted() {	1✔
212	//When the user is redirected to advancedsearch url directly	13✔
213	//it will open the dialog box	13✔
214	if (this.$route.fullPath.toLowerCase() === "/advancedsearch") {	13✔
215	advancedSearch.commit(	2✔
216	"advancedSearch/setAdvancedSearchDialogStatus",	2✔
217	true,	2✔
218	);	2✔
219	}	2✔
220	},	1✔
221	methods: {	1✔
222	...mapActions("advancedSearch", ["fetchAdvancedSearchResults"]),	1✔
223
224	closeDialog() {	1✔
225	advancedSearch.commit("advancedSearch/setEditDialogStatus", false);	2✔
226	advancedSearch.commit(	2✔
227	"advancedSearch/setAdvancedSearchDialogStatus",	2✔
228	false,	2✔
229	);	2✔
230	// Redirecting to home page after closing	2✔
231	if (this.$route.fullPath.toLowerCase() === "/advancedsearch") {	2✔
232	this.$router.push("/");	1✔
233	}	1✔
234
235	this.dialog = false;	2✔
236	},	1✔
237
238	isAdvancedSearchTerm(queryString) {	1✔
239	const queryValues = {	2✔
240	q: this.getAdvancedSearchText,	2✔
241	operator: this.getAdvancedSearch["operatorIdentifier"],	2✔
242	fields: queryString,	2✔
243	};	2✔
244	return queryValues;	2✔
245	},	1✔
246
247	noAdvancedSearchTerm(queryString) {	1✔
248	const queryValues = {	1✔
249	operator: this.getAdvancedSearch["operatorIdentifier"],	1✔
250	fields: queryString,	1✔
251	};	1✔
252	return queryValues;	1✔
253	},	1✔
254	/**	1✔
255	* Method called on the click of the proceed button	1✔
256	* in dialog box	1✔
257	*/	1✔
258	goToAdvancedSearch() {	1✔
259	if (this.updatedAdvancedSearchText) {	1✔
260	this.fetchAdvancedSearchResults(this.updatedAdvancedSearchText);	1✔
261	} else {	1!
UNCOV 262	this.fetchAdvancedSearchResults(this.advancedSearchTerm);	×
UNCOV 263	}	×
264
265	//Clear search text field flag	1✔
266	this.$emit("clearSearchField", true);	1✔
267
268	this.advancedSearchQueryString();	1✔
269	this.advancedSearchNavigation(this.queryString);	1✔
270	this.closeDialog();	1✔
271	},	1✔
272
273	/**	1✔
274	* Add advancedSearch selection to query params in	1✔
275	* and create URL by inserting array of objects into string	1✔
276	*/	1✔
277	advancedSearchQueryString() {	1✔
278	if (	1✔
279	this.getAdvancedSearch["children"] &&	1✔
280	this.getAdvancedSearch["children"].length	1✔
281	) {	1✔
282	this.getAdvancedSearch["children"].forEach((item) => {	1✔
283	this.queryString = "";	1✔
284	this.queryString += "(operator=";	1✔
285	this.queryString += item["operatorIdentifier"];	1✔
286	const mergedValues = uniqueValues(item["children"]);	1✔
287	mergedValues.forEach((params) => {	1✔
288	this.queryString += "&";	1✔
289	this.queryString += params["identifier"];	1✔
290	this.queryString += "=";	1✔
291	if (Array.isArray(params["value"])) {	1!
NEW 292	this.queryString += params["value"].join("+");	×
293	} else if (params["value"]) {	1✔
294	this.queryString += params["value"];	1✔
295	}	1✔
296	});	1✔
297	this.queryString += ")";	1✔
298	});	1✔
299	}	1✔
300	},	1✔
301
302	/**	1✔
303	* Navigation method called on the click of the proceed button	1✔
304	* and on the advancedSearch page	1✔
305	*/	1✔
306	advancedSearchNavigation(queryString) {	1✔
307	//When not on advancedSearch page	1✔
308	if (this.$route.path !== "/advancedsearch") {	1✔
309	if (this.getAdvancedSearchText) {	1✔
310	this.$router.push({	1✔
311	name: "AdvancedSearchResult",	1✔
312	query: this.isAdvancedSearchTerm(queryString),	1✔
313	});	1✔
314	} else {	1!
UNCOV 315	this.$router.push({	×
UNCOV 316	name: "AdvancedSearchResult",	×
UNCOV 317	query: this.noAdvancedSearchTerm(queryString),	×
UNCOV 318	});	×
UNCOV 319	}	×
320	}	1!
UNCOV 321	//When on advancedSearch page	×
UNCOV 322	else {	×
UNCOV 323	if (this.getAdvancedSearchText) {	×
UNCOV 324	this.$router.push({	×
UNCOV 325	query: this.isAdvancedSearchTerm(queryString),	×
UNCOV 326	});	×
UNCOV 327	} else {	×
UNCOV 328	this.$router.push({	×
UNCOV 329	query: this.noAdvancedSearchTerm(queryString),	×
UNCOV 330	});	×
UNCOV 331	}	×
UNCOV 332	}	×
333	},	1✔
334
335	/**	1✔
336	* Method to fetch/update the searchTerm	1✔
337	* @param {String} -- item	1✔
338	*/	1✔
339	updateSearchText(item) {	1✔
340	this.updatedAdvancedSearchText = item;	1✔
341	},	1✔
342	},	1✔
343	};	1✔
344	</script>

FAIRsharing / fairsharing.github.io / 24769584990

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous