diff --git a/front/src/components/federation/LibraryTrackTable.vue b/front/src/components/federation/LibraryTrackTable.vue
index dc6eb9d210be0971b0b276b32a3675107ddda64a..e5255252e463747149b210c1fbe2493f181dd4b6 100644
--- a/front/src/components/federation/LibraryTrackTable.vue
+++ b/front/src/components/federation/LibraryTrackTable.vue
@@ -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()
}
}
}
diff --git a/front/src/router/index.js b/front/src/router/index.js
index 2b78375c1068233d801f2ac77b4da121f3f3fedc..0ef3dcf24cefbe78045b1bc96bf55417b99cbd3f 100644
--- a/front/src/router/index.js
+++ b/front/src/router/index.js
@@ -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',
diff --git a/front/src/views/federation/Base.vue b/front/src/views/federation/Base.vue
index 1919fd8556c61237d8c6301eb141740e951857ba..b90ba723a29563bcb3c947071524ce22b1821be5 100644
--- a/front/src/views/federation/Base.vue
+++ b/front/src/views/federation/Base.vue
@@ -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>
diff --git a/front/src/views/federation/LibraryDetail.vue b/front/src/views/federation/LibraryDetail.vue
index 6d9ab2eeb87fbf567c4d787cc67a46c8323d90c4..9dfe50755cdc98f02544c8bbfaa314846d02fa15 100644
--- a/front/src/views/federation/LibraryDetail.vue
+++ b/front/src/views/federation/LibraryDetail.vue
@@ -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>
diff --git a/front/src/views/federation/LibraryList.vue b/front/src/views/federation/LibraryList.vue
index 5c9d413a9cf66fb828900cf4c201ad0945b2c9c1..43800a72e4afd182b3b925997f842f11198bf416 100644
--- a/front/src/views/federation/LibraryList.vue
+++ b/front/src/views/federation/LibraryList.vue
@@ -1,5 +1,5 @@
<template>
- <div v-title="'Artists'">
+ <div v-title="'Libraries'">
<div class="ui vertical stripe segment">
<h2 class="ui header">Browsing libraries</h2>
<router-link
diff --git a/front/src/views/federation/LibraryTrackList.vue b/front/src/views/federation/LibraryTrackList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..42526b6e422d2325c480024e035d9907a28e9fe0
--- /dev/null
+++ b/front/src/views/federation/LibraryTrackList.vue
@@ -0,0 +1,23 @@
+<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>