KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): asset select actions (#2444)

Browse Source 
* refactor(web): asset select actions

* remaining pages/components + data flow changes

* fix check
This commit is contained in:
Michel Heusschen
2023-05-16 16:13:20 +02:00
committed by GitHub
parent 3ec74444b0
commit ab86d0a18d
21 changed files with 646 additions and 919 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
web/src/routes/(user)/favorites/+page.svelte
View File

@@ -1,21 +1,17 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/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 UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
import RemoveFavorite from '$lib/components/photos-page/actions/remove-favorite.svelte';
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
import { handleError } from '$lib/utils/handle-error';
import { api, AssetResponseDto, SharedLinkType } from '@api';
import { api, AssetResponseDto } from '@api';
import { onMount } from 'svelte';
import Close from 'svelte-material-icons/Close.svelte';
import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
import HeartMinusOutline from 'svelte-material-icons/HeartMinusOutline.svelte';
import Error from '../../+error.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import type { PageData } from './$types';
let favorites: AssetResponseDto[] = [];
let isShowCreateSharedLinkModal = false;
let selectedAssets: Set<AssetResponseDto> = new Set();
export let data: PageData;
@@ -31,69 +27,17 @@
}
});
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();
const onAssetDelete = (assetId: string) => {
favorites = favorites.filter((a) => a.id !== assetId);
};
</script>
<!-- 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={HeartMinusOutline}
on:click={handleRemoveFavorite}
/>
</svelte:fragment>
</ControlAppBar>
{/if}
<!-- Create shared link modal -->
{#if isShowCreateSharedLinkModal}
<CreateSharedLinkModal
sharedAssets={Array.from(selectedAssets)}
shareType={SharedLinkType.Individual}
on:close={handleCloseSharedLinkModal}
/>
<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
<CreateSharedLink />
<RemoveFavorite onAssetFavorite={(asset) => onAssetDelete(asset.id)} />
</AssetSelectControlBar>
{/if}
<UserPageLayout user={data.user} hideNavbar={isMultiSelectionMode}>