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

97.97

/src/components/Records/Search/Input/StringSearch.vue

<template>
  <div>
    <v-form
      ref="form"
      v-model="formValid"
      class="d-flex flex-row align-center align-content-center pt-1 mr-1 mr-lg-1 ml-1"
      style="position: relative"
      validate-on="submit lazy"
      @submit.prevent="searchString()"
    >
      <v-text-field
        v-model="searchTerm"
        :class="$vuetify.display.lgAndDown ? 'v-input' : 'v-input-lg-up'"
        :placeholder="placeholder"
        :style="{ height: responsiveHeightTextBox + 'px' }"
        class="full-width"
        clearable
        density="compact"
        single-line
        variant="solo"
      />

      <!--  reusable search box  -->
      <v-btn
        v-if="!showHomeSearch"
        :class="responsiveHeight"
        class="mt-1 mt-lg-1 ml-2"
        color="primary"
        size="small"
        type="submit"
        variant="outlined"
        @click="searchString()"
      >
        <v-icon class="mr-1" size="x-small"> fas fa-search </v-icon>
        <span class="button-text-size">Search</span>
      </v-btn>

      <!--  Advance search button  -->
      <AdvancedSearch
        v-if="!showHomeSearch"
        :advanced-search-term="searchTerm"
        @clear-search-field="clearSearchField"
      />
      <!--  home page search box  -->
      <v-btn
        v-if="showHomeSearch"
        :class="[
          'mt-1 mt-lg-1 ml-2',
          $vuetify.display.lgAndDown ? 'home-search-bt' : 'home-search-bt-xl',
        ]"
        color="primary"
        @click="searchStringHomePage()"
      >
        <v-icon class="mr-1" size="x-small"> fas fa-search </v-icon>
        <span class="button-text-size">Search</span>
      </v-btn>
    </v-form>
    <!--  home page exclusive check box for search  -->
    <div v-if="showHomeSearch" class="pt-6">
      <v-checkbox
        v-for="(checkbox, index) in registries"
        :key="checkbox.value + '_' + index"
        v-model="selectedRegistries"
        :label="checkbox.label"
        :value="checkbox"
        class="d-inline-block mr-2"
        color="primary"
      >
        <template #label>
          <span class="v-label-white">{{ checkbox.label }}</span>
        </template>
      </v-checkbox>
    </div>
  </div>
</template>

<script>
import AdvancedSearch from "@/components/Records/Search/Input/AdvancedSearch/AdvancedSearch.vue";
import { useDisplay } from "vuetify";

export default {
  name: "StringSearch",
  components: { AdvancedSearch },
  props: {
    placeholder: { default: null, type: String },
    showHomeSearch: { default: false, type: Boolean },
    addSearchTerms: { default: false, type: Boolean },
    searchPath: { default: "/search", type: String },
  },
  setup() {
    const { mdAndDown, md, lg, xl, mobile } = useDisplay();
    return { mdAndDown, md, lg, xl, mobile };
  },
  data() {
    return {
      searchTerm: null,
      registries: [
        { label: "standards", value: "standard" },
        { label: "databases", value: "database" },
        { label: "policies", value: "policy" },
        { label: "collections", value: "collection" },
      ],
      selectedRegistries: [
        { label: "standards", value: "standard" },
        { label: "databases", value: "database" },
        { label: "policies", value: "policy" },
        { label: "collections", value: "collection" },
      ],
      formValid: true,
    };
  },
  computed: {
    responsiveHeight: function () {
      return {
        "style-sm-xs": this.$vuetify.display.mdAndDown,
        "style-md": this.$vuetify.display.md,
        "style-lg": this.$vuetify.display.lg,
        "style-xl": this.$vuetify.display.xl,
      };
    },
    responsiveHeightTextBox: function () {
      let boxHeight = 35;
      if (this.$vuetify.display.xl) {
        boxHeight = 50;
      }
      return boxHeight;
    },
  },

  methods: {
    searchString() {
      const _module = this;
      let query = {};
      if (_module.searchTerm) {
        // For ticket #1505 using _module.$route.path allows this
        // component to trigger a search on the same page, instead of going
        // to search from a collection's page.
        if (_module.addSearchTerms) {
          query = {
            ..._module.$route.query,
            q: _module.searchTerm,
          };
        } else {
          query = {
            // Changed due to: https://github.com/FAIRsharing/FAIRsharing-API/issues/625
            q: _module.searchTerm.replace(/[^0-9a-z]/gi, " "),
          };
        }
      }
      _module.$router.push({
        path: _module.searchPath,
        query: query,
      });
      _module.$refs.form.resetValidation();
    },
    searchStringHomePage() {
      const _module = this;
      let query = {};
      if (_module.searchTerm) {
        if (_module.selectedRegistries.length === _module.registries.length) {
          _module.$router.push({
            path: "/search",
            query: {
              q: _module.searchTerm ? _module.searchTerm : undefined,
            },
          });
          _module.searchTerm = null;
          _module.$refs.form.resetValidation();
        } else {
          const selectedRegistriesValues = [];
          _module.selectedRegistries.forEach((registryItem) => {
            selectedRegistriesValues.push(registryItem.value);
          });
          query = {
            q: _module.searchTerm ? _module.searchTerm : undefined,
            fairsharingRegistry: selectedRegistriesValues.toString(),
            searchAnd: false,
          };
        }
        _module.$router.push({
          path: "/search",
          query: query,
        });
      }
      _module.$refs.form.resetValidation();
    },
    clearSearchField(item) {
      if (item) this.searchTerm = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.v-input {
  box-shadow: 0 0 0 0;
  height: 35px !important;
  margin-bottom: 7px;
}
.v-input-lg-up {
  box-shadow: 0 0 0 0;
  height: 48px;
  margin-bottom: 15px;
  :deep(input) {
    height: 50px;
  }
}

.button-text-size {
  font-size: 12px;
}

.style-xl {
  height: 52px !important;
  margin-bottom: 4px;
}

.style-lg {
  height: 36px !important;
  margin-bottom: 4px;
}

.style-md {
  height: 32px !important;
}

.style-sm-xs {
  height: 40px !important;
  margin-bottom: 5px;
}

.home-search-bt {
  height: 40px !important;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: unset;
  -webkit-border-radius: unset;
  -moz-border-radius: unset;
}

.home-search-bt-xl {
  height: 50px !important;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: unset;
  -webkit-border-radius: unset;
  -moz-border-radius: unset;
}
.v-label-white {
  color: white;
}
:deep(.v-field__input) {
  min-height: v-bind(responsiveHeightTextBox + "px");
}
</style>

1	<template>
2	<div>	1✔
3	<v-form	1✔
4	ref="form"	1✔
5	v-model="formValid"	1✔
6	class="d-flex flex-row align-center align-content-center pt-1 mr-1 mr-lg-1 ml-1"	1✔
7	style="position: relative"	1✔
8	validate-on="submit lazy"	1✔
9	@submit.prevent="searchString()"	1✔
10	>
11	<v-text-field	1✔
12	v-model="searchTerm"	1✔
13	:class="$vuetify.display.lgAndDown ? 'v-input' : 'v-input-lg-up'"	1!
14	:placeholder="placeholder"	1✔
15	:style="{ height: responsiveHeightTextBox + 'px' }"	1✔
16	class="full-width"	1✔
17	clearable	1✔
18	density="compact"	1✔
19	single-line	1✔
20	variant="solo"	1✔
21	/>	1✔
22
23	<!-- reusable search box -->	1✔
24	<v-btn	1✔
25	v-if="!showHomeSearch"	1✔
26	:class="responsiveHeight"	1✔
27	class="mt-1 mt-lg-1 ml-2"	1✔
28	color="primary"	1✔
29	size="small"	1✔
30	type="submit"	1✔
31	variant="outlined"	1✔
32	@click="searchString()"	1✔
33	>
34	<v-icon class="mr-1" size="x-small"> fas fa-search </v-icon>	1✔
35	<span class="button-text-size">Search</span>	1✔
36	</v-btn>	1✔
37
38	<!-- Advance search button -->	1✔
39	<AdvancedSearch	1✔
40	v-if="!showHomeSearch"	1✔
41	:advanced-search-term="searchTerm"	1✔
42	@clear-search-field="clearSearchField"	1✔
43	/>	1✔
44	<!-- home page search box -->	1✔
45	<v-btn	1✔
46	v-if="showHomeSearch"	1✔
47	:class="[	1✔
48	'mt-1 mt-lg-1 ml-2',
49	$vuetify.display.lgAndDown ? 'home-search-bt' : 'home-search-bt-xl',
50	]"
51	color="primary"	1✔
52	@click="searchStringHomePage()"	1✔
53	>
54	<v-icon class="mr-1" size="x-small"> fas fa-search </v-icon>	1✔
55	<span class="button-text-size">Search</span>	1✔
56	</v-btn>	1✔
57	</v-form>	1✔
58	<!-- home page exclusive check box for search -->	1✔
59	<div v-if="showHomeSearch" class="pt-6">	1✔
60	<v-checkbox	1✔
61	v-for="(checkbox, index) in registries"	1✔
62	:key="checkbox.value + '_' + index"	1✔
63	v-model="selectedRegistries"	1✔
64	:label="checkbox.label"	1✔
65	:value="checkbox"	1✔
66	class="d-inline-block mr-2"	1✔
67	color="primary"	1✔
68	>
69	<template #label>	1✔
70	<span class="v-label-white">{{ checkbox.label }}</span>	1✔
71	</template>
72	</v-checkbox>	1✔
73	</div>	1✔
74	</div>	1✔
75	</template>
76
77	<script>
78	import AdvancedSearch from "@/components/Records/Search/Input/AdvancedSearch/AdvancedSearch.vue";	1✔
79	import { useDisplay } from "vuetify";	1✔
80
81	export default {	1✔
82	name: "StringSearch",	1✔
83	components: { AdvancedSearch },	1✔
84	props: {	1✔
85	placeholder: { default: null, type: String },	1✔
86	showHomeSearch: { default: false, type: Boolean },	1✔
87	addSearchTerms: { default: false, type: Boolean },	1✔
88	searchPath: { default: "/search", type: String },	1✔
89	},	1✔
90	setup() {	1✔
91	const { mdAndDown, md, lg, xl, mobile } = useDisplay();	17✔
92	return { mdAndDown, md, lg, xl, mobile };	17✔
93	},	1✔
94	data() {	1✔
95	return {	17✔
96	searchTerm: null,	17✔
97	registries: [	17✔
98	{ label: "standards", value: "standard" },	17✔
99	{ label: "databases", value: "database" },	17✔
100	{ label: "policies", value: "policy" },	17✔
101	{ label: "collections", value: "collection" },	17✔
102	],	17✔
103	selectedRegistries: [	17✔
104	{ label: "standards", value: "standard" },	17✔
105	{ label: "databases", value: "database" },	17✔
106	{ label: "policies", value: "policy" },	17✔
107	{ label: "collections", value: "collection" },	17✔
108	],	17✔
109	formValid: true,	17✔
110	};	17✔
111	},	1✔
112	computed: {	1✔
113	responsiveHeight: function () {	1✔
114	return {	26✔
115	"style-sm-xs": this.$vuetify.display.mdAndDown,	26✔
116	"style-md": this.$vuetify.display.md,	26✔
117	"style-lg": this.$vuetify.display.lg,	26✔
118	"style-xl": this.$vuetify.display.xl,	26✔
119	};	26✔
120	},	1✔
121	responsiveHeightTextBox: function () {	1✔
122	let boxHeight = 35;	27✔
123	if (this.$vuetify.display.xl) {	27✔
124	boxHeight = 50;	17✔
125	}	17✔
126	return boxHeight;	27✔
127	},	1✔
128	},	1✔
129
130	methods: {	1✔
131	searchString() {	1✔
132	const _module = this;	3✔
133	let query = {};	3✔
134	if (_module.searchTerm) {	3✔
135	// For ticket #1505 using _module.$route.path allows this	2✔
136	// component to trigger a search on the same page, instead of going	2✔
137	// to search from a collection's page.	2✔
138	if (_module.addSearchTerms) {	2✔
139	query = {	1✔
140	..._module.$route.query,	1✔
141	q: _module.searchTerm,	1✔
142	};	1✔
143	} else {	1✔
144	query = {	1✔
145	// Changed due to: https://github.com/FAIRsharing/FAIRsharing-API/issues/625	1✔
146	q: _module.searchTerm.replace(/[^0-9a-z]/gi, " "),	1✔
147	};	1✔
148	}	1✔
149	}	2✔
150	_module.$router.push({	3✔
151	path: _module.searchPath,	3✔
152	query: query,	3✔
153	});	3✔
154	_module.$refs.form.resetValidation();	3✔
155	},	1✔
156	searchStringHomePage() {	1✔
157	const _module = this;	4✔
158	let query = {};	4✔
159	if (_module.searchTerm) {	4✔
160	if (_module.selectedRegistries.length === _module.registries.length) {	3✔
161	_module.$router.push({	1✔
162	path: "/search",	1✔
163	query: {	1✔
164	q: _module.searchTerm ? _module.searchTerm : undefined,	1!
165	},	1✔
166	});	1✔
167	_module.searchTerm = null;	1✔
168	_module.$refs.form.resetValidation();	1✔
169	} else {	3✔
170	const selectedRegistriesValues = [];	2✔
171	_module.selectedRegistries.forEach((registryItem) => {	2✔
172	selectedRegistriesValues.push(registryItem.value);	2✔
173	});	2✔
174	query = {	2✔
175	q: _module.searchTerm ? _module.searchTerm : undefined,	2!
176	fairsharingRegistry: selectedRegistriesValues.toString(),	2✔
177	searchAnd: false,	2✔
178	};	2✔
179	}	2✔
180	_module.$router.push({	3✔
181	path: "/search",	3✔
182	query: query,	3✔
183	});	3✔
184	}	3✔
185	_module.$refs.form.resetValidation();	4✔
186	},	1✔
187	clearSearchField(item) {	1✔
UNCOV 188	if (item) this.searchTerm = null;	×
189	},	1✔
190	},	1✔
191	};	1✔
192	</script>
193
194	<style lang="scss" scoped>
195	.v-input {
196	box-shadow: 0 0 0 0;
197	height: 35px !important;
198	margin-bottom: 7px;
199	}
200	.v-input-lg-up {
201	box-shadow: 0 0 0 0;
202	height: 48px;
203	margin-bottom: 15px;
204	:deep(input) {
205	height: 50px;
206	}
207	}
208
209	.button-text-size {
210	font-size: 12px;
211	}
212
213	.style-xl {
214	height: 52px !important;
215	margin-bottom: 4px;
216	}
217
218	.style-lg {
219	height: 36px !important;
220	margin-bottom: 4px;
221	}
222
223	.style-md {
224	height: 32px !important;
225	}
226
227	.style-sm-xs {
228	height: 40px !important;
229	margin-bottom: 5px;
230	}
231
232	.home-search-bt {
233	height: 40px !important;
234	position: absolute;
235	right: 0;
236	top: 0;
237	border-radius: unset;
238	-webkit-border-radius: unset;
239	-moz-border-radius: unset;
240	}
241
242	.home-search-bt-xl {
243	height: 50px !important;
244	position: absolute;
245	right: 0;
246	top: 0;
247	border-radius: unset;
248	-webkit-border-radius: unset;
249	-moz-border-radius: unset;
250	}
251	.v-label-white {
252	color: white;
253	}
254	:deep(.v-field__input) {
255	min-height: v-bind(responsiveHeightTextBox + "px");
256	}
257	</style>

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