From 1674c771ca6baff17bb7b8e7ee2028580934c320 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Thu, 25 Jul 2019 10:40:34 +0200
Subject: [PATCH] See #432: added tag admin UI (list, detail)

---
 front/src/components/library/TagDetail.vue    |   5 +
 .../components/manage/library/TagsTable.vue   | 209 +++++++
 front/src/components/mixins/Translations.vue  |   2 +
 front/src/router/index.js                     | 569 +++++++++++-------
 front/src/views/admin/library/Base.vue        |   3 +
 front/src/views/admin/library/TagDetail.vue   | 215 +++++++
 front/src/views/admin/library/TagsList.vue    |  29 +
 7 files changed, 802 insertions(+), 230 deletions(-)
 create mode 100644 front/src/components/manage/library/TagsTable.vue
 create mode 100644 front/src/views/admin/library/TagDetail.vue
 create mode 100644 front/src/views/admin/library/TagsList.vue

diff --git a/front/src/components/library/TagDetail.vue b/front/src/components/library/TagDetail.vue
index 904bce7ae..e928caa29 100644
--- a/front/src/components/library/TagDetail.vue
+++ b/front/src/components/library/TagDetail.vue
@@ -7,6 +7,11 @@
         </span>
       </h2>
       <radio-button type="tag" :object-id="id"></radio-button>
+      <router-link class="ui right floated button" v-if="$store.state.auth.availablePermissions['library']" :to="{name: 'manage.library.tags.detail', params: {id: id}}">
+        <i class="wrench icon"></i>
+        <translate translate-context="Content/Moderation/Link">Open in moderation interface</translate>
+      </router-link>
+
       <div class="ui hidden divider"></div>
       <div class="ui row">
         <artist-widget :controls="false" :filters="{playable: true, ordering: '-creation_date', tag: id}">
diff --git a/front/src/components/manage/library/TagsTable.vue b/front/src/components/manage/library/TagsTable.vue
new file mode 100644
index 000000000..b26e86859
--- /dev/null
+++ b/front/src/components/manage/library/TagsTable.vue
@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <div class="ui inline form">
+      <div class="fields">
+        <div class="ui six wide field">
+          <label><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+          <form @submit.prevent="search.query = $refs.search.value">
+            <input name="search" ref="search" type="text" :value="search.query" :placeholder="labels.searchPlaceholder" />
+          </form>
+        </div>
+        <div class="field">
+          <label><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+          <select class="ui dropdown" v-model="ordering">
+            <option v-for="option in orderingOptions" :value="option[0]">
+              {{ sharedLabels.filters[option[1]] }}
+            </option>
+          </select>
+        </div>
+        <div class="field">
+          <label><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering direction</translate></label>
+          <select class="ui dropdown" v-model="orderingDirection">
+            <option value="+"><translate translate-context="Content/Search/Dropdown">Ascending</translate></option>
+            <option value="-"><translate translate-context="Content/Search/Dropdown">Descending</translate></option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <import-status-modal :upload="detailedUpload" :show.sync="showUploadDetailModal" />
+    <div class="dimmable">
+      <div v-if="isLoading" class="ui active inverted dimmer">
+          <div class="ui loader"></div>
+      </div>
+      <action-table
+        v-if="result"
+        @action-launched="fetchData"
+        :objects-data="result"
+        :actions="actions"
+        action-url="manage/tags/action/"
+        idField="name"
+        :filters="actionFilters">
+        <template slot="header-cells">
+          <th><translate translate-context="*/*/*">Name</translate></th>
+          <th><translate translate-context="*/*/*">Artists</translate></th>
+          <th><translate translate-context="*/*/*">Albums</translate></th>
+          <th><translate translate-context="*/*/*">Tracks</translate></th>
+          <th><translate translate-context="Content/*/*/Noun">Creation date</translate></th>
+        </template>
+        <template slot="row-cells" slot-scope="scope">
+          <td>
+            <router-link :to="{name: 'manage.library.tags.detail', params: {id: scope.obj.name }}" :title="scope.obj.name">
+              {{ scope.obj.name|truncate(30, "…", true) }}
+            </router-link>
+          </td>
+          <td>
+            {{ scope.obj.artists_count }}
+          </td>
+          <td>
+            {{ scope.obj.albums_count }}
+          </td>
+          <td>
+            {{ scope.obj.tracks_count }}
+          </td>
+          <td>
+            <human-date :date="scope.obj.creation_date"></human-date>
+          </td>
+        </template>
+      </action-table>
+    </div>
+    <div>
+      <pagination
+        v-if="result && result.count > paginateBy"
+        @page-changed="selectPage"
+        :compact="true"
+        :current="page"
+        :paginate-by="paginateBy"
+        :total="result.count"
+        ></pagination>
+
+      <span v-if="result && result.results.length > 0">
+        <translate translate-context="Content/*/Paragraph"
+          :translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}">
+          Showing results %{ start }-%{ end } on %{ total }
+        </translate>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import _ from '@/lodash'
+import time from '@/utils/time'
+import {normalizeQuery, parseTokens} from '@/search'
+import Pagination from '@/components/Pagination'
+import ActionTable from '@/components/common/ActionTable'
+import OrderingMixin from '@/components/mixins/Ordering'
+import TranslationsMixin from '@/components/mixins/Translations'
+import SmartSearchMixin from '@/components/mixins/SmartSearch'
+import ImportStatusModal from '@/components/library/ImportStatusModal'
+
+
+export default {
+  mixins: [OrderingMixin, TranslationsMixin, SmartSearchMixin],
+  props: {
+    filters: {type: Object, required: false},
+  },
+  components: {
+    Pagination,
+    ActionTable,
+    ImportStatusModal
+  },
+  data () {
+    let defaultOrdering = this.getOrderingFromString(this.defaultOrdering || '-creation_date')
+    return {
+      detailedUpload: null,
+      showUploadDetailModal: false,
+      time,
+      isLoading: false,
+      result: null,
+      page: 1,
+      paginateBy: 50,
+      search: {
+        query: this.defaultQuery,
+        tokens: parseTokens(normalizeQuery(this.defaultQuery))
+      },
+      orderingDirection: defaultOrdering.direction || '+',
+      ordering: defaultOrdering.field,
+      orderingOptions: [
+        ['creation_date', 'creation_date'],
+        ['name', 'name'],
+        ['length', 'length'],
+        ['items_count', 'items_count'],
+      ]
+    }
+  },
+  created () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      let params = _.merge({
+        'page': this.page,
+        'page_size': this.paginateBy,
+        'q': this.search.query,
+        'ordering': this.getOrderingAsString()
+      }, this.filters)
+      let self = this
+      self.isLoading = true
+      self.checked = []
+      axios.get('/manage/tags/', {params: params}).then((response) => {
+        self.result = response.data
+        self.isLoading = false
+      }, error => {
+        self.isLoading = false
+        self.errors = error.backendErrors
+      })
+    },
+    selectPage: function (page) {
+      this.page = page
+    },
+  },
+  computed: {
+    labels () {
+      return {
+        searchPlaceholder: this.$pgettext('Content/Search/Input.Placeholder', 'Search by name')
+      }
+    },
+    actionFilters () {
+      var currentFilters = {
+        q: this.search.query
+      }
+      if (this.filters) {
+        return _.merge(currentFilters, this.filters)
+      } else {
+        return currentFilters
+      }
+    },
+    actions () {
+      let deleteLabel = this.$pgettext('*/*/*/Verb', 'Delete')
+      let confirmationMessage = this.$pgettext('Popup/*/Paragraph', 'The selected tag will be removed and unlinked with existing content, if any. This action is irreversible.')
+      return [
+        {
+          name: 'delete',
+          label: deleteLabel,
+          confirmationMessage: confirmationMessage,
+          isDangerous: true,
+          allowAll: false,
+          confirmColor: 'red',
+        },
+      ]
+    }
+  },
+  watch: {
+    search (newValue) {
+      this.page = 1
+      this.fetchData()
+    },
+    page () {
+      this.fetchData()
+    },
+    ordering () {
+      this.fetchData()
+    },
+    orderingDirection () {
+      this.fetchData()
+    }
+  }
+}
+</script>
diff --git a/front/src/components/mixins/Translations.vue b/front/src/components/mixins/Translations.vue
index 56ea3ed15..e6e809252 100644
--- a/front/src/components/mixins/Translations.vue
+++ b/front/src/components/mixins/Translations.vue
@@ -52,6 +52,8 @@ export default {
           album_title: this.$pgettext('Content/*/Dropdown/Noun', 'Album name'),
           artist_name: this.$pgettext('Content/*/Dropdown/Noun', 'Artist name'),
           name: this.$pgettext('*/*/*/Noun', 'Name'),
+          length: this.$pgettext('*/*/*/Noun', 'Length'),
+          items_count: this.$pgettext('*/*/*/Noun', 'Items'),
           size: this.$pgettext('Content/Library/*/in MB', 'Size'),
           bitrate: this.$pgettext('Content/Track/*/Noun', 'Bitrate'),
           duration: this.$pgettext('Content/*/*', 'Duration'),
diff --git a/front/src/router/index.js b/front/src/router/index.js
index 1d4996746..af21b168b 100644
--- a/front/src/router/index.js
+++ b/front/src/router/index.js
@@ -1,430 +1,508 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import Vue from "vue"
+import Router from "vue-router"
 
 Vue.use(Router)
 
-console.log('PROCESS', process.env)
+console.log("PROCESS", process.env)
 export default new Router({
-  mode: 'history',
-  linkActiveClass: 'active',
-  base: process.env.VUE_APP_ROUTER_BASE_URL || '/',
+  mode: "history",
+  linkActiveClass: "active",
+  base: process.env.VUE_APP_ROUTER_BASE_URL || "/",
   routes: [
     {
-      path: '/',
-      name: 'index',
+      path: "/",
+      name: "index",
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/Home"),
+        import(/* webpackChunkName: "core" */ "@/components/Home")
     },
     {
-      path: '/front',
-      name: 'front',
-      redirect: '/'
+      path: "/front",
+      name: "front",
+      redirect: "/"
     },
     {
-      path: '/about',
-      name: 'about',
+      path: "/about",
+      name: "about",
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/About"),
+        import(/* webpackChunkName: "core" */ "@/components/About")
     },
     {
-      path: '/login',
-      name: 'login',
+      path: "/login",
+      name: "login",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/components/auth/Login"),
-      props: (route) => ({ next: route.query.next || '/library' })
+      props: route => ({ next: route.query.next || "/library" })
     },
     {
-      path: '/notifications',
-      name: 'notifications',
+      path: "/notifications",
+      name: "notifications",
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/views/Notifications"),
+        import(/* webpackChunkName: "core" */ "@/views/Notifications")
     },
     {
-      path: '/auth/password/reset',
-      name: 'auth.password-reset',
+      path: "/auth/password/reset",
+      name: "auth.password-reset",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/views/auth/PasswordReset"),
-      props: (route) => ({
+      props: route => ({
         defaultEmail: route.query.email
       })
     },
     {
-      path: '/auth/email/confirm',
-      name: 'auth.email-confirm',
+      path: "/auth/email/confirm",
+      name: "auth.email-confirm",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/views/auth/EmailConfirm"),
-      props: (route) => ({
+      props: route => ({
         defaultKey: route.query.key
       })
     },
     {
-      path: '/auth/password/reset/confirm',
-      name: 'auth.password-reset-confirm',
+      path: "/auth/password/reset/confirm",
+      name: "auth.password-reset-confirm",
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/views/auth/PasswordResetConfirm"),
-      props: (route) => ({
+        import(
+          /* webpackChunkName: "core" */ "@/views/auth/PasswordResetConfirm"
+        ),
+      props: route => ({
         defaultUid: route.query.uid,
         defaultToken: route.query.token
       })
     },
     {
-      path: '/authorize',
-      name: 'authorize',
+      path: "/authorize",
+      name: "authorize",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/components/auth/Authorize"),
-      props: (route) => ({
+      props: route => ({
         clientId: route.query.client_id,
         redirectUri: route.query.redirect_uri,
         scope: route.query.scope,
         responseType: route.query.response_type,
         nonce: route.query.nonce,
-        state: route.query.state,
+        state: route.query.state
       })
     },
     {
-      path: '/signup',
-      name: 'signup',
+      path: "/signup",
+      name: "signup",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/components/auth/Signup"),
-      props: (route) => ({
+      props: route => ({
         defaultInvitation: route.query.invitation
       })
     },
     {
-      path: '/logout',
-      name: 'logout',
+      path: "/logout",
+      name: "logout",
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/auth/Logout"),
-
+        import(/* webpackChunkName: "core" */ "@/components/auth/Logout")
     },
     {
-      path: '/settings',
-      name: 'settings',
+      path: "/settings",
+      name: "settings",
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/auth/Settings"),
+        import(/* webpackChunkName: "core" */ "@/components/auth/Settings")
     },
     {
-      path: '/settings/applications/new',
-      name: 'settings.applications.new',
-      props: (route) => ({
+      path: "/settings/applications/new",
+      name: "settings.applications.new",
+      props: route => ({
         scopes: route.query.scopes,
         name: route.query.name,
-        redirect_uris: route.query.redirect_uris,
+        redirect_uris: route.query.redirect_uris
       }),
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/auth/ApplicationNew"),
+        import(
+          /* webpackChunkName: "core" */ "@/components/auth/ApplicationNew"
+        )
     },
     {
-      path: '/settings/applications/:id/edit',
-      name: 'settings.applications.edit',
+      path: "/settings/applications/:id/edit",
+      name: "settings.applications.edit",
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/auth/ApplicationEdit"),
+        import(
+          /* webpackChunkName: "core" */ "@/components/auth/ApplicationEdit"
+        ),
       props: true
     },
     {
-      path: '/@:username',
-      name: 'profile',
+      path: "/@:username",
+      name: "profile",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/components/auth/Profile"),
       props: true
     },
     {
-      path: '/favorites',
+      path: "/favorites",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/components/favorites/List"),
-      props: (route) => ({
+      props: route => ({
         defaultOrdering: route.query.ordering,
         defaultPage: route.query.page,
         defaultPaginateBy: route.query.paginateBy
       })
     },
     {
-      path: '/content',
+      path: "/content",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/views/content/Base"),
       children: [
         {
-          path: '',
-          name: 'content.index',
+          path: "",
+          name: "content.index",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/views/content/Home"),
+            import(/* webpackChunkName: "core" */ "@/views/content/Home")
         }
       ]
     },
     {
-      path: '/content/libraries/tracks',
+      path: "/content/libraries/tracks",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/views/content/Base"),
       children: [
         {
-          path: '',
-          name: 'content.libraries.files',
+          path: "",
+          name: "content.libraries.files",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/views/content/libraries/Files"),
-          props: (route) => ({
+            import(
+              /* webpackChunkName: "core" */ "@/views/content/libraries/Files"
+            ),
+          props: route => ({
             query: route.query.q
           })
         }
       ]
     },
     {
-      path: '/content/libraries',
+      path: "/content/libraries",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/views/content/Base"),
       children: [
         {
-          path: '',
-          name: 'content.libraries.index',
+          path: "",
+          name: "content.libraries.index",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/views/content/libraries/Home"),
+            import(
+              /* webpackChunkName: "core" */ "@/views/content/libraries/Home"
+            )
         },
         {
-          path: ':id/upload',
-          name: 'content.libraries.detail.upload',
+          path: ":id/upload",
+          name: "content.libraries.detail.upload",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/views/content/libraries/Upload"),
-          props: (route) => ({
+            import(
+              /* webpackChunkName: "core" */ "@/views/content/libraries/Upload"
+            ),
+          props: route => ({
             id: route.params.id,
             defaultImportReference: route.query.import
           })
         },
         {
-          path: ':id',
-          name: 'content.libraries.detail',
+          path: ":id",
+          name: "content.libraries.detail",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/views/content/libraries/Detail"),
+            import(
+              /* webpackChunkName: "core" */ "@/views/content/libraries/Detail"
+            ),
           props: true
         }
       ]
     },
     {
-      path: '/content/remote',
+      path: "/content/remote",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/views/content/Base"),
       children: [
         {
-          path: '',
-          name: 'content.remote.index',
+          path: "",
+          name: "content.remote.index",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/views/content/remote/Home"),
+            import(/* webpackChunkName: "core" */ "@/views/content/remote/Home")
         }
       ]
     },
     {
-      path: '/manage/settings',
-      name: 'manage.settings',
+      path: "/manage/settings",
+      name: "manage.settings",
       component: () =>
-        import(/* webpackChunkName: "admin" */ "@/views/admin/Settings"),
+        import(/* webpackChunkName: "admin" */ "@/views/admin/Settings")
     },
     {
-      path: '/manage/library',
+      path: "/manage/library",
       component: () =>
         import(/* webpackChunkName: "admin" */ "@/views/admin/library/Base"),
       children: [
         {
-          path: 'edits',
-          name: 'manage.library.edits',
+          path: "edits",
+          name: "manage.library.edits",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/EditsList"),
-          props: (route) => {
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/EditsList"
+            ),
+          props: route => {
             return {
-              defaultQuery: route.query.q,
+              defaultQuery: route.query.q
             }
           }
         },
         {
-          path: 'artists',
-          name: 'manage.library.artists',
+          path: "artists",
+          name: "manage.library.artists",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/ArtistsList"),
-          props: (route) => {
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/ArtistsList"
+            ),
+          props: route => {
             return {
-              defaultQuery: route.query.q,
+              defaultQuery: route.query.q
             }
           }
         },
         {
-          path: 'artists/:id',
-          name: 'manage.library.artists.detail',
+          path: "artists/:id",
+          name: "manage.library.artists.detail",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/ArtistDetail"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/ArtistDetail"
+            ),
           props: true
         },
         {
-          path: 'albums',
-          name: 'manage.library.albums',
+          path: "albums",
+          name: "manage.library.albums",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/AlbumsList"),
-          props: (route) => {
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/AlbumsList"
+            ),
+          props: route => {
             return {
-              defaultQuery: route.query.q,
+              defaultQuery: route.query.q
             }
           }
         },
         {
-          path: 'albums/:id',
-          name: 'manage.library.albums.detail',
+          path: "albums/:id",
+          name: "manage.library.albums.detail",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/AlbumDetail"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/AlbumDetail"
+            ),
           props: true
         },
         {
-          path: 'tracks',
-          name: 'manage.library.tracks',
+          path: "tracks",
+          name: "manage.library.tracks",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/TracksList"),
-          props: (route) => {
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/TracksList"
+            ),
+          props: route => {
             return {
-              defaultQuery: route.query.q,
+              defaultQuery: route.query.q
             }
           }
         },
         {
-          path: 'tracks/:id',
-          name: 'manage.library.tracks.detail',
+          path: "tracks/:id",
+          name: "manage.library.tracks.detail",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/TrackDetail"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/TrackDetail"
+            ),
           props: true
         },
         {
-          path: 'libraries',
-          name: 'manage.library.libraries',
+          path: "libraries",
+          name: "manage.library.libraries",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/LibrariesList"),
-          props: (route) => {
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/LibrariesList"
+            ),
+          props: route => {
             return {
-              defaultQuery: route.query.q,
+              defaultQuery: route.query.q
             }
           }
         },
         {
-          path: 'libraries/:id',
-          name: 'manage.library.libraries.detail',
+          path: "libraries/:id",
+          name: "manage.library.libraries.detail",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/LibraryDetail"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/LibraryDetail"
+            ),
           props: true
         },
         {
-          path: 'uploads',
-          name: 'manage.library.uploads',
+          path: "uploads",
+          name: "manage.library.uploads",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/UploadsList"),
-          props: (route) => {
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/UploadsList"
+            ),
+          props: route => {
             return {
-              defaultQuery: route.query.q,
+              defaultQuery: route.query.q
             }
           }
         },
         {
-          path: 'uploads/:id',
-          name: 'manage.library.uploads.detail',
+          path: "uploads/:id",
+          name: "manage.library.uploads.detail",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/UploadDetail"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/UploadDetail"
+            ),
           props: true
         },
+        {
+          path: "tags",
+          name: "manage.library.tags",
+          component: () =>
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/TagsList"
+            ),
+          props: route => {
+            return {
+              defaultQuery: route.query.q
+            }
+          }
+        },
+        {
+          path: "tags/:id",
+          name: "manage.library.tags.detail",
+          component: () =>
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/TagDetail"
+            ),
+          props: true
+        }
       ]
     },
     {
-      path: '/manage/users',
+      path: "/manage/users",
       component: () =>
         import(/* webpackChunkName: "admin" */ "@/views/admin/users/Base"),
       children: [
         {
-          path: 'users',
-          name: 'manage.users.users.list',
+          path: "users",
+          name: "manage.users.users.list",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/users/UsersList"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/users/UsersList"
+            )
         },
         {
-          path: 'invitations',
-          name: 'manage.users.invitations.list',
+          path: "invitations",
+          name: "manage.users.invitations.list",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/users/InvitationsList"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/users/InvitationsList"
+            )
         }
       ]
     },
     {
-      path: '/manage/moderation',
+      path: "/manage/moderation",
       component: () =>
         import(/* webpackChunkName: "admin" */ "@/views/admin/moderation/Base"),
       children: [
         {
-          path: 'domains',
-          name: 'manage.moderation.domains.list',
+          path: "domains",
+          name: "manage.moderation.domains.list",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/moderation/DomainsList"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/moderation/DomainsList"
+            )
         },
         {
-          path: 'domains/:id',
-          name: 'manage.moderation.domains.detail',
+          path: "domains/:id",
+          name: "manage.moderation.domains.detail",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/moderation/DomainsDetail"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/moderation/DomainsDetail"
+            ),
           props: true
         },
         {
-          path: 'accounts',
-          name: 'manage.moderation.accounts.list',
+          path: "accounts",
+          name: "manage.moderation.accounts.list",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/moderation/AccountsList"),
-          props: (route) => {
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/moderation/AccountsList"
+            ),
+          props: route => {
             return {
-              defaultQuery: route.query.q,
-
+              defaultQuery: route.query.q
             }
           }
         },
         {
-          path: 'accounts/:id',
-          name: 'manage.moderation.accounts.detail',
+          path: "accounts/:id",
+          name: "manage.moderation.accounts.detail",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/moderation/AccountsDetail"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/moderation/AccountsDetail"
+            ),
           props: true
         }
       ]
     },
     {
-      path: '/library',
+      path: "/library",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/components/library/Library"),
       children: [
         {
-          path: '',
+          path: "",
           component: () =>
             import(/* webpackChunkName: "core" */ "@/components/library/Home"),
-          name: 'library.index'
+          name: "library.index"
         },
         {
-          path: 'artists/',
-          name: 'library.artists.browse',
+          path: "artists/",
+          name: "library.artists.browse",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/Artists"),
-          props: (route) => ({
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/Artists"
+            ),
+          props: route => ({
             defaultOrdering: route.query.ordering,
             defaultQuery: route.query.query,
-            defaultTags: Array.isArray(route.query.tag || []) ? route.query.tag : [route.query.tag],
+            defaultTags: Array.isArray(route.query.tag || [])
+              ? route.query.tag
+              : [route.query.tag],
             defaultPaginateBy: route.query.paginateBy,
             defaultPage: route.query.page
           })
         },
         {
-          path: 'albums/',
-          name: 'library.albums.browse',
+          path: "albums/",
+          name: "library.albums.browse",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/Albums"),
-          props: (route) => ({
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/Albums"
+            ),
+          props: route => ({
             defaultOrdering: route.query.ordering,
             defaultQuery: route.query.query,
-            defaultTags: Array.isArray(route.query.tag || []) ? route.query.tag : [route.query.tag],
+            defaultTags: Array.isArray(route.query.tag || [])
+              ? route.query.tag
+              : [route.query.tag],
             defaultPaginateBy: route.query.paginateBy,
             defaultPage: route.query.page
           })
         },
         {
-          path: 'radios/',
-          name: 'library.radios.browse',
+          path: "radios/",
+          name: "library.radios.browse",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/Radios"),
-          props: (route) => ({
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/Radios"
+            ),
+          props: route => ({
             defaultOrdering: route.query.ordering,
             defaultQuery: route.query.query,
             defaultPaginateBy: route.query.paginateBy,
@@ -432,32 +510,36 @@ export default new Router({
           })
         },
         {
-          path: 'radios/build',
-          name: 'library.radios.build',
+          path: "radios/build",
+          name: "library.radios.build",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/radios/Builder"),
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/radios/Builder"
+            ),
           props: true
         },
         {
-          path: 'radios/build/:id',
-          name: 'library.radios.edit',
+          path: "radios/build/:id",
+          name: "library.radios.edit",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/radios/Builder"),
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/radios/Builder"
+            ),
           props: true
         },
         {
-          path: 'radios/:id',
-          name: 'library.radios.detail',
+          path: "radios/:id",
+          name: "library.radios.detail",
           component: () =>
             import(/* webpackChunkName: "core" */ "@/views/radios/Detail"),
           props: true
         },
         {
-          path: 'playlists/',
-          name: 'library.playlists.browse',
+          path: "playlists/",
+          name: "library.playlists.browse",
           component: () =>
             import(/* webpackChunkName: "core" */ "@/views/playlists/List"),
-          props: (route) => ({
+          props: route => ({
             defaultOrdering: route.query.ordering,
             defaultQuery: route.query.query,
             defaultPaginateBy: route.query.paginateBy,
@@ -465,112 +547,139 @@ export default new Router({
           })
         },
         {
-          path: 'playlists/:id',
-          name: 'library.playlists.detail',
+          path: "playlists/:id",
+          name: "library.playlists.detail",
           component: () =>
             import(/* webpackChunkName: "core" */ "@/views/playlists/Detail"),
-          props: (route) => ({
+          props: route => ({
             id: route.params.id,
-            defaultEdit: route.query.mode === 'edit' })
+            defaultEdit: route.query.mode === "edit"
+          })
         },
         {
-          path: 'tags/:id',
-          name: 'library.tags.detail',
+          path: "tags/:id",
+          name: "library.tags.detail",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/TagDetail"),
-          props: true,
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/TagDetail"
+            ),
+          props: true
         },
         {
-          path: 'artists/:id',
+          path: "artists/:id",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/ArtistBase"),
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/ArtistBase"
+            ),
           props: true,
           children: [
             {
-              path: '',
-              name: 'library.artists.detail',
+              path: "",
+              name: "library.artists.detail",
               component: () =>
-                import(/* webpackChunkName: "core" */ "@/components/library/ArtistDetail"),
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/ArtistDetail"
+                )
             },
             {
-              path: 'edit',
-              name: 'library.artists.edit',
+              path: "edit",
+              name: "library.artists.edit",
               component: () =>
-                import(/* webpackChunkName: "core" */ "@/components/library/ArtistEdit"),
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/ArtistEdit"
+                )
             },
             {
-              path: 'edit/:editId',
-              name: 'library.artists.edit.detail',
+              path: "edit/:editId",
+              name: "library.artists.edit.detail",
               component: () =>
-                import(/* webpackChunkName: "core" */ "@/components/library/EditDetail"),
-              props: true,
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/EditDetail"
+                ),
+              props: true
             }
           ]
         },
         {
-          path: 'albums/:id',
+          path: "albums/:id",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/AlbumBase"),
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/AlbumBase"
+            ),
           props: true,
           children: [
             {
-              path: '',
-              name: 'library.albums.detail',
+              path: "",
+              name: "library.albums.detail",
               component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/AlbumDetail"),
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/AlbumDetail"
+                )
             },
             {
-              path: 'edit',
-              name: 'library.albums.edit',
+              path: "edit",
+              name: "library.albums.edit",
               component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/AlbumEdit"),
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/AlbumEdit"
+                )
             },
             {
-              path: 'edit/:editId',
-              name: 'library.albums.edit.detail',
+              path: "edit/:editId",
+              name: "library.albums.edit.detail",
               component: () =>
-                import(/* webpackChunkName: "core" */ "@/components/library/EditDetail"),
-              props: true,
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/EditDetail"
+                ),
+              props: true
             }
           ]
         },
         {
-          path: 'tracks/:id',
+          path: "tracks/:id",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/TrackBase"),
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/TrackBase"
+            ),
           props: true,
           children: [
             {
-              path: '',
-              name: 'library.tracks.detail',
+              path: "",
+              name: "library.tracks.detail",
               component: () =>
-                import(/* webpackChunkName: "core" */ "@/components/library/TrackDetail"),
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/TrackDetail"
+                )
             },
             {
-              path: 'edit',
-              name: 'library.tracks.edit',
+              path: "edit",
+              name: "library.tracks.edit",
               component: () =>
-                import(/* webpackChunkName: "core" */ "@/components/library/TrackEdit"),
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/TrackEdit"
+                )
             },
             {
-              path: 'edit/:editId',
-              name: 'library.tracks.edit.detail',
+              path: "edit/:editId",
+              name: "library.tracks.edit.detail",
               component: () =>
-                import(/* webpackChunkName: "core" */ "@/components/library/EditDetail"),
-              props: true,
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/EditDetail"
+                ),
+              props: true
             }
           ]
-        },
+        }
       ]
     },
     {
-      path: '*/index.html',
-      redirect: '/'
+      path: "*/index.html",
+      redirect: "/"
     },
     {
-      path: '*',
+      path: "*",
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/PageNotFound"),
+        import(/* webpackChunkName: "core" */ "@/components/PageNotFound")
     }
   ]
 })
diff --git a/front/src/views/admin/library/Base.vue b/front/src/views/admin/library/Base.vue
index 009e1ca95..9538f9cd2 100644
--- a/front/src/views/admin/library/Base.vue
+++ b/front/src/views/admin/library/Base.vue
@@ -19,6 +19,9 @@
       <router-link
         class="ui item"
         :to="{name: 'manage.library.uploads'}"><translate translate-context="*/*/*">Uploads</translate></router-link>
+      <router-link
+        class="ui item"
+        :to="{name: 'manage.library.tags'}"><translate translate-context="*/*/*">Tags</translate></router-link>
     </nav>
     <router-view :key="$route.fullPath"></router-view>
   </div>
diff --git a/front/src/views/admin/library/TagDetail.vue b/front/src/views/admin/library/TagDetail.vue
new file mode 100644
index 000000000..24c45dea4
--- /dev/null
+++ b/front/src/views/admin/library/TagDetail.vue
@@ -0,0 +1,215 @@
+<template>
+  <main>
+    <div v-if="isLoading" class="ui vertical segment">
+      <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
+    </div>
+    <template v-if="object">
+      <section :class="['ui', 'head', 'vertical', 'stripe', 'segment']" v-title="object.name">
+        <div class="ui stackable one column grid">
+          <div class="ui column">
+            <div class="segment-content">
+              <h2 class="ui header">
+                <i class="circular inverted hashtag icon"></i>
+                <div class="content">
+                  {{ object.name | truncate(100) }}
+                </div>
+              </h2>
+              <div class="header-buttons">
+
+                <div class="ui icon buttons">
+                  <router-link class="ui labeled icon button" :to="{name: 'library.tags.detail', params: {id: object.name }}">
+                    <i class="info icon"></i>
+                    <translate translate-context="Content/Moderation/Link/Verb">Open local profile</translate>&nbsp;
+                  </router-link>
+                  <div class="ui floating dropdown icon button" v-dropdown>
+                    <i class="dropdown icon"></i>
+                    <div class="menu">
+                      <a
+                        v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
+                        class="basic item"
+                        :href="$store.getters['instance/absoluteUrl'](`/api/admin/tags/tag/${object.id}`)"
+                        target="_blank" rel="noopener noreferrer">
+                        <i class="wrench icon"></i>
+                        <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div class="ui buttons">
+                  <dangerous-button
+                    :class="['ui', {loading: isLoading}, 'basic button']"
+                    :action="remove">
+                    <translate translate-context="*/*/*/Verb">Delete</translate>
+                    <p slot="modal-header"><translate translate-context="Popup/Library/Title">Delete this tag?</translate></p>
+                    <div slot="modal-content">
+                      <p><translate translate-context="Content/Moderation/Paragraph">The tag will be removed and unlinked from any existing entity. This action is irreversible.</translate></p>
+                    </div>
+                    <p slot="modal-confirm"><translate translate-context="*/*/*/Verb">Delete</translate></p>
+                  </dangerous-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <div class="ui vertical stripe segment">
+        <div class="ui stackable three column grid">
+          <div class="column">
+            <section>
+              <h3 class="ui header">
+                <i class="info icon"></i>
+                <div class="content">
+                  <translate translate-context="Content/Moderation/Title">Tag data</translate>
+                </div>
+              </h3>
+              <table class="ui very basic table">
+                <tbody>
+                  <tr>
+                    <td>
+                      <translate translate-context="*/*/*/Noun">Name</translate>
+                    </td>
+                    <td>
+                      {{ object.name }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </section>
+          </div>
+          <div class="column">
+            <section>
+              <h3 class="ui header">
+                <i class="feed icon"></i>
+                <div class="content">
+                  <translate translate-context="Content/Moderation/Title">Activity</translate>&nbsp;
+                  <span :data-tooltip="labels.statsWarning"><i class="question circle icon"></i></span>
+
+                </div>
+              </h3>
+              <div v-if="isLoadingStats" class="ui placeholder">
+                <div class="full line"></div>
+                <div class="short line"></div>
+                <div class="medium line"></div>
+                <div class="long line"></div>
+              </div>
+              <table v-else class="ui very basic table">
+                <tbody>
+                  <tr>
+                    <td>
+                      <translate translate-context="Content/Moderation/Table.Label/Short (Value is a date)">First seen</translate>
+                    </td>
+                    <td>
+                      <human-date :date="object.creation_date"></human-date>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </section>
+          </div>
+          <div class="column">
+            <section>
+              <h3 class="ui header">
+                <i class="music icon"></i>
+                <div class="content">
+                  <translate translate-context="Content/Moderation/Title">Audio content</translate>&nbsp;
+                  <span :data-tooltip="labels.statsWarning"><i class="question circle icon"></i></span>
+
+                </div>
+              </h3>
+              <table class="ui very basic table">
+                <tbody>
+                  <tr>
+                    <td>
+                      <router-link :to="{name: 'manage.library.artists', query: {q: getQuery('tag', object.name) }}">
+                        <translate translate-context="*/*/*">Artists</translate>
+                      </router-link>
+                    </td>
+                    <td>
+                      {{ object.artists_count }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <router-link :to="{name: 'manage.library.albums', query: {q: getQuery('tag', object.name) }}">
+                        <translate translate-context="*/*/*">Albums</translate>
+                      </router-link>
+                    </td>
+                    <td>
+                      {{ object.albums_count }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <router-link :to="{name: 'manage.library.tracks', query: {q: getQuery('tag', object.name) }}">
+                        <translate translate-context="*/*/*">Tracks</translate>
+                      </router-link>
+                    </td>
+                    <td>
+                      {{ object.tracks_count }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+
+            </section>
+          </div>
+        </div>
+      </div>
+
+    </template>
+  </main>
+</template>
+
+<script>
+import axios from "axios"
+import logger from "@/logging"
+
+import FetchButton from "@/components/federation/FetchButton"
+
+export default {
+  props: ["id"],
+  components: {
+    FetchButton
+  },
+  data() {
+    return {
+      isLoading: true,
+      isLoadingStats: false,
+      object: null,
+      stats: null,
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      var self = this
+      this.isLoading = true
+      let url = `manage/tags/${this.id}/`
+      axios.get(url).then(response => {
+        self.object = response.data
+        self.isLoading = false
+      })
+    },
+    remove () {
+      var self = this
+      this.isLoading = true
+      let url = `manage/tags/${this.id}/`
+      axios.delete(url).then(response => {
+        self.$router.push({name: 'manage.library.tags'})
+      })
+    },
+    getQuery (field, value) {
+      return `${field}:"${value}"`
+    }
+  },
+  computed: {
+    labels() {
+      return {
+        statsWarning: this.$pgettext('Content/Moderation/Help text', 'Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object'),
+      }
+    },
+  }
+}
+</script>
diff --git a/front/src/views/admin/library/TagsList.vue b/front/src/views/admin/library/TagsList.vue
new file mode 100644
index 000000000..2ac4e4e14
--- /dev/null
+++ b/front/src/views/admin/library/TagsList.vue
@@ -0,0 +1,29 @@
+<template>
+  <main v-title="labels.title">
+    <section class="ui vertical stripe segment">
+      <h2 class="ui header">{{ labels.title }}</h2>
+      <div class="ui hidden divider"></div>
+      <tags-table :update-url="true" :default-query="defaultQuery"></tags-table>
+    </section>
+  </main>
+</template>
+
+<script>
+import TagsTable from "@/components/manage/library/TagsTable"
+
+export default {
+  components: {
+    TagsTable
+  },
+  props: {
+    defaultQuery: {type: String, required: false},
+  },
+  computed: {
+    labels() {
+      return {
+        title: this.$pgettext('*/*/*', 'Tags')
+      }
+    }
+  }
+}
+</script>