Fix #714 - Sort popup dialogs by name and jump to selected item on op…

…en (#724) Signed-off-by: Eiko Wagenknecht <[email protected]>
openhab · Dec 31, 2020 · 771bdf4 · 771bdf4
1 parent 70b423d
commit 771bdf4
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 19 deletions.
diff --git a/bundles/org.openhab.ui/web/src/components/item/metadata/item-metadata-alexa.vue b/bundles/org.openhab.ui/web/src/components/item/metadata/item-metadata-alexa.vue
@@ -5,18 +5,18 @@
     </div>
     <f7-list>
       <f7-list-item :key="classSelectKey"
-         :title="(multiple) ? 'Alexa Classes' : 'Alexa Class'" smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, closeOnSelect: !multiple }" ref="classes">
+         :title="(multiple) ? 'Alexa Classes' : 'Alexa Class'" smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, closeOnSelect: !multiple, scrollToSelectedItem: true }" ref="classes">
         <select name="parameters" @change="updateClasses" :multiple="multiple">
           <option v-if="!multiple" value=""></option>
           <optgroup label="Labels" v-if="!multiple">
-            <option v-for="cl in classesDefs.filter((c) => c.indexOf('label:') === 0)"
+            <option v-for="cl in orderedClasses.filter((c) => c.indexOf('label:') === 0)"
               :value="cl.replace('label:', '')" :key="cl"
               :selected="isSelected(cl.replace('label:', ''))">
               {{cl.replace('label:', '')}}
             </option>
           </optgroup>
           <optgroup label="Capabilities">
-            <option v-for="cl in classesDefs.filter((c) => c.indexOf('label:') !== 0)"
+            <option v-for="cl in orderedClasses.filter((c) => c.indexOf('label:') !== 0)"
               :value="cl" :key="cl"
               :selected="isSelected(cl)">
               {{cl}}
@@ -55,6 +55,11 @@ export default {
       if (!this.multiple) return this.metadata.value
       return (this.metadata.value) ? this.metadata.value.split(',') : []
     },
+    orderedClasses () {
+      return [...this.classesDefs].sort((a, b) => {
+        return a.localeCompare(b);
+      })
+    },
     parameters () {
       if (!this.classes) return []
       if (!this.multiple) {

diff --git a/bundles/org.openhab.ui/web/src/components/item/metadata/item-metadata-ga.vue b/bundles/org.openhab.ui/web/src/components/item/metadata/item-metadata-ga.vue
@@ -2,10 +2,10 @@
   <div>
     <f7-list>
       <f7-list-item :key="classSelectKey"
-         :title="'Google Assistant Class'" smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, closeOnSelect: true }" ref="classes">
+         :title="'Google Assistant Class'" smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, closeOnSelect: true, scrollToSelectedItem: true }" ref="classes">
         <select name="classes" @change="updateClass">
           <option value=""></option>
-          <option v-for="cl in classesDefs" :value="cl" :key="cl" :selected="isSelected(cl)">{{cl}}</option>
+          <option v-for="cl in orderedClasses" :value="cl" :key="cl" :selected="isSelected(cl)">{{cl}}</option>
         </select>
       </f7-list-item>
     </f7-list>
@@ -37,6 +37,11 @@ export default {
     classes () {
       return this.metadata.value
     },
+    orderedClasses () {
+      return [...this.classesDefs].sort((a, b) => {
+        return a.localeCompare(b);
+      })
+    },
     parameters () {
       if (!this.metadata.value) return []
       return [...GoogleDefinitions[this.metadata.value]]

diff --git a/bundles/org.openhab.ui/web/src/components/item/metadata/item-metadata-homekit.vue b/bundles/org.openhab.ui/web/src/components/item/metadata/item-metadata-homekit.vue
@@ -5,10 +5,10 @@
     </div>
     <f7-list>
       <f7-list-item :key="classSelectKey"
-         :title="(multiple) ? 'HomeKit Accessory/Charactistics' : 'HomeKit Accessory/Charactistic'" smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, closeOnSelect: !multiple }" ref="classes">
+         :title="(multiple) ? 'HomeKit Accessory/Charactistics' : 'HomeKit Accessory/Charactistic'" smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, closeOnSelect: !multiple, scrollToSelectedItem: true }" ref="classes">
         <select name="parameters" @change="updateClasses" :multiple="multiple">
           <option v-if="!multiple" value=""></option>
-          <option v-for="cl in classesDefs.filter((c) => c.indexOf('label:') !== 0)"
+          <option v-for="cl in orderedClasses.filter((c) => c.indexOf('label:') !== 0)"
             :value="cl" :key="cl"
             :selected="isSelected(cl)">
             {{cl}}
@@ -46,6 +46,11 @@ export default {
       if (!this.multiple) return this.metadata.value
       return (this.metadata.value) ? this.metadata.value.split(',') : []
     },
+    orderedClasses () {
+      return [...this.classesDefs].sort((a, b) => {
+        return a.localeCompare(b);
+      })
+    },
     parameters () {
       if (!this.classes) return []
       if (!this.multiple && this.classes.indexOf('Valve') === 0) return homekitParameters

diff --git a/bundles/org.openhab.ui/web/src/components/item/metadata/item-metadata-widget.vue b/bundles/org.openhab.ui/web/src/components/item/metadata/item-metadata-widget.vue
@@ -8,23 +8,23 @@
 
     <f7-list v-if="viewMode === 'design' && defaultComponent.component">
       <f7-list-item :key="componentSelectKey"
-         :title="'Widget'" smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, closeOnSelect: true }" ref="widgets">
+         :title="'Widget'" smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, closeOnSelect: true, scrollToSelectedItem: true }" ref="widgets">
         <select name="widgets" @change="updateComponent">
           <option value="">Default ({{defaultComponent.component}})</option>
           <optgroup label="Standard Library (List)" v-if="namespace === 'listWidget'">
-            <option v-for="widget in standardListWidgets" :key="widget.name" :value="widget.name" :selected="metadata.value === widget.name">{{widget.label}}</option>
+            <option v-for="widget in orderedStandardListWidgets" :key="widget.name" :value="widget.name" :selected="metadata.value === widget.name">{{widget.label}}</option>
           </optgroup>
           <optgroup label="Standard Library (Cell)" v-else-if="namespace === 'cellWidget'">
-            <option v-for="widget in standardCellWidgets" :key="widget.name" :value="widget.name" :selected="metadata.value === widget.name">{{widget.label}}</option>
+            <option v-for="widget in orderedStandardCellWidgets" :key="widget.name" :value="widget.name" :selected="metadata.value === widget.name">{{widget.label}}</option>
           </optgroup>
           <optgroup label="Standard Library" v-else>
-            <option v-for="widget in standardWidgets" :key="widget.name" :value="widget.name" :selected="metadata.value === widget.name">{{widget.label}}</option>
+            <option v-for="widget in orderedStandardWidgets" :key="widget.name" :value="widget.name" :selected="metadata.value === widget.name">{{widget.label}}</option>
           </optgroup>
           <optgroup v-if="$store.getters.widgets.length" label="Personal Widgets">
-            <option v-for="widget in $store.getters.widgets" :value="'widget:' + widget.uid" :key="widget.uid" :selected="metadata.value.replace('widget:', '') === widget.uid">{{widget.uid}}</option>
+            <option v-for="widget in orderedPersonalWidgets" :value="'widget:' + widget.uid" :key="widget.uid" :selected="metadata.value.replace('widget:', '') === widget.uid">{{widget.uid}}</option>
           </optgroup>
           <!-- <optgroup label="System Widgets">
-            <option v-for="widget in systemWidgets" :key="widget.name" :value="widget.name">{{widget.label}}</option>
+            <option v-for="widget in orderedSystemWidgets" :key="widget.name" :value="widget.name">{{widget.label}}</option>
           </optgroup> -->
         </select>
       </f7-list-item>
@@ -81,6 +81,31 @@ export default {
     }
   },
   computed: {
+    orderedStandardWidgets () {
+      return [...this.standardWidgets].sort((a, b) => {
+        return a.name.localeCompare(b.name);
+      })
+    },
+    orderedStandardListWidgets () {
+      return [...this.standardListWidgets].sort((a, b) => {
+        return a.name.localeCompare(b.name);
+      })
+    },
+    orderedStandardCellWidgets () {
+      return [...this.standardCellWidgets].sort((a, b) => {
+        return a.name.localeCompare(b.name);
+      })
+    },
+    orderedSystemWidgets () {
+      return [...this.systemWidgets].sort((a, b) => {
+        return a.name.localeCompare(b.name);
+      })
+    },
+    orderedPersonalWidgets () {
+      return [...$store.getters.widgets].sort((a, b) => {
+        return a.name.localeCompare(b.name);
+      })
+    },
     configDescriptions () {
       let ret = {}
       if (!this.currentComponent || !this.currentComponent.component) return ret

diff --git a/bundles/org.openhab.ui/web/src/components/tags/semantics-picker.vue b/bundles/org.openhab.ui/web/src/components/tags/semantics-picker.vue
@@ -1,24 +1,24 @@
 <template>
   <f7-list no-hairlines-md v-if="show">
-    <f7-list-item title="Semantic Class" smart-select :smart-select-params="{view: $f7.view.main, searchbar: true, openIn: 'popup', closeOnSelect: true}">
+    <f7-list-item title="Semantic Class" smart-select :smart-select-params="{view: $f7.view.main, searchbar: true, openIn: 'popup', closeOnSelect: true, scrollToSelectedItem: true}">
       <select name="select-semantics-class" @change="update('class', $event.target.value)">
         <option v-if="!hideNone" :value="''">None</option>
         <optgroup label="Location" v-if="!sameClassOnly || semanticClass === '' || (sameClassOnly && currentSemanticType === 'Location')">
-          <option v-for="type in semanticClasses.Locations" :key="type" :value="type" :selected="type === semanticClass">{{type}}</option>
+          <option v-for="type in orderedLocations" :key="type" :value="type" :selected="type === semanticClass">{{type}}</option>
         </optgroup>
         <optgroup label="Equipment" v-if="!sameClassOnly || semanticClass === '' || (sameClassOnly && currentSemanticType === 'Equipment')">
-          <option v-for="type in semanticClasses.Equipment" :key="type" :value="type" :selected="type === semanticClass">{{type}}</option>
+          <option v-for="type in orderedEquipment" :key="type" :value="type" :selected="type === semanticClass">{{type}}</option>
         </optgroup>
         <optgroup label="Point" v-if="!sameClassOnly || semanticClass === '' || (sameClassOnly && currentSemanticType === 'Point')">
-          <option v-for="type in semanticClasses.Points" :key="type" :value="type" :selected="type === semanticClass">{{type}}</option>
+          <option v-for="type in orderedPoints" :key="type" :value="type" :selected="type === semanticClass">{{type}}</option>
         </optgroup>
       </select>
     </f7-list-item>
     <f7-list-item v-if="currentSemanticType && !hideType" title="Semantic Type" :after="currentSemanticType" />
-    <f7-list-item v-if="currentSemanticType == 'Point'" title="Semantic Property" smart-select :smart-select-params="{view: $f7.view.main, searchbar: true, openIn: 'popup', closeOnSelect: true}">
+    <f7-list-item v-if="currentSemanticType == 'Point'" title="Semantic Property" smart-select :smart-select-params="{view: $f7.view.main, searchbar: true, openIn: 'popup', closeOnSelect: true, scrollToSelectedItem: true}">
       <select name="select-semantics-proerty" :value="semanticProperty" @change="update('property', $event.target.value)">
         <option :value="''">None</option>
-        <option v-for="type in semanticClasses.Properties" :key="type" :value="type" :selected="type === semanticProperty">{{type}}</option>
+        <option v-for="type in orderedProperties" :key="type" :value="type" :selected="type === semanticProperty">{{type}}</option>
       </select>
     </f7-list-item>
   </f7-list>
@@ -96,6 +96,26 @@ export default {
     }
   },
   computed: {
+    orderedLocations () {
+      return [...this.semanticClasses.Locations].sort((a, b) => {
+        return a.localeCompare(b);
+      })
+    },
+    orderedEquipment () {
+      return [...this.semanticClasses.Equipment].sort((a, b) => {
+        return a.localeCompare(b);
+      })
+    },
+    orderedPoints () {
+      return [...this.semanticClasses.Points].sort((a, b) => {
+        return a.localeCompare(b);
+      })
+    },
+    orderedProperties () {
+      return [...this.semanticClasses.Properties].sort((a, b) => {
+        return a.localeCompare(b);
+      })
+    },
     currentSemanticType () {
       return this.semanticType(this.semanticClass)
     }