diff --git a/front/src/components/federation/LibraryTrackTable.vue b/front/src/components/federation/LibraryTrackTable.vue index ad8b801a62b54577b0727757df787a9754e09130..551fb992a6518966b829b2ef9cdf2aff08caa356 100644 --- a/front/src/components/federation/LibraryTrackTable.vue +++ b/front/src/components/federation/LibraryTrackTable.vue @@ -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> </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> </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() } }