refactor(proof edit): allow editing proof currency. additional cleanup (

#659)
openfoodfacts · Jun 24, 2024 · 5dc5d67 · 5dc5d67
1 parent 7e27d62
commit 5dc5d67
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 51 deletions.
diff --git a/src/components/ProofDateCurrencyInputRow.vue b/src/components/ProofDateCurrencyInputRow.vue
@@ -0,0 +1,63 @@
+<template>
+  <v-row>
+    <v-col cols="6">
+      <h3 class="mb-1">
+        {{ $t('Common.Date') }}
+      </h3>
+      <v-text-field
+        v-model="proofDateCurrencyForm.date"
+        :label="$t('Common.Date')"
+        type="date"
+        :max="currentDate"
+        hide-details="auto"
+      />
+    </v-col>
+    <v-col cols="6">
+      <h3 class="mb-1">
+        {{ $t('Common.Currency') }}
+        <span class="text-caption font-weight-regular">
+          <a href="#">{{ $t('Common.Help') }}</a>
+          <v-tooltip activator="parent" open-on-click location="top">
+            {{ $t('ChangeCurrencyDialog.AddCurrencies') }}
+          </v-tooltip>
+        </span>
+      </h3>
+      <v-select
+        v-model="proofDateCurrencyForm.currency"
+        :label="$t('Common.Currency')"
+        :items="userFavoriteCurrencies"
+        hide-details="auto"
+      />
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import { mapStores } from 'pinia'
+import { useAppStore } from '../store'
+import utils from '../utils.js'
+
+export default {
+  props: {
+    proofDateCurrencyForm: {
+      type: Object,
+      default: () => ({ date: this.currentDate, currency: null })
+    },
+  },
+  data() {
+    return {
+      currentDate: utils.currentDate(),
+    }
+  },
+  computed: {
+    ...mapStores(useAppStore),
+    proofDateCurrencyFormFilled() {
+      let keys = ['date', 'currency']
+      return Object.keys(this.proofDateCurrencyForm).filter(k => keys.includes(k)).every(k => !!this.proofDateCurrencyForm[k])
+    },
+    userFavoriteCurrencies() {
+      return this.appStore.getUserFavoriteCurrencies
+    }
+  }
+}
+</script>
diff --git a/src/components/ProofEditDialog.vue b/src/components/ProofEditDialog.vue
@@ -14,25 +14,15 @@
       <v-divider />
 
       <v-card-text>
-        <h3 class="mb-1">
-          {{ $t('Common.Date') }}
-        </h3>
-        <v-row>
-          <v-col cols="12" sm="6">
-            <v-text-field
-              v-model="updateProofForm.date"
-              :label="$t('Common.Date')"
-              type="date"
-            />
-          </v-col>
-        </v-row>
+        <ProofDateCurrencyInputRow :proofDateCurrencyForm="updateProofForm" />
       </v-card-text>
 
       <v-divider />
 
       <v-card-actions>
         <v-btn
           elevation="1"
+          :disabled="!formFilled"
           :loading="loading"
           @click="updateProof"
         >
@@ -49,7 +39,8 @@ import api from '../services/api'
 
 export default {
   components: {
-    ProofCard: defineAsyncComponent(() => import('../components/ProofCard.vue'))
+    ProofCard: defineAsyncComponent(() => import('../components/ProofCard.vue')),
+    ProofDateCurrencyInputRow: defineAsyncComponent(() => import('../components/ProofDateCurrencyInputRow.vue')),
   },
   props: {
     proof: {
@@ -62,13 +53,16 @@ export default {
     return {
       updateProofForm: {
         type: null,
-        currency: null,
         date: null,
+        currency: null,
       },
       loading: false
     }
   },
   computed: {
+    formFilled() {
+      return Object.values(this.updateProofForm).every(x => !!x)
+    }
   },
   mounted() {
     this.initUpdateProofForm()

diff --git a/src/components/ProofFooter.vue b/src/components/ProofFooter.vue
@@ -10,7 +10,7 @@
     </v-col>
   </v-row>
 
-  <ProofActionMenuButton v-if="!readonly && !hideProofActions && userIsProofOwner" :proof="proof" />
+  <ProofActionMenuButton v-if="!hideProofActions && userIsProofOwner" :proof="proof" />
 </template>
 
 <script>

diff --git a/src/components/ProofInputRow.vue b/src/components/ProofInputRow.vue
@@ -55,36 +55,7 @@
       <LocationInputRow :locationForm="proofForm" @location="locationObject = $event" />
 
       <!-- proof date & currency -->
-      <v-row>
-        <v-col cols="6">
-          <h3 class="mb-1">
-            {{ $t('Common.Date') }}
-          </h3>
-          <v-text-field
-            v-model="proofForm.date"
-            :label="$t('Common.Date')"
-            type="date"
-            hide-details="auto"
-          />
-        </v-col>
-        <v-col cols="6">
-          <h3 class="mb-1">
-            {{ $t('Common.Currency') }}
-            <span class="text-caption font-weight-regular">
-              <a href="#">{{ $t('Common.Help') }}</a>
-              <v-tooltip activator="parent" open-on-click location="top">
-                {{ $t('ChangeCurrencyDialog.AddCurrencies') }}
-              </v-tooltip>
-            </span>
-          </h3>
-          <v-select
-            v-model="proofForm.currency"
-            :label="$t('Common.Currency')"
-            :items="userFavoriteCurrencies"
-            hide-details="auto"
-          />
-        </v-col>
-      </v-row>
+      <ProofDateCurrencyInputRow :proofDateCurrencyForm="proofForm" />
 
       <!-- proof upload button -->
       <v-row v-if="proofFormImage">
@@ -129,8 +100,6 @@
 import Compressor from 'compressorjs'
 import ExifReader from 'exifreader'
 import { defineAsyncComponent } from 'vue'
-import { mapStores } from 'pinia'
-import { useAppStore } from '../store'
 import api from '../services/api'
 import utils from '../utils.js'
 
@@ -145,6 +114,7 @@ Compressor.setDefaults({
 export default {
   components: {
     UserRecentProofsDialog: defineAsyncComponent(() => import('../components/UserRecentProofsDialog.vue')),
+    ProofDateCurrencyInputRow: defineAsyncComponent(() => import('../components/ProofDateCurrencyInputRow.vue')),
     ProofCard: defineAsyncComponent(() => import('../components/ProofCard.vue')),
     LocationInputRow: defineAsyncComponent(() => import('../components/LocationInputRow.vue')),
   },
@@ -177,17 +147,13 @@ export default {
     }
   },
   computed: {
-    ...mapStores(useAppStore),
     proofDateCurrencyFormFilled() {
       let keys = ['date', 'currency']
       return Object.keys(this.proofForm).filter(k => keys.includes(k)).every(k => !!this.proofForm[k])
     },
     proofFormFilled() {
       return !!this.proofFormImage && this.proofDateCurrencyFormFilled
     },
-    userFavoriteCurrencies() {
-      return this.appStore.getUserFavoriteCurrencies
-    }
   },
   watch: {
     proofObject(newProofObject, oldProofObject) {  // eslint-disable-line no-unused-vars