Library.vue 2.25 KB
Newer Older
1
<template>
2
  <div class="main library pusher">
3
    <div class="ui secondary pointing menu">
4
      <router-link class="ui item" to="/library" exact>Browse</router-link>
5
      <router-link class="ui item" to="/library/artists" exact>Artists</router-link>
Eliot Berriot's avatar
Eliot Berriot committed
6
      <router-link class="ui item" to="/library/radios" exact>Radios</router-link>
7
      <div class="ui secondary right menu">
8
        <router-link v-if="$store.state.auth.authenticated" class="ui item" to="/library/requests/" exact>
9
10
11
          Requests
          <div class="ui teal label">{{ requestsCount }}</div>
        </router-link>
12
        <router-link v-if="$store.state.auth.availablePermissions['import.launch']" class="ui item" to="/library/import/launch" exact>Import</router-link>
13
14
        <router-link v-if="$store.state.auth.availablePermissions['import.launch']" class="ui item" to="/library/import/batches">Import batches
        </router-link>
15
      </div>
16
    </div>
17
    <router-view :key="$route.fullPath"></router-view>
18
19
20
21
  </div>
</template>

<script>
22
import axios from 'axios'
23
export default {
24
25
26
27
28
29
30
31
32
33
34
  name: 'library',
  data () {
    return {
      requestsCount: 0
    }
  },
  created () {
    this.fetchRequestsCount()
  },
  methods: {
    fetchRequestsCount () {
35
36
37
      if (!this.$store.state.authenticated) {
        return
      }
38
      let self = this
39
      axios.get('requests/import-requests/', {params: {status: 'pending'}}).then(response => {
40
41
42
43
        self.requestsCount = response.data.count
      })
    }
  }
44
45
46
47
48
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
49
50
@import '../../style/vendor/media';

51
.library.pusher > .ui.secondary.menu {
52
53
54
  @include media(">tablet") {
    margin: 0 2.5rem;
  }
Eliot Berriot's avatar
Eliot Berriot committed
55
56
57
58
  .item {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }
59
60
}

61
.library {
62
63
64
65
66
67
  .ui.segment.head {
    background-size: cover;
    background-position: center;
    padding: 0;
    .segment-content {
      margin: 0 auto;
68
69
70
71
      padding: 2em;
      @include media(">tablet") {
        padding: 4em;
      }
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
    }
    &.with-background {
      .header {
        &, .sub, a {
          text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
          color: white !important;
        }
      }
      .segment-content {
        background-color: rgba(0, 0, 0, 0.5)
      }

    }
  }

}

</style>