FHC-Core/public/js/components/Stv/Studentenverwaltung/Details.js

import FhcTabs from "../../Tabs.js";
import FhcHeader from "../../DetailHeader/DetailHeader.js";

import ApiStvApp from '../../../api/factory/stv/app.js';

// TODO(chris): alt & title
// TODO(chris): phrasen

export default {
	name: "DetailsPrestudent",
	components: {
		FhcTabs,
		FhcHeader
	},
	data() {
		return {
			configStudent: {},
			configStudents: {}
		};
	},
	props: {
		students: Array
	},
	computed: {
		appRoot() {
			return FHC_JS_DATA_STORAGE_OBJECT.app_root;
		},
		config() {
			if (!this.students.length)
				return {};
			if (this.students.length == 1) {
				const student = this.students[0];
				if (student.uid)
					return Object.fromEntries(Object.entries(this.configStudent).filter(([ , value ]) => !value.showOnlyWithoutUid));
				return Object.fromEntries(Object.entries(this.configStudent).filter(([ , value ]) => !value.showOnlyWithUid));
			} else if (this.students.every(student => student.uid)) {
				return Object.fromEntries(Object.entries(this.configStudents).filter(([ , value ]) => !value.showOnlyWithoutUid));
			} else if (this.students.every(student => !student.uid)) {
					return Object.fromEntries(Object.entries(this.configStudents).filter(([ , value ]) => !value.showOnlyWithUid));
			}
			return Object.fromEntries(Object.entries(this.configStudents).filter(([ , value ]) => !value.showOnlyWithUid && !value.showOnlyWithUid));
		},
		tile_PersId(){
			let tile = this.students[0].person_id != null ? this.students[0].person_id : '-';
			return tile;
		},
		tile_MatrNr(){
			let tile = this.students[0].matr_nr != null ? this.students[0].matr_nr : '-';
			return tile;
		},
		tile_PersKz(){
			let tile = this.students[0].matrikelnr != null ? this.students[0].matrikelnr : '-';
			return tile;
		},
	},
	watch: {
		'$p.user_language.value'(n, o) {
			if (n !== o && o !== undefined)
				this.loadConfig();
		}
	},
	methods: {
		loadConfig() {
			this.$api
				.call(ApiStvApp.configStudent())
				.then(result => {
					this.configStudent = result.data;
				})
				.catch(this.$fhcAlert.handleSystemError);
			this.$api
				.call(ApiStvApp.configStudents())
				.then(result => {
					this.configStudents = result.data;
				})
				.catch(this.$fhcAlert.handleSystemError);
		},
		reload() {
			if (this.$refs.tabs?.$refs?.current?.reload)
				this.$refs.tabs.$refs.current.reload();
		},
		reloadList() {
			this.$emit('reload');
		},
	},
	created() {
		this.loadConfig();
	},
	template: `
	<div class="stv-details h-100 d-flex flex-column">
		<div v-if="!students?.length" class="justify-content-center d-flex h-100 align-items-center">
			{{$p.t('ui', 'chooseStudent')}}
		</div>
		<div v-else-if="configStudent && configStudents" class="d-flex flex-column h-100">
			<fhc-header
				:headerData="students"
				typeHeader="student"
				@reload="reloadList"
				fotoEditable
			>
				<template #uid>{{students[0].uid}}</template>
				<template #titleAlphaTile>PersID</template>
				<template #valueAlphaTile>{{tile_PersId}}</template>
				<template #titleBetaTile>MatrNr</template>
				<template #valueBetaTile>{{tile_MatrNr}}</template>
				<template #titleGammaTile>PersKz</template>
				<template #valueGammaTile>{{tile_PersKz}}</template>
			</fhc-header>
			<fhc-tabs
				v-if="students.length == 1"
				ref="tabs" 
				:useprimevue="true"
				:modelValue="students[0]"
				:config="config"
				:default="$route.params.tab"
				style="flex: 1 1 0%; height: 0%"
				@changed="reload"
				>
				</fhc-tabs>
			<fhc-tabs v-else ref="tabs" :useprimevue="true" :modelValue="students" :config="config" :default="$route.params.tab" style="flex: 1 1 0%; height: 0%" @changed="reload"></fhc-tabs>
		</div>
		<div v-else>
			Loading...
		</div>
	</div>`
};