helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(web): asset grid stores (#3464)

Browse source 
* Refactor asset grid stores

* Iterate over buckets with for..of loop

* Rebase on top of main branch changes
This commit is contained in:
Sergey Kondrikov 2023-08-01 04:27:56 +03:00 • committed by GitHub
parent 13051c1e5a
commit 5f9dfa9493
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 330 additions and 265 deletions
Download patch file Download diff file Expand all files Collapse all files

28
web/src/lib/components/photos-page/asset-date-group.svelte
View file

@ -1,13 +1,4 @@
<script lang="ts">
import {
assetInteractionStore,
assetSelectionCandidates,
assetsInAlbumStoreState,
isMultiSelectStoreState,
selectedAssets,
selectedGroup,
} from '$lib/stores/asset-interaction.store';
import { assetStore } from '$lib/stores/assets.store';
import { locale } from '$lib/stores/preferences.store';
import { getAssetRatio } from '$lib/utils/asset-utils';
import { formatGroupTitle, splitBucketIntoDateGroups } from '$lib/utils/timeline-util';
@ -19,6 +10,9 @@
import CircleOutline from 'svelte-material-icons/CircleOutline.svelte';
import { fly } from 'svelte/transition';
import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import type { AssetStore } from '$lib/stores/assets.store';
import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
export let assets: AssetResponseDto[];
export let bucketDate: string;
@ -26,6 +20,12 @@
export let isAlbumSelectionMode = false;
export let viewportWidth: number;
export let assetStore: AssetStore;
export let assetInteractionStore: AssetInteractionStore;
const { selectedGroup, selectedAssets, assetsInAlbumState, assetSelectionCandidates, isMultiSelectState } =
assetInteractionStore;
const dispatch = createEventDispatcher();
let isMouseOverGroup = false;
@ -94,10 +94,10 @@
return;
}
if ($isMultiSelectStoreState) {
if ($isMultiSelectState) {
assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle);
} else {
assetInteractionStore.setViewingAsset(asset);
assetViewingStore.setAssetId(asset.id);
}
};
@ -137,7 +137,7 @@
// Show multi select icon on hover on date group
hoveredDateGroup = dateGroupTitle;
if ($isMultiSelectStoreState) {
if ($isMultiSelectState) {
dispatch('selectAssetCandidates', { asset });
}
};
@ -207,9 +207,9 @@
on:click={() => assetClickHandler(asset, assetsInDateGroup, dateGroupTitle)}
on:select={() => assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle)}
on:mouse-event={() => assetMouseEventHandler(dateGroupTitle, asset)}
selected={$selectedAssets.has(asset) || $assetsInAlbumStoreState.some(({ id }) => id === asset.id)}
selected={$selectedAssets.has(asset) || $assetsInAlbumState.some(({ id }) => id === asset.id)}
selectionCandidate={$assetSelectionCandidates.has(asset)}
disabled={$assetsInAlbumStoreState.some(({ id }) => id === asset.id)}
disabled={$assetsInAlbumState.some(({ id }) => id === asset.id)}
thumbnailWidth={box.width}
thumbnailHeight={box.height}
/>