Fix #551: Added a library widget to display libraries associated with a track, album and artist

front/src/components/federation/LibraryWidget.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="wrapper">
+    <h3 class="ui header">
+      <slot name="title"></slot>
+    </h3>
+    <p v-if="!isLoading && libraries.length > 0" class="ui subtitle"><slot name="subtitle"></slot></p>
+    <p v-if="!isLoading && libraries.length === 0" class="ui subtitle"><translate>No matching library.</translate></p>
+    <i @click="fetchData(previousPage)" :disabled="!previousPage" :class="['ui', {disabled: !previousPage}, 'circular', 'medium', 'angle left', 'icon']">
+    </i>
+    <i @click="fetchData(nextPage)" :disabled="!nextPage" :class="['ui', {disabled: !nextPage}, 'circular', 'medium', 'angle right', 'icon']">
+    </i>
+    <div class="ui hidden divider"></div>
+    <div class="ui three cards">
+      <div v-if="isLoading" class="ui inverted active dimmer">
+        <div class="ui loader"></div>
+      </div>
+      <library-card
+        :display-scan="false"
+        :display-follow="$store.state.auth.authenticated"
+        :library="library"
+        :display-copy-fid="true"
+        v-for="library in libraries"
+        :key="library.uuid"></library-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import axios from 'axios'
+import LibraryCard from '@/views/content/remote/Card'
+
+export default {
+  props: {
+    url: {type: String, required: true}
+  },
+  components: {
+    LibraryCard
+  },
+  data () {
+    return {
+      libraries: [],
+      limit: 6,
+      isLoading: false,
+      errors: null,
+      previousPage: null,
+      nextPage: null
+    }
+  },
+  created () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      this.isLoading = true
+      let self = this
+      let params = _.clone({})
+      params.page_size = this.limit
+      params.offset = this.offset
+      axios.get(this.url, {params: params}).then((response) => {
+        self.previousPage = response.data.previous
+        self.nextPage = response.data.next
+        self.isLoading = false
+        self.libraries = response.data.results
+      }, error => {
+        self.isLoading = false
+        self.errors = error.backendErrors
+      })
+    },
+    updateOffset (increment) {
+      if (increment) {
+        this.offset += this.limit
+      } else {
+        this.offset = Math.max(this.offset - this.limit, 0)
+      }
+    }
+  },
+  watch: {
+    offset () {
+      this.fetchData()
+    }
+  }
+}
+</script>