Fix empty field selector values in page blocks

client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue

@@ -34,6 +34,8 @@
           <c-input-select
             v-model="feed.titleField"
             :options="titleFields"
+            :get-option-key="getOptionEventFieldKey"
+            :get-option-label="getOptionEventFieldLabel"
             :reduce="o => o.name"
             :placeholder="$t('calendar.recordFeed.titlePlaceholder')"
           />
@@ -51,6 +53,8 @@
           <c-input-select
             v-model="feed.startField"
             :options="dateFields"
+            :get-option-key="getOptionEventFieldKey"
+            :get-option-label="getOptionEventFieldLabel"
             :reduce="o => o.name"
             :placeholder="$t('calendar.recordFeed.eventStartFieldPlaceholder')"
           />
@@ -68,6 +72,8 @@
           <c-input-select
             v-model="feed.endField"
             :options="dateFields"
+            :get-option-key="getOptionEventFieldKey"
+            :get-option-label="getOptionEventFieldLabel"
             :reduce="o => o.name"
             :disabled="feed.allDay"
             :placeholder="$t('calendar.recordFeed.eventEndFieldPlaceholder')"
@@ -177,6 +183,7 @@ export default {
       if (!this.module) {
         return []
       }
+
       return [...this.module.fields]
         .filter(f => ['String', 'Email', 'Url'].includes(f.kind))
         .sort((a, b) => a.label.localeCompare(b.label))
@@ -193,6 +200,7 @@ export default {
       }
 
       const moduleFields = this.module.fields.slice().sort((a, b) => a.label.localeCompare(b.label))
+
       return [
         ...moduleFields,
         ...this.module.systemFields().map(sf => {
@@ -213,6 +221,14 @@ export default {
       this.feed.startField = ''
       this.feed.endField = ''
     },
+
+    getOptionEventFieldKey ({ name }) {
+      return name
+    },
+
+    getOptionEventFieldLabel ({ name, label }) {
+      return name || label
+    },
   },
 }
 </script>

client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue

@@ -32,8 +32,10 @@
             <c-input-select
               v-model="feed.geometryField"
               :options="geometryFields"
-              :placeholder="$t('geometry.recordFeed.geometryFieldPlaceholder')"
+              :get-option-key="getOptionGeometryAndTitleFieldKey"
+              :get-option-label="getOptionGeometryAndTitleFieldLabel"
               :reduce="o => o.name"
+              :placeholder="$t('geometry.recordFeed.geometryFieldPlaceholder')"
             />
           </b-form-group>
         </b-col>
@@ -49,6 +51,8 @@
             <c-input-select
               v-model="feed.titleField"
               :options="titleFields"
+              :get-option-key="getOptionGeometryAndTitleFieldKey"
+              :get-option-label="getOptionGeometryAndTitleFieldLabel"
               :reduce="o => o.name"
               :placeholder="$t('geometry.recordFeed.titlePlaceholder')"
             />
@@ -185,6 +189,7 @@ export default {
       if (!this.module) {
         return []
       }
+
       return this.module.fields
         .filter(f => [
           'DateTime',
@@ -194,7 +199,8 @@ export default {
           'String',
           'Record',
           'User',
-        ].includes(f.kind)).toSorted((a, b) => a.label.localeCompare(b.label))
+        ].includes(f.kind) && f.label)
+        .toSorted((a, b) => a.label.localeCompare(b.label))
     },
 
     /**
@@ -212,8 +218,9 @@ export default {
         ...this.module.systemFields().map(sf => {
           sf.label = this.$t(`field:system.${sf.name}`)
           return sf
-        }),
-      ].filter(f => f.kind === 'Geometry').toSorted((a, b) => a.label.localeCompare(b.label))
+        })]
+        .filter(f => f.kind === 'Geometry')
+        .toSorted((a, b) => a.label.localeCompare(b.label))
     },
 
     themeSettings () {
@@ -226,6 +233,14 @@ export default {
       this.feed.geometryField = ''
       this.feed.titleField = ''
     },
+
+    getOptionGeometryAndTitleFieldKey ({ name }) {
+      return name
+    },
+
+    getOptionGeometryAndTitleFieldLabel ({ name, label }) {
+      return name || label
+    },
   },
 }
 </script>

client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue

@@ -180,6 +180,7 @@
                   :placeholder="$t('metric.edit.metricFieldSelect')"
                   :options="metricFields"
                   :get-option-key="getOptionMetricFieldKey"
+                  :get-option-label="getOptionMetricFieldLabel"
                   :reduce="f => f.name"
                   @input="onMetricFieldChange"
                 />
@@ -454,6 +455,10 @@ export default {
       return name
     },
 
+    getOptionMetricFieldLabel ({ name, label }) {
+      return name || label
+    },
+
     getOptionAggregationOperationKey ({ operation }) {
       return operation
     },

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

@@ -81,6 +81,7 @@
                 :placeholder="$t('progress.field.select')"
                 :options="valueModuleFields"
                 :get-option-key="getOptionModuleFieldKey"
+                :get-option-label="getOptionModuleFieldLabel"
                 :reduce="f => f.name"
                 @input="fieldChanged($event, options.value)"
               />
@@ -190,6 +191,7 @@
                 :placeholder="$t('progress.field.select')"
                 :options="minValueModuleFields"
                 :get-option-key="getOptionModuleFieldKey"
+                :get-option-label="getOptionModuleFieldLabel"
                 :reduce="f => f.name"
                 @input="fieldChanged($event, options.minValue)"
               />
@@ -299,6 +301,7 @@
                 :placeholder="$t('progress.field.select')"
                 :options="maxValueModuleFields"
                 :get-option-key="getOptionModuleFieldKey"
+                :get-option-label="getOptionModuleFieldLabel"
                 :reduce="f => f.name"
                 @input="fieldChanged($event, options.maxValue)"
               />
@@ -600,24 +603,15 @@ export default {
     },
 
     valueModuleFields () {
-      return [
-        ...this.sharedModuleFields,
-        ...this.moduleByID(this.options.value.moduleID).fields.filter(f => f.kind === 'Number').sort((a, b) => a.label.localeCompare(b.label)),
-      ]
+      return this.returnValueModuleFields(this.options.value.moduleID)
     },
 
     minValueModuleFields () {
-      return [
-        ...this.sharedModuleFields,
-        ...this.moduleByID(this.options.minValue.moduleID).fields.filter(f => f.kind === 'Number').sort((a, b) => a.label.localeCompare(b.label)),
-      ]
+      return this.returnValueModuleFields(this.options.minValue.moduleID)
     },
 
     maxValueModuleFields () {
-      return [
-        ...this.sharedModuleFields,
-        ...this.moduleByID(this.options.maxValue.moduleID).fields.filter(f => f.kind === 'Number').sort((a, b) => a.label.localeCompare(b.label)),
-      ]
+      return this.returnValueModuleFields(this.options.maxValue.moduleID)
     },
   },
 
@@ -678,6 +672,10 @@ export default {
       return name
     },
 
+    getOptionModuleFieldLabel ({ name, label }) {
+      return name || label
+    },
+
     getOptionAggregationOperationKey ({ operation }) {
       return operation
     },
@@ -687,6 +685,15 @@ export default {
       this.variants = []
       this.mock = {}
     },
+
+    returnValueModuleFields (moduleID) {
+      return [
+        ...this.sharedModuleFields,
+        ...this.moduleByID(moduleID).fields
+          .filter(f => f.kind === 'Number')
+          .sort((a, b) => a.label.localeCompare(b.label)),
+      ]
+    },
   },
 }
 </script>