feat(user page): new basic Dashboard (#63)

* New route /dashboard, new view UserDashboard

* Fetch user last prices & price count

src/components/Header.vue

@@ -4,12 +4,14 @@
     <v-app-bar-title>Open Prices</v-app-bar-title>
     <template v-slot:append>
       <v-btn v-if="!username" to="/sign-in" icon="mdi-login"></v-btn>
-      <v-menu>
+      <v-menu v-if="username">
         <template v-slot:activator="{ props }">
-          <v-btn v-if="username" v-bind="props" icon="mdi-account-circle"></v-btn>
+          <v-btn v-bind="props" icon="mdi-account-circle"></v-btn>
         </template>
         <v-list>
-          <v-list-item prepend-icon="mdi-account">{{  username }}</v-list-item>
+          <v-list-item prepend-icon="mdi-account" disabled>{{  username }}</v-list-item>
+          <v-divider></v-divider>
+          <v-list-item prepend-icon="mdi-view-dashboard-outline" to="/dashboard">Dashboard</v-list-item>
           <v-list-item prepend-icon="mdi-logout" @click="signOut">Sign out</v-list-item>
         </v-list>
       </v-menu>

src/routes.js

@@ -1,5 +1,6 @@
 import Home from './views/Home.vue'
 import SignIn from './views/SignIn.vue'
+import UserDashboard from './views/UserDashboard.vue'
 import AddPriceHome from './views/AddPriceHome.vue'
 import AddPriceSingle from './views/AddPriceSingle.vue'
 import PriceList from './views/PriceList.vue'
@@ -12,6 +13,7 @@ import NotFound from './views/NotFound.vue'
 export let routes = [
   { path: '/', name: 'home', component: Home, meta: { title: 'Home', icon: 'mdi-home', drawerMenu: true } },
   { path: '/sign-in', name: 'sign-in', component: SignIn, meta: { title: 'Sign in', icon: 'mdi-login', drawerMenu: true, requiresAuth: false } },
+  { path: '/dashboard', name: 'dashboard', component: UserDashboard, meta: { title: 'Dashboard', requiresAuth: true } },
   { 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: 'Last prices', icon: 'mdi-tag-multiple-outline', drawerMenu: true }},

src/views/UserDashboard.vue

@@ -0,0 +1,62 @@
+<template>
+  <h1 class="mb-1">
+    Dashboard
+    <v-progress-circular v-if="loading" indeterminate :size="30"></v-progress-circular>
+  </h1>
+
+  <v-row>
+    <v-col cols="12" sm="6">
+      <v-card :title="username" prepend-icon="mdi-account"></v-card>
+    </v-col>
+  </v-row>
+
+  <br />
+
+  <h2 class="mb-1">
+    Last prices
+    <small>{{ userPriceCount }}</small>
+  </h2>
+
+  <v-row>
+    <v-col cols="12" sm="6" md="4" v-for="price in userPriceList" :key="price">
+      <PriceCard :price="price" :product="price.product" elevation="1" height="100%"></PriceCard>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import api from '../services/api'
+import PriceCard from '../components/PriceCard.vue'
+
+export default {
+  components: {
+    PriceCard,
+  },
+  data() {
+    return {
+      userPriceList: [],
+      userPriceCount: null,
+      loading: false,
+    }
+  },
+  computed: {
+    username() {
+      return api.getUsername()
+    },
+  },
+  mounted() {
+    this.getUserPrices()
+  },
+  methods: {
+    getUserPrices() {
+      this.loading = true
+      return api.getPrices({ owner: this.username, order_by: '-created' })
+        .then((data) => {
+          this.userPriceList = data.items
+          this.userPriceCount = data.total
+          this.loading = false
+        })
+    },
+  }
+}
+</script>