Can now import library tracks from front-end

front/src/components/federation/LibraryTrackTable.vue

@@ -0,0 +1,143 @@
+<template>
+  <div>
+    <div class="ui inline form">
+      <input type="text" v-model="search" placeholder="Search by title, artist, domain..." />
+    </div>
+    <table v-if="result" class="ui compact very basic single line unstackable table">
+      <thead>
+        <tr>
+          <th colspan="1">
+            <div class="ui checkbox">
+              <input
+                type="checkbox"
+                @change="toggleCheckAll"
+                :checked="result.results.length === checked.length"><label>&nbsp;</label>
+            </div>
+          </th>
+          <th>Title</th>
+          <th>Artist</th>
+          <th>Album</th>
+          <th>Published date</th>
+        </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">
+              In library
+            </div>
+          </td>
+          <td>
+            {{ track.title }}
+          </td>
+          <td>
+            {{ track.artist_name }}
+          </td>
+          <td>
+            {{ track.album_title }}
+          </td>
+          <td>
+            <human-date :date="track.published_date"></human-date>
+          </td>
+        </tr>
+      </tbody>
+      <tfoot class="full-width">
+        <tr>
+          <th colspan="5">
+            <button
+              @click="launchImport"
+              :disabled="checked.length === 0 || isImporting"
+              :class="['ui', 'green', {loading: isImporting}, 'button']">Import {{ checked.length }} tracks
+            </button>
+          </th>
+        </tr>
+      </tfoot>
+    </table>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import _ from 'lodash'
+
+export default {
+  props: ['filters'],
+  data () {
+    return {
+      isLoading: false,
+      result: null,
+      page: 1,
+      paginateBy: 50,
+      search: '',
+      checked: {},
+      isImporting: false
+    }
+  },
+  created () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      let params = _.merge({
+        'page': this.page,
+        'paginate_by': this.paginateBy,
+        'q': this.search
+      }, this.filters)
+      let self = this
+      self.isLoading = true
+      self.checked = []
+      axios.get('/federation/library-tracks/', {params: params}).then((response) => {
+        self.result = response.data
+        self.isLoading = false
+      }, error => {
+        self.isLoading = false
+        self.errors = error.backendErrors
+      })
+    },
+    launchImport () {
+      let self = this
+      self.isImporting = true
+      let payload = {
+        library_tracks: this.checked
+      }
+      axios.post('/submit/federation/', payload).then((response) => {
+        console.log('Triggered import', response.data)
+        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.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)
+      }
+    }
+  },
+  watch: {
+    search (newValue) {
+      if (newValue.length > 0) {
+        this.fetchData()
+      }
+    }
+  }
+}
+</script>

front/src/views/federation/LibraryDetail.vue

@@ -82,6 +82,16 @@
                 <td>
                   <human-date v-if="object.fetched_date" :date="object.fetched_date"></human-date>
                   <template v-else>Never</template>
+                  <button
+                    @click="scan"
+                    v-if="!scanTrigerred"
+                    :class="['ui', 'basic', {loading: isScanLoading}, 'button']">
+                    <i class="sync icon"></i> Trigger scan
+                  </button>
+                  <button v-else class="ui success button">
+                    <i class="check icon"></i> Scan triggered!
+                  </button>
+
                 </td>
                 <td></td>
               </tr>
@@ -91,6 +101,7 @@
       </div>
       <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>
@@ -102,13 +113,19 @@
 import axios from 'axios'
 import logger from '@/logging'
 
+import LibraryTrackTable from '@/components/federation/LibraryTrackTable'
+
 export default {
   props: ['id'],
-  components: {},
+  components: {
+    LibraryTrackTable
+  },
   data () {
     return {
       isLoading: true,
-      object: null
+      isScanLoading: false,
+      object: null,
+      scanTrigerred: false
     }
   },
   created () {
@@ -125,6 +142,18 @@ export default {
         self.isLoading = false
       })
     },
+    scan (until) {
+      var self = this
+      this.isScanLoading = true
+      let data = {}
+      let url = 'federation/libraries/' + this.id + '/scan/'
+      logger.default.debug('Triggering scan for library "' + this.id + '"')
+      axios.post(url, data).then((response) => {
+        self.scanTrigerred = true
+        logger.default.debug('Scan triggered with id', response.data)
+        self.isScanLoading = false
+      })
+    },
     update (attr) {
       let newValue = this.object[attr]
       let params = {}