feat(product list): new product list page ordered by popularity (uniq…

…ue_scans_n) (#113)

* New page ProductList ordered by top scanned

* Remove query filter

src/router.js

@@ -7,6 +7,7 @@ import UserSettings from './views/UserSettings.vue'
 import AddPriceHome from './views/AddPriceHome.vue'
 import AddPriceSingle from './views/AddPriceSingle.vue'
 import PriceList from './views/PriceList.vue'
+import ProductList from './views/ProductList.vue'
 import ProductDetail from './views/ProductDetail.vue'
 import LocationDetail from './views/LocationDetail.vue'
 import UserDetail from './views/UserDetail.vue'
@@ -22,6 +23,7 @@ const routes = [
   { path: '/add', name: 'add-price', component: AddPriceHome, meta: { title: 'Add a price', icon: 'mdi-plus', drawerMenu: true, requiresAuth: true }},
   { path: '/add/single', name: 'add-price-single', component: AddPriceSingle, meta: { title: 'Add a single price', requiresAuth: true }},
   { path: '/prices', name: 'prices', component: PriceList, meta: { title: 'Latest prices', icon: 'mdi-tag-multiple-outline', drawerMenu: true }},
+  { path: '/products', name: 'products', component: ProductList, meta: { title: 'Top products', icon: 'mdi-database-outline', drawerMenu: true }},
   { path: '/products/:id', name: 'product-detail', component: ProductDetail, meta: { title: 'Product detail' }},
   { path: '/locations/:id', name: 'location-detail', component: LocationDetail, meta: { title: 'Location detail' }},
   { path: '/users/:username', name: 'user-detail', component: UserDetail, meta: { title: 'User detail' }},

src/views/ProductList.vue

@@ -0,0 +1,53 @@
+<template>
+  <h1 class="mb-1">
+    Top products
+    <span class="text-caption">by popularity</span>
+    <v-progress-circular v-if="loading" indeterminate :size="30"></v-progress-circular>
+  </h1>
+
+  <v-row>
+    <v-col cols="12" sm="6" md="4" v-for="product in productList" :key="product">
+      <PriceCard :product="product" elevation="1" height="100%"></PriceCard>
+    </v-col>
+  </v-row>
+
+  <v-row v-if="productList.length < productTotal" class="mb-2">
+    <v-col align="center">
+      <v-btn size="small" @click="getProducts">Load more</v-btn>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import api from '../services/api'
+import PriceCard from '../components/PriceCard.vue'
+
+export default {
+  components: {
+    PriceCard,
+  },
+  data() {
+    return {
+      productList: [],
+      productTotal: null,
+      productPage: 0,
+      loading: false,
+    }
+  },
+  mounted() {
+    this.getProducts()
+  },
+  methods: {
+    getProducts() {
+      this.loading = true
+      this.productPage += 1
+      return api.getProducts({ page: this.productPage, order_by: '-unique_scans_n' })
+        .then((data) => {
+          this.productList.push(...data.items)
+          this.productTotal = data.total
+          this.loading = false
+        })
+    }
+  }
+}
+</script>