helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-10-17 18:19:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): show danger/warning when taken dates overlap (#22213)

Browse source
This commit is contained in:
Jason Rasmussen 2025-09-19 12:20:09 -04:00 • committed by GitHub
parent 6da039780e
commit 34339ea69f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 22 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

1
i18n/en.json
View file

@ -1923,6 +1923,7 @@
"stacktrace": "Stacktrace", "stacktrace": "Stacktrace",
"start": "Start", "start": "Start",
"start_date": "Start date", "start_date": "Start date",
"start_date_before_end_date": "Start date must be before end date",
"state": "State", "state": "State",
"status": "Status", "status": "Status",
"stop_casting": "Stop casting", "stop_casting": "Stop casting",

31
web/src/lib/components/shared-components/search-bar/search-date-section.svelte
View file

@ -7,6 +7,7 @@
<script lang="ts"> <script lang="ts">
import DateInput from '$lib/elements/DateInput.svelte'; import DateInput from '$lib/elements/DateInput.svelte';
import { Text } from '@immich/ui';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
interface Props { interface Props {
@ -14,31 +15,27 @@
} }
let { filters = $bindable() }: Props = $props(); let { filters = $bindable() }: Props = $props();
let invalid = $derived(filters.takenAfter && filters.takenBefore && filters.takenAfter > filters.takenBefore);
const inputClasses = $derived(
`immich-form-input w-full mt-1 hover:cursor-pointer ${invalid ? 'border border-danger' : ''}`,
);
</script> </script>
<div class="flex flex-col gap-1">
<div id="date-range-selection" class="grid grid-auto-fit-40 gap-5"> <div id="date-range-selection" class="grid grid-auto-fit-40 gap-5">
<label class="immich-form-label" for="start-date"> <label class="immich-form-label" for="start-date">
<span class="uppercase">{$t('start_date')}</span> <span class="uppercase">{$t('start_date')}</span>
<DateInput <DateInput class={inputClasses} type="date" id="start-date" name="start-date" bind:value={filters.takenAfter} />
class="immich-form-input w-full mt-1 hover:cursor-pointer"
type="date"
id="start-date"
name="start-date"
max={filters.takenBefore}
bind:value={filters.takenAfter}
/>
</label> </label>
<label class="immich-form-label" for="end-date"> <label class="immich-form-label" for="end-date">
<span class="uppercase">{$t('end_date')}</span> <span class="uppercase">{$t('end_date')}</span>
<DateInput <DateInput class={inputClasses} type="date" id="end-date" name="end-date" bind:value={filters.takenBefore} />
class="immich-form-input w-full mt-1 hover:cursor-pointer"
type="date"
id="end-date"
name="end-date"
placeholder=""
min={filters.takenAfter}
bind:value={filters.takenBefore}
/>
</label> </label>
</div> </div>
{#if invalid}
<Text color="danger">{$t('start_date_before_end_date')}</Text>
{/if}
</div>