From cd8abd96a5ebc5c4596002e1c6b7fc411a594156 Mon Sep 17 00:00:00 2001
From: Florian Hotze <dev@florianhotze.com>
Date: Tue, 22 Oct 2024 16:59:40 +0200
Subject: [PATCH] Improve rendering logic of action outputs

Signed-off-by: Florian Hotze <dev@florianhotze.com>
---
 .../settings/things/thing-action-popup.vue    | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/thing-action-popup.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/thing-action-popup.vue
index f98de7803f..77b62cf843 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/things/thing-action-popup.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/things/thing-action-popup.vue
@@ -50,16 +50,25 @@
           </div>
           <div v-else>
             <f7-list>
-              <f7-list-item v-if="actionOutput.result" :floating-label="$theme.md" title="Result">
-                {{ actionOutput.result }}
-              </f7-list-item>
-              <f7-list-item v-if="actionOutput.qrPairingCode" :floating-label="$theme.md" title="QR Pairing Code">
-                <vue-qrcode :value="actionOutput.qrPairingCode" />
-              </f7-list-item>
-              <f7-list-item v-if="actionOutput.manualPairingCode" :floating-label="$theme.md" title="Manual Pairing Code">
-                {{ actionOutput.manualPairingCode }}
-              </f7-list-item>
-              <f7-list-item accordion-item title="Raw Response">
+              <template v-for="key of Object.keys(actionOutput)">
+                <!-- Render result as a list item, works without action output definition from REST -->
+                <f7-list-item v-if="key === 'result'" :key="key" :floating-label="$theme.md" title="Result">
+                  {{ actionOutput[key] }}
+                </f7-list-item>
+                <!-- Render QR code if the key is qrCode -->
+                <f7-list-item v-else-if="key === 'qrCode'" :key="key" :floating-label="$theme.md" :title="action.outputs.find(o => o.name === key)?.label || 'QR Code'">
+                  <vue-qrcode :value="actionOutput[key]" />
+                </f7-list-item>
+                <!-- Render QR code if the action output type is qrCode in the action output definition from REST -->
+                <f7-list-item v-else-if="action.outputs.find(o => o.name === key)?.type === 'qrCode'" :key="key" :floating-label="$theme.md" :title="action.outputs.find(o => o.name === key).label">
+                  <vue-qrcode :value="actionOutput[key]" />
+                </f7-list-item>
+                <!-- Render other keys as list items with the label defined by the action output definition from REST or the key as label -->
+                <f7-list-item v-else :key="key" :floating-label="$theme.md" :title="action.outputs.find(o => o.name === key)?.label || key">
+                  {{ actionOutput[key] }}
+                </f7-list-item>
+              </template>
+              <f7-list-item accordion-item title="Raw Output Value">
                 <f7-accordion-content class="thing-type-description">
                   <div class="margin">
                     <code> {{ actionOutput }} </code>