kopia lustrzana https://dev.funkwhale.audio/funkwhale/funkwhale
268 wiersze
9.0 KiB
Vue
268 wiersze
9.0 KiB
Vue
<template>
|
|
<main>
|
|
<div
|
|
v-if="isLoading"
|
|
class="ui vertical segment"
|
|
>
|
|
<div :class="['ui', 'centered', 'active', 'inline', 'loader']" />
|
|
</div>
|
|
<template v-if="object">
|
|
<section
|
|
v-title="object.name"
|
|
:class="['ui', 'head', 'vertical', 'stripe', 'segment']"
|
|
>
|
|
<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" />
|
|
<div class="content">
|
|
{{ truncate(object.name) }}
|
|
</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" />
|
|
<translate translate-context="Content/Moderation/Link/Verb">
|
|
Open local profile
|
|
</translate>
|
|
</router-link>
|
|
<button
|
|
v-dropdown
|
|
class="ui floating dropdown icon button"
|
|
>
|
|
<i class="dropdown icon" />
|
|
<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" />
|
|
<translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>
|
|
</a>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="ui buttons">
|
|
<dangerous-button
|
|
:class="['ui', {loading: isLoading}, 'basic danger button']"
|
|
:action="remove"
|
|
>
|
|
<translate translate-context="*/*/*/Verb">
|
|
Delete
|
|
</translate>
|
|
<template #modal-header>
|
|
<p>
|
|
<translate translate-context="Popup/Library/Title">
|
|
Delete this tag?
|
|
</translate>
|
|
</p>
|
|
</template>
|
|
<template #modal-content>
|
|
<div>
|
|
<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>
|
|
</template>
|
|
<template #modal-confirm>
|
|
<p>
|
|
<translate translate-context="*/*/*/Verb">
|
|
Delete
|
|
</translate>
|
|
</p>
|
|
</template>
|
|
</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" />
|
|
<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" />
|
|
<div class="content">
|
|
<translate translate-context="Content/Moderation/Title">
|
|
Activity
|
|
</translate>
|
|
<span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
|
|
</div>
|
|
</h3>
|
|
<div
|
|
v-if="isLoadingStats"
|
|
class="ui placeholder"
|
|
>
|
|
<div class="full line" />
|
|
<div class="short line" />
|
|
<div class="medium line" />
|
|
<div class="long line" />
|
|
</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" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
</div>
|
|
<div class="column">
|
|
<section>
|
|
<h3 class="ui header">
|
|
<i class="music icon" />
|
|
<div class="content">
|
|
<translate translate-context="Content/Moderation/Title">
|
|
Audio content
|
|
</translate>
|
|
<span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></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="*/*/*/Noun">
|
|
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 { truncate } from '~/utils/filters'
|
|
|
|
export default {
|
|
props: { id: { type: Number, required: true } },
|
|
setup () {
|
|
return { truncate }
|
|
},
|
|
data () {
|
|
return {
|
|
isLoading: true,
|
|
isLoadingStats: false,
|
|
object: null,
|
|
stats: null
|
|
}
|
|
},
|
|
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')
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
this.fetchData()
|
|
},
|
|
methods: {
|
|
fetchData () {
|
|
const self = this
|
|
this.isLoading = true
|
|
const url = `manage/tags/${this.id}/`
|
|
axios.get(url).then(response => {
|
|
self.object = response.data
|
|
self.isLoading = false
|
|
})
|
|
},
|
|
remove () {
|
|
const self = this
|
|
this.isLoading = true
|
|
const url = `manage/tags/${this.id}/`
|
|
axios.delete(url).then(response => {
|
|
self.$router.push({ name: 'manage.library.tags' })
|
|
})
|
|
},
|
|
getQuery (field, value) {
|
|
return `${field}:"${value}"`
|
|
}
|
|
}
|
|
}
|
|
</script>
|