List.vue 4.83 KB
Newer Older
1
<template>
Bat's avatar
Bat committed
2
  <div class="main pusher" v-title="'Your Favorites'">
3
4
    <div class="ui vertical center aligned stripe segment">
      <div :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']">
Bat's avatar
Bat committed
5
        <div class="ui text loader"><i18next path="Loading your favorites..."/></div>
6
7
8
      </div>
      <h2 v-if="results" class="ui center aligned icon header">
        <i class="circular inverted heart pink icon"></i>
Bat's avatar
Bat committed
9
10
11
        <i18next path="{%0%} favorites">
          {{ $store.state.favorites.count }}
        </i18next>
12
13
14
15
      </h2>
      <radio-button type="favorites"></radio-button>
    </div>
    <div class="ui vertical stripe segment">
16
17
18
      <div :class="['ui', {'loading': isLoading}, 'form']">
        <div class="fields">
          <div class="field">
Bat's avatar
Bat committed
19
            <i18next tag="label" path="Ordering"/>
20
21
22
23
24
25
26
            <select class="ui dropdown" v-model="ordering">
              <option v-for="option in orderingOptions" :value="option[0]">
                {{ option[1] }}
              </option>
            </select>
          </div>
          <div class="field">
Bat's avatar
Bat committed
27
            <i18next tag="label" path="Ordering direction"/>
28
            <select class="ui dropdown" v-model="orderingDirection">
Bat's avatar
Bat committed
29
30
              <option value=""><i18next path="Ascending"/></option>
              <option value="-"><i18next path="Descending"/></option>
31
32
33
            </select>
          </div>
          <div class="field">
Bat's avatar
Bat committed
34
            <i18next tag="label" path="Results per page"/>
35
36
37
38
39
40
41
42
43
            <select class="ui dropdown" v-model="paginateBy">
              <option :value="parseInt(12)">12</option>
              <option :value="parseInt(25)">25</option>
              <option :value="parseInt(50)">50</option>
            </select>
          </div>
        </div>
      </div>

44
      <track-table v-if="results" :tracks="results.results"></track-table>
Eliot Berriot's avatar
Eliot Berriot committed
45
46
      <div class="ui center aligned basic segment">
        <pagination
Eliot Berriot's avatar
Eliot Berriot committed
47
          v-if="results && results.count > 0"
Eliot Berriot's avatar
Eliot Berriot committed
48
49
          @page-changed="selectPage"
          :current="page"
50
          :paginate-by="paginateBy"
Eliot Berriot's avatar
Eliot Berriot committed
51
52
53
          :total="results.count"
          ></pagination>
      </div>
54
55
56
57
58
    </div>
  </div>
</template>

<script>
Eliot Berriot's avatar
Eliot Berriot committed
59
import axios from 'axios'
60
import $ from 'jquery'
61
62
63
import logger from '@/logging'
import TrackTable from '@/components/audio/track/Table'
import RadioButton from '@/components/radios/Button'
Eliot Berriot's avatar
Eliot Berriot committed
64
import Pagination from '@/components/Pagination'
65
66
import OrderingMixin from '@/components/mixins/Ordering'
import PaginationMixin from '@/components/mixins/Pagination'
Eliot Berriot's avatar
Eliot Berriot committed
67
const FAVORITES_URL = 'tracks/'
68
69

export default {
70
  mixins: [OrderingMixin, PaginationMixin],
71
72
  components: {
    TrackTable,
Eliot Berriot's avatar
Eliot Berriot committed
73
74
    RadioButton,
    Pagination
75
76
  },
  data () {
77
    let defaultOrdering = this.getOrderingFromString(this.defaultOrdering || 'artist__name')
78
79
80
81
82
    return {
      results: null,
      isLoading: false,
      nextLink: null,
      previousLink: null,
83
84
85
86
87
      page: parseInt(this.defaultPage),
      paginateBy: parseInt(this.defaultPaginateBy || 25),
      orderingDirection: defaultOrdering.direction,
      ordering: defaultOrdering.field,
      orderingOptions: [
Eliot Berriot's avatar
Eliot Berriot committed
88
89
90
        ['title', 'Track name'],
        ['album__title', 'Album name'],
        ['artist__name', 'Artist name']
91
      ]
92
93
94
95
96
    }
  },
  created () {
    this.fetchFavorites(FAVORITES_URL)
  },
97
98
99
  mounted () {
    $('.ui.dropdown').dropdown()
  },
100
  methods: {
101
102
103
104
105
106
107
108
109
    updateQueryString: function () {
      this.$router.replace({
        query: {
          page: this.page,
          paginateBy: this.paginateBy,
          ordering: this.getOrderingAsString()
        }
      })
    },
110
111
112
113
    fetchFavorites (url) {
      var self = this
      this.isLoading = true
      let params = {
Eliot Berriot's avatar
Eliot Berriot committed
114
        favorites: 'true',
115
        page: this.page,
116
117
        page_size: this.paginateBy,
        ordering: this.getOrderingAsString()
118
119
      }
      logger.default.time('Loading user favorites')
Eliot Berriot's avatar
Eliot Berriot committed
120
      axios.get(url, {params: params}).then((response) => {
121
122
123
124
        self.results = response.data
        self.nextLink = response.data.next
        self.previousLink = response.data.previous
        self.results.results.forEach((track) => {
125
          self.$store.commit('favorites/track', {id: track.id, value: true})
126
127
128
129
        })
        logger.default.timeEnd('Loading user favorites')
        self.isLoading = false
      })
Eliot Berriot's avatar
Eliot Berriot committed
130
131
132
133
134
135
136
    },
    selectPage: function (page) {
      this.page = page
    }
  },
  watch: {
    page: function () {
137
138
139
140
141
142
143
144
145
146
147
148
149
      this.updateQueryString()
      this.fetchFavorites(FAVORITES_URL)
    },
    paginateBy: function () {
      this.updateQueryString()
      this.fetchFavorites(FAVORITES_URL)
    },
    orderingDirection: function () {
      this.updateQueryString()
      this.fetchFavorites(FAVORITES_URL)
    },
    ordering: function () {
      this.updateQueryString()
Eliot Berriot's avatar
Eliot Berriot committed
150
      this.fetchFavorites(FAVORITES_URL)
151
152
153
154
155
156
157
158
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>