Base.vue 1.47 KB
Newer Older
1
<template>
Eliot Berriot's avatar
Eliot Berriot committed
2
  <div class="main pusher"  v-title="labels.title">
3
    <div class="ui secondary pointing menu">
4
5
      <router-link
        class="ui item"
6
        :to="{name: 'federation.libraries.list'}"><translate>Libraries</translate></router-link>
Eliot Berriot's avatar
Eliot Berriot committed
7
8
      <router-link
        class="ui item"
9
        :to="{name: 'federation.tracks.list'}"><translate>Tracks</translate></router-link>
10
11
12
13
        <div class="ui secondary right menu">
          <router-link
            class="ui item"
            :to="{name: 'federation.followers.list'}">
14
            <translate>Followers</translate>
Eliot Berriot's avatar
Eliot Berriot committed
15
            <div class="ui teal label" :title="labels.pendingRequests">{{ requestsCount }}</div>
16
17
          </router-link>
        </div>
18
19
20
21
    </div>
    <router-view :key="$route.fullPath"></router-view>
  </div>
</template>
22
23
24
25
26
27
28
29
30
31
32
<script>
import axios from 'axios'
export default {
  data () {
    return {
      requestsCount: 0
    }
  },
  created () {
    this.fetchRequestsCount()
  },
Eliot Berriot's avatar
Eliot Berriot committed
33
34
35
36
37
38
39
40
41
42
  computed: {
    labels () {
      let title = this.$gettext('Federation')
      let pendingRequests = this.$gettext('Pending requests')
      return {
        title,
        pendingRequests
      }
    }
  },
43
44
45
46
47
48
49
50
51
52
  methods: {
    fetchRequestsCount () {
      let self = this
      axios.get('federation/libraries/followers/', {params: {pending: true}}).then(response => {
        self.requestsCount = response.data.count
      })
    }
  }
}
</script>
Renon's avatar
Renon committed
53
54
55
56
57
58
59
60
61

<style scoped>

.ui.menu .item > .label {
  position: absolute;
  right: -2em;
}

</style>