|
|
@@ -1,6 +1,9 @@
|
|
|
<script lang="ts" context="module">
|
|
|
+ // table is the text printed in the table and sortTitle is the text printed in the dropDow menu
|
|
|
+
|
|
|
export interface Sort {
|
|
|
- title: string;
|
|
|
+ table: string;
|
|
|
+ sortTitle: string;
|
|
|
sortDesc: boolean;
|
|
|
widthClass: string;
|
|
|
sortFn: (reverse: boolean, albums: AlbumResponseDto[]) => AlbumResponseDto[];
|
|
|
@@ -51,75 +54,46 @@
|
|
|
|
|
|
let sortByOptions: Record<string, Sort> = {
|
|
|
albumTitle: {
|
|
|
- title: 'Album title',
|
|
|
+ table: 'Album title',
|
|
|
+ sortTitle: 'Album title',
|
|
|
sortDesc: $albumViewSettings.sortDesc, // Load Sort Direction
|
|
|
- widthClass: 'text-left w-8/12 sm:w-4/12 md:w-4/12 md:w-4/12 xl:w-[30%] 2xl:w-[40%]',
|
|
|
+ widthClass: 'w-8/12 text-left sm:w-4/12 md:w-4/12 md:w-4/12 2xl:w-6/12',
|
|
|
sortFn: (reverse, albums) => {
|
|
|
return orderBy(albums, 'albumName', [reverse ? 'desc' : 'asc']);
|
|
|
},
|
|
|
},
|
|
|
numberOfAssets: {
|
|
|
- title: 'Number of assets',
|
|
|
+ table: 'Assets',
|
|
|
+ sortTitle: 'Number of assets',
|
|
|
sortDesc: $albumViewSettings.sortDesc,
|
|
|
- widthClass: 'text-center w-4/12 m:w-2/12 md:w-2/12 xl:w-[15%] 2xl:w-[12%]',
|
|
|
+ widthClass: 'w-4/12 text-center sm:w-2/12 2xl:w-1/12',
|
|
|
sortFn: (reverse, albums) => {
|
|
|
return orderBy(albums, 'assetCount', [reverse ? 'desc' : 'asc']);
|
|
|
},
|
|
|
},
|
|
|
lastModified: {
|
|
|
- title: 'Last modified',
|
|
|
+ table: 'Updated date',
|
|
|
+ sortTitle: 'Last modified',
|
|
|
sortDesc: $albumViewSettings.sortDesc,
|
|
|
- widthClass: 'text-center hidden sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]',
|
|
|
+ widthClass: 'text-center hidden sm:block w-3/12 lg:w-2/12',
|
|
|
sortFn: (reverse, albums) => {
|
|
|
return orderBy(albums, [(album) => new Date(album.updatedAt)], [reverse ? 'desc' : 'asc']);
|
|
|
},
|
|
|
},
|
|
|
- created: {
|
|
|
- title: 'Created date',
|
|
|
- sortDesc: $albumViewSettings.sortDesc,
|
|
|
- widthClass: 'text-center hidden sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]',
|
|
|
- sortFn: (reverse, albums) => {
|
|
|
- return orderBy(albums, [(album) => new Date(album.createdAt)], [reverse ? 'desc' : 'asc']);
|
|
|
- },
|
|
|
- },
|
|
|
mostRecent: {
|
|
|
- title: 'Most recent photo',
|
|
|
- sortDesc: $albumViewSettings.sortDesc,
|
|
|
- widthClass: 'text-center hidden xl:block xl:w-[15%] 2xl:w-[12%]',
|
|
|
- sortFn: (reverse, albums) => {
|
|
|
- return orderBy(
|
|
|
- albums,
|
|
|
- [(album) => (album.endDate ? new Date(album.endDate) : '')],
|
|
|
- [reverse ? 'desc' : 'asc'],
|
|
|
- ).sort((a, b) => {
|
|
|
- if (a.endDate === undefined) {
|
|
|
- return 1;
|
|
|
- }
|
|
|
- if (b.endDate === undefined) {
|
|
|
- return -1;
|
|
|
- }
|
|
|
- return 0;
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- mostOld: {
|
|
|
- title: 'Oldest photo',
|
|
|
+ table: 'Created date',
|
|
|
+ sortTitle: 'Most recent photo',
|
|
|
sortDesc: $albumViewSettings.sortDesc,
|
|
|
- widthClass: 'text-center hidden xl:block xl:w-[15%] 2xl:w-[12%]',
|
|
|
+ widthClass: 'text-center hidden sm:block w-3/12 lg:w-2/12',
|
|
|
sortFn: (reverse, albums) => {
|
|
|
return orderBy(
|
|
|
albums,
|
|
|
- [(album) => (album.startDate ? new Date(album.startDate) : null)],
|
|
|
+ [
|
|
|
+ (album) =>
|
|
|
+ album.lastModifiedAssetTimestamp ? new Date(album.lastModifiedAssetTimestamp) : new Date(album.updatedAt),
|
|
|
+ ],
|
|
|
[reverse ? 'desc' : 'asc'],
|
|
|
- ).sort((a, b) => {
|
|
|
- if (a.startDate === undefined) {
|
|
|
- return 1;
|
|
|
- }
|
|
|
- if (b.startDate === undefined) {
|
|
|
- return -1;
|
|
|
- }
|
|
|
- return 0;
|
|
|
- });
|
|
|
+ );
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
@@ -170,25 +144,16 @@
|
|
|
};
|
|
|
|
|
|
$: {
|
|
|
+ const { sortBy } = $albumViewSettings;
|
|
|
for (const key in sortByOptions) {
|
|
|
- if (sortByOptions[key].title === $albumViewSettings.sortBy) {
|
|
|
+ if (sortByOptions[key].sortTitle === sortBy) {
|
|
|
$albums = sortByOptions[key].sortFn(sortByOptions[key].sortDesc, $unsortedAlbums);
|
|
|
$albumViewSettings.sortDesc = sortByOptions[key].sortDesc; // "Save" sortDesc
|
|
|
- $albumViewSettings.sortBy = sortByOptions[key].title;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- const test = (searched: string): Sort => {
|
|
|
- for (const key in sortByOptions) {
|
|
|
- if (sortByOptions[key].title === searched) {
|
|
|
- return sortByOptions[key];
|
|
|
- }
|
|
|
- }
|
|
|
- return sortByOptions[0];
|
|
|
- };
|
|
|
-
|
|
|
const handleCreateAlbum = async () => {
|
|
|
const newAlbum = await createAlbum();
|
|
|
if (newAlbum) {
|
|
|
@@ -255,20 +220,19 @@
|
|
|
|
|
|
<Dropdown
|
|
|
options={Object.values(sortByOptions)}
|
|
|
- selectedOption={test($albumViewSettings.sortBy)}
|
|
|
render={(option) => {
|
|
|
return {
|
|
|
- title: option.title,
|
|
|
+ title: option.sortTitle,
|
|
|
icon: option.sortDesc ? mdiArrowDownThin : mdiArrowUpThin,
|
|
|
};
|
|
|
}}
|
|
|
on:select={(event) => {
|
|
|
for (const key in sortByOptions) {
|
|
|
- if (sortByOptions[key].title === event.detail.title) {
|
|
|
+ if (sortByOptions[key].sortTitle === event.detail.sortTitle) {
|
|
|
sortByOptions[key].sortDesc = !sortByOptions[key].sortDesc;
|
|
|
- $albumViewSettings.sortBy = sortByOptions[key].title;
|
|
|
}
|
|
|
}
|
|
|
+ $albumViewSettings.sortBy = event.detail.sortTitle;
|
|
|
}}
|
|
|
/>
|
|
|
|
|
|
@@ -307,7 +271,7 @@
|
|
|
{#each Object.keys(sortByOptions) as key (key)}
|
|
|
<TableHeader bind:albumViewSettings={$albumViewSettings.sortBy} bind:option={sortByOptions[key]} />
|
|
|
{/each}
|
|
|
- <th class="hidden text-center text-sm font-medium 2xl:block 2xl:w-[12%]">Action</th>
|
|
|
+ <th class="hidden w-2/12 text-center text-sm font-medium lg:block 2xl:w-1/12">Action</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody
|
|
|
@@ -320,34 +284,18 @@
|
|
|
on:keydown={(event) => event.key === 'Enter' && goto(`albums/${album.id}`)}
|
|
|
tabindex="0"
|
|
|
>
|
|
|
- <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%]">
|
|
|
+ <td class="text-md w-8/12 text-ellipsis text-left sm:w-4/12 md:w-4/12 2xl:w-6/12">{album.albumName}</td>
|
|
|
+ <td class="text-md w-4/12 text-ellipsis text-center sm:w-2/12 md:w-2/12 2xl:w-1/12">
|
|
|
{album.assetCount}
|
|
|
- {album.assetCount > 1 ? `items` : `item`}
|
|
|
- </td>
|
|
|
- <td class="text-md hidden text-ellipsis text-center sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]"
|
|
|
- >{dateLocaleString(album.updatedAt)}
|
|
|
+ {album.assetCount == 1 ? `item` : `items`}
|
|
|
</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 hidden w-3/12 text-ellipsis text-center sm:block lg:w-2/12"
|
|
|
+ >{dateLocaleString(album.updatedAt)}</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
|
|
|
+ <td class="text-md hidden w-3/12 text-ellipsis text-center sm:block lg:w-2/12"
|
|
|
+ >{dateLocaleString(album.createdAt)}</td
|
|
|
>
|
|
|
- <td class="text-md hidden text-ellipsis text-center 2xl:block xl:w-[15%] 2xl:w-[12%]">
|
|
|
+ <td class="text-md hidden w-2/12 text-ellipsis text-center lg:block 2xl:w-1/12">
|
|
|
<button
|
|
|
on:click|stopPropagation={() => handleEdit(album)}
|
|
|
class="rounded-full 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"
|
Alex