mirror of
https://github.com/immich-app/immich.git
synced 2025-01-27 22:22:45 +01:00
fix(web): prevent resetting date input when entering 0 (#7415)
* fix(web): prevent resetting date input when entering 0 * resolve conflict --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
parent
99a002b947
commit
4272b496ff
5 changed files with 35 additions and 6 deletions
web/src/lib/components
elements
faces-page
map-page
shared-components
24
web/src/lib/components/elements/date-input.svelte
Normal file
24
web/src/lib/components/elements/date-input.svelte
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import type { HTMLInputAttributes } from 'svelte/elements';
|
||||||
|
|
||||||
|
interface $$Props extends HTMLInputAttributes {
|
||||||
|
type: 'date' | 'datetime-local';
|
||||||
|
}
|
||||||
|
|
||||||
|
export let value: $$Props['value'] = undefined;
|
||||||
|
$: updatedValue = value;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input
|
||||||
|
{...$$restProps}
|
||||||
|
{value}
|
||||||
|
on:input={(e) => {
|
||||||
|
updatedValue = e.currentTarget.value;
|
||||||
|
|
||||||
|
// Only update when value is not empty to prevent resetting the input
|
||||||
|
if (updatedValue !== '') {
|
||||||
|
value = updatedValue;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
on:blur={() => (value = updatedValue)}
|
||||||
|
/>
|
|
@ -4,6 +4,7 @@
|
||||||
import FullScreenModal from '../shared-components/full-screen-modal.svelte';
|
import FullScreenModal from '../shared-components/full-screen-modal.svelte';
|
||||||
import { mdiCake } from '@mdi/js';
|
import { mdiCake } from '@mdi/js';
|
||||||
import Icon from '$lib/components/elements/icon.svelte';
|
import Icon from '$lib/components/elements/icon.svelte';
|
||||||
|
import DateInput from '../elements/date-input.svelte';
|
||||||
|
|
||||||
export let birthDate: string;
|
export let birthDate: string;
|
||||||
|
|
||||||
|
@ -37,7 +38,7 @@
|
||||||
|
|
||||||
<form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
|
<form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
|
||||||
<div class="m-4 flex flex-col gap-2">
|
<div class="m-4 flex flex-col gap-2">
|
||||||
<input
|
<DateInput
|
||||||
class="immich-form-input"
|
class="immich-form-input"
|
||||||
id="birthDate"
|
id="birthDate"
|
||||||
name="birthDate"
|
name="birthDate"
|
||||||
|
|
|
@ -8,6 +8,7 @@
|
||||||
import LinkButton from '../elements/buttons/link-button.svelte';
|
import LinkButton from '../elements/buttons/link-button.svelte';
|
||||||
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
|
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
|
||||||
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
|
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
|
||||||
|
import DateInput from '../elements/date-input.svelte';
|
||||||
|
|
||||||
export let settings: MapSettings;
|
export let settings: MapSettings;
|
||||||
let customDateRange = !!settings.dateAfter || !!settings.dateBefore;
|
let customDateRange = !!settings.dateAfter || !!settings.dateBefore;
|
||||||
|
@ -38,7 +39,7 @@
|
||||||
<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">
|
<div class="flex items-center justify-between gap-8">
|
||||||
<label class="immich-form-label shrink-0 text-sm" for="date-after">Date after</label>
|
<label class="immich-form-label shrink-0 text-sm" for="date-after">Date after</label>
|
||||||
<input
|
<DateInput
|
||||||
class="immich-form-input w-40"
|
class="immich-form-input w-40"
|
||||||
type="date"
|
type="date"
|
||||||
id="date-after"
|
id="date-after"
|
||||||
|
@ -48,7 +49,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center justify-between gap-8">
|
<div class="flex items-center justify-between gap-8">
|
||||||
<label class="immich-form-label shrink-0 text-sm" for="date-before">Date before</label>
|
<label class="immich-form-label shrink-0 text-sm" for="date-before">Date before</label>
|
||||||
<input class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
|
<DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex justify-center text-xs">
|
<div class="flex justify-center text-xs">
|
||||||
<LinkButton
|
<LinkButton
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
import { DateTime } from 'luxon';
|
import { DateTime } from 'luxon';
|
||||||
import ConfirmDialogue from './confirm-dialogue.svelte';
|
import ConfirmDialogue from './confirm-dialogue.svelte';
|
||||||
import Combobox from './combobox.svelte';
|
import Combobox from './combobox.svelte';
|
||||||
|
import DateInput from '../elements/date-input.svelte';
|
||||||
|
|
||||||
export let initialDate: DateTime = DateTime.now();
|
export let initialDate: DateTime = DateTime.now();
|
||||||
|
|
||||||
|
@ -74,7 +75,7 @@
|
||||||
<div class="mt-2" />
|
<div class="mt-2" />
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<label for="datetime">Date and Time</label>
|
<label for="datetime">Date and Time</label>
|
||||||
<input
|
<DateInput
|
||||||
class="immich-form-input text-sm my-4 w-full"
|
class="immich-form-input text-sm my-4 w-full"
|
||||||
id="datetime"
|
id="datetime"
|
||||||
type="datetime-local"
|
type="datetime-local"
|
||||||
|
|
|
@ -6,13 +6,15 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import DateInput from '$lib/components/elements/date-input.svelte';
|
||||||
|
|
||||||
export let filters: SearchDateFilter;
|
export let filters: SearchDateFilter;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="date-range-selection" class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-5">
|
<div id="date-range-selection" class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-5">
|
||||||
<label class="immich-form-label" for="start-date">
|
<label class="immich-form-label" for="start-date">
|
||||||
<span>START DATE</span>
|
<span>START DATE</span>
|
||||||
<input
|
<DateInput
|
||||||
class="immich-form-input w-full mt-1 hover:cursor-pointer"
|
class="immich-form-input w-full mt-1 hover:cursor-pointer"
|
||||||
type="date"
|
type="date"
|
||||||
id="start-date"
|
id="start-date"
|
||||||
|
@ -24,7 +26,7 @@
|
||||||
|
|
||||||
<label class="immich-form-label" for="end-date">
|
<label class="immich-form-label" for="end-date">
|
||||||
<span>END DATE</span>
|
<span>END DATE</span>
|
||||||
<input
|
<DateInput
|
||||||
class="immich-form-input w-full mt-1 hover:cursor-pointer"
|
class="immich-form-input w-full mt-1 hover:cursor-pointer"
|
||||||
type="date"
|
type="date"
|
||||||
id="end-date"
|
id="end-date"
|
||||||
|
|
Loading…
Reference in a new issue