Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-07-09 03:04:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): albums display order (#17106)

Browse Source 
* fix(web): albums display order

* ergonomic

* perf ergonomic

* miss 1
This commit is contained in:
Alex 2025-03-25 15:21:38 -05:00 committed by GitHub
parent aa4d6405f4
commit 37eb70c1eb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/src/lib/stores/assets-store.svelte.ts
View File

@ -9,7 +9,14 @@ import {
} from '$lib/utils/layout-utils'; } from '$lib/utils/layout-utils';
import { formatDateGroupTitle, fromLocalDateTime } from '$lib/utils/timeline-util'; import { formatDateGroupTitle, fromLocalDateTime } from '$lib/utils/timeline-util';
import { TUNABLES } from '$lib/utils/tunables'; import { TUNABLES } from '$lib/utils/tunables';
import { getAssetInfo, getTimeBucket, getTimeBuckets, TimeBucketSize, type AssetResponseDto } from '@immich/sdk'; import {
AssetOrder,
getAssetInfo,
getTimeBucket,
getTimeBuckets,
TimeBucketSize,
type AssetResponseDto,
} from '@immich/sdk';
import { debounce, isEqual, throttle } from 'lodash-es'; import { debounce, isEqual, throttle } from 'lodash-es';
import { DateTime } from 'luxon'; import { DateTime } from 'luxon';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -126,10 +133,15 @@ export class AssetDateGroup {
this.dayOfMonth = dayOfMonth; this.dayOfMonth = dayOfMonth;
} }
sortAssets() { sortAssets(sortOrder: AssetOrder = AssetOrder.Desc) {
this.intersetingAssets.sort((a, b) => { this.intersetingAssets.sort((a, b) => {
const aDate = DateTime.fromISO(a.asset!.fileCreatedAt).toUTC(); const aDate = DateTime.fromISO(a.asset!.fileCreatedAt).toUTC();
const bDate = DateTime.fromISO(b.asset!.fileCreatedAt).toUTC(); const bDate = DateTime.fromISO(b.asset!.fileCreatedAt).toUTC();
if (sortOrder === AssetOrder.Asc) {
return aDate.diff(bDate).milliseconds;
}
return bDate.diff(aDate).milliseconds; return bDate.diff(aDate).milliseconds;
}); });
} }
@ -232,7 +244,7 @@ export class AssetBucket {
#bucketHeight: number = $state(0); #bucketHeight: number = $state(0);
#top: number = $state(0); #top: number = $state(0);
#initialCount: number = 0; #initialCount: number = 0;
#sortOrder: AssetOrder = AssetOrder.Desc;
// --- should be private, but is used by AssetStore --- // --- should be private, but is used by AssetStore ---
bucketCount: number = $derived( bucketCount: number = $derived(
@ -248,9 +260,10 @@ export class AssetBucket {
readonly month: number; readonly month: number;
readonly year: number; readonly year: number;
constructor(store: AssetStore, utcDate: DateTime, initialCount: number) { constructor(store: AssetStore, utcDate: DateTime, initialCount: number, order: AssetOrder = AssetOrder.Desc) {
this.store = store; this.store = store;
this.#initialCount = initialCount; this.#initialCount = initialCount;
this.#sortOrder = order;
const year = utcDate.get('year'); const year = utcDate.get('year');
const month = utcDate.get('month'); const month = utcDate.get('month');
@ -317,6 +330,10 @@ export class AssetBucket {
} }
sortDateGroups() { sortDateGroups() {
if (this.#sortOrder === AssetOrder.Asc) {
this.dateGroups.sort((a, b) => a.date.diff(b.date).milliseconds);
}
this.dateGroups.sort((a, b) => b.date.diff(a.date).milliseconds); this.dateGroups.sort((a, b) => b.date.diff(a.date).milliseconds);
} }
@ -398,10 +415,10 @@ export class AssetBucket {
} }
} }
for (const group of changedDateGroups) { for (const group of changedDateGroups) {
group.sortAssets(); group.sortAssets(this.#sortOrder);
} }
for (const group of newDateGroups) { for (const group of newDateGroups) {
group.sortAssets(); group.sortAssets(this.#sortOrder);
} }
if (newDateGroups.size > 0) { if (newDateGroups.size > 0) {
this.sortDateGroups(); this.sortDateGroups();
@ -756,7 +773,7 @@ export class AssetStore {
this.buckets = timebuckets.map((bucket) => { this.buckets = timebuckets.map((bucket) => {
const utcDate = DateTime.fromISO(bucket.timeBucket).toUTC(); const utcDate = DateTime.fromISO(bucket.timeBucket).toUTC();
return new AssetBucket(this, utcDate, bucket.count); return new AssetBucket(this, utcDate, bucket.count, this.#options.order);
}); });
this.albumAssets.clear(); this.albumAssets.clear();
this.#updateViewportGeometry(false); this.#updateViewportGeometry(false);
@ -1021,7 +1038,7 @@ export class AssetStore {
let bucket = this.getBucketByDate(year, month); let bucket = this.getBucketByDate(year, month);
if (!bucket) { if (!bucket) {
bucket = new AssetBucket(this, utc, 1); bucket = new AssetBucket(this, utc, 1, this.#options.order);
this.buckets.push(bucket); this.buckets.push(bucket);
} }
bucket.addAssets([asset]); bucket.addAssets([asset]);
@ -1033,7 +1050,7 @@ export class AssetStore {
}); });
for (const dateGroup of updatedDateGroups) { for (const dateGroup of updatedDateGroups) {
dateGroup.sortAssets(); dateGroup.sortAssets(this.#options.order);
} }
for (const bucket of updatedBuckets) { for (const bucket of updatedBuckets) {
bucket.sortDateGroups(); bucket.sortDateGroups();