helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
310 changed files with 6435 additions and 4176 deletions
Download patch file Download diff file Expand all files Collapse all files

64
web/src/lib/components/shared-components/change-date.svelte
View file

@ -1,14 +1,18 @@
<script lang="ts">
import { DateTime } from 'luxon';
import ConfirmDialog from './dialog/confirm-dialog.svelte';
import Combobox from './combobox.svelte';
import Combobox, { type ComboBoxOption } from './combobox.svelte';
import DateInput from '../elements/date-input.svelte';
import { t } from 'svelte-i18n';
export let initialDate: DateTime = DateTime.now();
export let initialTimeZone: string = '';
export let onCancel: () => void;
export let onConfirm: (date: string) => void;
interface Props {
initialDate?: DateTime;
initialTimeZone?: string;
onCancel: () => void;
onConfirm: (date: string) => void;
}
let { initialDate = DateTime.now(), initialTimeZone = '', onCancel, onConfirm }: Props = $props();
type ZoneOption = {
/**
@ -49,21 +53,15 @@
const knownTimezones = Intl.supportedValuesOf('timeZone');
let timezones: ZoneOption[];
$: timezones = knownTimezones
const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
let selectedDate = $state(initialDate.toFormat("yyyy-MM-dd'T'HH:mm"));
let timezones: ZoneOption[] = knownTimezones
.map((zone) => zoneOptionForDate(zone, selectedDate))
.filter((zone) => zone.valid)
.sort((zoneA, zoneB) => sortTwoZones(zoneA, zoneB));
const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
// the offsets (and validity) for time zones may change if the date is changed, which is why we recompute the list
let selectedOption: ZoneOption | undefined;
$: selectedOption = getPreferredTimeZone(initialDate, userTimeZone, timezones, selectedOption);
let selectedDate = initialDate.toFormat("yyyy-MM-dd'T'HH:mm");
// when changing the time zone, assume the configured date/time is meant for that time zone (instead of updating it)
$: date = DateTime.fromISO(selectedDate, { zone: selectedOption?.value, setZone: true });
let selectedOption: ZoneOption | undefined = $state(getPreferredTimeZone(initialDate, userTimeZone, timezones));
function zoneOptionForDate(zone: string, date: string) {
const dateAtZone: DateTime = DateTime.fromISO(date, { zone });
@ -125,6 +123,14 @@
onConfirm(value);
}
};
const handleOnSelect = (option?: ComboBoxOption) => {
if (option) {
selectedOption = getPreferredTimeZone(initialDate, userTimeZone, timezones, option as ZoneOption);
}
};
// when changing the time zone, assume the configured date/time is meant for that time zone (instead of updating it)
let date = $derived(DateTime.fromISO(selectedDate, { zone: selectedOption?.value, setZone: true }));
</script>
<ConfirmDialog
@ -135,13 +141,23 @@
onConfirm={handleConfirm}
{onCancel}
>
<div class="flex flex-col text-left gap-2" slot="prompt">
<div class="flex flex-col">
<label for="datetime">{$t('date_and_time')}</label>
<DateInput class="immich-form-input" id="datetime" type="datetime-local" bind:value={selectedDate} />
<!-- @migration-task: migrate this slot by hand, `prompt` would shadow a prop on the parent component -->
<!-- @migration-task: migrate this slot by hand, `prompt` would shadow a prop on the parent component -->
{#snippet promptSnippet()}
<div class="flex flex-col text-left gap-2">
<div class="flex flex-col">
<label for="datetime">{$t('date_and_time')}</label>
<DateInput class="immich-form-input" id="datetime" type="datetime-local" bind:value={selectedDate} />
</div>
<div>
<Combobox
bind:selectedOption
label={$t('timezone')}
options={timezones}
placeholder={$t('search_timezone')}
onSelect={(option) => handleOnSelect(option)}
/>
</div>
</div>
<div>
<Combobox bind:selectedOption label={$t('timezone')} options={timezones} placeholder={$t('search_timezone')} />
</div>
</div>
{/snippet}
</ConfirmDialog>