self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-12 15:32:36 +02:00
Code Issues Releases Activity

feat(web): store albums sorting policy in local storage (#2966)

Browse Source
This commit is contained in:
Ethan Margaillan 2023-06-26 18:54:20 +02:00 committed by GitHub
parent d078aea32b
commit e803bc909f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/lib/stores/preferences.store.ts
View File

@ -37,3 +37,11 @@ export const mapSettings = persisted<MapSettings>('map-settings', {
}); });
export const videoViewerVolume = persisted<number>('video-viewer-volume', 1, {}); export const videoViewerVolume = persisted<number>('video-viewer-volume', 1, {});
export interface AlbumViewSettings {
sortBy: string;
}
export const albumViewSettings = persisted<AlbumViewSettings>('album-view-settings', {
sortBy: 'Most recent photo'
});

11
web/src/routes/(user)/albums/+page.svelte
View File

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { albumViewSettings } from '$lib/stores/preferences.store';
import AlbumCard from '$lib/components/album-page/album-card.svelte'; import AlbumCard from '$lib/components/album-page/album-card.svelte';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte'; import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
@ -17,7 +18,6 @@
export let data: PageData; export let data: PageData;
const sortByOptions = ['Most recent photo', 'Last modified', 'Album title']; const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
let selectedSortBy = sortByOptions[0];
const { const {
albums: unsortedAlbums, albums: unsortedAlbums,
@ -39,15 +39,16 @@
}; };
$: { $: {
if (selectedSortBy === 'Most recent photo') { const { sortBy } = $albumViewSettings;
if (sortBy === 'Most recent photo') {
$albums = $unsortedAlbums.sort((a, b) => $albums = $unsortedAlbums.sort((a, b) =>
a.lastModifiedAssetTimestamp && b.lastModifiedAssetTimestamp a.lastModifiedAssetTimestamp && b.lastModifiedAssetTimestamp
? sortByDate(a.lastModifiedAssetTimestamp, b.lastModifiedAssetTimestamp) ? sortByDate(a.lastModifiedAssetTimestamp, b.lastModifiedAssetTimestamp)
: sortByDate(a.updatedAt, b.updatedAt) : sortByDate(a.updatedAt, b.updatedAt)
); );
} else if (selectedSortBy === 'Last modified') { } else if (sortBy === 'Last modified') {
$albums = $unsortedAlbums.sort((a, b) => sortByDate(a.updatedAt, b.updatedAt)); $albums = $unsortedAlbums.sort((a, b) => sortByDate(a.updatedAt, b.updatedAt));
} else if (selectedSortBy === 'Album title') { } else if (sortBy === 'Album title') {
$albums = $unsortedAlbums.sort((a, b) => a.albumName.localeCompare(b.albumName)); $albums = $unsortedAlbums.sort((a, b) => a.albumName.localeCompare(b.albumName));
} }
} }
@ -86,7 +87,7 @@
</div> </div>
</LinkButton> </LinkButton>
<Dropdown options={sortByOptions} bind:value={selectedSortBy} /> <Dropdown options={sortByOptions} bind:value={$albumViewSettings.sortBy} />
</div> </div>
<!-- Album Card --> <!-- Album Card -->