2. Zwischenstand

frontend/pages/incomingInvoices/[mode]/[id].vue

@@ -330,7 +330,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
             </template>
 
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <UFormGroup label="Lieferant / Partner" class="md:col-span-2">
+              <UFormField label="Lieferant / Partner" class="md:col-span-2">
                 <div class="flex gap-2">
                   <USelectMenu
                       class="w-full"
@@ -365,37 +365,37 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                       @return-data="(data) => itemInfo.vendor = data.id"
                   />
                 </div>
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Rechnungsnummer">
+              <UFormField label="Rechnungsnummer">
                 <UInput v-model="itemInfo.reference" icon="i-heroicons-hashtag" :disabled="mode === 'show'" />
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Zahlart">
+              <UFormField label="Zahlart">
                 <USelectMenu v-model="itemInfo.paymentType" :options="['Überweisung', 'Lastschrift', 'Kreditkarte', 'PayPal', 'Bar', 'Sonstiges']" :disabled="mode === 'show'" />
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Rechnungsdatum">
+              <UFormField label="Rechnungsdatum">
                 <UPopover :popper="{ placement: 'bottom-start' }">
                   <UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" />
                   <template #panel="{ close }">
                     <LazyDatePicker v-model="itemInfo.date" @close="() => { if(!itemInfo.dueDate) itemInfo.dueDate = itemInfo.date; close() }" />
                   </template>
                 </UPopover>
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Fälligkeitsdatum">
+              <UFormField label="Fälligkeitsdatum">
                 <UPopover :popper="{ placement: 'bottom-start' }">
                   <UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" />
                   <template #panel="{ close }">
                     <LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
                   </template>
                 </UPopover>
-              </UFormGroup>
+              </UFormField>
 
-              <UFormGroup label="Beschreibung / Notiz" class="md:col-span-2">
+              <UFormField label="Beschreibung / Notiz" class="md:col-span-2">
                 <UTextarea v-model="itemInfo.description" :rows="2" autoresize :disabled="mode === 'show'" />
-              </UFormGroup>
+              </UFormField>
             </div>
           </UCard>
 
@@ -404,7 +404,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
               <h3 class="font-semibold text-lg">Positionen</h3>
               <div class="flex items-center gap-2 text-sm">
                 <span :class="{'font-bold': !useNetMode, 'opacity-50': useNetMode}">Brutto</span>
-                <UToggle v-model="useNetMode" color="primary" :disabled="mode === 'show'" />
+                <USwitch v-model="useNetMode" color="primary" :disabled="mode === 'show'" />
                 <span :class="{'font-bold': useNetMode, 'opacity-50': !useNetMode}">Netto Eingabe</span>
               </div>
             </div>
@@ -428,7 +428,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
 
               <div class="grid grid-cols-12 gap-3">
                 <div class="col-span-12 md:col-span-6">
-                  <UFormGroup label="Konto / Kategorie">
+                  <UFormField label="Konto / Kategorie">
                     <USelectMenu
                         v-model="item.account"
                         :options="accounts"
@@ -446,11 +446,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                         {{ accounts.find(a => a.id === item.account)?.label || 'Auswählen' }}
                       </template>
                     </USelectMenu>
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-12 md:col-span-6">
-                  <UFormGroup label="Kostenstelle">
+                  <UFormField label="Kostenstelle">
                     <USelectMenu
                         v-model="item.costCentre"
                         :options="costcentres"
@@ -464,11 +464,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                         {{ costcentres.find(c => c.id === item.costCentre)?.name || 'Keine' }}
                       </template>
                     </USelectMenu>
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-12 md:col-span-3">
-                  <UFormGroup label="Betrag (Netto)">
+                  <UFormField label="Betrag (Netto)">
                     <UInput
                         type="number"
                         step="0.01"
@@ -478,11 +478,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                     >
                       <template #trailing>€</template>
                     </UInput>
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-12 md:col-span-3">
-                  <UFormGroup label="Betrag (Brutto)">
+                  <UFormField label="Betrag (Brutto)">
                     <UInput
                         type="number"
                         step="0.01"
@@ -492,11 +492,11 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                     >
                       <template #trailing>€</template>
                     </UInput>
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-6 md:col-span-3">
-                  <UFormGroup label="Steuerschlüssel">
+                  <UFormField label="Steuerschlüssel">
                     <USelectMenu
                         v-model="item.taxType"
                         :options="taxOptions"
@@ -505,15 +505,15 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                         :disabled="mode === 'show'"
                         @change="recalculateItem(item, 'taxType')"
                     />
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-6 md:col-span-3">
-                  <UFormGroup label="Steuerbetrag" help="Automatisch berechnet">
+                  <UFormField label="Steuerbetrag" help="Automatisch berechnet">
                     <UInput :model-value="item.amountTax" disabled color="gray" >
                       <template #trailing>€</template>
                     </UInput>
-                  </UFormGroup>
+                  </UFormField>
                 </div>
 
                 <div class="col-span-12 flex justify-end gap-2">

frontend/pages/incomingInvoices/index.vue

@@ -203,15 +203,15 @@ const selectIncomingInvoice = (invoice) => {
       <USelectMenu
           v-model="selectedColumns"
           icon="i-heroicons-adjustments-horizontal-solid"
-          :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
+          :items="dataType.templateColumns.filter(i => !i.disabledInTable)"
           multiple
           class="hidden lg:block"
           by="key"
           :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
-          :ui-menu="{ width: 'min-w-max' }"
+          :content="{ width: 'min-w-max' }"
           @change="tempStore.modifyColumns(type,selectedColumns)"
       >
-        <template #label>
+        <template #default>
           Spalten
         </template>
       </USelectMenu>
@@ -220,11 +220,11 @@ const selectIncomingInvoice = (invoice) => {
           icon="i-heroicons-adjustments-horizontal-solid"
           multiple
           v-model="selectedFilters"
-          :options="selectableFilters"
+          :items="selectableFilters"
           :color="selectedFilters.length > 0 ? 'primary' : 'white'"
-          :ui-menu="{ width: 'min-w-max' }"
+          :content="{ width: 'min-w-max' }"
       >
-        <template #label>
+        <template #default>
           Filter
         </template>
       </USelectMenu>
@@ -244,42 +244,42 @@ const selectIncomingInvoice = (invoice) => {
         {{filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' ).length}}
       </UBadge>
     </template>
-    <template #item="{item}">
+    <template #content="{item}">
       <div style="height: 80dvh; overflow-y: scroll">
         <UTable
-            v-model:sort="sort"
+            v-model:sorting="sort"
             sort-mode="manual"
-            @update:sort="setupPage"
+            @update:sorting="setupPage"
             :data="filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' )"
             :columns="normalizeTableColumns(columns)"
             class="w-full"
             :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-            @select="(i) => selectIncomingInvoice(i) "
-            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+            :on-select="(i) => selectIncomingInvoice(i) "
+            :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
         >
-          <template #reference-data="{row}">
-            <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.reference}}</span>
-            <span v-else>{{row.reference}}</span>
+          <template #reference-cell="{row}">
+            <span v-if="row.original === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.original.reference}}</span>
+            <span v-else>{{row.original.reference}}</span>
           </template>
-          <template #state-data="{row}">
-            <span v-if="row.state === 'Vorbereitet'" class="text-cyan-500">{{row.state}}</span>
-            <span v-else-if="row.state === 'Entwurf'" class="text-red-500">{{row.state}}</span>
-            <span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{row.state}}</span>
+          <template #state-cell="{row}">
+            <span v-if="row.original.state === 'Vorbereitet'" class="text-cyan-500">{{row.original.state}}</span>
+            <span v-else-if="row.original.state === 'Entwurf'" class="text-red-500">{{row.original.state}}</span>
+            <span v-else-if="row.original.state === 'Gebucht'" class="text-primary-500">{{row.original.state}}</span>
           </template>
-          <template #date-data="{row}">
-            {{dayjs(row.date).format("DD.MM.YYYY")}}
+          <template #date-cell="{row}">
+            {{dayjs(row.original.date).format("DD.MM.YYYY")}}
           </template>
-          <template #vendor-data="{row}">
-            {{row.vendor ? row.vendor.name : ""}}
+          <template #vendor-cell="{row}">
+            {{row.original.vendor ? row.original.vendor.name : ""}}
           </template>
-          <template #amount-data="{row}">
-            {{displayCurrency(sum.getIncomingInvoiceSum(row))}}
+          <template #amount-cell="{row}">
+            {{displayCurrency(sum.getIncomingInvoiceSum(row.original))}}
           </template>
-          <template #dueDate-data="{row}">
-            <span v-if="row.dueDate">{{dayjs(row.dueDate).format("DD.MM.YYYY")}}</span>
+          <template #dueDate-cell="{row}">
+            <span v-if="row.original.dueDate">{{dayjs(row.original.dueDate).format("DD.MM.YYYY")}}</span>
           </template>
-          <template #paid-data="{row}">
-            <span v-if="isPaid(row)" class="text-primary-500">Bezahlt</span>
+          <template #paid-cell="{row}">
+            <span v-if="isPaid(row.original)" class="text-primary-500">Bezahlt</span>
             <span v-else class="text-rose-600">Offen</span>
           </template>
         </UTable>