From 2f17183bd13f61e2a20d4f60265210e7480d1a4c Mon Sep 17 00:00:00 2001
From: Mark Herwege <mherwege@users.noreply.github.com>
Date: Fri, 1 Mar 2024 12:48:05 +0100
Subject: [PATCH] Provide meaningful list of units in item-form (#2312)

Closes https://github.com/openhab/openhab-core/issues/4082.

This PR adds:

1. A curated list of units to show as a drop-down list when creating a Number item with dimension.
2. The possibility to use a different default unit on item creation than the system default unit.
3. The ability to change unit and state description for items.
4. The ability to use the `unitHint` provided by channel types for "Link channel to Item" -> "Create a new Item".

By default, the system default unit (for the configured measurement system) will be shown when editing or creating an item.

`units.js` contains a number of frequently used units by dimension and measurement system.
These will be available in a autosuggest dropdown list.
It is still possible to not select from the list and use any other string as a unit.

All units for the dimension in `units.js` will be in the dropdown list, but they will be sorted by measurement system. If the measurement system is set to US, imperial units will appear higher in the list.
Units that have not explicitely been listed as SI or US will always appear higher.

When typing a unit that is not in the curated list, a longer list will be used for autocompletion that considers allowed prefixes to base units and constructs all combinations.

`units.js` also contains a field to set a different default unit on item creation than the system default unit.

With https://github.com/openhab/openhab-core/pull/4079, the REST API of channel types will provide a unit hint if defined in the binding channel types.
If such information is available, this PR adds support for this to be the the suggested unit.
If that information is unavailable, the UI will fall back to behavious described above.

---------

Also-by: Florian Hotze <florianh_dev@icloud.com>
Signed-off-by: Mark Herwege <mark.herwege@telenet.be>
---
 .../org.openhab.ui/web/src/assets/units.js    | 180 +++++++++++++++++
 .../web/src/components/item/group-form.vue    | 132 ++++++++++--
 .../web/src/components/item/item-form.vue     | 191 +++++++++++++-----
 .../web/src/components/item/item-mixin.js     |   7 +-
 .../web/src/components/item/uom-mixin.js      | 125 +++++++++++-
 .../web/src/components/thing/channel-list.vue |  12 +-
 .../org.openhab.ui/web/src/js/store/index.js  |   2 +
 .../src/pages/settings/items/item-edit.vue    |  21 +-
 .../pages/settings/things/link/link-add.vue   |  11 +-
 9 files changed, 604 insertions(+), 77 deletions(-)
 create mode 100644 bundles/org.openhab.ui/web/src/assets/units.js

diff --git a/bundles/org.openhab.ui/web/src/assets/units.js b/bundles/org.openhab.ui/web/src/assets/units.js
new file mode 100644
index 0000000000..1829ac1e12
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/assets/units.js
@@ -0,0 +1,180 @@
+// Units defines the possible units for UI unit selection.
+// If nothing is defined for an allowed dimension, the UI will fall back on the OH core default unit in the configured measurement system.
+// For dimensions defined, any of the fields can be omitted. Logical defaults will be used.
+// Units from curated units lists will always be added to the full unit list constructed from baseUnits and prefixes.
+// So it is not necessary to explicitly add what is already in the curated units for the full units list.
+// However, no prefixes will be applied to these. If you want prefixes to be applied, you should add them in the respective baseUnits Array as well.
+
+/**
+ * @typedef Unit
+ * @property {string} dimension unit dimension (required)
+ * @property {string[]} [units] units used in a curated shortlist of units, not specific to SI or Imperial measurement system
+ * @property {string[]} [unitsSI] units used in a curated shortlist of units, specific to the SI measurement system
+ * @property {string[]} [unitsUS] units used in a curated shortlist of units, specific to the Imperial measurement system
+ * @property {string} [default] default unit, to be set to override core default unit, not specific to SI or Imperial measurement system
+ * @property {string} [defaultsSI] default unit in SI measurement system, to be set to override OH core default SI unit
+ * @property {string} [defaultUS] default unit in Imperial measurement system, to be set to override OH core default Imperial unit
+ * @property {string[]} [baseUnits] all supported base units that don't allow metric or binary prefixes
+ * @property {string[]} [baseUnitsMetric] metric base units, the full list of units will include all of these with all metric prefixes
+ * @property {string[]} [baseUnitsBinary] binary base units, the full list of units will include all of these with all binary prefixes
+ */
+
+/**
+ * Defines the possible units for UI unit selection.
+ * @type {Unit[]}
+ */
+export const Units = [{
+  dimension: 'Acceleration',
+  baseUnits: ['gₙ'],
+  baseUnitsSI: ['m/s²']
+}, {
+  dimension: 'AmountOfSubstance',
+  baseUnits: ['°dH'],
+  baseUnitsSI: ['mol']
+}, {
+  dimension: 'Angle',
+  units: ['°', '\'', '"', 'rad']
+}, {
+  dimension: 'Area',
+  unitsSI: ['m²', 'km²', 'ha'],
+  unitsUS: ['ft²', 'mi²'],
+  baseUnits: ['ca', 'a', 'in²', 'ac'],
+  baseUnitsMetric: ['m²']
+}, {
+  dimension: 'DataAmount',
+  units: ['bit', 'B', 'kB', 'kiB', 'MB', 'MiB', 'GB', 'GiB', 'TB', 'TiB'],
+  baseUnitsMetric: ['bit', 'B', 'o'],
+  baseUnitsBinary: ['bit', 'B', 'o']
+}, {
+  dimension: 'DataTransferRate',
+  units: ['bit/s', 'kbit/s', 'Mbit/s', 'Gbit/s'],
+  baseUnitsMetric: ['bit/s'],
+  baseUnitsBinary: ['bit/s']
+}, {
+  dimension: 'Density',
+  units: ['g/l', 'g/m³', 'kg/m³'],
+  baseUnits: ['lb/in³'],
+  baseUnitsMetric: ['g/m³', 'g/mm³', 'g/cm³', 'g/dm³', 'g/ml', 'g/cl', 'g/dl', 'g/l']
+}, {
+  dimension: 'Dimensionless',
+  units: ['one', '%', 'dB', 'ppm', 'ppb'],
+  default: '%'
+}, {
+  dimension: 'ElectricCapcitance',
+  baseUnitsMetric: ['F']
+}, {
+  dimension: 'ElectricCharge',
+  units: ['Ah', 'C'],
+  baseUnitsMetric: ['C']
+}, {
+  dimension: 'ElectricConductance',
+  baseUnitsMetric: ['S']
+}, {
+  dimension: 'ElectricConductivity',
+  baseUnitsMetric: ['S/m']
+}, {
+  dimension: 'ElectricCurrent',
+  baseUnitsMetric: ['A']
+}, {
+  dimension: 'ElectricInductance',
+  baseUnitsMetric: ['H']
+}, {
+  dimension: 'ElectricPotential',
+  baseUnitsMetric: ['V']
+}, {
+  dimension: 'ElectricResistance',
+  baseUnitsMetric: ['Ω']
+}, {
+  dimension: 'Energy',
+  units: ['kWh', 'Wh', 'J', 'kJ', 'cal', 'kcal'],
+  baseUnitsMetric: ['Ws', 'Wh', 'J', 'cal']
+}, {
+  dimension: 'Force',
+  units: ['N', 'kN'],
+  baseUnitsMetric: ['N']
+}, {
+  dimension: 'Frequency',
+  units: ['Hz', 'kHz', 'MHz', 'GHz', 'rpm'],
+  baseUnitsMetric: ['Hz']
+}, {
+  dimension: 'Intensity',
+  units: ['W/m²', 'µW/cm²'],
+  baseUnitsMetric: ['W/mm²', 'W/cm²', 'W/dm²', 'W/m²']
+}, {
+  dimension: 'Length',
+  unitsSI: ['mm', 'cm', 'dm', 'm', 'km'],
+  unitsUS: ['in', 'ft', 'mi'],
+  baseUnits: ['yd', 'ch', 'fur', 'lea']
+}, {
+  dimension: 'LuminousFlux',
+  baseUnitsMetric: ['lm']
+}, {
+  dimension: 'LuminousIntensity',
+  baseUnitsMetric: ['cd']
+}, {
+  dimension: 'MagneticFlux',
+  baseUnitsMetric: ['T']
+}, {
+  dimension: 'Mass',
+  unitsSI: ['mg', 'g', 'kg', 't'],
+  baseUnits: ['lb', 'oz', 'st'],
+  baseUnitsMetric: ['g', 't']
+}, {
+  dimension: 'Power',
+  units: ['W', 'kW', 'VA', 'kVA', 'var', 'kvar', 'dBm'],
+  baseUnits: ['hp', 'kgf', 'lbf'],
+  baseUnitsMetric: ['W', 'VA', 'var']
+}, {
+  dimension: 'Pressure',
+  unitsSI: ['Pa', 'hPa', 'bar', 'mbar', 'mmHg'],
+  unitsUS: ['inHg', 'psi'],
+  baseUnits: ['atm'],
+  baseUnitsMetric: ['Pa', 'bar']
+}, {
+  dimension: 'RadiationAbsorbedDose',
+  baseUnitsMetric: ['Gy']
+}, {
+  dimension: 'RadiationEffectiveDose',
+  baseUnitsMetric: ['Sv']
+}, {
+  dimension: 'Radioactivity',
+  unitsSI: ['Bq', 'Ci'],
+  baseUnitsMetric: ['Ci']
+}, {
+  dimension: 'Speed',
+  unitsSI: ['km/h', 'm/s'],
+  unitsUS: ['mph', 'in/h'],
+  baseUnits: ['kn'],
+  baseUnitsMetric: ['m/s', 'm/h']
+}, {
+  dimension: 'Temperature',
+  unitsSI: ['°C', 'K'],
+  unitsUS: ['°F', 'K'],
+  baseUnits: ['mired']
+}, {
+  dimension: 'Time',
+  units: ['s', 'min', 'h', 'd', 'wk', 'mo', 'y']
+}, {
+  dimension: 'Volume',
+  unitsSI: ['ml', 'cl', 'l', 'm³'],
+  unitsUS: ['gal'],
+  baseUnits: ['in³', 'ft³'],
+  baseUnitsMetric: ['l', 'm³']
+}, {
+  dimension: 'VolumetricFlowRate',
+  unitsSI: ['l/s', 'l/min', 'm³/s', 'm³/min', 'm³/h', 'm³/d'],
+  unitsUS: ['gal/min'],
+  baseUnitsMetric: ['m³/s', 'm³/min', 'm³/h', 'm³/d']
+}]
+
+/**
+ * Metric prefixes for metric base units.
+ * @type {string[]}
+ */
+export const MetricPrefixes = ['y', 'z', 'a', 'f', 'p', 'n', 'µ', 'm', 'c', 'd', 'da', 'h', 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y']
+
+/**
+ * Binary prefixes for binary base units.
+ * @type {string[]}
+ */
+export const BinaryPrefixes = ['ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi', 'Yi']
diff --git a/bundles/org.openhab.ui/web/src/components/item/group-form.vue b/bundles/org.openhab.ui/web/src/components/item/group-form.vue
index 1d14d4be22..3541fe4bc0 100644
--- a/bundles/org.openhab.ui/web/src/components/item/group-form.vue
+++ b/bundles/org.openhab.ui/web/src/components/item/group-form.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="group-form no-padding">
     <!-- Type -->
-    <f7-list-item v-if="item.type === 'Group'" :disabled="!editable" title="Members Base Type" class="align-popup-list-item" smart-select :smart-select-params="{searchbar: true, openIn: 'popup', closeOnSelect: true}">
+    <f7-list-item v-if="item.type === 'Group'" :disabled="!editable" title="Members Base Type" class="aligned-smart-select" smart-select :smart-select-params="{searchbar: true, openIn: 'popup', closeOnSelect: true}">
       <select name="select-basetype" @change="groupType = $event.target.value">
-        <option v-for="type in types.GroupTypes" :key="type" :value="type" :selected="item.groupType ? type === item.groupType.split(':')[0] : false">
+        <option v-for="type in types.GroupTypes" :key="type" :value="type" :selected="item.groupType ? type === item.groupType : false">
           {{ type }}
         </option>
       </select>
     </f7-list-item>
     <!-- Dimension -->
-    <f7-list-item v-if="dimensions.length && item.groupType && item.groupType.startsWith('Number')" :disabled="!editable" title="Dimension" class="align-popup-list-item" smart-select :smart-select-params="{searchbar: true, openIn: 'popup', closeOnSelect: true}">
+    <f7-list-item v-if="dimensions.length && item.groupType && item.groupType.startsWith('Number')" :disabled="!editable" title="Dimension" class="aligned-smart-select" smart-select :smart-select-params="{searchbar: true, openIn: 'popup', closeOnSelect: true}">
       <select name="select-dimension" @change="groupDimension = $event.target.value">
         <option key="" value="Number" :selected="item.type === 'Number'" />
         <option v-for="d in dimensions" :key="d.name" :value="d.name" :selected="'Number:' + d.name === item.groupType">
@@ -18,18 +18,19 @@
       </select>
     </f7-list-item>
     <!-- (Internal) Unit & State Description -->
-    <template v-if="createMode && groupType && groupDimension">
-      <f7-list-input label="Unit"
-                     type="text"
-                     info="Used internally, for persistence and external systems. It is independent from the state visualization in the UI, which is defined through the state description."
-                     :value="item.unit"
-                     @input="item.unit = $event.target.value" clear-button />
-      <f7-list-input label="State Description Pattern"
-                     type="text"
-                     info="Pattern or transformation applied to the state for display purposes. Only saved if you change the pre-filled default value."
-                     :value="item.stateDescriptionPattern"
-                     @input="item.stateDescriptionPattern = $event.target.value" clear-button />
-    </template>
+    <f7-list-input v-show="groupType && groupDimension && dimensionsReady"
+                   ref="groupUnit"
+                   label="Unit"
+                   type="text"
+                   :info="(createMode) ? 'Type a valid unit for the dimension or select from the proposed units. Used internally, for persistence and external systems. Is independent from state visualization in the UI, which is defined through the state description pattern.' : ''"
+                   :value="groupDimension ? groupUnit : ''"
+                   @change="groupUnit = $event.target.value" :clear-button="editable" />
+    <f7-list-input v-show="groupType && groupDimension"
+                   label="State Description Pattern"
+                   type="text"
+                   :info="(createMode) ? 'Pattern or transformation applied to the state for display purposes. Only saved if you change the pre-filled default value.' : ''"
+                   :value="getStateDescription()"
+                   @input="item.stateDescriptionPattern = $event.target.value" :clear-button:="editable" />
     <!-- Aggregation Functions -->
     <f7-list-item v-if="aggregationFunctions" :disabled="!editable" title="Aggregation Function" class="align-popup-list-item" smart-select :smart-select-params="{openIn: 'popup', closeOnSelect: true}">
       <select name="select-function" @change="groupFunctionKey = $event.target.value">
@@ -60,7 +61,15 @@ export default {
   props: ['item', 'createMode'],
   data () {
     return {
-      types
+      types,
+      groupUnitAutocomplete: null,
+      oldGroupDimension: '',
+      oldGroupUnit: ''
+    }
+  },
+  watch: {
+    dimensionsReady (newValue, oldValue) {
+      if (oldValue === false && newValue === true) this.initializeAutocompleteGroupUnit()
     }
   },
   computed: {
@@ -74,6 +83,9 @@ export default {
       set (newType) {
         const previousAggregationFunctions = this.aggregationFunctions
         this.$set(this.item, 'groupType', '')
+        if (!this.createMode) {
+          this.oldGroupDimension = ''
+        }
         this.$nextTick(() => {
           if (newType !== 'None') {
             this.$set(this.item, 'groupType', newType)
@@ -86,18 +98,32 @@ export default {
     },
     groupDimension: {
       get () {
-        const parts = this.item.groupType.split(':')
-        return parts.length > 1 ? parts[1] : ''
+        const parts = this.item.groupType?.split(':')
+        return parts && parts.length > 1 ? parts[1] : ''
       },
       set (newDimension) {
+        if (!this.createMode) {
+          this.oldGroupDimension = this.groupDimension
+        }
         if (!newDimension) {
           this.groupType = 'Number'
           return
         }
         const dimension = this.dimensions.find((d) => d.name === newDimension)
         this.$set(this.item, 'groupType', 'Number:' + dimension.name)
-        this.$set(this.item, 'unit', dimension.systemUnit)
-        this.$set(this.item, 'stateDescriptionPattern', `%.0f ${dimension.systemUnit}`)
+        this.groupUnit = this.getUnitHint(dimension.name)
+        this.$set(this.item, 'stateDescriptionPattern', this.getStateDescription())
+      }
+    },
+    groupUnit: {
+      get () {
+        return this.unit
+      },
+      set (newUnit) {
+        if (!this.createMode) {
+          this.oldGroupUnit = this.unit
+        }
+        this.$set(this.item, 'unit', newUnit)
       }
     },
     groupFunctionKey: {
@@ -146,7 +172,71 @@ export default {
         this.item.functionKey += '_' + this.item.function.params.join('_')
       }
     } else {
-      this.$set(this.item, 'functionKey', '')
+      this.$set(this.item, 'functionKey', 'None')
+    }
+  },
+  methods: {
+    dimensionChanged () {
+      if (!this.oldGroupDimension) {
+        return false
+      }
+      return this.oldGroupDimension !== this.dimension
+    },
+    unitChanged () {
+      return this.oldGroupUnit && this.item.unit && this.oldGroupUnit !== this.item.unit
+    },
+    revertDimensionChange () {
+      if (!this.oldGroupDimension) {
+        this.groupType = 'Number'
+        this.$set(this.item, 'unit', '')
+      } else {
+        this.groupType = 'Number:' + this.oldGroupDimension
+        this.$set(this.item, 'unit', this.oldGroupUnit)
+      }
+    },
+    getStateDescription () {
+      return this.item.stateDescriptionPattern ? this.item.stateDescriptionPattern : '%.0f %unit%'
+    },
+    initializeAutocompleteGroupUnit () {
+      const self = this
+      const unitControl = this.$refs.groupUnit
+      if (!unitControl || !unitControl.$el) return
+      const inputElement = this.$$(unitControl.$el).find('input')
+      this.groupUnitAutocomplete = this.$f7.autocomplete.create({
+        inputEl: inputElement,
+        openIn: 'dropdown',
+        dropdownPlaceholderText: self.getUnitHint(this.dimension),
+        source (query, render) {
+          let curatedUnits = self.groupDimension ? self.getUnitList(self.groupDimension) : []
+          let allUnits = self.groupDimension ? self.getFullUnitList(self.groupDimension) : []
+          if (!query || !query.length) {
+          // Render curated list by default
+            render(curatedUnits)
+          } else {
+            let units = curatedUnits.filter(u => u.indexOf(query) >= 0)
+            if (units.length) {
+              // Show full curated list if in curated list
+              render(curatedUnits)
+            } else {
+              // If no match filter on full list
+              render(allUnits.filter(u => u.indexOf(query) >= 0))
+            }
+          }
+        }
+      })
+    }
+  },
+  mounted () {
+    if (!this.createMode && this.groupDimension) {
+      this.oldGroupDimension = this.groupDimension
+      this.oldGroupUnit = this.groupUnit
+      if (this.dimensionsReady) this.initializeAutocompleteGroupUnit()
+    }
+  },
+  beforeDestroy () {
+    if (this.groupUnitAutocomplete) {
+      this.$f7.autocomplete.destroy(this.groupUnitAutocomplete)
+      this.groupUnitAutocomplete = null
     }
   }
 }
diff --git a/bundles/org.openhab.ui/web/src/components/item/item-form.vue b/bundles/org.openhab.ui/web/src/components/item/item-form.vue
index a1fc5d6d0a..200b80a402 100644
--- a/bundles/org.openhab.ui/web/src/components/item/item-form.vue
+++ b/bundles/org.openhab.ui/web/src/components/item/item-form.vue
@@ -9,51 +9,51 @@
         <f7-list-input label="Label" type="text" placeholder="Item label for display purposes" :value="item.label"
                        @input="item.label = $event.target.value" :disabled="!editable" :clear-button="editable" />
       </f7-list-group>
-      <f7-list-group v-if="itemType && !hideType">
+      <f7-list-group v-if="!hideType" v-show="itemType">
         <!-- Type -->
-        <f7-list-item v-if="itemType && !hideType" title="Type" class="aligned-smart-select" :disabled="!editable" :key="'type-' + itemType" smart-select :smart-select-params="{searchbar: true, openIn: 'popup', closeOnSelect: true}">
-          <select name="select-type" @change="item.type = $event.target.value">
+        <f7-list-item title="Type" class="aligned-smart-select" :disabled="!editable" :key="'type-' + itemType" smart-select :smart-select-params="{searchbar: true, openIn: 'popup', closeOnSelect: true}">
+          <select name="select-type" @change="itemType = $event.target.value">
             <option v-for="t in types.ItemTypes" :key="t" :value="t" :selected="t === itemType">
               {{ t }}
             </option>
           </select>
         </f7-list-item>
         <!-- Dimensions -->
-        <f7-list-item v-if="dimensions.length && !hideType && itemType === 'Number'" title="Dimension" class="aligned-smart-select" :disabled="!editable" :key="'dimension-' + itemDimension" smart-select :smart-select-params="{searchbar: true, openIn: 'popup', closeOnSelect: true}">
-          <select name="select-dimension" @change="setDimension($event.target.value)">
-            <option key="" value="Number" :selected="itemDimension === ''" />
+        <f7-list-item v-if="dimensions.length && itemType === 'Number'" title="Dimension" class="aligned-smart-select" :disabled="!editable" :key="'dimension-' + itemDimension" smart-select :smart-select-params="{searchbar: true, openIn: 'popup', closeOnSelect: true}">
+          <select name="select-dimension" @change="itemDimension = $event.target.value">
+            <option key="" value="" :selected="itemDimension === ''" />
             <option v-for="d in dimensions" :key="d.name" :value="d.name" :selected="d.name === itemDimension">
               {{ d.label }}
             </option>
           </select>
         </f7-list-item>
         <!-- (Internal) Unit & State Description -->
-        <!-- Use v-show instead of v-if, because otherwise the autocomplete for category would take over the unit -->
-        <f7-list-input v-show="itemDimension && createMode"
+        <!-- Use v-show instead of v-if, because otherwise the autocomplete for unit cannot be initialized -->
+        <f7-list-input v-show="itemDimension && dimensionsReady"
+                       ref="unit"
                        label="Unit"
                        type="text"
-                       info="Used internally, for persistence and external systems. It is independent from the state visualization in the UI, which is defined through the state description."
+                       :info="(createMode) ? 'Type a valid unit for the dimension or select from the proposed units. Used internally, for persistence and external systems. Is independent from state visualization in the UI, which is defined through the state description pattern.' : ''"
                        :disabled="!editable"
-                       :value="item.unit"
-                       @input="item.unit = $event.target.value"
-                       :clear-button="editable" />
-        <f7-list-input v-show="itemDimension && createMode"
+                       :value="itemDimension ? itemUnit : ''"
+                       @change="itemUnit = $event.target.value" />
+        <f7-list-input v-show="itemDimension"
                        label="State Description Pattern"
                        type="text"
-                       info="Pattern or transformation applied to the state for display purposes. Only saved if you change the pre-filled default value."
+                       :info="(createMode) ? 'Pattern or transformation applied to the state for display purposes. Only saved if you change the pre-filled default value.' : ''"
                        :disabled="!editable"
-                       :value="item.stateDescriptionPattern"
+                       :value="getStateDescription()"
                        @input="item.stateDescriptionPattern = $event.target.value"
                        :clear-button="editable" />
 
         <!-- Group Item Form -->
-        <group-form v-if="itemType === 'Group'" :item="item" :createMode="createMode" />
+        <group-form ref="groupForm" v-if="itemType === 'Group'" :item="item" :createMode="createMode" />
       </f7-list-group>
       <f7-list-group v-if="!hideCategory">
-        <f7-list-input ref="category" label="Category" autocomplete="off" type="text" placeholder="temperature, firstfloor..." :value="item.category"
-                       @input="item.category = $event.target.value" :disabled="!editable" :clear-button="editable">
+        <f7-list-input ref="category" label="Category" autocomplete="off" type="text" placeholder="temperature, firstfloor..." :value="itemCategory"
+                       @input="itemCategory = $event.target.value" :disabled="!editable" :clear-button="editable">
           <div slot="root-end" style="margin-left: calc(35% + 14px)">
-            <oh-icon :icon="item.category" :state="(createMode) ? null : item.state" height="32" width="32" />
+            <oh-icon :icon="itemCategory" :state="(createMode) ? null : item.state" height="32" width="32" />
           </div>
         </f7-list-input>
       </f7-list-group>
@@ -98,7 +98,7 @@ import uomMixin from '@/components/item/uom-mixin'
 
 export default {
   mixins: [ItemMixin, uomMixin],
-  props: ['item', 'items', 'createMode', 'hideCategory', 'hideType', 'hideSemantics', 'forceSemantics'],
+  props: ['item', 'items', 'createMode', 'hideCategory', 'hideType', 'hideSemantics', 'forceSemantics', 'unitHint'],
   components: {
     SemanticsPicker,
     ItemPicker,
@@ -108,9 +108,16 @@ export default {
   data () {
     return {
       types,
-      categoryInputId: '',
+      unitAutocomplete: null,
       categoryAutocomplete: null,
-      nameErrorMessage: ''
+      nameErrorMessage: '',
+      oldItemDimension: (!this.createMode && this.item.type.split(':').length > 1) ? this.item.type.split(':')[1] : '',
+      oldItemUnit: !this.createMode ? (this.unit || '') : ''
+    }
+  },
+  watch: {
+    dimensionsReady (newValue, oldValue) {
+      if (oldValue === false && newValue === true) this.initializeAutocompleteUnit()
     }
   },
   computed: {
@@ -120,34 +127,123 @@ export default {
     numberOfGroups () {
       return this.item.groupNames?.length.toString() || '0'
     },
-    itemType () {
-      return this.item.type.split(':')[0]
+    itemType: {
+      get () {
+        return this.item.type.split(':')[0]
+      },
+      set (newType) {
+        if (!this.createMode) {
+          this.oldItemDimension = this.itemDimension
+        }
+        this.$set(this.item, 'type', newType)
+      }
     },
-    itemDimension () {
-      const parts = this.item.type.split(':')
-      return parts.length > 1 ? parts[1] : ''
-    }
-  },
-  watch: {
-    // Required for pre-filling unit and state description pattern fields in "Add Items from Thing" functionality
-    dimensions () {
-      if (this.createMode && this.item.type && this.item.type.startsWith('Number:')) {
-        this.setDimension(this.item.type.split(':')[1])
+    itemDimension: {
+      get () {
+        const parts = this.item.type.split(':')
+        return parts.length > 1 ? parts[1] : ''
+      },
+      set (newDimension) {
+        if (!this.createMode) {
+          this.oldItemDimension = this.itemDimension
+        }
+        if (!newDimension) {
+          this.$set(this.item, 'type', 'Number')
+          return
+        }
+        const dimension = this.dimensions.find((d) => d.name === newDimension)
+        this.$set(this.item, 'type', 'Number:' + dimension.name)
+        this.itemUnit = (this.unitHint ? this.unitHint : this.getUnitHint(dimension.name))
+        this.$set(this.item, 'stateDescription', this.getStateDescription())
+      }
+    },
+    itemUnit: {
+      get () {
+        return this.unit
+      },
+      set (newUnit) {
+        if (!this.createMode) {
+          this.oldItemUnit = this.unit
+        }
+        this.$set(this.item, 'unit', newUnit)
+      }
+    },
+    itemCategory: {
+      get () {
+        return this.item.category || ''
+      },
+      set (newCategory) {
+        this.$set(this.item, 'category', newCategory)
       }
     }
   },
   methods: {
-    setDimension (newDimension) {
-      if (!newDimension) {
-        this.$set(this.item, 'type', 'Number')
+    dimensionChanged () {
+      if (this.$refs.groupForm && this.$refs.groupForm.dimensionChanged()) return true
+      if (!this.oldItemDimension) return false
+      return this.oldItemDimension !== this.dimension
+    },
+    unitChanged () {
+      if (this.$refs.groupForm && this.$refs.groupForm.unitChanged()) return true
+      return this.oldItemUnit && this.item.unit && this.oldItemUnit !== this.item.unit
+    },
+    revertDimensionChange () {
+      if (this.itemType === 'Group') {
+        this.$refs.groupForm.revertDimensionChange()
         return
       }
-      const dimension = this.dimensions.find((d) => d.name === newDimension)
-      this.$set(this.item, 'type', 'Number:' + dimension.name)
-      this.$set(this.item, 'unit', dimension.systemUnit)
-      this.$set(this.item, 'stateDescriptionPattern', `%.0f ${dimension.systemUnit}`)
+      if (!this.oldItemDimension) {
+        this.$set(this.item, 'type', 'Number')
+        this.$set(this.item, 'unit', '')
+      } else {
+        this.$set(this.item, 'type', 'Number:' + this.oldItemDimension)
+        this.$set(this.item, 'unit', this.oldItemUnit)
+      }
     },
-    initializeAutocomplete (inputElement) {
+    getStateDescription () {
+      return this.item.stateDescriptionPattern ? this.item.stateDescriptionPattern : '%.0f %unit%'
+    },
+    initializeAutocompleteUnit () {
+      if (this.hideType) return
+      const self = this
+      const unitControl = this.$refs.unit
+      if (!unitControl || !unitControl.$el) return
+      const inputElement = this.$$(unitControl.$el).find('input')
+      this.unitAutocomplete = this.$f7.autocomplete.create({
+        inputEl: inputElement,
+        openIn: 'dropdown',
+        dropdownPlaceholderText: self.itemDimension ? self.getUnitHint(self.itemDimension) : '',
+        source (query, render) {
+          if (!self.itemDimension) {
+            render([])
+          }
+          // item.unit can be set to unitHint from channel type, make sure it is at beginning of list
+          let curatedUnits = self.itemDimension ? self.getUnitList(self.itemDimension) : []
+          if (self.item.unit) {
+            curatedUnits = [...new Set([self.item.unit].concat(curatedUnits))]
+          }
+          let allUnits = self.itemDimension ? self.getFullUnitList(self.itemDimension) : []
+          if (!query || !query.length) {
+          // Render curated list by default
+            render(curatedUnits)
+          } else {
+            let units = curatedUnits.filter(u => u.indexOf(query) >= 0)
+            if (units.length) {
+              // Show full curated list if in curated list
+              render(curatedUnits)
+            } else {
+              // If no match filter on full list
+              render(allUnits.filter(u => u.indexOf(query) >= 0))
+            }
+          }
+        }
+      })
+    },
+    initializeAutocompleteCategory () {
+      if (this.hideCategory) return
+      const categoryControl = this.$refs.category
+      if (!categoryControl || !categoryControl.$el) return
+      const inputElement = this.$$(categoryControl.$el).find('input')
       this.categoryAutocomplete = this.$f7.autocomplete.create({
         inputEl: inputElement,
         openIn: 'dropdown',
@@ -174,14 +270,17 @@ export default {
   },
   mounted () {
     if (!this.item) return
-    const categoryControl = this.$refs.category
-    if (!categoryControl || !categoryControl.$el) return
-    const inputElement = this.$$(categoryControl.$el).find('input')
-    this.initializeAutocomplete(inputElement)
+    this.initializeAutocompleteCategory()
+    if (this.dimensionsReady) this.initializeAutocompleteUnit()
   },
   beforeDestroy () {
+    if (this.unitAutocomplete) {
+      this.$f7.autocomplete.destroy(this.unitAutocomplete)
+      this.unitAutocomplete = null
+    }
     if (this.categoryAutocomplete) {
       this.$f7.autocomplete.destroy(this.categoryAutocomplete)
+      this.categoryAutocomplete = null
     }
   }
 }
diff --git a/bundles/org.openhab.ui/web/src/components/item/item-mixin.js b/bundles/org.openhab.ui/web/src/components/item/item-mixin.js
index 12283832ef..81d91161b8 100644
--- a/bundles/org.openhab.ui/web/src/components/item/item-mixin.js
+++ b/bundles/org.openhab.ui/web/src/components/item/item-mixin.js
@@ -44,8 +44,9 @@ export default {
     },
     /**
      * Save an Item, i.e. add a new Item or update an existing Item.
+     * If the Item is an UoM Item, unit metadata is saved as well.
      *
-     * If a new Item is created (checks `this.createMode`), and it is an UoM Item, unit metadata and state description (if changed from the default) metadata are saved as well.
+     * If a new Item is created (checks `this.createMode`), and it is an UoM Item, state description (if changed from the default) metadata is also saved.
      *
      * @param item
      * @returns {Promise}
@@ -62,7 +63,7 @@ export default {
       // TODO: Add support for saving metadata
       return this.$oh.api.put('/rest/items/' + item.name, item).then(() => {
         // Save unit metadata if Item is an UoM Item
-        if (this.createMode && (item.type.startsWith('Number:') || item.groupType?.startsWith('Number:')) && unit) {
+        if ((item.type.startsWith('Number:') || item.groupType?.startsWith('Number:')) && unit) {
           const metadata = {
             value: unit,
             config: {}
@@ -73,7 +74,7 @@ export default {
       }).then(() => {
         // Save state description if Item is an UoM Item and if state description changed from the default value
         if (this.createMode && (item.type.startsWith('Number:') || item.groupType?.startsWith('Number:')) && stateDescriptionPattern) {
-          if (stateDescriptionPattern !== `%.0f ${unit}`) {
+          if (stateDescriptionPattern !== '%.0f %unit%') {
             const metadata = {
               value: ' ',
               config: {
diff --git a/bundles/org.openhab.ui/web/src/components/item/uom-mixin.js b/bundles/org.openhab.ui/web/src/components/item/uom-mixin.js
index b7a6d515cf..a282dd764b 100644
--- a/bundles/org.openhab.ui/web/src/components/item/uom-mixin.js
+++ b/bundles/org.openhab.ui/web/src/components/item/uom-mixin.js
@@ -1,7 +1,11 @@
+import { Units, MetricPrefixes, BinaryPrefixes } from '@/assets/units'
+
 export default {
   data () {
     return {
-      dimensions: []
+      measurementSystem: this.$store.state.measurementSystem,
+      dimensions: [],
+      dimensionsReady: false
     }
   },
   created () {
@@ -13,6 +17,123 @@ export default {
           systemUnit: d.systemUnit
         })
       })
-    })
+    }).then(this.dimensionsReady = true)
+  },
+  computed: {
+    /**
+     * The unit shown in the UI when configuring the Item.
+     * It is pre-filled with the unit hint if in `createMode`, or else the {@link configuredUnit}.
+     * @returns {string}
+     */
+    unit () {
+      if (!this.item) return ''
+      if (!this.dimensionsReady) return ''
+      return this.item.unit ? this.item.unit : (this.createMode ? this.getUnitHint(this.dimension) : this.configuredUnit)
+    },
+    /**
+     * The unit currently configured and used by the openHAB server.
+     * @returns {string}
+     */
+    configuredUnit () {
+      if (!this.item) return ''
+      if (this.item.unitSymbol) return this.item.unitSymbol
+      if (!this.dimensionsReady) return ''
+      return this.item.type === 'Group' ? this.getSystemUnit(this.groupDimension) : this.getSystemUnit(this.itemDimension)
+    },
+    dimension () {
+      const parts = this.item.type === 'Group' ? this.item.groupType?.split(':') : this.item.type?.split(':')
+      return parts && parts.length > 1 ? parts[1] : ''
+    }
+  },
+  methods: {
+    getSystemUnit (dimension) {
+      return this.dimensions.find(d => d.name === dimension)?.systemUnit
+    },
+    getUnitHint (dimension, channelType) {
+      const units = ((channelType && channelType.unitHint) ? channelType.unitHint : '').split(',')
+      let unitHint = (this.measurementSystem === 'US' && units.length > 1) ? units[1].trim() : units[0].trim()
+      if (!unitHint) {
+        const unitCurated = Units.find(u => u.dimension === dimension)
+        if (unitCurated) {
+          if (this.measurementSystem === 'SI' && unitCurated.defaultSI) {
+            unitHint = unitCurated.defaultSI
+          } else if (this.measurementSystem === 'US' && unitCurated.defaultUS) {
+            unitHint = unitCurated.defaultUS
+          } else if (unitCurated.default) {
+            unitHint = unitCurated.default
+          }
+        }
+      }
+      if (!unitHint) {
+        unitHint = this.getSystemUnit(dimension)
+      }
+      return unitHint
+    },
+    /**
+     * Get the list of curated units for the given dimension.
+     * @param dimension
+     * @returns {string[]}
+     */
+    getUnitList (dimension) {
+      let unitList = []
+      const unitCurated = Units.find(u => u.dimension === dimension)
+      if (unitCurated?.units) {
+        unitList = unitList.concat(unitCurated.units)
+      }
+      if (this.measurementSystem === 'SI') {
+        if (unitCurated?.unitsSI) {
+          unitList = unitList.concat(unitCurated.unitsSI)
+        }
+        if (unitCurated?.unitsUS) {
+          unitList = unitList.concat(unitCurated.unitsUS)
+        }
+      } else if (this.measurementSystem === 'US') {
+        if (unitCurated?.unitsUS) {
+          unitList = unitList.concat(unitCurated.unitsUS)
+        }
+        if (unitCurated?.unitsSI) {
+          unitList = unitList.concat(unitCurated.unitsSI)
+        }
+      }
+      const systemUnit = this.getSystemUnit(dimension)
+      if (systemUnit && !unitList.includes(systemUnit)) {
+        unitList = [systemUnit].concat(unitList)
+      }
+      // remove duplicates
+      unitList = [...new Set(unitList)]
+      return unitList
+    },
+    /**
+     * Get the full list of units for the given dimensions, i.e. the curated units plus all base units with all prefixes.
+     * @param dimension
+     * @returns {string[]}
+     */
+    getFullUnitList (dimension) {
+      let unitList = []
+      const unit = Units.find(u => u.dimension === dimension)
+      let units = unit?.baseUnits
+      if (units) {
+        unitList = unitList.concat(units)
+      }
+      let metricUnits = unit?.baseUnitsMetric?.flatMap(
+        u => MetricPrefixes.map(
+          p => p.concat(u)
+        ))
+      if (metricUnits) {
+        unitList = unitList.concat(metricUnits)
+      }
+      let binaryUnits = unit?.baseUnitsBinary?.flatMap(
+        u => BinaryPrefixes.map(
+          p => p.concat(u)
+        ))
+      if (binaryUnits) {
+        unitList = unitList.concat(binaryUnits)
+      }
+      // Make sure all curated units are also included at top, even if missing info in units.js
+      // This avoids having to double define them if they are already all in the curated list
+      unitList = unitList.concat(this.getUnitList(dimension))
+      unitList = [...new Set(unitList)]
+      return unitList
+    }
   }
 }
diff --git a/bundles/org.openhab.ui/web/src/components/thing/channel-list.vue b/bundles/org.openhab.ui/web/src/components/thing/channel-list.vue
index 05d0d42613..413c8fb25b 100644
--- a/bundles/org.openhab.ui/web/src/components/thing/channel-list.vue
+++ b/bundles/org.openhab.ui/web/src/components/thing/channel-list.vue
@@ -47,8 +47,8 @@
                               :thing="thing" :channelId="channelId" :channelType="channelType" :channel="channel" :extensible="extensible" :context="context"
                               @channel-updated="(e) => $emit('channels-updated', e)" />
               </template>
-              <template #default="{ channel }" v-else-if="multipleLinksMode">
-                <item-form v-if="isChecked(channel)" :item="newItem(channel)" :items="items" :createMode="true" :channel="channel" :checked="isChecked(channel)" />
+              <template #default="{ channelType, channel }" v-else-if="multipleLinksMode">
+                <item-form v-if="isChecked(channel)" :item="newItem(channel)" :items="items" :createMode="true" :channel="channel" :checked="isChecked(channel)" :unitHint="getUnitHint(channel, channelType)" />
               </template>
               <!-- <channel-link #default="{ channelId }" /> -->
             </channel-group>
@@ -93,7 +93,10 @@ import ChannelGroup from './channel-group.vue'
 import ChannelLink from './channel-link.vue'
 import ItemForm from '@/components/item/item-form.vue'
 
+import uomMixin from '@/components/item/uom-mixin'
+
 export default {
+  mixins: [uomMixin],
   props: ['thingType', 'thing', 'channelTypes', 'items', 'pickerMode', 'multipleLinksMode', 'itemTypeFilter', 'newItemsPrefix', 'newItems', 'context'],
   components: {
     ChannelGroup,
@@ -196,11 +199,16 @@ export default {
           label: channel.label || channelType.label,
           category: (channelType) ? channelType.category : '',
           type: channel.itemType,
+          unit: this.channelUnit(channel, channelType),
           tags: (defaultTags.find((t) => this.$store.getters.semanticClasses.Points.indexOf(t) >= 0)) ? defaultTags : [...defaultTags, 'Point']
         }
         this.newItems.push(newItem)
       }
     },
+    channelUnit (channel, channelType) {
+      const dimension = channel.itemType.startsWith('Number:') ? channel.itemType.split(':')[1] : ''
+      return dimension ? this.getUnitHint(dimension, channelType) : ''
+    },
     toggleAllChecks (checked) {
       this.thing.channels.forEach((c) => {
         const channelType = this.channelTypesMap.get(c.channelTypeUID)
diff --git a/bundles/org.openhab.ui/web/src/js/store/index.js b/bundles/org.openhab.ui/web/src/js/store/index.js
index 5bbef66241..a06f9bd61b 100644
--- a/bundles/org.openhab.ui/web/src/js/store/index.js
+++ b/bundles/org.openhab.ui/web/src/js/store/index.js
@@ -20,6 +20,7 @@ const store = new Vuex.Store({
   },
   state: {
     apiVersion: null,
+    measurementSystem: null,
     apiEndpoints: null,
     locale: null,
     runtimeInfo: null,
@@ -34,6 +35,7 @@ const store = new Vuex.Store({
   mutations: {
     setRootResource (state, { rootResponse }) {
       state.apiVersion = rootResponse.version
+      state.measurementSystem = rootResponse.measurementSystem
       state.runtimeInfo = rootResponse.runtimeInfo
       state.apiEndpoints = rootResponse.links
       state.websiteUrl = `https://${rootResponse.runtimeInfo?.buildString !== 'Release Build' ? 'next' : 'www'}.openhab.org`
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue
index 1467f84cac..8836371e28 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue
@@ -27,7 +27,7 @@
             </div>
           </f7-col>
           <f7-col>
-            <item-form :item="item" :items="items" :createMode="createMode" />
+            <item-form ref="itemForm" :item="item" :items="items" :createMode="createMode" />
           </f7-col>
 
           <div class="flex-shrink-0 if-aurora display-flex justify-content-center">
@@ -179,6 +179,25 @@ export default {
       if (this.validateItemName(this.item.name) !== '') return this.$f7.dialog.alert('Please give the Item a valid name: ' + this.validateItemName(this.item.name)).open()
       if (!this.item.type || !this.types.ItemTypes.includes(this.item.type.split(':')[0])) return this.$f7.dialog.alert('Please give Item a valid type').open()
 
+      const dimensionChange = this.$refs.itemForm.dimensionChanged()
+      const unitChange = this.$refs.itemForm.unitChanged()
+      if (dimensionChange || unitChange) {
+        const title = 'WARNING: ' + (dimensionChange ? 'Dimension' : 'Unit') + ' Changed'
+        const text = dimensionChange ? 'Existing links to channels with dimension may no longer be valid!' : 'Changing the internal unit can corrupt your persisted data and affect rules!'
+        return this.$f7.dialog.create({
+          title: title,
+          text: text,
+          buttons: [
+            { text: 'Cancel', color: 'gray', close: true, onClick: () => this.$refs.itemForm.revertDimensionChange() },
+            { text: 'Save Anyway', color: 'red', close: true, onClick: () => this.doSave() }
+          ],
+          destroyOnClose: true
+        }).open()
+      } else {
+        this.doSave()
+      }
+    },
+    doSave () {
       this.saveItem(this.item).then(() => {
         if (this.createMode) {
           this.$f7.toast.create({
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/link/link-add.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/link/link-add.vue
index 664ba9f1e7..cbc15303eb 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/things/link/link-add.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/things/link/link-add.vue
@@ -43,7 +43,7 @@
 
         <!-- Create new item -->
         <f7-col v-else>
-          <item-form :item="newItem" :items="items" :createMode="true" />
+          <item-form ref="itemForm" :item="newItem" :items="items" :createMode="true" :unitHint="linkUnit()" />
         </f7-col>
       </template>
 
@@ -132,8 +132,10 @@ import Item from '@/components/item/item.vue'
 import * as Types from '@/assets/item-types.js'
 import ItemMixin from '@/components/item/item-mixin'
 
+import uomMixin from '@/components/item/uom-mixin'
+
 export default {
-  mixins: [ItemMixin],
+  mixins: [ItemMixin, uomMixin],
   components: {
     ConfigSheet,
     ItemPicker,
@@ -197,9 +199,14 @@ export default {
         category: (this.channelType) ? this.channelType.category : '',
         groupNames: [],
         type: this.channel.itemType || 'Switch',
+        unit: this.linkUnit(),
         tags: (defaultTags.find((t) => this.$store.getters.semanticClasses.Points.indexOf(t) >= 0)) ? defaultTags : [...defaultTags, 'Point']
       })
     },
+    linkUnit () {
+      const dimension = this.channel.itemType.startsWith('Number:') ? this.channel.itemType.split(':')[1] : ''
+      return dimension ? this.getUnitHint(dimension, this.channelType) : ''
+    },
     loadProfileTypes (channel) {
       this.ready = false
       this.selectedChannel = channel