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

Signed-off-by: Jimmy Tanagra <[email protected]>
openhab · Jan 14, 2025 · bd089d7 · bd089d7
1 parent 9790aaa
commit bd089d7
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 21 deletions.
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) {
@@ -417,9 +421,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.
@@ -34,9 +37,9 @@ export default {
           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()
-              })
+              this.approveEntry(entry, label)
+                .then(() => this.$f7router.navigate('/settings/things/' + entry.thingUID))
+                .catch(() => loadFn())
             },
             null,
             entry.label)
@@ -49,21 +52,64 @@ export default {
         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}. You can change the suggested Thing ID below:`,
+            content: '<div class="dialog-input-field item-input"><div class="item-input-wrap"><input type="text" class="dialog-input"></div></div>' +
+              '<div class="input-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('.dialog-input').val()
+                  const newThingUID = uidPrefix + newThingId
+
+                  const error = this.validateThingUID(newThingUID, newThingId)
+                  if (!error) {
+                    dialog.close()
+                    this.$f7.dialog.prompt('Enter the desired label of the new Thing: ' + newThingId,
+                      'Add as Thing',
+                      (label) => {
+                        this.approveEntry(entry, label, newThingId)
+                          .then(() => this.$f7router.navigate('/settings/things/' + newThingUID))
+                          .catch(() => loadFn())
+                      },
+                      null,
+                      entry.label)
+                  }
+                }
+              }
+            ],
+            destroyOnClose: true,
+            on: {
+              opened: (dialog) => {
+                const input = dialog.$el.find('.dialog-input')
+                input.val(defaultId)
+                input.focus()
+
+                input.on('input', () => {
+                  const error = this.validateThingUID(uidPrefix + input.val(), input.val())
+                  const info = dialog.$el.find('.input-info')
+                  info.text(error)
+                  if (error) info[0].style.color = 'red'
+                  else info[0].style.color = ''
+                })
+              }
+            }
+          }).open()
         }
       }
     }