add support for history_group and loading indicators to export buttons

This commit is contained in:
Gregor Vostrak
2024-10-25 18:09:28 +02:00
committed by Constantin Graf
parent 8712cfb9dc
commit ab4dbd64df
6 changed files with 74 additions and 56 deletions

View File

@@ -3,43 +3,47 @@ import { SecondaryButton } from '@/packages/ui/src';
import { ArrowDownTrayIcon } from '@heroicons/vue/20/solid';
import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
import type { ExportFormat } from '@/types/reporting';
import { ref } from 'vue';
const emit = defineEmits<{
submit: [ExportFormat];
const props = defineProps<{
download: (format: ExportFormat) => Promise<void>;
}>();
const loading = ref(false);
function triggerDownload(format: ExportFormat) {
loading.value = true;
props.download(format).finally(() => {
loading.value = false;
});
}
</script>
<template>
<Dropdown align="bottom-end">
<template #trigger>
<SecondaryButton>
<div class="flex space-x-2 items-center">
<ArrowDownTrayIcon
class="w-4 text-text-tertiary"></ArrowDownTrayIcon>
<span>Export</span>
</div>
<SecondaryButton :icon="ArrowDownTrayIcon" :loading>
Export
</SecondaryButton>
</template>
<template #content>
<div class="flex flex-col space-y-1 p-1.5">
<SecondaryButton
class="border-0 px-2"
@click="emit('submit', 'pdf')"
@click="triggerDownload('pdf')"
>Export as PDF</SecondaryButton
>
<SecondaryButton
class="border-0 px-2"
@click="emit('submit', 'xlsx')"
@click="triggerDownload('xlsx')"
>Export as Excel</SecondaryButton
>
<SecondaryButton
class="border-0 px-2"
@click="emit('submit', 'csv')"
@click="triggerDownload('csv')"
>Export as CSV</SecondaryButton
>
<SecondaryButton
class="border-0 px-2"
@click="emit('submit', 'ods')"
@click="triggerDownload('ods')"
>Export as ODS
</SecondaryButton>
</div>