cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: date of birth modal (#18283)

Browse Source
This commit is contained in:
Daniel Dietzler
2025-05-14 14:20:22 +02:00
committed by GitHub
parent c9d45eee86
commit 4efc41d5d9
5 changed files with 100 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/routes/(user)/people/+page.svelte
+17 -42
View File
@@ -9,13 +9,14 @@
import PeopleCard from '$lib/components/faces-page/people-card.svelte';
import PeopleInfiniteScroll from '$lib/components/faces-page/people-infinite-scroll.svelte';
import SearchPeople from '$lib/components/faces-page/people-search.svelte';
import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { ActionQueryParameterValue, AppRoute, QueryParameter, SessionStorageKey } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import PersonEditBirthDateModal from '$lib/modals/PersonEditBirthDateModal.svelte';
import { locale } from '$lib/stores/preferences.store';
import { websocketEvents } from '$lib/stores/websocket';
import { handlePromiseError } from '$lib/utils';
@@ -45,7 +46,6 @@
let selectHidden = $state(false);
let searchName = $state('');
let showSetBirthDateModal = $state(false);
let showMergeModal = $state(false);
let newName = $state('');
let currentPage = $state(1);
@@ -53,7 +53,7 @@
let personMerge1 = $state<PersonResponseDto>();
let personMerge2 = $state<PersonResponseDto>();
let potentialMergePeople: PersonResponseDto[] = $state([]);
let edittingPerson: PersonResponseDto | null = $state(null);
let editingPerson: PersonResponseDto | null = $state(null);
let searchedPeopleLocal: PersonResponseDto[] = $state([]);
let innerHeight = $state(0);
let searchPeopleElement = $state<ReturnType<typeof SearchPeople>>();
@@ -135,7 +135,7 @@
const [personToMerge, personToBeMergedIn] = response;
showMergeModal = false;
if (!edittingPerson) {
if (!editingPerson) {
return;
}
try {
@@ -155,7 +155,7 @@
} catch (error) {
handleError(error, $t('errors.unable_to_save_name'));
}
if (personToBeMergedIn.name !== newName && edittingPerson.id === personToBeMergedIn.id) {
if (personToBeMergedIn.name !== newName && editingPerson.id === personToBeMergedIn.id) {
/*
*
* If the user merges one of the suggested people into the person he's editing it, it's merging the suggested person AND renames
@@ -181,11 +181,6 @@
}
};
const handleSetBirthDate = (detail: PersonResponseDto) => {
showSetBirthDateModal = true;
edittingPerson = detail;
};
const handleHidePerson = async (detail: PersonResponseDto) => {
try {
const updatedPerson = await updatePerson({
@@ -234,31 +229,19 @@
);
};
const submitBirthDateChange = async (value: string) => {
showSetBirthDateModal = false;
if (!edittingPerson || value === edittingPerson.birthDate) {
const handleChangeBirthDate = async (person: PersonResponseDto) => {
const updatedPerson = await modalManager.show(PersonEditBirthDateModal, { person });
if (!updatedPerson) {
return;
}
try {
const updatedPerson = await updatePerson({
id: edittingPerson.id,
personUpdateDto: { birthDate: value.length > 0 ? value : null },
});
people = people.map((person: PersonResponseDto) => {
if (person.id === updatedPerson.id) {
return updatedPerson;
}
return person;
});
notificationController.show({
message: $t('birthdate_saved'),
type: NotificationType.Info,
});
} catch (error) {
handleError(error, $t('errors.unable_to_save_name'));
}
people = people.map((person: PersonResponseDto) => {
if (person.id === updatedPerson.id) {
return updatedPerson;
}
return person;
});
};
const onResetSearchBar = async () => {
@@ -274,7 +257,7 @@
let showPeople = $derived(searchName ? searchedPeopleLocal : visiblePeople);
const onNameChangeInputFocus = (person: PersonResponseDto) => {
edittingPerson = person;
editingPerson = person;
newName = person.name;
};
@@ -414,7 +397,7 @@
>
<PeopleCard
{person}
onSetBirthDate={() => handleSetBirthDate(person)}
onSetBirthDate={() => handleChangeBirthDate(person)}
onMergePeople={() => handleMergePeople(person)}
onHidePerson={() => handleHidePerson(person)}
onToggleFavorite={() => handleToggleFavorite(person)}
@@ -444,14 +427,6 @@
</div>
</div>
{/if}
{#if showSetBirthDateModal}
<SetBirthDateModal
birthDate={edittingPerson?.birthDate ?? ''}
onClose={() => (showSetBirthDateModal = false)}
onUpdate={submitBirthDateChange}
/>
{/if}
</UserPageLayout>
{#if selectHidden}
web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+16 -35
View File
@@ -8,7 +8,6 @@
import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
import MergeFaceSelector from '$lib/components/faces-page/merge-face-selector.svelte';
import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
import UnMergeFaceSelector from '$lib/components/faces-page/unmerge-face-selector.svelte';
import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
@@ -31,6 +30,8 @@
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { AppRoute, PersonPageViewMode, QueryParameter, SessionStorageKey } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import PersonEditBirthDateModal from '$lib/modals/PersonEditBirthDateModal.svelte';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { AssetStore } from '$lib/stores/assets-store.svelte';
@@ -322,27 +323,19 @@
await changeName();
};
const handleSetBirthDate = async (birthDate: string) => {
try {
viewMode = PersonPageViewMode.VIEW_ASSETS;
person.birthDate = birthDate;
const handleSetBirthDate = async () => {
const updatedPerson = await modalManager.show(PersonEditBirthDateModal, { person });
const updatedPerson = await updatePerson({
id: person.id,
personUpdateDto: { birthDate: birthDate.length > 0 ? birthDate : null },
});
people = people.map((person: PersonResponseDto) => {
if (person.id === updatedPerson.id) {
return updatedPerson;
}
return person;
});
notificationController.show({ message: $t('date_of_birth_saved'), type: NotificationType.Info });
} catch (error) {
handleError(error, $t('errors.unable_to_save_date_of_birth'));
if (!updatedPerson) {
return;
}
people = people.map((person: PersonResponseDto) => {
if (person.id === updatedPerson.id) {
return updatedPerson;
}
return person;
});
};
const handleGoBack = async () => {
@@ -389,7 +382,7 @@
onSelect={handleSelectFeaturePhoto}
onEscape={handleEscape}
>
{#if viewMode === PersonPageViewMode.VIEW_ASSETS || viewMode === PersonPageViewMode.SUGGEST_MERGE || viewMode === PersonPageViewMode.BIRTH_DATE}
{#if viewMode === PersonPageViewMode.VIEW_ASSETS || viewMode === PersonPageViewMode.SUGGEST_MERGE}
<!-- Person information block -->
<div
class="relative w-fit p-4 sm:px-6"
@@ -515,14 +508,6 @@
/>
{/if}
{#if viewMode === PersonPageViewMode.BIRTH_DATE}
<SetBirthDateModal
birthDate={person.birthDate ?? ''}
onClose={() => (viewMode = PersonPageViewMode.VIEW_ASSETS)}
onUpdate={handleSetBirthDate}
/>
{/if}
{#if viewMode === PersonPageViewMode.MERGE_PEOPLE}
<MergeFaceSelector {person} onBack={handleGoBack} onMerge={handleMerge} />
{/if}
@@ -568,7 +553,7 @@
</ButtonContextMenu>
</AssetSelectControlBar>
{:else}
{#if viewMode === PersonPageViewMode.VIEW_ASSETS || viewMode === PersonPageViewMode.SUGGEST_MERGE || viewMode === PersonPageViewMode.BIRTH_DATE}
{#if viewMode === PersonPageViewMode.VIEW_ASSETS || viewMode === PersonPageViewMode.SUGGEST_MERGE}
<ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(previousRoute)}>
{#snippet trailing()}
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
@@ -582,11 +567,7 @@
icon={person.isHidden ? mdiEyeOutline : mdiEyeOffOutline}
onClick={() => toggleHidePerson()}
/>
<MenuOption
text={$t('set_date_of_birth')}
icon={mdiCalendarEditOutline}
onClick={() => (viewMode = PersonPageViewMode.BIRTH_DATE)}
/>
<MenuOption text={$t('set_date_of_birth')} icon={mdiCalendarEditOutline} onClick={handleSetBirthDate} />
<MenuOption
text={$t('merge_people')}
icon={mdiAccountMultipleCheckOutline}