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

front/src/components/federation/LibraryTrackTable.vue

@@ -16,57 +16,50 @@
         </div>
       </div>
     </div>
-    <table v-if="result" class="ui compact very basic single line unstackable table">
+    <action-table
-      <thead>
+      v-if="result"
-        <tr>
+      :objects-data="result"
-          <th>
+      :actions="[['import', $t('Import')]]"
-            <div class="ui checkbox">
+      :action-url="'federation/library-tracks/action/'"
-              <input
+      :filters="actionFilters">
-                type="checkbox"
+      <template slot="header-cells">
-                @change="toggleCheckAll"
+        <th>{{ $t('Status') }}</th>
-                :checked="result.results.length === checked.length"><label>&nbsp;</label>
+        <th>{{ $t('Title') }}</th>
-            </div>
+        <th>{{ $t('Artist') }}</th>
-          </th>
+        <th>{{ $t('Album') }}</th>
-          <i18next tag="th" path="Title"/>
+        <th>{{ $t('Published date') }}</th>
-          <i18next tag="th" path="Artist"/>
+        <th v-if="showLibrary">{{ $t('Library') }}</th>
-          <i18next tag="th" path="Album"/>
+      </template>
-          <i18next tag="th" path="Published date"/>
+      <template slot="action-success-footer" slot-scope="scope">
-          <i18next tag="th" v-if="showLibrary" path="Library"/>
+        <router-link
-        </tr>
+          v-if="scope.result.action === 'import'"
-      </thead>
+          :to="{name: 'library.import.batches.detail', params: {id: scope.result.result.batch.id }}">
-      <tbody>
+          {{ $t('Import #{% id %} launched', {id: scope.result.result.batch.id}) }}
-        <tr v-for="track in result.results">
+        </router-link>
-          <td class="collapsing">
+      </template>
-            <div v-if="!track.local_track_file" class="ui checkbox">
+      <template slot="row-cells" slot-scope="scope">
-              <input
+        <td>
-                type="checkbox"
+          <span v-if="scope.obj.local_track_file" class="ui basic green label">{{ $t('In library') }}</span>
-                @change="toggleCheck(track.id)"
+          <span v-else class="ui basic yellow label">{{ $t('Not imported') }}</span>
-                :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>
+          <span :title="scope.obj.title">{{ scope.obj.title|truncate(30) }}</span>
         </td>
         <td>
-            <span :title="track.artist_name">{{ track.artist_name|truncate(30) }}</span>
+          <span :title="scope.obj.artist_name">{{ scope.obj.artist_name|truncate(30) }}</span>
         </td>
         <td>
-            <span :title="track.album_title">{{ track.album_title|truncate(20) }}</span>
+          <span :title="scope.obj.album_title">{{ scope.obj.album_title|truncate(20) }}</span>
         </td>
         <td>
-            <human-date :date="track.published_date"></human-date>
+          <human-date :date="scope.obj.published_date"></human-date>
         </td>
         <td v-if="showLibrary">
-            {{ track.library.actor.domain }}
+          {{ scope.obj.library.actor.domain }}
         </td>
-        </tr>
+      </template>
-      </tbody>
+    </action-table>
-      <tfoot class="full-width">
+    <div>
-        <tr>
-          <th>
       <pagination
         v-if="result && result.results.length > 0"
         @page-changed="selectPage"
@@ -76,29 +69,10 @@
         :total="result.count"
         ></pagination>
 
-          </th>
+      <span v-if="result && result.results.length > 0">
-          <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>
+      </span>
-            <button
+    </div>
-              @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>
   </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 })
-      }
-    },
-    toggleCheck (id) {
-      if (this.checked.indexOf(id) > -1) {
-        // we uncheck
-        this.checked.splice(this.checked.indexOf(id), 1)
-      } else {
-        this.checked.push(id)
-      }
-    },
     selectPage: function (page) {
       this.page = page
     }
   },
+  computed: {
+    actionFilters () {
+      var currentFilters = {
+        q: this.search
+      }
+      if (this.filters) {
+        return _.merge(currentFilters, this.filters)
+      } else {
+        return currentFilters
+      }
+    }
+  },
   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()
     }
   }