StV: add user menu

application/views/Studentenverwaltung.php

@@ -53,6 +53,8 @@ $configArray = [
 			active-addons="<?= defined('ACTIVE_ADDONS') ? ACTIVE_ADDONS : ''; ?>"
 			stv-root="<?= site_url('Studentenverwaltung'); ?>"
 			cis-root="<?= CIS_ROOT; ?>"
+			avatar-url="<?= site_url('Cis/Pub/bild/person/' . getAuthPersonId()); ?>" 
+			logout-url="<?= site_url('Cis/Auth/logout'); ?>"
 			:permissions="<?= htmlspecialchars(json_encode($permissions)); ?>"
 			:config="<?=  htmlspecialchars(json_encode($configArray)); ?>"
 			>

public/css/Studentenverwaltung.css

@@ -41,6 +41,12 @@ html {
 	width: 0%;
 }
 
+#nav-user-btn img {
+	object-fit: contain;
+	height: 2.5rem;
+	width: 2.5rem;
+}
+
 .tabulator-row.disabled.tabulator-row-odd .tabulator-cell {
 	color: var(--gray-400);
 }

public/js/components/Stv/Studentenverwaltung.js

@@ -16,6 +16,7 @@
  */
 
 import CoreSearchbar from "../searchbar/searchbar.js";
+import NavLanguage from "../navigation/Language.js";
 import VerticalSplit from "../verticalsplit/verticalsplit.js";
 import StvVerband from "./Studentenverwaltung/Verband.js";
 import StvList from "./Studentenverwaltung/List.js";
@@ -31,6 +32,7 @@ export default {
 	name: 'Studentenverwaltung',
 	components: {
 		CoreSearchbar,
+		NavLanguage,
 		VerticalSplit,
 		StvVerband,
 		StvList,
@@ -43,6 +45,8 @@ export default {
 		permissions: Object,
 		stvRoot: String,
 		cisRoot: String,
+		avatarUrl: String,
+		logoutUrl: String,
 		activeAddons: String, // semicolon separated list of active addons
 		url_studiensemester_kurzbz: String,
 		url_mode: String,
@@ -355,6 +359,37 @@ export default {
 				:searchfunction="searchfunction"
 				class="searchbar position-relative w-100"
 			></core-searchbar>
+			<div id="nav-user" class="dropdown">
+				<button
+					id="nav-user-btn"
+					class="btn btn-link rounded-0 py-0"
+					type="button"
+					data-bs-toggle="dropdown"
+					data-bs-target="#nav-user-menu"
+					aria-expanded="false"
+					aria-controls="nav-user-menu"
+				>
+					<img
+						:src="avatarUrl"
+						:alt="$p.t('profilUpdate/profilBild')"
+						class="bg-light avatar rounded-circle border border-light"
+					/>
+				</button>
+				<ul
+					ref="navUserDropdown"
+					class="dropdown-menu dropdown-menu-dark dropdown-menu-end rounded-0 text-center m-0"
+					aria-labelledby="nav-user-btn"
+				>
+					<li>
+						<nav-language
+							item-class="dropdown-item border-left-dark"
+							@changed="tmpFunc"
+						/>
+					</li>
+					<li><hr class="dropdown-divider m-0"/></li>
+					<li><a class="dropdown-item" :href="logoutUrl">Logout</a></li>
+				</ul>
+			</div>
 		</header>
 		<div class="container-fluid overflow-hidden">
 			<div class="row h-100">

public/js/components/navigation/Language.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright (C) 2025 fhcomplete.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+export default {
+	emits: [
+		'changed'
+	],
+	props: {
+		activeClass: {
+			type: String,
+			default: 'active'
+		},
+		itemClass: {
+			type: [String, Array, Object],
+			default: ''
+		}
+	},
+	data() {
+		return {
+			languages: FHC_JS_DATA_STORAGE_OBJECT.server_languages
+		};
+	}, 
+	methods:{
+		onChange(lang) {
+			if (this.languages.some(l => l.sprache === lang)) {
+				this.$p
+					.setLanguage(lang)
+					.then(() => {
+						if (document.querySelector('[cis4Reload]'))
+							window.location.reload();
+						else
+							this.$emit('changed', lang);
+					});
+			}
+		}
+	},
+	template: /*html*/`
+	<div class="navigation-language d-flex justify-content-center align-items-center flex-nowrap overflow-hidden">
+		<button
+			v-for="lang in languages"
+			:class="[itemClass, {[activeClass]: $p.user_language.value == lang.sprache}]"
+			:selected="$p.user_language.value == lang.sprache"
+			@click.prevent="onChange(lang.sprache)"
+		>
+			{{ lang.bezeichnung }}
+		</button>
+	</div>`
+};