diff --git a/web/src/lib/components/album-page/album-summary.svelte b/web/src/lib/components/album-page/album-summary.svelte index 98109de92d..3e6e160c9c 100644 --- a/web/src/lib/components/album-page/album-summary.svelte +++ b/web/src/lib/components/album-page/album-summary.svelte @@ -1,6 +1,5 @@ <script lang="ts"> - import { dateFormats } from '$lib/constants'; - import { locale } from '$lib/stores/preferences.store'; + import { getAlbumDateRange } from '$lib/utils/date-time'; import type { AlbumResponseDto } from '@immich/sdk'; import { t } from 'svelte-i18n'; @@ -9,31 +8,10 @@ } let { album }: Props = $props(); - - const formatDate = (date?: string) => { - const dateWithoutTimeZone = date?.slice(0, -1); - return dateWithoutTimeZone - ? new Date(dateWithoutTimeZone).toLocaleDateString($locale, dateFormats.album) - : undefined; - }; - - const getDateRange = (start?: string, end?: string) => { - if (start && end && start !== end) { - return `${start} - ${end}`; - } - - if (start) { - return start; - } - - return ''; - }; - let startDate = $derived(formatDate(album.startDate)); - let endDate = $derived(formatDate(album.endDate)); </script> <span class="my-2 flex gap-2 text-sm font-medium text-gray-500" data-testid="album-details"> - <span>{getDateRange(startDate, endDate)}</span> + <span>{getAlbumDateRange(album)}</span> <span>•</span> <span>{$t('items_count', { values: { count: album.assetCount } })}</span> </span> diff --git a/web/src/lib/utils/date-time.spec.ts b/web/src/lib/utils/date-time.spec.ts index cbb08418c0..90db980e2a 100644 --- a/web/src/lib/utils/date-time.spec.ts +++ b/web/src/lib/utils/date-time.spec.ts @@ -1,4 +1,5 @@ -import { timeToSeconds } from './date-time'; +import { writable } from 'svelte/store'; +import { getAlbumDateRange, timeToSeconds } from './date-time'; describe('converting time to seconds', () => { it('parses hh:mm:ss correctly', () => { @@ -21,3 +22,30 @@ describe('converting time to seconds', () => { expect(timeToSeconds('01:02:03.456.123456')).toBeCloseTo(3723.456); }); }); + +describe('getAlbumDate', () => { + beforeAll(() => { + process.env.TZ = 'UTC'; + + vitest.mock('$lib/stores/preferences.store', () => ({ + locale: writable('en'), + })); + }); + + it('should work with only a start date', () => { + expect(getAlbumDateRange({ startDate: '2021-01-01T00:00:00Z' })).toEqual('Jan 1, 2021'); + }); + + it('should work with a start and end date', () => { + expect( + getAlbumDateRange({ + startDate: '2021-01-01T00:00:00Z', + endDate: '2021-01-05T00:00:00Z', + }), + ).toEqual('Jan 1, 2021 - Jan 5, 2021'); + }); + + it('should work with the new date format', () => { + expect(getAlbumDateRange({ startDate: '2021-01-01T00:00:00+05:00' })).toEqual('Jan 1, 2021'); + }); +}); diff --git a/web/src/lib/utils/date-time.ts b/web/src/lib/utils/date-time.ts index d5482f153f..ba22503c70 100644 --- a/web/src/lib/utils/date-time.ts +++ b/web/src/lib/utils/date-time.ts @@ -1,3 +1,4 @@ +import { dateFormats } from '$lib/constants'; import { locale } from '$lib/stores/preferences.store'; import { DateTime, Duration } from 'luxon'; import { get } from 'svelte/store'; @@ -51,3 +52,28 @@ export const getShortDateRange = (startDate: string | Date, endDate: string | Da return `${startDateLocalized} - ${endDateLocalized}`; } }; + +const formatDate = (date?: string) => { + if (!date) { + return; + } + + // without timezone + const localDate = date.replace(/Z$/, '').replace(/\+.+$/, ''); + return localDate ? new Date(localDate).toLocaleDateString(get(locale), dateFormats.album) : undefined; +}; + +export const getAlbumDateRange = (album: { startDate?: string; endDate?: string }) => { + const start = formatDate(album.startDate); + const end = formatDate(album.endDate); + + if (start && end && start !== end) { + return `${start} - ${end}`; + } + + if (start) { + return start; + } + + return ''; +};