Artists.vue 7.59 KB
Newer Older
Eliot Berriot's avatar
Eliot Berriot committed
1
<template>
2
3
  <main v-title="labels.title">
    <section class="ui vertical stripe segment">
Eliot Berriot's avatar
Eliot Berriot committed
4
      <h2 class="ui header">
5
        <translate translate-context="Content/Artist/Title">Browsing artists</translate>
Eliot Berriot's avatar
Eliot Berriot committed
6
      </h2>
7
      <form :class="['ui', {'loading': isLoading}, 'form']" @submit.prevent="updatePage();updateQueryString();fetchData()">
8
9
        <div class="fields">
          <div class="field">
10
            <label for="artist-search">
jovuit's avatar
jovuit committed
11
              <translate translate-context="Content/Search/Input.Label/Noun">Artist name</translate>
Eliot Berriot's avatar
Eliot Berriot committed
12
            </label>
13
            <div class="ui action input">
14
              <input id="artist-search" type="text" name="search" v-model="query" :placeholder="labels.searchPlaceholder"/>
15
16
17
18
              <button class="ui icon button" type="submit" :aria-label="$pgettext('Content/Search/Input.Label/Noun', 'Search')">
                <i class="search icon"></i>
              </button>
            </div>
19
          </div>
20
          <div class="field">
21
            <label for="tags-search"><translate translate-context="*/*/*/Noun">Tags</translate></label>
22
23
            <tags-selector v-model="tags"></tags-selector>
          </div>
24
          <div class="field">
25
26
            <label for="artist-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
            <select id="artist-ordering" class="ui dropdown" v-model="ordering">
27
              <option v-for="option in orderingOptions" :value="option[0]">
28
                {{ sharedLabels.filters[option[1]] }}
29
30
31
32
              </option>
            </select>
          </div>
          <div class="field">
33
34
            <label for="artist-ordering-direction"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering direction</translate></label>
            <select id="artist-ordering-direction" class="ui dropdown" v-model="orderingDirection">
35
36
              <option value="+"><translate translate-context="Content/Search/Dropdown">Ascending</translate></option>
              <option value="-"><translate translate-context="Content/Search/Dropdown">Descending</translate></option>
37
38
39
            </select>
          </div>
          <div class="field">
40
41
            <label for="artist-results"><translate translate-context="Content/Search/Dropdown.Label/Noun">Results per page</translate></label>
            <select id="artist-results" class="ui dropdown" v-model="paginateBy">
42
              <option :value="parseInt(12)">12</option>
43
              <option :value="parseInt(30)">30</option>
44
45
46
              <option :value="parseInt(50)">50</option>
            </select>
          </div>
47
          <div class="field">
48
49
            <span id="excludeHeader">Exclude Compilation Artists</span>
              <div id="excludeCompilation" class="ui toggle checkbox">
50
              <input id="exclude-compilation" v-model="excludeCompilation" true-value="true" false-value="null" type="checkbox">
51
              <label for="exclude-compilation" class="visually-hidden"><translate translate-context="Content/Search/Checkbox/Noun">Exclude Compilation Artists</translate></label>
52
53
            </div>
          </div>
54
        </div>
55
      </form>
56
      <div class="ui hidden divider"></div>
Eliot Berriot's avatar
Eliot Berriot committed
57
      <div v-if="result && result.results.length > 0" class="ui five app-cards cards">
58
59
        <div v-if="isLoading" class="ui inverted active dimmer">
          <div class="ui loader"></div>
Eliot Berriot's avatar
Eliot Berriot committed
60
        </div>
61
        <artist-card :artist="artist" v-for="artist in result.results" :key="artist.id"></artist-card>
Eliot Berriot's avatar
Eliot Berriot committed
62
      </div>
63
64
65
66
67
68
69
70
71
72
      <div v-else-if="!isLoading" class="ui placeholder segment sixteen wide column" style="text-align: center; display: flex; align-items: center">
        <div class="ui icon header">
          <i class="compact disc icon"></i>
          <translate translate-context="Content/Artists/Placeholder">
            No results matching your query
          </translate>
        </div>
        <router-link
          v-if="$store.state.auth.authenticated"
          :to="{name: 'content.index'}"
Agate's avatar
Agate committed
73
          class="ui success button labeled icon">
74
75
76
77
78
79
          <i class="upload icon"></i>
          <translate translate-context="Content/*/Verb">
              Add some music
          </translate>
        </router-link>
      </div>
Eliot Berriot's avatar
Eliot Berriot committed
80
81
      <div class="ui center aligned basic segment">
        <pagination
82
          v-if="result && result.count > paginateBy"
Eliot Berriot's avatar
Eliot Berriot committed
83
84
85
86
87
88
          @page-changed="selectPage"
          :current="page"
          :paginate-by="paginateBy"
          :total="result.count"
          ></pagination>
      </div>
89
90
    </section>
  </main>
Eliot Berriot's avatar
Eliot Berriot committed
91
92
93
</template>

<script>
94
import qs from 'qs'
95
import axios from "axios"
96
import _ from "@/lodash"
97
import $ from "jquery"
Eliot Berriot's avatar
Eliot Berriot committed
98

99
import logger from "@/logging"
100

101
102
103
104
105
import OrderingMixin from "@/components/mixins/Ordering"
import PaginationMixin from "@/components/mixins/Pagination"
import TranslationsMixin from "@/components/mixins/Translations"
import ArtistCard from "@/components/audio/artist/Card"
import Pagination from "@/components/Pagination"
106
import TagsSelector from '@/components/library/TagsSelector'
Eliot Berriot's avatar
Eliot Berriot committed
107

108
const FETCH_URL = "artists/"
Eliot Berriot's avatar
Eliot Berriot committed
109
110

export default {
111
  mixins: [OrderingMixin, PaginationMixin, TranslationsMixin],
112
  props: {
113
114
    defaultQuery: { type: String, required: false, default: "" },
    defaultTags: { type: Array, required: false, default: () => { return [] } },
115
    scope: { type: String, required: false, default: "all" },
116
  },
Eliot Berriot's avatar
Eliot Berriot committed
117
118
  components: {
    ArtistCard,
119
120
    Pagination,
    TagsSelector,
Eliot Berriot's avatar
Eliot Berriot committed
121
  },
122
  data() {
Eliot Berriot's avatar
Eliot Berriot committed
123
124
125
    return {
      isLoading: true,
      result: null,
126
      excludeCompilation: true,
127
128
      page: parseInt(this.defaultPage),
      query: this.defaultQuery,
129
      tags: (this.defaultTags || []).filter((t) => { return t.length > 0 }),
130
      orderingOptions: [["creation_date", "creation_date"], ["name", "name"]]
Eliot Berriot's avatar
Eliot Berriot committed
131
132
    }
  },
133
  created() {
Eliot Berriot's avatar
Eliot Berriot committed
134
135
    this.fetchData()
  },
136
137
  mounted() {
    $(".ui.dropdown").dropdown()
138
  },
Eliot Berriot's avatar
Eliot Berriot committed
139
  computed: {
140
    labels() {
jovuit's avatar
jovuit committed
141
      let searchPlaceholder = this.$pgettext('Content/Search/Input.Placeholder', "Search…")
jovuit's avatar
jovuit committed
142
      let title = this.$pgettext('*/*/*/Noun', "Artists")
Eliot Berriot's avatar
Eliot Berriot committed
143
144
145
146
147
148
      return {
        searchPlaceholder,
        title
      }
    }
  },
Eliot Berriot's avatar
Eliot Berriot committed
149
  methods: {
150
    updateQueryString: function() {
151
152
153
154
155
      history.pushState(
        {},
        null,
        this.$route.path + '?' + new URLSearchParams(
          {
156
157
          query: this.query,
          page: this.page,
158
          tag: this.tags,
159
          paginateBy: this.paginateBy,
160
          ordering: this.getOrderingAsString()
161
162
        }).toString()
      )
163
164
    },
    fetchData: function() {
Eliot Berriot's avatar
Eliot Berriot committed
165
166
167
168
      var self = this
      this.isLoading = true
      let url = FETCH_URL
      let params = {
169
        scope: this.scope,
Eliot Berriot's avatar
Eliot Berriot committed
170
171
        page: this.page,
        page_size: this.paginateBy,
172
        has_albums: this.excludeCompilation,
173
        q: this.query,
174
        ordering: this.getOrderingAsString(),
175
176
        playable: "true",
        tag: this.tags,
177
        include_channels: "true",
Eliot Berriot's avatar
Eliot Berriot committed
178
      }
179
      logger.default.debug("Fetching artists")
180
181
182
183
184
185
186
187
188
      axios.get(
        url,
        {
          params: params,
          paramsSerializer: function(params) {
            return qs.stringify(params, { indices: false })
          }
        }
      ).then(response => {
Eliot Berriot's avatar
Eliot Berriot committed
189
190
        self.result = response.data
        self.isLoading = false
191
192
193
      }, error => {
        self.result = null
        self.isLoading = false
Eliot Berriot's avatar
Eliot Berriot committed
194
      })
195
    },
196
    selectPage: function(page) {
Eliot Berriot's avatar
Eliot Berriot committed
197
      this.page = page
198
199
200
    },
    updatePage() {
      this.page = this.defaultPage
Eliot Berriot's avatar
Eliot Berriot committed
201
202
203
    }
  },
  watch: {
204
    page() {
205
206
207
      this.updateQueryString()
      this.fetchData()
    },
208
209
    "$store.state.moderation.lastUpdate": function () {
      this.fetchData()
210
211
212
    },
    excludeCompilation() {
      this.fetchData()
Eliot Berriot's avatar
Eliot Berriot committed
213
214
215
216
    }
  }
}
</script>