From 1b110e66d5cd5c35a0926b68a0c60924a8f48a1c Mon Sep 17 00:00:00 2001
From: Jimmy Tanagra <jcode@tanagra.id.au>
Date: Tue, 5 Mar 2024 18:18:03 +1000
Subject: [PATCH 1/2] Item Details: fix editing group members with uneditable
 members

Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>
---
 .../web/src/components/item/group-members.vue    | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/components/item/group-members.vue b/bundles/org.openhab.ui/web/src/components/item/group-members.vue
index 5832472d03..6df16e9c27 100644
--- a/bundles/org.openhab.ui/web/src/components/item/group-members.vue
+++ b/bundles/org.openhab.ui/web/src/components/item/group-members.vue
@@ -9,7 +9,7 @@
             :context="context" />
           <!-- <f7-list-button @click="enableEditMode" color="blue" title="Add or Remove Members" /> -->
         </ul>
-        <item-picker v-if="editMembers" :multiple="true" name="groupMembers" :value="memberNames" title="Members" :editableOnly="true" @input="(members) => memberNames = members" />
+        <item-picker v-if="editMembers" :multiple="true" name="groupMembers" :value="pickedMemberNames" title="Members" :editableOnly="true" @input="(members) => pickedMemberNames = members" />
       </f7-list>
     </f7-card-content>
     <f7-card-footer>
@@ -43,21 +43,25 @@ export default {
   data () {
     return {
       editMembers: false,
-      memberNames: [],
-      newMemberNames: []
+      pickedMemberNames: []
+    }
+  },
+  computed: {
+    editableMemberNames () {
+      return this.groupItem.members.filter((m) => m.editable).map((m) => m.name)
     }
   },
   methods: {
     enableEditMode () {
-      this.memberNames = this.groupItem.members.map((m) => m.name)
+      this.pickedMemberNames = this.editableMemberNames
       this.editMembers = true
     },
     cancelEditMode () {
       this.editMembers = false
     },
     updateMembers () {
-      const itemsToAdd = this.memberNames.filter((n) => this.groupItem.members.findIndex((m) => m.name === n) < 0)
-      const itemsToRemove = this.groupItem.members.filter((m) => (this.memberNames.indexOf(m.name) < 0)).map((m) => m.name)
+      const itemsToAdd = this.pickedMemberNames.filter((m) => !this.editableMemberNames.includes(m))
+      const itemsToRemove = this.editableMemberNames.filter((m) => !this.pickedMemberNames.includes(m))
 
       if (!itemsToAdd.length && !itemsToRemove.length) {
         this.$f7.dialog.alert('Nothing to change')

From 4ebbe568fa06e01e1a1d5d1fa7027cc27440a338 Mon Sep 17 00:00:00 2001
From: Jimmy Tanagra <jcode@tanagra.id.au>
Date: Tue, 5 Mar 2024 18:18:42 +1000
Subject: [PATCH 2/2] Item Details: sort the list of group members

Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>
---
 .../org.openhab.ui/web/src/components/item/group-members.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/bundles/org.openhab.ui/web/src/components/item/group-members.vue b/bundles/org.openhab.ui/web/src/components/item/group-members.vue
index 6df16e9c27..43190c2aef 100644
--- a/bundles/org.openhab.ui/web/src/components/item/group-members.vue
+++ b/bundles/org.openhab.ui/web/src/components/item/group-members.vue
@@ -4,7 +4,7 @@
       <f7-list>
         <ul v-if="!editMembers">
           <item
-            v-for="member in groupItem.members" :key="member.name"
+            v-for="member in sortedGroupMembers" :key="member.name"
             :item="member" :link="'/settings/items/' + member.name"
             :context="context" />
           <!-- <f7-list-button @click="enableEditMode" color="blue" title="Add or Remove Members" /> -->
@@ -49,6 +49,9 @@ export default {
   computed: {
     editableMemberNames () {
       return this.groupItem.members.filter((m) => m.editable).map((m) => m.name)
+    },
+    sortedGroupMembers () {
+      return this.groupItem.members.toSorted((a, b) => (a.label || a.name).localeCompare(b.label || b.name))
     }
   },
   methods: {