Added Frontend

frontend/pages/export/index.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import dayjs from "dayjs"
+const exports = ref([])
+
+const auth = useAuthStore()
+const toast = useToast()
+const router = useRouter()
+
+const setupPage = async () => {
+  exports.value = await useNuxtApp().$api("/api/exports",{
+    method: "GET"
+  })
+}
+
+setupPage()
+
+function downloadFile(row) {
+  const a = document.createElement("a")
+  a.href = row.url
+  a.download = row.file_path.split("/").pop()
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+}
+
+const showCreateExportModal = ref(false)
+const createExportData = ref({
+  start_date: null,
+  end_date: null,
+  beraternr:null,
+  mandantennr: null
+})
+
+const createExport = async () => {
+  const res = await useNuxtApp().$api("/api/exports/datev",{
+    method: "POST",
+    body: createExportData.value
+  })
+
+  showCreateExportModal.value = false
+
+  if(res.success) {
+    toast.add({title: "Export wird erstellt. Sie erhalten eine Benachrichtigung sobald es soweit ist."})
+  } else {
+    toast.add({title: "Es gab einen Fehler beim erstellen", color: "rose"})
+  }
+
+}
+
+
+</script>
+
+<template>
+  <UDashboardNavbar
+      title="Exporte"
+  >
+    <template #right>
+      <UButton
+          @click="showCreateExportModal = true"
+      >+ DATEV</UButton>
+      <UButton
+          @click="router.push('/export/create/sepa')"
+      >+ 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',
+        },
+    ]"
+  >
+    <template #created_at-data="{row}">
+      {{dayjs(row.created_at).format("DD.MM.YYYY HH:mm")}}
+    </template>
+    <template #start_date-data="{row}">
+      {{dayjs(row.start_date).format("DD.MM.YYYY HH:mm")}}
+    </template>
+    <template #end_date-data="{row}">
+      {{dayjs(row.end_date).format("DD.MM.YYYY HH:mm")}}
+    </template>
+    <template #valid_until-data="{row}">
+      {{dayjs(row.valid_until).format("DD.MM.YYYY HH:mm")}}
+    </template>
+    <template #download-data="{row}">
+      <UButton
+          @click="downloadFile(row)"
+      >
+        Download
+      </UButton>
+    </template>
+  </UTable>
+
+  <UModal v-model="showCreateExportModal">
+    <UCard>
+      <template #header>
+        Export erstellen
+      </template>
+
+      <UFormGroup
+          label="Start:"
+      >
+        <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 }">
+            <LazyDatePicker v-model="createExportData.start_date" @close="close" />
+          </template>
+        </UPopover>
+      </UFormGroup>
+
+      <UFormGroup
+          label="Ende:"
+      >
+        <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 }">
+            <LazyDatePicker v-model="createExportData.end_date" @close="close" />
+          </template>
+        </UPopover>
+      </UFormGroup>
+
+      <template #footer>
+        <UButton
+            @click="createExport"
+        >
+          Erstellen
+        </UButton>
+      </template>
+
+    </UCard>
+  </UModal>
+
+</template>
+
+<style scoped>
+
+</style>