Commit 74f59071 authored by Eliot Berriot's avatar Eliot Berriot 💬

Can now list federated tracks

parent 2e71ddbf
......@@ -6,7 +6,7 @@
<table v-if="result" class="ui compact very basic single line unstackable table">
<thead>
<tr>
<th colspan="1">
<th>
<div class="ui checkbox">
<input
type="checkbox"
......@@ -18,6 +18,7 @@
<th>Artist</th>
<th>Album</th>
<th>Published date</th>
<th v-if="showLibrary">Library</th>
</tr>
</thead>
<tbody>
......@@ -34,28 +35,47 @@
</div>
</td>
<td>
{{ track.title }}
<span :title="track.title">{{ track.title|truncate(30) }}</span>
</td>
<td>
{{ track.artist_name }}
<span :title="track.artist_name">{{ track.artist_name|truncate(30) }}</span>
</td>
<td>
{{ track.album_title }}
<span :title="track.album_title">{{ track.album_title|truncate(20) }}</span>
</td>
<td>
<human-date :date="track.published_date"></human-date>
</td>
<td v-if="showLibrary">
{{ track.library.actor.domain }}
</td>
</tr>
</tbody>
<tfoot class="full-width">
<tr>
<th colspan="5">
<th>
<pagination
v-if="result && result.results.length > 0"
@page-changed="selectPage"
:compact="true"
:current="page"
:paginate-by="paginateBy"
:total="result.count"
></pagination>
</th>
<th>Showing results {{ ((page-1) * paginateBy) + 1 }}-{{ ((page-1) * paginateBy) + result.results.length }} on {{ result.count }}</th>
<th>
<button
@click="launchImport"
:disabled="checked.length === 0 || isImporting"
:class="['ui', 'green', {loading: isImporting}, 'button']">Import {{ checked.length }} tracks
</button>
</th>
<th></th>
<th></th>
<th></th>
<th v-if="showLibrary"></th>
</tr>
</tfoot>
</table>
......@@ -66,14 +86,22 @@
import axios from 'axios'
import _ from 'lodash'
import Pagination from '@/components/Pagination'
export default {
props: ['filters'],
props: {
filters: {type: Object, required: false},
showLibrary: {type: Boolean, default: false}
},
components: {
Pagination
},
data () {
return {
isLoading: false,
result: null,
page: 1,
paginateBy: 50,
paginateBy: 25,
search: '',
checked: {},
isImporting: false
......@@ -86,7 +114,7 @@ export default {
fetchData () {
let params = _.merge({
'page': this.page,
'paginate_by': this.paginateBy,
'page_size': this.paginateBy,
'q': this.search
}, this.filters)
let self = this
......@@ -107,7 +135,6 @@ export default {
library_tracks: this.checked
}
axios.post('/submit/federation/', payload).then((response) => {
console.log('Triggered import', response.data)
self.isImporting = false
self.fetchData()
}, error => {
......@@ -120,7 +147,9 @@ export default {
// we uncheck
this.checked = []
} else {
this.checked = this.result.results.map(t => { return t.id })
this.checked = this.result.results.filter(t => {
return t.local_track_file === null
}).map(t => { return t.id })
}
},
toggleCheck (id) {
......@@ -130,6 +159,9 @@ export default {
} else {
this.checked.push(id)
}
},
selectPage: function (page) {
this.page = page
}
},
watch: {
......@@ -137,6 +169,9 @@ export default {
if (newValue.length > 0) {
this.fetchData()
}
},
page () {
this.fetchData()
}
}
}
......
......@@ -29,6 +29,7 @@ import FederationBase from '@/views/federation/Base'
import FederationScan from '@/views/federation/Scan'
import FederationLibraryDetail from '@/views/federation/LibraryDetail'
import FederationLibraryList from '@/views/federation/LibraryList'
import FederationTrackList from '@/views/federation/LibraryTrackList'
Vue.use(Router)
......@@ -106,6 +107,17 @@ export default new Router({
defaultPage: route.query.page
})
},
{
path: 'tracks',
name: 'federation.tracks.list',
component: FederationTrackList,
props: (route) => ({
defaultOrdering: route.query.ordering,
defaultQuery: route.query.query,
defaultPaginateBy: route.query.paginateBy,
defaultPage: route.query.page
})
},
{ path: 'libraries/:id', name: 'federation.libraries.detail', component: FederationLibraryDetail, props: true }
]
},
......@@ -113,7 +125,7 @@ export default new Router({
path: '/library',
component: Library,
children: [
{ path: 'scan', component: LibraryHome },
{ path: '', component: LibraryHome },
{
path: 'artists/',
name: 'library.artists.browse',
......
......@@ -4,6 +4,9 @@
<router-link
class="ui item"
:to="{name: 'federation.libraries.list'}">Libraries</router-link>
<router-link
class="ui item"
:to="{name: 'federation.tracks.list'}">Tracks</router-link>
</div>
<router-view :key="$route.fullPath"></router-view>
</div>
......
......@@ -102,8 +102,6 @@
<div class="ui vertical stripe segment">
<h2>Tracks available in this library</h2>
<library-track-table :filters="{library: id}"></library-track-table>
<div class="ui stackable doubling three column grid">
</div>
</div>
</template>
</div>
......
<template>
<div v-title="'Artists'">
<div v-title="'Libraries'">
<div class="ui vertical stripe segment">
<h2 class="ui header">Browsing libraries</h2>
<router-link
......
<template>
<div v-title="'Federated tracks'">
<div class="ui vertical stripe segment">
<h2 class="ui header">Browsing federated tracks</h2>
<div class="ui hidden divider"></div>
<library-track-table :show-library="true"></library-track-table>
</div>
</div>
</template>
<script>
import LibraryTrackTable from '@/components/federation/LibraryTrackTable'
export default {
components: {
LibraryTrackTable
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Markdown is supported
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