Added Schnellauswahl für die Exporte

frontend/pages/export/index.vue

@@ -1,5 +1,42 @@
 <script setup lang="ts">
 import dayjs from "dayjs"
+
+// --- Helper für Schnellauswahl ---
+
+// Setzt ein spezifisches Quartal (Q1-Q4), optional mit Jahresangabe
+const setQuarter = (quarter: number, year: number = dayjs().year()) => {
+  const startMonth = (quarter - 1) * 3 // Q1=0 (Jan), Q2=3 (Apr), etc.
+
+  // .toDate() ist wichtig für den DatePicker
+  createExportData.value.start_date = dayjs().year(year).month(startMonth).startOf('month').toDate()
+  createExportData.value.end_date = dayjs().year(year).month(startMonth + 2).endOf('month').toDate()
+}
+
+// Berechnet automatisch das vorherige Quartal (inkl. Jahreswechsel, falls wir in Q1 sind)
+const setLastQuarter = () => {
+  const currentMonth = dayjs().month() // 0 bis 11
+  const currentQuarter = Math.floor(currentMonth / 3) + 1 // 1 bis 4
+
+  if (currentQuarter === 1) {
+    // Wenn wir in Q1 sind, ist das letzte Quartal Q4 des Vorjahres
+    setQuarter(4, dayjs().year() - 1)
+  } else {
+    // Sonst einfach das vorherige Quartal im aktuellen Jahr
+    setQuarter(currentQuarter - 1)
+  }
+}
+
+const setMonthPreset = (type: 'current' | 'last') => {
+  let date = dayjs()
+  if (type === 'last') {
+    date = date.subtract(1, 'month')
+  }
+
+  createExportData.value.start_date = date.startOf('month').toDate()
+  createExportData.value.end_date = date.endOf('month').toDate()
+}
+// ---------------------------------
+
 const exports = ref([])
 
 const auth = useAuthStore()
@@ -46,8 +83,6 @@ const createExport = async () => {
   }
 
 }
-
-
 </script>
 
 <template>
@@ -63,28 +98,16 @@ const createExport = async () => {
       >+ SEPA</UButton>
     </template>
   </UDashboardNavbar>
+
   <UTable
       :rows="exports"
       :columns="[
-        {
+        { key: 'created_at', label: 'Erstellt am' },
-          key: 'created_at',
+        { key: 'start_date', label: 'Start' },
-          label: 'Erstellt am',
+        { key: 'end_date', label: 'Ende' },
-        },{
+        { key: 'valid_until', label: 'Gültig bis' },
-          key: 'start_date',
+        { key: 'type', label: 'Typ' },
-          label: 'Start',
+        { key: 'download', label: 'Download' },
-        },{
-          key: 'end_date',
-          label: 'Ende',
-        },{
-          key: 'valid_until',
-          label: 'Gültig bis',
-        },{
-          key: 'type',
-          label: 'Typ',
-        },{
-          key: 'download',
-          label: 'Download',
-        },
     ]"
   >
     <template #created_at-data="{row}">
@@ -100,11 +123,7 @@ const createExport = async () => {
       {{dayjs(row.valid_until).format("DD.MM.YYYY HH:mm")}}
     </template>
     <template #download-data="{row}">
-      <UButton
+      <UButton @click="downloadFile(row)">Download</UButton>
-          @click="downloadFile(row)"
-      >
-        Download
-      </UButton>
     </template>
   </UTable>
 
@@ -114,46 +133,78 @@ const createExport = async () => {
         Export erstellen
       </template>
 
-      <UFormGroup
+      <div class="mb-6 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700">
-          label="Start:"
+        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Schnellauswahl</div>
-      >
-        <UPopover :popper="{ placement: 'bottom-start' }">
-          <UButton
-              icon="i-heroicons-calendar-days-20-solid"
-              :label="createExportData.start_date ? dayjs(createExportData.start_date).format('DD.MM.YYYY') : 'Datum auswählen'"
-              variant="outline"
-              class="mx-auto"
-          />
 
-          <template #panel="{ close }">
+        <div class="flex flex-col gap-3">
-            <LazyDatePicker v-model="createExportData.start_date" @close="close" />
+          <div class="flex gap-2 items-center">
-          </template>
+            <span class="text-xs text-gray-400 w-16">Monat:</span>
-        </UPopover>
+            <UButton size="2xs" color="white" variant="solid" @click="setMonthPreset('last')">Letzter</UButton>
-      </UFormGroup>
+            <UButton size="2xs" color="white" variant="solid" @click="setMonthPreset('current')">Aktuell</UButton>
+          </div>
 
-      <UFormGroup
+          <div class="flex gap-2 items-center">
-          label="Ende:"
+            <span class="text-xs text-gray-400 w-16">Quartal:</span>
-      >
-        <UPopover :popper="{ placement: 'bottom-start' }">
-          <UButton
-              icon="i-heroicons-calendar-days-20-solid"
-              :label="createExportData.end_date ? dayjs(createExportData.end_date).format('DD.MM.YYYY') : 'Datum auswählen'"
-              variant="outline"
-              class="mx-auto"
-          />
 
-          <template #panel="{ close }">
+            <UButton
-            <LazyDatePicker v-model="createExportData.end_date" @close="close" />
+                size="2xs"
-          </template>
+                color="white"
-        </UPopover>
+                variant="solid"
-      </UFormGroup>
+                @click="setLastQuarter()"
+                class="mr-2 border-r border-gray-200 dark:border-gray-600 pr-3"
+            >
+              Letztes
+            </UButton>
+
+            <UButton
+                v-for="q in 4"
+                :key="q"
+                size="2xs"
+                color="white"
+                variant="solid"
+                @click="setQuarter(q)"
+            >
+              Q{{ q }}
+            </UButton>
+          </div>
+        </div>
+      </div>
+      <div class="flex gap-4">
+        <UFormGroup label="Start:" class="flex-1">
+          <UPopover :popper="{ placement: 'bottom-start' }">
+            <UButton
+                icon="i-heroicons-calendar-days-20-solid"
+                :label="createExportData.start_date ? dayjs(createExportData.start_date).format('DD.MM.YYYY') : 'Datum auswählen'"
+                variant="outline"
+                class="w-full justify-start"
+            />
+            <template #panel="{ close }">
+              <LazyDatePicker v-model="createExportData.start_date" @close="close" />
+            </template>
+          </UPopover>
+        </UFormGroup>
+
+        <UFormGroup label="Ende:" class="flex-1">
+          <UPopover :popper="{ placement: 'bottom-start' }">
+            <UButton
+                icon="i-heroicons-calendar-days-20-solid"
+                :label="createExportData.end_date ? dayjs(createExportData.end_date).format('DD.MM.YYYY') : 'Datum auswählen'"
+                variant="outline"
+                class="w-full justify-start"
+            />
+            <template #panel="{ close }">
+              <LazyDatePicker v-model="createExportData.end_date" @close="close" />
+            </template>
+          </UPopover>
+        </UFormGroup>
+      </div>
 
       <template #footer>
-        <UButton
+        <div class="flex justify-end">
-            @click="createExport"
+          <UButton @click="createExport">
-        >
+            Erstellen
-          Erstellen
+          </UButton>
-        </UButton>
+        </div>
       </template>
 
     </UCard>
@@ -162,5 +213,4 @@ const createExport = async () => {
 </template>
 
 <style scoped>
-
+</style>
-</style>