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

This commit is contained in:
Alex 2024-11-14 08:43:25 -06:00 committed by GitHub
parent 9203a61709
commit 0b3742cf13
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
310 changed files with 6435 additions and 4176 deletions

View file

@ -11,19 +11,23 @@
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { t } from 'svelte-i18n';
export let library: LibraryResponseDto;
export let onCancel: () => void;
export let onSubmit: (library: LibraryResponseDto) => void;
interface Props {
library: LibraryResponseDto;
onCancel: () => void;
onSubmit: (library: LibraryResponseDto) => void;
}
let addImportPath = false;
let editImportPath: number | null = null;
let { library = $bindable(), onCancel, onSubmit }: Props = $props();
let importPathToAdd: string | null = null;
let editedImportPath: string;
let addImportPath = $state(false);
let editImportPath: number | null = $state(null);
let validatedPaths: ValidateLibraryImportPathResponseDto[] = [];
let importPathToAdd: string | null = $state(null);
let editedImportPath: string = $state('');
$: importPaths = validatedPaths.map((validatedPath) => validatedPath.importPath);
let validatedPaths: ValidateLibraryImportPathResponseDto[] = $state([]);
let importPaths = $derived(validatedPaths.map((validatedPath) => validatedPath.importPath));
onMount(async () => {
if (library.importPaths) {
@ -134,6 +138,11 @@
editImportPath = null;
}
};
const onsubmit = (event: Event) => {
event.preventDefault();
onSubmit({ ...library });
};
</script>
{#if addImportPath}
@ -163,7 +172,7 @@
/>
{/if}
<form on:submit|preventDefault={() => onSubmit({ ...library })} autocomplete="off" class="m-4 flex flex-col gap-4">
<form {onsubmit} autocomplete="off" class="m-4 flex flex-col gap-4">
<table class="text-left">
<tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
{#each validatedPaths as validatedPath, listIndex}
@ -199,7 +208,7 @@
icon={mdiPencilOutline}
title={$t('edit_import_path')}
size="16"
on:click={() => {
onclick={() => {
editImportPath = listIndex;
editedImportPath = validatedPath.importPath;
}}
@ -223,7 +232,7 @@
><Button
type="button"
size="sm"
on:click={() => {
onclick={() => {
addImportPath = true;
}}>{$t('add_path')}</Button
></td
@ -233,12 +242,12 @@
</table>
<div class="flex justify-between w-full">
<div class="justify-end gap-2">
<Button size="sm" color="gray" on:click={() => revalidate()}
<Button size="sm" color="gray" onclick={() => revalidate()}
><Icon path={mdiRefresh} size={20} />{$t('validate')}</Button
>
</div>
<div class="justify-end gap-2">
<Button size="sm" color="gray" on:click={onCancel}>{$t('cancel')}</Button>
<Button size="sm" color="gray" onclick={onCancel}>{$t('cancel')}</Button>
<Button size="sm" type="submit">{$t('save')}</Button>
</div>
</div>