From 382079df690f0cc55b0f83da974f47678c498c63 Mon Sep 17 00:00:00 2001
From: jaggarnaut <julian.aggarwal@dataport.de>
Date: Wed, 20 Nov 2024 16:18:58 +0100
Subject: [PATCH 01/10] moved error alert into form wrapper and hide close
 button on error

---
 src/components/form/KlasseForm.vue           | 120 ++++----
 src/components/form/RolleForm.vue            | 296 ++++++++++---------
 src/views/admin/KlasseCreationView.vue       |  31 +-
 src/views/admin/PersonCreationView.vue       | 225 +++++++-------
 src/views/admin/PersonDetailsView.vue        |  31 +-
 src/views/admin/SchuleCreationView.vue       | 185 ++++++------
 src/views/admin/rollen/RolleCreationView.vue |  32 +-
 7 files changed, 468 insertions(+), 452 deletions(-)

diff --git a/src/components/form/KlasseForm.vue b/src/components/form/KlasseForm.vue
index 29276c8d8..fab343086 100644
--- a/src/components/form/KlasseForm.vue
+++ b/src/components/form/KlasseForm.vue
@@ -14,6 +14,7 @@
   const personenkontextStore: PersonenkontextStore = usePersonenkontextStore();
 
   type Props = {
+    errorCode?: string;
     schulen?: Array<{ value: string; title: string }>;
     readonly?: boolean;
     selectedSchuleProps?: BaseFieldProps & { error: boolean; 'error-messages': Array<string> };
@@ -82,70 +83,75 @@
     :confirmUnsavedChangesAction="onHandleConfirmUnsavedChanges"
     :createButtonLabel="$t('admin.klasse.create')"
     :discardButtonLabel="$t('admin.klasse.discard')"
-    :hideActions="readonly"
+    :hideActions="readonly || !!props.errorCode"
     id="klasse-form"
     :onDiscard="onHandleDiscard"
     @onShowDialogChange="onShowDialogChange"
     :onSubmit="onSubmit"
     :showUnsavedChangesDialog="showUnsavedChangesDialog"
   >
-    <!-- Schule zuordnen -->
-    <v-row>
-      <h3 class="headline-3">1. {{ $t('admin.schule.assignSchule') }}</h3>
-    </v-row>
-    <FormRow
-      :errorLabel="selectedSchuleProps?.error || ''"
-      labelForId="schule-select"
-      :isRequired="true"
-      :label="$t('admin.schule.schule')"
-    >
-      <v-autocomplete
-        autocomplete="off"
-        :class="[{ 'filter-dropdown mb-4': hasAutoselectedSchule }, { selected: selectedSchule }]"
-        clearable
-        data-testid="schule-select"
-        density="compact"
-        :disabled="hasAutoselectedSchule || readonly"
-        id="schule-select"
-        :items="schulen"
-        item-value="value"
-        item-text="title"
-        :no-data-text="$t('noDataFound')"
-        :placeholder="$t('admin.schule.assignSchule')"
-        ref="schule-select"
-        required="true"
-        variant="outlined"
-        v-bind="selectedSchuleProps"
-        v-model="selectedSchule"
-        v-model:search="searchInputSchule"
-        hide-details
-      ></v-autocomplete>
-    </FormRow>
+    <!-- Slot for SPSH alerts -->
+    <slot />
 
-    <!-- Klassenname eingeben -->
-    <v-row class="mt-8">
-      <h3 class="headline-3">2. {{ $t('admin.klasse.enterKlassenname') }}</h3>
-    </v-row>
-    <FormRow
-      :errorLabel="selectedKlassennameProps?.error || ''"
-      labelForId="klassenname-input"
-      :isRequired="true"
-      :label="$t('admin.klasse.klassenname')"
-    >
-      <v-text-field
-        clearable
-        data-testid="klassenname-input"
-        density="compact"
-        :disabled="!isEditActive"
-        id="klassenname-input"
-        :placeholder="$t('admin.klasse.enterKlassenname')"
-        ref="klassenname-input"
-        required="true"
-        variant="outlined"
-        v-bind="selectedKlassennameProps"
-        v-model="selectedKlassenname"
-      ></v-text-field>
-    </FormRow>
+    <template v-if="!props.errorCode">
+      <!-- Schule zuordnen -->
+      <v-row>
+        <h3 class="headline-3">1. {{ $t('admin.schule.assignSchule') }}</h3>
+      </v-row>
+      <FormRow
+        :errorLabel="selectedSchuleProps?.error || ''"
+        labelForId="schule-select"
+        :isRequired="true"
+        :label="$t('admin.schule.schule')"
+      >
+        <v-autocomplete
+          autocomplete="off"
+          :class="[{ 'filter-dropdown mb-4': hasAutoselectedSchule }, { selected: selectedSchule }]"
+          clearable
+          data-testid="schule-select"
+          density="compact"
+          :disabled="hasAutoselectedSchule || readonly"
+          id="schule-select"
+          :items="schulen"
+          item-value="value"
+          item-text="title"
+          :no-data-text="$t('noDataFound')"
+          :placeholder="$t('admin.schule.assignSchule')"
+          ref="schule-select"
+          required="true"
+          variant="outlined"
+          v-bind="selectedSchuleProps"
+          v-model="selectedSchule"
+          v-model:search="searchInputSchule"
+          hide-details
+        ></v-autocomplete>
+      </FormRow>
+
+      <!-- Klassenname eingeben -->
+      <v-row class="mt-8">
+        <h3 class="headline-3">2. {{ $t('admin.klasse.enterKlassenname') }}</h3>
+      </v-row>
+      <FormRow
+        :errorLabel="selectedKlassennameProps?.error || ''"
+        labelForId="klassenname-input"
+        :isRequired="true"
+        :label="$t('admin.klasse.klassenname')"
+      >
+        <v-text-field
+          clearable
+          data-testid="klassenname-input"
+          density="compact"
+          :disabled="!isEditActive"
+          id="klassenname-input"
+          :placeholder="$t('admin.klasse.enterKlassenname')"
+          ref="klassenname-input"
+          required="true"
+          variant="outlined"
+          v-bind="selectedKlassennameProps"
+          v-model="selectedKlassenname"
+        ></v-text-field>
+      </FormRow>
+    </template>
   </FormWrapper>
 </template>
 
diff --git a/src/components/form/RolleForm.vue b/src/components/form/RolleForm.vue
index c4cc3d8be..0c085b4f0 100644
--- a/src/components/form/RolleForm.vue
+++ b/src/components/form/RolleForm.vue
@@ -9,6 +9,7 @@
   type Props = {
     administrationsebenen?: Array<{ value: string; title: string }>;
     readonly?: boolean;
+    errorCode?: string;
     selectedAdministrationsebeneProps?: BaseFieldProps & { error: boolean; 'error-messages': Array<string> };
     selectedRollenArtProps?: BaseFieldProps & { error: boolean; 'error-messages': Array<string> };
     selectedRollenNameProps?: BaseFieldProps & { error: boolean; 'error-messages': Array<string> };
@@ -27,7 +28,7 @@
     onSubmit: () => void;
   };
 
-  defineProps<Props>();
+  const props: Props = defineProps<Props>();
 
   // Define the V-model for each field so the parent component can pass in the values for it.
   const selectedAdministrationsebene: ModelRef<string | undefined, string> =
@@ -44,7 +45,7 @@
     :confirmUnsavedChangesAction="onHandleConfirmUnsavedChanges"
     :createButtonLabel="$t('admin.rolle.create')"
     :discardButtonLabel="$t('admin.rolle.discard')"
-    :hideActions="readonly"
+    :hideActions="readonly || !!props.errorCode"
     id="rolle-form"
     :onDiscard="onHandleDiscard"
     @onShowDialogChange="onShowDialogChange"
@@ -52,177 +53,182 @@
     ref="form-wrapper"
     :showUnsavedChangesDialog="showUnsavedChangesDialog"
   >
-    <!-- 1. Administrationsebene zuordnen -->
-    <v-row>
-      <h3 class="headline-3">1. {{ $t('admin.administrationsebene.assignAdministrationsebene') }}</h3>
-    </v-row>
-    <FormRow
-      :errorLabel="selectedAdministrationsebeneProps?.error || ''"
-      labelForId="administrationsebene-select"
-      :isRequired="true"
-      :label="$t('admin.administrationsebene.administrationsebene')"
-    >
-      <v-select
-        clearable
-        data-testid="administrationsebene-select"
-        density="compact"
-        :disabled="readonly"
-        id="administrationsebene-select"
-        :items="administrationsebenen"
-        item-value="value"
-        item-text="title"
-        :no-data-text="$t('noDataFound')"
-        :placeholder="$t('admin.administrationsebene.assignAdministrationsebene')"
-        ref="administrationsebene-select"
-        required="true"
-        variant="outlined"
-        v-bind="selectedAdministrationsebeneProps"
-        v-model="selectedAdministrationsebene"
-      ></v-select>
-    </FormRow>
+    <!-- Slot for SPSH alerts -->
+    <slot />
 
-    <!-- 2. Rollenart zuordnen -->
-    <v-row>
-      <h3 class="headline-3">2. {{ $t('admin.rolle.assignRollenart') }}</h3>
-    </v-row>
-    <FormRow
-      :errorLabel="selectedRollenArtProps?.error || ''"
-      labelForId="rollenart-select"
-      :isRequired="true"
-      :label="$t('admin.rolle.rollenart')"
-    >
-      <v-select
-        clearable
-        data-testid="rollenart-select"
-        density="compact"
-        :disabled="readonly"
-        id="rollenart-select"
-        :items="translatedRollenarten"
-        item-value="value"
-        item-text="title"
-        :no-data-text="$t('noDataFound')"
-        :placeholder="$t('admin.rolle.selectRollenart')"
-        ref="rollenart-select"
-        required="true"
-        variant="outlined"
-        v-bind="selectedRollenArtProps"
-        v-model="selectedRollenArt"
-      ></v-select>
-    </FormRow>
-
-    <template v-if="selectedRollenArt && selectedAdministrationsebene">
-      <!-- 3. Rollenname eingeben -->
+    <template v-if="!props.errorCode">
+      <!-- 1. Administrationsebene zuordnen -->
       <v-row>
-        <h3 class="headline-3">3. {{ $t('admin.rolle.enterRollenname') }}</h3>
+        <h3 class="headline-3">1. {{ $t('admin.administrationsebene.assignAdministrationsebene') }}</h3>
       </v-row>
       <FormRow
-        :errorLabel="selectedRollenNameProps?.error || ''"
-        labelForId="rollenname-input"
+        :errorLabel="selectedAdministrationsebeneProps?.error || ''"
+        labelForId="administrationsebene-select"
         :isRequired="true"
-        :label="$t('admin.rolle.rollenname')"
-      >
-        <v-text-field
-          clearable
-          data-testid="rollenname-input"
-          density="compact"
-          :disabled="!isEditActive"
-          id="rollenname-input"
-          :placeholder="$t('admin.rolle.enterRollenname')"
-          ref="rollenname-input"
-          required="true"
-          variant="outlined"
-          v-bind="selectedRollenNameProps"
-          v-model="selectedRollenName"
-        ></v-text-field>
-      </FormRow>
-
-      <!-- 4. Merkmale zuordnen -->
-      <v-row>
-        <h3 class="headline-3">4. {{ $t('admin.rolle.assignMerkmale') }}</h3>
-      </v-row>
-      <FormRow
-        :errorLabel="selectedMerkmaleProps?.error || ''"
-        labelForId="merkmale-select"
-        :label="$t('admin.rolle.merkmale')"
+        :label="$t('admin.administrationsebene.administrationsebene')"
       >
         <v-select
-          chips
           clearable
-          data-testid="merkmale-select"
+          data-testid="administrationsebene-select"
           density="compact"
-          :disabled="!isEditActive"
-          id="merkmale-select"
-          :items="translatedMerkmale"
+          :disabled="readonly"
+          id="administrationsebene-select"
+          :items="administrationsebenen"
           item-value="value"
           item-text="title"
-          multiple
           :no-data-text="$t('noDataFound')"
-          :placeholder="isEditActive ? $t('admin.rolle.selectMerkmale') : '---'"
+          :placeholder="$t('admin.administrationsebene.assignAdministrationsebene')"
+          ref="administrationsebene-select"
+          required="true"
           variant="outlined"
-          v-bind="selectedMerkmaleProps"
-          v-model="selectedMerkmale"
+          v-bind="selectedAdministrationsebeneProps"
+          v-model="selectedAdministrationsebene"
         ></v-select>
       </FormRow>
 
-      <!-- 5. Angebote zuordnen -->
+      <!-- 2. Rollenart zuordnen -->
       <v-row>
-        <h3 class="headline-3">5. {{ $t('admin.serviceProvider.assignServiceProvider') }}</h3>
+        <h3 class="headline-3">2. {{ $t('admin.rolle.assignRollenart') }}</h3>
       </v-row>
       <FormRow
-        :errorLabel="selectedServiceProvidersProps?.error || ''"
-        labelForId="service-provider-select"
-        :label="$t('admin.serviceProvider.serviceProvider')"
+        :errorLabel="selectedRollenArtProps?.error || ''"
+        labelForId="rollenart-select"
+        :isRequired="true"
+        :label="$t('admin.rolle.rollenart')"
       >
-        <v-autocomplete
-          autocomplete="off"
-          chips
+        <v-select
           clearable
-          data-testid="service-provider-select"
+          data-testid="rollenart-select"
           density="compact"
-          :disabled="!isEditActive"
-          id="service-provider-select"
-          ref="service-provider-select"
-          :items="serviceProviders"
+          :disabled="readonly"
+          id="rollenart-select"
+          :items="translatedRollenarten"
           item-value="value"
           item-text="title"
-          multiple
           :no-data-text="$t('noDataFound')"
-          :placeholder="isEditActive ? $t('admin.serviceProvider.selectServiceProvider') : '---'"
+          :placeholder="$t('admin.rolle.selectRollenart')"
+          ref="rollenart-select"
+          required="true"
           variant="outlined"
-          v-bind="selectedServiceProvidersProps"
-          v-model="selectedServiceProviders"
-        ></v-autocomplete>
+          v-bind="selectedRollenArtProps"
+          v-model="selectedRollenArt"
+        ></v-select>
       </FormRow>
 
-      <!-- 6. Systemrechte zuordnen -->
-      <v-row>
-        <h3 class="headline-3">6. {{ $t('admin.rolle.assignSystemrechte') }}</h3>
-      </v-row>
-      <!-- Iterate over each system right and create a checkbox for it -->
-      <FormRow
-        :errorLabel="selectedSystemRechteProps?.error || ''"
-        labelForId="systemrecht-select"
-        :label="$t('admin.rolle.systemrechte')"
-      >
-        <v-autocomplete
-          autocomplete="off"
-          chips
-          clearable
-          data-testid="systemrechte-select"
-          density="compact"
-          :disabled="!isEditActive"
-          id="systemrechte-select"
-          :items="translatedSystemrechte"
-          item-value="value"
-          item-text="title"
-          multiple
-          :no-data-text="$t('noDataFound')"
-          :placeholder="isEditActive ? $t('admin.rolle.selectSystemrechte') : '---'"
-          variant="outlined"
-          v-bind="selectedSystemRechteProps"
-          v-model="selectedSystemRechte"
-        ></v-autocomplete>
-      </FormRow>
+      <template v-if="selectedRollenArt && selectedAdministrationsebene">
+        <!-- 3. Rollenname eingeben -->
+        <v-row>
+          <h3 class="headline-3">3. {{ $t('admin.rolle.enterRollenname') }}</h3>
+        </v-row>
+        <FormRow
+          :errorLabel="selectedRollenNameProps?.error || ''"
+          labelForId="rollenname-input"
+          :isRequired="true"
+          :label="$t('admin.rolle.rollenname')"
+        >
+          <v-text-field
+            clearable
+            data-testid="rollenname-input"
+            density="compact"
+            :disabled="!isEditActive"
+            id="rollenname-input"
+            :placeholder="$t('admin.rolle.enterRollenname')"
+            ref="rollenname-input"
+            required="true"
+            variant="outlined"
+            v-bind="selectedRollenNameProps"
+            v-model="selectedRollenName"
+          ></v-text-field>
+        </FormRow>
+
+        <!-- 4. Merkmale zuordnen -->
+        <v-row>
+          <h3 class="headline-3">4. {{ $t('admin.rolle.assignMerkmale') }}</h3>
+        </v-row>
+        <FormRow
+          :errorLabel="selectedMerkmaleProps?.error || ''"
+          labelForId="merkmale-select"
+          :label="$t('admin.rolle.merkmale')"
+        >
+          <v-select
+            chips
+            clearable
+            data-testid="merkmale-select"
+            density="compact"
+            :disabled="!isEditActive"
+            id="merkmale-select"
+            :items="translatedMerkmale"
+            item-value="value"
+            item-text="title"
+            multiple
+            :no-data-text="$t('noDataFound')"
+            :placeholder="isEditActive ? $t('admin.rolle.selectMerkmale') : '---'"
+            variant="outlined"
+            v-bind="selectedMerkmaleProps"
+            v-model="selectedMerkmale"
+          ></v-select>
+        </FormRow>
+
+        <!-- 5. Angebote zuordnen -->
+        <v-row>
+          <h3 class="headline-3">5. {{ $t('admin.serviceProvider.assignServiceProvider') }}</h3>
+        </v-row>
+        <FormRow
+          :errorLabel="selectedServiceProvidersProps?.error || ''"
+          labelForId="service-provider-select"
+          :label="$t('admin.serviceProvider.serviceProvider')"
+        >
+          <v-autocomplete
+            autocomplete="off"
+            chips
+            clearable
+            data-testid="service-provider-select"
+            density="compact"
+            :disabled="!isEditActive"
+            id="service-provider-select"
+            ref="service-provider-select"
+            :items="serviceProviders"
+            item-value="value"
+            item-text="title"
+            multiple
+            :no-data-text="$t('noDataFound')"
+            :placeholder="isEditActive ? $t('admin.serviceProvider.selectServiceProvider') : '---'"
+            variant="outlined"
+            v-bind="selectedServiceProvidersProps"
+            v-model="selectedServiceProviders"
+          ></v-autocomplete>
+        </FormRow>
+
+        <!-- 6. Systemrechte zuordnen -->
+        <v-row>
+          <h3 class="headline-3">6. {{ $t('admin.rolle.assignSystemrechte') }}</h3>
+        </v-row>
+        <!-- Iterate over each system right and create a checkbox for it -->
+        <FormRow
+          :errorLabel="selectedSystemRechteProps?.error || ''"
+          labelForId="systemrecht-select"
+          :label="$t('admin.rolle.systemrechte')"
+        >
+          <v-autocomplete
+            autocomplete="off"
+            chips
+            clearable
+            data-testid="systemrechte-select"
+            density="compact"
+            :disabled="!isEditActive"
+            id="systemrechte-select"
+            :items="translatedSystemrechte"
+            item-value="value"
+            item-text="title"
+            multiple
+            :no-data-text="$t('noDataFound')"
+            :placeholder="isEditActive ? $t('admin.rolle.selectSystemrechte') : '---'"
+            variant="outlined"
+            v-bind="selectedSystemRechteProps"
+            v-model="selectedSystemRechte"
+          ></v-autocomplete>
+        </FormRow>
+      </template>
     </template>
   </FormWrapper>
 </template>
diff --git a/src/views/admin/KlasseCreationView.vue b/src/views/admin/KlasseCreationView.vue
index 51ff76f52..aee31555e 100644
--- a/src/views/admin/KlasseCreationView.vue
+++ b/src/views/admin/KlasseCreationView.vue
@@ -155,27 +155,16 @@
       {{ $t('admin.headline') }}
     </h1>
     <LayoutCard
-      :closable="true"
+      :closable="!organisationStore.errorCode"
       @onCloseClicked="navigateToKlasseManagement"
       :header="$t('admin.klasse.addNew')"
       :padded="true"
       :showCloseText="true"
     >
-      <!-- Error Message Display if error on submit -->
-      <SpshAlert
-        :model-value="!!organisationStore.errorCode"
-        :title="$t('admin.klasse.klasseCreateErrorTitle')"
-        :type="'error'"
-        :closable="false"
-        :text="organisationStore.errorCode ? $t(`admin.klasse.errors.${organisationStore.errorCode}`) : ''"
-        :showButton="true"
-        :buttonText="$t('admin.klasse.backToCreateKlasse')"
-        :buttonAction="navigateBackToKlasseForm"
-      />
-
       <!-- The form to create a new Klasse -->
-      <template v-if="!organisationStore.createdKlasse && !organisationStore.errorCode">
+      <template v-if="!organisationStore.createdKlasse">
         <KlasseForm
+          :errorCode="organisationStore.errorCode"
           :schulen="schulen"
           :isEditActive="true"
           :readonly="false"
@@ -189,7 +178,19 @@
           ref="klasse-creation-form"
           v-model:selectedSchule="selectedSchule"
           v-model:selectedKlassenname="selectedKlassenname"
-        />
+        >
+          <!-- Error Message Display if error on submit -->
+          <SpshAlert
+            :model-value="!!organisationStore.errorCode"
+            :title="$t('admin.klasse.klasseCreateErrorTitle')"
+            :type="'error'"
+            :closable="false"
+            :text="organisationStore.errorCode ? $t(`admin.klasse.errors.${organisationStore.errorCode}`) : ''"
+            :showButton="true"
+            :buttonText="$t('admin.klasse.backToCreateKlasse')"
+            :buttonAction="navigateBackToKlasseForm"
+          />
+        </KlasseForm>
       </template>
 
       <!-- Result template on success after submit -->
diff --git a/src/views/admin/PersonCreationView.vue b/src/views/admin/PersonCreationView.vue
index 3b2afea7b..f2e584568 100644
--- a/src/views/admin/PersonCreationView.vue
+++ b/src/views/admin/PersonCreationView.vue
@@ -393,137 +393,136 @@
       {{ $t('admin.headline') }}
     </h1>
     <LayoutCard
-      :closable="true"
+      :closable="!personenkontextStore.errorCode && !personStore.errorCode"
       :header="$t('admin.person.addNew')"
       @onCloseClicked="navigateToPersonTable"
       :padded="true"
       :showCloseText="true"
     >
-      <!-- Error Message Display for error messages from the personStore -->
-      <SpshAlert
-        :model-value="!!personStore.errorCode"
-        :title="$t('admin.person.creationErrorTitle')"
-        :type="'error'"
-        :closable="false"
-        :showButton="true"
-        :buttonText="$t('admin.person.backToCreatePerson')"
-        :buttonAction="navigateBackToPersonForm"
-        :text="creationErrorText"
-      />
-
-      <!-- Error Message Display for error messages from the personenkontextStore -->
-      <SpshAlert
-        :model-value="!!personenkontextStore.errorCode"
-        :type="'error'"
-        :closable="false"
-        :text="t(`admin.personenkontext.errors.${personenkontextStore.errorCode}`)"
-        :showButton="true"
-        :buttonText="$t('admin.person.backToCreatePerson')"
-        :buttonAction="navigateBackToPersonForm"
-        :title="t(`admin.personenkontext.title.${personenkontextStore.errorCode}`)"
-      />
-
       <!-- The form to create a new Person  -->
-      <template
-        v-if="
-          !personenkontextStore.createdPersonWithKontext && !personStore.errorCode && !personenkontextStore.errorCode
-        "
-      >
+      <template v-if="!personenkontextStore.createdPersonWithKontext">
         <FormWrapper
           :canCommit="canCommit"
           :confirmUnsavedChangesAction="handleConfirmUnsavedChanges"
           :createButtonLabel="$t('admin.person.create')"
           :discardButtonLabel="$t('admin.person.discard')"
+          :hideActions="!!personenkontextStore.errorCode || !!personStore.errorCode"
           id="person-creation-form"
           :onDiscard="navigateToPersonTable"
           @onShowDialogChange="(value?: boolean) => (showUnsavedChangesDialog = value || false)"
           :onSubmit="onSubmit"
           :showUnsavedChangesDialog="showUnsavedChangesDialog"
         >
-          <!-- Organisation, Rolle, Klasse zuordnen -->
-          <PersonenkontextCreate
-            :showHeadline="true"
-            :organisationen="organisationen"
-            ref="personenkontext-create"
-            :rollen="rollen"
-            :klassen="klassen"
-            :selectedOrganisationProps="selectedOrganisationProps"
-            :selectedRolleProps="selectedRolleProps"
-            :selectedKlasseProps="selectedKlasseProps"
-            :befristungInputProps="{
-              befristungProps: selectedBefristungProps,
-              befristungOptionProps: selectedBefristungOptionProps,
-              isUnbefristetDisabled: isUnbefristetButtonDisabled,
-              isBefristungRequired: isBefristungspflichtRolle(selectedRolle),
-              nextSchuljahresende: getNextSchuljahresende(),
-              befristung: selectedBefristung,
-              befristungOption: selectedBefristungOption,
-            }"
-            v-model:selectedOrganisation="selectedOrganisation"
-            v-model:selectedRolle="selectedRolle"
-            v-model:selectedKlasse="selectedKlasse"
-            @update:selectedOrganisation="(value?: string) => (selectedOrganisation = value)"
-            @update:selectedRolle="(value?: string) => (selectedRolle = value)"
-            @update:selectedKlasse="(value?: string) => (selectedKlasse = value)"
-            @update:canCommit="canCommit = $event"
-            @update:befristung="handleBefristungUpdate"
-            @update:calculatedBefristungOption="handleBefristungOptionUpdate"
-            @fieldReset="handleFieldReset"
+          <!-- Error Message Display for error messages from the personenkontextStore -->
+          <SpshAlert
+            :model-value="!!personenkontextStore.errorCode"
+            :type="'error'"
+            :closable="false"
+            :text="t(`admin.personenkontext.errors.${personenkontextStore.errorCode}`)"
+            :showButton="true"
+            :buttonText="$t('admin.person.backToCreatePerson')"
+            :buttonAction="navigateBackToPersonForm"
+            :title="t(`admin.personenkontext.title.${personenkontextStore.errorCode}`)"
           />
-          <div v-if="selectedOrganisation">
-            <v-row>
-              <h3 class="headline-3">4. {{ $t('admin.person.personalInfo') }}</h3>
-            </v-row>
-            <!-- Vorname -->
-            <FormRow
-              :errorLabel="selectedVornameProps['error']"
-              labelForId="vorname-input"
-              :isRequired="true"
-              :label="$t('person.firstName')"
-            >
-              <v-text-field
-                clearable
-                data-testid="vorname-input"
-                density="compact"
-                id="vorname-input"
-                ref="vorname-input"
-                :placeholder="$t('person.enterFirstName')"
-                required="true"
-                variant="outlined"
-                v-bind="selectedVornameProps"
-                v-model="selectedVorname"
-              ></v-text-field>
-            </FormRow>
-
-            <!-- Nachname -->
-            <FormRow
-              :errorLabel="selectedFamiliennameProps['error']"
-              labelForId="familienname-input"
-              :isRequired="true"
-              :label="$t('person.lastName')"
-            >
-              <v-text-field
-                clearable
-                data-testid="familienname-input"
-                density="compact"
-                id="familienname-input"
-                ref="familienname-input"
-                :placeholder="$t('person.enterLastName')"
-                required="true"
-                variant="outlined"
-                v-bind="selectedFamiliennameProps"
-                v-model="selectedFamilienname"
-              ></v-text-field>
-            </FormRow>
-            <KopersInput
-              v-if="isKopersRolle(selectedRolle) && selectedOrganisation"
-              :hasNoKopersNr="hasNoKopersNr"
-              v-model:selectedKopersNr="selectedKopersNr"
-              :selectedKopersNrProps="selectedKopersNrProps"
-              @update:selectedKopersNr="(value?: string | null) => (selectedKopersNr = value)"
-              @update:hasNoKopersNr="(value: boolean | undefined) => (hasNoKopersNr = value)"
-            ></KopersInput>
-          </div>
+
+          <!-- Error Message Display for error messages from the personStore -->
+          <SpshAlert
+            :model-value="!!personStore.errorCode"
+            :title="$t('admin.person.creationErrorTitle')"
+            :type="'error'"
+            :closable="false"
+            :showButton="true"
+            :buttonText="$t('admin.person.backToCreatePerson')"
+            :buttonAction="navigateBackToPersonForm"
+            :text="creationErrorText"
+          />
+
+          <template v-if="!personenkontextStore.errorCode && !personStore.errorCode">
+            <!-- Organisation, Rolle, Klasse zuordnen -->
+            <PersonenkontextCreate
+              :showHeadline="true"
+              :organisationen="organisationen"
+              ref="personenkontext-create"
+              :rollen="rollen"
+              :klassen="klassen"
+              :selectedOrganisationProps="selectedOrganisationProps"
+              :selectedRolleProps="selectedRolleProps"
+              :selectedKlasseProps="selectedKlasseProps"
+              :befristungInputProps="{
+                befristungProps: selectedBefristungProps,
+                befristungOptionProps: selectedBefristungOptionProps,
+                isUnbefristetDisabled: isUnbefristetButtonDisabled,
+                isBefristungRequired: isBefristungspflichtRolle(selectedRolle),
+                nextSchuljahresende: getNextSchuljahresende(),
+                befristung: selectedBefristung,
+                befristungOption: selectedBefristungOption,
+              }"
+              v-model:selectedOrganisation="selectedOrganisation"
+              v-model:selectedRolle="selectedRolle"
+              v-model:selectedKlasse="selectedKlasse"
+              @update:selectedOrganisation="(value?: string) => (selectedOrganisation = value)"
+              @update:selectedRolle="(value?: string) => (selectedRolle = value)"
+              @update:selectedKlasse="(value?: string) => (selectedKlasse = value)"
+              @update:canCommit="canCommit = $event"
+              @update:befristung="handleBefristungUpdate"
+              @update:calculatedBefristungOption="handleBefristungOptionUpdate"
+              @fieldReset="handleFieldReset"
+            />
+            <div v-if="selectedOrganisation">
+              <v-row>
+                <h3 class="headline-3">4. {{ $t('admin.person.personalInfo') }}</h3>
+              </v-row>
+              <!-- Vorname -->
+              <FormRow
+                :errorLabel="selectedVornameProps['error']"
+                labelForId="vorname-input"
+                :isRequired="true"
+                :label="$t('person.firstName')"
+              >
+                <v-text-field
+                  clearable
+                  data-testid="vorname-input"
+                  density="compact"
+                  id="vorname-input"
+                  ref="vorname-input"
+                  :placeholder="$t('person.enterFirstName')"
+                  required="true"
+                  variant="outlined"
+                  v-bind="selectedVornameProps"
+                  v-model="selectedVorname"
+                ></v-text-field>
+              </FormRow>
+
+              <!-- Nachname -->
+              <FormRow
+                :errorLabel="selectedFamiliennameProps['error']"
+                labelForId="familienname-input"
+                :isRequired="true"
+                :label="$t('person.lastName')"
+              >
+                <v-text-field
+                  clearable
+                  data-testid="familienname-input"
+                  density="compact"
+                  id="familienname-input"
+                  ref="familienname-input"
+                  :placeholder="$t('person.enterLastName')"
+                  required="true"
+                  variant="outlined"
+                  v-bind="selectedFamiliennameProps"
+                  v-model="selectedFamilienname"
+                ></v-text-field>
+              </FormRow>
+              <KopersInput
+                v-if="isKopersRolle(selectedRolle) && selectedOrganisation"
+                :hasNoKopersNr="hasNoKopersNr"
+                v-model:selectedKopersNr="selectedKopersNr"
+                :selectedKopersNrProps="selectedKopersNrProps"
+                @update:selectedKopersNr="(value?: string | null) => (selectedKopersNr = value)"
+                @update:hasNoKopersNr="(value: boolean | undefined) => (hasNoKopersNr = value)"
+              ></KopersInput>
+            </div>
+          </template>
         </FormWrapper>
       </template>
 
diff --git a/src/views/admin/PersonDetailsView.vue b/src/views/admin/PersonDetailsView.vue
index 45048ab35..4520f0383 100644
--- a/src/views/admin/PersonDetailsView.vue
+++ b/src/views/admin/PersonDetailsView.vue
@@ -675,23 +675,20 @@
   const triggerChangeKlasse = async (): Promise<void> => {
     // Get the Klasse from the parent using the parent's ID and the klasse name
     if (selectedZuordnungen.value[0]?.sskId) {
-  await organisationStore.getAllOrganisationen({
-    administriertVon: [selectedZuordnungen.value[0]?.sskId],
-    includeTyp: OrganisationsTyp.Klasse,
-    systemrechte: ['KLASSEN_VERWALTEN'],
-  });
-  
-  await organisationStore.getKlassenByOrganisationId(
-    selectedZuordnungen.value[0]?.sskId, 
-    {searchString: selectedZuordnungen.value[0].klasse}
-  );
-  
-  // Combine arrays and remove duplicates based on id
-  const combined = [...organisationStore.klassen, ...organisationStore.allKlassen];
-  organisationStore.klassen = Array.from(
-    new Map(combined.map(item => [item.id, item])).values()
-  );
-}
+      await organisationStore.getAllOrganisationen({
+        administriertVon: [selectedZuordnungen.value[0]?.sskId],
+        includeTyp: OrganisationsTyp.Klasse,
+        systemrechte: ['KLASSEN_VERWALTEN'],
+      });
+
+      await organisationStore.getKlassenByOrganisationId(selectedZuordnungen.value[0]?.sskId, {
+        searchString: selectedZuordnungen.value[0].klasse,
+      });
+
+      // Combine arrays and remove duplicates based on id
+      const combined = [...organisationStore.klassen, ...organisationStore.allKlassen];
+      organisationStore.klassen = Array.from(new Map(combined.map((item) => [item.id, item])).values());
+    }
     // Auto select the new Schule
     selectedSchule.value = selectedZuordnungen.value[0]?.sskId;
     // Retrieves the new Klasse from the selected Zuordnung
diff --git a/src/views/admin/SchuleCreationView.vue b/src/views/admin/SchuleCreationView.vue
index a44892ef5..d3c3ea671 100644
--- a/src/views/admin/SchuleCreationView.vue
+++ b/src/views/admin/SchuleCreationView.vue
@@ -155,6 +155,7 @@
 
   onMounted(async () => {
     organisationStore.createdSchule = null;
+    organisationStore.errorCode = '';
     await organisationStore.getSchultraeger();
 
     if (schultraegerList.value && schultraegerList.value.length > 0) {
@@ -180,115 +181,119 @@
       {{ $t('admin.headline') }}
     </h1>
     <LayoutCard
-      :closable="true"
+      :closable="!organisationStore.errorCode"
       @onCloseClicked="navigateToSchuleManagement"
       :header="$t('admin.schule.addNew')"
       :padded="true"
       :showCloseText="true"
     >
-      <!-- Error Message Display if error on submit -->
-      <SpshAlert
-        :model-value="!!organisationStore.errorCode"
-        :title="$t('admin.schule.schuleCreateErrorTitle')"
-        :type="'error'"
-        :closable="false"
-        :text="organisationStore.errorCode ? $t(`admin.schule.errors.${organisationStore.errorCode}`) : ''"
-        :showButton="true"
-        :buttonText="$t('admin.schule.backToCreateSchule')"
-        :buttonAction="navigateBackToSchuleForm"
-        buttonClass="primary"
-      />
       <!-- The form to create a new school (No created school yet and no errorCode) -->
-      <template v-if="!organisationStore.createdSchule && !organisationStore.errorCode">
+      <template v-if="!organisationStore.createdSchule">
         <FormWrapper
           :confirmUnsavedChangesAction="handleConfirmUnsavedChanges"
           :createButtonLabel="$t('admin.schule.create')"
           :discardButtonLabel="$t('admin.schule.discard')"
+          :hideActions="!!organisationStore.errorCode"
           id="schule-creation-form"
           :onDiscard="navigateToSchuleManagement"
           @onShowDialogChange="(value?: boolean) => (showUnsavedChangesDialog = value || false)"
           :onSubmit="onSubmit"
           :showUnsavedChangesDialog="showUnsavedChangesDialog"
         >
-          <!-- Select school type. For now not bound to anything and just a UI element -->
-          <v-row>
-            <v-col>
-              <h3 class="headline-3">1. {{ $t('admin.schule.assignSchulform') }}</h3>
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-col
-              cols="4"
-              class="d-none d-md-flex"
-            ></v-col>
-            <v-radio-group
-              inline
-              v-model="selectedSchulform"
-              data-testid="schulform-radio-group"
-            >
+          <!-- Error Message Display if error on submit -->
+          <SpshAlert
+            :model-value="!!organisationStore.errorCode"
+            :title="$t('admin.schule.schuleCreateErrorTitle')"
+            :type="'error'"
+            :closable="false"
+            :text="organisationStore.errorCode ? $t(`admin.schule.errors.${organisationStore.errorCode}`) : ''"
+            :showButton="true"
+            :buttonText="$t('admin.schule.backToCreateSchule')"
+            :buttonAction="navigateBackToSchuleForm"
+            buttonClass="primary"
+          />
+
+          <template v-if="!organisationStore.errorCode">
+            <!-- Select school type. For now not bound to anything and just a UI element -->
+            <v-row>
+              <v-col>
+                <h3 class="headline-3">1. {{ $t('admin.schule.assignSchulform') }}</h3>
+              </v-col>
+            </v-row>
+            <v-row>
               <v-col
-                v-for="(schultraeger, index) in schultraegerList"
-                :key="schultraeger.id"
-                offset-md="1"
-                cols="12"
-                sm="5"
-                class="pb-0"
+                cols="4"
+                class="d-none d-md-flex"
+              ></v-col>
+              <v-radio-group
+                inline
+                v-model="selectedSchulform"
+                data-testid="schulform-radio-group"
               >
-                <v-radio
-                  :label="schultraeger.name"
-                  :value="schultraeger.id"
-                  :data-testid="'schulform-radio-button-' + index"
-                ></v-radio>
+                <v-col
+                  v-for="(schultraeger, index) in schultraegerList"
+                  :key="schultraeger.id"
+                  offset-md="1"
+                  cols="12"
+                  sm="5"
+                  class="pb-0"
+                >
+                  <v-radio
+                    :label="schultraeger.name"
+                    :value="schultraeger.id"
+                    :data-testid="'schulform-radio-button-' + index"
+                  ></v-radio>
+                </v-col>
+              </v-radio-group>
+            </v-row>
+            <!-- Enter service number -->
+            <v-row>
+              <v-col>
+                <h3 class="headline-3">2. {{ $t('admin.schule.enterDienststellennummer') }}</h3>
               </v-col>
-            </v-radio-group>
-          </v-row>
-          <!-- Enter service number -->
-          <v-row>
-            <v-col>
-              <h3 class="headline-3">2. {{ $t('admin.schule.enterDienststellennummer') }}</h3>
-            </v-col>
-          </v-row>
-          <FormRow
-            :errorLabel="selectedDienststellennummerProps['error']"
-            labelForId="dienststellennummer-input"
-            :isRequired="true"
-            :label="$t('admin.schule.dienststellennummer')"
-          >
-            <v-text-field
-              clearable
-              data-testid="dienststellennummer-input"
-              v-bind="selectedDienststellennummerProps"
-              v-model="selectedDienststellennummer"
-              :placeholder="$t('admin.schule.dienststellennummer')"
-              ref="dienststellennummer-input"
-              variant="outlined"
-              density="compact"
-            ></v-text-field>
-          </FormRow>
-          <!-- select school name -->
-          <v-row>
-            <v-col>
-              <h3 class="headline-3">3. {{ $t('admin.schule.enterSchulname') }}</h3>
-            </v-col>
-          </v-row>
-          <FormRow
-            :errorLabel="selectedSchulnameProps['error']"
-            labelForId="schulname-input"
-            :isRequired="true"
-            :label="$t('admin.schule.schulname')"
-          >
-            <v-text-field
-              clearable
-              data-testid="schulname-input"
-              v-bind="selectedSchulnameProps"
-              v-model="selectedSchulname"
-              :placeholder="$t('admin.schule.schulname')"
-              ref="schulname-input"
-              variant="outlined"
-              density="compact"
-              required
-            ></v-text-field>
-          </FormRow>
+            </v-row>
+            <FormRow
+              :errorLabel="selectedDienststellennummerProps['error']"
+              labelForId="dienststellennummer-input"
+              :isRequired="true"
+              :label="$t('admin.schule.dienststellennummer')"
+            >
+              <v-text-field
+                clearable
+                data-testid="dienststellennummer-input"
+                v-bind="selectedDienststellennummerProps"
+                v-model="selectedDienststellennummer"
+                :placeholder="$t('admin.schule.dienststellennummer')"
+                ref="dienststellennummer-input"
+                variant="outlined"
+                density="compact"
+              ></v-text-field>
+            </FormRow>
+            <!-- select school name -->
+            <v-row>
+              <v-col>
+                <h3 class="headline-3">3. {{ $t('admin.schule.enterSchulname') }}</h3>
+              </v-col>
+            </v-row>
+            <FormRow
+              :errorLabel="selectedSchulnameProps['error']"
+              labelForId="schulname-input"
+              :isRequired="true"
+              :label="$t('admin.schule.schulname')"
+            >
+              <v-text-field
+                clearable
+                data-testid="schulname-input"
+                v-bind="selectedSchulnameProps"
+                v-model="selectedSchulname"
+                :placeholder="$t('admin.schule.schulname')"
+                ref="schulname-input"
+                variant="outlined"
+                density="compact"
+                required
+              ></v-text-field>
+            </FormRow>
+          </template>
         </FormWrapper>
       </template>
       <!-- Result template on success after submit (Present value in createdSchule and no errorCode)  -->
diff --git a/src/views/admin/rollen/RolleCreationView.vue b/src/views/admin/rollen/RolleCreationView.vue
index 85f75a241..b5694766f 100644
--- a/src/views/admin/rollen/RolleCreationView.vue
+++ b/src/views/admin/rollen/RolleCreationView.vue
@@ -267,28 +267,17 @@
       {{ $t('admin.headline') }}
     </h1>
     <LayoutCard
-      :closable="true"
+      :closable="!rolleStore.errorCode"
       @onCloseClicked="navigateToRolleManagement"
       :header="$t('admin.rolle.addNew')"
       :padded="true"
       :showCloseText="true"
     >
-      <!-- Error Message Display if error on submit -->
-      <SpshAlert
-        :model-value="!!rolleStore.errorCode"
-        :title="t('admin.rolle.rolleCreateErrorTitle')"
-        :type="'error'"
-        :closable="false"
-        :text="rolleStore.errorCode ? $t(`admin.rolle.errors.${rolleStore.errorCode}`) : ''"
-        :showButton="true"
-        :buttonText="$t('admin.rolle.backToCreateRolle')"
-        :buttonAction="navigateBackToRolleForm"
-      />
-
       <!-- The form to create a new Rolle -->
-      <template v-if="!rolleStore.createdRolle && !rolleStore.errorCode">
+      <template v-if="!rolleStore.createdRolle">
         <RolleForm
           :administrationsebenen="administrationsebenen"
+          :errorCode="rolleStore.errorCode"
           :onHandleConfirmUnsavedChanges="handleConfirmUnsavedChanges"
           :onHandleDiscard="navigateToRolleManagement"
           :onShowDialogChange="(value?: boolean) => (showUnsavedChangesDialog = value || false)"
@@ -312,7 +301,20 @@
           :translatedRollenarten="translatedRollenarten"
           :translatedMerkmale="translatedMerkmale"
           :translatedSystemrechte="translatedSystemrechte"
-        ></RolleForm>
+        >
+          <!-- Error Message Display if error on submit -->
+          <!-- To trigger unsaved changes dialog the alert has to be inside the form wrapper -->
+          <SpshAlert
+            :model-value="!!rolleStore.errorCode"
+            :title="t('admin.rolle.rolleCreateErrorTitle')"
+            :type="'error'"
+            :closable="false"
+            :text="rolleStore.errorCode ? $t(`admin.rolle.errors.${rolleStore.errorCode}`) : ''"
+            :showButton="true"
+            :buttonText="$t('admin.rolle.backToCreateRolle')"
+            :buttonAction="navigateBackToRolleForm"
+          />
+        </RolleForm>
       </template>
 
       <!-- Result template on success after submit  -->

From adba129a77ac3c82613534c88c7f71a58d406e9a Mon Sep 17 00:00:00 2001
From: jaggarnaut <julian.aggarwal@dataport.de>
Date: Thu, 21 Nov 2024 09:18:00 +0100
Subject: [PATCH 02/10] fixed rolle creation test

---
 src/views/admin/rollen/RolleCreationView.spec.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/views/admin/rollen/RolleCreationView.spec.ts b/src/views/admin/rollen/RolleCreationView.spec.ts
index 1b9dceced..8db3192d5 100644
--- a/src/views/admin/rollen/RolleCreationView.spec.ts
+++ b/src/views/admin/rollen/RolleCreationView.spec.ts
@@ -94,6 +94,8 @@ describe('RolleCreationView', () => {
     wrapper?.find('[data-testid="alert-button"]').trigger('click');
     await nextTick();
     expect(push).toHaveBeenCalledTimes(1);
+    // reset errorCode after test
+    rolleStore.errorCode = '';
   });
 
   test('it closes the view and navigates back to rolle table', async () => {

From 2a154259aa9b9ab3ade6b654d595ce784a555059 Mon Sep 17 00:00:00 2001
From: jaggarnaut <julian.aggarwal@dataport.de>
Date: Mon, 25 Nov 2024 17:17:03 +0100
Subject: [PATCH 03/10] implemented spsh alert into formwrapper in rolle and
 klassen details

---
 src/views/admin/KlasseDetailsView.vue       | 44 ++++++++++-----------
 src/views/admin/rollen/RolleDetailsView.vue | 44 ++++++++++-----------
 2 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/src/views/admin/KlasseDetailsView.vue b/src/views/admin/KlasseDetailsView.vue
index f484cff98..008eea8de 100644
--- a/src/views/admin/KlasseDetailsView.vue
+++ b/src/views/admin/KlasseDetailsView.vue
@@ -198,27 +198,6 @@
       :padded="true"
       :showCloseText="true"
     >
-      <!-- Error Message Display -->
-      <SpshAlert
-        :model-value="!!organisationStore.errorCode"
-        :title="
-          organisationStore.errorCode === 'UNSPECIFIED_ERROR'
-            ? $t('admin.klasse.loadingErrorTitle')
-            : $t(`admin.klasse.title.${organisationStore.errorCode}`)
-        "
-        :type="'error'"
-        :closable="false"
-        :text="
-          organisationStore.errorCode === 'UNSPECIFIED_ERROR'
-            ? $t('admin.klasse.loadingErrorText')
-            : $t(`admin.klasse.errors.${organisationStore.errorCode}`)
-        "
-        :showButton="true"
-        :buttonText="alertButtonText"
-        :buttonAction="alertButtonAction"
-        @update:modelValue="handleAlertClose"
-      />
-
       <template v-if="!organisationStore.updatedOrganisation && !organisationStore.errorCode">
         <v-container>
           <div v-if="organisationStore.currentOrganisation">
@@ -235,7 +214,28 @@
               ref="klasse-creation-form"
               v-model:selectedSchule="selectedSchule"
               v-model:selectedKlassenname="selectedKlassenname"
-            />
+            >
+              <!-- Error Message Display -->
+              <SpshAlert
+                :model-value="!!organisationStore.errorCode"
+                :title="
+                  organisationStore.errorCode === 'UNSPECIFIED_ERROR'
+                    ? $t('admin.klasse.loadingErrorTitle')
+                    : $t(`admin.klasse.title.${organisationStore.errorCode}`)
+                "
+                :type="'error'"
+                :closable="false"
+                :text="
+                  organisationStore.errorCode === 'UNSPECIFIED_ERROR'
+                    ? $t('admin.klasse.loadingErrorText')
+                    : $t(`admin.klasse.errors.${organisationStore.errorCode}`)
+                "
+                :showButton="true"
+                :buttonText="alertButtonText"
+                :buttonAction="alertButtonAction"
+                @update:modelValue="handleAlertClose"
+              />
+            </KlasseForm>
             <v-divider
               v-if="isEditActive"
               class="border-opacity-100 rounded"
diff --git a/src/views/admin/rollen/RolleDetailsView.vue b/src/views/admin/rollen/RolleDetailsView.vue
index 77779bf3a..31140b7c3 100644
--- a/src/views/admin/rollen/RolleDetailsView.vue
+++ b/src/views/admin/rollen/RolleDetailsView.vue
@@ -332,27 +332,6 @@
       :padded="true"
       :showCloseText="true"
     >
-      <!-- Error Message Display -->
-      <SpshAlert
-        :model-value="!!rolleStore.errorCode"
-        :title="
-          organisationStore.errorCode === 'UNSPECIFIED_ERROR'
-            ? $t('admin.rolle.loadingErrorTitle')
-            : $t(`admin.rolle.title.${rolleStore.errorCode}`)
-        "
-        :type="'error'"
-        :closable="false"
-        :text="
-          rolleStore.errorCode === 'UNSPECIFIED_ERROR'
-            ? $t('admin.rolle.loadingErrorText')
-            : $t(`admin.rolle.errors.${rolleStore.errorCode}`)
-        "
-        :showButton="true"
-        :buttonText="alertButtonText"
-        :buttonAction="alertButtonAction"
-        @update:modelValue="handleAlertClose"
-      />
-
       <template v-if="!rolleStore.updatedRolle && !rolleStore.errorCode">
         <v-container>
           <div v-if="rolleStore.currentRolle">
@@ -380,7 +359,28 @@
               :translatedMerkmale="allMerkmale"
               :translatedSystemrechte="allSystemrechte"
               :showUnsavedChangesDialog="showUnsavedChangesDialog"
-            ></RolleForm>
+            >
+              <!-- Error Message Display -->
+              <SpshAlert
+                :model-value="!!rolleStore.errorCode"
+                :title="
+                  organisationStore.errorCode === 'UNSPECIFIED_ERROR'
+                    ? $t('admin.rolle.loadingErrorTitle')
+                    : $t(`admin.rolle.title.${rolleStore.errorCode}`)
+                "
+                :type="'error'"
+                :closable="false"
+                :text="
+                  rolleStore.errorCode === 'UNSPECIFIED_ERROR'
+                    ? $t('admin.rolle.loadingErrorText')
+                    : $t(`admin.rolle.errors.${rolleStore.errorCode}`)
+                "
+                :showButton="true"
+                :buttonText="alertButtonText"
+                :buttonAction="alertButtonAction"
+                @update:modelValue="handleAlertClose"
+              />
+            </RolleForm>
             <v-divider
               v-if="isEditActive"
               class="border-opacity-100 rounded"

From 5715aae5e045325b7e71ef671b3bca8f0cc29da1 Mon Sep 17 00:00:00 2001
From: jaggarnaut <julian.aggarwal@dataport.de>
Date: Mon, 25 Nov 2024 17:52:51 +0100
Subject: [PATCH 04/10] fixed tests

---
 src/views/admin/KlasseCreationView.spec.ts      | 8 --------
 src/views/admin/KlasseDetailsView.spec.ts       | 2 ++
 src/views/admin/KlasseDetailsView.vue           | 2 +-
 src/views/admin/PersonCreationView.spec.ts      | 8 --------
 src/views/admin/SchuleCreationView.spec.ts      | 8 --------
 src/views/admin/rollen/RolleDetailsView.spec.ts | 7 ++++++-
 src/views/admin/rollen/RolleDetailsView.vue     | 2 +-
 7 files changed, 10 insertions(+), 27 deletions(-)

diff --git a/src/views/admin/KlasseCreationView.spec.ts b/src/views/admin/KlasseCreationView.spec.ts
index e2ed04d21..28add760d 100644
--- a/src/views/admin/KlasseCreationView.spec.ts
+++ b/src/views/admin/KlasseCreationView.spec.ts
@@ -268,12 +268,4 @@ describe('KlasseCreationView', () => {
     wrapper?.find('[data-testid="alert-button"]').trigger('click');
     await nextTick();
   });
-
-  test('shows error message if REQUIRED_STEP_UP_LEVEL_NOT_MET error is present and click x button', async () => {
-    organisationStore.errorCode = 'REQUIRED_STEP_UP_LEVEL_NOT_MET';
-    await nextTick();
-    expect(wrapper?.find('[data-testid="alert-title"]').isVisible()).toBe(true);
-    wrapper?.find('[data-testid="close-layout-card-button"]').trigger('click');
-    await nextTick();
-  });
 });
diff --git a/src/views/admin/KlasseDetailsView.spec.ts b/src/views/admin/KlasseDetailsView.spec.ts
index a5ef9fb81..32941b270 100644
--- a/src/views/admin/KlasseDetailsView.spec.ts
+++ b/src/views/admin/KlasseDetailsView.spec.ts
@@ -165,5 +165,7 @@ describe('KlassenDetailsView', () => {
     expect(spshAlertWrapper?.props()).toMatchObject({
       title: 'Geänderte Daten',
     });
+    // reset errorCode after test
+    organisationStore.errorCode = '';
   });
 });
diff --git a/src/views/admin/KlasseDetailsView.vue b/src/views/admin/KlasseDetailsView.vue
index cbb506320..fe4a78856 100644
--- a/src/views/admin/KlasseDetailsView.vue
+++ b/src/views/admin/KlasseDetailsView.vue
@@ -197,7 +197,7 @@
       :padded="true"
       :showCloseText="true"
     >
-      <template v-if="!organisationStore.updatedOrganisation && !organisationStore.errorCode">
+      <template v-if="!organisationStore.updatedOrganisation">
         <v-container>
           <div v-if="organisationStore.currentOrganisation">
             <KlasseForm
diff --git a/src/views/admin/PersonCreationView.spec.ts b/src/views/admin/PersonCreationView.spec.ts
index d819f7154..8a8e1e5e2 100644
--- a/src/views/admin/PersonCreationView.spec.ts
+++ b/src/views/admin/PersonCreationView.spec.ts
@@ -229,12 +229,4 @@ describe('PersonCreationView', () => {
     wrapper?.find('[data-testid="alert-button"]').trigger('click');
     await nextTick();
   });
-
-  test('shows error message if REQUIRED_STEP_UP_LEVEL_NOT_MET error is present and click x button', async () => {
-    personenkontextStore.errorCode = 'REQUIRED_STEP_UP_LEVEL_NOT_MET';
-    await nextTick();
-    expect(wrapper?.find('[data-testid="alert-title"]').isVisible()).toBe(true);
-    wrapper?.find('[data-testid="close-layout-card-button"]').trigger('click');
-    await nextTick();
-  });
 });
diff --git a/src/views/admin/SchuleCreationView.spec.ts b/src/views/admin/SchuleCreationView.spec.ts
index 0498840d3..a38cb5359 100644
--- a/src/views/admin/SchuleCreationView.spec.ts
+++ b/src/views/admin/SchuleCreationView.spec.ts
@@ -130,12 +130,4 @@ describe('SchuleCreationView', () => {
     wrapper?.find('[data-testid="alert-button"]').trigger('click');
     await nextTick();
   });
-
-  test('shows error message if REQUIRED_STEP_UP_LEVEL_NOT_MET error is present and click x button', async () => {
-    organisationStore.errorCode = 'REQUIRED_STEP_UP_LEVEL_NOT_MET';
-    await nextTick();
-    expect(wrapper?.find('[data-testid="alert-title"]').isVisible()).toBe(true);
-    wrapper?.find('[data-testid="close-layout-card-button"]').trigger('click');
-    await nextTick();
-  });
 });
diff --git a/src/views/admin/rollen/RolleDetailsView.spec.ts b/src/views/admin/rollen/RolleDetailsView.spec.ts
index 57e87ce06..8126dba57 100644
--- a/src/views/admin/rollen/RolleDetailsView.spec.ts
+++ b/src/views/admin/rollen/RolleDetailsView.spec.ts
@@ -70,7 +70,7 @@ beforeEach(async () => {
 });
 
 describe('RolleDetailsView', () => {
-  test('it renders the role details view', () => {
+  test('it renders the rolle details view', () => {
     expect(wrapper?.find('[data-testid="rolle-details-card"]').isVisible()).toBe(true);
   });
 
@@ -145,6 +145,9 @@ describe('RolleDetailsView', () => {
   });
 
   test('displays error message correctly', async () => {
+    // We have to reset updatedRolle to null to trigger the error message
+    rolleStore.updatedRolle = null;
+
     // Test case 1: ROLLE_UPDATE_ERROR
     rolleStore.errorCode = 'ROLLE_UPDATE_ERROR';
     await nextTick();
@@ -160,5 +163,7 @@ describe('RolleDetailsView', () => {
     expect(spshAlertWrapper?.props()).toMatchObject({
       title: 'Geänderte Daten',
     });
+    // reset errorCode after test
+    rolleStore.errorCode = '';
   });
 });
diff --git a/src/views/admin/rollen/RolleDetailsView.vue b/src/views/admin/rollen/RolleDetailsView.vue
index 4f31a9c48..1e99681cc 100644
--- a/src/views/admin/rollen/RolleDetailsView.vue
+++ b/src/views/admin/rollen/RolleDetailsView.vue
@@ -331,7 +331,7 @@
       :padded="true"
       :showCloseText="true"
     >
-      <template v-if="!rolleStore.updatedRolle && !rolleStore.errorCode">
+      <template v-if="!rolleStore.updatedRolle">
         <v-container>
           <div v-if="rolleStore.currentRolle">
             <RolleForm

From cd306c6b04428616297a33be0ea1e9384f355a68 Mon Sep 17 00:00:00 2001
From: jaggarnaut <julian.aggarwal@dataport.de>
Date: Tue, 26 Nov 2024 10:55:00 +0100
Subject: [PATCH 05/10] more spacing for spsh alert

---
 src/views/admin/PersonDetailsView.vue | 54 ++++++++++++++-------------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/views/admin/PersonDetailsView.vue b/src/views/admin/PersonDetailsView.vue
index fd3a63701..60fc961d5 100644
--- a/src/views/admin/PersonDetailsView.vue
+++ b/src/views/admin/PersonDetailsView.vue
@@ -1316,31 +1316,35 @@
       :padded="true"
       :showCloseText="true"
     >
-      <!-- Error Message Display if the personStore throws any kind of error (Not being able to load the person) -->
-      <SpshAlert
-        :model-value="!!personStore.errorCode"
-        :type="'error'"
-        :closable="false"
-        :text="$t(`admin.person.errors.${personStore.errorCode}`)"
-        :showButton="true"
-        :buttonText="alertButtonTextKopers"
-        :buttonAction="alertButtonActionKopers"
-        :title="$t(`admin.person.title.${personStore.errorCode}`)"
-        @update:modelValue="handleAlertClose"
-      />
-
-      <!-- Error Message Display if the personenkontextStore throws any kind of error (Not being able to load the kontext) -->
-      <SpshAlert
-        :model-value="!!personenkontextStore.errorCode"
-        :type="'error'"
-        :closable="false"
-        :text="creationErrorText"
-        :showButton="true"
-        :buttonText="alertButtonText"
-        :buttonAction="alertButtonAction"
-        :title="creationErrorTitle"
-        @update:modelValue="handleAlertClose"
-      />
+      <v-container class="px-3 px-sm-16">
+        <v-container class="px-lg-16">
+          <!-- Error Message Display if the personStore throws any kind of error (Not being able to load the person) -->
+          <SpshAlert
+            :model-value="!!personStore.errorCode"
+            :type="'error'"
+            :closable="false"
+            :text="$t(`admin.person.errors.${personStore.errorCode}`)"
+            :showButton="true"
+            :buttonText="alertButtonTextKopers"
+            :buttonAction="alertButtonActionKopers"
+            :title="$t(`admin.person.title.${personStore.errorCode}`)"
+            @update:modelValue="handleAlertClose"
+          />
+
+          <!-- Error Message Display if the personenkontextStore throws any kind of error (Not being able to load the kontext) -->
+          <SpshAlert
+            :model-value="!!personenkontextStore.errorCode"
+            :type="'error'"
+            :closable="false"
+            :text="creationErrorText"
+            :showButton="true"
+            :buttonText="alertButtonText"
+            :buttonAction="alertButtonAction"
+            :title="creationErrorTitle"
+            @update:modelValue="handleAlertClose"
+          />
+        </v-container>
+      </v-container>
 
       <template v-if="!personStore.errorCode && !personenkontextStore.errorCode">
         <v-container class="personal-info">

From 247b85d8b61fb46e7ba2f106b3585ed03166569a Mon Sep 17 00:00:00 2001
From: jaggarnaut <julian.aggarwal@dataport.de>
Date: Wed, 27 Nov 2024 10:22:38 +0100
Subject: [PATCH 06/10] added condition for wrapping container

---
 src/views/admin/PersonDetailsView.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/views/admin/PersonDetailsView.vue b/src/views/admin/PersonDetailsView.vue
index 60fc961d5..815fad6d9 100644
--- a/src/views/admin/PersonDetailsView.vue
+++ b/src/views/admin/PersonDetailsView.vue
@@ -1316,7 +1316,10 @@
       :padded="true"
       :showCloseText="true"
     >
-      <v-container class="px-3 px-sm-16">
+      <v-container
+        v-if="!!personStore.errorCode || !!personenkontextStore.errorCode"
+        class="px-3 px-sm-16"
+      >
         <v-container class="px-lg-16">
           <!-- Error Message Display if the personStore throws any kind of error (Not being able to load the person) -->
           <SpshAlert

From 0cee417df54478a4c0bfd1ceddb7c876774910a0 Mon Sep 17 00:00:00 2001
From: jaggarnaut <julian.aggarwal@dataport.de>
Date: Thu, 28 Nov 2024 11:56:18 +0100
Subject: [PATCH 07/10] removed metadata reset to be able to trigger unsaved
 changes dialog

---
 src/views/admin/PersonDetailsView.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/views/admin/PersonDetailsView.vue b/src/views/admin/PersonDetailsView.vue
index 815fad6d9..55a118197 100644
--- a/src/views/admin/PersonDetailsView.vue
+++ b/src/views/admin/PersonDetailsView.vue
@@ -1125,7 +1125,6 @@
       }
       changePersonMetadataSuccessMessage.value = t('admin.person.personalInfoSuccessDialogMessageWithUsername');
       changePersonMetadataSuccessVisible.value = !personStore.errorCode;
-      resetFormChangePersonMetadata();
     });
 
   // Checks for dirtiness depending on the active form
@@ -1309,7 +1308,7 @@
       {{ $t('admin.headline') }}
     </h1>
     <LayoutCard
-      :closable="true"
+      :closable="!personStore.errorCode && !personenkontextStore.errorCode"
       data-testid="person-details-card"
       :header="$t('admin.person.edit')"
       @onCloseClicked="navigateToPersonTable"

From 602f60ab1e8abf2b0cda99de3fd48652cdc9d274 Mon Sep 17 00:00:00 2001
From: jaggarnaut <julian.aggarwal@dataport.de>
Date: Thu, 28 Nov 2024 12:25:11 +0100
Subject: [PATCH 08/10] fixed error behaviour for klasse edit

---
 src/locales/de-DE.json                |  1 +
 src/views/admin/KlasseDetailsView.vue | 17 +++++++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/locales/de-DE.json b/src/locales/de-DE.json
index b5e39c6c3..12495eb6f 100644
--- a/src/locales/de-DE.json
+++ b/src/locales/de-DE.json
@@ -74,6 +74,7 @@
       "addNew": "Neue Klasse hinzufügen",
       "assignKlasse": "Klasse zuordnen",
       "backToCreateKlasse": "Zurück zur Klassenanlage",
+      "backToEditKlasse": "Zurück zur Klassenbearbeitung",
       "create": "Klasse anlegen",
       "createAnother": "Weitere Klasse anlegen",
       "createNew": "Neue Klasse anlegen",
diff --git a/src/views/admin/KlasseDetailsView.vue b/src/views/admin/KlasseDetailsView.vue
index fe4a78856..cbdaa745a 100644
--- a/src/views/admin/KlasseDetailsView.vue
+++ b/src/views/admin/KlasseDetailsView.vue
@@ -137,11 +137,15 @@
   }
 
   const alertButtonText: ComputedRef<string> = computed(() => {
-    return organisationStore.errorCode === 'NEWER_VERSION_ORGANISATION' ? t('refreshData') : t('nav.backToList');
+    return organisationStore.errorCode === 'NEWER_VERSION_ORGANISATION'
+      ? t('refreshData')
+      : isEditActive.value
+        ? t('admin.klasse.backToEditKlasse')
+        : t('nav.backToList');
   });
 
   const alertButtonAction: ComputedRef<() => void> = computed(() => {
-    return organisationStore.errorCode === 'NEWER_VERSION_ORGANISATION'
+    return organisationStore.errorCode === 'NEWER_VERSION_ORGANISATION' || isEditActive.value
       ? (): void => router.go(0)
       : navigateToKlasseManagement;
   });
@@ -190,7 +194,7 @@
       {{ $t('admin.headline') }}
     </h1>
     <LayoutCard
-      :closable="true"
+      :closable="!organisationStore.errorCode"
       data-testid="klasse-details-card"
       :header="$t('admin.klasse.edit')"
       @onCloseClicked="navigateToKlasseManagement"
@@ -201,6 +205,7 @@
         <v-container>
           <div v-if="organisationStore.currentOrganisation">
             <KlasseForm
+              :errorCode="organisationStore.errorCode"
               :isEditActive="isEditActive"
               :readonly="true"
               :selectedSchuleProps="selectedSchuleProps"
@@ -236,13 +241,13 @@
               />
             </KlasseForm>
             <v-divider
-              v-if="isEditActive"
+              v-if="isEditActive && !organisationStore.errorCode"
               class="border-opacity-100 rounded"
               color="#E5EAEF"
               thickness="5px"
             ></v-divider>
             <div
-              v-if="!isEditActive"
+              v-if="!isEditActive && !organisationStore.errorCode"
               class="d-flex justify-sm-end"
             >
               <v-row class="pt-3 px-2 justify-end">
@@ -281,7 +286,7 @@
               </v-row>
             </div>
             <div
-              v-else
+              v-else-if="!organisationStore.errorCode"
               class="d-flex justify-end"
             >
               <v-row class="pt-3 px-2 save-cancel-row justify-end">

From 9c0075ef13cea16342dc4df48d5cc8b87596d306 Mon Sep 17 00:00:00 2001
From: jaggarnaut <julian.aggarwal@dataport.de>
Date: Thu, 28 Nov 2024 12:31:52 +0100
Subject: [PATCH 09/10] reset error code after confirming unsaved changes

---
 src/views/admin/KlasseCreationView.vue       | 1 +
 src/views/admin/KlasseDetailsView.vue        | 1 +
 src/views/admin/PersonCreationView.vue       | 2 ++
 src/views/admin/PersonImportView.vue         | 1 +
 src/views/admin/SchuleCreationView.vue       | 1 +
 src/views/admin/rollen/RolleCreationView.vue | 1 +
 src/views/admin/rollen/RolleDetailsView.vue  | 1 +
 7 files changed, 8 insertions(+)

diff --git a/src/views/admin/KlasseCreationView.vue b/src/views/admin/KlasseCreationView.vue
index c27f78458..c11edfb9c 100644
--- a/src/views/admin/KlasseCreationView.vue
+++ b/src/views/admin/KlasseCreationView.vue
@@ -130,6 +130,7 @@
 
   function handleConfirmUnsavedChanges(): void {
     blockedNext();
+    organisationStore.errorCode = '';
   }
 
   const onSubmit: (e?: Event | undefined) => Promise<Promise<void> | undefined> = handleSubmit(async () => {
diff --git a/src/views/admin/KlasseDetailsView.vue b/src/views/admin/KlasseDetailsView.vue
index cbdaa745a..8e1d27051 100644
--- a/src/views/admin/KlasseDetailsView.vue
+++ b/src/views/admin/KlasseDetailsView.vue
@@ -83,6 +83,7 @@
     isEditActive.value = false;
     showUnsavedChangesDialog.value = false;
     blockedNext();
+    organisationStore.errorCode = '';
   }
 
   function activateEditing(): void {
diff --git a/src/views/admin/PersonCreationView.vue b/src/views/admin/PersonCreationView.vue
index f8cf61c2e..225b13d84 100644
--- a/src/views/admin/PersonCreationView.vue
+++ b/src/views/admin/PersonCreationView.vue
@@ -371,6 +371,8 @@
 
   function handleConfirmUnsavedChanges(): void {
     blockedNext();
+    personStore.errorCode = '';
+    personenkontextStore.errorCode = '';
   }
 
   function preventNavigation(event: BeforeUnloadEvent): void {
diff --git a/src/views/admin/PersonImportView.vue b/src/views/admin/PersonImportView.vue
index 7fa80ee4c..236fb334f 100644
--- a/src/views/admin/PersonImportView.vue
+++ b/src/views/admin/PersonImportView.vue
@@ -235,6 +235,7 @@
 
   function handleConfirmUnsavedChanges(): void {
     blockedNext();
+    importStore.errorCode = '';
   }
 
   function preventNavigation(event: BeforeUnloadEvent): void {
diff --git a/src/views/admin/SchuleCreationView.vue b/src/views/admin/SchuleCreationView.vue
index 2cb786b0a..c44b626c8 100644
--- a/src/views/admin/SchuleCreationView.vue
+++ b/src/views/admin/SchuleCreationView.vue
@@ -134,6 +134,7 @@
 
   function handleConfirmUnsavedChanges(): void {
     blockedNext();
+    organisationStore.errorCode = '';
   }
 
   async function navigateToSchuleManagement(): Promise<void> {
diff --git a/src/views/admin/rollen/RolleCreationView.vue b/src/views/admin/rollen/RolleCreationView.vue
index dce8cd235..0eaa53331 100644
--- a/src/views/admin/rollen/RolleCreationView.vue
+++ b/src/views/admin/rollen/RolleCreationView.vue
@@ -98,6 +98,7 @@
 
   function handleConfirmUnsavedChanges(): void {
     blockedNext();
+    rolleStore.errorCode = '';
   }
 
   async function navigateBackToRolleForm(): Promise<void> {
diff --git a/src/views/admin/rollen/RolleDetailsView.vue b/src/views/admin/rollen/RolleDetailsView.vue
index 1e99681cc..92d3d0723 100644
--- a/src/views/admin/rollen/RolleDetailsView.vue
+++ b/src/views/admin/rollen/RolleDetailsView.vue
@@ -142,6 +142,7 @@
     isEditActive.value = false;
     showUnsavedChangesDialog.value = false;
     blockedNext();
+    rolleStore.errorCode = '';
   }
 
   const onSubmit: (e?: Event | undefined) => Promise<Promise<void> | undefined> = formContext.handleSubmit(async () => {

From 473c1eb9c22d66f53751298e17ce93a0956115d9 Mon Sep 17 00:00:00 2001
From: jaggarnaut <julian.aggarwal@dataport.de>
Date: Thu, 28 Nov 2024 13:53:48 +0100
Subject: [PATCH 10/10] use condition to flush form

---
 src/views/admin/PersonDetailsView.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/views/admin/PersonDetailsView.vue b/src/views/admin/PersonDetailsView.vue
index 2506f946a..cea5e9edb 100644
--- a/src/views/admin/PersonDetailsView.vue
+++ b/src/views/admin/PersonDetailsView.vue
@@ -1125,6 +1125,9 @@
       }
       changePersonMetadataSuccessMessage.value = t('admin.person.personalInfoSuccessDialogMessageWithUsername');
       changePersonMetadataSuccessVisible.value = !personStore.errorCode;
+      if (!personStore.errorCode) {
+        resetFormChangePersonMetadata();
+      }
     });
 
   // Checks for dirtiness depending on the active form