Skip to content

Commit

Permalink
feat(Home): reorganize home page sections. move buttons to header (#865)
Browse files Browse the repository at this point in the history
  • Loading branch information
raphodn authored Sep 28, 2024
1 parent eafb4e2 commit aa973b0
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 56 deletions.
27 changes: 17 additions & 10 deletions src/components/Header.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,21 @@
{{ APP_NAME }}
</span>
</v-app-bar-title>
<v-btn v-if="!$vuetify.display.smAndUp" icon="mdi-magnify" to="/search" :aria-label="$t('Common.Search')" />
<v-btn v-else prepend-icon="mdi-magnify" to="/search" :aria-label="$t('Common.Search')">
{{ $t('Common.Search') }}
</v-btn>
<v-btn v-if="!$vuetify.display.smAndUp" color="primary" icon="mdi-tag-plus-outline" to="/prices/add" :aria-label="$t('Common.AddPrice')" />
<v-btn v-else color="primary" prepend-icon="mdi-tag-plus-outline" to="/prices/add" :aria-label="$t('Common.AddPrice')">
{{ $t('Common.AddPrice') }}
</v-btn>
<template v-if="!username" #append>
<v-btn v-if="!$vuetify.display.smAndUp" icon="mdi-login" to="/sign-in" :aria-label="$t('Header.SignIn')" />
<v-btn v-else prepend-icon="mdi-login" to="/sign-in" :aria-label="$t('Header.SignIn')">
{{ $t('Header.SignIn') }}
<v-btn v-if="!$vuetify.display.smAndUp" icon="mdi-login" to="/sign-in" :aria-label="$t('Common.SignIn')" />
<v-btn v-else prepend-icon="mdi-login" to="/sign-in" :aria-label="$t('Common.SignIn')">
{{ $t('Common.SignIn') }}
</v-btn>
</template>
<template v-else #append>
<v-btn color="primary" icon="mdi-tag-plus-outline" to="/prices/add" :aria-label="$t('Home.AddPrice')" />
<v-menu scroll-strategy="close">
<template #activator="{ props }">
<v-btn v-if="!$vuetify.display.smAndUp" v-bind="props" icon="mdi-account-circle" />
Expand All @@ -27,14 +34,14 @@
{{ username }}
</v-list-item>
<v-divider class="d-sm-none" />
<v-list-item :slim="true" prepend-icon="mdi-view-dashboard-outline" to="/dashboard" :aria-label="$t('Header.Dashboard')">
{{ $t('Header.Dashboard') }}
<v-list-item :slim="true" prepend-icon="mdi-view-dashboard-outline" to="/dashboard" :aria-label="$t('Common.Dashboard')">
{{ $t('Common.Dashboard') }}
</v-list-item>
<v-list-item :slim="true" prepend-icon="mdi-cog-outline" to="/settings" :aria-label="$t('Header.Settings')">
{{ $t('Header.Settings') }}
<v-list-item :slim="true" prepend-icon="mdi-cog-outline" to="/settings" :aria-label="$t('Common.Settings')">
{{ $t('Common.Settings') }}
</v-list-item>
<v-list-item :slim="true" prepend-icon="mdi-logout" :aria-label="$t('Header.SignOut')" @click="signOut">
{{ $t('Header.SignOut') }}
<v-list-item :slim="true" prepend-icon="mdi-logout" :aria-label="$t('Common.SignOut')" @click="signOut">
{{ $t('Common.SignOut') }}
</v-list-item>
</v-list>
</v-menu>
Expand Down
10 changes: 10 additions & 0 deletions src/i18n/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@
"Country": "Country",
"Currency": "Currency",
"CurrencyMissing": "Currency missing",
"Dashboard": "Dashboard",
"Display": "Display",
"DisplayList": "List",
"DisplayPriceList": "List",
Expand Down Expand Up @@ -176,12 +177,18 @@
"OrderUserCountDESC": "User count",
"PriceCount": "{count} prices",
"PriceCreated": "Price created!",
"PricesMore": "More prices",
"ProductCount": "{count} products",
"ProofCount": "{count} proofs",
"Search": "Search",
"Settings": "Settings",
"SignInOFFAccount": "Sign in with your {url} account",
"SignedIn": "Signed in!",
"SignIn": "Sign in",
"SignOut": "Sign out",
"Share": "Share",
"Source": "Source",
"Stats": "Stats",
"Thanks": "Thanks",
"TopContributors": "Top contributors",
"TopLocations": "Top locations",
Expand Down Expand Up @@ -227,6 +234,7 @@
"SettingsUpdated": "Settings updated!",
"TodayPriceStat": "No prices added today | {todayPriceNumber} new prices added today | {todayPriceNumber} new prices added today!",
"Welcome": {
"Generic": "An open crowdsourced database of prices 🏷🍊💲",
"Subtitle": "An open crowdsourced database of food prices 🏷🍊💲",
"Title": "Welcome to {name}!"
}
Expand Down Expand Up @@ -418,6 +426,8 @@
},
"Stats": {
"Prices": "Prices",
"PricesToday": "Prices added today",
"PricesTotal": "Total prices",
"ProductsWithPrices": "Products with prices",
"Title": "Stats",
"Products": "Products",
Expand Down
75 changes: 29 additions & 46 deletions src/views/Home.vue
Original file line number Diff line number Diff line change
@@ -1,59 +1,29 @@
<template>
<h1 class="text-h5 mb-1">
<i18n-t keypath="Home.Welcome.Title" tag="span">
<template #name>
{{ APP_NAME }}
</template>
</i18n-t>
{{ $t('Home.Welcome.Generic') }}
</h1>
<p>{{ $t('Home.Welcome.Subtitle') }}</p>


<br>

<v-row>
<v-col cols="12" sm="8" md="6" lg="4">
<v-card
:title="$t('Home.SearchProduct')"
prepend-icon="mdi-magnify"
height="100%"
to="/search"
/>
<v-col sm="6" md="4" lg="3">
<v-card :title="todayPriceCount" :subtitle="$t('Stats.PricesToday')" variant="tonal" />
</v-col>
<v-col cols="12" sm="8" md="6" lg="4">
<v-card
:title="$t('Home.LatestPrices')"
prepend-icon="mdi-tag-multiple-outline"
to="/prices"
>
<template v-if="!loading" #subtitle>
<i18n-t keypath="Home.TodayPriceStat" :plural="todayPriceCount" tag="span">
<template #todayPriceNumber>
<span id="price-count">{{ todayPriceCount }}</span>
</template>
</i18n-t>
</template>
</v-card>
<v-col sm="6" md="4" lg="3">
<v-card :title="totalPriceCount" :subtitle="$t('Stats.PricesTotal')" variant="tonal" />
</v-col>
</v-row>

<br>

<v-row>
<v-col cols="12" sm="8" md="6" lg="4">
<v-card
:title="$t('Home.AddPrice')"
prepend-icon="mdi-tag-plus-outline"
color="primary"
variant="outlined"
elevation="1"
to="/prices/add"
>
<template v-if="!username" #subtitle>
<i18n-t keypath="Common.SignInOFFAccount" tag="span">
<template #url>
<OpenFoodFactsLink display="link" />
</template>
</i18n-t>
</template>
</v-card>
<v-col v-for="price in latestPriceList" :key="price" cols="12" sm="6" md="4">
<PriceCard :price="price" :product="price.product" elevation="1" height="100%" />
</v-col>
<v-col cols="12" sm="6" md="4" align="center" justify="center">
<v-btn to="/prices" prepend-icon="mdi-tag-multiple-outline" append-icon="mdi-arrow-right">
{{ $t('Home.LatestPrices') }}
</v-btn>
</v-col>
</v-row>

Expand Down Expand Up @@ -83,12 +53,15 @@ import utils from '../utils.js'
export default {
components: {
OpenFoodFactsLink: defineAsyncComponent(() => import('../components/OpenFoodFactsLink.vue')),
PriceCard: defineAsyncComponent(() => import('../components/PriceCard.vue'))
},
data() {
return {
APP_NAME: constants.APP_NAME,
// data
latestPriceList: [],
todayPriceCount: null,
totalPriceCount: null,
loading: false,
// success messages
proofSingleSuccessMessage: false,
Expand All @@ -108,9 +81,19 @@ export default {
if (this.$route.query.settingsSuccess === 'true') {
this.settingsSuccessMessage = true
}
this.getPrices()
this.getTodayPriceCount()
},
methods: {
getPrices() {
this.loading = true
return api.getPrices({ size: 5 })
.then((data) => {
this.latestPriceList.push(...data.items)
this.totalPriceCount = data.total
this.loading = false
})
},
getTodayPriceCount() {
this.loading = true
return api.getPrices({ created__gte: utils.currentStartOfDay(), size: 1 })
Expand Down

0 comments on commit aa973b0

Please sign in to comment.