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

refactor(web) open api client (#7103)

Browse Source 
* refactor: person api

* refactor: shared link and others
This commit is contained in:
Jason Rasmussen
2024-02-14 08:09:49 -05:00
committed by GitHub
parent 5fc1d43012
commit d8631a00bb
81 changed files with 638 additions and 656 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/routes/(user)/people/+page.svelte
+38 -38
View File
@@ -1,36 +1,38 @@
<script lang="ts">
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import type { PageData } from './$types';
import PeopleCard from '$lib/components/faces-page/people-card.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import { api, type PeopleUpdateItem, type PersonResponseDto } from '@api';
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
import PeopleCard from '$lib/components/faces-page/people-card.svelte';
import SearchBar from '$lib/components/faces-page/search-bar.svelte';
import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
import ShowHide from '$lib/components/faces-page/show-hide.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import {
ActionQueryParameterValue,
AppRoute,
QueryParameter,
maximumLengthSearchPeople,
QueryParameter,
timeBeforeShowLoadingSpinner,
} from '$lib/constants';
import { getPeopleThumbnailUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import ShowHide from '$lib/components/faces-page/show-hide.svelte';
import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
import { onDestroy, onMount } from 'svelte';
import { browser } from '$app/environment';
import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
import { mdiAccountOff, mdiEyeOutline } from '@mdi/js';
import Icon from '$lib/components/elements/icon.svelte';
import { searchNameLocal } from '$lib/utils/person';
import SearchBar from '$lib/components/faces-page/search-bar.svelte';
import { page } from '$app/stores';
import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
import { type PeopleUpdateItem, type PersonResponseDto } from '@api';
import { getPerson, mergePerson, searchPerson, updatePeople, updatePerson } from '@immich/sdk';
import { mdiAccountOff, mdiEyeOutline } from '@mdi/js';
import { onDestroy, onMount } from 'svelte';
import type { PageData } from './$types';
export let data: PageData;
@@ -75,7 +77,7 @@
const getSearchedPeople = $page.url.searchParams.get(QueryParameter.SEARCHED_PEOPLE);
if (getSearchedPeople) {
searchName = getSearchedPeople;
searchPeople(true);
handleSearchPeople(true);
}
});
@@ -100,7 +102,7 @@
const handleSearch = (force: boolean) => {
$page.url.searchParams.set(QueryParameter.SEARCHED_PEOPLE, searchName);
goto($page.url);
searchPeople(force);
handleSearchPeople(force);
};
const handleCloseClick = () => {
@@ -150,7 +152,7 @@
}
if (changed.length > 0) {
const { data: results } = await api.personApi.updatePeople({
const results = await updatePeople({
peopleUpdateDto: { people: changed },
});
const count = results.filter(({ success }) => success).length;
@@ -187,12 +189,12 @@
return;
}
try {
await api.personApi.mergePerson({
await mergePerson({
id: personToBeMergedIn.id,
mergePersonDto: { ids: [personToMerge.id] },
});
const { data: mergedPerson } = await api.personApi.getPerson({ id: personToBeMergedIn.id });
const mergedPerson = await getPerson({ id: personToBeMergedIn.id });
countVisiblePeople--;
people = people.filter((person: PersonResponseDto) => person.id !== personToMerge.id);
@@ -213,7 +215,7 @@
*
*/
try {
await api.personApi.updatePerson({ id: personToBeMergedIn.id, personUpdateDto: { name: personName } });
await updatePerson({ id: personToBeMergedIn.id, personUpdateDto: { name: personName } });
for (const person of people) {
if (person.id === personToBeMergedIn.id) {
@@ -248,7 +250,7 @@
const handleHidePerson = async (detail: PersonResponseDto) => {
try {
const { data: updatedPerson } = await api.personApi.updatePerson({
const updatedPerson = await updatePerson({
id: detail.id,
personUpdateDto: { isHidden: true },
});
@@ -281,7 +283,7 @@
);
};
const searchPeople = async (force: boolean) => {
const handleSearchPeople = async (force: boolean) => {
if (searchName === '') {
if ($page.url.searchParams.has(QueryParameter.SEARCHED_PEOPLE)) {
$page.url.searchParams.delete(QueryParameter.SEARCHED_PEOPLE);
@@ -295,9 +297,7 @@
const timeout = setTimeout(() => (isSearchingPeople = true), timeBeforeShowLoadingSpinner);
try {
const { data } = await api.searchApi.searchPerson({ name: searchName, withHidden: false });
searchedPeople = data;
searchedPeople = await searchPerson({ name: searchName, withHidden: false });
searchWord = searchName;
} catch (error) {
handleError(error, "Can't search people");
@@ -318,7 +318,7 @@
changeName();
return;
}
const { data } = await api.searchApi.searchPerson({ name: personName, withHidden: true });
const data = await searchPerson({ name: personName, withHidden: true });
// We check if another person has the same name as the name entered by the user
@@ -353,7 +353,7 @@
}
try {
const { data: updatedPerson } = await api.personApi.updatePerson({
const updatedPerson = await updatePerson({
id: edittingPerson.id,
personUpdateDto: { birthDate: value.length > 0 ? value : null },
});
@@ -381,7 +381,7 @@
return;
}
try {
const { data: updatedPerson } = await api.personApi.updatePerson({
const updatedPerson = await updatePerson({
id: edittingPerson.id,
personUpdateDto: { name: personName },
});
@@ -529,7 +529,7 @@
preload={searchName !== '' || index < 20}
bind:hidden={person.isHidden}
shadow
url={api.getPeopleThumbnailUrl(person.id)}
url={getPeopleThumbnailUrl(person.id)}
altText={person.name}
widthStyle="100%"
bind:eyeColor={eyeColorMap[person.id]}
web/src/routes/(user)/people/+page.ts
+2 -2
View File
@@ -1,11 +1,11 @@
import { authenticate } from '$lib/utils/auth';
import { api } from '@api';
import { getAllPeople } from '@immich/sdk';
import type { PageLoad } from './$types';
export const load = (async () => {
await authenticate();
const { data: people } = await api.personApi.getAllPeople({ withHidden: true });
const people = await getAllPeople({ withHidden: true });
return {
people,
meta: {
web/src/routes/(user)/people/[personId]/+page.svelte
+32 -30
View File
@@ -4,9 +4,9 @@
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
import MergeFaceSelector from '$lib/components/faces-page/merge-face-selector.svelte';
import UnMergeFaceSelector from '$lib/components/faces-page/unmerge-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';
import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
@@ -21,24 +21,32 @@
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { AppRoute, QueryParameter, maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { AssetStore } from '$lib/stores/assets.store';
import { websocketStore } from '$lib/stores/websocket';
import { handleError } from '$lib/utils/handle-error';
import { type AssetResponseDto, type PersonResponseDto, api } from '@api';
import { onMount } from 'svelte';
import type { PageData } from './$types';
import { clickOutside } from '$lib/utils/click-outside';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import { mdiPlus, mdiDotsVertical, mdiArrowLeft } from '@mdi/js';
import { handleError } from '$lib/utils/handle-error';
import { isExternalUrl } from '$lib/utils/navigation';
import { searchNameLocal } from '$lib/utils/person';
import {
getPersonStatistics,
mergePerson,
searchPerson,
updatePerson,
type AssetResponseDto,
type PersonResponseDto,
} from '@immich/sdk';
import { mdiArrowLeft, mdiDotsVertical, mdiPlus } from '@mdi/js';
import { onMount } from 'svelte';
import type { PageData } from './$types';
import { getPeopleThumbnailUrl } from '$lib/utils';
export let data: PageData;
@@ -74,7 +82,7 @@
let refreshAssetGrid = false;
let personName = '';
$: thumbnailData = api.getPeopleThumbnailUrl(data.person.id);
$: thumbnailData = getPeopleThumbnailUrl(data.person.id);
let name: string = data.person.name;
let suggestedPeople: PersonResponseDto[] = [];
@@ -97,8 +105,7 @@
}
const timeout = setTimeout(() => (isSearchingPeople = true), timeBeforeShowLoadingSpinner);
try {
const { data } = await api.searchApi.searchPerson({ name });
people = data;
people = await searchPerson({ name });
searchWord = name;
} catch (error) {
people = [];
@@ -113,7 +120,7 @@
$: isAllArchive = [...$selectedAssets].every((asset) => asset.isArchived);
$: isAllFavorite = [...$selectedAssets].every((asset) => asset.isFavorite);
$: $onPersonThumbnail === data.person.id &&
(thumbnailData = api.getPeopleThumbnailUrl(data.person.id) + `?now=${Date.now()}`);
(thumbnailData = getPeopleThumbnailUrl(data.person.id) + `?now=${Date.now()}`);
$: {
if (people) {
@@ -215,7 +222,7 @@
const toggleHidePerson = async () => {
try {
await api.personApi.updatePerson({
await updatePerson({
id: data.person.id,
personUpdateDto: { isHidden: !data.person.isHidden },
});
@@ -232,8 +239,8 @@
};
const handleMerge = async (person: PersonResponseDto) => {
const { data: statistics } = await api.personApi.getPersonStatistics({ id: person.id });
numberOfAssets = statistics.assets;
const { assets } = await getPersonStatistics({ id: person.id });
numberOfAssets = assets;
handleGoBack();
data.person = person;
@@ -246,7 +253,7 @@
return;
}
await api.personApi.updatePerson({ id: data.person.id, personUpdateDto: { featureFaceAssetId: asset.id } });
await updatePerson({ id: data.person.id, personUpdateDto: { featureFaceAssetId: asset.id } });
notificationController.show({ message: 'Feature photo updated', type: NotificationType.Info });
assetInteractionStore.clearMultiselect();
@@ -256,10 +263,8 @@
const updateAssetCount = async () => {
try {
const { data: statistics } = await api.personApi.getPersonStatistics({
id: data.person.id,
});
numberOfAssets = statistics.assets;
const { assets } = await getPersonStatistics({ id: data.person.id });
numberOfAssets = assets;
} catch (error) {
handleError(error, "Can't update the asset count");
}
@@ -270,7 +275,7 @@
viewMode = ViewMode.VIEW_ASSETS;
isEditingName = false;
try {
await api.personApi.mergePerson({
await mergePerson({
id: personToBeMergedIn.id,
mergePersonDto: { ids: [personToMerge.id] },
});
@@ -305,10 +310,7 @@
try {
isEditingName = false;
await api.personApi.updatePerson({
id: data.person.id,
personUpdateDto: { name: personName },
});
await updatePerson({ id: data.person.id, personUpdateDto: { name: personName } });
notificationController.show({
message: 'Change name successfully',
@@ -340,16 +342,16 @@
return;
}
const result = await api.searchApi.searchPerson({ name: personName, withHidden: true });
const result = await searchPerson({ name: personName, withHidden: true });
const existingPerson = result.data.find(
const existingPerson = result.find(
(person: PersonResponseDto) =>
person.name.toLowerCase() === personName.toLowerCase() && person.id !== data.person.id && person.name,
);
if (existingPerson) {
personMerge2 = existingPerson;
personMerge1 = data.person;
potentialMergePeople = result.data
potentialMergePeople = result
.filter(
(person: PersonResponseDto) =>
personMerge2.name.toLowerCase() === person.name.toLowerCase() &&
@@ -369,7 +371,7 @@
viewMode = ViewMode.VIEW_ASSETS;
data.person.birthDate = birthDate;
const { data: updatedPerson } = await api.personApi.updatePerson({
const updatedPerson = await updatePerson({
id: data.person.id,
personUpdateDto: { birthDate: birthDate.length > 0 ? birthDate : null },
});
@@ -557,7 +559,7 @@
<ImageThumbnail
circle
shadow
url={api.getPeopleThumbnailUrl(person.id)}
url={getPeopleThumbnailUrl(person.id)}
altText={person.name}
widthStyle="2rem"
heightStyle="2rem"
web/src/routes/(user)/people/[personId]/+page.ts
+5 -3
View File
@@ -1,12 +1,14 @@
import { authenticate } from '$lib/utils/auth';
import { api } from '@api';
import { getPerson, getPersonStatistics } from '@immich/sdk';
import type { PageLoad } from './$types';
export const load = (async ({ params }) => {
await authenticate();
const { data: person } = await api.personApi.getPerson({ id: params.personId });
const { data: statistics } = await api.personApi.getPersonStatistics({ id: params.personId });
const [person, statistics] = await Promise.all([
getPerson({ id: params.personId }),
getPersonStatistics({ id: params.personId }),
]);
return {
person,