update(Cis4-Menu/Sprache): changes language of the Menu when switching language of the application

application/controllers/api/frontend/v1/CisMenu.php

@@ -0,0 +1,58 @@
+<?php
+/**
+ * Copyright (C) 2024 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/>.
+ */
+
+if (! defined('BASEPATH')) exit('No direct script access allowed');
+
+
+class CisMenu extends FHCAPI_Controller
+{
+	
+	/**
+	 * Object initialization
+	 */
+	public function __construct()
+	{
+		parent::__construct([
+			'getMenu' => self::PERM_LOGGED,
+		]);
+
+		
+
+	}
+
+	//------------------------------------------------------------------------------------------------------------------
+	// Public methods
+
+    /**
+	 * fetches the menu for CIS from the database based on the userLanguage
+	 */
+    public function getMenu()
+	{
+		$this->load->model('content/Content_model', 'ContentModel');
+		$this->load->config('cis');
+		$cis4_content_id =$this->config->item('cis_menu_root_content_id');
+		$result = $this->ContentModel->getMenu($cis4_content_id, getAuthUID(),getUserLanguage());
+		$result = $this->getDataOrTerminateWithError($result);
+		$menu = $result->childs ?? [];
+		$this->terminateWithSuccess($menu);
+    }
+
+	
+	
+}
+

application/views/templates/CISVUE-Header.php

@@ -5,6 +5,7 @@ $includesArray = array(
 	'bootstrap5' => true,
 	'fontawesome6' => true,
 	'axios027' => true,
+	'primevue3' => true,
 	'customJSModules' => array_merge([
 		'public/js/apps/Cis.js'
 	], $customJSModules ?? []),
@@ -15,15 +16,6 @@ $includesArray = array(
 
 $this->load->view('templates/FHC-Header', $includesArray);
 
-
-if (!isset($menu)) {
-	$ci =& get_instance(); // get CI instance
-	$ci->load->model('content/Content_model', 'ContentModel');
-	$ci->load->config('cis');
-	$cis4_content_id = $ci->config->item('cis_menu_root_content_id');
-	$result = $ci->ContentModel->getMenu($cis4_content_id, getAuthUID());
-	$menu = getData($result)->childs ?? [];
-}
 ?>
 
 <script type="text/javascript">
@@ -39,7 +31,6 @@ if (!isset($menu)) {
 		logout-url="<?= site_url('Cis/Auth/logout'); ?>"
 		:searchbaroptions="searchbaroptions" 
 		:searchfunction="searchfunction"
-		:menu="<?= htmlspecialchars(json_encode(array_values($menu)), ENT_QUOTES, 'UTF-8') ?>"
 		></cis-menu>
 </header>
 

public/js/api/fhcapifactory.js

@@ -34,6 +34,7 @@ import cms from "./cms.js";
 import lehre from "./lehre.js";
 import addons from "./addons.js";
 import studiengang from "./studiengang.js";
+import menu from "./menu.js";
 
 export default {
     search,
@@ -55,4 +56,5 @@ export default {
     lehre,
     addons,
 	studiengang,
+	menu,
 };

public/js/api/menu.js

@@ -0,0 +1,9 @@
+export default {
+	getMenu: function () {
+		return this.$fhcApi.get(
+			"/api/frontend/v1/CisMenu/getMenu",
+			{}
+		);
+	}
+
+}

public/js/apps/Cis.js

@@ -107,6 +107,7 @@ const app = Vue.createApp({
     }
 });
 app.use(FhcApi);
+//TODO: EVERY View that uses CISVUE-HEADER includes Cis.js and needs to import primevue.js even if they don't use it (might be needed for Vue Router)
 app.use(primevue.config.default, {
 	zIndex: {
 		overlay: 9000,

public/js/components/Cis/Menu.js

@@ -9,7 +9,6 @@ export default {
 		CisSprachen,
     },
     props: {
-		menu: Array,
 		rootUrl: String,
         logoUrl: String,
         avatarUrl: String,
@@ -51,6 +50,13 @@ export default {
 		}
 	},
 	methods: {
+		fetchMenu: function(){
+			return this.$fhcApi.factory.menu.getMenu()
+			.then(res => res.data)
+			.then(menu => {
+				this.entries = menu;
+			})	
+		},
 		checkSettingsVisibility: function (event) {
 			// hides the settings collapsible if the user clicks somewhere else
 			if (!this.$refs.navUserDropdown.contains(event.target)) {
@@ -64,6 +70,10 @@ export default {
 			document.removeEventListener("click", this.checkSettingsVisibility);
 		},
 		makeParentContentActive(content_id, collection=this.entries, parent=null){
+			if(!collection) return;
+			if (typeof collection == 'object' && !Array.isArray(collection) && Object.entries(collection).length > 0) {
+				collection = Object.values(collection);
+			}
 			for(let entry of collection){
 				if(entry.content_id == content_id){
 					this.activeEntry = parent;
@@ -80,8 +90,10 @@ export default {
 			this.activeEntry = content_id;
 		},
 	},
+	created(){
+		this.fetchMenu();
+	},
 	mounted(){
-		this.entries = this.menu;
 		this.$p.loadCategory(['ui', 'global'])
 		this.navUserDropdown = new bootstrap.Collapse(this.$refs.navUserDropdown,{
 			toggle: false
@@ -105,7 +117,7 @@ export default {
 		id="nav-user-menu" class="top-100 end-0 collapse list-unstyled" aria-labelledby="nav-user-btn">
 			<li class="btn-level-2"><a class="btn btn-level-2 rounded-0 d-block" :href="site_url + '/Cis/Profil'" id="menu-profil">Profil</a></li>
 			<li class="btn-level-2">
-				<cis-sprachen></cis-sprachen>
+				<cis-sprachen @languageChanged="fetchMenu"></cis-sprachen>
 			</li>
 			<li class="btn-level-2"><hr class="dropdown-divider m-0 "></li>
 			<li><a class="btn btn-level-2 rounded-0 d-block" :href="logoutUrl">Logout</a></li>
@@ -119,7 +131,6 @@ export default {
 				</button>
 			</div>
 			<div class="offcanvas-body p-0">
-
 				<div id="nav-main-menu" class="nav-menu-collapse collapse collapse-horizontal show">
 					<div>
 						<cis-menu-entry :highestMatchingUrlCount="highestMatchingUrlCount" :activeContent="activeEntry" v-for="entry in entries" :key="entry.content_id" :entry="entry" />

public/js/components/Cis/Sprachen.js

@@ -5,11 +5,17 @@ export default {
 			sprachenTranslation:null,
 		}
 	}, 
+	emits: ['languageChanged'],
 	methods:{
 		changeLanguage: function(lang){
 			if(this.allActiveLanguages.some(l => l === lang))
 			{
-				this.$p.setLanguage(lang, this.$fhcApi);
+				this.$p.setLanguage(lang, this.$fhcApi)
+				.then(res => res.data)
+				.then(data =>
+				{
+					this.$emit('languageChanged', lang);
+				})
 			}
 		},
 		getSprachenBezeichnung: function(lang){

public/js/plugin/Phrasen.js

@@ -1,9 +1,8 @@
 import FhcApi from './FhcApi.js';
 
 const categories = Vue.reactive({});
-const user_language = Vue.ref(FHC_JS_DATA_STORAGE_OBJECT.user_language);
 const loadingModules = {};
-let reload = false;
+let user_language = Vue.ref(FHC_JS_DATA_STORAGE_OBJECT.user_language);
 
 function extractCategory(obj, category) {
 	return obj.filter(e => e.category == category).reduce((res, elem) => {
@@ -22,10 +21,10 @@ function getValueForLoadedPhrase(category, phrase, params) {
 }
 
 const phrasen = {
+	user_language,
 	setLanguage(language, api) {
 		const catArray = Object.keys(categories)
 		return api.factory.phrasen.setLanguage(catArray, language).then(res => {
-			if(reload) window.location.reload()
 
 			res.data.forEach(row => {
 				categories[row.category][row.phrase] = row.text
@@ -79,7 +78,6 @@ const phrasen = {
 
 export default {
 	install(app, options) {
-		reload = options?.reload ?? reload
 		app.use(FhcApi, options?.fhcApi || undefined);
 		app.config.globalProperties.$p = {
 			t: phrasen.t,