Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-07-09 03:04:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

Re-use change-date instead of new component

Browse Source
This commit is contained in:
Min Idzelis 2025-05-12 01:20:13 +00:00
parent ee202624f7
commit 2664ebf00a
3 changed files with 28 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/lib/components/photos-page/asset-grid.svelte
View File

@ -9,7 +9,7 @@
setFocusTo as setFocusToInit, setFocusTo as setFocusToInit,
} from '$lib/components/photos-page/actions/focus-actions'; } from '$lib/components/photos-page/actions/focus-actions';
import Skeleton from '$lib/components/photos-page/skeleton.svelte'; import Skeleton from '$lib/components/photos-page/skeleton.svelte';
import SelectDate from '$lib/components/shared-components/select-date.svelte'; import ChangeDate from '$lib/components/shared-components/change-date.svelte';
import { AppRoute, AssetAction } from '$lib/constants'; import { AppRoute, AssetAction } from '$lib/constants';
import { albumMapViewManager } from '$lib/managers/album-view-map.manager.svelte'; import { albumMapViewManager } from '$lib/managers/album-view-map.manager.svelte';
import { modalManager } from '$lib/managers/modal-manager.svelte'; import { modalManager } from '$lib/managers/modal-manager.svelte';
@ -722,10 +722,13 @@
{/if} {/if}
{#if isShowSelectDate} {#if isShowSelectDate}
<SelectDate <ChangeDate
title="Navigate to Time"
initialDate={DateTime.now()} initialDate={DateTime.now()}
onConfirm={async (date: DateTime) => { timezoneInput={false}
onConfirm={async (dateString: string) => {
isShowSelectDate = false; isShowSelectDate = false;
const date = DateTime.fromISO(dateString);
const asset = await assetStore.getClosestAssetToDate(date); const asset = await assetStore.getClosestAssetToDate(date);
if (asset) { if (asset) {
await setFocusAsset(asset); await setFocusAsset(asset);

33
web/src/lib/components/shared-components/change-date.svelte
View File

@ -6,13 +6,22 @@
import ConfirmDialog from './dialog/confirm-dialog.svelte'; import ConfirmDialog from './dialog/confirm-dialog.svelte';
interface Props { interface Props {
title?: string;
initialDate?: DateTime; initialDate?: DateTime;
initialTimeZone?: string; initialTimeZone?: string;
timezoneInput?: boolean;
onCancel: () => void; onCancel: () => void;
onConfirm: (date: string) => void; onConfirm: (date: string) => void;
} }
let { initialDate = DateTime.now(), initialTimeZone = '', onCancel, onConfirm }: Props = $props(); let {
initialDate = DateTime.now(),
initialTimeZone = '',
title = $t('edit_date_and_time'),
timezoneInput = true,
onCancel,
onConfirm,
}: Props = $props();
type ZoneOption = { type ZoneOption = {
/** /**
@ -135,7 +144,7 @@
<ConfirmDialog <ConfirmDialog
confirmColor="primary" confirmColor="primary"
title={$t('edit_date_and_time')} {title}
prompt="Please select a new date:" prompt="Please select a new date:"
disabled={!date.isValid} disabled={!date.isValid}
onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())} onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
@ -148,15 +157,17 @@
<label for="datetime">{$t('date_and_time')}</label> <label for="datetime">{$t('date_and_time')}</label>
<DateInput class="immich-form-input" id="datetime" type="datetime-local" bind:value={selectedDate} /> <DateInput class="immich-form-input" id="datetime" type="datetime-local" bind:value={selectedDate} />
</div> </div>
<div> {#if timezoneInput}
<Combobox <div>
bind:selectedOption <Combobox
label={$t('timezone')} bind:selectedOption
options={timezones} label={$t('timezone')}
placeholder={$t('search_timezone')} options={timezones}
onSelect={(option) => handleOnSelect(option)} placeholder={$t('search_timezone')}
/> onSelect={(option) => handleOnSelect(option)}
</div> />
</div>
{/if}
</div> </div>
{/snippet} {/snippet}
</ConfirmDialog> </ConfirmDialog>

55
web/src/lib/components/shared-components/select-date.svelte
View File

@ -1,55 +0,0 @@
<script lang="ts">
import DateInput from '$lib/components/elements/date-input.svelte';
import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
import { DateTime } from 'luxon';
import { t } from 'svelte-i18n';
interface Props {
initialDate?: DateTime;
onCancel: () => void;
onConfirm: (date: DateTime) => void;
}
let { initialDate = DateTime.now(), onCancel, onConfirm }: Props = $props();
let selectedDate = $state(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)
const date = $derived(DateTime.fromISO(selectedDate));
const handleConfirm = () => {
if (date) {
onConfirm(date);
}
};
</script>
<ConfirmDialog
confirmColor="primary"
title="Go to date"
disabled={!date.isValid}
onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
>
{#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}
autofocus
onkeydown={(e) => {
if (e.key === 'Enter') {
handleConfirm();
}
if (e.key === 'Escape') {
onCancel();
}
}}
/>
</div>
</div>
{/snippet}
</ConfirmDialog>