cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(web): migration svelte 5 syntax (#13883)

Browse Source
This commit is contained in:
Alex
2024-11-14 08:43:25 -06:00
committed by GitHub
parent 9203a61709
commit 0b3742cf13
310 changed files with 6435 additions and 4176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/admin-page/jobs/job-tile-button.svelte
+13 -5
View File
@@ -1,10 +1,18 @@
<script lang="ts" context="module">
<script lang="ts" module>
export type Colors = 'light-gray' | 'gray' | 'dark-gray';
</script>
<script lang="ts">
export let color: Colors;
export let disabled = false;
import type { Snippet } from 'svelte';
interface Props {
color: Colors;
disabled?: boolean;
children?: Snippet;
onClick?: () => void;
}
let { color, disabled = false, onClick = () => {}, children }: Props = $props();
const colorClasses: Record<Colors, string> = {
'light-gray': 'bg-gray-300/80 dark:bg-gray-700',
@@ -23,7 +31,7 @@
class="flex h-full w-full flex-col place-content-center place-items-center gap-2 px-8 py-2 text-xs text-gray-600 transition-colors dark:text-gray-200 {colorClasses[
color
]} {hoverClasses}"
on:click
onclick={onClick}
>
<slot />
{@render children?.()}
</button>
web/src/lib/components/admin-page/jobs/job-tile-status.svelte
+10 -3
View File
@@ -1,9 +1,16 @@
<script lang="ts" context="module">
<script lang="ts" module>
export type Color = 'success' | 'warning';
</script>
<script lang="ts">
export let color: Color;
import type { Snippet } from 'svelte';
interface Props {
color: Color;
children?: Snippet;
}
let { color, children }: Props = $props();
const colorClasses: Record<Color, string> = {
success: 'bg-green-500/70 text-gray-900 dark:bg-green-700/90 dark:text-gray-100',
@@ -12,5 +19,5 @@
</script>
<div class="w-full p-2 text-center text-sm {colorClasses[color]}">
<slot />
{@render children?.()}
</div>
web/src/lib/components/admin-page/jobs/job-tile.svelte
+40 -24
View File
@@ -19,22 +19,37 @@
import JobTileButton from './job-tile-button.svelte';
import JobTileStatus from './job-tile-status.svelte';
export let title: string;
export let subtitle: string | undefined;
export let description: Component | undefined;
export let jobCounts: JobCountsDto;
export let queueStatus: QueueStatusDto;
export let icon: string;
export let disabled = false;
interface Props {
title: string;
subtitle: string | undefined;
description: Component | undefined;
jobCounts: JobCountsDto;
queueStatus: QueueStatusDto;
icon: string;
disabled?: boolean;
allText: string | undefined;
refreshText: string | undefined;
missingText: string;
onCommand: (command: JobCommandDto) => void;
}
export let allText: string | undefined;
export let refreshText: string | undefined;
export let missingText: string;
export let onCommand: (command: JobCommandDto) => void;
let {
title,
subtitle,
description,
jobCounts,
queueStatus,
icon,
disabled = false,
allText,
refreshText,
missingText,
onCommand,
}: Props = $props();
$: waitingCount = jobCounts.waiting + jobCounts.paused + jobCounts.delayed;
$: isIdle = !queueStatus.isActive && !queueStatus.isPaused;
$: multipleButtons = allText || refreshText;
let waitingCount = $derived(jobCounts.waiting + jobCounts.paused + jobCounts.delayed);
let isIdle = $derived(!queueStatus.isActive && !queueStatus.isPaused);
let multipleButtons = $derived(allText || refreshText);
const commonClasses = 'flex place-items-center justify-between w-full py-2 sm:py-4 pr-4 pl-6';
</script>
@@ -67,7 +82,7 @@
title={$t('clear_message')}
size="12"
padding="1"
on:click={() => onCommand({ command: JobCommand.ClearFailed, force: false })}
onclick={() => onCommand({ command: JobCommand.ClearFailed, force: false })}
/>
</div>
</Badge>
@@ -87,8 +102,9 @@
{/if}
{#if description}
{@const SvelteComponent = description}
<div class="text-sm dark:text-white">
<svelte:component this={description} />
<SvelteComponent />
</div>
{/if}
@@ -118,7 +134,7 @@
<JobTileButton
disabled={true}
color="light-gray"
on:click={() => onCommand({ command: JobCommand.Start, force: false })}
onClick={() => onCommand({ command: JobCommand.Start, force: false })}
>
<Icon path={mdiAlertCircle} size="36" />
{$t('disabled').toUpperCase()}
@@ -127,20 +143,20 @@
{#if !disabled && !isIdle}
{#if waitingCount > 0}
<JobTileButton color="gray" on:click={() => onCommand({ command: JobCommand.Empty, force: false })}>
<JobTileButton color="gray" onClick={() => onCommand({ command: JobCommand.Empty, force: false })}>
<Icon path={mdiClose} size="24" />
{$t('clear').toUpperCase()}
</JobTileButton>
{/if}
{#if queueStatus.isPaused}
{@const size = waitingCount > 0 ? '24' : '48'}
<JobTileButton color="light-gray" on:click={() => onCommand({ command: JobCommand.Resume, force: false })}>
<JobTileButton color="light-gray" onClick={() => onCommand({ command: JobCommand.Resume, force: false })}>
<!-- size property is not reactive, so have to use width and height -->
<Icon path={mdiFastForward} {size} />
{$t('resume').toUpperCase()}
</JobTileButton>
{:else}
<JobTileButton color="light-gray" on:click={() => onCommand({ command: JobCommand.Pause, force: false })}>
<JobTileButton color="light-gray" onClick={() => onCommand({ command: JobCommand.Pause, force: false })}>
<Icon path={mdiPause} size="24" />
{$t('pause').toUpperCase()}
</JobTileButton>
@@ -149,25 +165,25 @@
{#if !disabled && multipleButtons && isIdle}
{#if allText}
<JobTileButton color="dark-gray" on:click={() => onCommand({ command: JobCommand.Start, force: true })}>
<JobTileButton color="dark-gray" onClick={() => onCommand({ command: JobCommand.Start, force: true })}>
<Icon path={mdiAllInclusive} size="24" />
{allText}
</JobTileButton>
{/if}
{#if refreshText}
<JobTileButton color="gray" on:click={() => onCommand({ command: JobCommand.Start, force: undefined })}>
<JobTileButton color="gray" onClick={() => onCommand({ command: JobCommand.Start, force: undefined })}>
<Icon path={mdiImageRefreshOutline} size="24" />
{refreshText}
</JobTileButton>
{/if}
<JobTileButton color="light-gray" on:click={() => onCommand({ command: JobCommand.Start, force: false })}>
<JobTileButton color="light-gray" onClick={() => onCommand({ command: JobCommand.Start, force: false })}>
<Icon path={mdiSelectionSearch} size="24" />
{missingText}
</JobTileButton>
{/if}
{#if !disabled && !multipleButtons && isIdle}
<JobTileButton color="light-gray" on:click={() => onCommand({ command: JobCommand.Start, force: false })}>
<JobTileButton color="light-gray" onClick={() => onCommand({ command: JobCommand.Start, force: false })}>
<Icon path={mdiPlay} size="48" />
{$t('start').toUpperCase()}
</JobTileButton>
web/src/lib/components/admin-page/jobs/jobs-panel.svelte
+8 -4
View File
@@ -25,7 +25,11 @@
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { t } from 'svelte-i18n';
export let jobs: AllJobStatusResponseDto;
interface Props {
jobs: AllJobStatusResponseDto;
}
let { jobs = $bindable() }: Props = $props();
interface JobDetails {
title: string;
@@ -56,8 +60,7 @@
await handleCommand(jobId, dto);
};
// svelte-ignore reactive_declaration_non_reactive_property
$: jobDetails = <Partial<Record<JobName, JobDetails>>>{
let jobDetails: Partial<Record<JobName, JobDetails>> = {
[JobName.ThumbnailGeneration]: {
icon: mdiFileJpgBox,
title: $getJobName(JobName.ThumbnailGeneration),
@@ -142,7 +145,8 @@
missingText: $t('missing'),
},
};
$: jobList = Object.entries(jobDetails) as [JobName, JobDetails][];
let jobList = Object.entries(jobDetails) as [JobName, JobDetails][];
async function handleCommand(jobId: JobName, jobCommand: JobCommandDto) {
const title = jobDetails[jobId]?.title;
web/src/lib/components/admin-page/jobs/storage-migration-description.svelte
+8 -7
View File
@@ -7,12 +7,13 @@
<FormatMessage
key="admin.storage_template_migration_description"
values={{ template: $t('admin.storage_template_settings') }}
let:message
>
<a
href="{AppRoute.ADMIN_SETTINGS}?{QueryParameter.IS_OPEN}={OpenSettingQueryParameterValue.STORAGE_TEMPLATE}"
class="text-immich-primary dark:text-immich-dark-primary"
>
{message}
</a>
{#snippet children({ message })}
<a
href="{AppRoute.ADMIN_SETTINGS}?{QueryParameter.IS_OPEN}={OpenSettingQueryParameterValue.STORAGE_TEMPLATE}"
class="text-immich-primary dark:text-immich-dark-primary"
>
{message}
</a>
{/snippet}
</FormatMessage>