cleanup duplicated artist/album lists

src/library/album/AlbumCard.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="card">
-    <img class="card-img-top" :src="item.image">
-    <div class="card-body">
-      <div class=" ">
-        <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>
-      </div>
-    </div>
-  </div>
-</template>
-<style scoped lang="scss">
-  .on-hover {
-    opacity: 0.6;
-  }
-
-  .show-btns {
-    color: rgba(255, 255, 255, 1) !important;
-  }
-</style>
-<script lang="ts">
-  import Vue from "vue";
-
-  export default Vue.extend({
-    props: {
-      item: Object
-    }
-  });
-</script>

src/library/album/AlbumLibrary.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <Spinner :data="albums" v-slot="{albums: data}">
+      <AlbumList :items="albums"/>
+    </Spinner>
+  </div>
+</template>
+<script lang="ts">
+import Vue from "vue";
+import AlbumList from './AlbumList.vue';
+import { AlbumSort } from '@/shared/api';
+
+export default Vue.extend({
+  components: {
+    AlbumList,
+  },
+  props: {
+    msg: String
+  },
+  data() {
+    return {
+      sort: "newest",
+      albums: null,
+    };
+  },
+  computed: {
+    sortOptions() {
+      return [
+        { text: "A-Z", value: "alphabeticalByName" },
+        { text: "Date", value: "newest" },
+        { text: "frequent", value: "frequent" },
+        // { text: "random", value: "random" },
+        // { text: "recent", value: "recent" },
+        // { text: "starred", value: "starred" },
+      ]
+    }
+  },
+  watch: {
+    sort: {
+      immediate: true,
+      handler(value: AlbumSort) {
+        this.albums = null;
+        this.$api.getAlbums(value).then(albums => {
+          this.albums = albums;
+        });
+      }
+    }
+  },
+});
+</script>

src/library/album/AlbumList.vue

@@ -1,59 +1,14 @@
-<template>
-  <div>
-    <Spinner :data="albums" v-slot="{albums: data}">
-      <Tiles square>
-        <Tile v-for="item in albums" :key="item.id"
-          :image="item.image"
-          :to="{name: 'album', params: { id: item.id } }"
-          :title="item.name">
-          <template v-slot:text>
-            <router-link :to="{name: 'artist', params: { id: item.artistId } }">
-              {{ item.artist }}
-            </router-link>
-          </template>
-        </Tile>
-      </Tiles>
-    </Spinner>
-  </div>
+<template functional>
+  <Tiles square>
+    <Tile v-for="item in props.items" :key="item.id"
+      :image="item.image"
+      :to="{name: 'album', params: { id: item.id } }"
+      :title="item.name">
+      <template v-slot:text>
+        <router-link :to="{name: 'artist', params: { id: item.artistId } }" class="text-muted">
+          {{ item.artist }}
+        </router-link>
+      </template>
+    </Tile>
+  </Tiles>
 </template>
-<script lang="ts">
-import Vue from "vue";
-import { AlbumSort } from '@/shared/api';
-
-export default Vue.extend({
-  props: {
-    msg: String
-  },
-  data() {
-    return {
-      sort: "newest",
-      albums: null,
-    };
-  },
-  computed: {
-    sortOptions() {
-      return [
-        { text: "A-Z", value: "alphabeticalByName" },
-        { text: "Date", value: "newest" },
-        { text: "frequent", value: "frequent" },
-        // { text: "random", value: "random" },
-        // { text: "recent", value: "recent" },
-        // { text: "starred", value: "starred" },
-      ]
-    }
-  },
-  watch: {
-    sort: {
-      immediate: true,
-      handler(value: AlbumSort) {
-        this.albums = null;
-        this.$api.getAlbums(value).then(albums => {
-          this.albums = albums;
-        });
-      }
-    }
-  },
-  created() {
-  }
-});
-</script>

src/library/artist/ArtistCard.vue

@@ -1,21 +0,0 @@
-<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

@@ -10,31 +10,22 @@
       </div>
     </div>
     <h3 class="pt-5">Albums</h3>
-    <Tiles square>
-      <Tile v-for="item in item.albums" :key="item.id"
-        :image="item.image"
-        :to="{name: 'album', params: { id: item.id } }"
-        :title="item.name"
-        :text="item.artist">
-      </Tile>
-    </Tiles>
+    <AlbumList :items="item.albums"/>
+
     <h3 class="pt-5">Similar artist</h3>
-    <Tiles>
-      <Tile v-for="item in item.similarArtist" :key="item.id"
-        :to="{name: 'artist', params: { id: item.id } }"
-        :title="item.name">
-        <template v-slot:text>
-          <strong>{{ item.albumCount }}</strong> albums
-        </template>
-      </Tile>
-    </Tiles>
+    <ArtistList :items="item.similarArtist"/>
   </div>
 </template>
 <script lang="ts">
 import Vue from "vue";
+import AlbumList from "@/library/album/AlbumList.vue";
+import ArtistList from "@/library/artist/ArtistList.vue";
 
 export default Vue.extend({
-  components: {},
+  components: {
+    AlbumList,
+    ArtistList,
+  },
   props: {
     id: String
   },

src/library/artist/ArtistLibrary.vue

@@ -0,0 +1,23 @@
+<template>
+  <ArtistList :items="items"/>
+</template>
+<script lang="ts">
+  import Vue from "vue";
+  import ArtistList from './ArtistList.vue';
+
+  export default Vue.extend({
+    components: {
+      ArtistList,
+    },
+    data() {
+      return {
+        items: []
+      };
+    },
+    created() {
+      this.$api.getArtists().then(items => {
+        this.items = items;
+      });
+    }
+  });
+</script>

src/library/artist/ArtistList.vue

@@ -1,7 +1,6 @@
-<template>
+<template functional>
   <Tiles>
-    <Tile v-for="item in items" :key="item.id"
-      :image="item.image"
+    <Tile v-for="item in props.items" :key="item.id"
       :to="{name: 'artist', params: { id: item.id } }"
       :title="item.name">
       <template v-slot:text>
@@ -10,19 +9,3 @@
     </Tile>
   </Tiles>
 </template>
-<script lang="ts">
-  import Vue from "vue";
-
-  export default Vue.extend({
-    data() {
-      return {
-        items: []
-      };
-    },
-    created() {
-      this.$api.getArtists().then(items => {
-        this.items = items;
-      });
-    }
-  });
-</script>