c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-06 03:46:47 +01:00
Code Releases Activity

Add select all to search

Browse source
This commit is contained in:
Yonggan 2023-06-10 14:21:02 +02:00
parent a8c8e33c10
commit 6f09f28206
6 changed files with 209 additions and 197 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/lib/components/album-page/album-viewer.svelte
View file

@ -347,7 +347,7 @@
assets={multiSelectAsset} assets={multiSelectAsset}
clearSelect={() => (multiSelectAsset = new Set())} clearSelect={() => (multiSelectAsset = new Set())}
> >
<CircleIconButton title="Delete" logo={SelectAll} on:click={handleSelectAll}/> <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll}/>
<DownloadAction filename={album.albumName} sharedLinkKey={sharedLink?.key} /> <DownloadAction filename={album.albumName} sharedLinkKey={sharedLink?.key} />
{#if isOwned} {#if isOwned}
<RemoveFromAlbum bind:album /> <RemoveFromAlbum bind:album />

3
web/src/lib/components/photos-page/actions/select-all-assets.svelte
View file

@ -7,7 +7,6 @@
import {api, AssetResponseDto} from '@api'; import {api, AssetResponseDto} from '@api';
import SelectAll from 'svelte-material-icons/SelectAll.svelte'; import SelectAll from 'svelte-material-icons/SelectAll.svelte';
import TimerSand from 'svelte-material-icons/TimerSand.svelte'; import TimerSand from 'svelte-material-icons/TimerSand.svelte';
import {getAssetControlContext} from '../asset-select-control-bar.svelte';
import { import {
assetInteractionStore, assetInteractionStore,
selectedAssets selectedAssets
@ -45,5 +44,5 @@
<CircleIconButton title="Delete" logo={TimerSand}/> <CircleIconButton title="Delete" logo={TimerSand}/>
{/if} {/if}
{#if !selecting} {#if !selecting}
<CircleIconButton title="Delete" logo={SelectAll} on:click={handleSelectAll}/> <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll}/>
{/if} {/if}

2
web/src/routes/(user)/archive/+page.svelte
View file

@ -62,7 +62,7 @@
clearSelect={() => (selectedAssets = new Set())} clearSelect={() => (selectedAssets = new Set())}
> >
<ArchiveAction unarchive onAssetArchive={(asset) => onAssetDelete(asset.id)} /> <ArchiveAction unarchive onAssetArchive={(asset) => onAssetDelete(asset.id)} />
<CircleIconButton title="Delete" logo={SelectAll} on:click={handleSelectAll}/> <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll}/>
<CreateSharedLink /> <CreateSharedLink />
<AssetSelectContextMenu icon={Plus} title="Add"> <AssetSelectContextMenu icon={Plus} title="Add">
<AddToAlbum /> <AddToAlbum />

2
web/src/routes/(user)/favorites/+page.svelte
View file

@ -53,7 +53,7 @@
<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}> <AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
<FavoriteAction removeFavorite onAssetFavorite={(asset) => onAssetDelete(asset.id)}/> <FavoriteAction removeFavorite onAssetFavorite={(asset) => onAssetDelete(asset.id)}/>
<CreateSharedLink/> <CreateSharedLink/>
<CircleIconButton title="Delete" logo={SelectAll} on:click={handleSelectAll}/> <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll}/>
<AssetSelectContextMenu icon={Plus} title="Add"> <AssetSelectContextMenu icon={Plus} title="Add">
<AddToAlbum/> <AddToAlbum/>
<AddToAlbum shared/> <AddToAlbum shared/>

223
web/src/routes/(user)/people/[personId]/+page.svelte
View file

@ -1,127 +1,134 @@
<script lang="ts"> <script lang="ts">
import { afterNavigate, goto } from '$app/navigation'; import {afterNavigate, goto} from '$app/navigation';
import { page } from '$app/stores'; import {page} from '$app/stores';
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte'; import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte'; import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.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 ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte'; import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte'; import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte'; import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte'; import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte'; import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte'; import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte'; import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte'; import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
import { AppRoute } from '$lib/constants'; import SelectAll from 'svelte-material-icons/SelectAll.svelte';
import { handleError } from '$lib/utils/handle-error'; import {AppRoute} from '$lib/constants';
import { AssetResponseDto, api } from '@api'; import {handleError} from '$lib/utils/handle-error';
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte'; import {AssetResponseDto, api} from '@api';
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte'; import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
import Plus from 'svelte-material-icons/Plus.svelte'; import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import type { PageData } from './$types'; import Plus from 'svelte-material-icons/Plus.svelte';
import type {PageData} from './$types';
import {archivedAsset} from "$lib/stores/archived-asset.store";
import CircleIconButton from "$lib/components/elements/buttons/circle-icon-button.svelte";
export let data: PageData; export let data: PageData;
let isEditName = false; let isEditName = false;
let previousRoute: string = AppRoute.EXPLORE; let previousRoute: string = AppRoute.EXPLORE;
let selectedAssets: Set<AssetResponseDto> = new Set(); let selectedAssets: Set<AssetResponseDto> = new Set();
$: isMultiSelectionMode = selectedAssets.size > 0; $: isMultiSelectionMode = selectedAssets.size > 0;
$: isAllArchive = Array.from(selectedAssets).every((asset) => asset.isArchived); $: isAllArchive = Array.from(selectedAssets).every((asset) => asset.isArchived);
$: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite); $: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite);
afterNavigate(({ from }) => { afterNavigate(({from}) => {
// Prevent setting previousRoute to the current page. // Prevent setting previousRoute to the current page.
if (from && from.route.id !== $page.route.id) { if (from && from.route.id !== $page.route.id) {
previousRoute = from.url.href; previousRoute = from.url.href;
} }
}); });
const handleNameChange = async (name: string) => { const handleNameChange = async (name: string) => {
try { try {
isEditName = false; isEditName = false;
data.person.name = name; data.person.name = name;
await api.personApi.updatePerson({ id: data.person.id, personUpdateDto: { name } }); await api.personApi.updatePerson({id: data.person.id, personUpdateDto: {name}});
} catch (error) { } catch (error) {
handleError(error, 'Unable to save name'); handleError(error, 'Unable to save name');
} }
}; };
const onAssetDelete = (assetId: string) => { const onAssetDelete = (assetId: string) => {
data.assets = data.assets.filter((asset: AssetResponseDto) => asset.id !== assetId); data.assets = data.assets.filter((asset: AssetResponseDto) => asset.id !== assetId);
}; };
const handleSelectAll = () => {
selectedAssets = new Set(data.assets)
}
</script> </script>
{#if isMultiSelectionMode} {#if isMultiSelectionMode}
<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}> <AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
<CreateSharedLink /> <CreateSharedLink/>
<AssetSelectContextMenu icon={Plus} title="Add"> <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll}/>
<AddToAlbum /> <AssetSelectContextMenu icon={Plus} title="Add">
<AddToAlbum shared /> <AddToAlbum/>
</AssetSelectContextMenu> <AddToAlbum shared/>
<DeleteAssets {onAssetDelete} /> </AssetSelectContextMenu>
<AssetSelectContextMenu icon={DotsVertical} title="Add"> <DeleteAssets {onAssetDelete}/>
<DownloadAction menuItem /> <AssetSelectContextMenu icon={DotsVertical} title="Add">
<FavoriteAction menuItem removeFavorite={isAllFavorite} /> <DownloadAction menuItem/>
<ArchiveAction <FavoriteAction menuItem removeFavorite={isAllFavorite}/>
menuItem <ArchiveAction
unarchive={isAllArchive} menuItem
onAssetArchive={(asset) => onAssetDelete(asset.id)} unarchive={isAllArchive}
/> onAssetArchive={(asset) => onAssetDelete(asset.id)}
</AssetSelectContextMenu> />
</AssetSelectControlBar> </AssetSelectContextMenu>
</AssetSelectControlBar>
{:else} {:else}
<ControlAppBar <ControlAppBar
showBackButton showBackButton
backIcon={ArrowLeft} backIcon={ArrowLeft}
on:close-button-click={() => goto(previousRoute)} on:close-button-click={() => goto(previousRoute)}
/> />
{/if} {/if}
<!-- Face information block --> <!-- Face information block -->
<section class="pt-24 px-4 sm:px-6 flex place-items-center"> <section class="pt-24 px-4 sm:px-6 flex place-items-center">
{#if isEditName} {#if isEditName}
<EditNameInput <EditNameInput
person={data.person} person={data.person}
on:change={(event) => handleNameChange(event.detail)} on:change={(event) => handleNameChange(event.detail)}
on:cancel={() => (isEditName = false)} on:cancel={() => (isEditName = false)}
/> />
{:else} {:else}
<ImageThumbnail <ImageThumbnail
circle circle
shadow shadow
url={api.getPeopleThumbnailUrl(data.person.id)} url={api.getPeopleThumbnailUrl(data.person.id)}
altText={data.person.name} altText={data.person.name}
widthStyle="3.375rem" widthStyle="3.375rem"
heightStyle="3.375rem" heightStyle="3.375rem"
/> />
<button <button
title="Edit name" title="Edit name"
class="px-4 text-immich-primary dark:text-immich-dark-primary" class="px-4 text-immich-primary dark:text-immich-dark-primary"
on:click={() => (isEditName = true)} on:click={() => (isEditName = true)}
> >
{#if data.person.name} {#if data.person.name}
<p class="font-medium py-2">{data.person.name}</p> <p class="font-medium py-2">{data.person.name}</p>
{:else} {:else}
<p class="font-medium w-fit">Add a name</p> <p class="font-medium w-fit">Add a name</p>
<p class="text-sm text-gray-500 dark:text-immich-gray"> <p class="text-sm text-gray-500 dark:text-immich-gray">
Find them fast by name with search Find them fast by name with search
</p> </p>
{/if} {/if}
</button> </button>
{/if} {/if}
</section> </section>
<!-- Gallery Block --> <!-- Gallery Block -->
<section class="relative pt-8 sm:px-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"> <section class="relative pt-8 sm:px-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg">
<section class="overflow-y-auto relative immich-scrollbar"> <section class="overflow-y-auto relative immich-scrollbar">
<section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg"> <section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
<GalleryViewer <GalleryViewer
assets={data.assets} assets={data.assets}
viewFrom="search-page" viewFrom="search-page"
showArchiveIcon={true} showArchiveIcon={true}
bind:selectedAssets bind:selectedAssets
/> />
</section> </section>
</section> </section>
</section> </section>

174
web/src/routes/(user)/search/+page.svelte
View file

@ -1,99 +1,105 @@
<script lang="ts"> <script lang="ts">
import { afterNavigate, goto } from '$app/navigation'; import {afterNavigate, goto} from '$app/navigation';
import { page } from '$app/stores'; import {page} from '$app/stores';
import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.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 ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte'; import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte'; import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte'; import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte'; import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte'; import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte'; import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte'; import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte'; import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte'; import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
import type { AssetResponseDto } from '@api'; import type {AssetResponseDto} from '@api';
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte'; import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte'; import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import ImageOffOutline from 'svelte-material-icons/ImageOffOutline.svelte'; import ImageOffOutline from 'svelte-material-icons/ImageOffOutline.svelte';
import Plus from 'svelte-material-icons/Plus.svelte'; import Plus from 'svelte-material-icons/Plus.svelte';
import type { PageData } from './$types'; import type {PageData} from './$types';
import SelectAll from 'svelte-material-icons/SelectAll.svelte';
import CircleIconButton from "$lib/components/elements/buttons/circle-icon-button.svelte";
export let data: PageData; export let data: PageData;
// The GalleryViewer pushes it's own history state, which causes weird // The GalleryViewer pushes it's own history state, which causes weird
// behavior for history.back(). To prevent that we store the previous page // behavior for history.back(). To prevent that we store the previous page
// manually and navigate back to that. // manually and navigate back to that.
let previousRoute = '/explore'; let previousRoute = '/explore';
afterNavigate(({ from }) => { afterNavigate(({from}) => {
// Prevent setting previousRoute to the current page. // Prevent setting previousRoute to the current page.
if (from && from.route.id !== $page.route.id) { if (from && from.route.id !== $page.route.id) {
previousRoute = from.url.href; previousRoute = from.url.href;
} }
}); });
$: term = $page.url.searchParams.get('q') || data.term || ''; $: term = $page.url.searchParams.get('q') || data.term || '';
let selectedAssets: Set<AssetResponseDto> = new Set(); let selectedAssets: Set<AssetResponseDto> = new Set();
$: isMultiSelectionMode = selectedAssets.size > 0; $: isMultiSelectionMode = selectedAssets.size > 0;
$: isAllArchived = Array.from(selectedAssets).every((asset) => asset.isArchived); $: isAllArchived = Array.from(selectedAssets).every((asset) => asset.isArchived);
$: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite); $: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite);
$: searchResultAssets = data.results.assets.items; $: searchResultAssets = data.results.assets.items;
const onAssetDelete = (assetId: string) => { const onAssetDelete = (assetId: string) => {
searchResultAssets = searchResultAssets.filter((a: AssetResponseDto) => a.id !== assetId); searchResultAssets = searchResultAssets.filter((a: AssetResponseDto) => a.id !== assetId);
}; };
const handleSelectAll = () => {
selectedAssets = new Set(searchResultAssets)
}
</script> </script>
<section> <section>
{#if isMultiSelectionMode} {#if isMultiSelectionMode}
<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}> <AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
<CreateSharedLink /> <CreateSharedLink/>
<AssetSelectContextMenu icon={Plus} title="Add"> <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll}/>
<AddToAlbum /> <AssetSelectContextMenu icon={Plus} title="Add">
<AddToAlbum shared /> <AddToAlbum/>
</AssetSelectContextMenu> <AddToAlbum shared/>
<DeleteAssets {onAssetDelete} /> </AssetSelectContextMenu>
<DeleteAssets {onAssetDelete}/>
<AssetSelectContextMenu icon={DotsVertical} title="Add"> <AssetSelectContextMenu icon={DotsVertical} title="Add">
<DownloadAction menuItem /> <DownloadAction menuItem/>
<FavoriteAction menuItem removeFavorite={isAllFavorite} /> <FavoriteAction menuItem removeFavorite={isAllFavorite}/>
<ArchiveAction menuItem unarchive={isAllArchived} /> <ArchiveAction menuItem unarchive={isAllArchived}/>
</AssetSelectContextMenu> </AssetSelectContextMenu>
</AssetSelectControlBar> </AssetSelectControlBar>
{:else} {:else}
<ControlAppBar on:close-button-click={() => goto(previousRoute)} backIcon={ArrowLeft}> <ControlAppBar on:close-button-click={() => goto(previousRoute)} backIcon={ArrowLeft}>
<div class="w-full max-w-2xl flex-1 pl-4"> <div class="w-full max-w-2xl flex-1 pl-4">
<SearchBar grayTheme={false} value={term} /> <SearchBar grayTheme={false} value={term}/>
</div> </div>
</ControlAppBar> </ControlAppBar>
{/if} {/if}
</section> </section>
<section class="relative pt-32 mb-12 bg-immich-bg dark:bg-immich-dark-bg"> <section class="relative pt-32 mb-12 bg-immich-bg dark:bg-immich-dark-bg">
<section class="overflow-y-auto relative immich-scrollbar"> <section class="overflow-y-auto relative immich-scrollbar">
<section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg"> <section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
{#if data.results?.assets?.items.length > 0} {#if data.results?.assets?.items.length > 0}
<div class="pl-4"> <div class="pl-4">
<GalleryViewer <GalleryViewer
assets={searchResultAssets} assets={searchResultAssets}
bind:selectedAssets bind:selectedAssets
viewFrom="search-page" viewFrom="search-page"
showArchiveIcon={true} showArchiveIcon={true}
/> />
</div> </div>
{:else} {:else}
<div <div
class="flex items-center place-content-center w-full min-h-[calc(66vh_-_11rem)] dark:text-white" class="flex items-center place-content-center w-full min-h-[calc(66vh_-_11rem)] dark:text-white"
> >
<div class="flex flex-col content-center items-center text-center"> <div class="flex flex-col content-center items-center text-center">
<ImageOffOutline size="3.5em" /> <ImageOffOutline size="3.5em"/>
<p class="font-medium text-3xl mt-5">No results</p> <p class="font-medium text-3xl mt-5">No results</p>
<p class="text-base font-normal">Try a synonym or more general keyword</p> <p class="text-base font-normal">Try a synonym or more general keyword</p>
</div> </div>
</div> </div>
{/if} {/if}
</section> </section>
</section> </section>
</section> </section>