25807179466

Committed 13 May 2026 02:56PM UTC coverage: 95.929% (+0.01%) from 95.915%

Build # 25807179466

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #2771 from FAIRsharing/dev

Dev

Coverage Stats

3667 of 3838 branches covered (95.54%)

Branch coverage included in aggregate %.

71 of 99 new or added lines in 23 files covered. (71.72%)

38890 of 40525 relevant lines covered (95.97%)

5.43 hits per line

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

90.49

/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, isObject } 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"])) {
              let valuesArr = [];
              params["value"].forEach((item) => {
                if (isObject(item)) {
                  valuesArr.push(item.value);
                } else {
                  valuesArr.push(item);
                }
              });

              this.queryString += valuesArr.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, isObject } 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!
262	this.fetchAdvancedSearchResults(this.advancedSearchTerm);	×
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	let valuesArr = [];	×
NEW 293	params["value"].forEach((item) => {	×
NEW 294	if (isObject(item)) {	×
NEW 295	valuesArr.push(item.value);	×
NEW 296	} else {	×
NEW 297	valuesArr.push(item);	×
NEW 298	}	×
NEW 299	});	×
300
NEW 301	this.queryString += valuesArr.join("+");	×
302	} else if (params["value"]) {	1✔
303	this.queryString += params["value"];	1✔
304	}	1✔
305	});	1✔
306	this.queryString += ")";	1✔
307	});	1✔
308	}	1✔
309	},	1✔
310
311	/**	1✔
312	* Navigation method called on the click of the proceed button	1✔
313	* and on the advancedSearch page	1✔
314	*/	1✔
315	advancedSearchNavigation(queryString) {	1✔
316	//When not on advancedSearch page	1✔
317	if (this.$route.path !== "/advancedsearch") {	1✔
318	if (this.getAdvancedSearchText) {	1✔
319	this.$router.push({	1✔
320	name: "AdvancedSearchResult",	1✔
321	query: this.isAdvancedSearchTerm(queryString),	1✔
322	});	1✔
323	} else {	1!
324	this.$router.push({	×
325	name: "AdvancedSearchResult",	×
326	query: this.noAdvancedSearchTerm(queryString),	×
327	});	×
328	}	×
329	}	1!
330	//When on advancedSearch page	×
331	else {	×
332	if (this.getAdvancedSearchText) {	×
333	this.$router.push({	×
334	query: this.isAdvancedSearchTerm(queryString),	×
335	});	×
336	} else {	×
337	this.$router.push({	×
338	query: this.noAdvancedSearchTerm(queryString),	×
339	});	×
340	}	×
341	}	×
342	},	1✔
343
344	/**	1✔
345	* Method to fetch/update the searchTerm	1✔
346	* @param {String} -- item	1✔
347	*/	1✔
348	updateSearchText(item) {	1✔
349	this.updatedAdvancedSearchText = item;	1✔
350	},	1✔
351	},	1✔
352	};	1✔
353	</script>

FAIRsharing / fairsharing.github.io / 25807179466

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