Redone Update Modal

pages/settings/banking/index.vue

@@ -15,9 +15,14 @@ const reqData = ref({})
 
 const bankaccounts = ref([])
 
+const showReqData = ref(false)
+
 const setupPage = async () => {
   if(route.query.ref) {
     reqData.value = await useFunctions().useBankingListRequisitions(route.query.ref)
+    if(reqData.value.accounts.length > 0){
+      showReqData.value = true
+    }
   }
 
   bankaccounts.value = await useEntities("bankaccounts").select()
@@ -71,6 +76,7 @@ const updateAccount = async (account) => {
       toast.add({title: "Es gab einen Fehler bei aktualisieren des Accounts", color:"rose"})
     } else {
       toast.add({title: "Account erfolgreich aktualisiert"})
+      reqData.value = null
       setupPage()
     }
 }
@@ -137,25 +143,34 @@ setupPage()
     </template>
   </UDashboardNavbar>
 
-  <div
+  <UModal v-model="showReqData">
-      v-for="account in reqData.accounts"
+    <UCard>
-      class="p-2 m-3 flex justify-between"
+      <template #header>
-  >
+        Verfügbare Bankkonten
-    {{account.iban}} - {{account.owner_name}}
+      </template>
+      <div
+          v-for="account in reqData.accounts"
+          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>
+  </UModal>
+
 
-    <UButton
-      @click="addAccount(account)"
-      v-if="!bankaccounts.find(i => i.iban === account.iban)"
-    >
-      + Konto
-    </UButton>
-    <UButton
-      @click="updateAccount(account)"
-      v-else
-    >
-      Aktualisieren
-    </UButton>
-  </div>
 
 <!--  <UButton @click="setupPage">Setup</UButton>
   <div v-if="route.query.reqId">