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

feat(web): Add album sorting to albums view (#2861)

Browse source 
* Add album sorting to web albums view

* generate api

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Krisjanis Lejejs 2023-06-21 04:00:59 +03:00 • committed by GitHub
parent 3c5fefde2e
commit 746ca5d5ed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 105 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/src/api/open-api/api.ts generated
View file

@ -284,6 +284,12 @@ export interface AlbumResponseDto {
* @memberof AlbumResponseDto
*/
'owner': UserResponseDto;
/**
*
* @type {string}
* @memberof AlbumResponseDto
*/
'lastModifiedAssetTimestamp'?: string;
}
/**
*

48
web/src/routes/(user)/albums/+page.svelte
View file

@ -15,8 +15,17 @@
export let data: PageData;
const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
let selectedSortBy = sortByOptions[0];
const handleChangeSortBy = (e: Event) => {
const target = e.target as HTMLSelectElement;
selectedSortBy = target.value;
};
const {
albums,
albums: unsortedAlbums,
isShowContextMenu,
contextMenuPosition,
createAlbum,
@ -26,6 +35,28 @@
closeAlbumContextMenu
} = useAlbums({ albums: data.albums });
let albums = unsortedAlbums;
const sortByDate = (a: string, b: string) => {
const aDate = new Date(a);
const bDate = new Date(b);
return bDate.getTime() - aDate.getTime();
};
$: {
if (selectedSortBy === 'Most recent photo') {
$albums = $unsortedAlbums.sort((a, b) =>
a.lastModifiedAssetTimestamp && b.lastModifiedAssetTimestamp
? sortByDate(a.lastModifiedAssetTimestamp, b.lastModifiedAssetTimestamp)
: sortByDate(a.updatedAt, b.updatedAt)
);
} else if (selectedSortBy === 'Last modified') {
$albums = $unsortedAlbums.sort((a, b) => sortByDate(a.updatedAt, b.updatedAt));
} else if (selectedSortBy === 'Album title') {
$albums = $unsortedAlbums.sort((a, b) => a.albumName.localeCompare(b.albumName));
}
}
const handleCreateAlbum = async () => {
const newAlbum = await createAlbum();
if (newAlbum) {
@ -52,7 +83,20 @@
</script>
<UserPageLayout user={data.user} title={data.meta.title}>
<div slot="buttons">
<div class="flex place-items-center gap-2" slot="buttons">
<label class="text-xs" for="sortBy">Sort by:</label>
<select
class="text-sm bg-slate-200 p-2 rounded-lg dark:bg-gray-600 hover:cursor-pointer"
name="sortBy"
id="sortBy-select"
bind:value={selectedSortBy}
on:change={handleChangeSortBy}
>
{#each sortByOptions as option}
<option value={option}>{option}</option>
{/each}
</select>
<LinkButton on:click={handleCreateAlbum}>
<div class="flex place-items-center gap-2 text-sm">
<PlusBoxOutline size="18" />