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

See #228: use action table component for federation library tracks

parent fc88f72a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
front/src/components/federation/LibraryTrackTable.vue
+ 72
− 119
View file @ f12fe004
......@@ -16,89 +16,63 @@
</div>
</div>
</div>
<table v-if="result" class="ui compact very basic single line unstackable table">
<thead>
<tr>
<th>
<div class="ui checkbox">
<input
type="checkbox"
@change="toggleCheckAll"
:checked="result.results.length === checked.length"><label>&nbsp;</label>
</div>
</th>
<i18next tag="th" path="Title"/>
<i18next tag="th" path="Artist"/>
<i18next tag="th" path="Album"/>
<i18next tag="th" path="Published date"/>
<i18next tag="th" v-if="showLibrary" path="Library"/>
</tr>
</thead>
<tbody>
<tr v-for="track in result.results">
<td class="collapsing">
<div v-if="!track.local_track_file" class="ui checkbox">
<input
type="checkbox"
@change="toggleCheck(track.id)"
:checked="checked.indexOf(track.id) > -1"><label>&nbsp;</label>
</div>
<div v-else class="ui label">
<i18next path="In library"/>
</div>
</td>
<td>
<span :title="track.title">{{ track.title|truncate(30) }}</span>
</td>
<td>
<span :title="track.artist_name">{{ track.artist_name|truncate(30) }}</span>
</td>
<td>
<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>
<pagination
v-if="result && result.results.length > 0"
@page-changed="selectPage"
:compact="true"
:current="page"
:paginate-by="paginateBy"
:total="result.count"
></pagination>
<action-table
v-if="result"
:objects-data="result"
:actions="[['import', $t('Import')]]"
:action-url="'federation/library-tracks/action/'"
:filters="actionFilters">
<template slot="header-cells">
<th>{{ $t('Status') }}</th>
<th>{{ $t('Title') }}</th>
<th>{{ $t('Artist') }}</th>
<th>{{ $t('Album') }}</th>
<th>{{ $t('Published date') }}</th>
<th v-if="showLibrary">{{ $t('Library') }}</th>
</template>
<template slot="action-success-footer" slot-scope="scope">
<router-link
v-if="scope.result.action === 'import'"
:to="{name: 'library.import.batches.detail', params: {id: scope.result.result.batch.id }}">
{{ $t('Import #{% id %} launched', {id: scope.result.result.batch.id}) }}
</router-link>
</template>
<template slot="row-cells" slot-scope="scope">
<td>
<span v-if="scope.obj.local_track_file" class="ui basic green label">{{ $t('In library') }}</span>
<span v-else class="ui basic yellow label">{{ $t('Not imported') }}</span>
</td>
<td>
<span :title="scope.obj.title">{{ scope.obj.title|truncate(30) }}</span>
</td>
<td>
<span :title="scope.obj.artist_name">{{ scope.obj.artist_name|truncate(30) }}</span>
</td>
<td>
<span :title="scope.obj.album_title">{{ scope.obj.album_title|truncate(20) }}</span>
</td>
<td>
<human-date :date="scope.obj.published_date"></human-date>
</td>
<td v-if="showLibrary">
{{ scope.obj.library.actor.domain }}
</td>
</template>
</action-table>
<div>
<pagination
v-if="result && result.results.length > 0"
@page-changed="selectPage"
:compact="true"
:current="page"
:paginate-by="paginateBy"
:total="result.count"
></pagination>
</th>
<th 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})}}
<th>
<button
@click="launchImport"
:disabled="checked.length === 0 || isImporting"
:class="['ui', 'green', {loading: isImporting}, 'button']">
{{ $t('Import {%count%} tracks', {'count': checked.length}) }}
</button>
<router-link
v-if="importBatch"
:to="{name: 'library.import.batches.detail', params: {id: importBatch.id }}">
{{ $t('Import #{% id %} launched', {id: importBatch.id}) }}
</router-link>
</th>
<th></th>
<th></th>
<th></th>
<th v-if="showLibrary"></th>
</tr>
</tfoot>
</table>
<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>
......@@ -107,6 +81,7 @@ import axios from 'axios'
import _ from 'lodash'
import Pagination from '@/components/Pagination'
import ActionTable from '@/components/common/ActionTable'
export default {
props: {
......@@ -114,7 +89,8 @@ export default {
showLibrary: {type: Boolean, default: false}
},
components: {
Pagination
Pagination,
ActionTable
},
data () {
return {
......@@ -123,9 +99,6 @@ export default {
page: 1,
paginateBy: 25,
search: '',
checked: {},
isImporting: false,
importBatch: null,
importedFilter: null
}
},
......@@ -153,47 +126,26 @@ export default {
self.errors = error.backendErrors
})
},
launchImport () {
let self = this
self.isImporting = true
let payload = {
objects: this.checked,
action: 'import'
}
axios.post('/federation/library-tracks/action/', payload).then((response) => {
self.importBatch = response.data.result.batch
self.isImporting = false
self.fetchData()
}, error => {
self.isImporting = false
self.errors = error.backendErrors
})
},
toggleCheckAll () {
if (this.checked.length === this.result.results.length) {
// we uncheck
this.checked = []
} else {
this.checked = this.result.results.filter(t => {
return t.local_track_file === null
}).map(t => { return t.id })
selectPage: function (page) {
this.page = page
}
},
computed: {
actionFilters () {
var currentFilters = {
q: this.search
}
},
toggleCheck (id) {
if (this.checked.indexOf(id) > -1) {
// we uncheck
this.checked.splice(this.checked.indexOf(id), 1)
if (this.filters) {
return _.merge(currentFilters, this.filters)
} else {
this.checked.push(id)
return currentFilters
}
},
selectPage: function (page) {
this.page = page
}
},
watch: {
search (newValue) {
if (newValue.length > 0) {
this.page = 1
this.fetchData()
}
},
......@@ -201,6 +153,7 @@ export default {
this.fetchData()
},
importedFilter () {
this.page = 1
this.fetchData()
}
}
......
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