Various enhancements & fixes to config parameters (#3460)

- thing context: Fix parameter fails with JS error in widgets.
- number context: Validate on any input, not only blur.
- config-sheet: Fix advanced value for parameter groups ignored.
- month context: Initial contribution.
- Add support for serial-port context.
- text parameter: Set input type for email, telephone, color
- time context: Fix picker styling.

---------

Signed-off-by: Florian Hotze <[email protected]>

Author: florian-h05

bundles/org.openhab.ui/web/src/components/config/config-descriptions.d.ts

@@ -0,0 +1,80 @@
+// type definitions for DTOs returned from /rest/config-descriptions endpoints
+
+/**
+ * The supported data types a configuration parameter can take (From ConfigDescriptionParameter.java).
+ */
+export type Type = 'TEXT' | 'INTEGER' | 'DECIMAL' | 'BOOLEAN';
+
+/**
+ * Data transfer object for a static selection list option. (From ParameterOption.java structure)
+ */
+export interface ParameterOption {
+  /** The value of the option. */
+  value: string;
+  /** A human-readable label for the option. */
+  label: string;
+}
+
+/**
+ * Data transfer object for filter criteria for a dynamic selection list.
+ * (Inferred structure based on usage of FilterCriteria in the core model)
+ */
+export interface FilterCriteria {
+  /** The name of the criterion. */
+  name: string;
+  /** The value of the criterion. */
+  value: string;
+}
+
+/**
+ * Data transfer object used to serialize a parameter of a configuration description.
+ * Based on org.openhab.core.config.core.dto.ConfigDescriptionParameterDTO.java.
+ */
+export interface ConfigDescriptionParameter {
+  /** The name of the configuration parameter (must not be null or empty). */
+  name: string;
+  /** The data type of the configuration parameter (must not be null). */
+  type: Type;
+  /** The context of the configuration parameter, a hint for user interfaces and input validators. */
+  context?: string;
+  /** The default value of the configuration parameter (JSON field 'default' or 'defaultValue'). */
+  default?: string;
+  /** The default value of the configuration parameter (JSON field 'default' or 'defaultValue'). */
+  defaultValue?: string;
+  /** A human-readable description for the configuration parameter. */
+  description?: string;
+  /** A human-readable label for the configuration parameter. */
+  label?: string;
+  /** The minimal value for numeric types, minimal length for strings, or minimal number of selected options. */
+  min?: number | string;
+  /** The maximal value for numeric types, maximal length for strings, or maximal number of selected options. */
+  max?: number | string;
+  /** The value granularity for a numeric value. By setting the step size to 0, any granularity is allowed. */
+  stepsize?: number | string;
+  /** The regular expression pattern for a text type. */
+  pattern?: string;
+  /** Specifies whether the value is required. */
+  required?: boolean;
+  /** Specifies whether the value is read-only. */
+  readOnly?: boolean;
+  /** Specifies whether multiple selections of options are allowed. */
+  multiple?: boolean;
+  /** The maximum number of options that can be selected when multiple is true. */
+  multipleLimit?: number;
+  /** A string used to group parameters together into logical blocks so that the UI can display them together. */
+  groupName?: string;
+  /** Specifies if this is an advanced parameter. An advanced parameter can be hidden in the UI. */
+  advanced?: boolean;
+  /** Specifies whether the parameter should be considered dangerous and alert the user. */
+  verify?: boolean;
+  /** Specifies that the user's input is limited to the provided options). */
+  limitToOptions?: boolean;
+  /** Specifies the unit of measurements for the configuration parameter. */
+  unit?: string;
+  /** Specifies the unit label for the configuration parameter. */
+  unitLabel?: string;
+  /** A list of element definitions of a static selection list. */
+  options?: ParameterOption[];
+  /** A list of filter criteria for a dynamically created selection list. */
+  filterCriteria?: FilterCriteria[];
+}

bundles/org.openhab.ui/web/src/components/config/config-parameter.vue

@@ -38,6 +38,8 @@
 </template>
 
 <script>
+import { f7 } from 'framework7-vue'
+
 // import ScriptEditorPopup from './config/script-editor-popup.vue'
 import ParameterThing from './controls/parameter-thing.vue'
 import ParameterBoolean from './controls/parameter-boolean.vue'
@@ -58,7 +60,7 @@ import ParameterProps from './controls/parameter-props.vue'
 import ParameterTriggerChannel from './controls/parameter-triggerchannel.vue'
 import ParameterText from './controls/parameter-text.vue'
 import ParameterQrcode from './controls/parameter-qrcode.vue'
-import { f7 } from 'framework7-vue'
+import ParameterMonth from '@/components/config/controls/parameter-month.vue'
 
 export default {
   props: {
@@ -86,7 +88,7 @@ export default {
     },
     control () {
       const configDescription = this.configDescription
-      if (configDescription.options?.length && configDescription.limitToOptions && (!configDescription.context || configDescription.context === 'network-interface')) {
+      if (configDescription.options?.length && configDescription.limitToOptions && (!configDescription.context || configDescription.context === 'network-interface' || configDescription.context === 'serial-port')) {
         return ParameterOptions
       } else if (configDescription.type === 'INTEGER' || configDescription.type === 'DECIMAL') {
         return ParameterNumber
@@ -98,6 +100,8 @@ export default {
         return ParameterLocation
       } else if (configDescription.type === 'TEXT' && configDescription.context === 'cronexpression') {
         return ParameterCronExpression
+      } else if (configDescription.type === 'TEXT' && configDescription.context === 'month') {
+        return ParameterMonth
       } else if (configDescription.type === 'TEXT' && configDescription.context === 'dayOfWeek') {
         return ParameterDayOfWeek
       } else if (configDescription.type === 'TEXT' && configDescription.context === 'time') {

bundles/org.openhab.ui/web/src/components/config/config-sheet.vue

@@ -25,10 +25,10 @@
         </f7-row>
       </f7-block>
     </f7-col>
-    <f7-col v-if="parameterGroups.length">
+    <f7-col v-if="displayedParameterGroups.length">
       <f7-block width="100"
                 class="parameter-group"
-                v-for="group in parameterGroups"
+                v-for="group in displayedParameterGroups"
                 :key="group.name">
         <f7-row v-if="displayedParameters.some((p) => p.groupName === group.name)">
           <f7-col>
@@ -124,6 +124,11 @@ export default {
     hasAdvanced () {
       return this.parameters.length > 0 && this.parameters.some((p) => p.advanced)
     },
+    displayedParameterGroups () {
+      if (!this.parameterGroups || !this.parameterGroups.length) return []
+      if (this.showAdvanced) return this.parameterGroups
+      return this.parameterGroups.filter((pg) => !pg.advanced)
+    },
     displayedParameters () {
       function notNullNotUndefined (value) {
         return value !== null && value !== undefined

bundles/org.openhab.ui/web/src/components/config/controls/parameter-month.vue

@@ -0,0 +1,80 @@
+<template>
+  <ul>
+    <f7-list-item
+      :title="configDescription.label"
+      smart-select
+      :smart-select-params="smartSelectParams"
+      ref="itemRef">
+      <select :name="configDescription.name"
+              @change="updateValue"
+              :multiple="configDescription.multiple"
+              :required="configDescription.required">
+        <option v-if="!configDescription.required && !configDescription.multiple" :value="undefined" :selected="value === null || value === undefined" />
+        <option v-for="(day, idx) in values"
+                :value="day"
+                :key="day"
+                :selected="isSelected(day)">
+          {{ labels[idx] }}
+        </option>
+      </select>
+    </f7-list-item>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { f7 } from 'framework7-vue'
+
+import type { ConfigDescriptionParameter } from '@/components/config/config-descriptions.d.ts'
+
+const props = defineProps<{
+  configDescription: ConfigDescriptionParameter;
+  value?: string | string[] | null;
+}>()
+
+const emit = defineEmits<{
+  (e: 'input', value: any): void;
+}>()
+
+const labels = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December'
+]
+
+const values = [
+  '01', '02', '03', '04', '05', '06',
+  '07', '08', '09', '10', '11', '12'
+]
+
+const itemRef = ref<any>(null)
+
+const smartSelectParams = {
+  view: f7 ? f7.view.main : null,
+  openIn: 'popover',
+  closeOnSelect: !props.configDescription.multiple
+}
+
+const updateValue = () => {
+  const el = itemRef.value?.$el
+
+  if (el && el.children[0]) {
+    // injected by Framework7 into the DOM node
+    const selectEl = el.children[0] as any
+
+    if (selectEl.f7SmartSelect) {
+      const val = selectEl.f7SmartSelect.getValue()
+      emit('input', val)
+    }
+  }
+}
+
+const isSelected = (option: string) => {
+  if (props.value === null || props.value === undefined) return false
+
+  if (!props.configDescription.multiple) {
+    return props.value === option
+  } else {
+    return props.value.indexOf(option) >= 0
+  }
+}
+</script>

bundles/org.openhab.ui/web/src/components/config/controls/parameter-number.vue

@@ -11,7 +11,6 @@
       @input="updateValue"
       :required="configDescription.required"
       validate
-      validate-on-blur
       :clear-button="false"
       type="number" />
   </ul>

bundles/org.openhab.ui/web/src/components/config/controls/parameter-text.vue

@@ -11,7 +11,7 @@
       no-hairline
       :key="idx"
       :type="controlType"
-      :pattern="configDescription.pattern"
+      :pattern="pattern"
       :autocomplete="options ? 'off' : ''"
       :clear-button="true"
       @input:clear="removeValueIdx(idx)"
@@ -22,7 +22,7 @@
       v-if="!configDescription.readOnly"
       ref="input"
       :type="controlType"
-      :pattern="configDescription.pattern"
+      :pattern="pattern"
       :autocomplete="options ? 'off' : ''"
       :clear-button="false"
       @input:notempty="addValue"
@@ -38,9 +38,10 @@
       :value="value"
       :autocomplete="options ? 'off' : ''"
       :placeholder="configDescription.placeholder"
-      :pattern="configDescription.pattern"
+      :pattern="pattern"
       :required="configDescription.required"
-      validate
+      :validate="!(pattern && pattern.length > 40)"
+      :validate-on-blur="pattern && pattern.length > 40"
       :clear-button="!configDescription.required && configDescription.context !== 'password'"
       @input="updateValue"
       :readonly="configDescription.readOnly"
@@ -72,8 +73,21 @@ export default {
   computed: {
     controlType () {
       if (this.configDescription.context === 'password' && !this.showPassword) return 'password'
+      if (this.configDescription.context === 'email') return 'email'
+      if (this.configDescription.context === 'telephone') return 'tel'
+      if (this.configDescription.context === 'color') return 'color'
       return 'text'
     },
+    pattern () {
+      // validation doesn't work as soon as hostname RegEx is added
+      // if (this.configDescription.context === 'network-address') {
+      //   const hostname = /(?:([a-zA-Z0-9-]+)\.)?([a-zA-Z0-9-]+)\.([a-zA-Z0-9]+)/
+      //   const ipv4 = /((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}/
+      //   const ipv6 = /((?:[0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){1,7}:|:(?::[0-9A-Fa-f]{1,4}){1,7}|(?:[0-9A-Fa-f]{1,4}:){1,6}:[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){1,5}(?::[0-9A-Fa-f]{1,4}){1,2}|(?:[0-9A-Fa-f]{1,4}:){1,4}(?::[0-9A-Fa-f]{1,4}){1,3}|(?:[0-9A-Fa-f]{1,4}:){1,3}(?::[0-9A-Fa-f]{1,4}){1,4}|(?:[0-9A-Fa-f]{1,4}:){1,2}(?::[0-9A-Fa-f]{1,4}){1,5}|[0-9A-Fa-f]{1,4}:(?:(?::[0-9A-Fa-f]{1,4}){1,6})|:(?:(?::[0-9A-Fa-f]{1,4}){1,6}))/
+      //   return `^(?:${ipv4.source}|${ipv6.source}|${hostname.source})$`
+      // }
+      return this.configDescription.pattern
+    },
     multiple () {
       return this.configDescription?.multiple
     },

bundles/org.openhab.ui/web/src/components/config/controls/parameter-thing.vue

@@ -2,7 +2,7 @@
   <thing-picker :title="configDescription.label"
                 :value="value"
                 @input="updateValue"
-                :filter-uid="configDescription.options.map((o) => o.value)"
+                :filter-uid="configDescription.options?.map((o) => o.value)"
                 :multiple="configDescription.multiple"
                 :required="configDescription.required" />
 </template>
@@ -11,6 +11,7 @@
 import ThingPicker from './thing-picker.vue'
 
 export default {
+  inheritAttrs: false,
   props: {
     configDescription: Object,
     value: [String, Array]

bundles/org.openhab.ui/web/src/components/config/controls/parameter-time.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul>
+  <ul class="parameter-time">
     <f7-list-input
       ref="input"
       :floating-label="theme.md"
@@ -10,7 +10,7 @@
       validate
       :clear-button="!configDescription.required"
       @input="updateValue">
-      <template #content-end>
+      <template #root>
         <div class="display-flex justify-content-center">
           <div ref="picker" />
         </div>
@@ -19,6 +19,18 @@
   </ul>
 </template>
 
+<style lang="stylus">
+.parameter-time
+  .picker-columns
+    --f7-picker-mask-bg-color transparent
+  .picker-center-highlight
+    height var(--f7-picker-item-height)
+    left 0
+    margin-top calc(var(--f7-picker-item-height) * -1/2)
+    pointer-events none
+    width 100%
+</style>
+
 <script>
 import { f7, theme } from 'framework7-vue'
 import { nextTick } from 'vue'