Artists.vue 4.92 KB
Newer Older
Eliot Berriot's avatar
Eliot Berriot committed
1
<template>
Bat's avatar
Bat committed
2
  <div v-title="'Artists'">
3
    <div class="ui vertical stripe segment">
Eliot Berriot's avatar
Eliot Berriot committed
4
      <h2 class="ui header">Browsing artists</h2>
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
      <div :class="['ui', {'loading': isLoading}, 'form']">
        <div class="fields">
          <div class="field">
            <label>Search</label>
            <input type="text" v-model="query" placeholder="Enter an artist name..."/>
          </div>
          <div class="field">
            <label>Ordering</label>
            <select class="ui dropdown" v-model="ordering">
              <option v-for="option in orderingOptions" :value="option[0]">
                {{ option[1] }}
              </option>
            </select>
          </div>
          <div class="field">
            <label>Ordering direction</label>
            <select class="ui dropdown" v-model="orderingDirection">
              <option value="">Ascending</option>
              <option value="-">Descending</option>
            </select>
          </div>
          <div class="field">
            <label>Results per page</label>
            <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>
      <div class="ui hidden divider"></div>
Eliot Berriot's avatar
Eliot Berriot committed
37
38
39
40
41
42
43
44
      <div
        v-if="result"
        v-masonry
        transition-duration="0"
        item-selector=".column"
        percent-position="true"
        stagger="0"
        class="ui stackable three column doubling grid">
Eliot Berriot's avatar
Eliot Berriot committed
45
        <div
Eliot Berriot's avatar
Eliot Berriot committed
46
          v-masonry-tile
Eliot Berriot's avatar
Eliot Berriot committed
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
          v-if="result.results.length > 0"
          v-for="artist in result.results"
          :key="artist.id"
          class="column">
          <artist-card class="fluid" :artist="artist"></artist-card>
        </div>
      </div>
      <div class="ui center aligned basic segment">
        <pagination
          v-if="result && result.results.length > 0"
          @page-changed="selectPage"
          :current="page"
          :paginate-by="paginateBy"
          :total="result.count"
          ></pagination>
      </div>
    </div>
  </div>
</template>

<script>
Eliot Berriot's avatar
Eliot Berriot committed
68
import axios from 'axios'
69
70
import _ from 'lodash'
import $ from 'jquery'
Eliot Berriot's avatar
Eliot Berriot committed
71

72
import backend from '@/audio/backend'
Eliot Berriot's avatar
Eliot Berriot committed
73
import logger from '@/logging'
74
75
76

import OrderingMixin from '@/components/mixins/Ordering'
import PaginationMixin from '@/components/mixins/Pagination'
Eliot Berriot's avatar
Eliot Berriot committed
77
78
79
import ArtistCard from '@/components/audio/artist/Card'
import Pagination from '@/components/Pagination'

Eliot Berriot's avatar
Eliot Berriot committed
80
const FETCH_URL = 'artists/'
Eliot Berriot's avatar
Eliot Berriot committed
81
82

export default {
83
  mixins: [OrderingMixin, PaginationMixin],
84
  props: {
85
    defaultQuery: {type: String, required: false, default: ''}
86
  },
Eliot Berriot's avatar
Eliot Berriot committed
87
88
89
90
91
  components: {
    ArtistCard,
    Pagination
  },
  data () {
92
    let defaultOrdering = this.getOrderingFromString(this.defaultOrdering || '-creation_date')
Eliot Berriot's avatar
Eliot Berriot committed
93
94
95
    return {
      isLoading: true,
      result: null,
96
97
      page: parseInt(this.defaultPage),
      query: this.defaultQuery,
98
      paginateBy: parseInt(this.defaultPaginateBy || 12),
99
100
101
102
103
104
      orderingDirection: defaultOrdering.direction,
      ordering: defaultOrdering.field,
      orderingOptions: [
        ['creation_date', 'Creation date'],
        ['name', 'Name']
      ]
Eliot Berriot's avatar
Eliot Berriot committed
105
106
107
108
109
    }
  },
  created () {
    this.fetchData()
  },
110
111
112
  mounted () {
    $('.ui.dropdown').dropdown()
  },
Eliot Berriot's avatar
Eliot Berriot committed
113
  methods: {
Eliot Berriot's avatar
Eliot Berriot committed
114
    updateQueryString: _.debounce(function () {
115
116
117
118
119
      this.$router.replace({
        query: {
          query: this.query,
          page: this.page,
          paginateBy: this.paginateBy,
120
          ordering: this.getOrderingAsString()
121
122
        }
      })
Eliot Berriot's avatar
Eliot Berriot committed
123
    }, 500),
124
    fetchData: _.debounce(function () {
Eliot Berriot's avatar
Eliot Berriot committed
125
126
127
128
129
130
      var self = this
      this.isLoading = true
      let url = FETCH_URL
      let params = {
        page: this.page,
        page_size: this.paginateBy,
131
        name__icontains: this.query,
132
133
        ordering: this.getOrderingAsString(),
        listenable: 'true'
Eliot Berriot's avatar
Eliot Berriot committed
134
135
      }
      logger.default.debug('Fetching artists')
Eliot Berriot's avatar
Eliot Berriot committed
136
      axios.get(url, {params: params}).then((response) => {
Eliot Berriot's avatar
Eliot Berriot committed
137
        self.result = response.data
138
139
140
141
142
143
144
        self.result.results.map((artist) => {
          var albums = JSON.parse(JSON.stringify(artist.albums)).map((album) => {
            return backend.Album.clean(album)
          })
          artist.albums = albums
          return artist
        })
Eliot Berriot's avatar
Eliot Berriot committed
145
146
        self.isLoading = false
      })
147
    }, 500),
Eliot Berriot's avatar
Eliot Berriot committed
148
149
150
151
152
153
    selectPage: function (page) {
      this.page = page
    }
  },
  watch: {
    page () {
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
      this.updateQueryString()
      this.fetchData()
    },
    paginateBy () {
      this.updateQueryString()
      this.fetchData()
    },
    ordering () {
      this.updateQueryString()
      this.fetchData()
    },
    orderingDirection () {
      this.updateQueryString()
      this.fetchData()
    },
    query () {
      this.updateQueryString()
Eliot Berriot's avatar
Eliot Berriot committed
171
172
173
174
175
176
177
178
179
      this.fetchData()
    }
  }
}
</script>

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