Skip to content

Commit

Permalink
fix(web): person asset grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@jrasm91
jrasm91 committed Sep 5, 2024
1 parent d6729c5 commit c37be10
Showing 1 changed file with 39 additions and 46 deletions.
85 changes: 39 additions & 46 deletions web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,19 @@
isArchived: false,
personId: data.person.id,
});
$: person = data.person;
$: thumbnailData = getPeopleThumbnailUrl(person);
$: if (person) {
void assetStore.updateOptions({ personId: person.id });
}
const assetInteractionStore = createAssetInteractionStore();
const { selectedAssets, isMultiSelectState } = assetInteractionStore;
let viewMode: ViewMode = ViewMode.VIEW_ASSETS;
let isEditingName = false;
let previousRoute: string = AppRoute.EXPLORE;
let previousPersonId: string = data.person.id;
let people: PersonResponseDto[] = [];
let personMerge1: PersonResponseDto;
let personMerge2: PersonResponseDto;
Expand All @@ -91,9 +97,6 @@
let refreshAssetGrid = false;
let personName = '';
$: thumbnailData = getPeopleThumbnailUrl(data.person);
let name: string = data.person.name;
let suggestedPeople: PersonResponseDto[] = [];
/**
Expand All @@ -120,8 +123,8 @@
}
return websocketEvents.on('on_person_thumbnail', (personId: string) => {
if (data.person.id === personId) {
thumbnailData = getPeopleThumbnailUrl(data.person, Date.now().toString());
if (person.id === personId) {
thumbnailData = getPeopleThumbnailUrl(person, Date.now().toString());
}
});
});
Expand All @@ -141,7 +144,7 @@
const updateAssetCount = async () => {
try {
const { assets } = await getPersonStatistics({ id: data.person.id });
const { assets } = await getPersonStatistics({ id: person.id });
numberOfAssets = assets;
} catch (error) {
handleError(error, "Can't update the asset count");
Expand All @@ -150,20 +153,11 @@
afterNavigate(({ from }) => {
// Prevent setting previousRoute to the current page.
if (from && from.route.id !== $page.route.id) {
if (from?.url && from.route.id !== $page.route.id) {
previousRoute = from.url.href;
}
if (previousPersonId !== data.person.id) {
handlePromiseError(updateAssetCount());
assetStore.destroy();
assetStore = new AssetStore({
isArchived: false,
personId: data.person.id,
});
previousPersonId = data.person.id;
name = data.person.name;
refreshAssetGrid = !refreshAssetGrid;
}
handlePromiseError(updateAssetCount());
});
const handleUnmerge = () => {
Expand All @@ -179,8 +173,8 @@
const toggleHidePerson = async () => {
try {
await updatePerson({
id: data.person.id,
personUpdateDto: { isHidden: !data.person.isHidden },
id: person.id,
personUpdateDto: { isHidden: !person.isHidden },
});
notificationController.show({
Expand Down Expand Up @@ -208,7 +202,7 @@
return;
}
try {
await updatePerson({ id: data.person.id, personUpdateDto: { featureFaceAssetId: asset.id } });
await updatePerson({ id: person.id, personUpdateDto: { featureFaceAssetId: asset.id } });
notificationController.show({ message: $t('feature_photo_updated'), type: NotificationType.Info });
} catch (error) {
handleError(error, $t('errors.unable_to_set_feature_photo'));
Expand All @@ -233,7 +227,7 @@
type: NotificationType.Info,
});
people = people.filter((person: PersonResponseDto) => person.id !== personToMerge.id);
if (personToBeMergedIn.name != personName && data.person.id === personToBeMergedIn.id) {
if (personToBeMergedIn.name != personName && person.id === personToBeMergedIn.id) {
await updateAssetCount();
refreshAssetGrid = !refreshAssetGrid;
return;
Expand All @@ -244,22 +238,22 @@
}
};
const handleSuggestPeople = (person: PersonResponseDto) => {
const handleSuggestPeople = (person2: PersonResponseDto) => {
isEditingName = false;
potentialMergePeople = [];
personName = person.name;
personMerge1 = data.person;
personMerge2 = person;
personMerge1 = person;
personMerge2 = person2;
viewMode = ViewMode.SUGGEST_MERGE;
};
const changeName = async () => {
viewMode = ViewMode.VIEW_ASSETS;
data.person.name = personName;
person.name = personName;
try {
isEditingName = false;
await updatePerson({ id: data.person.id, personUpdateDto: { name: personName } });
await updatePerson({ id: person.id, personUpdateDto: { name: personName } });
notificationController.show({
message: $t('change_name_successfully'),
Expand All @@ -283,7 +277,7 @@
potentialMergePeople = [];
personName = name;
if (data.person.name === personName) {
if (person.name === personName) {
return;
}
if (name === '') {
Expand All @@ -294,12 +288,11 @@
const result = await searchPerson({ name: personName, withHidden: true });
const existingPerson = result.find(
(person: PersonResponseDto) =>
person.name.toLowerCase() === personName.toLowerCase() && person.id !== data.person.id && person.name,
({ name, id }: PersonResponseDto) => name.toLowerCase() === personName.toLowerCase() && id !== person.id && name,
);
if (existingPerson) {
personMerge2 = existingPerson;
personMerge1 = data.person;
personMerge1 = person;
potentialMergePeople = result
.filter(
(person: PersonResponseDto) =>
Expand All @@ -318,10 +311,10 @@
const handleSetBirthDate = async (birthDate: string) => {
try {
viewMode = ViewMode.VIEW_ASSETS;
data.person.birthDate = birthDate;
person.birthDate = birthDate;
const updatedPerson = await updatePerson({
id: data.person.id,
id: person.id,
personUpdateDto: { birthDate: birthDate.length > 0 ? birthDate : null },
});
Expand Down Expand Up @@ -354,7 +347,7 @@
{#if viewMode === ViewMode.UNASSIGN_ASSETS}
<UnMergeFaceSelector
assetIds={[...$selectedAssets].map((a) => a.id)}
personAssets={data.person}
personAssets={person}
on:close={() => (viewMode = ViewMode.VIEW_ASSETS)}
on:confirm={handleUnmerge}
/>
Expand All @@ -373,14 +366,14 @@

{#if viewMode === ViewMode.BIRTH_DATE}
<SetBirthDateModal
birthDate={data.person.birthDate ?? ''}
birthDate={person.birthDate ?? ''}
on:close={() => (viewMode = ViewMode.VIEW_ASSETS)}
on:updated={(event) => handleSetBirthDate(event.detail)}
/>
{/if}

{#if viewMode === ViewMode.MERGE_PEOPLE}
<MergeFaceSelector person={data.person} on:back={handleGoBack} on:merge={({ detail }) => handleMerge(detail)} />
<MergeFaceSelector {person} on:back={handleGoBack} on:merge={({ detail }) => handleMerge(detail)} />
{/if}

<header>
Expand All @@ -394,7 +387,7 @@
</ButtonContextMenu>
<FavoriteAction removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
<ButtonContextMenu icon={mdiDotsVertical} title={$t('add')}>
<DownloadAction menuItem filename="{data.person.name || 'immich'}.zip" />
<DownloadAction menuItem filename="{person.name || 'immich'}.zip" />
<MenuOption
icon={mdiAccountMultipleCheckOutline}
text={$t('fix_incorrect_match')}
Expand All @@ -417,8 +410,8 @@
onClick={() => (viewMode = ViewMode.SELECT_PERSON)}
/>
<MenuOption
text={data.person.isHidden ? $t('unhide_person') : $t('hide_person')}
icon={data.person.isHidden ? mdiEyeOutline : mdiEyeOffOutline}
text={person.isHidden ? $t('unhide_person') : $t('hide_person')}
icon={person.isHidden ? mdiEyeOutline : mdiEyeOffOutline}
onClick={() => toggleHidePerson()}
/>
<MenuOption
Expand All @@ -445,7 +438,7 @@
</header>

<main class="relative h-screen overflow-hidden bg-immich-bg tall:ml-4 pt-[var(--navbar-height)] dark:bg-immich-dark-bg">
{#key refreshAssetGrid}
{#key person.id}
<AssetGrid
enableRouting={true}
{assetStore}
Expand All @@ -468,9 +461,9 @@
<section class="flex w-64 sm:w-96 place-items-center border-black">
{#if isEditingName}
<EditNameInput
person={data.person}
{person}
bind:suggestedPeople
bind:name
name={person.name}
bind:isSearchingPeople
on:change={(event) => handleNameChange(event.detail)}
{thumbnailData}
Expand All @@ -487,15 +480,15 @@
circle
shadow
url={thumbnailData}
altText={data.person.name}
altText={person.name}
widthStyle="3.375rem"
heightStyle="3.375rem"
/>
<div
class="flex flex-col justify-center text-left px-4 h-14 text-immich-primary dark:text-immich-dark-primary"
>
{#if data.person.name}
<p class="w-40 sm:w-72 font-medium truncate">{data.person.name}</p>
{#if person.name}
<p class="w-40 sm:w-72 font-medium truncate">{person.name}</p>
<p class="absolute w-fit text-sm text-gray-500 dark:text-immich-gray bottom-0">
{$t('assets_count', { values: { count: numberOfAssets } })}
</p>
Expand Down

0 comments on commit c37be10

Please sign in to comment.