167 lines
3.9 KiB
Vue
167 lines
3.9 KiB
Vue
<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>
|