From 0a8c24ee5863fc3630dd3f5908097e3874363592 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Odini?= <raphodn@users.noreply.github.com>
Date: Sun, 27 Oct 2024 12:19:37 +0100
Subject: [PATCH] feat(Settings page): new Settings page easily accessible
 (#950)

---
 src/components/Footer.vue  |  12 +--
 src/components/Header.vue  |   2 +-
 src/constants.js           |   1 +
 src/i18n/locales/en.json   |   7 +-
 src/router.js              |   3 +-
 src/views/Settings.vue     | 157 +++++++++++++++++++++++++++++++++++++
 src/views/UserSettings.vue |  33 --------
 7 files changed, 173 insertions(+), 42 deletions(-)
 create mode 100644 src/views/Settings.vue

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index d04812081f..1851997cdc 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -20,17 +20,17 @@
       </v-col>
       <v-col cols="12" md="6" align="center">
         <v-btn class="mx-2" variant="text" prepend-icon="mdi-chart-box-outline" to="/stats">
-          {{ $t('Footer.Stats') }}
+          {{ $t('Common.Stats') }}
+        </v-btn>
+        <v-btn class="mx-2" variant="text" prepend-icon="mdi-cog-outline" to="/settings">
+          {{ $t('Common.Settings') }}
         </v-btn>
         <v-btn class="mx-2" variant="text" prepend-icon="mdi-information-outline" to="/about">
-          {{ $t('Footer.About') }}
+          {{ $t('Common.About') }}
         </v-btn>
         <v-btn class="mx-2" variant="text" prepend-icon="mdi-github" :href="APP_GITHUB_FRONTEND_URL" target="_blank">
           {{ GITHUB_NAME }}
         </v-btn>
-        <v-btn class="mx-2" variant="text" :prepend-icon="themeInfo.icon" @click="swapTheme">
-          {{ $t(themeInfo.label) }}
-        </v-btn>
       </v-col>
     </v-row>
   </v-footer>
@@ -38,10 +38,10 @@
 
 <script>
 import { defineAsyncComponent } from 'vue'
-import constants from '../constants'
 import { useTheme } from 'vuetify'
 import { mapStores } from 'pinia'
 import { useAppStore } from '../store'
+import constants from '../constants'
 
 export default {
   components: {
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 7ddcb62683..49adf8c195 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -38,7 +38,7 @@
           <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('Common.Settings')">
+          <v-list-item :slim="true" prepend-icon="mdi-cog-outline" to="/dashboard/settings" :aria-label="$t('Common.Settings')">
             {{ $t('Common.Settings') }}
           </v-list-item>
           <v-list-item :slim="true" prepend-icon="mdi-logout" :aria-label="$t('Common.SignOut')" @click="signOut">
diff --git a/src/constants.js b/src/constants.js
index 9bc8aa8f39..318af613d2 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -33,6 +33,7 @@ export default {
   OFF_WIKI_APP_URL: 'https://wiki.openfoodfacts.org/Project:Open-Prices',
   OFF_WIKI_GDPR_REQUEST_URL: 'https://wiki.openfoodfacts.org/GDPR_request',
   OFF_API_URL: 'https://world.openfoodfacts.org/api/v2/product',
+  OFF_CROWDIN_URL: 'https://translate.openfoodfacts.org',
   OBF_NAME: OBF_NAME,
   OBF_URL: 'https://world.openbeautyfacts.org',
   OBF_ICON: OBF_ICON,
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index b29e6bf96b..f3eb2d19a0 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -170,7 +170,7 @@
 		"DisplayPriceChart": "Chart",
 		"Label": "Label",
 		"Labels": "Labels",
-		"Language": "Languages",
+		"Language": "Language",
 		"Languages": "Languages",
 		"LatestPrices": "Latest prices",
 		"LatestProofs": "Latest proofs",
@@ -186,7 +186,9 @@
 		"Example": "Example",
 		"Examples": "Examples",
 		"ExampleWithColon": "Example:",
+		"ExampleWithColonAndValue": "Example: {value}",
 		"ExamplesWithColon": "Examples:",
+		"ExamplesWithColonAndValue": "Examples: {value}",
 		"Edit": "Edit",
 		"Filter": "Filter",
 		"FilterProductWithPriceCount": "With a price",
@@ -469,6 +471,9 @@
 		"Search": {
 			"Title": "Search"
 		},
+		"Settings": {
+			"Title": "Settings"
+		},
 		"SignIn": {
 			"Title": "Sign in"
 		},
diff --git a/src/router.js b/src/router.js
index 6beef6acf4..cb71871b3b 100644
--- a/src/router.js
+++ b/src/router.js
@@ -9,7 +9,7 @@ const routes = [
   { path: '/dashboard', name: 'dashboard', component: () => import('./views/UserDashboard.vue'), meta: { title: 'Dashboard', icon: 'mdi-view-dashboard-outline', drawerMenu: true, requiresAuth: true, breadcrumbs: [{title: 'Dashboard', disabled: true }] } },
   { path: '/dashboard/prices', name: 'dashboard-prices', component: () => import('./views/UserDashboardPriceList.vue'), meta: { title: 'MyPrices', requiresAuth: true, breadcrumbs: [{title: 'Dashboard', disabled: false, to: '/dashboard' }, {title: 'MyPrices', disabled: true}] } },
   { path: '/dashboard/proofs', name: 'dashboard-proofs', component: () => import('./views/UserDashboardProofList.vue'), meta: { title: 'MyProofs', requiresAuth: true, breadcrumbs: [{title: 'Dashboard', disabled: false, to: '/dashboard' }, {title: 'MyProofs', disabled: true}] } },
-  { path: '/settings', name: 'settings', component: () => import('./views/UserSettings.vue'), meta: { title: 'Settings', requiresAuth: true } },
+  { path: '/dashboard/settings', name: 'dashboard-settings', component: () => import('./views/UserSettings.vue'), meta: { title: 'Settings', requiresAuth: true } },
   { path: '/prices/add', name: 'add-price', component: () => import('./views/AddPriceHome.vue'), meta: { title: 'AddPrice', requiresAuth: true }},
   { path: '/prices/add/single', name: 'add-price-single', component: () => import('./views/AddPriceSingle.vue'), meta: { title: 'Add a single price (price tag)', requiresAuth: true }},
   { path: '/prices/add/multiple', name: 'add-price-multiple', component: () => import('./views/AddPriceMultiple.vue'), meta: { title: 'AddPrice', icon: 'mdi-tag-plus-outline', drawerMenu: true, color: 'primary', requiresAuth: true }},
@@ -33,6 +33,7 @@ const routes = [
   { path: '/users', name: 'users', component: () => import('./views/UserList.vue'), meta: { title: 'TopContributors', icon: 'mdi-account-star-outline', drawerMenu: true }},
   { path: '/users/:username', name: 'user-detail', component: () => import('./views/UserDetail.vue'), meta: { title: 'User detail' }},
   { path: '/stats', name: 'stats', component: () => import('./views/Stats.vue'), meta: { title: 'Stats', icon: 'mdi-chart-box-outline', drawerMenu: true }},
+  { path: '/settings', name: 'settings', component: () => import('./views/Settings.vue'), meta: { title: 'Settings', icon: 'mdi-cog-outline', drawerMenu: true, breadcrumbs: [{title: 'Settings', disabled: true }] }},
   { path: '/about', name: 'about', component: () => import('./views/About.vue'), meta: { title: 'About', icon: 'mdi-information-outline', drawerMenu: true }},
   // Why this redirect?
   // The app used to be available at https://prices.openfoodfacts.org/app
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
new file mode 100644
index 0000000000..5fb90a4902
--- /dev/null
+++ b/src/views/Settings.vue
@@ -0,0 +1,157 @@
+<template>
+  <v-row>
+    <v-col cols="12" sm="6">
+      <v-card :title="$t('UserSettings.DisplayTitle')" prepend-icon="mdi-laptop">
+        <v-divider />
+        <v-card-text>
+          <v-btn :prepend-icon="preferedThemeInfo.icon" @click="swapTheme">
+            {{ $t(preferedThemeInfo.label) }}
+          </v-btn>
+          <!-- Country -->
+          <h3 class="mt-4 mb-1">
+            {{ $t('Common.Country') }}
+          </h3>
+          <v-autocomplete
+            v-model="appStore.user.country"
+            :label="$t('Common.Country')"
+            :items="countryList"
+            item-title="native"
+            item-value="code"
+            hide-details="auto"
+          />
+          <!-- Language -->
+          <h3 class="mt-4 mb-1">
+            {{ $t('Common.Language') }}
+          </h3>
+          <v-autocomplete
+            v-model="appStore.user.language"
+            :label="$t('Common.Language')"
+            :items="languageList"
+            item-title="native"
+            item-value="code"
+            hide-details="auto"
+          />
+          <p class="mt-1">
+            <a :href="OFF_CROWDIN_URL" target="_blank">
+              {{ $t('UserSettings.TranslationHelp') }}
+              <v-icon size="small" icon="mdi-open-in-new" />
+            </a>
+          </p>
+          <!-- Products -->
+          <h3 class="mt-4 mb-1">
+            {{ $t('Common.Products') }}
+          </h3>
+          <v-switch
+            v-model="appStore.user.product_display_barcode"
+            class="mb-4"
+            color="success"
+            :label="$t('UserSettings.ProductDisplayBarcode')"
+            :hint="$t('Common.ExampleWithColonAndValue', { value: '1234567890123' })"
+            density="compact"
+            persistent-hint
+            hide-details="auto"
+          />
+          <v-switch
+            v-model="appStore.user.product_display_category_tag"
+            color="success"
+            :label="$t('UserSettings.ProductDisplayCategoryTag')"
+            :hint="$t('Common.ExampleWithColonAndValue', { value: 'en:oranges' })"
+            density="compact"
+            persistent-hint
+            hide-details="auto"
+          />
+          <!-- Locations -->
+          <h3 class="mt-4 mb-1">
+            {{ $t('Common.Locations') }}
+          </h3>
+          <v-switch
+            v-model="appStore.user.location_display_osm_id"
+            color="success"
+            :label="$t('UserSettings.LocationDisplayOSMID')"
+            :hint="$t('Common.ExampleWithColonAndValue', { value: 'N652825274' })"
+            density="compact"
+            persistent-hint
+            hide-details="auto"
+          />
+        </v-card-text>
+      </v-card>
+    </v-col>
+
+    <!-- Prices -->
+    <v-col cols="12" sm="6">
+      <v-card :title="$t('Common.Prices')" prepend-icon="mdi-tag-multiple-outline">
+        <v-divider />
+        <v-card-text>
+          <h3 class="mb-1">
+            {{ $t('UserSettings.FavoriteCurrencies') }}
+          </h3>
+          <v-autocomplete
+            v-model="appStore.user.favorite_currencies"
+            :label="$t('UserSettings.CurrencyLabel')"
+            :items="currencyList"
+            :rules="[v => !!(v && v.length) || $t('UserSettings.CurrencyRequired')]"
+            chips
+            closable-chips
+            multiple
+            hide-details="auto"
+          />
+        </v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import { useTheme } from 'vuetify'
+import { mapStores } from 'pinia'
+import { useAppStore } from '../store'
+import countryList from '../i18n/data/countries.json'
+import languageList from '../i18n/data/languages.json'
+import localeManager from '../i18n/localeManager.js'
+import constants from '../constants'
+
+export default {
+  data() {
+    return {
+      OFF_CROWDIN_URL: constants.OFF_CROWDIN_URL,
+      theme: useTheme(),
+      countryList,
+      languageList,
+      // currencyList,
+    }
+  },
+  computed: {
+    ...mapStores(useAppStore),
+    preferedThemeInfo() {
+      if (this.theme.global.name === 'light') {
+        return {
+          icon: 'mdi-white-balance-sunny',
+          label: 'Theme.LightMode' 
+        }
+      }
+      return {
+        icon: 'mdi-moon-waning-crescent',
+        label: 'Theme.DarkMode' 
+      }
+    },
+    currencyList() {
+      return [...new Set(this.countryList
+        .map(country => country.currency)
+        .flat()
+        .filter(currency => currency !== null && currency.length !== 0))]
+      }
+  },
+  watch: {
+    'appStore.user.language': function (newLanguage, oldLanguage) {  // eslint-disable-line no-unused-vars
+      localeManager.changeLanguage(newLanguage)
+    }
+  },
+  methods: {
+    swapTheme() {
+      const newTheme = this.theme.global.name === 'light' ? 'dark' : 'light'
+      this.appStore.user.preferedTheme = newTheme
+      this.theme.global.name = newTheme
+    }
+  }
+}
+</script>
diff --git a/src/views/UserSettings.vue b/src/views/UserSettings.vue
index b69e36216e..ad78ef0801 100644
--- a/src/views/UserSettings.vue
+++ b/src/views/UserSettings.vue
@@ -45,39 +45,6 @@
                 <v-icon size="small" icon="mdi-open-in-new" />
               </a>
             </p>
-            <!-- Products -->
-            <h3 class="mt-4 mb-1">
-              {{ $t('Common.Products') }}
-            </h3>
-            <v-checkbox
-              v-model="appStore.user.product_display_barcode"
-              class="mb-4"
-              :label="$t('UserSettings.ProductDisplayBarcode')"
-              :hint="$t('Common.ExampleWithColon') + ' 1234567890123'"
-              density="compact"
-              persistent-hint
-              hide-details="auto"
-            />
-            <v-checkbox
-              v-model="appStore.user.product_display_category_tag"
-              :label="$t('UserSettings.ProductDisplayCategoryTag')"
-              :hint="$t('Common.ExampleWithColon') + ' en:oranges'"
-              density="compact"
-              persistent-hint
-              hide-details="auto"
-            />
-            <!-- Locations -->
-            <h3 class="mt-4 mb-1">
-              {{ $t('Common.Locations') }}
-            </h3>
-            <v-checkbox
-              v-model="appStore.user.location_display_osm_id"
-              :label="$t('UserSettings.LocationDisplayOSMID')"
-              :hint="$t('Common.ExampleWithColon') + ' W398056954'"
-              density="compact"
-              persistent-hint
-              hide-details="auto"
-            />
           </v-card-text>
         </v-card>
       </v-col>