Manage seeing group members on group profile

webapp/locales/de.json

@@ -420,6 +420,7 @@
     },
     "membersCount": "Mitglied ::: Mitglieder",
     "membersListTitle": "Gruppenmitglieder",
+    "membersListTitleNotAllowedSeeingGroupMembers": "Gruppenmitglieder unsichtbar",
     "newGroup": "Erstelle eine neue Gruppe",
     "role": "Deine Rolle in der Gruppe",
     "roles": {

webapp/locales/en.json

@@ -420,6 +420,7 @@
     },
     "membersCount": "Member ::: Members",
     "membersListTitle": "Group Members",
+    "membersListTitleNotAllowedSeeingGroupMembers": "Group Members invisible",
     "newGroup": "Create a new Group",
     "role": "Your role in the group",
     "roles": {

webapp/pages/group/_id/_slug.vue

@@ -49,9 +49,9 @@
               {{ $t('group.foundation') }} {{ group.createdAt | date('MMMM yyyy') }}
             </ds-text>
           </ds-space>
-          <ds-flex>
+          <ds-flex v-if="isAllowedSeeingGroupMembers">
             <!-- Group members count -->
-            <ds-flex-item>
+            <ds-flex-item v-if="isAllowedSeeingGroupMembers">
               <client-only>
                 <ds-number :label="$t('group.membersCount', {}, groupMembers.length)">
                   <count-to
@@ -198,6 +198,11 @@
         <profile-list
           :uniqueName="`groupMembersFilter`"
           :title="$t('group.membersListTitle')"
+          :titleNobody="
+            !isAllowedSeeingGroupMembers
+              ? $t('group.membersListTitleNotAllowedSeeingGroupMembers')
+              : null
+          "
           :allProfilesCount="groupMembers.length"
           :profiles="groupMembers"
           :loading="$apollo.loading"
@@ -367,6 +372,7 @@ export default {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
       Group: [],
       GroupMembers: [],
+      loadGroupMembers: false,
       posts: [],
       // hasMore: true,
       // offset: 0,
@@ -389,18 +395,6 @@ export default {
     group() {
       return this.Group[0] ? this.Group[0] : {}
     },
-    groupMembers() {
-      return this.GroupMembers ? this.GroupMembers : []
-    },
-    isGroupOwner() {
-      return this.group ? this.group.myRole === 'owner' : false
-    },
-    isGroupMember() {
-      return this.group ? !!this.group.myRole : false
-    },
-    isGroupMemberNonePending() {
-      return this.group ? ['usual', 'admin', 'owner'].includes(this.group.myRole) : false
-    },
     groupName() {
       const { name } = this.group || {}
       return name || this.$t('profile.userAnonym')
@@ -412,6 +406,25 @@ export default {
     groupDescriptionExcerpt() {
       return this.group ? this.$filters.removeLinks(this.group.descriptionExcerpt) : ''
     },
+    isGroupOwner() {
+      return this.group ? this.group.myRole === 'owner' : false
+    },
+    isGroupMember() {
+      return this.group ? !!this.group.myRole : false
+    },
+    isGroupMemberNonePending() {
+      return this.group ? ['usual', 'admin', 'owner'].includes(this.group.myRole) : false
+    },
+    groupMembers() {
+      return this.GroupMembers ? this.GroupMembers : []
+    },
+    isAllowedSeeingGroupMembers() {
+      return (
+        this.group &&
+        (this.group.groupType === 'public' ||
+          (['closed', 'hidden'].includes(this.group.groupType) && this.isGroupMemberNonePending))
+      )
+    },
     // tabOptions() {
     //   return [
     //     {
@@ -435,6 +448,11 @@ export default {
     //   ]
     // },
   },
+  watch: {
+    isAllowedSeeingGroupMembers(to, _from) {
+      this.loadGroupMembers = to
+    },
+  },
   methods: {
     // handleTab(tab) {
     //   if (this.tabActive !== tab) {
@@ -594,6 +612,9 @@ export default {
           id: this.$route.params.id,
         }
       },
+      skip() {
+        return !this.loadGroupMembers
+      },
       error(error) {
         this.$toast.error(error.message)
       },