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

refactor: Update AssetGrid to wrap new timeline

Browse Source 
- Update asset-grid.svelte to wrap Timeline component  
- Map old AssetGrid props to new Timeline props
- Convert onThumbnailClick to onAssetOpen callback
- Update change-date component to support icon and confirmText props

This allows existing code to continue using AssetGrid API while internally using the new Timeline implementation.
This commit is contained in:
midzelis
2025-09-16 12:04:03 +00:00
parent 6c9d506c74
commit 53aced666e
4 changed files with 70 additions and 952 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/shared-components/change-date.spec.ts
+16 -3
View File
@@ -8,6 +8,9 @@ import ChangeDate from './change-date.svelte';
describe('ChangeDate component', () => {
const initialDate = DateTime.fromISO('2024-01-01');
const initialTimeZone = 'Europe/Berlin';
const targetDate = DateTime.fromISO('2024-01-01').setZone('UTC+1', {
keepLocalTime: true,
});
const currentInterval = {
start: DateTime.fromISO('2000-02-01T14:00:00+01:00'),
end: DateTime.fromISO('2001-02-01T14:00:00+01:00'),
@@ -43,7 +46,11 @@ describe('ChangeDate component', () => {
await fireEvent.click(getConfirmButton());
expect(onConfirm).toHaveBeenCalledWith({ mode: 'absolute', date: '2024-01-01T00:00:00.000+01:00' });
expect(onConfirm).toHaveBeenCalledWith({
mode: 'absolute',
date: '2024-01-01T00:00:00.000+01:00',
dateTime: targetDate,
});
});
test('calls onCancel on cancel', async () => {
@@ -58,7 +65,9 @@ describe('ChangeDate component', () => {
describe('when date is in daylight saving time', () => {
const dstDate = DateTime.fromISO('2024-07-01');
const targetDate = DateTime.fromISO('2024-07-01').setZone('UTC+2', {
keepLocalTime: true,
});
test('should render correct timezone with offset', () => {
render(ChangeDate, { initialDate: dstDate, initialTimeZone, onCancel, onConfirm });
@@ -72,7 +81,11 @@ describe('ChangeDate component', () => {
await fireEvent.click(getConfirmButton());
expect(onConfirm).toHaveBeenCalledWith({ mode: 'absolute', date: '2024-07-01T00:00:00.000+02:00' });
expect(onConfirm).toHaveBeenCalledWith({
mode: 'absolute',
date: '2024-07-01T00:00:00.000+02:00',
dateTime: targetDate,
});
});
});
web/src/lib/components/shared-components/change-date.svelte
+20 -11
View File
@@ -1,15 +1,14 @@
<script lang="ts">
import { ConfirmModal } from '@immich/ui';
import { mdiCalendarEditOutline } from '@mdi/js';
import { locale } from '$lib/stores/preferences.store';
import { getDateTimeOffsetLocaleString } from '$lib/utils/timeline-util.js';
import { ConfirmModal, Field, Switch } from '@immich/ui';
import { mdiCalendarEdit } from '@mdi/js';
import { DateTime, Duration } from 'luxon';
import { t } from 'svelte-i18n';
import DateInput from '../elements/date-input.svelte';
import Combobox, { type ComboBoxOption } from './combobox.svelte';
import DurationInput from '../elements/duration-input.svelte';
import { Field, Switch } from '@immich/ui';
import { getDateTimeOffsetLocaleString } from '$lib/utils/timeline-util.js';
import { locale } from '$lib/stores/preferences.store';
import { get } from 'svelte/store';
import DateInput from '../elements/date-input.svelte';
import DurationInput from '../elements/duration-input.svelte';
import Combobox, { type ComboBoxOption } from './combobox.svelte';
interface Props {
title?: string;
@@ -18,6 +17,8 @@
timezoneInput?: boolean;
withDuration?: boolean;
currentInterval?: { start: DateTime; end: DateTime };
icon?: string;
confirmText?: string;
onCancel: () => void;
onConfirm: (result: AbsoluteResult | RelativeResult) => void;
}
@@ -29,6 +30,8 @@
timezoneInput = true,
withDuration = true,
currentInterval = undefined,
icon = mdiCalendarEdit,
confirmText,
onCancel,
onConfirm,
}: Props = $props();
@@ -36,6 +39,7 @@
export type AbsoluteResult = {
mode: 'absolute';
date: string;
dateTime: DateTime<true>;
};
export type RelativeResult = {
@@ -192,9 +196,13 @@
const fixedOffsetZone = `UTC${offsetMinutes >= 0 ? '+' : ''}${Duration.fromObject({ minutes: offsetMinutes }).toFormat('hh:mm')}`;
// Create a DateTime object in this fixed-offset zone, preserving the local time.
const finalDateTime = DateTime.fromObject(dtComponents.toObject(), { zone: fixedOffsetZone });
const finalDateTime = DateTime.fromObject(dtComponents.toObject(), { zone: fixedOffsetZone }) as DateTime<true>;
onConfirm({ mode: 'absolute', date: finalDateTime.toISO({ includeOffset: true })! });
onConfirm({
mode: 'absolute',
date: finalDateTime.toISO({ includeOffset: true }),
dateTime: finalDateTime,
});
}
if (showRelative && (selectedDuration || selectedRelativeOption)) {
@@ -238,7 +246,8 @@
<ConfirmModal
confirmColor="primary"
{title}
icon={mdiCalendarEditOutline}
{icon}
{confirmText}
prompt="Please select a new date:"
disabled={!date.isValid}
onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}