Initial commit

src/library/artist/ArtistCard.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <div class="text-truncate">
+      <router-link :to="{name: 'artist', params: { id: item.id } }">
+        <strong>{{ item.name }}</strong>
+      </router-link>
+    </div>
+     <div class="text-truncate text-muted">
+      <strong>{{ item.albumCount }}</strong> albums
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import Vue from "vue";
+
+  export default Vue.extend({
+    props: {
+      item: { type: Object, required: true }
+    }
+  });
+</script>

src/library/artist/ArtistDetails.vue

@@ -0,0 +1,58 @@
+<template>
+  <div v-if="item">
+    <div class="row mb-2">
+      <!-- <div class="col"> -->
+        <!-- <b-img height="300" width="300" :src="item.image"></b-img> -->
+      <!-- </div> -->
+      <div class="col col-xl-8">
+        <h1>{{ item.name }}</h1>
+        <p>{{ item.description }}</p>
+      </div>
+    </div>
+    <h3 class="pt-5">Albums</h3>
+    <Tiles :items="item.albums" v-slot="{ item }" square>
+      <div class="text-truncate">
+        <router-link :to="{name: 'album', params: { id: item.id } }">
+          <strong>{{ item.name }}</strong>
+        </router-link>
+      </div>
+      <div class="text-truncate text-muted">
+        {{ item.artist }}
+      </div>
+    </Tiles>
+
+    <h3 class="pt-5">Similar artist</h3>
+    <Tiles :items="item.similarArtist" v-slot="{ item }">
+      <ArtistCard :item="item"></ArtistCard>
+    </Tiles>
+  </div>
+</template>
+<script lang="ts">
+import Vue from "vue";
+import AlbumCard from "@/library/album/AlbumCard.vue";
+import ArtistCard from "@/library/artist/ArtistCard.vue";
+
+export default Vue.extend({
+  components: {
+    AlbumCard,
+    ArtistCard,
+  },
+  props: {
+    id: String
+  },
+  data() {
+    return {
+      item: null as any,
+    }
+  },
+  watch: {
+    id: {
+      immediate: true,
+      async handler(value: string) {
+        this.item = null,
+        this.item = await this.$api.getArtistDetails(this.id);
+      }
+    }
+  }
+});
+</script>

src/library/artist/ArtistList.vue

@@ -0,0 +1,32 @@
+<template>
+  <Tiles :items="items" v-slot="{ item }">
+    <div class="text-truncate">
+      <router-link :to="{name: 'artist', params: { id: item.id } }">
+        <strong>{{ item.name }}</strong>
+      </router-link>
+    </div>
+     <div class="text-truncate text-muted">
+      <strong>{{ item.albumCount }}</strong> albums
+    </div>
+  </Tiles>
+</template>
+<script lang="ts">
+  import Vue from "vue";
+  import ArtistCard from "./ArtistCard.vue";
+
+  export default Vue.extend({
+    components: {
+      ArtistCard,
+    },
+    data() {
+      return {
+        items: []
+      };
+    },
+    created() {
+      this.$api.getArtists().then(items => {
+        this.items = items;
+      });
+    }
+  });
+</script>