2. Zwischenstand

frontend/pages/settings/banking/index.vue

@@ -101,16 +101,17 @@ setupPage()
         + Bankverbindung
       </UButton>
       <USlideover
-          v-model="showAddBankRequisition"
+          v-model:open="showAddBankRequisition"
       >
-        <UCard
-            class="h-full"
-        >
-          <template #header>
-            <p>Bankverbindung hinzufügen</p>
-          </template>
+        <template #body>
+          <UCard
+              class="h-full"
+          >
+            <template #header>
+              <p>Bankverbindung hinzufügen</p>
+            </template>
 
-          <UFormGroup
+          <UFormField
               label="BIC:"
               class="flex-auto"
           >
@@ -127,7 +128,7 @@ setupPage()
               </UButton>
             </InputGroup>
 
-          </UFormGroup>
+          </UFormField>
           <UAlert
               v-if="showAlert && bankData.id && bankData.countries.includes('DE')"
               title="Bank gefunden"
@@ -137,46 +138,49 @@ setupPage()
               class="mt-3"
               :actions="[{ variant: 'solid', color: 'primary', label: 'Verbinden',click: generateLink }]"
           />
-          <UAlert
-              v-else-if="showAlert && !bankData.id"
-              title="Bank nicht gefunden"
-              icon="i-heroicons-x-circle"
-              color="error"
-              variant="outline"
-              class="mt-3"
-          />
+            <UAlert
+                v-else-if="showAlert && !bankData.id"
+                title="Bank nicht gefunden"
+                icon="i-heroicons-x-circle"
+                color="error"
+                variant="outline"
+                class="mt-3"
+            />
 
-        </UCard>
+          </UCard>
+        </template>
       </USlideover>
     </template>
   </UDashboardNavbar>
 
   <UModal v-model:open="showReqData">
-    <UCard>
-      <template #header>
-        Verfügbare Bankkonten
-      </template>
-      <div
-          v-for="account in reqData.accounts"
-          :key="account.id"
-          class="p-2 m-3 flex justify-between"
-      >
-        {{account.iban}} - {{account.owner_name}}
+    <template #content>
+      <UCard>
+        <template #header>
+          Verfügbare Bankkonten
+        </template>
+        <div
+            v-for="account in reqData.accounts"
+            :key="account.id"
+            class="p-2 m-3 flex justify-between"
+        >
+          {{account.iban}} - {{account.owner_name}}
 
-        <UButton
-            @click="addAccount(account)"
-            v-if="!bankaccounts.find(i => i.iban === account.iban)"
-        >
-          Hinzufügen
-        </UButton>
-        <UButton
-            @click="updateAccount(account)"
-            v-else
-        >
-          Aktualisieren
-        </UButton>
-      </div>
-    </UCard>
+          <UButton
+              @click="addAccount(account)"
+              v-if="!bankaccounts.find(i => i.iban === account.iban)"
+          >
+            Hinzufügen
+          </UButton>
+          <UButton
+              @click="updateAccount(account)"
+              v-else
+          >
+            Aktualisieren
+          </UButton>
+        </div>
+      </UCard>
+    </template>
   </UModal>
 
   <UTable
@@ -200,21 +204,21 @@ setupPage()
         },
       ])"
   >
-    <template #expired-data="{row}">
-      <span v-if="row.expired" class="text-rose-600">Ausgelaufen</span>
+    <template #expired-cell="{ row }">
+      <span v-if="row.original.expired" class="text-error-600">Ausgelaufen</span>
       <span v-else class="text-primary">Aktiv</span>
       <UButton
-          v-if="row.expired"
+          v-if="row.original.expired"
           variant="outline"
           class="ml-2"
-          @click="generateLink(row.bankId)"
+          @click="generateLink(row.original.bankId)"
       >Aktualisieren</UButton>
     </template>
-    <template #balance-data="{row}">
-      {{row.balance ? row.balance.toFixed(2).replace(".",",") + ' €' : '-'}}
+    <template #balance-cell="{ row }">
+      {{ row.original.balance ? row.original.balance.toFixed(2).replace(".",",") + ' €' : '-' }}
     </template>
-    <template #iban-data="{row}">
-      {{row.iban.match(/.{1,5}/g).join(" ")}}
+    <template #iban-cell="{ row }">
+      {{ row.original.iban.match(/.{1,5}/g).join(" ") }}
     </template>
   </UTable>