See #50: pagination, search and ordering on artist browsing

front/src/components/library/Artists.vue

@@ -1,11 +1,40 @@
 <template>
   <div>
-    <div v-if="isLoading" class="ui vertical segment">
-      <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
-    </div>
-    <div v-if="result" class="ui vertical stripe segment">
+    <div class="ui vertical stripe segment">
       <h2 class="ui header">Browsing artists</h2>
-      <div class="ui stackable three column grid">
+      <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>
+      <div v-if="result" class="ui stackable three column grid">
         <div
           v-if="result.results.length > 0"
           v-for="artist in result.results"
@@ -28,6 +57,8 @@
 </template>
 
 <script>
+import _ from 'lodash'
+import $ from 'jquery'
 
 import config from '@/config'
 import backend from '@/audio/backend'
@@ -38,31 +69,72 @@ import Pagination from '@/components/Pagination'
 const FETCH_URL = config.API_URL + 'artists/'
 
 export default {
+  props: {
+    defaultOrdering: {type: String, required: false, default: '-creation_date'},
+    defaultQuery: {type: String, required: false, default: ''},
+    defaultPage: {required: false, default: 1},
+    defaultPaginateBy: {required: false, default: 12}
+  },
   components: {
     ArtistCard,
     Pagination
   },
   data () {
+    let defaultOrdering = this.getOrderingFromString(this.defaultOrdering)
     return {
       isLoading: true,
       result: null,
-      page: 1,
-      orderBy: 'name',
-      paginateBy: 12
+      page: parseInt(this.defaultPage),
+      query: this.defaultQuery,
+      paginateBy: parseInt(this.defaultPaginateBy),
+      orderingDirection: defaultOrdering.direction,
+      ordering: defaultOrdering.field,
+      orderingOptions: [
+        ['creation_date', 'Creation date'],
+        ['name', 'Name']
+      ]
     }
   },
   created () {
     this.fetchData()
   },
+  mounted () {
+    $('.ui.dropdown').dropdown()
+  },
   methods: {
-    fetchData () {
+    getOrderingFromString (s) {
+      let parts = s.split('-')
+      if (parts.length > 1) {
+        return {
+          direction: '-',
+          field: parts.slice(1).join('-')
+        }
+      } else {
+        return {
+          direction: '',
+          field: s
+        }
+      }
+    },
+    updateQueryString: function () {
+      this.$router.replace({
+        query: {
+          query: this.query,
+          page: this.page,
+          paginateBy: this.paginateBy,
+          ordering: [this.orderingDirection, this.ordering].join('')
+        }
+      })
+    },
+    fetchData: _.debounce(function () {
       var self = this
       this.isLoading = true
       let url = FETCH_URL
       let params = {
         page: this.page,
         page_size: this.paginateBy,
-        order_by: 'name'
+        name__icontains: this.query,
+        ordering: [this.orderingDirection, this.ordering].join('')
       }
       logger.default.debug('Fetching artists')
       this.$http.get(url, {params: params}).then((response) => {
@@ -76,13 +148,30 @@ export default {
         })
         self.isLoading = false
       })
-    },
+    }, 500),
     selectPage: function (page) {
       this.page = page
     }
   },
   watch: {
     page () {
+      this.updateQueryString()
+      this.fetchData()
+    },
+    paginateBy () {
+      this.updateQueryString()
+      this.fetchData()
+    },
+    ordering () {
+      this.updateQueryString()
+      this.fetchData()
+    },
+    orderingDirection () {
+      this.updateQueryString()
+      this.fetchData()
+    },
+    query () {
+      this.updateQueryString()
       this.fetchData()
     }
   }