From 36965695d94bd0405e68418c56d86a3edad0320f Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Wed, 6 Nov 2024 13:22:34 +0100
Subject: [PATCH] (refactor): replaced album cards

---
 front/src/components/Home.vue                 |  2 +-
 front/src/components/album/Card.vue           | 79 ++++++++++++++-----
 .../components/{audio => }/album/Widget.vue   |  3 +-
 front/src/components/album/style.scss         | 25 ------
 front/src/components/audio/ChannelSeries.vue  |  2 +-
 front/src/components/audio/Search.vue         |  2 +-
 front/src/components/library/Albums.vue       |  5 +-
 front/src/components/library/ArtistDetail.vue |  2 +-
 front/src/components/library/Home.vue         |  2 +-
 front/src/components/library/TagDetail.vue    |  2 +-
 front/src/views/Search.vue                    |  2 +-
 front/src/views/library/DetailAlbums.vue      |  2 +-
 12 files changed, 72 insertions(+), 56 deletions(-)
 rename front/src/components/{audio => }/album/Widget.vue (96%)
 delete mode 100644 front/src/components/album/style.scss

diff --git a/front/src/components/Home.vue b/front/src/components/Home.vue
index 9b6cd4d80..ec7bfe705 100644
--- a/front/src/components/Home.vue
+++ b/front/src/components/Home.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { get } from 'lodash-es'
-import AlbumWidget from '~/components/audio/album/Widget.vue'
+import AlbumWidget from '~/components/album/Widget.vue'
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import LoginForm from '~/components/auth/LoginForm.vue'
 import SignupForm from '~/components/auth/SignupForm.vue'
diff --git a/front/src/components/album/Card.vue b/front/src/components/album/Card.vue
index 8eacf3fa4..aca894e13 100644
--- a/front/src/components/album/Card.vue
+++ b/front/src/components/album/Card.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { FwCard, FwPlayButton, FwOptionsButton } from '~/components'
 import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
 
-import type { Album } from '~/types/models'
-
-const { t } = useI18n()
+import type { Album } from '~/types'
 
 const play = defineEmit<[album: Album]>()
-const album = defineProp<Album>('album', { required: true })
+
+interface Props {
+  album: Album;
+}
+
+const props = defineProps<Props>()
+
+const { album } = props
 
 let navigate = (to: 'artist' | 'album') => {}
 
@@ -22,30 +25,68 @@ if (import.meta.env.PROD) {
 
 <template>
   <fw-card
-    :title="album.name"
-    :image="album.cover.urls.original"
-    @click="navigate('album')"
+    :title="album.title"
+    :image="album.cover?.urls.original"
     class="album-card"
   >
     <fw-play-button @play="play(album)" />
 
     <a
-    v-for="ac in album.artistCredit"
-    :key="ac.artist.id"
-    @click.stop="navigate('artist')"
-    class="funkwhale link"
-  >
-    {{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
-    <!-- {{ ac.joinphrase }} -->
+      v-for="ac in album.artist_credit"
+      :key="ac.artist.id"
+      class="funkwhale link"
+      @click.stop="navigate('artist')"
+    >
+      {{ ac.credit ?? $t('components.Queue.meta.unknownArtist') }}
+      {{ ac.joinphrase }}
     </a>
 
+    <tags-list
+      label-classes="tiny"
+      :truncate-size="20"
+      :limit="2"
+      :show-more="false"
+      :tags="album.tags"
+    />
+
+    <router-link
+      class="discrete link"
+      :to="{name: 'library.albums.detail', params: {id: album.id}}"
+    >
+      Go to album
+    </router-link>
+
     <template #footer>
-      {{ t('vui.tracks', album.tracks.length) }}
+      {{ $t('components.audio.album.Card.meta.tracks', album.tracks?.length || 0) }}
       <fw-options-button />
     </template>
   </fw-card>
 </template>
 
-<style lang="scss">
-@import './style.scss'
+<style scoped>
+.funkwhale {
+  &.card.album-card {
+    --fw-border-radius: 12px;
+    --fw-card-width: 208px;
+    --fw-card-image-width: var(--fw-card-width);
+    --fw-card-padding: 16px;
+
+    > .card-image {
+      border-radius: 0 !important;
+      width: var(--fw-card-image-width);
+      margin: calc(-1 * var(--fw-card-padding)) calc(-1 * var(--fw-card-padding)) 0;
+    }
+
+    > .card-title {
+      font-size: 1rem;
+      text-align: left !important;
+      padding-top: 16px !important;
+    }
+
+    > .card-content {
+      padding-top: 0 !important;
+      text-align: left !important;
+    }
+  }
+}
 </style>
diff --git a/front/src/components/audio/album/Widget.vue b/front/src/components/album/Widget.vue
similarity index 96%
rename from front/src/components/audio/album/Widget.vue
rename to front/src/components/album/Widget.vue
index 146ba2df3..813a36b66 100644
--- a/front/src/components/audio/album/Widget.vue
+++ b/front/src/components/album/Widget.vue
@@ -6,7 +6,7 @@ import { useStore } from '~/store'
 
 import axios from 'axios'
 
-import AlbumCard from '~/components/audio/album/Card.vue'
+import AlbumCard from '~/components/album/Card.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -66,6 +66,7 @@ watch(
 
 <template>
   <div class="wrapper">
+  front/src/components/album/Widget.vue
     <h3
       v-if="!!$slots.title"
       class="ui header"
diff --git a/front/src/components/album/style.scss b/front/src/components/album/style.scss
deleted file mode 100644
index 4a3704529..000000000
--- a/front/src/components/album/style.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.funkwhale {
-  &.card.album-card {
-    --fw-border-radius: 12px;
-    --fw-card-width: 208px;
-    --fw-card-image-width: var(--fw-card-width);
-    --fw-card-padding: 16px;
-
-    > .card-image {
-      border-radius: 0 !important;
-      width: var(--fw-card-image-width);
-      margin: calc(-1 * var(--fw-card-padding)) calc(-1 * var(--fw-card-padding)) 0;
-    }
-
-    > .card-title {
-      font-size: 1rem;
-      text-align: left !important;
-      padding-top: 16px !important;
-    }
-
-    > .card-content {
-      padding-top: 0 !important;
-      text-align: left !important;
-    }
-  }
-}
diff --git a/front/src/components/audio/ChannelSeries.vue b/front/src/components/audio/ChannelSeries.vue
index da8b8329a..d403f5c03 100644
--- a/front/src/components/audio/ChannelSeries.vue
+++ b/front/src/components/audio/ChannelSeries.vue
@@ -6,7 +6,7 @@ import { ref, reactive } from 'vue'
 
 import axios from 'axios'
 import ChannelSerieCard from '~/components/audio/ChannelSerieCard.vue'
-import AlbumCard from '~/components/audio/album/Card.vue'
+import AlbumCard from '~/components/album/Card.vue'
 
 interface Props {
   filters: object
diff --git a/front/src/components/audio/Search.vue b/front/src/components/audio/Search.vue
index 6eb1b4f1b..95024a624 100644
--- a/front/src/components/audio/Search.vue
+++ b/front/src/components/audio/Search.vue
@@ -6,7 +6,7 @@ import { ref, computed, reactive, watch, onMounted } from 'vue'
 import { refDebounced } from '@vueuse/core'
 
 import axios from 'axios'
-import AlbumCard from '~/components/audio/album/Card.vue'
+import AlbumCard from '~/components/album/Card.vue'
 import ArtistCard from '~/components/audio/artist/Card.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index c1c128b92..fa0b51e3e 100644
--- a/front/src/components/library/Albums.vue
+++ b/front/src/components/library/Albums.vue
@@ -15,7 +15,7 @@ import axios from 'axios'
 import $ from 'jquery'
 
 import TagsSelector from '~/components/library/TagsSelector.vue'
-import AlbumCard from '~/components/audio/album/Card.vue'
+import AlbumCard from '~/components/album/Card.vue'
 import Pagination from '~/components/vui/Pagination.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
@@ -203,7 +203,6 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           </div>
         </div>
       </form>
-      <div class="ui hidden divider" />
       <div
         v-if="result"
         transition-duration="0"
@@ -214,7 +213,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       >
         <div
           v-if="result.results.length > 0"
-          class="ui app-cards cards"
+          style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
         >
           <album-card
             v-for="album in result.results"
diff --git a/front/src/components/library/ArtistDetail.vue b/front/src/components/library/ArtistDetail.vue
index 87e593ed2..065e25b33 100644
--- a/front/src/components/library/ArtistDetail.vue
+++ b/front/src/components/library/ArtistDetail.vue
@@ -9,7 +9,7 @@ import axios from 'axios'
 
 import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 import TrackTable from '~/components/audio/track/Table.vue'
-import AlbumCard from '~/components/audio/album/Card.vue'
+import AlbumCard from '~/components/album/Card.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index 7fece1319..f13af9e3c 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -8,7 +8,7 @@ import axios from 'axios'
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import PlaylistWidget from '~/components/playlists/Widget.vue'
 import TrackWidget from '~/components/audio/track/Widget.vue'
-import AlbumWidget from '~/components/audio/album/Widget.vue'
+import AlbumWidget from '~/components/album/Widget.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 import useLogger from '~/composables/useLogger'
diff --git a/front/src/components/library/TagDetail.vue b/front/src/components/library/TagDetail.vue
index 1bd8ccc2a..90cd3eb0c 100644
--- a/front/src/components/library/TagDetail.vue
+++ b/front/src/components/library/TagDetail.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue'
 
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import TrackWidget from '~/components/audio/track/Widget.vue'
-import AlbumWidget from '~/components/audio/album/Widget.vue'
+import AlbumWidget from '~/components/album/Widget.vue'
 import ArtistWidget from '~/components/audio/artist/Widget.vue'
 import RadioButton from '~/components/radios/Button.vue'
 
diff --git a/front/src/views/Search.vue b/front/src/views/Search.vue
index 01d8dcef9..53e797af2 100644
--- a/front/src/views/Search.vue
+++ b/front/src/views/Search.vue
@@ -12,7 +12,7 @@ import PlaylistCardList from '~/components/playlists/CardList.vue'
 import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
 import ArtistCard from '~/components/audio/artist/Card.vue'
 import TrackTable from '~/components/audio/track/Table.vue'
-import AlbumCard from '~/components/audio/album/Card.vue'
+import AlbumCard from '~/components/album/Card.vue'
 import Pagination from '~/components/vui/Pagination.vue'
 import RadioButton from '~/components/radios/Button.vue'
 import RadioCard from '~/components/radios/Card.vue'
diff --git a/front/src/views/library/DetailAlbums.vue b/front/src/views/library/DetailAlbums.vue
index d82e2d1d5..a45a1a7bb 100644
--- a/front/src/views/library/DetailAlbums.vue
+++ b/front/src/views/library/DetailAlbums.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Library } from '~/types'
 
-import AlbumWidget from '~/components/audio/album/Widget.vue'
+import AlbumWidget from '~/components/album/Widget.vue'
 
 interface Props {
   object: Library