userDialog groups

html/src/app.js

@@ -13682,6 +13682,7 @@ speechSynthesis.getVoices();
         isWorldsLoading: false,
         isFavoriteWorldsLoading: false,
         isAvatarsLoading: false,
+        isGroupsLoading: false,
 
         worldSorting: 'update',
         avatarSorting: 'update',
@@ -13987,19 +13988,25 @@ speechSynthesis.getVoices();
                     if (this.$refs.userDialogTabs.currentName === '0') {
                         this.userDialogLastActiveTab = 'Info';
                     } else if (this.$refs.userDialogTabs.currentName === '1') {
+                        this.userDialogLastActiveTab = 'Groups';
+                        if (this.userDialogLastGroup !== userId) {
+                            this.userDialogLastGroup = userId;
+                            this.getUserGroups(userId);
+                        }
+                    } else if (this.$refs.userDialogTabs.currentName === '2') {
                         this.userDialogLastActiveTab = 'Worlds';
                         this.setUserDialogWorlds(userId);
                         if (this.userDialogLastWorld !== userId) {
                             this.userDialogLastWorld = userId;
                             this.refreshUserDialogWorlds();
                         }
-                    } else if (this.$refs.userDialogTabs.currentName === '2') {
+                    } else if (this.$refs.userDialogTabs.currentName === '3') {
                         this.userDialogLastActiveTab = 'Favorite Worlds';
                         if (this.userDialogLastFavoriteWorld !== userId) {
                             this.userDialogLastFavoriteWorld = userId;
                             this.getUserFavoriteWorlds(userId);
                         }
-                    } else if (this.$refs.userDialogTabs.currentName === '3') {
+                    } else if (this.$refs.userDialogTabs.currentName === '4') {
                         this.userDialogLastActiveTab = 'Avatars';
                         this.setUserDialogAvatars(userId);
                         this.userDialogLastAvatar = userId;
@@ -14010,7 +14017,7 @@ speechSynthesis.getVoices();
                             this.refreshUserDialogAvatars();
                         }
                         this.setUserDialogAvatarsRemote(userId);
-                    } else if (this.$refs.userDialogTabs.currentName === '4') {
+                    } else if (this.$refs.userDialogTabs.currentName === '5') {
                         this.userDialogLastActiveTab = 'JSON';
                         this.refreshUserDialogTreeData();
                     }
@@ -18915,13 +18922,19 @@ speechSynthesis.getVoices();
     $app.data.userDialogLastAvatar = '';
     $app.data.userDialogLastWorld = '';
     $app.data.userDialogLastFavoriteWorld = '';
+    $app.data.userDialogLastGroup = '';
 
     $app.methods.userDialogTabClick = function (obj) {
         var userId = this.userDialog.id;
         if (this.userDialogLastActiveTab === obj.label) {
             return;
         }
-        if (obj.label === 'Avatars') {
+        if (obj.label === 'Groups') {
+            if (this.userDialogLastGroup !== userId) {
+                this.userDialogLastGroup = userId;
+                this.getUserGroups(userId);
+            }
+        } else if (obj.label === 'Avatars') {
             this.setUserDialogAvatars(userId);
             if (this.userDialogLastAvatar !== userId) {
                 this.userDialogLastAvatar = userId;
@@ -19608,6 +19621,45 @@ speechSynthesis.getVoices();
         }
     };
 
+    // userDialog Groups
+
+    $app.data.userGroups = {
+        groups: [],
+        ownGroups: [],
+        mutualGroups: [],
+        remainingGroups: []
+    };
+
+    $app.methods.getUserGroups = async function (userId) {
+        this.userDialog.isGroupsLoading = true;
+        this.userGroups = {
+            groups: [],
+            ownGroups: [],
+            mutualGroups: [],
+            remainingGroups: []
+        };
+        var params = {
+            n: 100,
+            offset: 0,
+            userId
+        };
+        var args = await API.getGroups(params);
+        this.userGroups.groups = args.json;
+        for (var i = 0; i < args.json.length; ++i) {
+            var group = args.json[i];
+            if (group.ownerId === userId) {
+                this.userGroups.ownGroups.unshift(group);
+            }
+            if (group.mutualGroup) {
+                this.userGroups.mutualGroups.unshift(group);
+            }
+            if (!group.mutualGroup && group.ownerId !== userId) {
+                this.userGroups.remainingGroups.unshift(group);
+            }
+        }
+        this.userDialog.isGroupsLoading = false;
+    };
+
     // gallery
 
     $app.data.galleryDialog = {};
@@ -22202,6 +22254,74 @@ speechSynthesis.getVoices();
         );
     };
 
+    // App: Groups
+
+    API.cachedGroups = new Map();
+
+    /*
+        params: {
+            groupId: string
+        }
+    */
+    API.getGroup = function (params) {
+        // includeRoles=true
+        return this.call(`groups/${params.groupId}`, {
+            method: 'GET'
+        }).then((json) => {
+            var args = {
+                json,
+                params
+            };
+            this.$emit('GROUP', args);
+            return args;
+        });
+    };
+
+    API.$on('GROUP', function (args) {
+        var group = args.json;
+        console.log(args);
+        this.cachedGroups.set(group.id, group);
+    });
+
+    /*
+        params: {
+            userId: string
+        }
+    */
+    API.getGroups = function (params) {
+        return this.call(`users/${params.userId}/groups`, {
+            method: 'GET'
+        }).then((json) => {
+            var args = {
+                json,
+                params
+            };
+            this.$emit('GROUP:LIST', args);
+            return args;
+        });
+    };
+
+    API.$on('GROUP:LIST', function (args) {
+        console.log(args.json);
+        for (var i = 0; i < args.json.length; ++i) {
+            var group = args.json[i];
+            this.cachedGroups.set(group.id, group);
+        }
+    });
+
+    $app.data.groupDialog = {
+        visible: false,
+        loading: false,
+        id: '',
+        group: null
+    };
+
+    $app.methods.showGroupDialog = function (groupId) {
+        // this.$nextTick(() => adjustDialogZ(this.$refs.groupDialog.$el));
+        this.groupDialog.visible = true;
+        this.groupDialog.id = groupId;
+    };
+
     $app = new Vue($app);
     window.$app = $app;
 })();

html/src/index.pug

@@ -1774,6 +1774,40 @@ html
                                         span.extra
                                             span(v-text="userDialog.$homeLocationName")
                                             el-button(@click.stop="resetHome()" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
+                        el-tab-pane(label="Groups")
+                            el-button(type="default" :loading="userDialog.isGroupsLoading" @click="getUserGroups(userDialog.id)" size="mini" icon="el-icon-refresh" circle)
+                            span(style="margin-left:5px") Total {{ userGroups.groups.length }}
+                            div(v-loading="userDialog.isGroupsLoading" style="margin-top:10px")
+                                template(v-if="userGroups.ownGroups.length > 0")
+                                    span(style="font-weight:bold;font-size:16px") Own Groups
+                                    span(style="color:#909399;font-size:12px;margin-left:5px") {{ userGroups.ownGroups.length }}
+                                    .x-friend-list(style="margin-top:10px;margin-bottom:15px;min-height:60px")
+                                        .x-friend-item(v-for="group in userGroups.ownGroups" :key="group.id" @click="showGroupDialog(group.id)" class="x-friend-item-border")
+                                            .avatar
+                                                img(v-lazy="group.iconUrl")
+                                            .detail
+                                                span.name(v-text="group.name")
+                                                span.extra ({{ group.memberCount }})
+                                template(v-if="userGroups.mutualGroups.length > 0")
+                                    span(style="font-weight:bold;font-size:16px") Mutual Groups
+                                    span(style="color:#909399;font-size:12px;margin-left:5px") {{ userGroups.mutualGroups.length }}
+                                    .x-friend-list(v-if="userGroups.mutualGroups.length > 0" style="margin-top:10px;margin-bottom:15px;min-height:60px")
+                                        .x-friend-item(v-for="group in userGroups.mutualGroups" :key="group.id" @click="showGroupDialog(group.id)" class="x-friend-item-border")
+                                            .avatar
+                                                img(v-lazy="group.iconUrl")
+                                            .detail
+                                                span.name(v-text="group.name")
+                                                span.extra ({{ group.memberCount }})
+                                template(v-if="userGroups.remainingGroups.length > 0")
+                                    span(style="font-weight:bold;font-size:16px") Groups
+                                    span(style="color:#909399;font-size:12px;margin-left:5px") {{ userGroups.remainingGroups.length }}
+                                    .x-friend-list(v-if="userGroups.remainingGroups.length > 0" style="margin-top:10px;margin-bottom:15px;min-height:60px")
+                                        .x-friend-item(v-for="group in userGroups.remainingGroups" :key="group.id" @click="showGroupDialog(group.id)" class="x-friend-item-border")
+                                            .avatar
+                                                img(v-lazy="group.iconUrl")
+                                            .detail
+                                                span.name(v-text="group.name")
+                                                span.extra ({{ group.memberCount }})
                         el-tab-pane(label="Worlds")
                             el-button(type="default" :loading="userDialog.isWorldsLoading" @click="refreshUserDialogWorlds()" size="mini" icon="el-icon-refresh" circle)
                             span(style="margin-left:5px") Total {{ userDialog.worlds.length }}