Routing & dynamic tab loading

application/config/routes.php

@@ -61,8 +61,6 @@ $route['api/v1/organisation/[O|o]rganisationseinheit/(:any)'] = 'api/v1/organisa
 $route['api/v1/ressource/[B|b]etriebsmittelperson/(:any)'] = 'api/v1/ressource/betriebsmittelperson2/$1';
 $route['api/v1/system/[S|s]prache/(:any)'] = 'api/v1/system/sprache2/$1';
 
-$route['studentenverwaltung/(:any)/(:any)'] = 'Studentenverwaltung/index';
-
 // load routes from extensions
 $subdir = 'application/config/extensions';
 $dirlist = scandir($subdir);

application/controllers/Studentenverwaltung.php

@@ -12,7 +12,7 @@ class Studentenverwaltung extends FHC_Controller
 	/**
 	 * @return void
 	 */
-	public function index()
+	public function _remap()
 	{
 		$this->load->library('AuthLib');
 		$this->load->library('PermissionLib');

public/js/apps/Studentenverwaltung.js

@@ -29,6 +29,7 @@ const router = VueRouter.createRouter({
 	routes: [
 		{ path: `/${ciPath}/studentenverwaltung`, component: FhcStudentenverwaltung },
 		{ path: `/${ciPath}/studentenverwaltung/prestudent/:prestudent_id`, component: FhcStudentenverwaltung },
+		{ path: `/${ciPath}/studentenverwaltung/prestudent/:prestudent_id/:tab`, component: FhcStudentenverwaltung },
 		{ path: `/${ciPath}/studentenverwaltung/student/:id`, component: FhcStudentenverwaltung }
 	]
 });
@@ -38,6 +39,5 @@ const app = Vue.createApp();
 app
 	.use(router)
 	.use(PvConfig)
-	.use(ErrorHandling)
 	.mount('#main');
 

public/js/components/Stv/Studentenverwaltung/Details.js

@@ -1,40 +1,50 @@
-import DetailsDetails from './Details/Details.js';
-import DetailsNotizen from './Details/Notizen.js';
-
 export default {
-	components: {
-		DetailsDetails,
-		DetailsNotizen
-	},
 	props: {
 		student: Object
 	},
 	data() {
 		return {
-			component: 'DetailsDetails',
-			tabs: {
-				DetailsDetails: 'Details',
-				DetailsNotizen: 'Notizen'
-			}
+			current: this.$route.params.tab || 'details',
+			tabTemplates: {
+				details: 'Details',
+				notizen: 'Notizen'
+			},
+			tabs: {}
 		}
 	},
 	computed: {
 		hasNoStudent() {
 			return !this.student || (Object.keys(this.student).length === 0 && this.student.constructor === Object);
+		},
+		currentComponent() {
+			return this.tabs[this.current].component;
 		}
 	},
+	created() {
+		this.tabs = Object.fromEntries(Object.entries(this.tabTemplates).map(([key, title]) => {
+			return [key, {
+				title,
+				component: Vue.defineAsyncComponent(() => import("./Details/" + key.charAt(0).toUpperCase() + key.slice(1) + '.js'))
+			}];
+		}));
+	},
 	template: `
 	<div class="stv-details h-100 pb-3 d-flex flex-column">
 		<div v-if="hasNoStudent" class="justify-content-center d-flex h-100 align-items-center">Bitte StudentIn auswählen!</div>
 		<template v-else>		
 			<ul class="nav nav-tabs">
-				<li v-for="(title, comp) in tabs" class="nav-item" :key="comp">
-					<a class="nav-link" :class="{active: comp == component}" :aria-current="comp == component ? 'page' : ''" href="#" @click="component=comp">{{title}}</a>
+				<li v-for="({title}, key) in tabs" class="nav-item" :key="comp">
+					<a class="nav-link" :class="{active: key == current}" :aria-current="key == current ? 'page' : ''" href="#" @click="current=key">{{title}}</a>
 				</li>
 			</ul>
 			<div style="flex: 1 1 0%; height: 0%" class="border-bottom border-start border-end overflow-auto p-3">
 				<keep-alive>
-					<component :is="component" :student="student"></component>
+					<suspense>
+						<component :is="currentComponent" :student="student"></component>
+						<template #fallback>
+							Loading...
+						</template>
+					</suspense>
 				</keep-alive>
 			</div>
 		</template>