See #432: display tags on artist/album/track admin detail page

front/src/components/tags/List.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tag-list">
     <router-link
-      :to="{name: 'library.tags.detail', params: {id: tag}}"
+      :to="{name: detailRoute, params: {id: tag}}"
       :class="['ui', 'circular', 'hashtag', 'label', labelClasses]"
       v-for="tag in toDisplay"
       :title="tag"
@@ -21,6 +21,7 @@ export default {
     truncateSize: {type: Number, default: 25},
     limit: {type: Number, default: 5},
     labelClasses: {type: String, default: ''},
+    detailRoute: {type: String, default: 'library.tags.detail'},
   },
   data () {
     return {

front/src/views/admin/library/AlbumDetail.vue

@@ -24,6 +24,12 @@
                   </div>
                 </div>
               </h2>
+
+              <template v-if="object.tags && object.tags.length > 0">
+                <tags-list :limit="5" detail-route="manage.library.tags.detail" :tags="object.tags"></tags-list>
+                <div class="ui hidden divider"></div>
+              </template>
+
               <div class="header-buttons">
 
                 <div class="ui icon buttons">
@@ -273,12 +279,13 @@
 import axios from "axios"
 import logger from "@/logging"
 import FetchButton from "@/components/federation/FetchButton"
-
+import TagsList from "@/components/tags/List"
 
 export default {
   props: ["id"],
   components: {
-    FetchButton
+    FetchButton,
+    TagsList
   },
   data() {
     return {

front/src/views/admin/library/ArtistDetail.vue

@@ -23,6 +23,11 @@
                   </div>
                 </div>
               </h2>
+              <template v-if="object.tags && object.tags.length > 0">
+                <tags-list :limit="5" detail-route="manage.library.tags.detail" :tags="object.tags"></tags-list>
+                <div class="ui hidden divider"></div>
+              </template>
+
               <div class="header-buttons">
 
                 <div class="ui icon buttons">
@@ -272,12 +277,14 @@
 import axios from "axios"
 import logger from "@/logging"
 
+import TagsList from "@/components/tags/List"
 import FetchButton from "@/components/federation/FetchButton"
 
 export default {
   props: ["id"],
   components: {
-    FetchButton
+    FetchButton,
+    TagsList
   },
   data() {
     return {

front/src/views/admin/library/TrackDetail.vue

@@ -23,6 +23,12 @@
                   </div>
                 </div>
               </h2>
+
+              <template v-if="object.tags && object.tags.length > 0">
+                <tags-list :limit="5" detail-route="manage.library.tags.detail" :tags="object.tags"></tags-list>
+                <div class="ui hidden divider"></div>
+              </template>
+
               <div class="header-buttons">
 
                 <div class="ui icon buttons">
@@ -315,12 +321,14 @@
 import axios from "axios"
 import logger from "@/logging"
 import FetchButton from "@/components/federation/FetchButton"
+import TagsList from "@/components/tags/List"
 
 
 export default {
   props: ["id"],
   components: {
-    FetchButton
+    FetchButton,
+    TagsList
   },
   data() {
     return {