github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-05-18 03:10:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore(web): use DatePicker component from UI lib (#28406)

Browse Source
This commit is contained in:
Mees Frensel
2026-05-13 16:37:07 +02:00
committed by GitHub
parent 0a4ed6fd71
commit 024f20ea26
5 changed files with 46 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
i18n/en.json
+1 -4
View File
@@ -885,15 +885,13 @@
"cutoff_date_description": "Keep photos from the last…", "cutoff_date_description": "Keep photos from the last…",
"cutoff_day": "{count, plural, one {day} other {days}}", "cutoff_day": "{count, plural, one {day} other {days}}",
"cutoff_year": "{count, plural, one {year} other {years}}", "cutoff_year": "{count, plural, one {year} other {years}}",
"daily_title_text_date": "E, MMM dd",
"daily_title_text_date_year": "E, MMM dd, yyyy",
"dark": "Dark", "dark": "Dark",
"dark_theme": "Switch to dark theme", "dark_theme": "Switch to dark theme",
"date": "Date", "date": "Date",
"date_after": "Date after", "date_after": "Date after",
"date_and_time": "Date and Time", "date_and_time": "Date and Time",
"date_before": "Date before", "date_before": "Date before",
"date_format": "E, LLL d, y • h:mm a", "date_of_birth": "Date of birth",
"date_of_birth_saved": "Date of birth saved successfully", "date_of_birth_saved": "Date of birth saved successfully",
"date_range": "Date range", "date_range": "Date range",
"day": "Day", "day": "Day",
@@ -1583,7 +1581,6 @@
"mobile_app_download_onboarding_note": "Download the companion mobile app using the following options", "mobile_app_download_onboarding_note": "Download the companion mobile app using the following options",
"model": "Model", "model": "Model",
"month": "Month", "month": "Month",
"monthly_title_text_date_format": "MMMM y",
"more": "More", "more": "More",
"motion": "Motion", "motion": "Motion",
"move": "Move", "move": "Move",
web/src/lib/components/shared-components/map/Map.svelte
+5 -11
View File
@@ -212,16 +212,10 @@
}; };
} }
try { return {
return { fileCreatedAfter: dateAfter?.toUTC().toISO(),
fileCreatedAfter: dateAfter ? new Date(dateAfter).toISOString() : undefined, fileCreatedBefore: dateBefore?.toUTC().toISO(),
fileCreatedBefore: dateBefore ? new Date(dateBefore).toISOString() : undefined, };
};
} catch {
$mapSettings.dateAfter = '';
$mapSettings.dateBefore = '';
return {};
}
} }
async function loadMapMarkers() { async function loadMapMarkers() {
@@ -237,7 +231,7 @@
{ {
isArchived: includeArchived || undefined, isArchived: includeArchived || undefined,
isFavorite: onlyFavorites || undefined, isFavorite: onlyFavorites || undefined,
fileCreatedAfter: fileCreatedAfter || undefined, fileCreatedAfter,
fileCreatedBefore, fileCreatedBefore,
withPartners: withPartners || undefined, withPartners: withPartners || undefined,
withSharedAlbums: withSharedAlbums || undefined, withSharedAlbums: withSharedAlbums || undefined,
web/src/lib/modals/MapSettingsModal.svelte
+27 -38
View File
@@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import DateInput from '$lib/elements/DateInput.svelte';
import type { MapSettings } from '$lib/stores/preferences.store'; import type { MapSettings } from '$lib/stores/preferences.store';
import { Button, Field, FormModal, Select, Stack, Switch } from '@immich/ui'; import { Button, DatePicker, Field, FormModal, Select, Stack, Switch } from '@immich/ui';
import { Duration } from 'luxon'; import { Duration } from 'luxon';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
@@ -41,29 +40,21 @@
{#if customDateRange} {#if customDateRange}
<div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4"> <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
<div class="flex items-center justify-between gap-8"> <Field label={$t('date_after')}>
<label class="shrink-0 text-sm immich-form-label" for="date-after">{$t('date_after')}</label> <DatePicker bind:value={settings.dateAfter} maxDate={settings.dateBefore} />
<DateInput </Field>
class="immich-form-input w-40" <Field label={$t('date_before')}>
type="date" <DatePicker bind:value={settings.dateBefore} />
id="date-after" </Field>
max={settings.dateBefore} <div class="flex justify-center">
bind:value={settings.dateAfter}
/>
</div>
<div class="flex items-center justify-between gap-8">
<label class="shrink-0 text-sm immich-form-label" for="date-before">{$t('date_before')}</label>
<DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
</div>
<div class="flex justify-center text-xs">
<Button <Button
color="primary" color="primary"
size="small" size="small"
variant="ghost" variant="ghost"
onclick={() => { onclick={() => {
customDateRange = false; customDateRange = false;
settings.dateAfter = ''; settings.dateAfter = undefined;
settings.dateBefore = ''; settings.dateBefore = undefined;
}} }}
> >
{$t('remove_custom_date_range')} {$t('remove_custom_date_range')}
@@ -71,7 +62,7 @@
</div> </div>
</div> </div>
{:else} {:else}
<div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-1"> <div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-2">
<Field label={$t('date_range')}> <Field label={$t('date_range')}>
<Select <Select
bind:value={settings.relativeDate} bind:value={settings.relativeDate}
@@ -82,40 +73,38 @@
}, },
{ {
label: $t('past_durations.hours', { values: { hours: 24 } }), label: $t('past_durations.hours', { values: { hours: 24 } }),
value: Duration.fromObject({ hours: 24 }).toISO() || '', value: Duration.fromObject({ hours: 24 }).toISO(),
}, },
{ {
label: $t('past_durations.days', { values: { days: 7 } }), label: $t('past_durations.days', { values: { days: 7 } }),
value: Duration.fromObject({ days: 7 }).toISO() || '', value: Duration.fromObject({ days: 7 }).toISO(),
}, },
{ {
label: $t('past_durations.days', { values: { days: 30 } }), label: $t('past_durations.days', { values: { days: 30 } }),
value: Duration.fromObject({ days: 30 }).toISO() || '', value: Duration.fromObject({ days: 30 }).toISO(),
}, },
{ {
label: $t('past_durations.years', { values: { years: 1 } }), label: $t('past_durations.years', { values: { years: 1 } }),
value: Duration.fromObject({ years: 1 }).toISO() || '', value: Duration.fromObject({ years: 1 }).toISO(),
}, },
{ {
label: $t('past_durations.years', { values: { years: 3 } }), label: $t('past_durations.years', { values: { years: 3 } }),
value: Duration.fromObject({ years: 3 }).toISO() || '', value: Duration.fromObject({ years: 3 }).toISO(),
}, },
]} ]}
/> />
</Field> </Field>
<div class="text-xs"> <Button
<Button color="primary"
color="primary" size="small"
size="small" variant="ghost"
variant="ghost" onclick={() => {
onclick={() => { customDateRange = true;
customDateRange = true; settings.relativeDate = '';
settings.relativeDate = ''; }}
}} >
> {$t('use_custom_date_range')}
{$t('use_custom_date_range')} </Button>
</Button>
</div>
</div> </div>
{/if} {/if}
</Stack> </Stack>
web/src/lib/modals/PersonEditBirthDateModal.svelte
+10 -17
View File
@@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import DateInput from '$lib/elements/DateInput.svelte';
import { handleUpdatePersonBirthDate } from '$lib/services/person.service'; import { handleUpdatePersonBirthDate } from '$lib/services/person.service';
import { type PersonResponseDto } from '@immich/sdk'; import { type PersonResponseDto } from '@immich/sdk';
import { Button, FormModal, Text } from '@immich/ui'; import { Button, DatePicker, Field, FormModal, HelperText } from '@immich/ui';
import { mdiCake } from '@mdi/js'; import { mdiCake } from '@mdi/js';
import { DateTime } from 'luxon';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
type Props = { type Props = {
@@ -12,32 +12,25 @@
}; };
let { person, onClose }: Props = $props(); let { person, onClose }: Props = $props();
let birthDate = $derived(person.birthDate ?? ''); let birthDate = $derived(person.birthDate ? DateTime.fromISO(person.birthDate) : undefined);
const onSubmit = async () => { const onSubmit = async () => {
const success = await handleUpdatePersonBirthDate(person, birthDate); const success = await handleUpdatePersonBirthDate(person, birthDate?.toISODate() ?? '');
if (success) { if (success) {
onClose(); onClose();
} }
}; };
const todayFormatted = new Date().toISOString().split('T')[0];
</script> </script>
<FormModal title={$t('set_date_of_birth')} size="small" icon={mdiCake} {onClose} {onSubmit}> <FormModal title={$t('set_date_of_birth')} size="small" icon={mdiCake} {onClose} {onSubmit}>
<Text size="small">{$t('birthdate_set_description')}</Text> <div class="my-2 flex flex-col gap-2">
<div class="my-4 flex flex-col gap-2"> <Field label={$t('date_of_birth')}>
<DateInput <DatePicker bind:value={birthDate} maxDate={DateTime.now()} />
class="immich-form-input" <HelperText>{$t('birthdate_set_description')}</HelperText>
id="birthDate" </Field>
name="birthDate"
type="date"
bind:value={birthDate}
max={todayFormatted}
/>
{#if person.birthDate} {#if person.birthDate}
<div class="flex justify-end"> <div class="flex justify-end">
<Button shape="round" color="secondary" size="small" onclick={() => (birthDate = '')}> <Button shape="round" color="secondary" size="small" onclick={() => (birthDate = undefined)}>
{$t('clear')} {$t('clear')}
</Button> </Button>
</div> </div>
web/src/lib/stores/preferences.store.ts
+3 -4
View File
@@ -1,3 +1,4 @@
import type { DateTime } from 'luxon';
import { persisted } from 'svelte-persisted-store'; import { persisted } from 'svelte-persisted-store';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { defaultLang } from '$lib/constants'; import { defaultLang } from '$lib/constants';
@@ -26,8 +27,8 @@ export interface MapSettings {
withPartners: boolean; withPartners: boolean;
withSharedAlbums: boolean; withSharedAlbums: boolean;
relativeDate: string; relativeDate: string;
dateAfter: string; dateAfter?: DateTime<true>;
dateBefore: string; dateBefore?: DateTime<true>;
} }
const defaultMapSettings = { const defaultMapSettings = {
@@ -37,8 +38,6 @@ const defaultMapSettings = {
withPartners: false, withPartners: false,
withSharedAlbums: false, withSharedAlbums: false,
relativeDate: '', relativeDate: '',
dateAfter: '',
dateBefore: '',
}; };
const persistedObject = <T>(key: string, defaults: T) => const persistedObject = <T>(key: string, defaults: T) =>