fix #141

fix #142

frontend/pages/banking/index.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { parseDate } from "@internationalized/date"
+
 const {$api, $dayjs} = useNuxtApp()
 const toast = useToast()
 
@@ -34,6 +36,12 @@ const periodOptions = [
   {label: 'Benutzerdefiniert', key: 'custom'}
 ]
 
+const bankingFilterItems = [
+  { label: 'Nur offene anzeigen', value: 'Nur offene anzeigen' },
+  { label: 'Nur positive anzeigen', value: 'Nur positive anzeigen' },
+  { label: 'Nur negative anzeigen', value: 'Nur negative anzeigen' }
+]
+
 // Initialisierungswerte
 const selectedPeriod = ref(periodOptions[0])
 const dateRange = ref({
@@ -41,6 +49,19 @@ const dateRange = ref({
   end: $dayjs().endOf('month').format('YYYY-MM-DD')
 })
 
+const getCalendarValue = (value) => {
+  if (!value) return undefined
+
+  const formatted = $dayjs(value).format('YYYY-MM-DD')
+  return formatted ? parseDate(formatted) : undefined
+}
+
+const setDateRangeFromCalendar = (field, value) => {
+  dateRange.value[field] = value ? value.toString() : ""
+}
+
+const getDateButtonLabel = (value) => value ? $dayjs(value).format('DD.MM.YYYY') : 'Kein Datum'
+
 const setDateRangeFieldToToday = (field) => {
   dateRange.value[field] = $dayjs().format('YYYY-MM-DD')
 }
@@ -496,30 +517,77 @@ onMounted(() => {
     <template #left>
       <div class="flex items-center gap-3">
         <USelectMenu
-            :options="bankaccounts"
+            :items="bankaccounts"
             v-model="filterAccount"
-            option-attribute="iban"
+            value-key="id"
+            label-key="iban"
             multiple
             by="id"
             placeholder="Konten"
             class="w-48"
-        />
+        >
+          <template #default>
+            {{ filterAccount.length > 0 ? `${filterAccount.length} Kont${filterAccount.length > 1 ? 'en' : 'o'}` : 'Konten' }}
+          </template>
+        </USelectMenu>
         <USeparator orientation="vertical" class="h-6"/>
         <div class="flex items-center gap-2">
           <USelectMenu
               v-model="selectedPeriod"
-              :options="periodOptions"
+              :items="periodOptions"
+              value-key="key"
+              label-key="label"
               class="w-44"
               icon="i-heroicons-calendar-days"
-          />
-          <div v-if="selectedPeriod.key === 'custom'" class="flex items-center gap-1">
+          >
+            <template #default>
+              {{ selectedPeriod?.label || 'Zeitraum' }}
+            </template>
+          </USelectMenu>
+          <div v-if="selectedPeriod === 'custom'" class="flex items-center gap-1">
             <div class="flex items-center gap-1">
-              <UInput type="date" v-model="dateRange.start" size="xs" class="w-32"/>
-              <UButton size="2xs" color="gray" variant="soft" label="Heute" @click="setDateRangeFieldToToday('start')" />
+              <UPopover class="w-full" :content="{ side: 'bottom', align: 'start' }">
+                <UButton
+                    block
+                    color="neutral"
+                    variant="outline"
+                    class="w-36 justify-start"
+                    icon="i-heroicons-calendar"
+                    :label="getDateButtonLabel(dateRange.start)"
+                />
+
+                <template #content>
+                  <div class="p-2">
+                    <UCalendar
+                      :model-value="getCalendarValue(dateRange.start)"
+                      @update:model-value="setDateRangeFromCalendar('start', $event)"
+                      :week-starts-on="1"
+                    />
+                  </div>
+                </template>
+              </UPopover>
             </div>
             <div class="flex items-center gap-1">
-              <UInput type="date" v-model="dateRange.end" size="xs" class="w-32"/>
-              <UButton size="2xs" color="gray" variant="soft" label="Heute" @click="setDateRangeFieldToToday('end')" />
+              <UPopover class="w-full" :content="{ side: 'bottom', align: 'start' }">
+                <UButton
+                    block
+                    color="neutral"
+                    variant="outline"
+                    class="w-36 justify-start"
+                    icon="i-heroicons-calendar"
+                    :label="getDateButtonLabel(dateRange.end)"
+                />
+
+                <template #content>
+                  <div class="p-2">
+                    <UCalendar
+                      :model-value="getCalendarValue(dateRange.end)"
+                      @update:model-value="setDateRangeFromCalendar('end', $event)"
+                      :week-starts-on="1"
+                    />
+                  </div>
+                </template>
+              </UPopover>
             </div>
           </div>
           <div v-else class="text-xs text-gray-400 hidden sm:block italic">
@@ -534,9 +602,15 @@ onMounted(() => {
           icon="i-heroicons-adjustments-horizontal"
           multiple
           v-model="selectedFilters"
-          :options="['Nur offene anzeigen','Nur positive anzeigen','Nur negative anzeigen']"
-          @change="tempStore.modifyFilter('banking','main',selectedFilters)"
-      />
+          :items="bankingFilterItems"
+          value-key="value"
+          label-key="label"
+          @update:model-value="tempStore.modifyFilter('banking','main',selectedFilters)"
+      >
+        <template #default>
+          Filter
+        </template>
+      </USelectMenu>
     </template>
   </UDashboardToolbar>
 

frontend/pages/banking/statements/[mode]/[[id]].vue

@@ -687,9 +687,9 @@ setup()
               </div>
 
               <div v-if="!topEntitySuggestion" class="mb-3">
-                <div class="text-xs font-bold uppercase tracking-wide text-primary-700 dark:text-primary-300">Automatische Belegvorschlaege</div>
+                <div class="text-xs font-bold uppercase tracking-wide text-primary-700 dark:text-primary-300">Automatische Belegvorschläge</div>
                 <div class="mt-1 text-xs text-gray-600 dark:text-gray-300">
-                  Kein eindeutiger Kunde oder Lieferant erkannt. Vorschlaege basieren auf Betrag und Verwendungszweck.
+                  Kein eindeutiger Kunde oder Lieferant erkannt. Vorschläge basieren auf Betrag und Verwendungszweck.
                 </div>
               </div>