feat(price create form): make price card readonly, improve mode chips

openfoodfacts · Dec 27, 2023 · 0c783f8 · 0c783f8
1 parent d845f52
commit 0c783f8
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 45 deletions.
diff --git a/src/components/LocationSelector.vue b/src/components/LocationSelector.vue
@@ -29,20 +29,18 @@
         <h3>Results <small>{{ results.length }}</small></h3>
         <v-row>
           <v-col cols="12" sm="6">
-            <div class="d-flex flex-wrap ga-2">
-              <v-card
-                v-for="location in results"
-                elevation="1"
-                width="100%"
-                @click="selectLocation(location)"
-              >
-                <v-card-text>
-                  <h4>{{ getNominatimLocationTitle(location) }}</h4>
-                  {{ getNominatimLocationDetails(location, true) }}<br />
-                  <v-chip label size="small" density="comfortable">{{ location.type }}</v-chip>
-                </v-card-text>
-              </v-card>
-            </div>
+            <v-card
+              class="mb-2"
+              width="100%"
+              v-for="location in results"
+              elevation="1"
+              @click="selectLocation(location)">
+              <v-card-text>
+                <h4>{{ getNominatimLocationTitle(location) }}</h4>
+                {{ getNominatimLocationDetails(location, true) }}<br />
+                <v-chip label size="small" density="comfortable">{{ location.type }}</v-chip>
+              </v-card-text>
+            </v-card>
           </v-col>
           <v-col cols="12" sm="6" style="min-height:200px">
             <l-map ref="map" v-model:zoom="mapZoom" :center="mapCenter" :use-global-leaflet="false" @ready="initMap">
@@ -66,18 +64,18 @@
         <h3 class="mb-1">
           Recent locations <small>{{ recentLocations.length }}</small>
         </h3>
-        <div class="d-flex flex-wrap ga-2">
-          <v-chip
-            v-for="location in recentLocations"
-            elevation="1"
-            @click="selectLocation(location)">
-            <v-icon start icon="mdi-history"></v-icon>
-            {{ location.display_name }}
-          </v-chip>
-          <v-chip variant="outlined" size="small" @click="clearRecentLocations">
-            Clear
-          </v-chip>
-        </div>
+        <v-chip
+          class="mb-2"
+          v-for="location in recentLocations"
+          elevation="1"
+          @click="selectLocation(location)">
+          <v-icon start icon="mdi-history"></v-icon>
+          {{ location.display_name }}
+        </v-chip>
+        <br />
+        <v-chip variant="outlined" size="small" @click="clearRecentLocations">
+          Clear
+        </v-chip>
       </v-card-text>
 
       <v-divider v-if="recentLocations.length"></v-divider>

diff --git a/src/components/PriceCard.vue b/src/components/PriceCard.vue
@@ -43,10 +43,11 @@ const CategoryTagsByIndex = CategoryTags.reduce((acc, tag) => {
 
 
 export default {
-  props: [
-    'price',
-    'product'
-  ],
+  props: {
+    'price': null,
+    'product': null,
+    'readonly': false
+  },
   data() {
     return {
       defaultAvatar: 'https://world.openfoodfacts.org/images/icons/dist/packaging.svg'
@@ -115,12 +116,15 @@ export default {
       return this.price.location_id
     },
     goToProduct() {
-      if (!this.hasProduct) {
+      if (this.readonly || !this.hasProduct) {
         return
       }
       this.$router.push({ path: `/products/${this.product.id}` })
     },
     goToLocation() {
+      if (this.readonly) {
+        return
+      }
       this.$router.push({ path: `/locations/${this.price.location_id}` })
     },
     getCategoryName(categoryTag) {

diff --git a/src/views/AddPriceSingle.vue b/src/views/AddPriceSingle.vue
@@ -28,8 +28,8 @@
                   @click:clear="clearProof"
                   :loading="createProofLoading">
                 </v-file-input>
-                <p v-if="proofFormFilled && !createProofLoading" class="text-green mt-2 mb-2"><i>Proof uploaded!</i></p>
-                <p v-if="!proofFormFilled && !createProofLoading" class="text-red mt-2 mb-2"><i>Upload a proof</i></p>
+                <p v-if="proofFormFilled && !createProofLoading" class="text-green mb-2"><i>Proof uploaded!</i></p>
+                <p v-if="!proofFormFilled && !createProofLoading" class="text-red mb-2"><i>Upload a proof</i></p>
               </v-col>
               <v-col v-if="proofFormFilled">
                 <v-img :src="proofImagePreview" style="max-height:200px"></v-img>
@@ -54,7 +54,7 @@
               <v-item-group v-model="productMode" class="d-inline" mandatory>
                 <v-item v-for="pm in ['barcode', 'category']" :key="pm" :value="pm" v-slot="{ isSelected, toggle }">
                   <v-chip class="mr-1" @click="toggle">
-                    <v-icon v-if="isSelected" start icon="mdi-checkbox-marked-circle"></v-icon>
+                    <v-icon start :icon="isSelected ? 'mdi-checkbox-marked-circle' : 'mdi-circle-outline'"></v-icon>
                     {{ pm }}
                   </v-chip>
                 </v-item>
@@ -71,7 +71,7 @@
                 hint="EAN"
                 @click:prepend="showBarcodeScanner"
               ></v-text-field>
-              <PriceCard v-if="product" class="mb-4" :product="product" elevation="1"></PriceCard>
+              <PriceCard v-if="product" class="mb-4" :product="product" :readonly="true" elevation="1"></PriceCard>
             </v-sheet>
             <v-sheet v-if="productMode === 'category'">
               <v-autocomplete
@@ -120,16 +120,15 @@
               Location
             </h3>
             <v-btn class="mb-2" size="small" prepend-icon="mdi-plus" @click="showLocationSelector">Find</v-btn>
-            <div class="d-flex flex-wrap ga-2">
-              <v-chip
-                v-for="location in recentLocations"
-                :style="isSelectedLocation(location) ? 'border: 1px solid #4CAF50' : 'border: 1px solid transparent'"
-                @click="setLocationData(location)">
-                <v-icon start :icon="isSelectedLocation(location) ? 'mdi-checkbox-marked-circle' : 'mdi-history'"></v-icon>
-                {{ location.display_name }}
-              </v-chip>
-            </div>
-            <p v-if="!locationFormFilled" class="text-red mt-2 mb-2"><i>Select your location</i></p>
+            <v-chip
+              class="mb-2"
+              :style="isSelectedLocation(location) ? 'border: 1px solid #4CAF50' : 'border: 1px solid transparent'"
+              v-for="location in recentLocations"
+              @click="setLocationData(location)">
+              <v-icon start :icon="isSelectedLocation(location) ? 'mdi-checkbox-marked-circle' : 'mdi-history'"></v-icon>
+              {{ location.display_name }}
+            </v-chip>
+            <p v-if="!locationFormFilled" class="text-red mb-2"><i>Select your location</i></p>
 
             <h3 class="mt-4 mb-1">Date</h3>
             <v-row>