new Component Dropdown Nations

implemented in StudVW Tabs Details, Contact/Adress, Prestudent and Mobility

application/controllers/api/frontend/v1/dropdowns/Dropdown.php

@@ -0,0 +1,51 @@
+<?php
+
+/**
+ * Copyright (C) 2026 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');
+
+/**
+ * This controller operates between (interface) the JS (GUI) and the back-end
+ * This controller works with JSON calls on the HTTP GET or POST and the output is always JSON
+ */
+class Dropdown extends FHCAPI_Controller
+{
+	/**
+	 * Calls the parent's constructor and prepares libraries and phrases
+	 */
+	public function __construct()
+	{
+		parent::__construct([
+			'getNations' => self::PERM_LOGGED
+		]);
+
+		// Load Libraries
+		$this->load->library('VariableLib', ['uid' => getAuthUID()]);
+	}
+
+	public function getNations($searchString=null)
+	{
+		$this->load->model('codex/nation_model', 'NationModel');
+
+		$result = $this->NationModel->searchNations($searchString);
+		if (isError($result)) {
+			$this->terminateWithError($result, self::ERROR_TYPE_GENERAL);
+		}
+		$this->terminateWithSuccess($result ?: []);
+	}
+}

application/controllers/api/frontend/v1/stv/Address.php

@@ -42,11 +42,15 @@ class Address extends FHCAPI_Controller
 	{
 		$this->load->model('codex/Nation_model', 'NationModel');
 
-		$this->NationModel->addOrder('kurztext');
+		//show at first entries staatenlos and Stbg. ungeklaert
+		$this->db->order_by("kontinent IS NULL DESC, kurztext ASC", '', FALSE);
+		$this->NationModel->addSelect("langtext as label");
+		$this->NationModel->addSelect('kurztext');
+		$this->NationModel->addSelect('nation_code');
 
 		$result = $this->NationModel->load();
 		$data = $this->getDataOrTerminateWithError($result);
-		
+
 		$this->terminateWithSuccess($data);
 	}
 

application/models/codex/Nation_model.php

@@ -11,4 +11,39 @@ class Nation_model extends DB_Model
 		$this->dbTable = 'bis.tbl_nation';
 		$this->pk = 'nation_code';
 	}
+
+	public function searchNations($filter=null)
+	{
+		$params = [];
+
+		if ($filter)
+		{
+			if (preg_match('/%[0-9A-Fa-f]{2}/', $filter)) {
+				$filter = urldecode($filter);
+			}
+			$filter = mb_strtolower($filter, 'UTF-8'); //for umlaute
+		}
+
+		$qry = "
+			SELECT
+				n.nation_code, n.langtext as label, n.kurztext, n.sperre
+			FROM
+				bis.tbl_nation n";
+
+		if ($filter)
+		{
+			$escapedFilter = $this->db->escape('%' . $filter . '%');
+
+			$qry .= "
+				WHERE
+					n.kurztext ILIKE $escapedFilter
+					OR n.engltext ILIKE $escapedFilter
+					OR n.nation_code ILIKE $escapedFilter
+			";
+		}
+
+		$qry .= " ORDER BY n.kontinent IS NULL DESC, n.kurztext ASC";
+
+		return $this->execQuery($qry, $params);
+	}
 }

application/views/Studentenverwaltung.php

@@ -21,7 +21,8 @@
 			'public/css/components/primevue.css',
 			'public/css/Studentenverwaltung.css',
 			'public/css/components/function.css',
-			'public/css/components/Detailheader.css'
+			'public/css/components/Detailheader.css',
+			'public/css/components/dropdown.css'
 		],
 		'customJSs' => [
 			'vendor/vuejs/vuedatepicker_js/vue-datepicker.iife.js',

public/css/components/dropdown.css

@@ -0,0 +1,3 @@
+.item-sperre {
+    text-decoration: line-through;
+}

public/js/api/dropdowns/dropdown.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (C) 2026 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 {
+	getNations(searchString) {
+		return {
+			method: 'get',
+			url: 'api/frontend/v1/dropdowns/dropdown/getNations/' + searchString
+		};
+	}
+};

public/js/components/Dropdowns/NationsDropdown.js

@@ -0,0 +1,109 @@
+import CoreForm from '../Form/Form.js';
+import FormInput from '../Form/Input.js';
+import ApiDropdowns from '../../api/dropdowns/dropdown.js';
+
+export default {
+	name: "NationsDropdown",
+	components: {
+		CoreForm,
+		FormInput
+	},
+	inject: {
+		lists: {
+			from: 'lists'
+		},
+	},
+	props: {
+		nation: {
+			type: String,
+			required: true
+		},
+		containerClass: {
+			type: String,
+			required: false
+		},
+		labelDropdown: {
+			type: String,
+			required: false
+		},
+		nullLabel: {
+			type: String,
+			required: false,
+			default: ''
+		},
+	},
+	data(){
+		return {
+			filteredNations: [],
+			selectedNation: null,
+			abortController: {
+				nations: null
+			},
+		};
+	},
+	watch: {
+		nation: {
+			immediate: true,
+			handler(newVal) {
+				if (newVal) {
+					this.updateNation(newVal);
+				}
+			}
+		},
+		selectedNation(newVal) {
+			//emit
+			this.$emit('updateNation', {
+				nation_code: newVal?.nation_code
+			});
+		}
+	},
+	methods: {
+		filterNations(event){
+			//use search function instead of filteringList to get also params of engltext and nation_code
+			if (this.abortController.nations) {
+				this.abortController.nations.abort();
+			}
+			this.abortController.nations = new AbortController();
+
+			return this.$api
+				.call(ApiDropdowns.getNations(event.query))
+				.then(result => {
+					this.filteredNations = result.data.retval;
+				});
+		},
+		updateNation(nation) {
+			const detailsNation = this.lists.nations.find(
+				item => item.nation_code == nation
+			);
+
+			//create new object to avoid erros because of same instance if included more than once
+			this.selectedNation = detailsNation
+				? { ...detailsNation }
+				: { nation_code: nation, label: this.nullLabel };
+		},
+	},
+	template: `
+	<div class="stv-nations-dropdown">
+		<form-input
+			:container-class="containerClass"
+			:label="labelDropdown"
+			type="autocomplete"
+			v-model="selectedNation"
+			forceSelection
+			optionLabel="label"
+			:suggestions="filteredNations"
+			dropdown
+			@complete="filterNations"
+			>
+				<template #option="slotProps">
+					<div
+						:class="slotProps.option.sperre
+						? 'item-sperre'
+						: ''"
+						>
+							{{slotProps.option.label}}
+					</div>
+				</template>
+		</form-input>
+	</div>	`
+};

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

@@ -3,17 +3,18 @@ import FormInput from '../../../Form/Input.js';
 import FormUploadImage from '../../../Form/Upload/Image.js';
 
 import CoreUdf from '../../../Udf/Udf.js';
+import NationsDropdown from '../../../Dropdowns/NationsDropdown.js';
 
 import ApiStvDetails from '../../../../api/factory/stv/details.js';
 
-
 export default {
 	name: "TabDetails",
 	components: {
 		CoreForm,
 		FormInput,
 		FormUploadImage,
-		CoreUdf
+		CoreUdf,
+		NationsDropdown
 	},
 	inject: {
 		showBpk: {
@@ -54,11 +55,14 @@ export default {
 			default: {}
 		}
 	},
+	emits: [
+		'updateNation'
+	],
 	data() {
 		return {
 			original: null,
 			data: null,
-			changed: {}
+			changed: {},
 		}
 	},
 	computed: {
@@ -79,7 +83,7 @@ export default {
 				"v": this.$p.t('person', 'verheiratet'),
 				"w": this.$p.t('person', 'verwitwet'),
 			};
-		}
+		},
 	},
 	watch: {
 		modelValue(n) {
@@ -100,7 +104,7 @@ export default {
 				this.changed = res;
 			},
 			deep: true
-		}
+		},
 	},
 	methods: {
 		updateStudent(n) {
@@ -168,6 +172,12 @@ export default {
 			const bodyEncoded = encodeURIComponent(bodyWithNewLines);
 
 			window.location.href = "mailto:" + this.modelValue.mail_intern + "?subject=" + subjectEncoded + "&body=" + bodyEncoded;
+		},
+		handleChangeNation({nation_code}){
+			this.data.geburtsnation = nation_code;
+		},
+		handleChangeStbg({nation_code}){
+			this.data.staatsbuergerschaft = nation_code;
 		}
 	},
 	created() {
@@ -325,28 +335,26 @@ export default {
 						maxlength="128"
  						>
 					</form-input>
-					<form-input
+					<nations-dropdown
 						v-if="!config.hiddenFields.includes('geburtsnation')"
 						container-class="col stv-details-details-geburtsnation"
-						:label="$p.t('person', 'geburtsnation')"
-						type="select"
-						v-model="data.geburtsnation"
+						:label-dropdown="$p.t('person', 'geburtsnation')"
+						:nation="data.geburtsnation"
+						:nullLabel="' -- ' + $p.t('fehlermonitoring', 'keineAuswahl') + ' -- '"
 						name="geburtsnation"
- 						>
-						<option value="">-- {{$p.t('fehlermonitoring', 'keineAuswahl')}} --</option>
-						<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
+						@updateNation="handleChangeNation"
+						>
+					</nations-dropdown>
+					<nations-dropdown
 						v-if="!config.hiddenFields.includes('staatsbuergerschaft')"
 						container-class="col stv-details-details-staatsbuergerschaft"
-						:label="$p.t('person', 'staatsbuergerschaft')"
-						type="select"
-						v-model="data.staatsbuergerschaft"
+						:label-dropdown="$p.t('person', 'staatsbuergerschaft')"
+						:nation="data.staatsbuergerschaft"
+						:nullLabel="' -- ' + $p.t('fehlermonitoring', 'keineAuswahl') + ' -- '"
+						@updateNation="handleChangeStbg"
 						name="staatsbuergerschaft"
- 						>
-						<option value="">-- {{$p.t('fehlermonitoring', 'keineAuswahl')}} --</option>
-						<option v-for="nation in lists.nations" :key="nation.nation_code" :value="nation.nation_code" :disabled="nation.sperre">{{nation.kurztext}}</option>
-					</form-input>
+						>
+					</nations-dropdown>
 				</div>
 				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1">
 

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

@@ -4,6 +4,7 @@ import FhcFormValidation from '../../../../Form/Validation.js';
 import BsModal from "../../../../Bootstrap/Modal.js";
 import FormForm from '../../../../Form/Form.js';
 import FormInput from '../../../../Form/Input.js';
+import NationsDropdown from '../../../../Dropdowns/NationsDropdown.js';
 
 import ApiStvAddress from '../../../../../api/factory/stv/kontakt/address.js';
 
@@ -15,11 +16,15 @@ export default{
 		FhcFormValidation,
 		BsModal,
 		FormForm,
-		FormInput
+		FormInput,
+		NationsDropdown
 	},
 	props: {
 		uid: Number
 	},
+	emits: [
+		'updateNation'
+	],
 	data() {
 		return {
 			addressData: {
@@ -231,7 +236,6 @@ export default{
 					//	delete this.addressData.plz;
 					this.loadPlaces(this.addressData.address.plz);
 					this.$refs.adressModal.show();
-
 				}
 			});
 		},
@@ -338,6 +342,9 @@ export default{
 
 			this.statusNew = true;
 		},
+		handleChangeNation({nation_code}){
+			this.addressData.nation = nation_code;
+		},
 	},
 	created() {
 		this.$api
@@ -397,182 +404,174 @@ export default{
 							v-model="addressData.strasse"
 						>
 						</form-input>					
-				</div>
+					</div>
 
-				<div class="row mb-3">
-					<form-input
-						type="select"
-						name="nation"
-						:label="$p.t('person/nation')"
-						v-model="addressData.nation"
-						>
-						<option 
-							v-for="nation in nations" 
-							:key="nation.nation_code" 
-							:value="nation.nation_code" 
-							:disabled="nation.sperre"
-							>
-							{{nation.kurztext}}
-						</option>
-						</form-input>
-				</div>
-							
-				<div class="row mb-3">
-					<form-input
-						type="text"
-						name="address[plz]"
-						:label="$p.t('person/plz') + ' *'"
-						v-model="addressData.address.plz"
-						required
-						@input="loadPlaces"
-					>
-					</form-input>					
-				</div>
+					<div class="row mb-3">
+							<nations-dropdown
+								container-class="col-12"
+								:label-dropdown="$p.t('person', 'nation')"
+								:nation="addressData.nation"
+								name="nation"
+								@updateNation="handleChangeNation"
+								>
+							</nations-dropdown>
+					</div>
 
-				<div class="row mb-3">
-					<form-input
-						v-if="addressData.nation == 'A'"
-						type="select"
-						name="gemeinde"
-						:label="$p.t('person/gemeinde')"
-						v-model="addressData.gemeinde"
-						>
-						<option v-if="!gemeinden.length" disabled>{{$p.t('ui', 'bittePlzWaehlen')}}</option>
-						<option 
-							v-for="gemeinde in gemeinden" 
-							:key="gemeinde.name" 
-							:value="gemeinde.name"
-							>
-							{{gemeinde.name}}
-						</option>
-					</form-input>
-					<form-input
-							v-else
+					<div class="row mb-3">
+						<form-input
 							type="text"
+							name="address[plz]"
+							:label="$p.t('person/plz') + ' *'"
+							v-model="addressData.address.plz"
+							required
+							@input="loadPlaces"
+						>
+						</form-input>
+					</div>
+
+					<div class="row mb-3">
+						<form-input
+							v-if="addressData.nation == 'A'"
+							type="select"
+							name="gemeinde"
 							:label="$p.t('person/gemeinde')"
-							name="addressData.gemeinde"
 							v-model="addressData.gemeinde"
-						>	
-					</form-input>
-				</div>
-
-				<div class="row mb-3">
-					<form-input
-						v-if="addressData.nation == 'A'" 
-						type="select"
-						name="ort"
-						:label="$p.t('person/ort')"
-						v-model="addressData.ort"
-						>
-						<option v-if="!orte.length" disabled>{{$p.t('ui', 'bitteGemeindeWaehlen')}}</option>
-						<option 
-							v-for="ort in orte" 
-							:key="ort.ortschaftsname" 
-							:value="ort.ortschaftsname"
 							>
-							{{ort.ortschaftsname}}
-						</option>
-					</form-input>
-					<form-input
-							v-else
-							type="text"
-							:label="$p.t('person/ort')"
+							<option v-if="!gemeinden.length" disabled>{{$p.t('ui', 'bittePlzWaehlen')}}</option>
+							<option
+								v-for="gemeinde in gemeinden"
+								:key="gemeinde.name"
+								:value="gemeinde.name"
+								>
+								{{gemeinde.name}}
+							</option>
+						</form-input>
+						<form-input
+								v-else
+								type="text"
+								:label="$p.t('person/gemeinde')"
+								name="addressData.gemeinde"
+								v-model="addressData.gemeinde"
+							>
+						</form-input>
+					</div>
+
+					<div class="row mb-3">
+						<form-input
+							v-if="addressData.nation == 'A'"
+							type="select"
 							name="ort"
+							:label="$p.t('person/ort')"
 							v-model="addressData.ort"
-						>	
-					</form-input>
-				</div>
-
-				<div class="row mb-3">
-					<div class="col-sm-4">
+							>
+							<option v-if="!orte.length" disabled>{{$p.t('ui', 'bitteGemeindeWaehlen')}}</option>
+							<option
+								v-for="ort in orte"
+								:key="ort.ortschaftsname"
+								:value="ort.ortschaftsname"
+								>
+								{{ort.ortschaftsname}}
+							</option>
+						</form-input>
 						<form-input
-							container-class="form-check"
-							type="checkbox"
-							name="heimatadresse"
-							:label="$p.t('person/heimatadresse')"
-							v-model="addressData.heimatadresse"
-						>
+								v-else
+								type="text"
+								:label="$p.t('person/ort')"
+								name="ort"
+								v-model="addressData.ort"
+							>
 						</form-input>
 					</div>
-				</div>
 
-				<div class="row mb-3">
-					<div class="col-sm-4">
-						<form-input
-							container-class="form-check"
-							type="checkbox"
-							name="zustelladresse"
-							:label="$p.t('person/zustelladresse')"
-							v-model="addressData.zustelladresse"
-						>
-						</form-input>
+					<div class="row mb-3">
+						<div class="col-sm-4">
+							<form-input
+								container-class="form-check"
+								type="checkbox"
+								name="heimatadresse"
+								:label="$p.t('person/heimatadresse')"
+								v-model="addressData.heimatadresse"
+							>
+							</form-input>
+						</div>
 					</div>
-				</div>
 
-				<div class="row mb-3">
-					<form-input
-						type="text"
-						name="co_name"
-						:label="$p.t('person/co_name')"
-						v-model="addressData.co_name"
-					>
-					</form-input>
-				</div>
-
-				<div class="row mb-3">
-					<div class="col-sm-4">
-						<form-input
-							container-class="form-check"
-							type="checkbox"
-							name="rechnungsadresse"
-							:label="$p.t('person/rechnungsadresse')"
-							v-model="addressData.rechnungsadresse"
-						>
-						</form-input>
+					<div class="row mb-3">
+						<div class="col-sm-4">
+							<form-input
+								container-class="form-check"
+								type="checkbox"
+								name="zustelladresse"
+								:label="$p.t('person/zustelladresse')"
+								v-model="addressData.zustelladresse"
+							>
+							</form-input>
+						</div>
 					</div>
-				</div>
 
-				<div class="row mb-3">
-					<form-input
-						type="autocomplete"
-						:label="$p.t('person/firma')"
-						name="firma_name"
-						v-model="selectedFirma"
-						optionLabel="label"
-						optionValue="firma_id"
-						dropdown
-						forceSelection
-						:suggestions="filteredFirmen" 
-						@complete="filterFirmen"
-						:min-length="3"
-					>
-					</form-input>
-				</div>
-
-				<div class="row mb-3">
-					<input type="hidden" class="form-control" id="firma_id" v-model="addressData.firma_id">
-				</div>
-
-				<div class="row mb-3">
-					<form-input
-						type="text"
-						name="firma_zusatz"
-						:label="$p.t('global/name')"
-						v-model="addressData.name"
-					>
-					</form-input>
-				</div>
-
-				<div class="row mb-3">
-					<form-input
+					<div class="row mb-3">
+						<form-input
 							type="text"
-							name="anmerkung"
-							:label="$p.t('global/anmerkung')"
-							v-model="addressData.anmerkung"
+							name="co_name"
+							:label="$p.t('person/co_name')"
+							v-model="addressData.co_name"
 						>
-					</form-input>
-				</div>
+						</form-input>
+					</div>
 
+					<div class="row mb-3">
+						<div class="col-sm-4">
+							<form-input
+								container-class="form-check"
+								type="checkbox"
+								name="rechnungsadresse"
+								:label="$p.t('person/rechnungsadresse')"
+								v-model="addressData.rechnungsadresse"
+							>
+							</form-input>
+						</div>
+					</div>
+
+					<div class="row mb-3">
+						<form-input
+							type="autocomplete"
+							:label="$p.t('person/firma')"
+							name="firma_name"
+							v-model="selectedFirma"
+							optionLabel="label"
+							optionValue="firma_id"
+							dropdown
+							forceSelection
+							:suggestions="filteredFirmen"
+							@complete="filterFirmen"
+							:min-length="3"
+						>
+						</form-input>
+					</div>
+
+					<div class="row mb-3">
+						<input type="hidden" class="form-control" id="firma_id" v-model="addressData.firma_id">
+					</div>
+
+					<div class="row mb-3">
+						<form-input
+							type="text"
+							name="firma_zusatz"
+							:label="$p.t('global/name')"
+							v-model="addressData.name"
+						>
+						</form-input>
+					</div>
+
+					<div class="row mb-3">
+						<form-input
+								type="text"
+								name="anmerkung"
+								:label="$p.t('global/anmerkung')"
+								v-model="addressData.anmerkung"
+							>
+						</form-input>
+					</div>
 			</form-form>
 
 			<template #footer>

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

@@ -4,6 +4,7 @@ import FormForm from '../../../../Form/Form.js';
 import FormInput from '../../../../Form/Input.js';
 import MobilityPurpose from './List/Purpose.js';
 import MobilitySupport from './List/Support.js';
+import NationsDropdown from '../../../../Dropdowns/NationsDropdown.js';
 
 import ApiStvMobility from '../../../../../api/factory/stv/mobility.js';
 
@@ -14,7 +15,8 @@ export default {
 		FormForm,
 		FormInput,
 		MobilityPurpose,
-		MobilitySupport
+		MobilitySupport,
+		NationsDropdown
 	},
 	inject: {
 		$reloadList: {
@@ -35,6 +37,15 @@ export default {
 	props: {
 		student: Object
 	},
+	emits: [
+		'updateNation',
+		'deleteMobilityPurpose',
+		'setMobilityPurpose',
+		'setMobilityPurposeToNewMobility',
+		'deleteMobilitySupport',
+		'setMobilitySupport',
+		'setMobilitySupportToNewMobility'
+	],
 	data() {
 		return {
 			formData: {
@@ -392,6 +403,14 @@ export default {
 		addSupportToMobility({aufenthaltfoerderung_code}){
 			this.formData.localSupports.push(aufenthaltfoerderung_code);
 		},
+		handleChangeGastnation({nation_code}){
+			console.log("update Gastnation with" + nation_code);
+			this.formData.nation_code = nation_code;
+		},
+		handleChangeHerkunftsland({nation_code}){
+			console.log("update erkunftsland with" + nation_code);
+			this.formData.herkunftsland_code = nation_code;
+		}
 	},
 	created() {
 		this.$api
@@ -429,6 +448,24 @@ export default {
 			})
 			.catch(this.$fhcAlert.handleSystemError);
 	},
+	/*
+	* 					<form-input
+						container-class="col-6 stv-details-mobility-herkunftsland"
+						:label="$p.t('mobility', 'herkunftsland')"
+						type="select"
+						v-model="formData.herkunftsland_code"
+						name="herkunftsland_code"
+						>
+						<option
+						v-for="nation in lists.nations"
+						:key="nation.nation_code"
+						:value="nation.nation_code"
+						:disabled="nation.sperre"
+						>
+						{{nation.kurztext}}
+						</option>
+					</form-input>
+	* */
 	template: `
 	<div class="stv-details-mobility h-100 pb-3">
 		<h4>In / Out</h4>
@@ -559,66 +596,59 @@ export default {
 				</div>
 				
 				<div class="row mb-3">
-					<form-input
-						container-class="col-6 stv-details-mobility-gastnation"
-						:label="$p.t('mobility', 'gastnation')"
-						type="select"
-						v-model="formData.nation_code"
-						name="nation_code"
-						>
-						<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-6 stv-details-mobility-universitaet"
-						:label="$p.t('mobility', 'universitaet')"
-						type="text"
-						v-model="formData.universitaet"
-						name="universitaet"
-						>
-
-					</form-input>
+					<div class="col-6">
+						<nations-dropdown
+							container-class="col-12 stv-details-mobility-gastnation"
+							:label-dropdown="$p.t('mobility', 'gastnation')"
+							:nation="formData.nation_code"
+							name="nation_code"
+							@updateNation="handleChangeGastnation"
+							>
+						</nations-dropdown>
+					</div>
+					<div class="col-6">
+						<form-input
+							container-class="stv-details-mobility-universitaet"
+							:label="$p.t('mobility', 'universitaet')"
+							type="text"
+							v-model="formData.universitaet"
+							name="universitaet"
+							>
+						</form-input>
+					</div>
 				</div>
 				
 				<div class="row mb-3">
-					<form-input
-						container-class="col-6 stv-details-mobility-herkunftsland"
-						:label="$p.t('mobility', 'herkunftsland')"
-						type="select"
-						v-model="formData.herkunftsland_code"
-						name="herkunftsland_code"
-						>
-						<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-3 stv-details-mobility-ects_erworben"
-						:label="$p.t('mobility', 'ects_erworben')"
-						type="text"
-						v-model="formData.ects_erworben"
-						name="ects_erworben"
-						>
-					</form-input>				
-					<form-input
-						container-class="col-3 stv-details-mobility-ects_angerechnet"
-						:label="$p.t('mobility', 'ects_angerechnet')"
-						type="text"
-						v-model="formData.ects_angerechnet"
-						name="ects_angerechnet"
-						>
-					</form-input>
+					<div class="col-6">
+						<nations-dropdown
+							container-class="col-12 stv-details-mobility-herkunftsland"
+							:label-dropdown="$p.t('mobility', 'herkunftsland')"
+							:nation="formData.herkunftsland_code"
+							name="herkunftsland_code"
+							@updateNation="handleChangeHerkunftsland"
+							>
+						</nations-dropdown>
+					</div>
+					<div class="col-6">
+						<div class="row">
+							<form-input
+								container-class="col-6 stv-details-mobility-ects_erworben"
+								:label="$p.t('mobility', 'ects_erworben')"
+								type="text"
+								v-model="formData.ects_erworben"
+								name="ects_erworben"
+								>
+							</form-input>
+							<form-input
+								container-class="col-6 stv-details-mobility-ects_angerechnet"
+								:label="$p.t('mobility', 'ects_angerechnet')"
+								type="text"
+								v-model="formData.ects_angerechnet"
+								name="ects_angerechnet"
+								>
+							</form-input>
+						</div>
+					</div>
 				</div>
 				
 				<div class="row mb-3">

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

@@ -3,6 +3,7 @@ import FormInput from '../../../Form/Input.js';
 import TblHistory from "./Prestudent/History.js";
 
 import CoreUdf from '../../../Udf/Udf.js';
+import NationsDropdown from '../../../Dropdowns/NationsDropdown.js';
 
 import ApiStvPrestudent from '../../../../api/factory/stv/prestudent.js';
 
@@ -12,7 +13,8 @@ export default {
 		FormForm,
 		FormInput,
 		TblHistory,
-		CoreUdf
+		CoreUdf,
+		NationsDropdown
 	},
 	inject: {
 		lists: {
@@ -58,6 +60,9 @@ export default {
 			default: {}
 		}
 	},
+	emits: [
+		'updateNation'
+	],
 	data() {
 		return {
 			data: [],
@@ -178,6 +183,15 @@ export default {
 				item.label.toLowerCase().includes(query)
 			)
 		},
+		handleChangeZGVNation({nation_code}){
+			this.data.zgvnation = nation_code;
+		},
+		handleChangeZGVMaNation({nation_code}){
+			this.data.zgvmanation = nation_code;
+		},
+		handleChangeZGVDrNation({nation_code}){
+			this.data.zgvdoktornation = nation_code;
+		},
 	},
 	async created() {
 		await this.loadPrestudent();
@@ -336,18 +350,15 @@ export default {
 						:teleport="true"
 						>
 					</form-input>
-					<form-input
-						v-if="!config.hiddenFields.includes('zgvNation')"
-						container-class="col stv-details-prestudent-zgvNation"
-						:label="$p.t('infocenter', 'zgvNation')"
-						type="select"
-						v-model="data.zgvnation"
+					<nations-dropdown
+						v-if="!config.hiddenFields.includes('zgvnation')"
+						container-class="col stv-details-prestudent-zgvnation"
+						:label-dropdown="$p.t('infocenter', 'zgvNation')"
+						:nation="data.zgvnation"
 						name="zgvnation"
+						@updateNation="handleChangeZGVNation"
 						>
-						<!-- TODO(chris): gesperrte nationen können nicht ausgewählt werden! Um das zu realisieren müsste man ein pseudo select machen -->
-						<option value="">&nbsp;</option>
-						<option v-for="nation in lists.nations" :key="nation.nation_code" :value="nation.nation_code" :disabled="nation.sperre">{{nation.kurztext}}</option>
-					</form-input>
+					</nations-dropdown>
 				</div>
 				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1">
 					<form-input
@@ -401,18 +412,15 @@ export default {
 						:teleport="true"
 						>
 					</form-input>
-					<form-input
+					<nations-dropdown
 						v-if="!config.hiddenFields.includes('zgvmanation')"
 						container-class="col stv-details-prestudent-zgvmanation"
-						:label="$p.t('lehre', 'zgvMasterNation')"
-						type="select"
-						v-model="data.zgvmanation"
+						:label-dropdown="$p.t('lehre', 'zgvMasterNation')"
+						:nation="data.zgvmanation"
 						name="zgvmanation"
+						@updateNation="handleChangeZGVMaNation"
 						>
-						<!-- TODO(chris): gesperrte nationen können nicht ausgewählt werden! Um das zu realisieren müsste man ein pseudo select machen -->
-						<option value="">&nbsp;</option>
-						<option v-for="nation in lists.nations" :key="nation.nation_code" :value="nation.nation_code" :disabled="nation.sperre">{{nation.kurztext}}</option>
-					</form-input>
+					</nations-dropdown>
 				</div>
 				<!--ZGV Doktor-->
 				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1">
@@ -467,18 +475,15 @@ export default {
 						:teleport="true"
 						>
 					</form-input>
-					<form-input
+					<nations-dropdown
 						v-if="!config.hiddenFields.includes('zgvdoktornation')"
 						container-class="col stv-details-prestudent-zgvdoktornation"
-						:label="$p.t('lehre', 'zgvDoktorNation')"
-						type="select"
-						v-model="data.zgvdoktornation"
+						:label-dropdown="$p.t('lehre', 'zgvDoktorNation')"
+						:nation="data.zgvdoktornation"
 						name="zgvdoktornation"
+						@updateNation="handleChangeZGVDrNation"
 						>
-						<!-- TODO(chris): gesperrte nationen können nicht ausgewählt werden! Um das zu realisieren müsste man ein pseudo select machen -->
-						<option value="">&nbsp;</option>
-						<option v-for="nation in lists.nations" :key="nation.nation_code" :value="nation.nation_code" :disabled="nation.sperre">{{nation.kurztext}}</option>
-					</form-input>
+					</nations-dropdown>
 				</div>
 
 				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1">