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
|
|
@ -5,7 +5,10 @@
|
|||
import DetailPanelRating from '$lib/components/asset-viewer/detail-panel-star-rating.svelte';
|
||||
import DetailPanelTags from '$lib/components/asset-viewer/detail-panel-tags.svelte';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import ChangeDate from '$lib/components/shared-components/change-date.svelte';
|
||||
import ChangeDate, {
|
||||
type AbsoluteResult,
|
||||
type RelativeResult,
|
||||
} from '$lib/components/shared-components/change-date.svelte';
|
||||
import { AppRoute, QueryParameter, timeToLoadTheMap } from '$lib/constants';
|
||||
import { authManager } from '$lib/managers/auth-manager.svelte';
|
||||
import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
|
||||
|
|
@ -147,10 +150,12 @@
|
|||
|
||||
let isShowChangeDate = $state(false);
|
||||
|
||||
async function handleConfirmChangeDate(dateTimeOriginal: string) {
|
||||
async function handleConfirmChangeDate(result: AbsoluteResult | RelativeResult) {
|
||||
isShowChangeDate = false;
|
||||
try {
|
||||
await updateAsset({ id: asset.id, updateAssetDto: { dateTimeOriginal } });
|
||||
if (result.mode === 'absolute') {
|
||||
await updateAsset({ id: asset.id, updateAssetDto: { dateTimeOriginal: result.date } });
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_change_date'));
|
||||
}
|
||||
|
|
@ -369,6 +374,7 @@
|
|||
<ChangeDate
|
||||
initialDate={dateTime}
|
||||
initialTimeZone={timeZone ?? ''}
|
||||
withDuration={false}
|
||||
onConfirm={handleConfirmChangeDate}
|
||||
onCancel={() => (isShowChangeDate = false)}
|
||||
/>
|
||||
|
|
|
|||
52
web/src/lib/components/elements/duration-input.svelte
Normal file
52
web/src/lib/components/elements/duration-input.svelte
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<script lang="ts">
|
||||
import { t } from 'svelte-i18n';
|
||||
import { Duration } from 'luxon';
|
||||
|
||||
interface Props {
|
||||
value: number;
|
||||
class?: string;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
let { value = $bindable(), class: className = '', ...rest }: Props = $props();
|
||||
|
||||
function minToParts(minutes: number) {
|
||||
const duration = Duration.fromObject({ minutes: Math.abs(minutes) }).shiftTo('days', 'hours', 'minutes');
|
||||
return {
|
||||
sign: minutes < 0 ? -1 : 1,
|
||||
days: duration.days === 0 ? null : duration.days,
|
||||
hours: duration.hours === 0 ? null : duration.hours,
|
||||
minutes: duration.minutes === 0 ? null : duration.minutes,
|
||||
};
|
||||
}
|
||||
|
||||
function partsToMin(sign: number, days: number | null, hours: number | null, minutes: number | null) {
|
||||
return (
|
||||
sign *
|
||||
Duration.fromObject({ days: days ?? 0, hours: hours ?? 0, minutes: minutes ?? 0 }).shiftTo('minutes').minutes
|
||||
);
|
||||
}
|
||||
|
||||
const initial = minToParts(value);
|
||||
let sign = $state(initial.sign);
|
||||
let days = $state(initial.days);
|
||||
let hours = $state(initial.hours);
|
||||
let minutes = $state(initial.minutes);
|
||||
|
||||
$effect(() => {
|
||||
value = partsToMin(sign, days, hours, minutes);
|
||||
});
|
||||
|
||||
function toggleSign() {
|
||||
sign = -sign;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class={`flex gap-2 ${className}`} {...rest}>
|
||||
<button type="button" class="w-8 text-xl font-bold leading-none" onclick={toggleSign} title="Toggle sign">
|
||||
{sign >= 0 ? '+' : '-'}
|
||||
</button>
|
||||
<input type="number" min="0" placeholder={$t('days')} class="w-1/3" bind:value={days} />
|
||||
<input type="number" min="0" max="23" placeholder={$t('hours')} class="w-1/3" bind:value={hours} />
|
||||
<input type="number" min="0" max="59" placeholder={$t('minutes')} class="w-1/3" bind:value={minutes} />
|
||||
</div>
|
||||
|
|
@ -1,14 +1,18 @@
|
|||
<script lang="ts">
|
||||
import ChangeDate from '$lib/components/shared-components/change-date.svelte';
|
||||
import ChangeDate, {
|
||||
type AbsoluteResult,
|
||||
type RelativeResult,
|
||||
} from '$lib/components/shared-components/change-date.svelte';
|
||||
import { user } from '$lib/stores/user.store';
|
||||
import { getSelectedAssets } from '$lib/utils/asset-utils';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { updateAssets } from '@immich/sdk';
|
||||
import { mdiCalendarEditOutline } from '@mdi/js';
|
||||
import { DateTime } from 'luxon';
|
||||
import { DateTime, Duration } from 'luxon';
|
||||
import { t } from 'svelte-i18n';
|
||||
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
|
||||
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
|
||||
import { fromTimelinePlainDateTime } from '$lib/utils/timeline-util.js';
|
||||
interface Props {
|
||||
menuItem?: boolean;
|
||||
}
|
||||
|
|
@ -18,12 +22,49 @@
|
|||
|
||||
let isShowChangeDate = $state(false);
|
||||
|
||||
const handleConfirm = async (dateTimeOriginal: string) => {
|
||||
let currentInterval = $derived.by(() => {
|
||||
if (isShowChangeDate) {
|
||||
const ids = getSelectedAssets(getOwnedAssets(), $user);
|
||||
const assets = getOwnedAssets().filter((asset) => ids.includes(asset.id));
|
||||
const imageTimestamps = assets.map((asset) => {
|
||||
let localDateTime = fromTimelinePlainDateTime(asset.localDateTime);
|
||||
let fileCreatedAt = fromTimelinePlainDateTime(asset.fileCreatedAt);
|
||||
let offsetMinutes = localDateTime.diff(fileCreatedAt, 'minutes').shiftTo('minutes').minutes;
|
||||
const timeZone = `UTC${offsetMinutes >= 0 ? '+' : ''}${Duration.fromObject({ minutes: offsetMinutes }).toFormat('hh:mm')}`;
|
||||
return fileCreatedAt.setZone('utc', { keepLocalTime: true }).setZone(timeZone);
|
||||
});
|
||||
let minTimestamp = imageTimestamps[0];
|
||||
let maxTimestamp = imageTimestamps[0];
|
||||
for (let current of imageTimestamps) {
|
||||
if (current < minTimestamp) {
|
||||
minTimestamp = current;
|
||||
}
|
||||
|
||||
if (current > maxTimestamp) {
|
||||
maxTimestamp = current;
|
||||
}
|
||||
}
|
||||
return { start: minTimestamp, end: maxTimestamp };
|
||||
}
|
||||
return undefined;
|
||||
});
|
||||
|
||||
const handleConfirm = async (result: AbsoluteResult | RelativeResult) => {
|
||||
isShowChangeDate = false;
|
||||
const ids = getSelectedAssets(getOwnedAssets(), $user);
|
||||
|
||||
try {
|
||||
await updateAssets({ assetBulkUpdateDto: { ids, dateTimeOriginal } });
|
||||
if (result.mode === 'absolute') {
|
||||
await updateAssets({ assetBulkUpdateDto: { ids, dateTimeOriginal: result.date } });
|
||||
} else if (result.mode === 'relative') {
|
||||
await updateAssets({
|
||||
assetBulkUpdateDto: {
|
||||
ids,
|
||||
dateTimeRelative: result.duration,
|
||||
timeZone: result.timeZone,
|
||||
},
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_change_date'));
|
||||
}
|
||||
|
|
@ -35,5 +76,10 @@
|
|||
<MenuOption text={$t('change_date')} icon={mdiCalendarEditOutline} onClick={() => (isShowChangeDate = true)} />
|
||||
{/if}
|
||||
{#if isShowChangeDate}
|
||||
<ChangeDate initialDate={DateTime.now()} onConfirm={handleConfirm} onCancel={() => (isShowChangeDate = false)} />
|
||||
<ChangeDate
|
||||
initialDate={DateTime.now()}
|
||||
{currentInterval}
|
||||
onConfirm={handleConfirm}
|
||||
onCancel={() => (isShowChangeDate = false)}
|
||||
/>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -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