28019915738

Committed 23 Jun 2026 10:32AM UTC coverage: 96.028% (-0.2%) from 96.234%

Build # 28019915738

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #2802 from FAIRsharing/dev

Dev

Coverage Stats

3702 of 3881 branches covered (95.39%)

Branch coverage included in aggregate %.

789 of 894 new or added lines in 74 files covered. (88.26%)

18 existing lines in 3 files now uncovered.

39216 of 40812 relevant lines covered (96.09%)

5.09 hits per line

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

88.99

/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-es";
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 { 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") {
      this.$store.commit("advancedSearch/setAdvancedSearchDialogStatus", true);
    }
  },
  methods: {
    ...mapActions("advancedSearch", ["fetchAdvancedSearchResults"]),

    closeDialog() {
      this.$store.commit("advancedSearch/setEditDialogStatus", false);
      this.$store.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-es";	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 { uniqueValues } from "@/utils/advancedSearchUtils";	1✔
138
139	export default {	1✔
140	name: "AdvancedSearchDialogBox",	1✔
141	components: { QueryBuilderView, TooltipComponent },	1✔
142	props: {	1✔
143	advancedSearchTerm: {	1✔
144	default: "",	1✔
145	type: String,	1✔
146	},	1✔
147	},	1✔
148	emits: ["clearSearchField"],	1✔
149	data: () => {	1✔
150	return {	13✔
151	dialog: false,	13✔
152	updatedAdvancedSearchText: "",	13✔
153	toolTipText:	13✔
154	"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✔
155	queryString: "",	13✔
156	};	13✔
157	},	1✔
158	computed: {	1✔
159	...mapGetters("advancedSearch", [	1✔
160	"getAdvancedSearch",	1✔
161	"getAdvancedSearchText",	1✔
162	"getEditDialogStatus",	1✔
163	"getAdvancedSearchDialogStatus",	1✔
164	]),	1✔
165	/**	1✔
166	* Enables the proceed button when all the selected fields are non-empty	1✔
167	* @returns {boolean}	1✔
168	*/	1✔
169	isContinue() {	1✔
170	let isDisabled = true;	2✔
171	let isTrue, allTrue;	2✔
172	let isTrueArr = [];	2✔
173	if (	2✔
174	this.getAdvancedSearch["children"] &&	2✔
175	this.getAdvancedSearch["children"].length	2✔
176	) {	2✔
177	this.getAdvancedSearch["children"].forEach(({ children }) => {	1✔
178	if (children && children.length) {	1✔
179	isTrue = children.every(	1✔
180	({ value }) => value.length \|\| isBoolean(value),	1!
181	);	1✔
182	isTrueArr.push(isTrue);	1✔
183	}	1✔
184	});	1✔
185	}	1✔
186	//Check if all values in the array is true	2✔
187	if (isTrueArr && isTrueArr.length)	2✔
188	allTrue = isTrueArr.every((item) => item);	2✔
189	if (allTrue) isDisabled = !allTrue;	2✔
190	return isDisabled;	2✔
191	},	1✔
192	},	1✔
193	watch: {	1✔
194	getEditDialogStatus(newValue) {	1✔
195	this.dialog = newValue;	1✔
196	this.updatedAdvancedSearchText = this.getAdvancedSearchText;	1✔
197	},	1✔
198	getAdvancedSearchDialogStatus(newValue) {	1✔
199	this.dialog = newValue;	3✔
200	//Reset searchText field	3✔
201	if (	3✔
202	newValue &&	3✔
203	this.$refs.inputRef !== undefined &&	3✔
204	this.$refs.inputRef !== null	1✔
205	) {	3✔
206	this.$refs.inputRef.reset();	1✔
207	}	1✔
208	},	1✔
209	},	1✔
210	mounted() {	1✔
211	//When the user is redirected to advancedsearch url directly	13✔
212	//it will open the dialog box	13✔
213	if (this.$route.fullPath.toLowerCase() === "/advancedsearch") {	13✔
214	this.$store.commit("advancedSearch/setAdvancedSearchDialogStatus", true);	2✔
215	}	2✔
216	},	1✔
217	methods: {	1✔
218	...mapActions("advancedSearch", ["fetchAdvancedSearchResults"]),	1✔
219
220	closeDialog() {	1✔
221	this.$store.commit("advancedSearch/setEditDialogStatus", false);	2✔
222	this.$store.commit("advancedSearch/setAdvancedSearchDialogStatus", false);	2✔
223	// Redirecting to home page after closing	2✔
224	if (this.$route.fullPath.toLowerCase() === "/advancedsearch") {	2✔
225	this.$router.push("/");	1✔
226	}	1✔
227
228	this.dialog = false;	2✔
229	},	1✔
230
231	isAdvancedSearchTerm(queryString) {	1✔
232	const queryValues = {	2✔
233	q: this.getAdvancedSearchText,	2✔
234	operator: this.getAdvancedSearch["operatorIdentifier"],	2✔
235	fields: queryString,	2✔
236	};	2✔
237	return queryValues;	2✔
238	},	1✔
239
240	noAdvancedSearchTerm(queryString) {	1✔
241	const queryValues = {	1✔
242	operator: this.getAdvancedSearch["operatorIdentifier"],	1✔
243	fields: queryString,	1✔
244	};	1✔
245	return queryValues;	1✔
246	},	1✔
247	/**	1✔
248	* Method called on the click of the proceed button	1✔
249	* in dialog box	1✔
250	*/	1✔
251	goToAdvancedSearch() {	1✔
252	if (this.updatedAdvancedSearchText) {	1✔
253	this.fetchAdvancedSearchResults(this.updatedAdvancedSearchText);	1✔
254	}	1!
NEW 255	else {	×
256	this.fetchAdvancedSearchResults(this.advancedSearchTerm);	×
257	}	×
258
259	//Clear search text field flag	1✔
260	this.$emit("clearSearchField", true);	1✔
261
262	this.advancedSearchQueryString();	1✔
263	this.advancedSearchNavigation(this.queryString);	1✔
264	this.closeDialog();	1✔
265	},	1✔
266
267	/**	1✔
268	* Add advancedSearch selection to query params in	1✔
269	* and create URL by inserting array of objects into string	1✔
270	*/	1✔
271	advancedSearchQueryString() {	1✔
272	if (	1✔
273	this.getAdvancedSearch["children"] &&	1✔
274	this.getAdvancedSearch["children"].length	1✔
275	) {	1✔
276	this.getAdvancedSearch["children"].forEach((item) => {	1✔
277	this.queryString = "";	1✔
278	this.queryString += "(operator=";	1✔
279	this.queryString += item["operatorIdentifier"];	1✔
280	const mergedValues = uniqueValues(item["children"]);	1✔
281	mergedValues.forEach((params) => {	1✔
282	this.queryString += "&";	1✔
283	this.queryString += params["identifier"];	1✔
284	this.queryString += "=";	1✔
285	if (Array.isArray(params["value"])) {	1!
286	let valuesArr = [];	×
287	params["value"].forEach((item) => {	×
288	if (isObject(item)) {	×
289	valuesArr.push(item.value);	×
NEW 290	}	×
NEW 291	else {	×
292	valuesArr.push(item);	×
293	}	×
294	});	×
295
296	this.queryString += valuesArr.join("+");	×
NEW 297	}	×
298	else if (params["value"]) {	1✔
299	this.queryString += params["value"];	1✔
300	}	1✔
301	});	1✔
302	this.queryString += ")";	1✔
303	});	1✔
304	}	1✔
305	},	1✔
306
307	/**	1✔
308	* Navigation method called on the click of the proceed button	1✔
309	* and on the advancedSearch page	1✔
310	*/	1✔
311	advancedSearchNavigation(queryString) {	1✔
312	//When not on advancedSearch page	1✔
313	if (this.$route.path !== "/advancedsearch") {	1✔
314	if (this.getAdvancedSearchText) {	1✔
315	this.$router.push({	1✔
316	name: "AdvancedSearchResult",	1✔
317	query: this.isAdvancedSearchTerm(queryString),	1✔
318	});	1✔
319	}	1!
NEW 320	else {	×
321	this.$router.push({	×
322	name: "AdvancedSearchResult",	×
323	query: this.noAdvancedSearchTerm(queryString),	×
324	});	×
325	}	×
326	}	1!
327	//When on advancedSearch page	×
328	else {	×
329	if (this.getAdvancedSearchText) {	×
330	this.$router.push({	×
331	query: this.isAdvancedSearchTerm(queryString),	×
332	});	×
NEW 333	}	×
NEW 334	else {	×
335	this.$router.push({	×
336	query: this.noAdvancedSearchTerm(queryString),	×
337	});	×
338	}	×
339	}	×
340	},	1✔
341
342	/**	1✔
343	* Method to fetch/update the searchTerm	1✔
344	* @param {String} -- item	1✔
345	*/	1✔
346	updateSearchText(item) {	1✔
347	this.updatedAdvancedSearchText = item;	1✔
348	},	1✔
349	},	1✔
350	};	1✔
351	</script>

FAIRsharing / fairsharing.github.io / 28019915738

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