State description metadata: Allow to select transformations from list (#2752)

Resolves #1944.

When entering a state description pattern, an autocomplete list
is provided containing the available transformations.

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

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="ready">
     <config-sheet v-if="namespace === 'stateDescription'" :parameterGroups="[]" :parameters="stateDescriptionParameters" :configuration="metadata.config" />
     <f7-list>
       <f7-list-input
@@ -35,34 +35,53 @@ export default {
   },
   data () {
     return {
-      stateDescriptionParameters: [
-        { type: 'BOOLEAN', name: 'readOnly', label: 'Read only', description: 'Item is read-only and should not accept commands' },
-        { type: 'TEXT', name: 'pattern', label: 'Pattern', description: 'Pattern or transformation applied to the state for display purposes' },
-        { type: 'TEXT', name: 'min', label: 'Min', description: 'Minimum allowed value' },
-        { type: 'TEXT', name: 'max', label: 'Max', description: 'Maximum allowed value' },
-        { type: 'TEXT', name: 'step', label: 'Step', description: 'Minimum interval between values' }
-      ],
-      docUrl: `https://${this.$store.state.runtimeInfo?.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org` +
-        '/link/thing'
+      ready: false,
+      transformations: []
     }
   },
   computed: {
+    stateDescriptionParameters () {
+      const options = this.transformations
+        .map((t) => { return { label: t.label, value: `${t.type.toUpperCase()}(${t.uid}):%s` } })
+        .sort((a, b) => (a.label).localeCompare(b.label))
+      return [
+        { type: 'BOOLEAN', name: 'readOnly', label: 'Read only', description: 'Item is read-only and should not accept commands' },
+        { type: 'TEXT', name: 'pattern', label: 'Pattern', description: 'Pattern or transformation applied to the state for display purposes', options, limitToOptions: false },
+        { type: 'TEXT', name: 'min', label: 'Min', description: 'Minimum allowed value' },
+        { type: 'TEXT', name: 'max', label: 'Max', description: 'Maximum allowed value' },
+        { type: 'TEXT', name: 'step', label: 'Step', description: 'Minimum interval between values' }
+      ]
+    },
     options () {
       if (!this.metadata.config.options) return []
       return this.metadata.config.options.trim().split(',').map((s) => s.trim()).join('\n')
     },
     docLink () {
+      const docUrl = `${this.$store.state.websiteUrl}/link/thing`
       if (this.namespace === 'stateDescription') {
-        return `${this.docUrl}#state-description`
+        return docUrl + '#state-description'
       } else {
-        return `${this.docUrl}#command-description`
+        return docUrl + '#command-description'
       }
     }
   },
   methods: {
     updateOptions (ev) {
       this.metadata.config.options = ev.target.value.split('\n').map((s) => s.trim()).join(',').trim()
+    },
+    load () {
+      if (this.namespace === 'commandDescription') {
+        this.ready = true
+        return
+      }
+      this.$oh.api.get('/rest/transformations').then((data) => {
+        this.transformations = data
+        this.ready = true
+      })
     }
+  },
+  created () {
+    this.load()
   }
 }
 </script>

bundles/org.openhab.ui/web/src/pages/settings/transformations/transformation-edit.vue

@@ -68,7 +68,7 @@
               </f7-list-button>
             </f7-list>
             <p class="text-align-center">
-              Tip: Use <code>{{ itemStateTransformationCode }}</code> <clipboard-icon :value="itemStateTransformationCode" tooltip="Copy transformation" /> for Item state transformations.
+              Tip: Use <code>{{ itemStateTransformationCode }}</code> <clipboard-icon :value="itemStateTransformationCode" tooltip="Copy transformation" /> as pattern for Item state description metadata.
             </p>
           </f7-col>
         </f7-block>
@@ -123,7 +123,7 @@ export default {
       return false
     },
     itemStateTransformationCode () {
-      return `${this.transformation.type.toUpperCase()}(${this.transformationId.replace(/:([A-Z][a-z]{1,2}-)?([a-z]{2,3})(-[A-Z]{2,3})?$/, '')})`
+      return `${this.transformation.type.toUpperCase()}(${this.transformation.uid}):%s`
     }
   },
   methods: {