Item edit: Dynamically load UoM dimensions (#2120)

Fixes #1926.
Awaiting https://github.com/openhab/openhab-core/pull/3838.

Load the UoM dimensions for UoM Item types from the REST API instead of
hard-coding them into the UI.

---------

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>

bundles/org.openhab.ui/web/src/assets/item-types.js

@@ -2,7 +2,6 @@ const SharedTypes = ['Call', 'Color', 'Contact', 'DateTime', 'Dimmer', 'Image',
 
 export const ItemTypes = SharedTypes.concat(['Group'])
 export const GroupTypes = ['None'].concat(SharedTypes)
-export const Dimensions = ['Area', 'Length', 'Mass', 'Pressure', 'Speed', 'Temperature', 'Volume', 'Dimensionless', 'Acceleration', 'AmountOfSubstance', 'Angle', 'ArealDensity', 'CatalyticActivity', 'DataAmount', 'DataTransferRate', 'Density', 'ElectricCapacitance', 'ElectricCharge', 'ElectricConductance', 'ElectricCurrent', 'ElectricInductance', 'ElectricPotential', 'ElectricResistance', 'Energy', 'Force', 'Frequency', 'Illuminance', 'Intensity', 'LuminousFlux', 'LuminousIntensity', 'MagneticFlux', 'MagneticFluxDensity', 'Power', 'RadiationDoseAbsorbed', 'RadiationDoseEffective', 'Radioactivity', 'SolidAngle', 'Time', 'VolumetricFlowRate']
 
 export const ArithmeticFunctions = [{
   name: '',

bundles/org.openhab.ui/web/src/components/config/editor/hint-items.js

@@ -2,9 +2,17 @@ import { findParent } from './yaml-utils'
 import { filterPartialCompletions, addTooltipHandlers } from './hint-utils'
 import * as Types from '@/assets/item-types.js'
 import Metadata from '@/assets/definitions/metadata/namespaces'
+import api from '@/js/openhab/api'
 
+const dimensions = []
 let itemsCache = null
 
+api.get('/rest/systeminfo/uom').then((data) => {
+  data.uomInfo.dimensions.forEach((d) => {
+    dimensions.push(d.dimension)
+  })
+})
+
 function hintItemTypes (cm, line) {
   if (!cm.state.$oh) return
   let ret = {
@@ -17,7 +25,7 @@ function hintItemTypes (cm, line) {
   }
   ret.list = filterPartialCompletions(cm, line, ret.list, 'text', /^type:( )?/)
   if (line.indexOf('Number:') !== -1) {
-    ret.list = Types.Dimensions.map((t) => {
+    ret.list = dimensions.map((t) => {
       return {
         text: t,
         displayText: t

bundles/org.openhab.ui/web/src/components/item/group-form.vue

@@ -3,16 +3,19 @@
     <f7-list inline-labels no-hairlines-md>
       <f7-list-item v-if="item.type === 'Group'" title="Members Base Type" smart-select :smart-select-params="{openIn: 'popup', closeOnSelect: true}">
         <select name="select-basetype" @change="setGroupType($event.target.value)">
-          <optgroup label="Basic Types">
-            <option v-for="type in types.GroupTypes" :key="type" :value="type" :selected="type === item.groupType">
+          <option v-for="type in types.GroupTypes" :key="type" :value="type" :selected="type === item.groupType.split(':')[0]">
             {{ type }}
           </option>
-          </optgroup>
-          <optgroup label="Numbers with Dimensions">
-            <option v-for="dimension in types.Dimensions" :key="dimension" :value="'Number:' + dimension" :selected="item.groupType === 'Number:' + dimension">
-              {{ 'Number:' + dimension }}
+        </select>
+      </f7-list-item>
+      <f7-list-item v-if="dimensions.length && item.groupType && item.groupType.startsWith('Number')" title="Dimension" type="text" smart-select :smart-select-params="{searchbar: true, openIn: 'popup', closeOnSelect: true}">
+        <select name="select-dimension" @change="setGroupType($event.target.value)">
+          <option key="Number" value="Number" :selected="item.type === 'Number'">
+            &nbsp;
+          </option>
+          <option v-for="d in dimensions" :key="d.name" :value="'Number:' + d.name" :selected="'Number:' + d.name === item.groupType">
+            {{ d.label }}
           </option>
-          </optgroup>
         </select>
       </f7-list-item>
       <f7-list-item key="function-picker-arithmetic" v-if="item.type === 'Group' && item.groupType && (['Dimmer', 'Rollershutter'].indexOf(item.groupType) >= 0 || item.groupType.indexOf('Number') === 0)" title="Aggregation Function" smart-select :smart-select-params="{openIn: 'popover', closeOnSelect: true}">
@@ -57,7 +60,10 @@
 <script>
 import * as types from '@/assets/item-types.js'
 
+import uomMixin from '@/components/item/uom-mixin'
+
 export default {
+  mixins: [uomMixin],
   props: ['item'],
   data () {
     return {

bundles/org.openhab.ui/web/src/components/item/item-form.vue

@@ -9,16 +9,19 @@
                      @input="item.label = $event.target.value" clear-button />
       <f7-list-item v-if="item.type && !hideType" title="Type" type="text" smart-select :smart-select-params="{searchbar: true, openIn: 'popup', closeOnSelect: true}">
         <select name="select-type" @change="item.type = $event.target.value">
-          <optgroup label="Basic Types">
-            <option v-for="type in types.ItemTypes" :key="type" :value="type" :selected="type === item.type">
-              {{ type }}
+          <option v-for="t in types.ItemTypes" :key="t" :value="t" :selected="t === item.type.split(':')[0]">
+            {{ t }}
           </option>
-          </optgroup>
-          <optgroup label="Numbers with Dimensions">
-            <option v-for="dimension in types.Dimensions" :key="dimension" :value="'Number:' + dimension" :selected="item.type === 'Number:' + dimension">
-              {{ 'Number:' + dimension }}
+        </select>
+      </f7-list-item>
+      <f7-list-item v-if="dimensions.length && item.type && !hideType && item.type.startsWith('Number')" title="Dimension" type="text" smart-select :smart-select-params="{searchbar: true, openIn: 'popup', closeOnSelect: true}">
+        <select name="select-dimension" @change="item.type = $event.target.value">
+          <option key="Number" value="Number" :selected="item.type === 'Number'">
+            &nbsp;
+          </option>
+          <option v-for="d in dimensions" :key="d.name" :value="'Number:' + d.name" :selected="'Number:' + d.name === item.type">
+            {{ d.label }}
           </option>
-          </optgroup>
         </select>
       </f7-list-item>
       <f7-list-input v-if="!hideCategory" ref="category" label="Category" autocomplete="off" type="text" placeholder="temperature, firstfloor..." :value="item.category"
@@ -50,13 +53,14 @@
 <script>
 import SemanticsPicker from '@/components/tags/semantics-picker.vue'
 import TagInput from '@/components/tags/tag-input.vue'
-import * as Types from '@/assets/item-types.js'
+import * as types from '@/assets/item-types.js'
 import { Categories } from '@/assets/categories.js'
 
 import ItemMixin from '@/components/item/item-mixin'
+import uomMixin from '@/components/item/uom-mixin'
 
 export default {
-  mixins: [ItemMixin],
+  mixins: [ItemMixin, uomMixin],
   props: ['item', 'items', 'createMode', 'hideCategory', 'hideType', 'hideSemantics', 'forceSemantics'],
   components: {
     SemanticsPicker,
@@ -64,7 +68,7 @@ export default {
   },
   data () {
     return {
-      types: Types,
+      types,
       categoryInputId: '',
       categoryAutocomplete: null,
       nameErrorMessage: ''

bundles/org.openhab.ui/web/src/components/item/uom-mixin.js

@@ -0,0 +1,17 @@
+export default {
+  data () {
+    return {
+      dimensions: []
+    }
+  },
+  created () {
+    this.$oh.api.get('/rest/systeminfo/uom').then((data) => {
+      data.uomInfo.dimensions.forEach((d) => {
+        this.dimensions.push({
+          name: d.dimension,
+          label: d.dimension + ' (' + d.systemUnit + ')'
+        })
+      })
+    })
+  }
+}

bundles/org.openhab.ui/web/src/components/tags/semantics-picker.vue

@@ -37,13 +37,10 @@
 </template>
 
 <script>
-import * as Types from '@/assets/item-types.js'
-
 export default {
   props: ['item', 'sameClassOnly', 'hideType', 'hideNone'],
   data () {
     return {
-      types: Types,
       semanticClasses: this.$store.getters.semanticClasses,
       semanticClass: '',
       semanticProperty: '',