Merge branch 'master' into ttalex/contribution-assistant-barcode-api-…

…cleanup
openfoodfacts · Dec 8, 2024 · 8e20c7d · 8e20c7d
2 parents efc7f62 + e8256a0
commit 8e20c7d
Show file tree

Hide file tree

Showing 168 changed files with 5,028 additions and 4,450 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,39 @@
 # Changelog
 
+## [1.96.3](https://github.com/openfoodfacts/open-prices-frontend/compare/v1.96.2...v1.96.3) (2024-12-04)
+
+
+### Technical
+
+* **l10n:** add new pluralization translations. Start cleaning unused translations ([#1079](https://github.com/openfoodfacts/open-prices-frontend/issues/1079)) ([04c384b](https://github.com/openfoodfacts/open-prices-frontend/commit/04c384b98c0ea4be12d3018311142bf80b6a73eb))
+* **l10n:** New Crowdin translations to review and merge ([#1081](https://github.com/openfoodfacts/open-prices-frontend/issues/1081)) ([e00fa3e](https://github.com/openfoodfacts/open-prices-frontend/commit/e00fa3e0e8ef4cfc3c39f0633e5910da39640b49))
+* **Sign in:** improve UI (columns, spacing, password visibility toggle) ([#1087](https://github.com/openfoodfacts/open-prices-frontend/issues/1087)) ([8bbb135](https://github.com/openfoodfacts/open-prices-frontend/commit/8bbb135d03b2bb7cd2d1bc11974d79cf687f07bc))
+
+## [1.96.2](https://github.com/openfoodfacts/open-prices-frontend/compare/v1.96.1...v1.96.2) (2024-12-02)
+
+
+### Bug Fixes
+
+* **Price add:** show PriceAlreadyUploadedListCard footer only for receipts. ref [#1074](https://github.com/openfoodfacts/open-prices-frontend/issues/1074) ([93585fa](https://github.com/openfoodfacts/open-prices-frontend/commit/93585fac1c6fe9309adba947a1244abcc6d51a07))
+
+
+### Technical
+
+* **l10n:** New Crowdin translations to review and merge ([#1066](https://github.com/openfoodfacts/open-prices-frontend/issues/1066)) ([f5578e9](https://github.com/openfoodfacts/open-prices-frontend/commit/f5578e9cc1b5cdd95c77c5f9e3e7ab8cd160ec50))
+* **Price add:** new PriceAlreadyUploadedListCard component ([382cbff](https://github.com/openfoodfacts/open-prices-frontend/commit/382cbff21d364b7aa109749c2f9674287d0e127e))
+* **Price add:** show count & sum of already added prices (receipts) ([#1074](https://github.com/openfoodfacts/open-prices-frontend/issues/1074)) ([9be00ed](https://github.com/openfoodfacts/open-prices-frontend/commit/9be00ed747c0e8ab1bbea1215961cb659b908c3c))
+* **Price add:** show receipt personal data in already added prices footer ([#1076](https://github.com/openfoodfacts/open-prices-frontend/issues/1076)) ([4c8c337](https://github.com/openfoodfacts/open-prices-frontend/commit/4c8c33774d6678a4951fe845698406687db4780e))
+* **Proof card:** new components for receipt price_count & price_total ([#1075](https://github.com/openfoodfacts/open-prices-frontend/issues/1075)) ([ad3618a](https://github.com/openfoodfacts/open-prices-frontend/commit/ad3618aa4e857b29ad7185d631b8e38d04e26fd2))
+
+## [1.96.1](https://github.com/openfoodfacts/open-prices-frontend/compare/v1.96.0...v1.96.1) (2024-12-01)
+
+
+### Technical
+
+* **UI:** gain some vertical space above submit button ([#1070](https://github.com/openfoodfacts/open-prices-frontend/issues/1070)) ([eff962a](https://github.com/openfoodfacts/open-prices-frontend/commit/eff962af99d7721187fb112ef09c6d7eb12834eb))
+* **UI:** On new price, scroll UI to the form ([#1072](https://github.com/openfoodfacts/open-prices-frontend/issues/1072)) ([50bd742](https://github.com/openfoodfacts/open-prices-frontend/commit/50bd742f000360e914b08c9858269a17ce0583ff))
+* **UI:** right-align all submit buttons. change color of Done buttons ([#1068](https://github.com/openfoodfacts/open-prices-frontend/issues/1068)) ([492b628](https://github.com/openfoodfacts/open-prices-frontend/commit/492b6286adb74ed58eb6bc33f09a19857127e19f))
+
 ## [1.96.0](https://github.com/openfoodfacts/open-prices-frontend/compare/v1.95.3...v1.96.0) (2024-11-29)
 
 

diff --git a/eslint.config.js b/eslint.config.js
@@ -1,9 +1,11 @@
 import js from '@eslint/js'
 import pluginVue from 'eslint-plugin-vue'
+import vueI18n from '@intlify/eslint-plugin-vue-i18n'
 
 export default [
   js.configs.recommended,
   ...pluginVue.configs['flat/recommended'],
+  ...vueI18n.configs['flat/recommended'],
   {
     ignores: ['dist/**', '*.config.js', 'tests/**'],
   },
@@ -16,6 +18,15 @@ export default [
       'vue/max-attributes-per-line': 'off',
       'vue/attribute-hyphenation': 'off',
       'vue/v-on-event-hyphenation': 'off',
+    },
+    settings: {
+      'vue-i18n': {
+        localeDir: './i18n/locales/*.json'
+      }
+    },
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
     }
   },
 ]
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "vuetify": "^3.7.3"
   },
   "devDependencies": {
+    "@intlify/eslint-plugin-vue-i18n": "^3.1.0",
     "@mdi/font": "^7.4.47",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/compiler-sfc": "^3.5.12",
@@ -55,7 +56,8 @@
     "lint-staged": "^15.2.10",
     "postcss": "^8.4.47",
     "start-server-and-test": "^2.0.8",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "vue-eslint-parser": "^9.4.3"
   },
   "resolutions": {
     "postcss": "^8.4.31"

diff --git a/src/assets/main.css b/src/assets/main.css
@@ -6,3 +6,17 @@
     content:" *";
     color: #F44336;  /* red */
 }
+
+.border-error {
+    border: 1px solid #F44336 !important;  /* red */
+}
+.border-success {
+    border: 1px solid #4CAF50 !important;  /* green */
+}
+.border-transparent {
+    border: 1px solid transparent !important;
+}
+
+.v-btn-group--density-compact.v-btn-group {
+    height: 28px !important;  /* default is 36px; match v-btn size="small" height */
+}
diff --git a/src/components/BarcodeManualInputDialog.vue b/src/components/BarcodeManualInputDialog.vue
@@ -18,15 +18,11 @@
             prepend-inner-icon="mdi-barcode"
             :hint="barcodeForm.barcode.length.toString()"
             persistent-hint
-          />
-
-          <v-btn
-            type="submit"
-            class="mt-2"
-            :disabled="!formFilled"
           >
-            {{ $t('BarcodeManualInput.Submit') }}
-          </v-btn>
+            <template #append-inner>
+              <v-icon icon="mdi-plus" :disabled="!formFilled" @click="onSubmit" />
+            </template>
+          </v-text-field>
         </v-form>
       </v-card-text>
     </v-card>

diff --git a/src/components/BarcodeScannerDialog.vue b/src/components/BarcodeScannerDialog.vue
@@ -17,7 +17,7 @@
         <div>
           <i18n-t keypath="BarcodeScanner.Htlm5-qrcode.Text" tag="span">
             <template #url>
-              <a href="https://github.com/mebjas/html5-qrcode" target="_blank">html5-qrcode</a>
+              <a :href="HTML5_QRCODE_URL" target="_blank">{{ HTML5_QRCODE_NAME }}</a>
             </template>
           </i18n-t>
         </div>
@@ -43,6 +43,8 @@ export default {
   data() {
     return {
       scanner: null,
+      HTML5_QRCODE_URL: 'https://github.com/mebjas/html5-qrcode',
+      HTML5_QRCODE_NAME: 'html5-qrcode'
     }
   },
   mounted() {

diff --git a/src/components/ContributionAssistantPriceFormCard.vue b/src/components/ContributionAssistantPriceFormCard.vue
@@ -19,7 +19,7 @@
     <v-card-text>
       <ProductInputRow :productForm="productPriceForm" :disableInitWhenSwitchingModes="true" @filled="productFormFilled = $event" />
       <v-alert
-        v-if="productPriceForm.mode === 'barcode'"
+        v-if="productPriceForm.type === 'PRODUCT'"
         class="mb-2"
         type="info"
         variant="plain"
@@ -31,7 +31,7 @@
           <h3 class="required mb-1">
             Price
           </h3>
-          <h3 v-if="productPriceForm.mode == 'category'" class="mb-1">
+          <h3 v-if="productPriceForm.type == 'CATEGORY'" class="mb-1">
             <v-item-group v-model="productPriceForm.price_per" class="d-inline" mandatory>
               <v-item v-for="cpp in categoryPricePerList" :key="cpp.key" v-slot="{ isSelected, toggle }" :value="cpp.key">
                 <v-chip class="mr-1" :style="isSelected ? 'border: 1px solid #9E9E9E' : 'border: 1px solid transparent'" @click="toggle">

diff --git a/src/components/LocationInputRow.vue b/src/components/LocationInputRow.vue
@@ -1,16 +1,12 @@
 <template>
   <v-row>
     <v-col cols="12">
-      <h3 class="required mb-1">
-        {{ $t('AddPriceSingle.WhereWhen.Location') }}
-      </h3>
-      <LocationRecentChip v-for="(location, index) in recentLocations" :key="index" :location="location" :currentLocation="locationForm" @click="setLocationData(location)" />
-      <br v-if="recentLocations.length">
-      <v-btn class="mb-2" size="small" prepend-icon="mdi-magnify" @click="locationSelectorDialog = true">
-        {{ $t('AddPriceSingle.WhereWhen.Find') }}
+      <v-btn size="small" :prepend-icon="LOCATION_TYPE_OSM_ICON" :class="selectedLocation ? 'border-success' : 'border-error'" @click="locationSelectorDialog = true">
+        <span v-if="selectedLocation">{{ $t('Common.LocationSelected') }}</span>
+        <span v-else>{{ $t('Common.LocationFindShop') }}</span>
       </v-btn>
-      <p v-if="!locationFormFilled" class="text-red mb-2">
-        <i>{{ $t('AddPriceSingle.WhereWhen.SelectLocation') }}</i>
+      <p v-if="selectedLocation">
+        <i>{{ getLocationTitle }}</i>
       </p>
     </v-col>
   </v-row>
@@ -28,10 +24,10 @@ import { defineAsyncComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useAppStore } from '../store'
 import utils from '../utils.js'
+import constants from '../constants'
 
 export default {
   components: {
-    LocationRecentChip: defineAsyncComponent(() => import('../components/LocationRecentChip.vue')),
     LocationSelectorDialog: defineAsyncComponent(() => import('../components/LocationSelectorDialog.vue')),
   },
   props: {
@@ -43,15 +39,13 @@ export default {
         location_osm_type: null
       })
     },
-    maxRecentLocations: {
-      type: Number,
-      default: 3
-    }
   },
   data() {
     return {
+      selectedLocation: null,
       locationSelectorDialog: false,
       loading: false,
+      LOCATION_TYPE_OSM_ICON: constants.LOCATION_TYPE_OSM_ICON,
     }
   },
   computed: {
@@ -64,9 +58,13 @@ export default {
       let keysONLINE = ['location_id']
       return Object.keys(this.locationForm).filter(k => keysOSM.includes(k)).every(k => !!this.locationForm[k]) || Object.keys(this.locationForm).filter(k => keysONLINE.includes(k)).every(k => !!this.locationForm[k])
     },
+    getLocationTitle() {
+      if (this.selectedLocation.type === 'ONLINE') return this.selectedLocation.website_url
+      return utils.getLocationOSMTitle(this.selectedLocation, true, true, true)
+    },
   },
   mounted() {
-    this.initLocationForm()
+    // this.initLocationForm()
   },
   methods: {
     initLocationForm() {
@@ -78,6 +76,7 @@ export default {
       this.locationSelectorDialog = true
     },
     setLocationData(location) {
+      this.selectedLocation = location
       this.appStore.addRecentLocation(location)
       // update locationForm
       if (location.id && location.type === 'ONLINE') {

diff --git a/src/components/LocationSelectorDialog.vue b/src/components/LocationSelectorDialog.vue
@@ -2,7 +2,7 @@
   <v-dialog scrollable min-height="300px" max-height="80%" min-width="80%">
     <v-card>
       <v-card-title>
-        {{ $t('LocationSelector.Title') }} <v-btn
+        {{ $t('Common.LocationFindShop') }} <v-btn
           style="float:right;" variant="text" density="compact" icon="mdi-close"
           @click="close"
         />
@@ -16,20 +16,31 @@
             <v-icon start>
               {{ item.icon }}
             </v-icon>
-            <span>{{ $t('Common.' + item.value) }}</span>
-            <span v-if="item.key === 'recent'">
-              <LoadedCountChip :totalCount="recentLocations.length" />
+            <span v-if="$vuetify.display.smAndUp">{{ $t('Common.' + item.value) }}</span>
+            <span v-else>
+              <span v-if="item.valueSmallScreen">{{ $t('Common.' + item.valueSmallScreen) }}</span>
             </span>
           </v-tab>
         </v-tabs>
 
         <v-tabs-window v-model="currentDisplay" disabled>
+          <v-tabs-window-item value="recent">
+            <LocationRecentChip v-for="(location, index) in recentLocations" :key="index" :location="location" :withRemoveAction="true" @click="selectLocation(location)" @click:close="removeRecentLocation(location)" />
+            <br>
+            <v-btn v-if="recentLocations.length" size="small" class="" @click="clearRecentLocations">
+              {{ $t('Common.Clear') }}
+            </v-btn>
+            <p v-else>
+              {{ $t('LocationSelector.RecentLocations', recentLocations.length) }}
+            </p>
+          </v-tabs-window-item>
+
           <v-tabs-window-item value="osm">
             <v-form v-model="locationOsmSearchFormValid" @submit.prevent="osmSearch">
               <v-text-field
                 ref="locationOsmSearchInput"
                 v-model="locationOsmSearchForm.q"
-                :label="$t('LocationSelector.SearchByName')"
+                :label="$t('Common.LocationSearchByName')"
                 :hint="$t('Common.ExamplesWithColonAndValue', { value: 'Carrefour rue la fayette 75010 paris ; Auchan Grenoble ; N12208020359' })"
                 type="text"
                 :rules="osmSearchRules"
@@ -100,17 +111,6 @@
               </v-text-field>
             </v-form>
           </v-tabs-window-item>
-
-          <v-tabs-window-item value="recent">
-            <LocationRecentChip v-for="(location, index) in recentLocations" :key="index" :location="location" :withRemoveAction="true" @click="selectLocation(location)" @click:close="removeRecentLocation(location)" />
-            <br>
-            <v-btn v-if="recentLocations.length" size="small" class="" @click="clearRecentLocations">
-              {{ $t('LocationSelector.Clear') }}
-            </v-btn>
-            <p v-else>
-              {{ $t('LocationSelector.RecentLocations', recentLocations.length) }}
-            </p>
-          </v-tabs-window-item>
         </v-tabs-window>
       </v-card-text>
 
@@ -120,12 +120,12 @@
         <div>
           <i18n-t keypath="LocationSelector.PoweredBy.text" tag="span">
             <template #url>
-              <a
-                v-if="searchProvider === 'nominatim'" href="https://nominatim.openstreetmap.org"
-                target="_blank"
-              >Nominatim (OpenStreetMap)</a>
-              <a v-if="searchProvider === 'photon'" href="https://photon.komoot.io" target="_blank">Komoot Photon
-                (OpenStreetMap)</a>
+              <a v-if="searchProvider === 'nominatim'" :href="OSM_NOMINATIM_URL" target="_blank">
+                {{ OSM_NOMINATIM_ATTRIBUTION }}
+              </a>
+              <a v-if="searchProvider === 'photon'" :href="OSM_PHOTON_URL" target="_blank">
+                {{ OSM_PHOTON_ATTRIBUTION }}
+              </a>
             </template>
           </i18n-t>
         </div>
@@ -144,7 +144,6 @@ import utils from '../utils.js'
 
 export default {
   components: {
-    LoadedCountChip: defineAsyncComponent(() => import('../components/LoadedCountChip.vue')),
     LocationRecentChip: defineAsyncComponent(() => import('../components/LocationRecentChip.vue')),
     LocationOSMTagChip: defineAsyncComponent(() => import('../components/LocationOSMTagChip.vue')),
     LocationOSMIDChip: defineAsyncComponent(() => import('../components/LocationOSMIDChip.vue')),
@@ -167,7 +166,11 @@ export default {
       // config
       searchProvider: constants.LOCATION_SEARCH_PROVIDER_LIST[1].key,  // photon
       displayItems: constants.LOCATION_SELECTOR_DISPLAY_LIST,
-      currentDisplay: constants.LOCATION_SELECTOR_DISPLAY_LIST[0].key,
+      currentDisplay: constants.LOCATION_SELECTOR_DISPLAY_LIST[1].key,  // physical
+      OSM_NOMINATIM_URL: constants.OSM_NOMINATIM_URL,
+      OSM_NOMINATIM_ATTRIBUTION: constants.OSM_NOMINATIM_ATTRIBUTION,
+      OSM_PHOTON_URL: constants.OSM_PHOTON_URL,
+      OSM_PHOTON_ATTRIBUTION: constants.OSM_PHOTON_ATTRIBUTION,
     }
   },
   computed: {