Inbox: Navigate to the new Thing(s) once approved

Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>
openhab · Jan 14, 2025 · 1254f2a · 1254f2a
1 parent 6cd61d0
commit 1254f2a
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 39 deletions.
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-thing-type.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-thing-type.vue
@@ -99,6 +99,7 @@ export default {
       ready: false,
       loading: false,
       initSearchbar: false,
+      things: [],
       thingTypes: [],
       discoverySupported: false,
       inputSupported: null,
@@ -137,6 +138,9 @@ export default {
           this.ready = true
         })
       })
+      this.$oh.api.get('/rest/things?summary=true&staticDataOnly=true').then((things) => {
+        this.things = things
+      })
     },
     finishScanning () {
       this.scanning = false
@@ -240,8 +244,7 @@ export default {
             }
           ],
           [
-            this.entryActionsAddAsThingButton(entry, this.loadInbox),
-            this.entryActionsAddAsThingWithCustomIdButton(entry, this.loadInbox)
+            this.entryActionsAddAsThingButton(entry, this.loadInbox)
           ]
         ]
       })

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/inbox/inbox-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/inbox/inbox-list.vue
@@ -144,6 +144,7 @@ export default {
       ready: false,
       loading: false,
       initSearchbar: false,
+      things: [], // for validating thingUIDs against existing things
       inbox: [],
       // indexedInbox: {},
       selectedItems: [],
@@ -194,7 +195,6 @@ export default {
         this.inbox = data.sort((a, b) => a.label.localeCompare(b.label))
         this.initSearchbar = true
         this.loading = false
-        this.ready = true
         setTimeout(() => {
           this.$refs.listIndex.update()
           this.$nextTick(() => {
@@ -203,6 +203,10 @@ export default {
             }
           })
         })
+        this.$oh.api.get('/rest/things?summary=true&staticDataOnly=true').then((things) => {
+          this.things = things
+          this.ready = true
+        })
       })
     },
     switchGroupOrder (groupBy) {
@@ -260,7 +264,6 @@ export default {
           ],
           [
             this.entryActionsAddAsThingButton(entry, this.load),
-            this.entryActionsAddAsThingWithCustomIdButton(entry, this.load),
             {
               text: (!ignored) ? 'Ignore' : 'Unignore',
               color: (!ignored) ? 'orange' : 'blue',
@@ -417,9 +420,12 @@ export default {
           destroyOnClose: true,
           closeTimeout: 2000
         }).open()
-        this.selectedItems = []
         dialog.close()
-        this.load()
+        this.$f7router.navigate('/settings/things/', {
+          props: {
+            searchFor: this.selectedItems.join(',')
+          }
+        })
       }).catch((err) => {
         dialog.close()
         this.load()

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/thing-inbox-mixin.js b/bundles/org.openhab.ui/web/src/pages/settings/things/thing-inbox-mixin.js
@@ -1,4 +1,7 @@
+import ThingMixin from '@/components/thing/thing-mixin'
+
 export default {
+  mixins: [ThingMixin],
   methods: {
     /**
      * Approve the given entry from the inbox.
@@ -31,39 +34,73 @@ export default {
         color: 'green',
         bold: true,
         onClick: () => {
-          this.$f7.dialog.prompt(`This will create a new Thing of type ${entry.thingTypeUID} with the following label:`,
-            'Add as Thing',
-            (label) => {
-              this.approveEntry(entry, label).finally(() => {
-                loadFn()
-              })
-            },
-            null,
-            entry.label)
-        }
-      }
-    },
-    entryActionsAddAsThingWithCustomIdButton (entry, loadFn) {
-      return {
-        text: 'Add as Thing (with custom ID)',
-        color: 'blue',
-        bold: true,
-        onClick: () => {
-          this.$f7.dialog.prompt(`This will create a new Thing of type ${entry.thingTypeUID}. You can change the suggested Thing ID below:`,
-            'Add as Thing',
-            (newThingId) => {
-              this.$f7.dialog.prompt('Enter the desired label of the new Thing:',
-                'Add as Thing',
-                (label) => {
-                  this.approveEntry(entry, label, newThingId).finally(() => {
-                    loadFn()
-                  })
-                },
-                null,
-                entry.label)
-            },
-            null,
-            entry.thingUID.substring(entry.thingUID.lastIndexOf(':') + 1))
+          const lastColonIdx = entry.thingUID.lastIndexOf(':')
+          const uidPrefix = entry.thingUID.substring(0, lastColonIdx + 1)
+          const defaultId = entry.thingUID.substring(lastColonIdx + 1)
+
+          this.$f7.dialog.create({
+            title: 'Add as Thing',
+            text: `This will create a new Thing of type ${entry.thingTypeUID}.`,
+            content: `
+                <div class="dialog-text">Thing ID:</div>
+                <div class="dialog-input-field input"><input type="text" class="dialog-input id-input"></div>
+                <div class="input-info id-info"></div>
+                <div>&nbsp;</div>
+                <div class="dialog-text">Thing label:</div>
+                <div class="dialog-input-field input"><input type="text" class="dialog-input label-input"></div>
+                <div class="input-info label-info"></div>
+              `,
+            buttons: [
+              {
+                text: this.$f7.params.dialog.buttonCancel,
+                color: 'gray',
+                keyCodes: [27],
+                close: true
+              },
+              {
+                text: this.$f7.params.dialog.buttonOk,
+                bold: true,
+                keyCodes: [13],
+                close: false,
+                onClick: (dialog) => {
+                  const newThingId = dialog.$el.find('.id-input').val()
+                  const newThingUID = uidPrefix + newThingId
+
+                  const error = this.validateThingUID(newThingUID, newThingId)
+                  const label = dialog.$el.find('.label-input').val()
+                  if (!error && label) {
+                    dialog.close()
+                    this.approveEntry(entry, label, newThingId)
+                      .then(() => this.$f7router.navigate('/settings/things/' + newThingUID))
+                      .catch(() => loadFn())
+                  }
+                }
+              }
+            ],
+            destroyOnClose: true,
+            on: {
+              opened: (dialog) => {
+                const id = dialog.$el.find('.id-input')
+                id.val(defaultId)
+                id.focus()
+
+                id.on('input', () => {
+                  const error = this.validateThingUID(uidPrefix + id.val(), id.val())
+                  const info = dialog.$el.find('.id-info')
+                  info.text(error)
+                  info[0].style.color = error ? 'red' : ''
+                })
+
+                const label = dialog.$el.find('.label-input')
+                label.val(entry.label)
+                label.on('input', () => {
+                  const info = dialog.$el.find('.label-info')
+                  info.text(label.val() ? '' : 'Label is required')
+                  info[0].style.color = label.val() ? '' : 'red'
+                })
+              }
+            }
+          }).open()
         }
       }
     }