Fixed #4: can now import artists and releases with a clean interface :party:

front/src/components/metadata/Search.vue

+<template>
+  <div>
+    <div class="ui form">
+      <div class="inline fields">
+        <div v-for="type in types"  class="field">
+          <div class="ui radio checkbox">
+            <input type="radio" :value="type.value" v-model="currentType">
+            <label >{{ type.label }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="ui fluid search">
+      <div class="ui icon input">
+        <input class="prompt" placeholder="Enter your search query..." type="text">
+        <i class="search icon"></i>
+      </div>
+      <div class="results"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import jQuery from 'jquery'
+import config from '@/config'
+import auth from '@/auth'
+
+export default {
+  props: {
+    mbType: {type: String, required: false},
+    mbId: {type: String, required: false}
+  },
+  data: function () {
+    return {
+      currentType: this.mbType || 'artist',
+      currentId: this.mbId || '',
+      types: [
+        {
+          value: 'artist',
+          label: 'Artist'
+        },
+        {
+          value: 'release',
+          label: 'Album'
+        },
+        {
+          value: 'recording',
+          label: 'Track'
+        }
+      ]
+    }
+  },
+
+  mounted: function () {
+    jQuery(this.$el).find('.ui.checkbox').checkbox()
+    this.setUpSearch()
+  },
+  methods: {
+
+    setUpSearch () {
+      var self = this
+      jQuery(this.$el).search({
+        minCharacters: 3,
+        onSelect (result, response) {
+          self.currentId = result.id
+        },
+        apiSettings: {
+          beforeXHR: function (xhrObject, s) {
+            xhrObject.setRequestHeader('Authorization', auth.getAuthHeader())
+            return xhrObject
+          },
+          onResponse: function (initialResponse) {
+            let category = self.currentTypeObject.value
+            let results = initialResponse[category + '-list'].map(r => {
+              let description = []
+              if (category === 'artist') {
+                if (r.type) {
+                  description.push(r.type)
+                }
+                if (r.area) {
+                  description.push(r.area.name)
+                } else if (r['begin-area']) {
+                  description.push(r['begin-area'].name)
+                }
+                return {
+                  title: r.name,
+                  id: r.id,
+                  description: description.join(' - ')
+                }
+              }
+              if (category === 'release') {
+                if (r['medium-track-count']) {
+                  description.push(
+                    r['medium-track-count'] + ' tracks'
+                  )
+                }
+                if (r['artist-credit-phrase']) {
+                  description.push(r['artist-credit-phrase'])
+                }
+                if (r['date']) {
+                  description.push(r['date'])
+                }
+                return {
+                  title: r.title,
+                  id: r.id,
+                  description: description.join(' - ')
+                }
+              }
+              if (category === 'recording') {
+                if (r['artist-credit-phrase']) {
+                  description.push(r['artist-credit-phrase'])
+                }
+                return {
+                  title: r.title,
+                  id: r.id,
+                  description: description.join(' - ')
+                }
+              }
+            })
+            return {results: results}
+          },
+          url: this.searchUrl
+        }
+      })
+    }
+  },
+  computed: {
+    currentTypeObject: function () {
+      let self = this
+      return this.types.filter(t => {
+        return t.value === self.currentType
+      })[0]
+    },
+    searchUrl: function () {
+      return config.API_URL + 'providers/musicbrainz/search/' + this.currentTypeObject.value + 's/?query={query}'
+    }
+  },
+  watch: {
+    currentType (newValue) {
+      this.setUpSearch()
+      this.$emit('type-changed', newValue)
+    },
+    currentId (newValue) {
+      this.$emit('id-changed', newValue)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

front/src/router/index.js

@@ -4,11 +4,15 @@ import Home from '@/components/Home'
 import Login from '@/components/auth/Login'
 import Profile from '@/components/auth/Profile'
 import Logout from '@/components/auth/Logout'
-import Browse from '@/components/browse/Browse'
-import BrowseHome from '@/components/browse/Home'
-import BrowseArtist from '@/components/browse/Artist'
-import BrowseAlbum from '@/components/browse/Album'
-import BrowseTrack from '@/components/browse/Track'
+import Library from '@/components/library/Library'
+import LibraryHome from '@/components/library/Home'
+import LibraryArtist from '@/components/library/Artist'
+import LibraryAlbum from '@/components/library/Album'
+import LibraryTrack from '@/components/library/Track'
+import LibraryImport from '@/components/library/import/Main'
+import BatchList from '@/components/library/import/BatchList'
+import BatchDetail from '@/components/library/import/BatchDetail'
+
 import Favorites from '@/components/favorites/List'
 
 Vue.use(Router)
@@ -43,13 +47,27 @@ export default new Router({
       component: Favorites
     },
     {
-      path: '/browse',
-      component: Browse,
+      path: '/library',
+      component: Library,
       children: [
-        { path: '', component: BrowseHome },
-        { path: 'artist/:id', name: 'browse.artist', component: BrowseArtist, props: true },
-        { path: 'album/:id', name: 'browse.album', component: BrowseAlbum, props: true },
-        { path: 'track/:id', name: 'browse.track', component: BrowseTrack, props: true }
+        { path: '', component: LibraryHome },
+        { path: 'artist/:id', name: 'library.artist', component: LibraryArtist, props: true },
+        { path: 'album/:id', name: 'library.album', component: LibraryAlbum, props: true },
+        { path: 'track/:id', name: 'library.track', component: LibraryTrack, props: true },
+        {
+          path: 'import/launch',
+          name: 'library.import.launch',
+          component: LibraryImport,
+          props: (route) => ({ mbType: route.query.type, mbId: route.query.id })
+        },
+        {
+          path: 'import/batches',
+          name: 'library.import.batches',
+          component: BatchList,
+          children: [
+          ]
+        },
+        { path: 'import/batches/:id', name: 'library.import.batches.detail', component: BatchDetail, props: true }
       ]
     }
 

front/src/utils/time.js

+function pad (val) {
+  val = Math.floor(val)
+  if (val < 10) {
+    return '0' + val
+  }
+  return val + ''
+}
+
+export default {
+  parse: function (sec) {
+    let min = 0
+    min = Math.floor(sec / 60)
+    sec = sec - min * 60
+    return pad(min) + ':' + pad(sec)
+  }
+}