Merge pull request #8 from shefing/albums_view

Albums view
shefing · Nov 6, 2023 · bb1d058 · bb1d058
2 parents 729d97b + 7d62217
commit bb1d058
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 52 deletions.
diff --git a/web/src/routes/(user)/albums/[albumId]/+page.server.ts b/web/src/routes/(user)/albums/[albumId]/+page.server.ts
@@ -1,6 +1,7 @@
 import { AppRoute } from '$lib/constants';
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
+import type { PeopleForAlbumResponseDto } from '../../../../api';
 
 export const load = (async ({ params, locals: { api, user } }) => {
   if (!user) {
@@ -9,41 +10,23 @@ export const load = (async ({ params, locals: { api, user } }) => {
 
   try {
     const { data: album } = await api.albumApi.getAlbumInfo({ id: params.albumId });
+    const { data: peoples } = await api.albumApi.getAlbumPeople({ id: params.albumId });
 
-    let albumPeoples: any[] = [];
-    if (album.assets.length) {
-      for await (const asset of album.assets) {
-        const { data } = await api.assetApi.getAssetById({ id: asset.id, key: api.getKey() });
-        if (data.people?.length) {
-          for (const people of data.people) {
-            if (!albumPeoples.map((p) => p.id).includes(people.id)) {
-              albumPeoples.push({ ...people, appears: 1 });
-            } else {
-              let existPeopleInd = albumPeoples.findIndex((p) => p.id === people.id);
-              albumPeoples[existPeopleInd].appears = albumPeoples[existPeopleInd].appears + 1;
-            }
-          }
-        }
-      }
+    let namedPeoples: PeopleForAlbumResponseDto[] = [],
+      unNamedPeoples: PeopleForAlbumResponseDto[] = [];
+
+    for (const p of peoples) {
+      p.personName.length ? namedPeoples.push(p) : unNamedPeoples.push(p);
     }
 
-    albumPeoples.sort((a, b) => {
-      if (b.appears !== a.appears) {
-        return b.appears - a.appears;
-      }
-      if (a.name === '') {
-        return 1;
-      } else if (b.name === '') {
-        return -1;
-      } else {
-        return a.name.localeCompare(b.name);
-      }
-    });
+    namedPeoples.sort((a, b) => b.albumCount - a.albumCount || a.personName.localeCompare(b.personName));
+    unNamedPeoples.sort((a, b) => b.albumCount - a.albumCount);
 
     return {
       album,
       user,
-      albumPeoples,
+      namedPeoples,
+      unNamedPeoples,
       meta: {
         title: album.albumName,
       },

diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { afterNavigate, goto } from '$app/navigation';
+  import { page } from '$app/stores';
   import EditDescriptionModal from '$lib/components/album-page/edit-description-modal.svelte';
   import ShareInfoModal from '$lib/components/album-page/share-info-modal.svelte';
   import UserSelectionModal from '$lib/components/album-page/user-selection-modal.svelte';
@@ -39,7 +40,8 @@
   import type { PageData } from './$types';
   import { clickOutside } from '$lib/utils/click-outside';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
-  import ImageThumbnail from '../../../../lib/components/assets/thumbnail/image-thumbnail.svelte';
+  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+
   import {
     mdiPlus,
     mdiDotsVertical,
@@ -49,6 +51,7 @@
     mdiDeleteOutline,
     mdiFolderDownloadOutline,
     mdiLink,
+    mdiCloseCircle,
   } from '@mdi/js';
 
   export let data: PageData;
@@ -57,8 +60,8 @@
 
   let album = data.album;
   $: album = data.album;
-  $: albumPeoples = data.albumPeoples;
-  $: console.log('albumPeoples', albumPeoples);
+  $: namedPeoples = data.namedPeoples;
+  $: unNamedPeoples = data.unNamedPeoples;
 
   enum ViewMode {
     CONFIRM_DELETE = 'confirm-delete',
@@ -78,8 +81,11 @@
   let isCreatingSharedAlbum = false;
   let currentAlbumName = '';
   let contextMenuPosition: { x: number; y: number } = { x: 0, y: 0 };
+  const queryParams = new URLSearchParams($page.url.search);
+  const personId = queryParams.get('personId');
+  const options = personId ? { albumId: album.id, personId } : { albumId: album.id };
 
-  const assetStore = new AssetStore({ albumId: album.id });
+  const assetStore = new AssetStore(options);
   const assetInteractionStore = createAssetInteractionStore();
   const { isMultiSelectState, selectedAssets } = assetInteractionStore;
 
@@ -312,6 +318,14 @@
       handleError(error, 'Error updating album description');
     }
   };
+
+  const handleFiterByPeople = (personId: string): void => {
+    window.location.replace(`${$page.url.pathname}?personId=${personId}`);
+  };
+
+  const handleResetFilter = (): void => {
+    window.location.replace($page.url.pathname);
+  };
 </script>
 
 <header>
@@ -513,25 +527,61 @@
               {album.description || 'Add description'}
             </button>
           {/if}
-          {#if albumPeoples.length}
-            <div class="personWrapper">
-              {#each albumPeoples as people}
-                <a href="/people/{people.id}">
-                  <button>
-                    <ImageThumbnail
-                      circle
-                      shadow
-                      url={api.getPeopleThumbnailUrl(people.id)}
-                      altText={people.name}
-                      title={people.name}
-                      widthStyle="3.375rem"
-                      heightStyle="3.375rem"
-                    />
-                  </button></a
-                >
-              {/each}
-            </div>
-          {/if}
+          <div class="namedUnNamedWrapper">
+            {#if namedPeoples.length}
+              <div class="personsWrapper">
+                {#each namedPeoples as people}
+                  {#if !personId || personId === people.personId}
+                    <div class={personId ? 'cancelWrapper' : 'personFilterWrapper'}>
+                      <a href="/people/{people.personId}">
+                        <ImageThumbnail
+                          circle
+                          shadow
+                          url={api.getPeopleThumbnailUrl(people.personId)}
+                          altText={people.personName}
+                          title={`${people.personName}\nin ${people.albumCount} ${
+                            people.albumCount > 1 ? 'albums' : 'album'
+                          }`}
+                          widthStyle="3.375rem"
+                          heightStyle="3.375rem"
+                        />
+                      </a>
+                      <button
+                        class={personId ? 'cancelFilterBtn' : 'personNameFilterBtn'}
+                        title={`🔎 ${people.personName}`}
+                        on:click={() => (personId ? handleResetFilter() : handleFiterByPeople(people.personId))}
+                        >{people.personName}
+                        {#if personId}
+                          <Icon path={mdiCloseCircle} size="18" />
+                        {/if}
+                      </button>
+                    </div>
+                  {/if}
+                {/each}
+              </div>
+            {/if}
+            {#if namedPeoples.length}
+              <div class="personsWrapper">
+                {#each unNamedPeoples as people}
+                  {#if !personId || personId === people.personId}
+                    <div class="personFilterWrapper">
+                      <a href="/people/{people.personId}">
+                        <ImageThumbnail
+                          circle
+                          shadow
+                          url={api.getPeopleThumbnailUrl(people.personId)}
+                          altText={people.personName}
+                          title={`in ${people.albumCount} ${people.albumCount > 1 ? 'albums' : 'album'}`}
+                          widthStyle="3.375rem"
+                          heightStyle="3.375rem"
+                        />
+                      </a>
+                    </div>
+                  {/if}
+                {/each}
+              </div>
+            {/if}
+          </div>
         </section>
       {/if}
 
@@ -599,10 +649,41 @@
 {/if}
 
 <style>
-  .personWrapper {
+  .personsWrapper {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 0.5rem;
   }
+
+  .personFilterWrapper {
+    width: 4rem;
+  }
+
+  .cancelWrapper,
+  .personFilterWrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .personNameFilterBtn {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    font-size: small;
+    max-width: 100%;
+  }
+
+  .cancelFilterBtn {
+    font-size: small;
+    display: flex;
+    gap: 0.2rem;
+  }
+
+  .namedUnNamedWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
 </style>