Skip to content
Snippets Groups Projects
Verified Commit 1674c771 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

See #432: added tag admin UI (list, detail)

parent aaced60e
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 802 additions and 230 deletions
front/src/components/library/TagDetail.vue
+ 5
− 0
View file @ 1674c771
......@@ -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}">
......
front/src/components/manage/library/TagsTable.vue 0 → 100644
+ 209
− 0
View file @ 1674c771
<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>
front/src/components/mixins/Translations.vue
+ 2
− 0
View file @ 1674c771
......@@ -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'),
......
front/src/router/index.js
+ 339
− 230
View file @ 1674c771
This diff is collapsed.
front/src/views/admin/library/Base.vue
+ 3
− 0
View file @ 1674c771
......@@ -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>
......
front/src/views/admin/library/TagDetail.vue 0 → 100644
+ 215
− 0
View file @ 1674c771
<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>
front/src/views/admin/library/TagsList.vue 0 → 100644
+ 29
− 0
View file @ 1674c771
<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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment