Vertragstypen für Änderungsanfragen pflegen

frontend/pages/customer-portal.vue

@@ -165,9 +165,27 @@ function getContactLabel(contact: any) {
   return contact.fullName || [contact.firstName, contact.lastName].filter(Boolean).join(" ") || contact.email || contact.id || "-"
 }
 
+function getAllowedContracttypeIds(contract: any) {
+  if (!Array.isArray(contract?.allowedContracttypes)) return []
+  return contract.allowedContracttypes.map((id: any) => Number(id)).filter((id: number) => Number.isInteger(id))
+}
+
+function getAllowedContracttypes(contract: any) {
+  const allowedIds = getAllowedContracttypeIds(contract)
+  return contracttypes.value.filter((item: any) => allowedIds.includes(Number(item.id)))
+}
+
+const selectedContractAllowedContracttypes = computed(() => {
+  if (!selectedContract.value) return []
+  return getAllowedContracttypes(selectedContract.value)
+})
+
 function openContractChangeRequest(contract: any) {
+  const allowedTypes = getAllowedContracttypes(contract)
   selectedContract.value = contract
-  contractChangeForm.contracttype = contract.contracttype?.id || null
+  contractChangeForm.contracttype = allowedTypes.some((item: any) => item.id === contract.contracttype?.id)
+      ? contract.contracttype.id
+      : allowedTypes[0]?.id || null
   contractChangeForm.message = ""
   contractChangeModalOpen.value = true
 }
@@ -589,6 +607,7 @@ onMounted(async () => {
                         variant="soft"
                         icon="i-heroicons-pencil-square"
                         class="justify-center"
+                        :disabled="getAllowedContracttypes(contract).length === 0"
                         @click="openContractChangeRequest(contract)"
                       >
                         Änderung anfragen
@@ -611,6 +630,22 @@ onMounted(async () => {
                           {{ contract.contracttype?.name || "Nicht hinterlegt" }}
                         </p>
                       </div>
+                      <div class="rounded-xl bg-white p-3">
+                        <p class="text-xs uppercase tracking-wide text-neutral-400">Änderung möglich zu</p>
+                        <div v-if="getAllowedContracttypes(contract).length" class="mt-2 flex flex-wrap gap-2">
+                          <UBadge
+                            v-for="type in getAllowedContracttypes(contract)"
+                            :key="type.id"
+                            color="primary"
+                            variant="soft"
+                          >
+                            {{ type.name }}
+                          </UBadge>
+                        </div>
+                        <p v-else class="mt-1 text-sm font-medium text-neutral-900">
+                          Keine Änderungstypen freigegeben
+                        </p>
+                      </div>
                       <div class="rounded-xl bg-white p-3">
                         <p class="text-xs uppercase tracking-wide text-neutral-400">Ansprechpartner</p>
                         <p class="mt-1 text-sm font-medium text-neutral-900">
@@ -751,12 +786,15 @@ onMounted(async () => {
               <label class="mb-1 block text-sm font-medium text-neutral-700">Gewünschter Vertragstyp</label>
               <USelectMenu
                 v-model="contractChangeForm.contracttype"
-                :items="contracttypes"
+                :items="selectedContractAllowedContracttypes"
                 value-key="id"
                 label-key="name"
                 class="w-full"
                 placeholder="Vertragstyp auswählen"
               />
+              <p v-if="!selectedContractAllowedContracttypes.length" class="mt-2 text-sm text-neutral-500">
+                Für diesen Vertrag sind aktuell keine Änderungstypen freigegeben.
+              </p>
             </div>
             <div>
               <label class="mb-1 block text-sm font-medium text-neutral-700">Nachricht optional</label>