Implement members list on group profile

webapp/locales/de.json

@@ -370,6 +370,11 @@
     "follow": "Folgen",
     "following": "Folge Ich"
   },
+  "group": {
+    "foundation": "Gründung",
+    "goal": "Ziel:",
+    "membersListTitle": "Gruppenmitglieder"
+  },
   "hashtags-filter": {
     "clearSearch": "Suche löschen",
     "hashtag-search": "Suche nach #{hashtag}",
@@ -527,8 +532,6 @@
     "follow": "Folgen",
     "followers": "Folgen",
     "following": "Folge Ich",
-    "groupGoal": "Ziel:",
-    "groupSince": "Gründung",
     "invites": {
       "description": "Zur Einladung die E-Mail-Adresse hier eintragen.",
       "emailPlaceholder": "E-Mail-Adresse für die Einladung",

webapp/locales/en.json

@@ -370,6 +370,11 @@
     "follow": "Follow",
     "following": "Following"
   },
+  "group": {
+    "foundation": "Foundation",
+    "goal": "Goal:",
+    "membersListTitle": "Group Members"
+  },
   "hashtags-filter": {
     "clearSearch": "Clear search",
     "hashtag-search": "Searching for #{hashtag}",
@@ -527,8 +532,6 @@
     "follow": "Follow",
     "followers": "Followers",
     "following": "Following",
-    "groupGoal": "Goal:",
-    "groupSince": "Foundation",
     "invites": {
       "description": "Enter their e-mail address for invitation.",
       "emailPlaceholder": "E-mail to invite",

webapp/locales/es.json

@@ -297,6 +297,11 @@
     "follow": "Seguir",
     "following": "Siguiendo"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "clearSearch": "Borrar búsqueda",
     "hashtag-search": "Buscando a #{hashtag}",

webapp/locales/fr.json

@@ -286,6 +286,11 @@
     "follow": "Suivre",
     "following": "Je suis les"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "clearSearch": "Réinitialiser la recherche",
     "hashtag-search": "Recherche de #{hashtag}",

webapp/locales/it.json

@@ -294,6 +294,11 @@
     "follow": null,
     "following": null
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "clearSearch": null,
     "hashtag-search": null,

webapp/locales/nl.json

@@ -82,6 +82,11 @@
     "follow": "Volgen",
     "following": "Volgt"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "membersListTitle": null
+  },
   "login": {
     "email": "Uw E-mail",
     "hello": "Hallo",

webapp/locales/pl.json

@@ -166,6 +166,11 @@
     "follow": "naśladować",
     "following": "w skutek"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "title": "Twoja bańka filtrująca"
   },

webapp/locales/pt.json

@@ -332,6 +332,11 @@
     "follow": "Seguir",
     "following": "Seguindo"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "clearSearch": "Limpar pesquisa",
     "hashtag-search": "Procurando por #{hashtag}",

webapp/locales/ru.json

@@ -311,6 +311,11 @@
     "follow": "Подписаться",
     "following": "Вы подписаны"
   },
+  "group": {
+    "foundation": null,
+    "goal": null,
+    "membersListTitle": null
+  },
   "hashtags-filter": {
     "clearSearch": "Очистить поиск",
     "hashtag-search": "Поиск по #{hashtag}",

webapp/pages/group/_id/_slug.vue

@@ -42,7 +42,7 @@
               {{ user.location.name }}
             </ds-text> -->
             <ds-text align="center" color="soft" size="small">
-              {{ $t('profile.groupSince') }} {{ group.createdAt | date('MMMM yyyy') }}
+              {{ $t('group.foundation') }} {{ group.createdAt | date('MMMM yyyy') }}
             </ds-text>
           </ds-space>
           <ds-flex>
@@ -84,7 +84,7 @@
             <hr />
             <ds-space margin-top="small" margin-bottom="small">
               <ds-text color="soft" size="small" class="hyphenate-text">
-                {{ $t('profile.groupGoal') }} {{ group.about }}
+                {{ $t('group.goal') }} {{ group.about }}
               </ds-text>
             </ds-space>
           </template>
@@ -93,7 +93,16 @@
         <ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px">
           {{ $t('profile.network.title') }}
         </ds-heading>
-        <!-- <follow-list
+        <profile-list
+          :uniqueName="`grouMembersFilter`"
+          :title="$t('group.membersListTitle')"
+          :allProfilesCount="groupMembers.length"
+          :profiles="groupMembers"
+          :loading="$apollo.loading"
+          @fetchAllProfiles="fetchAllMembers"
+        />
+        <!-- <ds-space />
+        <follow-list
           :loading="$apollo.loading"
           :user="user"
           type="followedBy"
@@ -178,7 +187,7 @@ import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
 // import HcFollowButton from '~/components/FollowButton.vue'
 // import HcCountTo from '~/components/CountTo.vue'
 // import HcBadges from '~/components/Badges.vue'
-// import FollowList from '~/components/features/FollowList/FollowList'
+import FollowList from '~/components/features/ProfileList/FollowList'
 import HcEmpty from '~/components/Empty/Empty'
 // import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import AvatarUploader from '~/components/Uploader/AvatarUploader'
@@ -187,12 +196,12 @@ import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
 // import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
 // import { profilePagePosts } from '~/graphql/PostQuery'
-import { groupQuery } from '~/graphql/groups'
-import { updateGroupMutation } from '~/graphql/groups.js'
+import { updateGroupMutation, groupQuery, groupMembersQuery } from '~/graphql/groups'
 // import { muteUser, unmuteUser } from '~/graphql/settings/MutedUsers'
 // import { blockUser, unblockUser } from '~/graphql/settings/BlockedUsers'
 // import UpdateQuery from '~/components/utils/UpdateQuery'
 // import SocialMedia from '~/components/SocialMedia/SocialMedia'
+import ProfileList from '~/components/features/ProfileList/ProfileList'
 
 // const tabToFilterMapping = ({ tab, id }) => {
 //   return {
@@ -211,11 +220,12 @@ export default {
     // HcBadges,
     HcEmpty,
     ProfileAvatar,
+    ProfileList,
     // ContentMenu,
     AvatarUploader,
     MasonryGrid,
     MasonryGridItem,
-    // FollowList,
+    FollowList,
     // TabNavigation,
   },
   mixins: [postListActions],
@@ -227,28 +237,34 @@ export default {
     // const filter = tabToFilterMapping({ tab: 'post', id: this.$route.params.id })
     return {
       Group: [],
+      GroupMembers: [],
       posts: [],
-      hasMore: true,
-      offset: 0,
-      pageSize: 6,
-      tabActive: 'post',
+      // hasMore: true,
+      // offset: 0,
+      // pageSize: 6,
+      // tabActive: 'post',
       // filter,
-      followedByCountStartValue: 0,
-      followedByCount: 7,
-      followingCount: 7,
+      // followedByCountStartValue: 0,
+      // followedByCount: 7,
+      // followingCount: 7,
+      membersCount: Infinity,
       updateGroupMutation,
     }
   },
   computed: {
+    group() {
+      return this.Group ? this.Group[0] : {}
+    },
+    groupMembers() {
+      console.log('this.GroupMembers: ', this.GroupMembers)
+      return this.GroupMembers ? this.GroupMembers : []
+    },
     isGroupOwner() {
       return this.group.myRole === 'owner'
     },
     isGroupMember() {
       return this.group.myRole
     },
-    group() {
-      return this.Group ? this.Group[0] : {}
-    },
     groupName() {
       const { name } = this.group || {}
       return name || this.$t('profile.userAnonym')
@@ -384,10 +400,9 @@ export default {
     //   this.user.followedByCurrentUser = followedByCurrentUser
     //   this.user.followedBy = followedBy
     // },
-    // fetchAllConnections(type) {
-    //   if (type === 'following') this.followingCount = Infinity
-    //   if (type === 'followedBy') this.followedByCount = Infinity
-    // },
+    fetchAllMembers() {
+      this.membersCount = Infinity
+    },
   },
   apollo: {
     // profilePagePosts: {
@@ -421,6 +436,17 @@ export default {
       },
       fetchPolicy: 'cache-and-network',
     },
+    GroupMembers: {
+      query() {
+        return groupMembersQuery
+      },
+      variables() {
+        return {
+          id: this.$route.params.id,
+        }
+      },
+      fetchPolicy: 'cache-and-network',
+    },
   },
 }
 </script>