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.0

/src/components/Navigation/Header.vue

<template>
  <v-app-bar
    id="mainHeader"
    :class="[
      { largeScreen: $vuetify.display.xl },
      { smallScreen: $vuetify.display.mdAndDown },
    ]"
    class="header-container"
    height="150px"
  >
    <v-app-bar-nav-icon
      v-if="$vuetify.display.mdAndDown"
      @click.stop="toggleDrawerLeft"
    />
    <!-- First Level Menu -->
    <div
      :class="{ 'full-width': $vuetify.display.mdAndDown }"
      class="navFirst d-flex"
    >
      <router-link to="/">
        <img alt="FAIRsharing logo" src="/assets/fairsharing-logo.svg" />
      </router-link>
      <div class="d-flex justify-start align-center custom-width">
        <string-search
          v-if="$vuetify.display.sm || $vuetify.display.mdAndUp"
          :class="$vuetify.display.lgAndDown ? 'flex-grow-1' : 'full-width'"
          placeholder="Search through all content"
        />
        <nav>
          <ul
            v-if="$vuetify.display.lgAndUp"
            class="d-flex flex-row align-center flex-wrap px-0"
          >
            <!-- LOGIN -->
            <v-menu
              v-if="!user().isLoggedIn"
              :close-on-content-click="closeMenuStatus"
              class="mt-5"
              max-height="90vh"
              transition="slide-y-transition"
            >
              <template #activator="{ props }">
                <v-btn
                  :size="
                    $vuetify.display.xl
                      ? 'x-large'
                      : $vuetify.display.mdAndDown
                        ? 'small'
                        : undefined
                  "
                  class="mr-1 mt-sm-1 bg-accent3"
                  elevation="3"
                  v-bind="props"
                  @click="closePopup(false)"
                >
                  Login
                  <v-icon class="ml-1" size="small"> fas fa-sign-in-alt</v-icon>
                </v-btn>
              </template>
              <Login
                :pop-up="true"
                :redirect="false"
                @close-popup="closePopup"
              />
            </v-menu>
            <div v-else class="d-flex align-center">
              <v-btn
                :size="
                  $vuetify.display.xl
                    ? 'x-large'
                    : $vuetify.display.mdAndDown
                      ? 'small'
                      : undefined
                "
                class="mr-1 mt-sm-1 bg-green"
                elevation="2"
                to="/accounts/profile"
              >
                <v-icon class="mr-1" color="white"> fas fa-user-circle</v-icon>

                <span class="text-white ellipse-150">{{
                  user().credentials.username
                }}</span>
              </v-btn>
              <v-btn
                class="bg-red mt-1"
                height="30"
                size="x-small"
                variant="elevated"
                width="30"
              >
                <v-icon
                  color="white"
                  icon="fas fa-power-off"
                  size="20"
                  @click="logoutUser()"
                />
              </v-btn>
            </div>
          </ul>
        </nav>
      </div>
    </div>
    <!-- Second Level Menu -->
    <div
      v-if="$vuetify.display.lgAndUp"
      class="navSecond d-flex justify-space-around align-center full-width"
    >
      <nav class="full-width">
        <ul
          v-if="$vuetify.display.lgAndUp"
          class="d-flex flex-row align-center px-0 justify-space-around"
        >
          <li
            v-for="(item, itemIndex) in links"
            :key="'navBarTopMenuItem_' + itemIndex"
          >
            <v-btn
              :class="{ 'px-2': $vuetify.display.lgAndDown }"
              :color="item.color"
              :size="
                $vuetify.display.xl
                  ? 'x-large'
                  : $vuetify.display.mdAndDown
                    ? 'small'
                    : undefined
              "
              :to="item.link"
              :variant="!item.active ? 'outlined' : 'elevated'"
              class="mr-1 mt-sm-1 menuLinks"
              max-width="184px"
              min-width="167px"
              width="100%"
            >
              <span
                :class="[
                  'text-white',
                  { 'text-primary': !item.active },
                  { 'text-accent3': item.primary && !item.active },
                ]"
                >{{ item.label }}</span
              >
            </v-btn>
          </li>
        </ul>
      </nav>
    </div>
  </v-app-bar>
</template>

<script>
import { isEmpty } from "lodash";
import { mapActions, mapState } from "vuex";

import StringSearch from "@/components/Records/Search/Input/StringSearch";
import Login from "@/views/Users/Login/Login";

export default {
  name: "HeaderComp",
  components: { StringSearch, Login },
  data: function () {
    return {
      closeMenuStatus: false,
      drawerLeft: false,
      links: [
        {
          label: "Standards",
          name: "Standard",
          link: "/standards",
          color: "accent3",
          active: false,
          primary: true,
        },
        {
          label: "Databases",
          name: "Database",
          link: "/databases",
          color: "accent3",
          active: false,
          primary: true,
        },
        {
          label: "Policies",
          name: "Policy",
          link: "/policies",
          color: "accent3",
          active: false,
          primary: true,
        },
        {
          label: "Collections",
          name: "Collection",
          link: "/collections",
          color: "primary",
          active: false,
          primary: false,
        },
        {
          label: "Organisations",
          name: "Organisations",
          link: "/organisations",
          color: "primary",
          active: false,
          primary: false,
        },
        {
          label: "Add content",
          name: "New",
          link: "/new",
          color: "primary",
          active: false,
          primary: false,
        },
        {
          label: "Stats",
          name: "Statistics",
          link: "/summary-statistics",
          color: "primary",
          active: false,
          primary: false,
        },
      ],
    };
  },
  computed: {
    ...mapState("uiController", ["UIGeneralStatus"]),
    ...mapState("users", ["user"]),
    currentParameter() {
      let currentQuery = this.$route.query;
      if (!isEmpty(currentQuery)) {
        return currentQuery;
      } else {
        return { fairsharingRegistry: this.$route.name };
      }
    },
  },
  watch: {
    currentParameter: {
      handler(newVal) {
        const _module = this;
        _module.setCurrentActiveButton(newVal.fairsharingRegistry);
      },
      deep: true,
    },
  },
  methods: {
    ...mapActions("users", ["logout"]),
    toggleDrawerLeft: function () {
      this.drawerLeft = !this.UIGeneralStatus.drawerVisibilityState;
      this.$store.dispatch("uiController/setGeneralUIAttributesAction", {
        headerVisibilityState: true,
        drawerVisibilityState: this.drawerLeft,
      });
    },
    closePopup: function (status) {
      this.closeMenuStatus = status;
    },
    setCurrentActiveButton: function (newValue) {
      this.links.map((link) => {
        link.name === newValue ? (link.active = true) : (link.active = false);
      });
    },

    async logoutUser() {
      await this.logout();
      await this.$router.push({ name: "Login" });
    },
  },
};
</script>

<style lang="scss" scoped>
header {
  padding-right: 0.5rem;
}

.custom-width {
  width: 94%;
}

.header-container {
  border-bottom: 3px dashed #253442;
  position: relative !important;
  height: 150px;
  max-height: 150px;
  background-color: #f5f5f5 !important;
}

.header-container:deep(.v-toolbar__content) {
  flex-direction: column;
  align-items: stretch;
  padding: 4px 16px;
}

.smallScreen {
  height: 100px !important;
  max-height: 100px !important;
}

.smallScreen:deep(.v-toolbar__content) {
  height: 100px !important;
  flex-direction: row;
  align-items: center;
}

.largeScreen {
  height: 170px !important;
  max-height: 170px !important;
}

.largeScreen:deep(.menuLinks) {
  min-width: 260px !important;
}
</style>

1	<template>
2	<v-app-bar	1✔
3	id="mainHeader"	1✔
4	:class="[	1✔
5	{ largeScreen: $vuetify.display.xl },
6	{ smallScreen: $vuetify.display.mdAndDown },
7	]"
8	class="header-container"	1✔
9	height="150px"	1✔
10	>
11	<v-app-bar-nav-icon	1✔
12	v-if="$vuetify.display.mdAndDown"	1✔
13	@click.stop="toggleDrawerLeft"	1✔
14	/>	1✔
15	<!-- First Level Menu -->	1✔
16	<div	1✔
17	:class="{ 'full-width': $vuetify.display.mdAndDown }"	1✔
18	class="navFirst d-flex"	1✔
19	>
20	<router-link to="/">	1✔
21	<img alt="FAIRsharing logo" src="/assets/fairsharing-logo.svg" />	1✔
22	</router-link>	1✔
23	<div class="d-flex justify-start align-center custom-width">	1✔
24	<string-search	1✔
25	v-if="$vuetify.display.sm \|\| $vuetify.display.mdAndUp"	1✔
26	:class="$vuetify.display.lgAndDown ? 'flex-grow-1' : 'full-width'"	1✔
27	placeholder="Search through all content"	1✔
28	/>	1✔
29	<nav>	1✔
30	<ul	1✔
31	v-if="$vuetify.display.lgAndUp"	1✔
32	class="d-flex flex-row align-center flex-wrap px-0"	1✔
33	>
34	<!-- LOGIN -->	1✔
35	<v-menu	1✔
36	v-if="!user().isLoggedIn"	1✔
37	:close-on-content-click="closeMenuStatus"	1✔
38	class="mt-5"	1✔
39	max-height="90vh"	1✔
40	transition="slide-y-transition"	1✔
41	>
42	<template #activator="{ props }">	1✔
43	<v-btn	1✔
44	:size="	1✔
45	$vuetify.display.xl
46	? 'x-large'
47	: $vuetify.display.mdAndDown
48	? 'small'
49	: undefined
50	"
51	class="mr-1 mt-sm-1 bg-accent3"	1✔
52	elevation="3"	1✔
53	v-bind="props"	1✔
54	@click="closePopup(false)"	1✔
55	>	1✔
56	Login
57	<v-icon class="ml-1" size="small"> fas fa-sign-in-alt</v-icon>	1✔
58	</v-btn>	1✔
59	</template>
60	<Login	1✔
61	:pop-up="true"	1✔
62	:redirect="false"	1✔
63	@close-popup="closePopup"	1✔
64	/>	1✔
65	</v-menu>	1✔
66	<div v-else class="d-flex align-center">	1✔
67	<v-btn	1✔
68	:size="	1✔
69	$vuetify.display.xl
70	? 'x-large'
71	: $vuetify.display.mdAndDown
72	? 'small'
73	: undefined
74	"
75	class="mr-1 mt-sm-1 bg-green"	1✔
76	elevation="2"	1✔
77	to="/accounts/profile"	1✔
78	>
79	<v-icon class="mr-1" color="white"> fas fa-user-circle</v-icon>	1✔
80
81	<span class="text-white ellipse-150">{{	1✔
82	user().credentials.username	1✔
83	}}</span>	1✔
84	</v-btn>	1✔
85	<v-btn	1✔
86	class="bg-red mt-1"	1✔
87	height="30"	1✔
88	size="x-small"	1✔
89	variant="elevated"	1✔
90	width="30"	1✔
91	>
92	<v-icon	1✔
93	color="white"	1✔
94	icon="fas fa-power-off"	1✔
95	size="20"	1✔
96	@click="logoutUser()"	1✔
97	/>	1✔
98	</v-btn>	1✔
99	</div>	1✔
100	</ul>	1✔
101	</nav>	1✔
102	</div>	1✔
103	</div>	1✔
104	<!-- Second Level Menu -->	1✔
105	<div	1✔
106	v-if="$vuetify.display.lgAndUp"	1✔
107	class="navSecond d-flex justify-space-around align-center full-width"	1✔
108	>
109	<nav class="full-width">	1✔
110	<ul	1✔
111	v-if="$vuetify.display.lgAndUp"	1✔
112	class="d-flex flex-row align-center px-0 justify-space-around"	1✔
113	>
114	<li	1✔
115	v-for="(item, itemIndex) in links"	1✔
116	:key="'navBarTopMenuItem_' + itemIndex"	1✔
117	>
118	<v-btn	1✔
119	:class="{ 'px-2': $vuetify.display.lgAndDown }"	1✔
120	:color="item.color"	1✔
121	:size="	1✔
122	$vuetify.display.xl
123	? 'x-large'
124	: $vuetify.display.mdAndDown
125	? 'small'
126	: undefined
127	"
128	:to="item.link"	1✔
129	:variant="!item.active ? 'outlined' : 'elevated'"	1✔
130	class="mr-1 mt-sm-1 menuLinks"	1✔
131	max-width="184px"	1✔
132	min-width="167px"	1✔
133	width="100%"	1✔
134	>
135	<span	1✔
136	:class="[	1✔
137	'text-white',
138	{ 'text-primary': !item.active },
139	{ 'text-accent3': item.primary && !item.active },
140	]"
141	>{{ item.label }}</span	1✔
142	>	1✔
143	</v-btn>	1✔
144	</li>	1✔
145	</ul>	1✔
146	</nav>	1✔
147	</div>	1✔
148	</v-app-bar>	1✔
149	</template>
150
151	<script>
152	import { isEmpty } from "lodash";	1✔
153	import { mapActions, mapState } from "vuex";	1✔
154
155	import StringSearch from "@/components/Records/Search/Input/StringSearch";	1✔
156	import Login from "@/views/Users/Login/Login";	1✔
157
158	export default {	1✔
159	name: "HeaderComp",	1✔
160	components: { StringSearch, Login },	1✔
161	data: function () {	1✔
162	return {	1✔
163	closeMenuStatus: false,	1✔
164	drawerLeft: false,	1✔
165	links: [	1✔
166	{	1✔
167	label: "Standards",	1✔
168	name: "Standard",	1✔
169	link: "/standards",	1✔
170	color: "accent3",	1✔
171	active: false,	1✔
172	primary: true,	1✔
173	},	1✔
174	{	1✔
175	label: "Databases",	1✔
176	name: "Database",	1✔
177	link: "/databases",	1✔
178	color: "accent3",	1✔
179	active: false,	1✔
180	primary: true,	1✔
181	},	1✔
182	{	1✔
183	label: "Policies",	1✔
184	name: "Policy",	1✔
185	link: "/policies",	1✔
186	color: "accent3",	1✔
187	active: false,	1✔
188	primary: true,	1✔
189	},	1✔
190	{	1✔
191	label: "Collections",	1✔
192	name: "Collection",	1✔
193	link: "/collections",	1✔
194	color: "primary",	1✔
195	active: false,	1✔
196	primary: false,	1✔
197	},	1✔
198	{	1✔
199	label: "Organisations",	1✔
200	name: "Organisations",	1✔
201	link: "/organisations",	1✔
202	color: "primary",	1✔
203	active: false,	1✔
204	primary: false,	1✔
205	},	1✔
206	{	1✔
207	label: "Add content",	1✔
208	name: "New",	1✔
209	link: "/new",	1✔
210	color: "primary",	1✔
211	active: false,	1✔
212	primary: false,	1✔
213	},	1✔
214	{	1✔
215	label: "Stats",	1✔
216	name: "Statistics",	1✔
217	link: "/summary-statistics",	1✔
218	color: "primary",	1✔
219	active: false,	1✔
220	primary: false,	1✔
221	},	1✔
222	],	1✔
223	};	1✔
224	},	1✔
225	computed: {	1✔
226	...mapState("uiController", ["UIGeneralStatus"]),	1✔
227	...mapState("users", ["user"]),	1✔
228	currentParameter() {	1✔
229	let currentQuery = this.$route.query;	1✔
230	if (!isEmpty(currentQuery)) {	1✔
231	return currentQuery;	1✔
232	} else {	1!
NEW 233	return { fairsharingRegistry: this.$route.name };	×
UNCOV 234	}	×
235	},	1✔
236	},	1✔
237	watch: {	1✔
238	currentParameter: {	1✔
239	handler(newVal) {	1✔
UNCOV 240	const _module = this;	×
NEW 241	_module.setCurrentActiveButton(newVal.fairsharingRegistry);	×
242	},	1✔
243	deep: true,	1✔
244	},	1✔
245	},	1✔
246	methods: {	1✔
247	...mapActions("users", ["logout"]),	1✔
248	toggleDrawerLeft: function () {	1✔
249	this.drawerLeft = !this.UIGeneralStatus.drawerVisibilityState;	1✔
250	this.$store.dispatch("uiController/setGeneralUIAttributesAction", {	1✔
251	headerVisibilityState: true,	1✔
252	drawerVisibilityState: this.drawerLeft,	1✔
253	});	1✔
254	},	1✔
255	closePopup: function (status) {	1✔
256	this.closeMenuStatus = status;	2✔
257	},	1✔
258	setCurrentActiveButton: function (newValue) {	1✔
259	this.links.map((link) => {	1✔
260	link.name === newValue ? (link.active = true) : (link.active = false);	6✔
261	});	1✔
262	},	1✔
263
264	async logoutUser() {	1✔
NEW 265	await this.logout();	×
NEW 266	await this.$router.push({ name: "Login" });	×
267	},	1✔
268	},	1✔
269	};	1✔
270	</script>
271
272	<style lang="scss" scoped>
273	header {
274	padding-right: 0.5rem;
275	}
276
277	.custom-width {
278	width: 94%;
279	}
280
281	.header-container {
282	border-bottom: 3px dashed #253442;
283	position: relative !important;
284	height: 150px;
285	max-height: 150px;
286	background-color: #f5f5f5 !important;
287	}
288
289	.header-container:deep(.v-toolbar__content) {
290	flex-direction: column;
291	align-items: stretch;
292	padding: 4px 16px;
293	}
294
295	.smallScreen {
296	height: 100px !important;
297	max-height: 100px !important;
298	}
299
300	.smallScreen:deep(.v-toolbar__content) {
301	height: 100px !important;
302	flex-direction: row;
303	align-items: center;
304	}
305
306	.largeScreen {
307	height: 170px !important;
308	max-height: 170px !important;
309	}
310
311	.largeScreen:deep(.menuLinks) {
312	min-width: 260px !important;
313	}
314	</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