96 lines
3.1 KiB
Vue
96 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
import { toast } from 'vue-sonner';
|
|
import { deleteShare } from '~/lib/api/shares';
|
|
import type { Share } from '~/shared/types/shares';
|
|
|
|
const { shares } = defineProps<{
|
|
shares: Share[];
|
|
}>();
|
|
|
|
function onCopyClicked(share: Share) {
|
|
const link = getShareLink(share);
|
|
if (copyToClipboard(link)) {
|
|
toast.success('Share', {
|
|
description: 'Copied the link to the clipboard',
|
|
});
|
|
} else {
|
|
console.log(`Here's the link to ${share.path}: ${link}`);
|
|
toast.error('Share', {
|
|
description: `Failed to copy the link to the clipboard. Logged it to the console instead.`,
|
|
});
|
|
}
|
|
}
|
|
|
|
async function onDeleteClicked(share: Share) {
|
|
const result = await deleteShare(share.warrenId, share.id);
|
|
|
|
if (result.success) {
|
|
refreshNuxtData('current-file-shares');
|
|
toast.success('Share', {
|
|
description: `Successfully deleted the share for ${result.share.path}`,
|
|
});
|
|
} else {
|
|
toast.error('Share', {
|
|
description: 'Failed to delete share',
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead class="w-[100px]">ID</TableHead>
|
|
<TableHead>Password</TableHead>
|
|
<TableHead>Expiration</TableHead>
|
|
<TableHead>Created</TableHead>
|
|
<TableHead class="w-0 text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow v-for="share in shares" :key="share.id">
|
|
<TableCell class="font-medium" :title="share.id">
|
|
<span class="hidden sm:block">
|
|
{{ share.id }}
|
|
</span>
|
|
<span class="block sm:hidden"
|
|
>{{ share.id.slice(0, 3) }}...{{ share.id.slice(-3) }}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell>{{ share.password ? 'Yes' : 'No' }}</TableCell>
|
|
<TableCell>{{
|
|
share.expiresAt == null
|
|
? 'Never'
|
|
: $dayjs(share.expiresAt).format('MMM D, YYYY HH:mm')
|
|
}}</TableCell>
|
|
<TableCell>{{
|
|
$dayjs(share.createdAt).format('MMM D, YYYY HH:mm')
|
|
}}</TableCell>
|
|
<TableCell>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
@click="() => onCopyClicked(share)"
|
|
><Icon name="lucide:copy"
|
|
/></Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
@click="() => onDeleteClicked(share)"
|
|
><Icon name="lucide:trash-2"
|
|
/></Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</template>
|