See #432: added tag admin UI (list, detail)
This commit is contained in:
Eliot Berriot
parent
aaced60ec1
commit
1674c771ca
|
|
@ -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}">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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'),
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue