oh-input: Fix editing a number item with unit and accept Enter key

Display the number's unit after the input field for numeric type
Make numeric input field right-aligned
Improve input-elements alignment
Accept Enter key to send the value, with or without a sendButton
Honor useDisplayState config

Signed-off-by: Jimmy Tanagra <[email protected]>

Author: jimtng

bundles/org.openhab.ui/web/src/components/widgets/standard/list/oh-input-item.vue

@@ -1,6 +1,6 @@
 <template>
   <oh-list-item :context="context" class="input-listitem">
-    <div slot="footer" class="padding">
+    <div slot="footer">
       <generic-widget-component :context="childContext(afterComponent)" v-on="$listeners" />
     </div>
   </oh-list-item>

bundles/org.openhab.ui/web/src/components/widgets/system/oh-input.vue

@@ -1,33 +1,47 @@
 <template>
-  <f7-input v-if="!config.item || !config.sendButton" class="input-field" ref="input" v-bind="config" :style="config.style"
-            :value="((config.type && config.type.indexOf('date') === 0) || config.type === 'time') ? valueForDatepicker : value"
-            :calendar-params="calendarParams" :step="config.step ? config.step : 'any'"
-            @input="$evt => updated($evt.target.value)" :change="updated" @calendar:change="updated" @texteditor:change="updated" @colorpicker:change="updated">
-    <template v-if="context.component.slots && context.component.slots.default">
-      <generic-widget-component :context="childContext(slotComponent)" v-for="(slotComponent, idx) in context.component.slots.default" :key="'default-' + idx" />
-    </template>
-  </f7-input>
-  <f7-row no-gap v-else class="oh-input-with-send-button" :style="config.style">
-    <f7-input class="input-field col-80" ref="input" v-bind="config"
+  <f7-row no-gap v-if="!config.item || !config.sendButton" class="oh-input" :style="config.style">
+    <f7-input class="input-field" ref="input" v-bind="config" :style="{width: '100%', ...config.style}"
               :value="((config.type && config.type.indexOf('date') === 0) || config.type === 'time') ? valueForDatepicker : value"
               :calendar-params="calendarParams" :step="config.step ? config.step : 'any'"
+              @focus="listenForEnterKey"
+              @blur="stopListeningForEnterKey"
               @input="$evt => updated($evt.target.value)" :change="updated" @calendar:change="updated" @texteditor:change="updated" @colorpicker:change="updated">
       <template v-if="context.component.slots && context.component.slots.default">
         <generic-widget-component :context="childContext(slotComponent)" v-for="(slotComponent, idx) in context.component.slots.default" :key="'default-' + idx" />
       </template>
     </f7-input>
+    <span v-if="unit" class="unit">{{ unit }}</span>
+  </f7-row>
+  <f7-row no-gap v-else class="oh-input" :style="config.style">
+    <f7-input class="input-field" ref="input" v-bind="config"
+              :value="((config.type && config.type.indexOf('date') === 0) || config.type === 'time') ? valueForDatepicker : value"
+              :calendar-params="calendarParams" :step="config.step ? config.step : 'any'"
+              :style="{ width: '100%' }"
+              @focus="listenForEnterKey"
+              @blur="stopListeningForEnterKey"
+              @input="$evt => updated($evt.target.value)" :change="updated" @calendar:change="updated" @texteditor:change="updated" @colorpicker:change="updated">
+      <template v-if="context.component.slots && context.component.slots.default">
+        <generic-widget-component :context="childContext(slotComponent)" v-for="(slotComponent, idx) in context.component.slots.default" :key="'default-' + idx" />
+      </template>
+    </f7-input>
+    <span v-if="unit" class="unit">{{ unit }}</span>
     <f7-button class="send-button col-10" v-if="this.config.sendButton" @click.stop="sendButtonClicked" v-bind="config.sendButtonConfig || { iconMaterial: 'done', iconColor: 'gray' }" />
   </f7-row>
 </template>
 
 <style lang="stylus">
-.oh-input-with-send-button
+input[type=number]
+  text-align right
+.oh-input
+  flex-wrap nowrap !important
+  align-items center !important
+  .unit
+    margin-left 4px
   .input-field
     padding-left 8px
     padding-right 8px
-    --f7-input-font-size 1rem
   .send-button
-    --f7-button-padding-horizontal 0px
+    --f7-button-padding-horizontal 0
 </style>
 
 <script>
@@ -59,17 +73,23 @@ export default {
         }
       } else if (this.config.variable && variableLocation[this.config.variable] !== undefined) {
         return variableLocation[this.config.variable]
-      } else if (this.config.sendButton && this.pendingUpdate !== null) {
+      } else if (this.pendingUpdate !== null) {
         return this.pendingUpdate
-      } else if (this.config.item && this.context.store[this.config.item].state !== 'NULL' && this.context.store[this.config.item].state !== 'UNDEF' && this.context.store[this.config.item].state !== 'Invalid Date') {
-        if (this.config.useDisplayState) {
-          return this.context.store[this.config.item].displayState || this.context.store[this.config.item].state
-        } else {
-          return this.context.store[this.config.item].state
+      } else if (this.config.item) {
+        const item = this.context.store[this.config.item]
+        if (item.state !== 'NULL' && item.state !== 'UNDEF' && item.state !== 'Invalid Date') {
+          let value = this.config.useDisplayState ? item.displayState || item.state : item.state
+          if (this.unit) {
+            value = value.split(' ')[0]
+          }
+          return value
         }
       }
       return this.config.defaultValue
     },
+    unit () {
+      return this.config.type === 'number' && this.config.item && this.context.store[this.config.item].unit
+    },
     calendarParams () {
       if (this.config.type !== 'datepicker') return null
       let params = { dateFormat: { year: 'numeric', month: 'numeric', day: 'numeric' } }
@@ -121,9 +141,7 @@ export default {
       } else if (this.config.type === 'datepicker' && Array.isArray(value) && this.valueForDatepicker[0].getTime() === value[0].getTime()) {
         return
       }
-      if (this.config.sendButton) {
-        this.$set(this, 'pendingUpdate', value)
-      }
+      this.$set(this, 'pendingUpdate', value)
       if (this.config.variable) {
         const variableScope = this.getVariableScope(this.context.ctxVars, this.context.varScope, this.config.variable)
         const variableLocation = (variableScope) ? this.context.ctxVars[variableScope] : this.context.vars
@@ -133,13 +151,26 @@ export default {
         this.$set(variableLocation, this.config.variable, value)
       }
     },
+    listenForEnterKey (evt) {
+      evt.target.addEventListener('keyup', this.keyUp)
+    },
+    stopListeningForEnterKey (evt) {
+      evt.target.removeEventListener('keyup', this.keyUp)
+    },
+    keyUp (evt) {
+      if (evt.key === 'Enter') {
+        this.sendButtonClicked()
+      }
+    },
     sendButtonClicked () {
       if (this.config.item && this.pendingUpdate) {
         let cmd = this.pendingUpdate
-        if (this.config.type === 'datepicker' && Array.isArray(cmd)) {
+        if (this.unit) {
+          cmd += ' ' + this.unit
+        } else if (this.config.type === 'datepicker' && Array.isArray(cmd)) {
           cmd = dayjs(cmd[0]).format()
+          if (cmd === 'Invalid Date') return
         }
-        if (cmd === 'Invalid Date') return
         this.$store.dispatch('sendCommand', { itemName: this.config.item, cmd })
         this.$set(this, 'pendingUpdate', null)
       }