fix(ui): allow manual entry on config values with states (#781)

zwave-js · Mar 1, 2021 · a45f763 · a45f763
1 parent ea960db
commit a45f763
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/lib/ZwaveClient.js b/lib/ZwaveClient.js
@@ -986,6 +986,7 @@ function updateValueMetadata (zwaveNode, zwaveValue, zwaveValueMeta) {
 
   if (zwaveValueMeta.states) {
     valueId.list = true
+    valueId.allowManualEntry = zwaveValueMeta.allowManualEntry
     valueId.states = []
     for (const k in zwaveValueMeta.states) {
       valueId.states.push({

diff --git a/src/components/ValueId.vue b/src/components/ValueId.vue
@@ -103,7 +103,7 @@
       </v-text-field>
 
       <v-select
-        v-if="value.list"
+        v-if="value.list && !value.allowManualEntry"
         :items="items"
         :style="{
           'max-width': $vuetify.breakpoint.smAndDown
@@ -120,6 +120,35 @@
         @click:append-outer="updateValue(value)"
       ></v-select>
 
+      <v-combobox
+        v-if="value.list && value.allowManualEntry"
+        :items="items"
+        :style="{
+          'max-width': $vuetify.breakpoint.smAndDown
+            ? '280px'
+            : $vuetify.breakpoint.smOnly
+            ? '400px'
+            : 'auto'
+        }"
+        :hint="help"
+        persistent-hint
+        chips
+        item-text="text"
+        item-value="value"
+        :append-outer-icon="!disable_send || value.writeable ? 'send' : null"
+        v-model="value.newValue"
+        :readonly="!value.writeable"
+        @click:append-outer="updateValue(value)"
+      >
+        <template v-slot:selection="{ attrs, item, selected }">
+          <v-chip v-bind="attrs" :input-value="selected">
+            <span>
+              {{ selectedItem ? selectedItem.text : 'Custom: ' + item }}
+            </span>
+          </v-chip>
+        </template>
+      </v-combobox>
+
       <div v-if="value.type == 'boolean' && value.writeable && value.readable">
         <v-btn-toggle class="mt-4" v-model="value.newValue" rounded>
           <v-btn
@@ -196,6 +225,10 @@ export default {
     }
   },
   computed: {
+    selectedItem () {
+      if (!this.items) return null
+      else return this.items.find(v => v.value === this.value.newValue)
+    },
     items () {
       const items = this.value.states || []
       const defaultValue = this.value.default