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

front/src/components/library/Home.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <div class="ui vertical stripe segment">
+      <search :autofocus="true"></search>
+    </div>
+    <div class="ui vertical stripe segment">
+      <div class="ui stackable two column grid">
+        <div class="column">
+          <h2 class="ui header">Latest artists</h2>
+          <div :class="['ui', {'active': isLoadingArtists}, 'inline', 'loader']"></div>
+          <div v-if="artists.length > 0" v-for="artist in artists.slice(0, 3)" :key="artist" class="ui cards">
+            <artist-card :artist="artist"></artist-card>
+          </div>
+        </div>
+        <div class="column">
+          <h2 class="ui header">Radios</h2>
+          <radio-card :type="'favorites'"></radio-card>
+          <radio-card :type="'random'"></radio-card>
+          <radio-card :type="'less-listened'"></radio-card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Search from '@/components/audio/Search'
+import backend from '@/audio/backend'
+import logger from '@/logging'
+import ArtistCard from '@/components/audio/artist/Card'
+import config from '@/config'
+import RadioCard from '@/components/radios/Card'
+
+const ARTISTS_URL = config.API_URL + 'artists/'
+
+export default {
+  name: 'library',
+  components: {
+    Search,
+    ArtistCard,
+    RadioCard
+  },
+  data () {
+    return {
+      artists: [],
+      isLoadingArtists: false
+    }
+  },
+  created () {
+    this.fetchArtists()
+  },
+  methods: {
+    fetchArtists () {
+      var self = this
+      this.isLoadingArtists = true
+      let params = {
+        ordering: '-creation_date'
+      }
+      let url = ARTISTS_URL
+      logger.default.time('Loading latest artists')
+      this.$http.get(url, {params: params}).then((response) => {
+        self.artists = response.data.results
+        self.artists.map((artist) => {
+          var albums = JSON.parse(JSON.stringify(artist.albums)).map((album) => {
+            return backend.Album.clean(album)
+          })
+          artist.albums = albums
+          return artist
+        })
+        logger.default.timeEnd('Loading latest artists')
+        self.isLoadingArtists = false
+      })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>