mirror of
https://github.com/immich-app/immich.git
synced 2025-12-18 01:11:07 +03:00
refactor: view shared link (#23766)
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user