mealie/frontend/components/Domain/Group/GroupExportData.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>