mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-10-31 10:13:32 -04:00
53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<template>
|
|
<v-data-table
|
|
item-key="id"
|
|
:headers="headers"
|
|
:items="exports"
|
|
:items-per-page="15"
|
|
class="elevation-0"
|
|
@click:row="downloadData"
|
|
>
|
|
<template #[`item.expires`]="{ item }">
|
|
{{ getTimeToExpire(item.expires) }}
|
|
</template>
|
|
<template #[`item.actions`]="{ item }">
|
|
<BaseButton
|
|
download
|
|
size="small"
|
|
:download-url="`/api/recipes/bulk-actions/export/download?path=${item.path}`"
|
|
/>
|
|
</template>
|
|
</v-data-table>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { parseISO, formatDistanceToNow } from "date-fns";
|
|
import type { GroupDataExport } from "~/lib/api/types/group";
|
|
|
|
defineProps<{
|
|
exports: GroupDataExport[];
|
|
}>();
|
|
|
|
const i18n = useI18n();
|
|
|
|
const headers = [
|
|
{ title: i18n.t("export.export"), value: "name" },
|
|
{ title: i18n.t("export.file-name"), value: "filename" },
|
|
{ title: i18n.t("export.size"), value: "size" },
|
|
{ title: i18n.t("export.link-expires"), value: "expires" },
|
|
{ title: "", value: "actions" },
|
|
];
|
|
|
|
function getTimeToExpire(timeString: string) {
|
|
const expiresAt = parseISO(timeString);
|
|
|
|
return formatDistanceToNow(expiresAt, {
|
|
addSuffix: false,
|
|
});
|
|
}
|
|
|
|
function downloadData(_: any) {
|
|
console.log("Downloading data...");
|
|
}
|
|
</script>
|