See #190: front-end to manage import requests
This commit is contained in:
Eliot Berriot
parent
9767c8f415
commit
64cecf17a8
|
|
@ -6,13 +6,6 @@
|
|||
<router-link class="ui item" to="/library/radios" exact><i18next path="Radios"/></router-link>
|
||||
<router-link class="ui item" to="/library/playlists" exact><i18next path="Playlists"/></router-link>
|
||||
<div class="ui secondary right menu">
|
||||
<router-link
|
||||
v-if="$store.state.auth.authenticated"
|
||||
class="ui item"
|
||||
:to="{name: 'library.requests', query: {status: 'pending' }}"
|
||||
exact>
|
||||
<i18next path="Requests"/>
|
||||
</router-link>
|
||||
<router-link v-if="showImports" class="ui item" to="/library/import/launch" exact>
|
||||
<i18next path="Import"/>
|
||||
</router-link>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,229 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="ui inline form">
|
||||
<div class="fields">
|
||||
<div class="ui field">
|
||||
<label>{{ $t('Search') }}</label>
|
||||
<input type="text" v-model="search" placeholder="Search by artist, username, comment..." />
|
||||
</div>
|
||||
<div class="field">
|
||||
<i18next tag="label" path="Ordering"/>
|
||||
<select class="ui dropdown" v-model="ordering">
|
||||
<option v-for="option in orderingOptions" :value="option[0]">
|
||||
{{ option[1] }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<i18next tag="label" path="Ordering direction"/>
|
||||
<select class="ui dropdown" v-model="orderingDirection">
|
||||
<option value="+">Ascending</option>
|
||||
<option value="-">Descending</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>{{ $t("Status") }}</label>
|
||||
<select class="ui dropdown" v-model="status">
|
||||
<option :value="null">{{ $t('All') }}</option>
|
||||
<option :value="'pending'">{{ $t('Pending') }}</option>
|
||||
<option :value="'accepted'">{{ $t('Accepted') }}</option>
|
||||
<option :value="'imported'">{{ $t('Imported') }}</option>
|
||||
<option :value="'closed'">{{ $t('Closed') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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/requests/import-requests/action/'"
|
||||
:filters="actionFilters">
|
||||
<template slot="header-cells">
|
||||
<th>{{ $t('User') }}</th>
|
||||
<th>{{ $t('Status') }}</th>
|
||||
<th>{{ $t('Artist') }}</th>
|
||||
<th>{{ $t('Albums') }}</th>
|
||||
<th>{{ $t('Comment') }}</th>
|
||||
<th>{{ $t('Creation date') }}</th>
|
||||
<th>{{ $t('Import date') }}</th>
|
||||
<th>{{ $t('Actions') }}</th>
|
||||
</template>
|
||||
<template slot="row-cells" slot-scope="scope">
|
||||
<td>
|
||||
{{ scope.obj.user.username }}
|
||||
</td>
|
||||
<td>
|
||||
<span class="ui green basic label" v-if="scope.obj.status === 'imported'">{{ $t('Imported') }}</span>
|
||||
<span class="ui pink basic label" v-else-if="scope.obj.status === 'accepted'">{{ $t('Accepted') }}</span>
|
||||
<span class="ui yellow basic label" v-else-if="scope.obj.status === 'pending'">{{ $t('Pending') }}</span>
|
||||
<span class="ui red basic label" v-else-if="scope.obj.status === 'closed'">{{ $t('Closed') }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span :title="scope.obj.artist_name">{{ scope.obj.artist_name|truncate(30) }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="scope.obj.albums" :title="scope.obj.albums">{{ scope.obj.albums|truncate(30) }}</span>
|
||||
<template v-else>{{ $t('N/A') }}</template>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="scope.obj.comment" :title="scope.obj.comment">{{ scope.obj.comment|truncate(30) }}</span>
|
||||
<template v-else>{{ $t('N/A') }}</template>
|
||||
</td>
|
||||
<td>
|
||||
<human-date :date="scope.obj.creation_date"></human-date>
|
||||
</td>
|
||||
<td>
|
||||
<human-date v-if="scope.obj.imported_date" :date="scope.obj.creation_date"></human-date>
|
||||
<template v-else>{{ $t('N/A') }}</template>
|
||||
</td>
|
||||
<td>
|
||||
<router-link
|
||||
class="ui tiny basic button"
|
||||
:to="{name: 'library.import.launch', query: {request: scope.obj.id}}"
|
||||
v-if="scope.obj.status === 'pending'">{{ $t('Create import') }}</router-link>
|
||||
</td>
|
||||
</template>
|
||||
</action-table>
|
||||
</div>
|
||||
<div>
|
||||
<pagination
|
||||
v-if="result && result.results.length > 0"
|
||||
@page-changed="selectPage"
|
||||
:compact="true"
|
||||
:current="page"
|
||||
:paginate-by="paginateBy"
|
||||
:total="result.count"
|
||||
></pagination>
|
||||
|
||||
<span v-if="result && result.results.length > 0">
|
||||
{{ $t('Showing results {%start%}-{%end%} on {%total%}', {start: ((page-1) * paginateBy) + 1 , end: ((page-1) * paginateBy) + result.results.length, total: result.count})}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import _ from 'lodash'
|
||||
import time from '@/utils/time'
|
||||
import Pagination from '@/components/Pagination'
|
||||
import ActionTable from '@/components/common/ActionTable'
|
||||
import OrderingMixin from '@/components/mixins/Ordering'
|
||||
|
||||
export default {
|
||||
mixins: [OrderingMixin],
|
||||
props: {
|
||||
filters: {type: Object, required: false}
|
||||
},
|
||||
components: {
|
||||
Pagination,
|
||||
ActionTable
|
||||
},
|
||||
data () {
|
||||
let defaultOrdering = this.getOrderingFromString(this.defaultOrdering || '-creation_date')
|
||||
return {
|
||||
time,
|
||||
isLoading: false,
|
||||
result: null,
|
||||
page: 1,
|
||||
paginateBy: 25,
|
||||
search: '',
|
||||
status: null,
|
||||
orderingDirection: defaultOrdering.direction || '+',
|
||||
ordering: defaultOrdering.field,
|
||||
orderingOptions: [
|
||||
['creation_date', 'Creation date'],
|
||||
['imported_date', 'Imported date']
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData () {
|
||||
let params = _.merge({
|
||||
'page': this.page,
|
||||
'page_size': this.paginateBy,
|
||||
'q': this.search,
|
||||
'status': this.status,
|
||||
'ordering': this.getOrderingAsString()
|
||||
}, this.filters)
|
||||
let self = this
|
||||
self.isLoading = true
|
||||
self.checked = []
|
||||
axios.get('/manage/requests/import-requests/', {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: {
|
||||
actionFilters () {
|
||||
var currentFilters = {
|
||||
q: this.search
|
||||
}
|
||||
if (this.filters) {
|
||||
return _.merge(currentFilters, this.filters)
|
||||
} else {
|
||||
return currentFilters
|
||||
}
|
||||
},
|
||||
actions () {
|
||||
return [
|
||||
{
|
||||
name: 'delete',
|
||||
label: this.$t('Delete'),
|
||||
isDangerous: true
|
||||
},
|
||||
{
|
||||
name: 'mark_imported',
|
||||
label: this.$t('Mark as imported'),
|
||||
filterCheckable: (obj) => { return ['pending', 'accepted'].indexOf(obj.status) > -1 },
|
||||
isDangerous: true
|
||||
},
|
||||
{
|
||||
name: 'mark_closed',
|
||||
label: this.$t('Mark as closed'),
|
||||
filterCheckable: (obj) => { return ['pending', 'accepted'].indexOf(obj.status) > -1 },
|
||||
isDangerous: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
search (newValue) {
|
||||
this.page = 1
|
||||
this.fetchData()
|
||||
},
|
||||
page () {
|
||||
this.fetchData()
|
||||
},
|
||||
ordering () {
|
||||
this.page = 1
|
||||
this.fetchData()
|
||||
},
|
||||
status () {
|
||||
this.page = 1
|
||||
this.fetchData()
|
||||
},
|
||||
orderingDirection () {
|
||||
this.page = 1
|
||||
this.fetchData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,198 +0,0 @@
|
|||
<template>
|
||||
<div v-title="'Import Requests'">
|
||||
<div class="ui vertical stripe segment">
|
||||
<h2 class="ui header">{{ $t('Music requests') }}</h2>
|
||||
<div :class="['ui', {'loading': isLoading}, 'form']">
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<label>{{ $t('Search') }}</label>
|
||||
<input type="text" v-model="query" placeholder="Enter an artist name, a username..."/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>{{ $t('Status') }}</label>
|
||||
<select class="ui dropdown" v-model="status">
|
||||
<option :value="'any'">{{ $t('Any') }}</option>
|
||||
<option :value="'pending'">{{ $t('Pending') }}</option>
|
||||
<option :value="'accepted'">{{ $t('Accepted') }}</option>
|
||||
<option :value="'imported'">{{ $t('Imported') }}</option>
|
||||
<option :value="'closed'">{{ $t('Closed') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>{{ $t('Ordering') }}</label>
|
||||
<select class="ui dropdown" v-model="ordering">
|
||||
<option v-for="option in orderingOptions" :value="option[0]">
|
||||
{{ option[1] }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>{{ $t('Ordering direction') }}</label>
|
||||
<select class="ui dropdown" v-model="orderingDirection">
|
||||
<option value="+">Ascending</option>
|
||||
<option value="-">Descending</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>{{ $t('Results per page') }}</label>
|
||||
<select class="ui dropdown" v-model="paginateBy">
|
||||
<option :value="parseInt(12)">12</option>
|
||||
<option :value="parseInt(25)">25</option>
|
||||
<option :value="parseInt(50)">50</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui hidden divider"></div>
|
||||
<div
|
||||
v-if="result"
|
||||
v-masonry
|
||||
transition-duration="0"
|
||||
item-selector=".column"
|
||||
percent-position="true"
|
||||
stagger="0"
|
||||
class="ui stackable three column doubling grid">
|
||||
<div
|
||||
v-masonry-tile
|
||||
v-if="result.results.length > 0"
|
||||
v-for="request in result.results"
|
||||
:key="request.id"
|
||||
class="column">
|
||||
<request-card class="fluid" :request="request"></request-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui center aligned basic segment">
|
||||
<pagination
|
||||
v-if="result && result.results.length > 0"
|
||||
@page-changed="selectPage"
|
||||
:current="page"
|
||||
:paginate-by="paginateBy"
|
||||
:total="result.count"
|
||||
></pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import _ from 'lodash'
|
||||
import $ from 'jquery'
|
||||
|
||||
import logger from '@/logging'
|
||||
|
||||
import OrderingMixin from '@/components/mixins/Ordering'
|
||||
import PaginationMixin from '@/components/mixins/Pagination'
|
||||
import RequestCard from '@/components/requests/Card'
|
||||
import Pagination from '@/components/Pagination'
|
||||
|
||||
const FETCH_URL = 'requests/import-requests/'
|
||||
|
||||
export default {
|
||||
mixins: [OrderingMixin, PaginationMixin],
|
||||
props: {
|
||||
defaultQuery: {type: String, required: false, default: ''},
|
||||
defaultStatus: {required: false, default: 'any'}
|
||||
},
|
||||
components: {
|
||||
RequestCard,
|
||||
Pagination
|
||||
},
|
||||
data () {
|
||||
let defaultOrdering = this.getOrderingFromString(this.defaultOrdering || '-creation_date')
|
||||
return {
|
||||
isLoading: true,
|
||||
result: null,
|
||||
page: parseInt(this.defaultPage),
|
||||
query: this.defaultQuery,
|
||||
paginateBy: parseInt(this.defaultPaginateBy || 12),
|
||||
orderingDirection: defaultOrdering.direction || '+',
|
||||
ordering: defaultOrdering.field,
|
||||
status: this.defaultStatus || 'any'
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.fetchData()
|
||||
},
|
||||
mounted () {
|
||||
$('.ui.dropdown').dropdown()
|
||||
},
|
||||
methods: {
|
||||
updateQueryString: _.debounce(function () {
|
||||
let query = {
|
||||
query: {
|
||||
query: this.query,
|
||||
page: this.page,
|
||||
paginateBy: this.paginateBy,
|
||||
ordering: this.getOrderingAsString()
|
||||
}
|
||||
}
|
||||
if (this.status !== 'any') {
|
||||
query.query.status = this.status
|
||||
}
|
||||
this.$router.replace(query)
|
||||
}, 500),
|
||||
fetchData: _.debounce(function () {
|
||||
var self = this
|
||||
this.isLoading = true
|
||||
let url = FETCH_URL
|
||||
let params = {
|
||||
page: this.page,
|
||||
page_size: this.paginateBy,
|
||||
q: this.query,
|
||||
ordering: this.getOrderingAsString()
|
||||
}
|
||||
if (this.status !== 'any') {
|
||||
params.status = this.status
|
||||
}
|
||||
logger.default.debug('Fetching request...')
|
||||
axios.get(url, {params: params}).then((response) => {
|
||||
self.result = response.data
|
||||
self.isLoading = false
|
||||
})
|
||||
}, 500),
|
||||
selectPage: function (page) {
|
||||
this.page = page
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
orderingOptions: function () {
|
||||
return [
|
||||
['creation_date', this.$t('Creation date')],
|
||||
['artist_name', this.$t('Artist name')],
|
||||
['user__username', this.$t('User')]
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
page () {
|
||||
this.updateQueryString()
|
||||
this.fetchData()
|
||||
},
|
||||
paginateBy () {
|
||||
this.updateQueryString()
|
||||
this.fetchData()
|
||||
},
|
||||
ordering () {
|
||||
this.updateQueryString()
|
||||
this.fetchData()
|
||||
},
|
||||
orderingDirection () {
|
||||
this.updateQueryString()
|
||||
this.fetchData()
|
||||
},
|
||||
query () {
|
||||
this.updateQueryString()
|
||||
this.fetchData()
|
||||
},
|
||||
status () {
|
||||
this.updateQueryString()
|
||||
this.fetchData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -24,13 +24,13 @@ import RadioBuilder from '@/components/library/radios/Builder'
|
|||
import RadioDetail from '@/views/radios/Detail'
|
||||
import BatchList from '@/components/library/import/BatchList'
|
||||
import BatchDetail from '@/components/library/import/BatchDetail'
|
||||
import RequestsList from '@/components/requests/RequestsList'
|
||||
import PlaylistDetail from '@/views/playlists/Detail'
|
||||
import PlaylistList from '@/views/playlists/List'
|
||||
import Favorites from '@/components/favorites/List'
|
||||
import AdminSettings from '@/views/admin/Settings'
|
||||
import AdminLibraryBase from '@/views/admin/library/Base'
|
||||
import AdminLibraryFilesList from '@/views/admin/library/FilesList'
|
||||
import AdminLibraryRequestsList from '@/views/admin/library/RequestsList'
|
||||
import AdminUsersBase from '@/views/admin/users/Base'
|
||||
import AdminUsersDetail from '@/views/admin/users/UsersDetail'
|
||||
import AdminUsersList from '@/views/admin/users/UsersList'
|
||||
|
|
@ -184,6 +184,11 @@ export default new Router({
|
|||
path: 'files',
|
||||
name: 'manage.library.files',
|
||||
component: AdminLibraryFilesList
|
||||
},
|
||||
{
|
||||
path: 'requests',
|
||||
name: 'manage.library.requests',
|
||||
component: AdminLibraryRequestsList
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -278,21 +283,7 @@ export default new Router({
|
|||
children: [
|
||||
]
|
||||
},
|
||||
{ path: 'import/batches/:id', name: 'library.import.batches.detail', component: BatchDetail, props: true },
|
||||
{
|
||||
path: 'requests/',
|
||||
name: 'library.requests',
|
||||
component: RequestsList,
|
||||
props: (route) => ({
|
||||
defaultOrdering: route.query.ordering,
|
||||
defaultQuery: route.query.query,
|
||||
defaultPaginateBy: route.query.paginateBy,
|
||||
defaultPage: route.query.page,
|
||||
defaultStatus: route.query.status || 'any'
|
||||
}),
|
||||
children: [
|
||||
]
|
||||
}
|
||||
{ path: 'import/batches/:id', name: 'library.import.batches.detail', component: BatchDetail, props: true }
|
||||
]
|
||||
},
|
||||
{ path: '*', component: PageNotFound }
|
||||
|
|
|
|||
|
|
@ -4,6 +4,15 @@
|
|||
<router-link
|
||||
class="ui item"
|
||||
:to="{name: 'manage.library.files'}">{{ $t('Files') }}</router-link>
|
||||
<router-link
|
||||
class="ui item"
|
||||
:to="{name: 'manage.library.requests'}">
|
||||
{{ $t('Import requests') }}
|
||||
<div
|
||||
:class="['ui', {'teal': $store.state.ui.notifications.importRequests > 0}, 'label']"
|
||||
:title="$t('Pending import requests')">
|
||||
{{ $store.state.ui.notifications.importRequests }}</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<router-view :key="$route.fullPath"></router-view>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<div v-title="$t('Import requests')">
|
||||
<div class="ui vertical stripe segment">
|
||||
<h2 class="ui header">{{ $t('Import requests') }}</h2>
|
||||
<div class="ui hidden divider"></div>
|
||||
<library-requests-table></library-requests-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LibraryRequestsTable from '@/components/manage/library/RequestsTable'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LibraryRequestsTable
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
Loading…
Reference in New Issue