Use new Form Components in Details

application/controllers/components/stv/Student.php

@@ -77,6 +77,7 @@ class Student extends FHC_Controller
 		$this->form_validation->set_rules('semester', 'Semester', 'integer');
 
 		if ($this->form_validation->run() == false) {
+			$this->output->set_status_header(REST_Controller::HTTP_BAD_REQUEST);
 			return $this->outputJsonError($this->form_validation->error_array());
 		}
 
@@ -202,7 +203,11 @@ class Student extends FHC_Controller
 			}
 		}
 
-		$this->outputJsonSuccess(true);
+		$this->outputJson(success(array_fill_keys(array_merge(
+			array_keys($update_lehrverband),
+			array_keys($update_person),
+			array_keys($update_student)
+		), ''), 1));
 	}
 
 	public function check()

public/js/components/Form/Input.js

@@ -14,7 +14,8 @@ export default {
 		bsFeedback: Boolean,
 		noAutoClass: Boolean,
 		type: String,
-		name: String
+		name: String,
+		containerClass: [String, Array, Object]
 	},
 	data() {
 		return {
@@ -23,6 +24,13 @@ export default {
 		}
 	},
 	computed: {
+		hasContainer() {
+			if (!this.bsFeedback)
+				return true;
+			if (this.containerClass)
+				return true;
+			return false;
+		},
 		lcType() {
 			if (!this.type)
 				return 'text';
@@ -37,6 +45,8 @@ export default {
 					return 'VueDatePicker';
 				case 'autocomplete':
 					return 'PvAutocomplete';
+				case 'uploadimage':
+					return 'UploadImage';
 				default:
 					return 'input';
 			}
@@ -133,7 +143,9 @@ export default {
 			if (this.tag == 'VueDatePicker' && !this._.components.VueDatePicker) {
 				this._.components.VueDatePicker = Vue.defineAsyncComponent(() => import("../vueDatepicker.js.php"));
 			} else if (this.tag == 'PvAutocomplete' && !this._.components.PvAutocomplete) {
-				this._.components.PvAutocomplete = Vue.defineAsyncComponent(() => import(FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + "/public/js/components/primevue/autocomplete/autocomplete.esm.min.js"));;
+				this._.components.PvAutocomplete = Vue.defineAsyncComponent(() => import(FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + "/public/js/components/primevue/autocomplete/autocomplete.esm.min.js"));
+			} else if (this.tag == 'UploadImage' && !this._.components.UploadImage) {
+				this._.components.UploadImage = Vue.defineAsyncComponent(() => import("./Upload/Image.js"));
 			}
 		}
 	},
@@ -149,7 +161,7 @@ export default {
 		// TODO(chris): wrap check in div?
 	},
 	template: `
-	<component :is="bsFeedback ? 'FhcFragment' : 'div'" class="position-relative">
+	<component :is="hasContainer ? 'FhcFragment' : 'div'" class="position-relative" :class="containerClass">
 		<label v-if="$attrs.label && lcType != 'radio' && lcType != 'checkbox'" :for="idCmp">{{$attrs.label}}</label>
 		<input v-if="tag == 'input'" :type="lcType" v-model="modelValueCmp" v-bind="$attrs" :id="idCmp" :name="name" :class="validationClass" :modelValue="undefined" @input="clearValidation(); $emit('input', $event)">
 		<textarea v-else-if="tag == 'textarea'" v-model="modelValueCmp" v-bind="$attrs" :id="idCmp" :name="name" :class="validationClass" :modelValue="undefined" @input="clearValidation(); $emit('input', $event)"></textarea>
@@ -197,7 +209,7 @@ export default {
 			>
 			<slot></slot>
 		</component>
-		<div v-if="valid !== undefined" :class="feedbackClass">
+		<div v-if="valid !== undefined && feedback.length" :class="feedbackClass">
 			<template v-for="(msg, i) in feedback" :key="i">
 				<hr v-if="i" class="m-0">
 				{{msg}}

public/js/components/Form/Upload/Image.js

@@ -46,17 +46,17 @@ export default {
 			</div>
 		</template>
 		<template v-else>
-			<slot name="placeholder">
+			<slot>
 				<svg class="bd-placeholder-img img-thumbnail" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
-				<div class="fotobutton-visible">
-					<div class="d-grid gap-2 d-md-flex">
-						<button type="button" class="btn btn-outline-dark btn-sm" @click="openUploadDialog">
-							<i class="fa fa-pen"></i>
-						</button>
-					</div>
-				</div>
 			</slot>
+			<div class="fotobutton-visible">
+				<div class="d-grid gap-2 d-md-flex">
+					<button type="button" class="btn btn-outline-dark btn-sm" @click="openUploadDialog">
+						<i class="fa fa-pen"></i>
+					</button>
+				</div>
+			</div>
 		</template>
-		<input class="d-none" type="file" ref="fileInput" @input="pickFile" accept="image/*">
+		<input :id="$attrs.id" class="d-none" type="file" ref="fileInput" @input="pickFile" accept="image/*">
 	</div>`
 }

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

@@ -1,16 +1,14 @@
-import VueDatePicker from '../../../vueDatepicker.js.php';
-import FormUploadImage from '../../../Form/Upload/Image.js';
 import {CoreRESTClient} from '../../../../RESTClient.js';
-
-
-import PvToast from "../../../../../../index.ci.php/public/js/components/primevue/toast/toast.esm.min.js";
+import FormForm from '../../../Form/Form.js';
+import FormInput from '../../../Form/Input.js';
+import FormUploadImage from '../../../Form/Upload/Image.js';
 
 
 export default {
 	components: {
-		VueDatePicker,
-		FormUploadImage,
-		PvToast
+		FormForm,
+		FormInput,
+		FormUploadImage
 	},
 	inject: {
 		showBpk: {
@@ -62,6 +60,9 @@ export default {
 		},
 		changedLength() {
 			return Object.keys(this.changed).length;
+		},
+		noImageSrc() {
+			return FHC_JS_DATA_STORAGE_OBJECT.app_root + 'skin/images/profilbild_dummy.jpg';
 		}
 	},
 	watch: {
@@ -69,6 +70,7 @@ export default {
 			this.updateStudent(n);
 		},
 		data: {
+			// TODO(chris): use @input instead?
 			handler(n) {
 				let res = {};
 				for (var k in this.original) {
@@ -82,7 +84,6 @@ export default {
 					}
 				}
 				this.changed = res;
-				this.resetErrors();
 			},
 			deep: true
 		}
@@ -98,213 +99,264 @@ export default {
 						this.data.familienstand = '';
 					this.original = {...this.data};
 				})
-				.catch(err => {
-					console.error(err.response.data || err.message);
-				});
+				.catch(this.$fhcAlert.handleSystemError);
 		},
 		save() {
-			CoreRESTClient
-				.post('components/stv/Student/save/' + this.modelValue.prestudent_id, this.changed)
-				.then(result => result.data)
+			this.$refs.form
+				.send(CoreRESTClient.post('components/stv/Student/save/' + this.modelValue.prestudent_id, this.changed))
 				.then(result => {
-					this.resetErrors();
-					if (CoreRESTClient.isError(result)) {
-						let errors = CoreRESTClient.getError(result);
-						
-						if (errors === "Generic error")
-							console.error(errors, result);
-						else {
-							for (var k in errors)
-								this.addError(k, errors[k]);
-						}
-					} else {
-						for (var node of document.querySelectorAll(Object.keys(this.changed).map(el => '#stv-details-' + el).join(',')))
-							node.classList.add('is-valid');
-						if (this.changed.gebdatum !== undefined)
-							this.gebDatumIsValid = true;
-						
-						// TODO(chris): phrase
-						this.$fhcAlert.alertSuccess('Gespeichert');
-						//this.addToast('Gespeichert', '', 'success');
-
-						this.original = {...this.data};
-						this.changed = {};
-					}
+					this.original = {...this.data};
+					this.changed = {};
 				})
-				.catch(this.$fhcAlert.handleSystemError/*err => {
-					// TODO(chris): phrase
-					this.addToast('Error', err?.response?.data || err?.message, 'error');
-				}*/);
-		},
-		resetErrors() {
-			Array.from(this.$refs.form.getElementsByClassName('is-valid')).forEach(el => el.classList.remove('is-valid'));
-			Array.from(this.$refs.form.getElementsByClassName('is-invalid')).forEach(el => el.classList.remove('is-invalid'));
-			Array.from(this.$refs.form.getElementsByClassName('invalid-feedback')).forEach(el => el.remove());
-			this.gebDatumIsValid = false;
-			this.gebDatumIsInvalid = false;
-		},
-		addError(field, msg) {
-			let id = 'stv-details-' + field;
-
-			let input = document.getElementById(id);
-			if (field === 'gebdatum') {
-				this.gebDatumIsInvalid = true;
-				input = document.getElementById('dp-input-' + id).parentNode;
-			}
-
-			input.classList.add('is-invalid');
-			
-			let feedback = document.createElement('div');
-			feedback.classList.add('invalid-feedback');
-			feedback.innerHTML = msg;
-			input.after(feedback);
-		/*},
-		addToast(header, msg, severity) {
-			this.$refs.responseToast.add({
-				severity: severity,
-				summary: header,
-				detail: msg,
-				life: 3000
-			})*/
+				.catch(this.$fhcAlert.handleSystemError);
 		}
 	},
 	created() {
 		this.updateStudent(this.modelValue);
 	},
+	//TODO(chris): Phrasen
 	//TODO(chris): Geburtszeit? Anzahl der Kinder?
 	template: `
-	<form ref="form" class="stv-details-details" @submit.prevent="save">
-		<div class="position-sticky top-0">
+	<form-form ref="form" class="stv-details-details" @submit.prevent="save">
+		<div class="position-sticky top-0 z-1">
 			<button type="submit" class="btn btn-primary position-absolute top-0 end-0" :disabled="!changedLength">Speichern</button>
 		</div>
 		<fieldset class="overflow-hidden">
 			<legend>Person</legend>
 			<template v-if="data">
 				<div class="row mb-3">
-					<label for="stv-details-person_id" class="col-sm-1 col-form-label">Person ID</label>
-					<div class="col-sm-3">
-						<input id="stv-details-person_id" type="text" class="form-control" v-model="data.person_id" disabled>
-					</div>
-					<label v-if="showZugangscode" for="stv-details-zugangscode" class="col-sm-1 col-form-label">Zugangscode</label>
-					<div v-if="showZugangscode" class="col-sm-3 align-self-center">
-						<span class="form-text">
-							<a :href="cisRoot + 'addons/bewerbung/cis/registration.php?code=' + data.zugangscode + '&emailAdresse=' + data.email_privat" target="_blank">{{data.zugangscode}}</a>
-						</span>
-					</div>
-					<label v-if="showBpk" for="stv-details-bpk" class="col-sm-1 col-form-label">BPK</label>
-					<div v-if="showBpk" class="col-sm-3">
-						<input id="stv-details-bpk" type="text" class="form-control" v-model="data.bpk" maxlength="28">
+					<form-input
+						container-class="col-4"
+						label="Person ID"
+						type="text"
+						v-model="data.person_id"
+						name="person_id"
+						readonly
+						>
+					</form-input>
+					<div v-if="showZugangscode" class="col-4">
+						<label>Zugangscode</label>
+						<div class="align-self-center">
+							<span class="form-text">
+								<a :href="cisRoot + 'addons/bewerbung/cis/registration.php?code=' + data.zugangscode + '&emailAdresse=' + data.email_privat" target="_blank">{{data.zugangscode}}</a>
+							</span>
+						</div>
 					</div>
+					<form-input
+						v-if="showBpk"
+						container-class="col-4"
+						label="BPK"
+						type="text"
+						v-model="data.bpk"
+						name="bpk"
+						maxlength="28"
+ 						>
+					</form-input>
 				</div>
 				<div class="row mb-3">
-					<label for="stv-details-anrede" class="col-sm-1 col-form-label">Anrede</label>
-					<div class="col-sm-3">
-						<input id="stv-details-anrede" type="text" class="form-control" v-model="data.anrede" maxlength="16">
-					</div>
-					<label for="stv-details-titelpre" class="col-sm-1 col-form-label">Titel Pre</label>
-					<div class="col-sm-3">
-						<input id="stv-details-titelpre" type="text" class="form-control" v-model="data.titelpre" maxlength="64">
-					</div>
-					<label for="stv-details-titelpost" class="col-sm-1 col-form-label">Titel Post</label>
-					<div class="col-sm-3">
-						<input id="stv-details-titelpost" type="text" class="form-control" v-model="data.titelpost" maxlength="32">
-					</div>
+					<form-input
+						container-class="col-4"
+						label="Anrede"
+						type="text"
+						v-model="data.anrede"
+						name="anrede"
+						maxlength="16"
+ 						>
+					</form-input>
+					<form-input
+						container-class="col-4"
+						label="Titel Pre"
+						type="text"
+						v-model="data.titelpre"
+						name="titelpre"
+						maxlength="64"
+ 						>
+					</form-input>
+					<form-input
+						container-class="col-4"
+						label="Titel Post"
+						type="text"
+						v-model="data.titelpost"
+						name="titelpost"
+						maxlength="32"
+ 						>
+					</form-input>
 				</div>
 				<div class="row mb-3">
-					<label for="stv-details-nachname" class="col-sm-1 col-form-label">Nachname</label>
-					<div class="col-sm-3">
-						<input id="stv-details-nachname" type="text" class="form-control" v-model="data.nachname" maxlength="64">
-					</div>
-					<label for="stv-details-vorname" class="col-sm-1 col-form-label">Vorname</label>
-					<div class="col-sm-3">
-						<input id="stv-details-vorname" type="text" class="form-control" v-model="data.vorname" maxlength="32">
-					</div>
-					<label for="stv-details-vornamen" class="col-sm-1 col-form-label">Vornamen</label>
-					<div class="col-sm-3">
-						<input id="stv-details-vornamen" type="text" class="form-control" v-model="data.vornamen" maxlength="128">
-					</div>
+					<form-input
+						container-class="col-4"
+						label="Nachname"
+						type="text"
+						v-model="data.nachname"
+						name="nachname"
+						maxlength="64"
+ 						>
+					</form-input>
+					<form-input
+						container-class="col-4"
+						label="Vorname"
+						type="text"
+						v-model="data.vorname"
+						name="vorname"
+						maxlength="32"
+ 						>
+					</form-input>
+					<form-input
+						container-class="col-4"
+						label="Vornamen"
+						type="text"
+						v-model="data.vornamen"
+						name="vornamen"
+						maxlength="128"
+ 						>
+					</form-input>
 				</div>
 				<div class="row mb-3">
-					<label for="stv-details-wahlname" class="col-sm-1 col-form-label">Wahlname</label>
-					<div class="col-sm-3">
-						<input id="stv-details-wahlname" type="text" class="form-control" v-model="data.wahlname" maxlength="128">
-					</div>
+					<form-input
+						container-class="col-4"
+						label="Wahlname"
+						type="text"
+						v-model="data.wahlname"
+						name="wahlname"
+						maxlength="128"
+ 						>
+					</form-input>
 				</div>
 				<div class="row mb-3">
-					<label for="dp-input-stv-details-gebdatum" class="col-sm-1 col-form-label">Geburtsdatum</label>
-					<div class="col-sm-3">
-						<vue-date-picker id="stv-details-gebdatum" :input-class-name="gebDatumIsInvalid ? 'form-control is-invalid' : (gebDatumIsValid ? 'form-control is-valid' : 'form-control')" uid="stv-details-gebdatum" v-model="data.gebdatum" :clearable="false" no-today auto-apply :enable-time-picker="false" format="dd.MM.yyyy" preview-format="dd.MM.yyyy"></vue-date-picker>
-					</div>
-					<label for="stv-details-gebort" class="col-sm-1 col-form-label">Geburtsort</label>
-					<div class="col-sm-3">
-						<input id="stv-details-gebort" type="text" class="form-control" v-model="data.gebort" maxlength="128">
-					</div>
-					<label for="stv-details-geburtsnation" class="col-sm-1 col-form-label">Geburtsnation</label>
-					<div class="col-sm-3">
-						<select id="stv-details-geburtsnation" class="form-control" v-model="data.geburtsnation">
-							<option value="">-- keine Auswahl --</option>
-							<!-- TODO(chris): gesperrte nationen können nicht ausgewählt werden! Um das zu realisieren müsste man ein pseudo select machen -->
-							<option v-for="nation in lists.nations" :key="nation.nation_code" :value="nation.nation_code" :disabled="nation.sperre">{{nation.kurztext}}</option>
-						</select>
-					</div>
+					<form-input
+						container-class="col-4"
+						label="Geburtsdatum"
+						type="DatePicker"
+						v-model="data.gebdatum"
+						name="gebdatum"
+						:clearable="false"
+						no-today
+						auto-apply
+						:enable-time-picker="false"
+						format="dd.MM.yyyy"
+						preview-format="dd.MM.yyyy"
+ 						>
+					</form-input>
+					<form-input
+						container-class="col-4"
+						label="Geburtsort"
+						type="text"
+						v-model="data.gebort"
+						name="gebort"
+						maxlength="128"
+ 						>
+					</form-input>
+					<form-input
+						container-class="col-4"
+						label="Geburtsnation"
+						type="select"
+						v-model="data.geburtsnation"
+						name="geburtsnation"
+ 						>
+						<option value="">-- keine Auswahl --</option>
+						<!-- TODO(chris): gesperrte nationen können nicht ausgewählt werden! Um das zu realisieren müsste man ein pseudo select machen -->
+						<option v-for="nation in lists.nations" :key="nation.nation_code" :value="nation.nation_code" :disabled="nation.sperre">{{nation.kurztext}}</option>
+					</form-input>
 				</div>
 				<div class="row mb-3">
-					<label for="stv-details-svnr" class="col-sm-1 col-form-label">SVNR</label>
-					<div class="col-sm-3">
-						<input id="stv-details-svnr" type="text" class="form-control" v-model="data.svnr" maxlength="16">
-					</div>
-					<label for="stv-details-ersatzkennzeichen" class="col-sm-1 col-form-label">Ersatzkennzeichen</label>
-					<div class="col-sm-3">
-						<input id="stv-details-ersatzkennzeichen" type="text" class="form-control" v-model="data.ersatzkennzeichen" maxlength="10">
-					</div>
+					<form-input
+						container-class="col-4"
+						label="SVNR"
+						type="text"
+						v-model="data.svnr"
+						name="svnr"
+						maxlength="16"
+ 						>
+					</form-input>
+					<form-input
+						container-class="col-4"
+						label="Ersatzkennzeichen"
+						type="text"
+						v-model="data.ersatzkennzeichen"
+						name="ersatzkennzeichen"
+						maxlength="10"
+ 						>
+					</form-input>
 				</div>
 				<div class="row mb-3">
-					<label for="stv-details-staatsbuergerschaft" class="col-sm-1 col-form-label">Staatsbürgerschaft</label>
-					<div class="col-sm-3">
-						<select id="stv-details-staatsbuergerschaft" class="form-control" v-model="data.staatsbuergerschaft">
-							<option value="">-- keine Auswahl --</option>
-							<!-- TODO(chris): gesperrte nationen können nicht ausgewählt werden! Um das zu realisieren müsste man ein pseudo select machen -->
-							<option v-for="nation in lists.nations" :key="nation.nation_code" :value="nation.nation_code" :disabled="nation.sperre">{{nation.kurztext}}</option>
-						</select>
-					</div>
-					<label for="stv-details-matr_nr" class="col-sm-1 col-form-label">Matrikelnummer</label>
-					<div class="col-sm-3">
-						<input id="stv-details-matr_nr" type="text" class="form-control" v-model="data.matr_nr" maxlength="32">
-					</div>
-					<label for="stv-details-sprache" class="col-sm-1 col-form-label">Sprache</label>
-					<div class="col-sm-3">
-						<select id="stv-details-sprache" class="form-control" v-model="data.sprache">
-							<option v-for="sprache in lists.sprachen" :key="sprache.sprache" :value="sprache.sprache">{{sprache.sprache}}</option>
-						</select>
-					</div>
+					<form-input
+						container-class="col-4"
+						label="Staatsbürgerschaft"
+						type="select"
+						v-model="data.staatsbuergerschaft"
+						name="staatsbuergerschaft"
+ 						>
+						<option value="">-- keine Auswahl --</option>
+						<!-- TODO(chris): gesperrte nationen können nicht ausgewählt werden! Um das zu realisieren müsste man ein pseudo select machen -->
+						<option v-for="nation in lists.nations" :key="nation.nation_code" :value="nation.nation_code" :disabled="nation.sperre">{{nation.kurztext}}</option>
+					</form-input>
+					<form-input
+						container-class="col-4"
+						label="Matrikelnummer"
+						type="text"
+						v-model="data.matr_nr"
+						name="matr_nr"
+						maxlength="32"
+ 						>
+					</form-input>
+					<form-input
+						container-class="col-4"
+						label="Sprache"
+						type="select"
+						v-model="data.sprache"
+						name="sprache"
+ 						>
+						<option v-for="sprache in lists.sprachen" :key="sprache.sprache" :value="sprache.sprache">{{sprache.sprache}}</option>
+					</form-input>
 				</div>
 				<div class="row mb-3">
-					<label for="stv-details-geschlecht" class="col-sm-1 col-form-label">Geschlecht</label>
-					<div class="col-sm-3">
-						<select id="stv-details-geschlecht" class="form-control" v-model="data.geschlecht">
-							<option v-for="geschlecht in lists.geschlechter" :key="geschlecht.geschlecht" :value="geschlecht.geschlecht">{{geschlecht.bezeichnung}}</option>
-						</select>
-					</div>
-					<label for="stv-details-familienstand" class="col-sm-1 col-form-label">Familienstand</label>
-					<div class="col-sm-3">
-						<select id="stv-details-familienstand" class="form-control" v-model="data.familienstand">
-							<option v-for="(bezeichnung, key) in familienstaende" :key="key" :value="key">{{bezeichnung}}</option>
-						</select>
-					</div>
+					<form-input
+						container-class="col-4"
+						label="Geschlecht"
+						type="select"
+						v-model="data.geschlecht"
+						name="geschlecht"
+ 						>
+						<option v-for="geschlecht in lists.geschlechter" :key="geschlecht.geschlecht" :value="geschlecht.geschlecht">{{geschlecht.bezeichnung}}</option>
+					</form-input>
+					<form-input
+						container-class="col-4"
+						label="Familienstand"
+						type="select"
+						v-model="data.familienstand"
+						name="familienstand"
+ 						>
+						<option v-for="(bezeichnung, key) in familienstaende" :key="key" :value="key">{{bezeichnung}}</option>
+					</form-input>
 				</div>
 				<div class="row mb-3">
-					<label for="stv-details-foto" class="col-sm-1 col-form-label">Foto</label>
-					<div class="col-sm-3">
-						<form-upload-image id="stv-details-foto" v-model="data.foto"></form-upload-image>
-					</div>
-					<label for="stv-details-anmerkung" class="col-sm-1 col-form-label">Anmerkung</label>
-					<div class="col-sm-3">
-						<textarea id="stv-details-anmerkung" class="form-control" v-model="data.anmerkung"></textarea>
-					</div>
-					<label for="stv-details-homepage" class="col-sm-1 col-form-label">Homepage</label>
-					<div class="col-sm-3">
-						<input id="stv-details-homepage" type="text" class="form-control" v-model="data.homepage" maxlength="256">
-					</div>
+					<form-input
+						container-class="col-4"
+						label="Foto"
+						type="UploadImage"
+						v-model="data.foto"
+						name="foto"
+ 						>
+ 						<img alt="No Image" :src="noImageSrc" class="w-100">
+					</form-input>
+					<form-input
+						container-class="col-4"
+						label="Anmerkung"
+						type="textarea"
+						v-model="data.anmerkung"
+						name="anmerkung"
+						rows="8"
+ 						>
+					</form-input>
+					<form-input
+						container-class="col-4"
+						label="Homepage"
+						type="text"
+						v-model="data.homepage"
+						name="homepage"
+						maxlength="256"
+ 						>
+					</form-input>
 				</div>
 			</template>
 			<div v-else>
@@ -315,47 +367,79 @@ export default {
 			<legend>StudentIn</legend>
 			<template v-if="data">
 				<div class="row mb-3">
-					<label for="stv-details-student_uid" class="col-sm-1 col-form-label">UID</label>
-					<div class="col-sm-3">
-						<input id="stv-details-student_uid" type="text" class="form-control" v-model="data.student_uid" disabled>
-					</div>
-					<label for="stv-details-personenkennzeichen" class="col-sm-1 col-form-label">Personenkennzeichen</label>
-					<div class="col-sm-3">
-						<input id="stv-details-personenkennzeichen" type="text" class="form-control" v-model="data.matrikelnr" disabled>
-					</div>
-					<label for="stv-details-aktiv" class="col-sm-1 col-form-label">Aktiv</label>
-					<div class="col-sm-3 align-self-center">
-						<div class="form-check">
-							<input id="stv-details-aktiv" type="checkbox" class="form-check-input" v-model="data.aktiv">
-						</div>
+					<form-input
+						container-class="col-4"
+						label="UID"
+						type="text"
+						v-model="data.student_uid"
+						name="student_uid"
+						readonly
+						>
+					</form-input>
+					<form-input
+						container-class="col-4"
+						label="Personenkennzeichen"
+						type="text"
+						v-model="data.matrikelnr"
+						name="matrikelnr"
+						readonly
+						>
+					</form-input>
+					<div class="col-4 pt-4 d-flex align-items-center">
+						<form-input
+							container-class="form-check"
+							label="Aktiv"
+							type="checkbox"
+							v-model="data.aktiv"
+							name="aktiv"
+							>
+						</form-input>
 					</div>
 				</div>
 				<div class="row mb-3">
-					<label for="stv-details-semester" class="col-sm-1 col-form-label">Semester</label>
-					<div class="col-sm-3">
-						<input id="stv-details-semester" type="text" class="form-control" v-model="data.semester" maxlength="2">
-					</div>
-					<label for="stv-details-verband" class="col-sm-1 col-form-label">Verband</label>
-					<div class="col-sm-3">
-						<input id="stv-details-verband" type="text" class="form-control" v-model="data.verband" maxlength="1">
-					</div>
-					<label for="stv-details-gruppe" class="col-sm-1 col-form-label">Gruppe</label>
-					<div class="col-sm-3">
-						<input id="stv-details-gruppe" type="text" class="form-control" v-model="data.gruppe" maxlength="1">
-					</div>
+					<form-input
+						container-class="col-4"
+						label="Semester"
+						type="text"
+						v-model="data.semester"
+						name="semester"
+						maxlength="2"
+						>
+					</form-input>
+					<form-input
+						container-class="col-4"
+						label="Verband"
+						type="text"
+						v-model="data.verband"
+						name="verband"
+						maxlength="1"
+						>
+					</form-input>
+					<form-input
+						container-class="col-4"
+						label="Gruppe"
+						type="text"
+						v-model="data.gruppe"
+						name="gruppe"
+						maxlength="1"
+						>
+					</form-input>
 				</div>
 				<div class="row mb-3">
-					<label for="stv-details-alias" class="col-sm-1 col-form-label">Alias</label>
-					<div class="col-sm-3">
-						<input id="stv-details-alias" type="text" class="form-control" v-model="data.alias" :disabled="aliasNotAllowed">
-					</div>
+					<form-input
+						container-class="col-4"
+						label="Alias"
+						type="text"
+						v-model="data.alias"
+						name="alias"
+						:disabled="aliasNotAllowed"
+						>
+					</form-input>
 				</div>
-
 			</template>
 			<div v-else>
 				Loading...
 			</div>
 		</fieldset>
-		<pv-toast ref="responseToast" style="z-index:9999"></pv-toast>
-	</form>`
+	</form-form>`
 };