- sort the selected albums by albumName descending. Allows for better stacking when albums with very long names are selected.

This commit is contained in:
CJPeckover
2025-06-07 00:40:10 -04:00
parent 76d8954ad1
commit b52e882e69
@@ -15,10 +15,13 @@
let { selectedAlbums = $bindable() }: Props = $props(); let { selectedAlbums = $bindable() }: Props = $props();
let allAlbums: AlbumResponseDto[] = $state([]); let allAlbums: AlbumResponseDto[] = $state([]);
let albumMap = $derived(Object.fromEntries(allAlbums.map((album) => [album.id, album]))); let albumMap = $derived(Object.fromEntries(allAlbums.map((album) => [album.id, album])));
let selectedOption = $state(undefined); let selectedOption = $state(undefined);
let sortedSelectedAlbums = $derived(Array.from(selectedAlbums).sort((a, b) => albumMap[b]?.albumName?.length - albumMap[a]?.albumName?.length));
onMount(async () => { onMount(async () => {
allAlbums = await getAllAlbums({}); allAlbums = await getAllAlbums({});
}); });
@@ -29,6 +32,7 @@
} }
selectedAlbums.add(option.value); selectedAlbums.add(option.value);
selectedOption = undefined; selectedOption = undefined;
}; };
@@ -59,7 +63,7 @@
</form> </form>
<section class="flex flex-wrap pt-2 gap-1"> <section class="flex flex-wrap pt-2 gap-1">
{#each selectedAlbums as albumId (albumId)} {#each sortedSelectedAlbums as albumId (albumId)}
{@const album = albumMap[albumId]} {@const album = albumMap[albumId]}
{#if album} {#if album}
<div class="flex group transition-all"> <div class="flex group transition-all">