From 616ee695a1d69aa18c8501689963c2b291e2aec5 Mon Sep 17 00:00:00 2001 From: Jimmy Tanagra Date: Tue, 14 Jan 2025 18:19:45 +1000 Subject: [PATCH] Inbox: Navigate to the new Thing(s) once approved Signed-off-by: Jimmy Tanagra --- .../settings/things/add/choose-thing-type.vue | 7 +- .../settings/things/inbox/inbox-list.vue | 14 ++- .../settings/things/thing-inbox-mixin.js | 115 +++++++++++++----- 3 files changed, 97 insertions(+), 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 index 6d2426c86f..bdb6ad4faa 100644 --- 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 index f130bc6380..119e4075e4 100644 --- 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 index 5c32b3f4ab..cfe765ba5c 100644 --- 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,8 @@ +import ThingMixin from '@/components/thing/thing-mixin' +import { on } from 'process' + export default { + mixins: [ThingMixin], methods: { /** * Approve the given entry from the inbox. @@ -31,39 +35,84 @@ 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) + + const okButtonClicked = (dialog, redirect) => { + 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(() => { + if (redirect) this.$f7router.navigate('/settings/things/' + newThingUID) + else loadFn() + }) + .catch(() => loadFn()) + } + } + + this.$f7.dialog.create({ + title: 'Add as Thing', + text: `This will create a new Thing of type ${entry.thingTypeUID}.`, + content: ` +
Thing ID:
+
+
+
 
+
Thing label:
+
+
+ `, + buttons: [ + { + text: this.$f7.params.dialog.buttonCancel, + color: 'gray', + keyCodes: [27], + close: true + }, + { + text: 'OK → Edit', + bold: true, + close: false, + onClick: (dialog) => okButtonClicked(dialog, true) + }, + { + text: 'OK', + bold: true, + keyCodes: [13], + close: false, + onClick: (dialog) => okButtonClicked(dialog, false) + } + ], + 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() } } }