Library menu show number of pending requests

front/src/components/library/Library.vue

@@ -5,8 +5,13 @@
       <router-link class="ui item" to="/library/artists" exact>Artists</router-link>
       <router-link class="ui item" to="/library/radios" exact>Radios</router-link>
       <div class="ui secondary right menu">
+        <router-link class="ui item" to="/library/requests/" exact>
+          Requests
+          <div class="ui teal label">{{ requestsCount }}</div>
+        </router-link>
         <router-link v-if="$store.state.auth.availablePermissions['import.launch']" class="ui item" to="/library/import/launch" exact>Import</router-link>
-        <router-link v-if="$store.state.auth.availablePermissions['import.launch']" class="ui item" to="/library/import/batches">Import batches</router-link>
+        <router-link v-if="$store.state.auth.availablePermissions['import.launch']" class="ui item" to="/library/import/batches">Import batches
+        </router-link>
       </div>
     </div>
     <router-view :key="$route.fullPath"></router-view>
@@ -14,9 +19,25 @@
 </template>
 
 <script>
-
+import axios from 'axios'
 export default {
-  name: 'library'
+  name: 'library',
+  data () {
+    return {
+      requestsCount: 0
+    }
+  },
+  created () {
+    this.fetchRequestsCount()
+  },
+  methods: {
+    fetchRequestsCount () {
+      let self = this
+      axios.get('requests/import-requests', {params: {status: 'pending'}}).then(response => {
+        self.requestsCount = response.data.count
+      })
+    }
+  }
 }
 </script>