Merge branch '92-import-default' into 'develop'

Import form improvements

See merge request funkwhale/funkwhale!73

front/src/components/library/import/FileUpload.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div v-if="batch" class="ui two buttons">
+    <div v-if="batch" class="ui container">
       <file-upload-widget
-        class="ui icon button"
+        :class="['ui', 'icon', 'left', 'floated', 'button']"
         :post-action="uploadUrl"
         :multiple="true"
         :size="1024 * 1024 * 30"
@@ -19,16 +19,18 @@
         <i class="upload icon"></i>
         Select files to upload...
     </file-upload-widget>
-      <button class="ui icon teal button" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true">
+      <button
+        :class="['ui', 'right', 'floated', 'icon', {disabled: files.length === 0}, 'button']"
+        v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true">
         <i class="play icon" aria-hidden="true"></i>
         Start Upload
       </button>
-      <button type="button" class="ui icon yellow button" v-else @click.prevent="$refs.upload.active = false">
+      <button type="button" class="ui right floated icon yellow button" v-else @click.prevent="$refs.upload.active = false">
         <i class="pause icon" aria-hidden="true"></i>
         Stop Upload
       </button>
     </div>
-    <div class="ui hidden divider"></div>
+    <div class="ui hidden clearing divider"></div>
     <p v-if="batch">
       Once all your files are uploaded, simply head over  <router-link :to="{name: 'library.import.batches.detail', params: {id: batch.id }}">import detail page</router-link> to check the import status.
     </p>

front/src/components/library/import/Main.vue

@@ -23,6 +23,18 @@
           </div>
         </a>
       </div>
+      <div class="ui hidden divider"></div>
+      <div class="ui centered buttons">
+        <button @click="currentStep -= 1" :disabled="currentStep === 0" class="ui icon button"><i class="left arrow icon"></i> Previous step</button>
+        <button @click="currentStep += 1" v-if="currentStep < 2" class="ui icon button">Next step <i class="right arrow icon"></i></button>
+        <button
+          @click="$refs.import.launchImport()"
+          v-if="currentStep === 2"
+          :class="['ui', 'positive', 'icon', {'loading': isImporting}, 'button']"
+          :disabled="isImporting || importData.count === 0"
+          >Import {{ importData.count }} tracks <i class="check icon"></i></button>
+      </div>
+      <div class="ui hidden divider"></div>
       <div class="ui attached segment">
         <template v-if="currentStep === 0">
           <p>First, choose where you want to import the music from :</p>
@@ -101,17 +113,6 @@
             @import-state-changed="updateImportState"
             ></component>
         </div>
-        <div class="ui hidden divider"></div>
-        <div class="ui buttons">
-          <button @click="currentStep -= 1" :disabled="currentStep === 0" class="ui icon button"><i class="left arrow icon"></i> Previous step</button>
-          <button @click="currentStep += 1" v-if="currentStep < 2" class="ui icon button">Next step <i class="right arrow icon"></i></button>
-          <button
-            @click="$refs.import.launchImport()"
-            v-if="currentStep === 2"
-            :class="['ui', 'positive', 'icon', {'loading': isImporting}, 'button']"
-            :disabled="isImporting || importData.count === 0"
-            >Import {{ importData.count }} tracks <i class="check icon"></i></button>
-        </div>
       </div>
     </div>
     <div class="ui vertical stripe segment" v-if="currentRequest">

front/src/components/library/import/TrackImport.vue

@@ -100,8 +100,10 @@ export default Vue.extend({
       warnings: [
         'live',
         'full',
-        'cover'
+        'cover',
+        'mix'
       ],
+      customQuery: '',
       time
     }
   },
@@ -114,7 +116,7 @@ export default Vue.extend({
     $('.ui.checkbox').checkbox()
   },
   methods: {
-    search () {
+    search: function () {
       let self = this
       this.isLoading = true
       let url = 'providers/' + this.currentBackendId + '/search/'
@@ -144,17 +146,25 @@ export default Vue.extend({
         source: this.importedUrl
       }
     },
-    query () {
+    query: {
-      let queryMapping = [
+      get: function () {
-        ['artist', this.releaseMetadata['artist-credit'][0]['artist']['name']],
+        if (this.customQuery.length > 0) {
-        ['album', this.releaseMetadata['title']],
+          return this.customQuery
-        ['title', this.metadata['recording']['title']]
+        }
-      ]
+        let queryMapping = [
-      let query = this.customQueryTemplate
+          ['artist', this.releaseMetadata['artist-credit'][0]['artist']['name']],
-      queryMapping.forEach(e => {
+          ['album', this.releaseMetadata['title']],
-        query = query.split('$' + e[0]).join(e[1])
+          ['title', this.metadata['recording']['title']]
-      })
+        ]
-      return query
+        let query = this.customQueryTemplate
+        queryMapping.forEach(e => {
+          query = query.split('$' + e[0]).join(e[1])
+        })
+        return query
+      },
+      set: function (newValue) {
+        this.customQuery = newValue
+      }
     }
   },
   watch: {