Thing actions: Sort by label & Show description & Hide unsupported ac…

…tions Follow-up for openhab#2818. Signed-off-by: Florian Hotze <dev@florianhotze.com>
florian-h05 · Oct 25, 2024 · 2cf3a69 · 2cf3a69
1 parent c225819
commit 2cf3a69
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 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
@@ -15,6 +15,9 @@
         </f7-nav-right>
       </f7-navbar>
       <f7-block class="no-margin no-padding">
+        <f7-block-footer class="margin-horizontal">
+          {{ action.description }}
+        </f7-block-footer>
         <!-- Action Inputs -->
         <f7-col>
           <f7-block-title class="parameter-group-title">
@@ -28,12 +31,12 @@
           </div>
         </f7-col>
         <!-- Executing Spinner -->
-        <f7-block v-if="executing" class="text-align-center padding-top margin-top">
+        <f7-col v-if="executing" class="text-align-center padding-top margin-top">
           <f7-block-title>
             <f7-preloader :size="30" />
             <div>Executing...</div>
           </f7-block-title>
-        </f7-block>
+        </f7-col>
         <!-- Execute Button -->
         <f7-col v-if="!executing">
           <f7-list>

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue
@@ -97,8 +97,10 @@
               <f7-block-title medium class="no-margin-top">
                 Actions
               </f7-block-title>
-              <f7-list class="margin-top">
-                <f7-list-button v-for="action in thingActions" color="blue" :key="action.name" :title="action.label" @click="doThingAction(action)" />
+              <f7-list class="margin-top" media-list>
+                <template v-for="action in thingActions">
+                  <f7-list-item v-if="action.inputConfigDescriptions !== undefined" :key="action.name" :title="action.label" :footer="action.description" link="" @click="doThingAction(action)" />
+                </template>
               </f7-list>
             </template>
           </f7-col>
@@ -418,7 +420,7 @@ export default {
      */
     loadThingActions () {
       return this.$oh.api.get('/rest/actions/' + this.thingId).then(data => {
-        this.thingActions = data
+        this.thingActions = data.sort((a, b) => a.label.localeCompare(b.label))
         return Promise.resolve()
       }).catch(err => {
         if (err === 'Not Found' || err === 404) {