Fix geometry multi value handling

client/web/compose/src/components/ModuleFields/Editor/Geometry.vue

@@ -33,27 +33,25 @@
       </div>
     </template>
 
-    <div class="d-flex w-100">
-      <b-button
-        v-if="field.isMulti"
-        v-b-tooltip.noninteractive.hover="{ title: $t('tooltip.openMap'), container: '#body' }"
-        variant="light"
-        class="w-100"
-        @click="openMap()"
-      >
-        <font-awesome-icon
-          :icon="['fas', 'map-marked-alt']"
-          class="text-primary"
-        />
-      </b-button>
-    </div>
+    <b-button
+      v-if="field.isMulti"
+      v-b-tooltip.noninteractive.hover="{ title: $t('tooltip.openMap'), container: '#body' }"
+      variant="light"
+      class="w-100 mb-3"
+      @click="openMap()"
+    >
+      <font-awesome-icon
+        :icon="['fas', 'map-marked-alt']"
+        class="text-primary"
+      />
+    </b-button>
 
     <multi
       v-if="field.isMulti"
       v-slot="ctx"
       :value.sync="localValue"
       :errors="errors"
-      single-input
+      :default-value="{ coordinates: [] }"
     >
       <b-input-group>
         <b-form-input
@@ -245,6 +243,7 @@ export default {
         this.value = this.field.isMulti ? value.filter(v => (v || {}).coordinates).map(v => JSON.stringify(v)) : JSON.stringify(value)
       },
     },
+
     'field.isMulti': {
       immediate: true,
       handler () {
@@ -274,7 +273,7 @@ export default {
 
   methods: {
     openMap (index) {
-      this.map.value = this.localValue
+      this.map.value = [...this.localValue]
 
       this.localValueIndex = index
       const firstCoordinates = (index >= 0 ? this.localValue[index] : this.localValue) || {}

client/web/compose/src/components/ModuleFields/Editor/multi.vue

@@ -20,7 +20,7 @@
         <font-awesome-icon
           v-b-tooltip.noninteractive.hover="{ title: $t('tooltip.dragAndDrop'), container: '#body' }"
           :icon="['fas', 'bars']"
-          class="handle text-secondary ml-1 mr-2"
+          class="handle text-secondary mr-3"
         />
 
         <div
@@ -34,7 +34,7 @@
         <font-awesome-icon
           v-if="removable"
           :icon="['fas', 'times']"
-          class="pointer text-danger ml-2 mr-1"
+          class="pointer text-danger ml-3"
           @click="removeValue(index)"
         />
       </div>

client/web/compose/src/components/ModuleFields/Viewer/Geometry.vue

@@ -6,13 +6,10 @@
       :class="{ 'd-block': field.options.multiDelimiter === '\n' }"
     >
       <a
-        class="text-primary pointer"
+        class="text-nowrap text-primary pointer"
         @click.stop="openMap(index)"
       >
         {{ c.value[0] }}, {{ c.value[1] }}
-        <font-awesome-icon
-          :icon="['fas', 'map-marked-alt']"
-        />
         {{ index !== localValue.length - 1 ? field.options.multiDelimiter : '' }}
       </a>
     </span>

client/web/compose/src/components/PageBlocks/GeometryBase.vue

@@ -234,7 +234,7 @@ export default {
                       moduleID: record.moduleID,
                     })
                   }
-                }).filter(g => g)
+                }).filter(g => g && g.length)
               })
           })
       })).finally(() => {

lib/vue/src/components/map/CMap.vue

@@ -52,7 +52,7 @@
         v-for="(geometry, i) in polygons"
         :key="`polygon-${i}`"
         :lat-lngs="geometry.map(value => value.geometry)"
-        :color="geometry[0].color"
+        :color="(geometry.find(g => g) || {}).color"
       />
 
       <l-marker