From 5f9dfa9493d721dcdf9286fad241549246f508c4 Mon Sep 17 00:00:00 2001 From: Sergey Kondrikov Date: Tue, 1 Aug 2023 04:27:56 +0300 Subject: [PATCH] refactor(web): asset grid stores (#3464) * Refactor asset grid stores * Iterate over buckets with for..of loop * Rebase on top of main branch changes --- .../components/album-page/album-viewer.svelte | 6 +- .../album-page/asset-selection.svelte | 11 +- .../asset-viewer/asset-viewer.svelte | 7 +- .../actions/select-all-assets.svelte | 22 +- .../photos-page/asset-date-group.svelte | 28 +-- .../components/photos-page/asset-grid.svelte | 75 ++++--- .../gallery-viewer/gallery-viewer.svelte | 10 +- .../scrollbar/scrollbar.svelte | 8 +- web/src/lib/stores/asset-interaction.store.ts | 198 +++++++----------- web/src/lib/stores/asset-viewing.store.ts | 31 +++ web/src/lib/stores/assets.store.ts | 143 +++++++++---- web/src/routes/(user)/map/+page.svelte | 23 +- .../(user)/partners/[userId]/+page.svelte | 11 +- web/src/routes/(user)/photos/+page.svelte | 16 +- web/src/routes/(user)/search/+page.svelte | 6 +- 15 files changed, 330 insertions(+), 265 deletions(-) create mode 100644 web/src/lib/stores/asset-viewing.store.ts diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte index 93ecce7581..2c6fa6232c 100644 --- a/web/src/lib/components/album-page/album-viewer.svelte +++ b/web/src/lib/components/album-page/album-viewer.svelte @@ -43,13 +43,15 @@ import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte'; import { handleError } from '../../utils/handle-error'; import { downloadArchive } from '../../utils/asset-utils'; - import { isViewingAssetStoreState } from '$lib/stores/asset-interaction.store'; + import { assetViewingStore } from '$lib/stores/asset-viewing.store'; export let album: AlbumResponseDto; export let sharedLink: SharedLinkResponseDto | undefined = undefined; const { isAlbumAssetSelectionOpen } = albumAssetSelectionStore; + let { isViewing: showAssetViewer } = assetViewingStore; + let isShowAssetSelection = false; let isShowShareLinkModal = false; @@ -141,7 +143,7 @@ }); const handleKeyboardPress = (event: KeyboardEvent) => { - if (!$isViewingAssetStoreState) { + if (!$showAssetViewer) { switch (event.key) { case 'Escape': if (isMultiSelectionMode) { diff --git a/web/src/lib/components/album-page/asset-selection.svelte b/web/src/lib/components/album-page/asset-selection.svelte index 91854c8683..2ad8d26b4c 100644 --- a/web/src/lib/components/album-page/asset-selection.svelte +++ b/web/src/lib/components/album-page/asset-selection.svelte @@ -1,5 +1,4 @@ @@ -142,14 +139,14 @@ - {#if $isViewingAssetStoreState} + {#if $showAssetViewer} 1} on:navigate-next={navigateNext} on:navigate-previous={navigatePrevious} on:close={() => { - assetInteractionStore.setIsViewingAsset(false); + assetViewingStore.showAssetViewer(false); }} /> {/if} diff --git a/web/src/routes/(user)/partners/[userId]/+page.svelte b/web/src/routes/(user)/partners/[userId]/+page.svelte index 71621f8ccf..4b9b9f1995 100644 --- a/web/src/routes/(user)/partners/[userId]/+page.svelte +++ b/web/src/routes/(user)/partners/[userId]/+page.svelte @@ -8,21 +8,26 @@ import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte'; import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte'; import { AppRoute } from '$lib/constants'; - import { assetInteractionStore, isMultiSelectStoreState, selectedAssets } from '$lib/stores/asset-interaction.store'; import { onDestroy } from 'svelte'; import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte'; import Plus from 'svelte-material-icons/Plus.svelte'; import type { PageData } from './$types'; + import { createAssetStore } from '$lib/stores/assets.store'; + import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store'; export let data: PageData; + const assetStore = createAssetStore(); + const assetInteractionStore = createAssetInteractionStore(); + const { isMultiSelectState, selectedAssets } = assetInteractionStore; + onDestroy(() => { assetInteractionStore.clearMultiselect(); });
- {#if $isMultiSelectStoreState} + {#if $isMultiSelectState} @@ -44,5 +49,5 @@ {/if} - +
diff --git a/web/src/routes/(user)/photos/+page.svelte b/web/src/routes/(user)/photos/+page.svelte index cbabc89cf1..d73730cce4 100644 --- a/web/src/routes/(user)/photos/+page.svelte +++ b/web/src/routes/(user)/photos/+page.svelte @@ -11,8 +11,8 @@ 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 EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte'; - import { assetInteractionStore, isMultiSelectStoreState, selectedAssets } from '$lib/stores/asset-interaction.store'; - import { assetStore } from '$lib/stores/assets.store'; + import { createAssetStore } from '$lib/stores/assets.store'; + import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store'; import { openFileUploadDialog } from '$lib/utils/file-uploader'; import { api } from '@api'; import { onDestroy, onMount } from 'svelte'; @@ -23,6 +23,10 @@ export let data: PageData; let assetCount = 1; + const assetStore = createAssetStore(); + const assetInteractionStore = createAssetInteractionStore(); + const { isMultiSelectState, selectedAssets } = assetInteractionStore; + onMount(async () => { const { data: stats } = await api.assetApi.getAssetStats(); assetCount = stats.total; @@ -39,12 +43,12 @@ }; - + - {#if $isMultiSelectStoreState} + {#if $isMultiSelectState} - + @@ -60,7 +64,7 @@ {#if assetCount} - + {:else} {/if} diff --git a/web/src/routes/(user)/search/+page.svelte b/web/src/routes/(user)/search/+page.svelte index f802da0278..d9ad89ce1f 100644 --- a/web/src/routes/(user)/search/+page.svelte +++ b/web/src/routes/(user)/search/+page.svelte @@ -25,10 +25,12 @@ import { flip } from 'svelte/animate'; import { onDestroy, onMount } from 'svelte'; import { browser } from '$app/environment'; - import { isViewingAssetStoreState } from '$lib/stores/asset-interaction.store'; + import { assetViewingStore } from '$lib/stores/asset-viewing.store'; export let data: PageData; + let { isViewing: showAssetViewer } = assetViewingStore; + // The GalleryViewer pushes it's own history state, which causes weird // behavior for history.back(). To prevent that we store the previous page // manually and navigate back to that. @@ -48,7 +50,7 @@ }); const handleKeyboardPress = (event: KeyboardEvent) => { - if (!$isViewingAssetStoreState) { + if (!$showAssetViewer) { switch (event.key) { case 'Escape': goto(previousRoute);