Skip to content

Commit

Permalink
feat(user page): new basic Dashboard (#63)
Browse files Browse the repository at this point in the history
* New route /dashboard, new view UserDashboard

* Fetch user last prices & price count
  • Loading branch information
raphodn authored Dec 25, 2023
1 parent 7623a77 commit fe6d730
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 3 deletions.
8 changes: 5 additions & 3 deletions src/components/Header.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions src/routes.js
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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 }},
Expand Down
62 changes: 62 additions & 0 deletions src/views/UserDashboard.vue
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit fe6d730

Please sign in to comment.