refactor: view shared link (#23766)

This commit is contained in:
Jason Rasmussen
2025-11-10 12:21:26 -05:00
committed by GitHub
parent a4e65a7ea8
commit 45304f1211
13 changed files with 74 additions and 76 deletions

View File

@@ -13,14 +13,14 @@
import { t } from 'svelte-i18n';
interface Props {
link: SharedLinkResponseDto;
sharedLink: SharedLinkResponseDto;
onDelete: () => void;
}
let { link, onDelete }: Props = $props();
let { sharedLink, onDelete }: Props = $props();
let now = DateTime.now();
let expiresAt = $derived(link.expiresAt ? DateTime.fromISO(link.expiresAt) : undefined);
let expiresAt = $derived(sharedLink.expiresAt ? DateTime.fromISO(sharedLink.expiresAt) : undefined);
let isExpired = $derived(expiresAt ? now > expiresAt : false);
const getCountDownExpirationDate = (expiresAtDate: DateTime, now: DateTime) => {
@@ -41,10 +41,10 @@
>
<svelte:element
this={isExpired ? 'div' : 'a'}
href={isExpired ? undefined : `${AppRoute.SHARE}/${link.key}`}
href={isExpired ? undefined : `${AppRoute.SHARE}/${sharedLink.key}`}
class="flex gap-4 w-full py-4"
>
<ShareCover class="transition-all duration-300 hover:shadow-lg" {link} />
<ShareCover class="transition-all duration-300 hover:shadow-lg" {sharedLink} />
<div class="flex flex-col justify-between">
<div class="info-top">
@@ -62,34 +62,34 @@
<div class="text-sm pb-2">
<p class="flex place-items-center gap-2 text-primary break-all uppercase">
{#if link.type === SharedLinkType.Album}
{link.album?.albumName}
{:else if link.type === SharedLinkType.Individual}
{#if sharedLink.type === SharedLinkType.Album}
{sharedLink.album?.albumName}
{:else if sharedLink.type === SharedLinkType.Individual}
{$t('individual_share')}
{/if}
</p>
<p class="text-sm">{link.description ?? ''}</p>
<p class="text-sm">{sharedLink.description ?? ''}</p>
</div>
</div>
<div class="flex flex-wrap gap-2 text-xl">
{#if link.allowUpload}
{#if sharedLink.allowUpload}
<Badge rounded="full"><span class="text-xs px-1">{$t('upload')}</span></Badge>
{/if}
{#if link.allowDownload}
{#if sharedLink.allowDownload}
<Badge rounded="full"><span class="text-xs px-1">{$t('download')}</span></Badge>
{/if}
{#if link.showMetadata}
{#if sharedLink.showMetadata}
<Badge rounded="full"><span class="uppercase text-xs px-1">{$t('exif')}</span></Badge>
{/if}
{#if link.password}
{#if sharedLink.password}
<Badge rounded="full"><span class="text-xs px-1">{$t('password')}</span></Badge>
{/if}
{#if link.slug}
{#if sharedLink.slug}
<Badge rounded="full"><span class="text-xs px-1">{$t('custom_url')}</span></Badge>
{/if}
</div>
@@ -97,8 +97,8 @@
</svelte:element>
<div class="flex flex-auto flex-col place-content-center place-items-end text-end ms-4">
<div class="sm:flex hidden">
<SharedLinkEdit sharedLink={link} />
<SharedLinkCopy {link} />
<SharedLinkEdit {sharedLink} />
<SharedLinkCopy {sharedLink} />
<SharedLinkDelete {onDelete} />
</div>
@@ -110,8 +110,8 @@
size="large"
hideContent
>
<SharedLinkEdit menuItem sharedLink={link} />
<SharedLinkCopy menuItem {link} />
<SharedLinkEdit menuItem {sharedLink} />
<SharedLinkCopy menuItem {sharedLink} />
<SharedLinkDelete menuItem {onDelete} />
</ButtonContextMenu>
</div>