diff --git a/front/src/components/library/import/FileUpload.vue b/front/src/components/library/import/FileUpload.vue index 1b90adc9d71b2d0425603d0cbb9f98de0b51a905..35338c656170f3329a024d18f390916f74d81355 100644 --- a/front/src/components/library/import/FileUpload.vue +++ b/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> diff --git a/front/src/components/library/import/Main.vue b/front/src/components/library/import/Main.vue index 0a1cc6df9480366a7105166045e39ffbf91249de..66e16b71f467163cfb9313eaf5f6fa542cec4216 100644 --- a/front/src/components/library/import/Main.vue +++ b/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"> diff --git a/front/src/components/library/import/TrackImport.vue b/front/src/components/library/import/TrackImport.vue index edd444d92ee071ebbb0946c16badecf21a378346..f6adc5afbbbc77c99cca36ae19b04d1a2c449a7d 100644 --- a/front/src/components/library/import/TrackImport.vue +++ b/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 () { - let queryMapping = [ - ['artist', this.releaseMetadata['artist-credit'][0]['artist']['name']], - ['album', this.releaseMetadata['title']], - ['title', this.metadata['recording']['title']] - ] - let query = this.customQueryTemplate - queryMapping.forEach(e => { - query = query.split('$' + e[0]).join(e[1]) - }) - return query + query: { + get: function () { + if (this.customQuery.length > 0) { + return this.customQuery + } + let queryMapping = [ + ['artist', this.releaseMetadata['artist-credit'][0]['artist']['name']], + ['album', this.releaseMetadata['title']], + ['title', this.metadata['recording']['title']] + ] + let query = this.customQueryTemplate + queryMapping.forEach(e => { + query = query.split('$' + e[0]).join(e[1]) + }) + return query + }, + set: function (newValue) { + this.customQuery = newValue + } } }, watch: {