Add Inbox approve menu to add Thing of binding page

bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-thing-type.vue

@@ -34,7 +34,7 @@
           <f7-list-item v-for="entry in scanResults"
                         :key="entry.thingUID"
                         :link="true"
-                        @click="approve(entry)"
+                        @click="openEntryActions(entry)"
                         media-item
                         :title="entry.label"
                         :subtitle="entry.representationProperty ? entry.properties[entry.representationProperty] : ''"
@@ -86,9 +86,13 @@
 
 <script>
 import ConfigSheet from '@/components/config/config-sheet.vue'
+import ThingInboxMixin from '@/pages/settings/things/thing-inbox-mixin'
 
 export default {
-  components: { ConfigSheet },
+  mixins: [ThingInboxMixin],
+  components: {
+    ConfigSheet
+  },
   props: ['bindingId'],
   data () {
     return {
@@ -224,28 +228,25 @@ export default {
         Promise.reject('Failed to load inbox: ' + e)
       })
     },
-    approve (entry) {
-      console.log(`Add ${entry.thingUID} as thing`)
-      this.$f7.dialog.prompt(`This will create a new Thing of type ${entry.thingTypeUID} with the following name:`,
-        'Add as Thing',
-        (name) => {
-          this.$oh.api.postPlain(`/rest/inbox/${entry.thingUID}/approve`, name).then((res) => {
-            this.$f7.toast.create({
-              text: 'Entry approved',
-              destroyOnClose: true,
-              closeTimeout: 2000
-            }).open()
-            setTimeout(() => { this.$f7router.navigate('/settings/things/', { reloadCurrent: true }) }, 300)
-          }).catch((err) => {
-            this.$f7.toast.create({
-              text: 'Error during thing creation: ' + err,
-              destroyOnClose: true,
-              closeTimeout: 2000
-            }).open()
-          })
-        },
-        null,
-        entry.label)
+    openEntryActions (entry) {
+      let actions = this.$f7.actions.create({
+        convertToPopover: true,
+        closeOnEscape: true,
+        buttons: [
+          [
+            {
+              text: entry.label,
+              label: true
+            }
+          ],
+          [
+            this.entryActionsAddAsThingButton(entry, this.loadInbox),
+            this.entryActionsAddAsThingWithCustomIdButton(entry, this.loadInbox)
+          ]
+        ]
+      })
+
+      actions.open()
     },
     approveAll () {
       this.$f7.dialog.confirm('Add all discovered Things?', 'Add Things', () => {

bundles/org.openhab.ui/web/src/pages/settings/things/inbox/inbox-list.vue

@@ -132,7 +132,10 @@
 </style>
 
 <script>
+import ThingInboxMixin from '@/pages/settings/things/thing-inbox-mixin'
+
 export default {
+  mixins: [ThingInboxMixin],
   components: {
     'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue')
   },
@@ -256,40 +259,8 @@ export default {
             }
           ],
           [
-            {
-              text: 'Add as Thing',
-              color: 'green',
-              bold: true,
-              onClick: () => {
-                this.$f7.dialog.prompt(`This will create a new Thing of type ${entry.thingTypeUID} with the following name:`,
-                  'Add as Thing',
-                  (name) => {
-                    this.approveEntry(entry, name)
-                  },
-                  null,
-                  entry.label)
-              }
-            },
-            {
-              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 name of the new Thing:',
-                      'Add as Thing',
-                      (name) => {
-                        this.approveEntry(entry, name, newThingId)
-                      },
-                      null,
-                      entry.label)
-                  },
-                  null,
-                  entry.thingUID.substring(entry.thingUID.lastIndexOf(':') + 1))
-              }
-            },
+            this.entryActionsAddAsThingButton(entry, this.load),
+            this.entryActionsAddAsThingWithCustomIdButton(entry, this.load),
             {
               text: (!ignored) ? 'Ignore' : 'Unignore',
               color: (!ignored) ? 'orange' : 'blue',
@@ -318,23 +289,6 @@ export default {
 
       actions.open()
     },
-    approveEntry (entry, name, newThingId) {
-      this.$oh.api.postPlain(`/rest/inbox/${entry.thingUID}/approve${newThingId ? '?newThingId=' + newThingId : ''}`, name).then((res) => {
-        this.$f7.toast.create({
-          text: 'Entry approved',
-          destroyOnClose: true,
-          closeTimeout: 2000
-        }).open()
-        this.load()
-      }).catch((err) => {
-        this.$f7.toast.create({
-          text: 'Error during thing creation: ' + err,
-          destroyOnClose: true,
-          closeTimeout: 2000
-        }).open()
-        this.load()
-      })
-    },
     ignoreEntry (entry) {
       this.$oh.api.postPlain(`/rest/inbox/${entry.thingUID}/ignore`).then((res) => {
         this.$f7.toast.create({

bundles/org.openhab.ui/web/src/pages/settings/things/thing-inbox-mixin.js

@@ -0,0 +1,71 @@
+export default {
+  methods: {
+    /**
+     * Approve the given entry from the inbox.
+     *
+     * @param {object} entry Thing inbox entry
+     * @param {string} label Thing label
+     * @param {string} [newThingId] Optional custom Thing ID
+     * @return {Promise<void>}
+     */
+    approveEntry (entry, label, newThingId) {
+      return this.$oh.api.postPlain(`/rest/inbox/${entry.thingUID}/approve${newThingId ? '?newThingId=' + newThingId : ''}`, label).then(() => {
+        this.$f7.toast.create({
+          text: 'Entry approved',
+          destroyOnClose: true,
+          closeTimeout: 2000
+        }).open()
+        return Promise.resolve()
+      }).catch((err) => {
+        this.$f7.toast.create({
+          text: 'Error during thing creation: ' + err,
+          destroyOnClose: true,
+          closeTimeout: 2000
+        }).open()
+        return Promise.reject(err)
+      })
+    },
+    entryActionsAddAsThingButton (entry, loadFn) {
+      return {
+        text: 'Add as Thing',
+        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))
+        }
+      }
+    }
+  }
+}