mirror of https://github.com/immich-app/immich.git
feat(web): add Favorites page (#1397)
* Duplicate photos page and rename to favorites * Implement basic functionality to page * Sort imports * Add missing sharing code * Remove unused import * Fix formatting * Use GalleryViewer and new api endpoint * Merge useFavorites into page * Run prettier * Move favorites in side-bar * Remove favorites when unfavorited * Fix close shared link model * Add favorite count to side-bar * Add add to favorites option * Fix formatting * Add favorite icon to image thumbnails * Change var to letpull/1444/head
James
GitHub
parent
d377cf0d02
commit
de0e218440
@ -0,0 +1,21 @@
|
|||||||
|
import type { PageServerLoad } from './$types';
|
||||||
|
import { redirect, error } from '@sveltejs/kit';
|
||||||
|
|
||||||
|
export const load: PageServerLoad = async ({ parent }) => {
|
||||||
|
try {
|
||||||
|
const { user } = await parent();
|
||||||
|
if (!user) {
|
||||||
|
throw error(400, 'Not logged in');
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
user,
|
||||||
|
meta: {
|
||||||
|
title: 'Favorites'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
} catch (e) {
|
||||||
|
console.log('Photo page load error', e);
|
||||||
|
throw redirect(302, '/auth/login');
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,140 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import CircleIconButton from '$lib/components/shared-components/circle-icon-button.svelte';
|
||||||
|
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
|
||||||
|
import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
|
||||||
|
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
|
||||||
|
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
|
||||||
|
import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
|
||||||
|
import { handleError } from '$lib/utils/handle-error';
|
||||||
|
import { api, AssetResponseDto, SharedLinkType } from '@api';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import Close from 'svelte-material-icons/Close.svelte';
|
||||||
|
import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
|
||||||
|
import StarMinusOutline from 'svelte-material-icons/StarMinusOutline.svelte';
|
||||||
|
import Error from '../+error.svelte';
|
||||||
|
import type { PageData } from './$types';
|
||||||
|
|
||||||
|
export let data: PageData;
|
||||||
|
|
||||||
|
let favorites: AssetResponseDto[] = [];
|
||||||
|
let isShowCreateSharedLinkModal = false;
|
||||||
|
let selectedAssets: Set<AssetResponseDto> = new Set();
|
||||||
|
|
||||||
|
$: isMultiSelectionMode = selectedAssets.size > 0;
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
try {
|
||||||
|
const { data: assets } = await api.assetApi.getAllAssets(true);
|
||||||
|
favorites = assets;
|
||||||
|
} catch {
|
||||||
|
handleError(Error, 'Unable to load favorites');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const clearMultiSelectAssetAssetHandler = () => {
|
||||||
|
selectedAssets = new Set();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreateSharedLink = async () => {
|
||||||
|
isShowCreateSharedLinkModal = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCloseSharedLinkModal = () => {
|
||||||
|
clearMultiSelectAssetAssetHandler();
|
||||||
|
isShowCreateSharedLinkModal = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveFavorite = async () => {
|
||||||
|
for (const asset of selectedAssets) {
|
||||||
|
try {
|
||||||
|
await api.assetApi.updateAsset(asset.id, {
|
||||||
|
isFavorite: false
|
||||||
|
});
|
||||||
|
favorites = favorites.filter((a) => a.id != asset.id);
|
||||||
|
} catch {
|
||||||
|
handleError(Error, 'Error updating asset favorite state');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
clearMultiSelectAssetAssetHandler();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<NavigationBar user={data.user} shouldShowUploadButton={false} />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section
|
||||||
|
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
|
||||||
|
>
|
||||||
|
<SideBar />
|
||||||
|
|
||||||
|
<!-- Multiselection mode app bar -->
|
||||||
|
{#if isMultiSelectionMode}
|
||||||
|
<ControlAppBar
|
||||||
|
on:close-button-click={clearMultiSelectAssetAssetHandler}
|
||||||
|
backIcon={Close}
|
||||||
|
tailwindClasses={'bg-white shadow-md'}
|
||||||
|
>
|
||||||
|
<svelte:fragment slot="leading">
|
||||||
|
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
|
||||||
|
Selected {selectedAssets.size}
|
||||||
|
</p>
|
||||||
|
</svelte:fragment>
|
||||||
|
<svelte:fragment slot="trailing">
|
||||||
|
<CircleIconButton
|
||||||
|
title="Share"
|
||||||
|
logo={ShareVariantOutline}
|
||||||
|
on:click={handleCreateSharedLink}
|
||||||
|
/>
|
||||||
|
<CircleIconButton
|
||||||
|
title="Remove Favorite"
|
||||||
|
logo={StarMinusOutline}
|
||||||
|
on:click={handleRemoveFavorite}
|
||||||
|
/>
|
||||||
|
</svelte:fragment>
|
||||||
|
</ControlAppBar>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Create shared link modal -->
|
||||||
|
{#if isShowCreateSharedLinkModal}
|
||||||
|
<CreateSharedLinkModal
|
||||||
|
sharedAssets={Array.from(selectedAssets)}
|
||||||
|
shareType={SharedLinkType.Individual}
|
||||||
|
on:close={handleCloseSharedLinkModal}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Main Section -->
|
||||||
|
<section class="overflow-y-auto relative immich-scrollbar">
|
||||||
|
<section
|
||||||
|
id="favorite-content"
|
||||||
|
class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
|
||||||
|
>
|
||||||
|
<div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg">
|
||||||
|
<div>
|
||||||
|
<p class="font-medium">Favorites</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-4">
|
||||||
|
<hr class="dark:border-immich-dark-gray" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Empty Message -->
|
||||||
|
{#if favorites.length === 0}
|
||||||
|
<div
|
||||||
|
class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
|
||||||
|
>
|
||||||
|
<img src="/empty-1.svg" alt="Empty shared album" width="500" draggable="false" />
|
||||||
|
|
||||||
|
<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
|
||||||
|
Add favorites to quickly find your best pictures and videos
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<GalleryViewer assets={favorites} bind:selectedAssets />
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { redirect } from '@sveltejs/kit';
|
||||||
|
export const prerender = false;
|
||||||
|
|
||||||
|
import type { PageServerLoad } from './$types';
|
||||||
|
|
||||||
|
export const load: PageServerLoad = async ({ parent }) => {
|
||||||
|
const { user } = await parent();
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
throw redirect(302, '/auth/login');
|
||||||
|
} else {
|
||||||
|
throw redirect(302, '/favorites');
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue