feat(web): enhance ux/ui of the album list page (#8499)
* feat(web): enhance ux/ui of the album list page * fix unit tests * feat(web): enhance ux/ui of the album list page * fix unit tests * small styling * better dot * lint --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Ethan Margaillan
@@ -1,23 +1,23 @@
|
||||
<script lang="ts">
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { slide } from 'svelte/transition';
|
||||
import type { AlbumResponseDto } from '@immich/sdk';
|
||||
import TableHeader from '$lib/components/album-page/albums-table-header.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { AlbumGroupBy, albumViewSettings } from '$lib/stores/preferences.store';
|
||||
import type { ContextMenuPosition } from '$lib/utils/context-menu';
|
||||
import { mdiChevronRight } from '@mdi/js';
|
||||
import AlbumTableHeader from '$lib/components/album-page/albums-table-header.svelte';
|
||||
import AlbumTableRow from '$lib/components/album-page/albums-table-row.svelte';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
|
||||
import type { Sort } from '$lib/components/album-page/albums-list.svelte';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { dateFormats } from '$lib/constants';
|
||||
import { user } from '$lib/stores/user.store';
|
||||
import {
|
||||
isAlbumGroupCollapsed,
|
||||
toggleAlbumGroupCollapsing,
|
||||
sortOptionsMetadata,
|
||||
type AlbumGroup,
|
||||
} from '$lib/utils/album-utils';
|
||||
|
||||
export let albumsFiltered: AlbumResponseDto[];
|
||||
export let sortByOptions: Sort[];
|
||||
export let onChooseAlbumToDelete: (album: AlbumResponseDto) => void;
|
||||
export let onAlbumToEdit: (album: AlbumResponseDto) => void;
|
||||
|
||||
const dateLocaleString = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString($locale, dateFormats.album);
|
||||
};
|
||||
export let groupedAlbums: AlbumGroup[];
|
||||
export let albumGroupOption: string = AlbumGroupBy.None;
|
||||
export let onShowContextMenu: ((position: ContextMenuPosition, album: AlbumResponseDto) => unknown) | undefined =
|
||||
undefined;
|
||||
</script>
|
||||
|
||||
<table class="mt-2 w-full text-left">
|
||||
@@ -25,64 +25,49 @@
|
||||
class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
|
||||
>
|
||||
<tr class="flex w-full place-items-center p-2 md:p-5">
|
||||
{#each sortByOptions as option, index (index)}
|
||||
<TableHeader {option} />
|
||||
{#each sortOptionsMetadata as option, index (index)}
|
||||
<AlbumTableHeader {option} />
|
||||
{/each}
|
||||
<th class="hidden text-center text-sm font-medium 2xl:block 2xl:w-[12%]">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg">
|
||||
{#each albumsFiltered as album (album.id)}
|
||||
<tr
|
||||
class="flex h-[50px] w-full place-items-center border-[3px] border-transparent p-2 text-center odd:bg-immich-gray even:bg-immich-bg hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:p-5"
|
||||
on:click={() => goto(`${AppRoute.ALBUMS}/${album.id}`)}
|
||||
{#if albumGroupOption === AlbumGroupBy.None}
|
||||
<tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg">
|
||||
{#each groupedAlbums[0].albums as album (album.id)}
|
||||
<AlbumTableRow {album} {onShowContextMenu} />
|
||||
{/each}
|
||||
</tbody>
|
||||
{:else}
|
||||
{#each groupedAlbums as albumGroup (albumGroup.id)}
|
||||
{@const isCollapsed = isAlbumGroupCollapsed($albumViewSettings, albumGroup.id)}
|
||||
{@const iconRotation = isCollapsed ? 'rotate-0' : 'rotate-90'}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<tbody
|
||||
class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg mt-4 hover:cursor-pointer"
|
||||
on:click={() => toggleAlbumGroupCollapsing(albumGroup.id)}
|
||||
>
|
||||
<a data-sveltekit-preload-data="hover" class="flex w-full" href="{AppRoute.ALBUMS}/{album.id}">
|
||||
<td class="text-md text-ellipsis text-left w-8/12 sm:w-4/12 md:w-4/12 xl:w-[30%] 2xl:w-[40%]"
|
||||
>{album.albumName}</td
|
||||
>
|
||||
<td class="text-md text-ellipsis text-center sm:w-2/12 md:w-2/12 xl:w-[15%] 2xl:w-[12%]">
|
||||
{album.assetCount}
|
||||
{album.assetCount > 1 ? `items` : `item`}
|
||||
<tr class="flex w-full place-items-center p-2 md:pl-5 md:pr-5 md:pt-3 md:pb-3">
|
||||
<td class="text-md text-left -mb-1">
|
||||
<Icon
|
||||
path={mdiChevronRight}
|
||||
size="20"
|
||||
class="inline-block -mt-2 transition-all duration-[250ms] {iconRotation}"
|
||||
/>
|
||||
<span class="font-bold text-2xl">{albumGroup.name}</span>
|
||||
<span class="ml-1.5">({albumGroup.albums.length} {albumGroup.albums.length > 1 ? 'albums' : 'album'})</span>
|
||||
</td>
|
||||
<td class="text-md hidden text-ellipsis text-center sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]"
|
||||
>{dateLocaleString(album.updatedAt)}
|
||||
</td>
|
||||
<td class="text-md hidden text-ellipsis text-center sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]"
|
||||
>{dateLocaleString(album.createdAt)}</td
|
||||
>
|
||||
<td class="text-md text-ellipsis text-center hidden xl:block xl:w-[15%] 2xl:w-[12%]">
|
||||
{#if album.endDate}
|
||||
{dateLocaleString(album.endDate)}
|
||||
{:else}
|
||||
❌
|
||||
{/if}</td
|
||||
>
|
||||
<td class="text-md text-ellipsis text-center hidden xl:block xl:w-[15%] 2xl:w-[12%]"
|
||||
>{#if album.startDate}
|
||||
{dateLocaleString(album.startDate)}
|
||||
{:else}
|
||||
❌
|
||||
{/if}</td
|
||||
>
|
||||
</a>
|
||||
<td class="text-md hidden text-ellipsis text-center 2xl:block xl:w-[15%] 2xl:w-[12%]">
|
||||
{#if $user.id === album.ownerId}
|
||||
<button
|
||||
on:click|stopPropagation={() => onAlbumToEdit(album)}
|
||||
class="rounded-full z-1 bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
|
||||
>
|
||||
<Icon path={mdiPencilOutline} size="16" />
|
||||
</button>
|
||||
<button
|
||||
on:click|stopPropagation={() => onChooseAlbumToDelete(album)}
|
||||
class="rounded-full z-1 bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
|
||||
>
|
||||
<Icon path={mdiTrashCanOutline} size="16" />
|
||||
</button>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
</tr>
|
||||
</tbody>
|
||||
{#if !isCollapsed}
|
||||
<tbody
|
||||
class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg mt-4"
|
||||
transition:slide={{ duration: 300 }}
|
||||
>
|
||||
{#each albumGroup.albums as album (album.id)}
|
||||
<AlbumTableRow {album} {onShowContextMenu} />
|
||||
{/each}
|
||||
</tbody>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
{/if}
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user