refactor(web): albums list (1) (#7660)

* refactor: albums list * fix: rename filename * chore: fix merge * pr feedback * chore: fix merge * pr feedback --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
2024-03-14 20:05:57 +01:00
parent 2080aeee4d
commit c04dfdf38b
6 changed files with 447 additions and 471 deletions
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import Dropdown from '$lib/components/elements/dropdown.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { AlbumViewMode, albumViewSettings } from '$lib/stores/preferences.store';
+  import {
+    mdiArrowDownThin,
+    mdiArrowUpThin,
+    mdiFormatListBulletedSquare,
+    mdiPlusBoxOutline,
+    mdiViewGridOutline,
+  } from '@mdi/js';
+  import { sortByOptions, type Sort, handleCreateAlbum } from '$lib/components/album-page/albums-list.svelte';
+  import SearchBar from '$lib/components/elements/search-bar.svelte';
+
+  export let searchAlbum: string;
+
+  const searchSort = (searched: string): Sort => {
+    return sortByOptions.find((option) => option.title === searched) || sortByOptions[0];
+  };
+
+  const handleChangeListMode = () => {
+    $albumViewSettings.view =
+      $albumViewSettings.view === AlbumViewMode.Cover ? AlbumViewMode.List : AlbumViewMode.Cover;
+  };
+</script>
+
+<div class="hidden lg:block lg:w-40 xl:w-60 2xl:w-80 h-10">
+  <SearchBar placeholder="Search albums" bind:name={searchAlbum} isSearching={false} />
+</div>
+<LinkButton on:click={handleCreateAlbum}>
+  <div class="flex place-items-center gap-2 text-sm">
+    <Icon path={mdiPlusBoxOutline} size="18" />
+    Create album
+  </div>
+</LinkButton>
+
+<Dropdown
+  options={Object.values(sortByOptions)}
+  selectedOption={searchSort($albumViewSettings.sortBy)}
+  render={(option) => {
+    return {
+      title: option.title,
+      icon: option.sortDesc ? mdiArrowDownThin : mdiArrowUpThin,
+    };
+  }}
+  on:select={(event) => {
+    for (const key of sortByOptions) {
+      if (key.title === event.detail.title) {
+        key.sortDesc = !key.sortDesc;
+        $albumViewSettings.sortBy = key.title;
+        break;
+      }
+    }
+  }}
+/>
+
+<LinkButton on:click={() => handleChangeListMode()}>
+  <div class="flex place-items-center gap-2 text-sm">
+    {#if $albumViewSettings.view === AlbumViewMode.List}
+      <Icon path={mdiViewGridOutline} size="18" />
+      <p class="hidden sm:block">Cover</p>
+    {:else}
+      <Icon path={mdiFormatListBulletedSquare} size="18" />
+      <p class="hidden sm:block">List</p>
+    {/if}
+  </div>
+</LinkButton>