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: 'start_date',
-          label: 'Start',
-        },{
-          key: 'end_date',
-          label: 'Ende',
-        },{
-          key: 'valid_until',
-          label: 'Gültig bis',
-        },{
-          key: 'type',
-          label: 'Typ',
-        },{
-          key: 'download',
-          label: 'Download',
-        },
+        { key: 'created_at', label: 'Erstellt am' },
+        { key: 'start_date', label: 'Start' },
+        { 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
-          @click="downloadFile(row)"
-      >
-        Download
-      </UButton>
+      <UButton @click="downloadFile(row)">Download</UButton>
     </template>
   </UTable>
 
@@ -114,46 +133,78 @@ const createExport = async () => {
         Export erstellen
       </template>
 
-      <UFormGroup
-          label="Start:"
+      <div class="mb-6 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700">
+        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Schnellauswahl</div>
+
+        <div class="flex flex-col gap-3">
+          <div class="flex gap-2 items-center">
+            <span class="text-xs text-gray-400 w-16">Monat:</span>
+            <UButton size="2xs" color="white" variant="solid" @click="setMonthPreset('last')">Letzter</UButton>
+            <UButton size="2xs" color="white" variant="solid" @click="setMonthPreset('current')">Aktuell</UButton>
+          </div>
+
+          <div class="flex gap-2 items-center">
+            <span class="text-xs text-gray-400 w-16">Quartal:</span>
+
+            <UButton
+                size="2xs"
+                color="white"
+                variant="solid"
+                @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="mx-auto"
+                class="w-full justify-start"
             />
-
             <template #panel="{ close }">
               <LazyDatePicker v-model="createExportData.start_date" @close="close" />
             </template>
           </UPopover>
         </UFormGroup>
 
-      <UFormGroup
-          label="Ende:"
-      >
+        <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="mx-auto"
+                class="w-full justify-start"
             />
-
             <template #panel="{ close }">
               <LazyDatePicker v-model="createExportData.end_date" @close="close" />
             </template>
           </UPopover>
         </UFormGroup>
+      </div>
 
       <template #footer>
-        <UButton
-            @click="createExport"
-        >
+        <div class="flex justify-end">
+          <UButton @click="createExport">
             Erstellen
           </UButton>
+        </div>
       </template>
 
     </UCard>
@@ -162,5 +213,4 @@ const createExport = async () => {
 </template>
 
 <style scoped>
-
 </style>