mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat: batch change date and time relatively (#17717)
Co-authored-by: marcel.kuehne <> Co-authored-by: Zack Pollard <zackpollard@ymail.com>
This commit is contained in:
mkuehne707
GitHub
parent
df2525ee08
commit
011a667314
19 changed files with 574 additions and 52 deletions
|
|
@ -1,15 +1,21 @@
|
|||
import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
|
||||
import { getVisualViewportMock } from '$lib/__mocks__/visual-viewport.mock';
|
||||
import { fireEvent, render, screen } from '@testing-library/svelte';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { DateTime } from 'luxon';
|
||||
import ChangeDate from './change-date.svelte';
|
||||
|
||||
describe('ChangeDate component', () => {
|
||||
const initialDate = DateTime.fromISO('2024-01-01');
|
||||
const initialTimeZone = 'Europe/Berlin';
|
||||
const currentInterval = {
|
||||
start: DateTime.fromISO('2000-02-01T14:00:00+01:00'),
|
||||
end: DateTime.fromISO('2001-02-01T14:00:00+01:00'),
|
||||
};
|
||||
const onCancel = vi.fn();
|
||||
const onConfirm = vi.fn();
|
||||
|
||||
const getRelativeInputToggle = () => screen.getByTestId('edit-by-offset-switch');
|
||||
const getDateInput = () => screen.getByLabelText('date_and_time') as HTMLInputElement;
|
||||
const getTimeZoneInput = () => screen.getByLabelText('timezone') as HTMLInputElement;
|
||||
const getCancelButton = () => screen.getByText('Cancel');
|
||||
|
|
@ -37,7 +43,7 @@ describe('ChangeDate component', () => {
|
|||
|
||||
await fireEvent.click(getConfirmButton());
|
||||
|
||||
expect(onConfirm).toHaveBeenCalledWith('2024-01-01T00:00:00.000+01:00');
|
||||
expect(onConfirm).toHaveBeenCalledWith({ mode: 'absolute', date: '2024-01-01T00:00:00.000+01:00' });
|
||||
});
|
||||
|
||||
test('calls onCancel on cancel', async () => {
|
||||
|
|
@ -66,7 +72,112 @@ describe('ChangeDate component', () => {
|
|||
|
||||
await fireEvent.click(getConfirmButton());
|
||||
|
||||
expect(onConfirm).toHaveBeenCalledWith('2024-07-01T00:00:00.000+02:00');
|
||||
expect(onConfirm).toHaveBeenCalledWith({ mode: 'absolute', date: '2024-07-01T00:00:00.000+02:00' });
|
||||
});
|
||||
});
|
||||
|
||||
test('calls onConfirm with correct offset in relative mode', async () => {
|
||||
render(ChangeDate, {
|
||||
props: { initialDate, initialTimeZone, currentInterval, onCancel, onConfirm },
|
||||
});
|
||||
|
||||
await fireEvent.click(getRelativeInputToggle());
|
||||
|
||||
const dayInput = screen.getByPlaceholderText('days');
|
||||
const hoursInput = screen.getByPlaceholderText('hours');
|
||||
const minutesInput = screen.getByPlaceholderText('minutes');
|
||||
|
||||
const days = 5;
|
||||
const hours = 4;
|
||||
const minutes = 3;
|
||||
|
||||
await fireEvent.input(dayInput, { target: { value: days } });
|
||||
await fireEvent.input(hoursInput, { target: { value: hours } });
|
||||
await fireEvent.input(minutesInput, { target: { value: minutes } });
|
||||
|
||||
await fireEvent.click(getConfirmButton());
|
||||
|
||||
expect(onConfirm).toHaveBeenCalledWith({
|
||||
mode: 'relative',
|
||||
duration: days * 60 * 24 + hours * 60 + minutes,
|
||||
timeZone: undefined,
|
||||
});
|
||||
});
|
||||
|
||||
test('calls onConfirm with correct timeZone in relative mode', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(ChangeDate, {
|
||||
props: { initialDate, initialTimeZone, currentInterval, onCancel, onConfirm },
|
||||
});
|
||||
|
||||
await user.click(getRelativeInputToggle());
|
||||
await user.type(getTimeZoneInput(), initialTimeZone);
|
||||
await user.keyboard('{ArrowDown}');
|
||||
await user.keyboard('{Enter}');
|
||||
|
||||
await user.click(getConfirmButton());
|
||||
expect(onConfirm).toHaveBeenCalledWith({
|
||||
mode: 'relative',
|
||||
duration: 0,
|
||||
timeZone: initialTimeZone,
|
||||
});
|
||||
});
|
||||
|
||||
test('correctly handles date preview', () => {
|
||||
const testCases = [
|
||||
{
|
||||
timestamp: DateTime.fromISO('2024-01-01T00:00:00.000+01:00', { setZone: true }),
|
||||
duration: 0,
|
||||
timezone: undefined,
|
||||
expectedResult: 'Jan 1, 2024, 12:00 AM GMT+01:00',
|
||||
},
|
||||
{
|
||||
timestamp: DateTime.fromISO('2024-01-01T04:00:00.000+05:00', { setZone: true }),
|
||||
duration: 0,
|
||||
timezone: undefined,
|
||||
expectedResult: 'Jan 1, 2024, 4:00 AM GMT+05:00',
|
||||
},
|
||||
{
|
||||
timestamp: DateTime.fromISO('2024-01-01T00:00:00.000+00:00', { setZone: true }),
|
||||
duration: 0,
|
||||
timezone: 'Europe/Berlin',
|
||||
expectedResult: 'Jan 1, 2024, 1:00 AM GMT+01:00',
|
||||
},
|
||||
{
|
||||
timestamp: DateTime.fromISO('2024-07-01T00:00:00.000+00:00', { setZone: true }),
|
||||
duration: 0,
|
||||
timezone: 'Europe/Berlin',
|
||||
expectedResult: 'Jul 1, 2024, 2:00 AM GMT+02:00',
|
||||
},
|
||||
{
|
||||
timestamp: DateTime.fromISO('2024-01-01T00:00:00.000+01:00', { setZone: true }),
|
||||
duration: 1440,
|
||||
timezone: undefined,
|
||||
expectedResult: 'Jan 2, 2024, 12:00 AM GMT+01:00',
|
||||
},
|
||||
{
|
||||
timestamp: DateTime.fromISO('2024-01-01T00:00:00.000+01:00', { setZone: true }),
|
||||
duration: -1440,
|
||||
timezone: undefined,
|
||||
expectedResult: 'Dec 31, 2023, 12:00 AM GMT+01:00',
|
||||
},
|
||||
{
|
||||
timestamp: DateTime.fromISO('2024-01-01T00:00:00.000-01:00', { setZone: true }),
|
||||
duration: -1440,
|
||||
timezone: 'America/Anchorage',
|
||||
expectedResult: 'Dec 30, 2023, 4:00 PM GMT-09:00',
|
||||
},
|
||||
];
|
||||
|
||||
const component = render(ChangeDate, {
|
||||
props: { initialDate, initialTimeZone, currentInterval, onCancel, onConfirm },
|
||||
});
|
||||
|
||||
for (const testCase of testCases) {
|
||||
expect(
|
||||
component.component.calcNewDate(testCase.timestamp, testCase.duration, testCase.timezone),
|
||||
JSON.stringify(testCase),
|
||||
).toBe(testCase.expectedResult);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,14 +5,21 @@
|
|||
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';
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
initialDate?: DateTime;
|
||||
initialTimeZone?: string;
|
||||
timezoneInput?: boolean;
|
||||
withDuration?: boolean;
|
||||
currentInterval?: { start: DateTime; end: DateTime };
|
||||
onCancel: () => void;
|
||||
onConfirm: (date: string) => void;
|
||||
onConfirm: (result: AbsoluteResult | RelativeResult) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
|
|
@ -20,10 +27,23 @@
|
|||
initialTimeZone = '',
|
||||
title = $t('edit_date_and_time'),
|
||||
timezoneInput = true,
|
||||
withDuration = true,
|
||||
currentInterval = undefined,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
}: Props = $props();
|
||||
|
||||
export type AbsoluteResult = {
|
||||
mode: 'absolute';
|
||||
date: string;
|
||||
};
|
||||
|
||||
export type RelativeResult = {
|
||||
mode: 'relative';
|
||||
duration?: number;
|
||||
timeZone?: string;
|
||||
};
|
||||
|
||||
type ZoneOption = {
|
||||
/**
|
||||
* Timezone name with offset
|
||||
|
|
@ -61,6 +81,10 @@
|
|||
valid: boolean;
|
||||
};
|
||||
|
||||
let showRelative = $state(false);
|
||||
|
||||
let selectedDuration = $state(0);
|
||||
|
||||
const knownTimezones = Intl.supportedValuesOf('timeZone');
|
||||
|
||||
const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||
|
|
@ -74,7 +98,10 @@
|
|||
.filter((zone) => zone.valid)
|
||||
.sort((zoneA, zoneB) => sortTwoZones(zoneA, zoneB));
|
||||
// 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 = $state(getPreferredTimeZone(initialDate, userTimeZone, timezones));
|
||||
let selectedAbsoluteOption: ZoneOption | undefined = $state(
|
||||
getPreferredTimeZone(userTimeZone, timezones, initialDate),
|
||||
);
|
||||
let selectedRelativeOption: ZoneOption | undefined = $state(undefined);
|
||||
|
||||
function zoneOptionForDate(zone: string, date: string) {
|
||||
const { offsetMinutes, offsetFormat: zoneOffsetAtDate } = getModernOffsetForZoneAndDate(zone, date);
|
||||
|
|
@ -104,16 +131,20 @@
|
|||
* to show "Europe/Berlin" instead of the lexicographically first entry "Africa/Blantyre".
|
||||
*/
|
||||
function getPreferredTimeZone(
|
||||
date: DateTime,
|
||||
userTimeZone: string,
|
||||
timezones: ZoneOption[],
|
||||
date?: DateTime,
|
||||
selectedOption?: ZoneOption,
|
||||
) {
|
||||
const offset = date.offset;
|
||||
const offset = date?.offset;
|
||||
const previousSelection = timezones.find((item) => item.value === selectedOption?.value);
|
||||
const fromInitialTimeZone = timezones.find((item) => item.value === initialTimeZone);
|
||||
const sameAsUserTimeZone = timezones.find((item) => item.offsetMinutes === offset && item.value === userTimeZone);
|
||||
const firstWithSameOffset = timezones.find((item) => item.offsetMinutes === offset);
|
||||
let sameAsUserTimeZone;
|
||||
let firstWithSameOffset;
|
||||
if (offset !== undefined) {
|
||||
sameAsUserTimeZone = timezones.find((item) => item.offsetMinutes === offset && item.value === userTimeZone);
|
||||
firstWithSameOffset = timezones.find((item) => item.offsetMinutes === offset);
|
||||
}
|
||||
const utcFallback = {
|
||||
label: 'UTC (+00:00)',
|
||||
offsetMinutes: 0,
|
||||
|
|
@ -150,12 +181,12 @@
|
|||
}
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (date.isValid && selectedOption) {
|
||||
if (!showRelative && date.isValid && selectedAbsoluteOption) {
|
||||
// Get the local date/time components from the selected string using neutral timezone
|
||||
const dtComponents = DateTime.fromISO(selectedDate, { zone: 'utc' });
|
||||
|
||||
// Determine the modern, DST-aware offset for the selected IANA zone
|
||||
const { offsetMinutes } = getModernOffsetForZoneAndDate(selectedOption.value, selectedDate);
|
||||
const { offsetMinutes } = getModernOffsetForZoneAndDate(selectedAbsoluteOption.value, selectedDate);
|
||||
|
||||
// Construct the final ISO string with a fixed-offset zone.
|
||||
const fixedOffsetZone = `UTC${offsetMinutes >= 0 ? '+' : ''}${Duration.fromObject({ minutes: offsetMinutes }).toFormat('hh:mm')}`;
|
||||
|
|
@ -163,17 +194,45 @@
|
|||
// Create a DateTime object in this fixed-offset zone, preserving the local time.
|
||||
const finalDateTime = DateTime.fromObject(dtComponents.toObject(), { zone: fixedOffsetZone });
|
||||
|
||||
onConfirm(finalDateTime.toISO({ includeOffset: true })!);
|
||||
onConfirm({ mode: 'absolute', date: finalDateTime.toISO({ includeOffset: true })! });
|
||||
}
|
||||
|
||||
if (showRelative && (selectedDuration || selectedRelativeOption)) {
|
||||
onConfirm({ mode: 'relative', duration: selectedDuration, timeZone: selectedRelativeOption?.value });
|
||||
}
|
||||
};
|
||||
|
||||
const handleOnSelect = (option?: ComboBoxOption) => {
|
||||
if (option) {
|
||||
selectedOption = getPreferredTimeZone(initialDate, userTimeZone, timezones, option as ZoneOption);
|
||||
if (showRelative) {
|
||||
selectedRelativeOption = option
|
||||
? getPreferredTimeZone(userTimeZone, timezones, undefined, option as ZoneOption)
|
||||
: undefined;
|
||||
} else {
|
||||
if (option) {
|
||||
selectedAbsoluteOption = getPreferredTimeZone(userTimeZone, timezones, initialDate, option as ZoneOption);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let selectedOption = $derived(showRelative ? selectedRelativeOption : selectedAbsoluteOption);
|
||||
|
||||
// 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 }));
|
||||
let date = $derived(DateTime.fromISO(selectedDate, { zone: selectedAbsoluteOption?.value, setZone: true }));
|
||||
|
||||
export function calcNewDate(timestamp: DateTime, selectedDuration: number, timezone?: string) {
|
||||
timestamp = timestamp.plus({ minutes: selectedDuration });
|
||||
if (timezone) {
|
||||
timestamp = timestamp.setZone(timezone);
|
||||
}
|
||||
return getDateTimeOffsetLocaleString(timestamp, { locale: get(locale) });
|
||||
}
|
||||
|
||||
let intervalFrom = $derived.by(() =>
|
||||
currentInterval ? calcNewDate(currentInterval.start, selectedDuration, selectedRelativeOption?.value) : undefined,
|
||||
);
|
||||
let intervalTo = $derived.by(() =>
|
||||
currentInterval ? calcNewDate(currentInterval.end, selectedDuration, selectedRelativeOption?.value) : undefined,
|
||||
);
|
||||
</script>
|
||||
|
||||
<ConfirmModal
|
||||
|
|
@ -185,22 +244,42 @@
|
|||
onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
|
||||
>
|
||||
{#snippet promptSnippet()}
|
||||
<div class="flex flex-col text-start 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} />
|
||||
{#if withDuration}
|
||||
<div class="mb-5">
|
||||
<Field label={$t('edit_date_and_time_by_offset')}>
|
||||
<Switch data-testid="edit-by-offset-switch" bind:checked={showRelative} />
|
||||
</Field>
|
||||
</div>
|
||||
{#if timezoneInput}
|
||||
<div>
|
||||
<Combobox
|
||||
bind:selectedOption
|
||||
label={$t('timezone')}
|
||||
options={timezones}
|
||||
placeholder={$t('search_timezone')}
|
||||
onSelect={(option) => handleOnSelect(option)}
|
||||
/>
|
||||
{/if}
|
||||
<div class="flex flex-col text-start min-h-[140px]">
|
||||
<div>
|
||||
<div class="flex flex-col" style="display: {showRelative ? 'none' : 'flex'}">
|
||||
<label for="datetime">{$t('date_and_time')}</label>
|
||||
<DateInput class="immich-form-input" id="datetime" type="datetime-local" bind:value={selectedDate} />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex flex-col" style="display: {showRelative ? 'flex' : 'none'}">
|
||||
<div class="flex flex-col">
|
||||
<label for="relativedatetime">{$t('offset')}</label>
|
||||
<DurationInput class="immich-form-input" id="relativedatetime" bind:value={selectedDuration} />
|
||||
</div>
|
||||
</div>
|
||||
{#if timezoneInput}
|
||||
<div>
|
||||
<Combobox
|
||||
bind:selectedOption
|
||||
label={$t('timezone')}
|
||||
options={timezones}
|
||||
placeholder={$t('search_timezone')}
|
||||
onSelect={(option) => handleOnSelect(option)}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex flex-col" style="display: {showRelative && currentInterval ? 'flex' : 'none'}">
|
||||
<span data-testid="interval-preview"
|
||||
>{$t('edit_date_and_time_by_offset_interval', { values: { from: intervalFrom, to: intervalTo } })}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</ConfirmModal>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue