Group edit mode visibility dropdown

html/src/app.js

@@ -16935,7 +16935,9 @@ speechSynthesis.getVoices();
             API.currentUserGroups.clear();
             args.json.forEach((group) => {
                 var ref = API.applyGroup(group);
-                API.currentUserGroups.set(group.id, ref);
+                if (!API.currentUserGroups.has(group.id)) {
+                    API.currentUserGroups.set(group.id, ref);
+                }
             });
             this.saveCurrentUserGroups();
         }
@@ -16982,7 +16984,9 @@ speechSynthesis.getVoices();
         API.currentUserGroups.clear();
         for (var group of args.json) {
             var ref = API.applyGroup(group);
-            API.currentUserGroups.set(group.id, ref);
+            if (!API.currentUserGroups.has(group.id)) {
+                API.currentUserGroups.set(group.id, ref);
+            }
         }
         await API.getGroupPermissions({ userId: API.currentUser.id });
         this.saveCurrentUserGroups();

html/src/classes/groups.js

@@ -32,10 +32,6 @@ export default class extends baseClass {
 
         API.$on('GROUP', function (args) {
             args.ref = this.applyGroup(args.json);
-            this.cachedGroups.set(args.ref.id, args.ref);
-            if (this.currentUserGroups.has(args.ref.id)) {
-                this.currentUserGroups.set(args.ref.id, args.ref);
-            }
         });
 
         API.$on('GROUP', function (args) {
@@ -245,12 +241,6 @@ export default class extends baseClass {
                 $app.groupDialog.ref.isRepresenting =
                     args.params.isRepresenting;
             }
-            if (
-                $app.userDialog.visible &&
-                $app.userDialog.id === this.currentUser.id
-            ) {
-                $app.getCurrentUserRepresentedGroup();
-            }
         });
 
         /**
@@ -1408,10 +1398,36 @@ export default class extends baseClass {
                         }
                     }
                 }
+                if (json.myMember) {
+                    if (typeof json.myMember.roleIds === 'undefined') {
+                        // keep roleIds
+                        json.myMember.roleIds = ref.myMember.roleIds;
+                    }
+                    Object.assign(ref.myMember, json.myMember);
+                }
                 Object.assign(ref, json);
             }
+            // update myMember without fetching member
+            if (typeof json.memberVisibility !== 'undefined') {
+                ref.myMember.visibility = json.memberVisibility;
+            }
+            if (typeof json.isRepresenting !== 'undefined') {
+                ref.myMember.isRepresenting = json.isRepresenting;
+            }
+            if (typeof json.membershipStatus !== 'undefined') {
+                ref.myMember.membershipStatus = json.membershipStatus;
+            }
+            if (typeof json.roleIds !== 'undefined') {
+                ref.myMember.roleIds = json.roleIds;
+            }
             ref.$url = `https://vrc.group/${ref.shortCode}.${ref.discriminator}`;
             this.applyGroupLanguage(ref);
+
+            var currentUserGroupRef = this.currentUserGroups.get(ref.id);
+            if (currentUserGroupRef && currentUserGroupRef !== ref) {
+                this.currentUserGroups.set(ref.id, ref);
+            }
+
             return ref;
         };
 
@@ -1430,6 +1446,28 @@ export default class extends baseClass {
                     }
                 }
             }
+            // update myMember without fetching member
+            if (json.userId === this.currentUser.id) {
+                var ref = this.cachedGroups.get(json.groupId);
+                if (typeof ref !== 'undefined') {
+                    this.$emit('GROUP', {
+                        json: {
+                            ...ref,
+                            memberVisibility: json.visibility,
+                            isRepresenting: json.isRepresenting,
+                            isSubscribedToAnnouncements:
+                                json.isSubscribedToAnnouncements,
+                            joinedAt: json.joinedAt,
+                            roleIds: json.roleIds,
+                            membershipStatus: json.membershipStatus
+                        },
+                        params: {
+                            groupId: json.groupId
+                        }
+                    });
+                }
+            }
+
             return json;
         };
 
@@ -1999,7 +2037,7 @@ export default class extends baseClass {
             API.cachedGroups.clear();
             API.currentUserGroups.clear();
             for (var group of savedGroups) {
-                var ref = {
+                var json = {
                     id: group.id,
                     name: group.name,
                     iconUrl: group.iconUrl,
@@ -2009,7 +2047,7 @@ export default class extends baseClass {
                         roleIds: group.roleIds
                     }
                 };
-                API.cachedGroups.set(group.id, ref);
+                var ref = API.applyGroup(json);
                 API.currentUserGroups.set(group.id, ref);
             }
 
@@ -2358,8 +2396,7 @@ export default class extends baseClass {
                     iconUrl: ''
                 });
                 API.getGroup({ groupId, includeRoles: true }).then((args) => {
-                    var ref = API.applyGroup(args.json);
+                    API.applyGroup(args.json); // make sure this runs before saveCurrentUserGroups
-                    API.currentUserGroups.set(groupId, ref);
                     this.saveCurrentUserGroups();
                     return args;
                 });
@@ -3496,19 +3533,19 @@ export default class extends baseClass {
         async addGroupMemberToSelection(userId) {
             var D = this.groupMemberModeration;
 
-            // fetch memeber if there is one
+            // fetch member if there is one
             // banned members don't have a user object
 
-            var memeber = {};
+            var member = {};
-            var memeberArgs = await API.getGroupMember({
+            var memberArgs = await API.getGroupMember({
                 groupId: D.id,
                 userId
             });
-            if (memeberArgs.json) {
+            if (memberArgs.json) {
-                memeber = API.applyGroupMember(memeberArgs.json);
+                member = API.applyGroupMember(memberArgs.json);
             }
-            if (memeber.user) {
+            if (member.user) {
-                D.selectedUsers.set(memeber.userId, memeber);
+                D.selectedUsers.set(member.userId, member);
                 D.selectedUsersArray = Array.from(D.selectedUsers.values());
                 this.groupMemberModerationTableForceUpdate++;
                 return;
@@ -3517,11 +3554,11 @@ export default class extends baseClass {
             var userArgs = await API.getCachedUser({
                 userId
             });
-            memeber.userId = userArgs.json.id;
+            member.userId = userArgs.json.id;
-            memeber.user = userArgs.json;
+            member.user = userArgs.json;
-            memeber.displayName = userArgs.json.displayName;
+            member.displayName = userArgs.json.displayName;
 
-            D.selectedUsers.set(memeber.userId, memeber);
+            D.selectedUsers.set(member.userId, member);
             D.selectedUsersArray = Array.from(D.selectedUsers.values());
             this.groupMemberModerationTableForceUpdate++;
         }

html/src/classes/websocket.js

@@ -466,7 +466,15 @@ export default class extends baseClass {
                     break;
 
                 case 'group-member-updated':
-                    var groupId = content.member.groupId;
+                    var member = content.member;
+                    if (!member) {
+                        console.error(
+                            'group-member-updated missing member',
+                            content
+                        );
+                        break;
+                    }
+                    var groupId = member.groupId;
                     if (
                         $app.groupDialog.visible &&
                         $app.groupDialog.id === groupId
@@ -474,24 +482,12 @@ export default class extends baseClass {
                         $app.getGroupDialogGroup(groupId);
                     }
                     this.$emit('GROUP:MEMBER', {
-                        json: content.member,
+                        json: member,
                         params: {
                             groupId
                         }
                     });
-                    console.log('group-member-updated', content);
+                    console.log('group-member-updated', member);
-
-                    // content {
-                    //   groupId: string,
-                    //   id: string,
-                    //   isRepresenting: boolean,
-                    //   isSubscribedToAnnouncements: boolean,
-                    //   joinedAt: string,
-                    //   membershipStatus: string,
-                    //   roleIds: string[],
-                    //   userId: string,
-                    //   visibility: string
-                    // }
                     break;
 
                 case 'instance-queue-joined':

html/src/mixins/dialogs/userDialog.pug

@@ -325,11 +325,34 @@ mixin userDialog()
                                         span.extra
                                             el-tooltip(v-if="group.isRepresenting" placement="top" :content="$t('dialog.group.members.representing')")
                                                 i.el-icon-collection-tag(style="margin-right:5px")
-                                            el-tooltip(v-if="group.memberVisibility !== 'visible'" placement="top")
+                                            el-tooltip(v-if="group.myMember.visibility !== 'visible'" placement="top")
                                                 template(#content)
-                                                    span {{ $t('dialog.group.members.visibility') }} {{ group.memberVisibility }}
+                                                    span {{ $t('dialog.group.members.visibility') }} {{ group.myMember.visibility }}
                                                 i.el-icon-view(style="margin-right:5px")
                                             span ({{ group.memberCount }})
+                                    el-dropdown(@click.native.stop :disabled="group.privacy !== 'default'" trigger="click" size="small" style="margin-right:5px")
+                                        el-button(size="mini")
+                                            span(v-if="group.myMember.visibility === 'visible'") {{ $t('dialog.group.tags.visible') }}
+                                            span(v-else-if="group.myMember.visibility === 'friends'") {{ $t('dialog.group.tags.friends') }}
+                                            span(v-else-if="group.myMember.visibility === 'hidden'") {{ $t('dialog.group.tags.hidden') }}
+                                            span(v-else) {{ group.myMember.visibility }}
+                                            i.el-icon-arrow-down.el-icon--right(style="margin-left:5px")
+                                        el-dropdown-menu
+                                            el-dropdown-item(@click.native="setGroupVisibility(group.id, 'visible')") #[i.el-icon-check(v-if="group.myMember.visibility === 'visible'")] {{ $t('dialog.group.actions.visibility_everyone') }}
+                                            el-dropdown-item(@click.native="setGroupVisibility(group.id, 'friends')") #[i.el-icon-check(v-if="group.myMember.visibility === 'friends'")] {{ $t('dialog.group.actions.visibility_friends') }}
+                                            el-dropdown-item(@click.native="setGroupVisibility(group.id, 'hidden')") #[i.el-icon-check(v-if="group.myMember.visibility === 'hidden'")] {{ $t('dialog.group.actions.visibility_hidden') }}
+                                            
+                                    //- JSON is missing isSubscribedToAnnouncements, can't be implemented
+                                    //- el-dropdown(@click.native.stop trigger="click" size="small" style="margin-right:5px")
+                                    //-     el-tooltip(placement="top" :disabled="hideTooltips")
+                                    //-         template(#content)
+                                    //-             span(v-if="group.myMember.isSubscribedToAnnouncements") {{ $t('dialog.group.actions.unsubscribe') }}
+                                    //-             span(v-else) {{ $t('dialog.group.actions.subscribe') }}
+                                    //-         el-button(v-if="group.myMember.isSubscribedToAnnouncements" @click.stop="setGroupSubscription(group.id, false)" circle size="mini")
+                                    //-             i.el-icon-chat-line-square
+                                    //-         el-button(v-else circle @click.stop="setGroupSubscription(group.id, true)" size="mini")
+                                    //-             i.el-icon-chat-square(style="color:#f56c6c")
+
                                     el-tooltip(placement="right" :content="$t('dialog.user.groups.leave_group_tooltip')" :disabled="hideTooltips")
                                         el-button(v-if="shiftHeld" @click.stop="leaveGroupPrompt(group.id)" size="mini" icon="el-icon-close" circle style="color:#f56c6c;margin-left:5px")
                                         el-button(v-else @click.stop="leaveGroupPrompt(group.id)" size="mini" icon="el-icon-delete" circle style="margin-left:5px")