See #432: display tags on artist, album and track pages

front/src/components/library/AlbumBase.vue

@@ -13,6 +13,7 @@
               <div v-html="subtitle"></div>
             </div>
           </h2>
+          <tags-list v-if="object.tags && object.tags.length > 0" :tags="object.tags"></tags-list>
           <div class="ui hidden divider"></div>
           <div class="header-buttons">
 
@@ -103,6 +104,7 @@ import backend from "@/audio/backend"
 import PlayButton from "@/components/audio/PlayButton"
 import EmbedWizard from "@/components/audio/EmbedWizard"
 import Modal from '@/components/semantic/Modal'
+import TagsList from "@/components/tags/List"
 
 const FETCH_URL = "albums/"
 
@@ -123,7 +125,8 @@ export default {
   components: {
     PlayButton,
     EmbedWizard,
-    Modal
+    Modal,
+    TagsList,
   },
   data() {
     return {

front/src/components/library/ArtistBase.vue

@@ -21,6 +21,7 @@
               </div>
             </div>
           </h2>
+          <tags-list v-if="object.tags && object.tags.length > 0" :tags="object.tags"></tags-list>
           <div class="ui hidden divider"></div>
           <div class="header-buttons">
             <div class="ui buttons">
@@ -123,17 +124,20 @@ import PlayButton from "@/components/audio/PlayButton"
 import EmbedWizard from "@/components/audio/EmbedWizard"
 import Modal from '@/components/semantic/Modal'
 import RadioButton from "@/components/radios/Button"
+import TagsList from "@/components/tags/List"
 
 const FETCH_URL = "albums/"
 
 
+
 export default {
   props: ["id"],
   components: {
     PlayButton,
     EmbedWizard,
     Modal,
-    RadioButton
+    RadioButton,
+    TagsList,
   },
   data() {
     return {

front/src/components/library/TrackBase.vue

@@ -17,6 +17,8 @@
               <div class="sub header" v-html="subtitle"></div>
             </div>
           </h2>
+          <tags-list v-if="track.tags && track.tags.length > 0" :tags="track.tags"></tags-list>
+          <div class="ui hidden divider"></div>
           <div class="header-buttons">
             <div class="ui buttons">
               <play-button class="orange" :track="track">
@@ -121,6 +123,7 @@ import TrackFavoriteIcon from "@/components/favorites/TrackFavoriteIcon"
 import TrackPlaylistIcon from "@/components/playlists/TrackPlaylistIcon"
 import Modal from '@/components/semantic/Modal'
 import EmbedWizard from "@/components/audio/EmbedWizard"
+import TagsList from "@/components/tags/List"
 
 const FETCH_URL = "tracks/"
 
@@ -131,7 +134,8 @@ export default {
     TrackPlaylistIcon,
     TrackFavoriteIcon,
     Modal,
-    EmbedWizard
+    EmbedWizard,
+    TagsList,
   },
   data() {
     return {

front/src/components/tags/List.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <router-link
+      :to="{name: 'library.tags.detail', params: {id: tag}}"
+      class="ui circular hashtag label"
+      v-for="tag in toDisplay"
+      :key="tag">
+      #{{ tag }}
+    </router-link>
+    <div role="button" @click.prevent="honorLimit = false" class="ui circular inverted teal label" v-if="toDisplay.length < tags.length">
+      <translate translate-context="Content/*/Button/Label/Verb" :translate-params="{count: tags.length - toDisplay.length}" :translate-n="tags.length - toDisplay.length" translate-plural="Show %{ count } more tags">Show 1 more tag</translate>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['tags'],
+  data () {
+    return {
+      limit: 5,
+      honorLimit: true,
+    }
+  },
+  computed: {
+    toDisplay () {
+      if (!this.honorLimit) {
+        return this.tags
+      }
+      return (this.tags || []).slice(0, this.limit)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ui.circular.label {
+  padding-left: 1em !important;
+  padding-right: 1em !important;
+}
+</style>