Merge branch '5059-epic-groups' of github.com:Ocelot-Social-Community/Ocelot-Social into 5059-epic-groups

2025-12-13 07:45:56 +00:00 · 2022-10-21 11:30:41 +02:00 · 2022-10-21 11:30:41 +02:00 · 46e4d1d945
commit 46e4d1d945
parent 937954b6f6 e68952b17e
22 changed files with 646 additions and 339 deletions
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -267,7 +267,7 @@ jobs:
          report_name: Coverage Webapp
          type: lcov
          result_path: ./coverage/lcov.info
-          min_coverage: 65
+          min_coverage: 64
          token: ${{ github.token }}

  ##############################################################################
--- a/webapp/components/ContributionForm/ContributionForm.spec.js
+++ b/webapp/components/ContributionForm/ContributionForm.spec.js
@ -138,6 +138,7 @@ describe('ContributionForm.vue', () => {
              categoryIds: [],
              id: null,
              image: null,
+              groupId: null,
            },
          }
          postTitleInput = wrapper.find('.ds-input')
@ -260,6 +261,7 @@ describe('ContributionForm.vue', () => {
              content: propsData.contribution.content,
              categoryIds: [],
              id: propsData.contribution.id,
+              groupId: null,
              image: {
                sensitive: false,
              },
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@ -99,6 +99,10 @@ export default {
      type: Object,
      default: () => ({}),
    },
+    groupId: {
+      type: String,
+      default: () => null,
+    },
  },
  data() {
    const { title, content, image, categories } = this.contribution
@ -173,6 +177,7 @@ export default {
            categoryIds,
            id: this.contribution.id || null,
            image,
+            groupId: this.groupId,
          },
        })
        .then(({ data }) => {
--- a/webapp/components/Group/GroupList.spec.js
+++ b/webapp/components/Group/GroupList.spec.js
@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils'
+import GroupList from './GroupList.vue'
+
+const localVue = global.localVue
+
+const propsData = {
+  groups: [],
+}
+
+describe('GroupList', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(GroupList, { propsData, mocks, localVue })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.findAll('.group-list')).toHaveLength(1)
+    })
+  })
+})
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="group-list">
    <ds-space margin-bottom="small" v-for="group in groups" :key="group.id">
      <group-teaser :group="group" />
    </ds-space>
--- a/webapp/components/Group/GroupMember.spec.js
+++ b/webapp/components/Group/GroupMember.spec.js
@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils'
+import GroupMember from './GroupMember.vue'
+
+const localVue = global.localVue
+
+const propsData = {
+  groupId: '',
+  groupMembers: [],
+}
+
+describe('GroupMember', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(GroupMember, { propsData, mocks, localVue })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.findAll('.group-member')).toHaveLength(1)
+    })
+  })
+})
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@ -1,5 +1,41 @@
 <template>
-  <div>
+  <div class="group-member">
+    <base-card>
+      <h2 class="title">{{ $t('group.addUser') }}</h2>
+      <ds-form v-model="form" @submit="submit">
+        <ds-flex gutter="small">
+          <ds-flex-item width="90%">
+            <ds-input
+              name="query"
+              model="query"
+              :placeholder="$t('group.addUserPlaceholder')"
+              icon="search"
+            />
+          </ds-flex-item>
+          <ds-flex-item width="30px">
+            <!-- <base-button filled circle type="submit" icon="search" :loading="$apollo.loading" /> -->
+            <base-button filled circle type="submit" icon="search" />
+          </ds-flex-item>
+        </ds-flex>
+      </ds-form>
+      <div v-if="noSlug">Kein User mit diesem Slug gefunden!</div>
+      <div v-if="slugUser.length > 0">
+        <ds-space margin="base" />
+        <ds-flex>
+          <ds-flex-item>
+            <ds-avatar online size="small" :name="slugUser[0].name"></ds-avatar>
+          </ds-flex-item>
+          <ds-flex-item>{{ slugUser[0].name }}</ds-flex-item>
+          <ds-flex-item>{{ slugUser[0].slug }}</ds-flex-item>
+          <ds-flex-item>
+            <ds-button size="small" primary @click="addMemberToGroup(slugUser)">
+              {{ $t('group.addMemberToGroup') }}
+            </ds-button>
+          </ds-flex-item>
+        </ds-flex>
+        <ds-space margin="base" />
+      </div>
+    </base-card>
    <ds-table :fields="tableFields" :data="groupMembers" condensed>
      <template #avatar="scope">
        <nuxt-link
@ -51,7 +87,12 @@
        </ds-chip>
      </template>
      <template #edit="scope">
-        <ds-button size="small" primary :disabled="true" @click="openModal(scope.row)">
+        <ds-button
+          v-if="scope.row.myRoleInGroup !== 'owner'"
+          size="small"
+          primary
+          @click="deleteMember(scope.row.id)"
+        >
          <!-- TODO: implement removal of group members -->
          <!--           :disabled="scope.row.myRoleInGroup === 'owner'"
 -->
@ -74,6 +115,7 @@
  </div>
 </template>
 <script>
+import { minimisedUserQuery } from '~/graphql/User'
 import { changeGroupMemberRoleMutation } from '~/graphql/groups.js'

 export default {
@ -92,6 +134,11 @@ export default {
    return {
      isOpen: false,
      memberId: null,
+      noSlug: false,
+      slugUser: [],
+      form: {
+        query: '',
+      },
    }
  },
  computed: {
@ -135,14 +182,53 @@ export default {
        this.$toast.error(error.message)
      }
    },
+    async addMemberToGroup() {
+      const newRole = 'usual'
+      try {
+        await this.$apollo.mutate({
+          mutation: changeGroupMemberRoleMutation(),
+          variables: { groupId: this.groupId, userId: this.slugUser[0].id, roleInGroup: newRole },
+        })
+        // this.$apollo.queries.GroupMembers.refetch()
+        this.$emit('loadGroupMembers')
+        this.slugUser = []
+        this.form.query = ''
+        this.$toast.success(
+          this.$t('group.changeMemberRole', { role: this.$t(`group.roles.${newRole}`) }),
+        )
+      } catch (error) {
+        this.$toast.error(error.message)
+      }
+    },
+    async submit() {
+      try {
+        const {
+          data: { User },
+        } = await this.$apollo.query({
+          query: minimisedUserQuery(),
+          variables: {
+            slug: this.form.query,
+          },
+        })
+        if (User.length === 0) {
+          this.noSlug = true
+        } else {
+          this.noSlug = false
+          this.slugUser = User
+        }
+      } catch (error) {
+        this.noSlug = true
+      } finally {
+      }
+    },
    // TODO: implement removal of group members
    // openModal(row) {
    //   this.isOpen = true
    //   this.memberId = row.id
    // },
-    // deleteMember(id) {
-    //   alert('deleteMember: ' + id)
-    // },
+    deleteMember(id) {
+      alert('deleteMember: ' + id)
+    },
  },
 }
 </script>
--- a/webapp/graphql/PostMutations.js
+++ b/webapp/graphql/PostMutations.js
@ -3,8 +3,20 @@ import gql from 'graphql-tag'
 export default () => {
  return {
    CreatePost: gql`
-      mutation ($title: String!, $content: String!, $categoryIds: [ID], $image: ImageInput) {
-        CreatePost(title: $title, content: $content, categoryIds: $categoryIds, image: $image) {
+      mutation (
+        $title: String!
+        $content: String!
+        $categoryIds: [ID]
+        $image: ImageInput
+        $groupId: ID
+      ) {
+        CreatePost(
+          title: $title
+          content: $content
+          categoryIds: $categoryIds
+          image: $image
+          groupId: $groupId
+        ) {
          title
          slug
          content
--- a/webapp/graphql/PostQuery.js
+++ b/webapp/graphql/PostQuery.js
@ -39,6 +39,11 @@ export default (i18n) => {
            ...locationAndBadges
          }
        }
+        group {
+          id
+          name
+          slug
+        }
      }
    }
  `
--- a/webapp/graphql/User.js
+++ b/webapp/graphql/User.js
@ -49,8 +49,8 @@ export default (i18n) => {

 export const minimisedUserQuery = () => {
  return gql`
-    query {
-      User(orderBy: slug_asc) {
+    query ($slug: String) {
+      User(slug: $slug, orderBy: slug_asc) {
        id
        slug
        name
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@ -404,6 +404,9 @@
      "regional": "Regionale Gruppe"
    },
    "actionRadius": "Aktionsradius",
+    "addMemberToGroup": "Zur Gruppe hinzufügen",
+    "addUser": "Benutzer hinzufügen",
+    "addUserPlaceholder": "eindeutiger Benutzername > @slug-from-user",
    "categories": "Thema ::: Themen",
    "changeMemberRole": "Die Rolle wurde auf „{role}“ geändert!",
    "contentMenu": {
@ -605,7 +608,19 @@
      "submitted": "Kommentar gesendet",
      "updated": "Änderungen gespeichert"
    },
+    "createNewPost": {
+      "forGroup": {
+        "title": "Für die Gruppe „{name}“"
+      },
+      "title": "Erstelle einen neuen Beitrag"
+    },
    "edited": "bearbeitet",
+    "editPost": {
+      "forGroup": {
+        "title": "Für die Gruppe „{name}“"
+      },
+      "title": "Bearbeite deinen Beitrag"
+    },
    "menu": {
      "delete": "Beitrag löschen",
      "edit": "Beitrag bearbeiten",
@ -618,6 +633,12 @@
    "pinned": "Meldung",
    "takeAction": {
      "name": "Aktiv werden"
+    },
+    "viewPost": {
+      "forGroup": {
+        "title": "In der Gruppe „{name}“"
+      },
+      "title": "Beitrag"
    }
  },
  "profile": {
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@ -404,6 +404,9 @@
      "regional": "Regional Group"
    },
    "actionRadius": "Action radius",
+    "addMemberToGroup": "Add to group",
+    "addUser": "Add User",
+    "addUserPlaceholder": "unique username > @slug-from-user",
    "categories": "Topic ::: Topics",
    "changeMemberRole": "The role has been changed to “{role}”!",
    "contentMenu": {
@ -605,7 +608,19 @@
      "submitted": "Comment submitted!",
      "updated": "Changes saved!"
    },
+    "createNewPost": {
+      "forGroup": {
+        "title": "For The Group “{name}”"
+      },
+      "title": "Create A New Post"
+    },
    "edited": "edited",
+    "editPost": {
+      "forGroup": {
+        "title": "For The Group “{name}”"
+      },
+      "title": "Edit Your Post"
+    },
    "menu": {
      "delete": "Delete post",
      "edit": "Edit post",
@ -618,6 +633,12 @@
    "pinned": "Announcement",
    "takeAction": {
      "name": "Take action"
+    },
+    "viewPost": {
+      "forGroup": {
+        "title": "In The Group “{name}”"
+      },
+      "title": "Post"
    }
  },
  "profile": {
--- a/webapp/pages/group/_id/_slug.spec.js
+++ b/webapp/pages/group/_id/_slug.spec.js
@ -8,8 +8,8 @@ localVue.filter('date', (d) => d)
 config.stubs['client-only'] = '<span><slot /></span>'
 config.stubs['v-popover'] = '<span><slot /></span>'
 config.stubs['nuxt-link'] = '<span><slot /></span>'
-// config.stubs['infinite-loading'] = '<span><slot /></span>'
-// config.stubs['follow-list'] = '<span><slot /></span>'
+config.stubs['infinite-loading'] = '<span><slot /></span>'
+config.stubs['follow-list'] = '<span><slot /></span>'

 describe('GroupProfileSlug', () => {
  let wrapper
@ -196,10 +196,11 @@ describe('GroupProfileSlug', () => {
  })

  describe('mount', () => {
-    Wrapper = () => {
+    Wrapper = (data = () => {}) => {
      return mount(GroupProfileSlug, {
        mocks,
        localVue,
+        data,
      })
    }

@ -213,15 +214,16 @@ describe('GroupProfileSlug', () => {
                'auth/isModerator': () => false,
              },
            }
-            wrapper = Wrapper()
-            wrapper.setData({
-              Group: [
-                {
-                  ...yogaPractice,
-                  myRole: 'owner',
-                },
-              ],
-              GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...yogaPractice,
+                    myRole: 'owner',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
            })
          })

@ -365,15 +367,16 @@ describe('GroupProfileSlug', () => {
                'auth/isModerator': () => false,
              },
            }
-            wrapper = Wrapper()
-            wrapper.setData({
-              Group: [
-                {
-                  ...yogaPractice,
-                  myRole: 'usual',
-                },
-              ],
-              GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...yogaPractice,
+                    myRole: 'usual',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
            })
          })

@ -477,15 +480,16 @@ describe('GroupProfileSlug', () => {
                'auth/isModerator': () => false,
              },
            }
-            wrapper = Wrapper()
-            wrapper.setData({
-              Group: [
-                {
-                  ...yogaPractice,
-                  myRole: 'pending',
-                },
-              ],
-              GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...yogaPractice,
+                    myRole: 'pending',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
            })
          })

@ -589,15 +593,16 @@ describe('GroupProfileSlug', () => {
                'auth/isModerator': () => false,
              },
            }
-            wrapper = Wrapper()
-            wrapper.setData({
-              Group: [
-                {
-                  ...yogaPractice,
-                  myRole: null,
-                },
-              ],
-              GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...yogaPractice,
+                    myRole: null,
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
            })
          })

@ -705,15 +710,16 @@ describe('GroupProfileSlug', () => {
                'auth/isModerator': () => false,
              },
            }
-            wrapper = Wrapper()
-            wrapper.setData({
-              Group: [
-                {
-                  ...schoolForCitizens,
-                  myRole: 'owner',
-                },
-              ],
-              GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...schoolForCitizens,
+                    myRole: 'owner',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
            })
          })

@ -821,15 +827,16 @@ describe('GroupProfileSlug', () => {
                'auth/isModerator': () => false,
              },
            }
-            wrapper = Wrapper()
-            wrapper.setData({
-              Group: [
-                {
-                  ...schoolForCitizens,
-                  myRole: 'usual',
-                },
-              ],
-              GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...schoolForCitizens,
+                    myRole: 'usual',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
            })
          })

@ -937,15 +944,16 @@ describe('GroupProfileSlug', () => {
                'auth/isModerator': () => false,
              },
            }
-            wrapper = Wrapper()
-            wrapper.setData({
-              Group: [
-                {
-                  ...schoolForCitizens,
-                  myRole: 'pending',
-                },
-              ],
-              GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...schoolForCitizens,
+                    myRole: 'pending',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
            })
          })

@ -1053,15 +1061,16 @@ describe('GroupProfileSlug', () => {
                'auth/isModerator': () => false,
              },
            }
-            wrapper = Wrapper()
-            wrapper.setData({
-              Group: [
-                {
-                  ...schoolForCitizens,
-                  myRole: null,
-                },
-              ],
-              GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...schoolForCitizens,
+                    myRole: null,
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
            })
          })

@ -1173,15 +1182,16 @@ describe('GroupProfileSlug', () => {
                'auth/isModerator': () => false,
              },
            }
-            wrapper = Wrapper()
-            wrapper.setData({
-              Group: [
-                {
-                  ...investigativeJournalism,
-                  myRole: 'owner',
-                },
-              ],
-              GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...investigativeJournalism,
+                    myRole: 'owner',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
            })
          })

@ -1292,15 +1302,16 @@ describe('GroupProfileSlug', () => {
                'auth/isModerator': () => false,
              },
            }
-            wrapper = Wrapper()
-            wrapper.setData({
-              Group: [
-                {
-                  ...investigativeJournalism,
-                  myRole: 'usual',
-                },
-              ],
-              GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...investigativeJournalism,
+                    myRole: 'usual',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
            })
          })

@ -1411,15 +1422,16 @@ describe('GroupProfileSlug', () => {
                'auth/isModerator': () => false,
              },
            }
-            wrapper = Wrapper()
-            wrapper.setData({
-              Group: [
-                {
-                  ...investigativeJournalism,
-                  myRole: 'pending',
-                },
-              ],
-              GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...investigativeJournalism,
+                    myRole: 'pending',
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
            })
          })

@ -1518,15 +1530,16 @@ describe('GroupProfileSlug', () => {
                'auth/isModerator': () => false,
              },
            }
-            wrapper = Wrapper()
-            wrapper.setData({
-              Group: [
-                {
-                  ...investigativeJournalism,
-                  myRole: null,
-                },
-              ],
-              GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+            wrapper = Wrapper(() => {
+              return {
+                Group: [
+                  {
+                    ...investigativeJournalism,
+                    myRole: null,
+                  },
+                ],
+                GroupMembers: [peterLustig, jennyRostock, bobDerBaumeister, huey],
+              }
            })
          })

--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@ -250,10 +250,9 @@
          </base-card>
        </ds-space>
        <ds-space v-if="isGroupMemberNonePending" centered>
-          <nuxt-link :to="{ name: 'post-create' }">
+          <nuxt-link :to="{ name: 'post-create', query: { groupId: group.id } }">
            <base-button
              class="profile-post-add-button"
-              :path="{ name: 'post-create' }"
              icon="plus"
              circle
              filled
@ -297,9 +296,9 @@
            </ds-grid-item>
          </template>
        </masonry-grid>
-        <!-- <client-only>
+        <client-only>
          <infinite-loading v-if="hasMore" @infinite="showMoreContributions" />
-        </client-only> -->
+        </client-only>
      </ds-flex-item>
    </ds-flex>
  </div>
@ -307,11 +306,11 @@

 <script>
 import uniqBy from 'lodash/uniqBy'
-// import { profilePagePosts } from '~/graphql/PostQuery'
+import { profilePagePosts } from '~/graphql/PostQuery'
 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 UpdateQuery from '~/components/utils/UpdateQuery'
 import postListActions from '~/mixins/postListActions'
 import AvatarUploader from '~/components/Uploader/AvatarUploader'
 import Category from '~/components/Category'
@ -369,17 +368,16 @@ export default {
  },
  data() {
    // const filter = tabToFilterMapping({ tab: 'post', id: this.$route.params.id })
+    const filter = { group: { id: this.$route.params.id } }
    return {
      categoriesActive: this.$env.CATEGORIES_ACTIVE,
-      Group: [],
-      GroupMembers: [],
      loadGroupMembers: false,
      posts: [],
-      // hasMore: true,
-      // offset: 0,
-      // pageSize: 6,
+      hasMore: true,
+      offset: 0,
+      pageSize: 6,
      // tabActive: 'post',
-      // filter,
+      filter,
      // followedByCountStartValue: 0,
      // followedByCount: 7,
      // followingCount: 7,
@ -468,30 +466,30 @@ export default {
    uniq(items, field = 'id') {
      return uniqBy(items, field)
    },
-    // showMoreContributions($state) {
-    //   const { profilePagePosts: PostQuery } = this.$apollo.queries
-    //   if (!PostQuery) return // seems this can be undefined on subpages
-    //   this.offset += this.pageSize
+    showMoreContributions($state) {
+      const { profilePagePosts: PostQuery } = this.$apollo.queries
+      if (!PostQuery) return // seems this can be undefined on subpages
+      this.offset += this.pageSize

-    //   PostQuery.fetchMore({
-    //     variables: {
-    //       offset: this.offset,
-    //       filter: this.filter,
-    //       first: this.pageSize,
-    //       orderBy: 'createdAt_desc',
-    //     },
-    //     updateQuery: UpdateQuery(this, { $state, pageKey: 'profilePagePosts' }),
-    //   })
-    // },
-    // resetPostList() {
-    //   this.offset = 0
-    //   this.posts = []
-    //   this.hasMore = true
-    // },
-    // refetchPostList() {
-    //   this.resetPostList()
-    //   this.$apollo.queries.profilePagePosts.refetch()
-    // },
+      PostQuery.fetchMore({
+        variables: {
+          offset: this.offset,
+          filter: this.filter,
+          first: this.pageSize,
+          orderBy: 'createdAt_desc',
+        },
+        updateQuery: UpdateQuery(this, { $state, pageKey: 'profilePagePosts' }),
+      })
+    },
+    resetPostList() {
+      this.offset = 0
+      this.posts = []
+      this.hasMore = true
+    },
+    refetchPostList() {
+      this.resetPostList()
+      this.$apollo.queries.profilePagePosts.refetch()
+    },
    // async muteUser(user) {
    //   try {
    //     await this.$apollo.mutate({ mutation: muteUser(), variables: { id: user.id } })
@ -578,23 +576,23 @@ export default {
    },
  },
  apollo: {
-    // profilePagePosts: {
-    //   query() {
-    //     return profilePagePosts(this.$i18n)
-    //   },
-    //   variables() {
-    //     return {
-    //       filter: this.filter,
-    //       first: this.pageSize,
-    //       offset: 0,
-    //       orderBy: 'createdAt_desc',
-    //     }
-    //   },
-    //   update({ profilePagePosts }) {
-    //     this.posts = profilePagePosts
-    //   },
-    //   fetchPolicy: 'cache-and-network',
-    // },
+    profilePagePosts: {
+      query() {
+        return profilePagePosts(this.$i18n)
+      },
+      variables() {
+        return {
+          filter: this.filter,
+          first: this.pageSize,
+          offset: 0,
+          orderBy: 'createdAt_desc',
+        }
+      },
+      update({ profilePagePosts }) {
+        this.posts = profilePagePosts
+      },
+      fetchPolicy: 'cache-and-network',
+    },
    Group: {
      query() {
        return groupQuery(this.$i18n)
--- a/webapp/pages/group/edit/_id/members.vue
+++ b/webapp/pages/group/edit/_id/members.vue
@ -3,7 +3,11 @@
    <base-card>
      <ds-heading tag="h3">{{ $t('group.members') }}</ds-heading>
      <ds-space margin="large" />
-      <group-member :groupId="group.id" :groupMembers="groupMembers" />
+      <group-member
+        :groupId="group.id"
+        :groupMembers="groupMembers"
+        @loadGroupMembers="loadGroupMembers"
+      />
    </base-card>
  </div>
 </template>
@ -44,5 +48,10 @@ export default {
      fetchPolicy: 'cache-and-network',
    },
  },
+  methods: {
+    loadGroupMembers() {
+      this.$apollo.queries.GroupMembers.refetch()
+    },
+  },
 }
 </script>
--- a/webapp/pages/post/_id.spec.js.old
+++ b/webapp/pages/post/_id.spec.js.old
--- a/webapp/pages/post/_id.vue
+++ b/webapp/pages/post/_id.vue
@ -1,16 +1,7 @@
 <template>
-  <div>
-    <ds-flex gutter="small">
-      <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
-        <transition name="slide-up" appear>
-          <nuxt-child />
-        </transition>
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '200px' }">
-        <ds-menu :routes="routes" class="post-side-navigation" />
-      </ds-flex-item>
-    </ds-flex>
-  </div>
+  <transition name="slide-up" appear>
+    <nuxt-child />
+  </transition>
 </template>

 <script>
@ -41,40 +32,5 @@ const persistentLinks = PersistentLinks(options)

 export default {
  mixins: [persistentLinks],
-  computed: {
-    routes() {
-      const { slug, id } = this.$route.params
-      return [
-        {
-          name: this.$t('common.post', null, 1),
-          path: `/post/${id}/${slug}`,
-          children: [
-            {
-              name: this.$t('common.comment', null, 2),
-              path: `/post/${id}/${slug}#comments`,
-            },
-            // TODO implement
-            /* {
-              name: this.$t('common.letsTalk'),
-              path: `/post/${id}/${slug}#lets-talk`
-            }, */
-            // TODO implement
-            /* {
-              name: this.$t('common.versus'),
-              path: `/post/${id}/${slug}#versus`
-            } */
-          ],
-        },
-      ]
-    },
-  },
 }
 </script>
-
-<style lang="scss">
-.post-side-navigation {
-  position: sticky;
-  top: 65px;
-  z-index: 2;
-}
-</style>
--- a/webapp/pages/post/_id/_slug/index.spec.js
+++ b/webapp/pages/post/_id/_slug/index.spec.js
@ -56,6 +56,10 @@ describe('PostSlug', () => {
        },
        $route: {
          hash: '',
+          params: {
+            slug: 'slug',
+            id: 'id',
+          },
        },
        // If you are mocking the router, then don't use VueRouter with localVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
        $router: {
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@ -1,107 +1,129 @@
 <template>
  <transition name="fade" appear>
-    <base-card
-      v-if="post && ready"
-      :lang="post.language"
-      :class="{
-        'post-page': true,
-        'disabled-content': post.disabled,
-        '--blur-image': blurred,
-      }"
-      :style="heroImageStyle"
-    >
-      <template #heroImage v-if="post.image">
-        <img :src="post.image | proxyApiUrl" class="image" />
-        <aside v-show="post.image && post.image.sensitive" class="blur-toggle">
-          <img v-show="blurred" :src="post.image | proxyApiUrl" class="preview" />
-          <base-button
-            :icon="blurred ? 'eye' : 'eye-slash'"
-            filled
-            circle
-            @click="blurred = !blurred"
-          />
-        </aside>
-      </template>
-      <section class="menu">
-        <user-teaser :user="post.author" :date-time="post.createdAt">
-          <template #dateTime>
-            <ds-text v-if="post.createdAt !== post.updatedAt">({{ $t('post.edited') }})</ds-text>
-          </template>
-        </user-teaser>
-        <client-only>
-          <content-menu
-            placement="bottom-end"
-            resource-type="contribution"
-            :resource="post"
-            :modalsData="menuModalsData"
-            :is-owner="isAuthor"
-            @pinPost="pinPost"
-            @unpinPost="unpinPost"
-          />
-        </client-only>
-      </section>
-      <ds-space margin-bottom="small" />
-      <h2 class="title hyphenate-text">{{ post.title }}</h2>
-      <ds-space margin-bottom="small" />
-      <content-viewer class="content hyphenate-text" :content="post.content" />
-      <!-- Categories -->
-      <div v-if="categoriesActive" class="categories">
-        <ds-space margin="xx-large" />
-        <ds-space margin="xx-small" />
-        <hc-category
-          v-for="category in post.categories"
-          :key="category.id"
-          :icon="category.icon"
-          :name="$t(`contribution.category.name.${category.slug}`)"
-          v-tooltip="{
-            content: $t(`contribution.category.description.${category.slug}`),
-            placement: 'bottom-start',
-          }"
-        />
-      </div>
-      <ds-space margin-bottom="small" />
-      <!-- Tags -->
-      <div v-if="post.tags && post.tags.length" class="tags">
-        <ds-space margin="xx-small" />
-        <hc-hashtag v-for="tag in sortedTags" :key="tag.id" :id="tag.id" />
-      </div>
-      <ds-space margin-top="small">
-        <ds-flex :gutter="{ lg: 'small' }">
-          <!-- Shout Button -->
-          <ds-flex-item
-            :width="{ lg: '15%', md: '22%', sm: '22%', base: '100%' }"
-            class="shout-button"
-          >
-            <hc-shout-button
-              v-if="post.author"
-              :disabled="isAuthor"
-              :count="post.shoutedCount"
-              :is-shouted="post.shoutedByCurrentUser"
-              :post-id="post.id"
-            />
-          </ds-flex-item>
-        </ds-flex>
+    <div>
+      <ds-space margin="small">
+        <ds-heading tag="h1">{{ $t('post.viewPost.title') }}</ds-heading>
+        <ds-heading v-if="post && post.group" tag="h2">
+          {{ $t('post.viewPost.forGroup.title', { name: post.group.name }) }}
+        </ds-heading>
      </ds-space>
-      <!-- Comments -->
-      <ds-section>
-        <comment-list :post="post" @toggleNewCommentForm="toggleNewCommentForm" @reply="reply" />
-        <ds-space margin-bottom="large" />
-        <comment-form
-          v-if="showNewCommentForm && !isBlocked"
-          ref="commentForm"
-          :post="post"
-          @createComment="createComment"
-        />
-        <ds-placeholder v-if="isBlocked">
-          {{ $t('settings.blocked-users.explanation.commenting-disabled') }}
-          <br />
-          {{ $t('settings.blocked-users.explanation.commenting-explanation') }}
-          <page-params-link :pageParams="links.FAQ">
-            {{ $t('site.faq') }}
-          </page-params-link>
-        </ds-placeholder>
-      </ds-section>
-    </base-card>
+      <ds-space margin="large" />
+      <ds-flex gutter="small">
+        <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
+          <base-card
+            v-if="post && ready"
+            :lang="post.language"
+            :class="{
+              'post-page': true,
+              'disabled-content': post.disabled,
+              '--blur-image': blurred,
+            }"
+            :style="heroImageStyle"
+          >
+            <template #heroImage v-if="post.image">
+              <img :src="post.image | proxyApiUrl" class="image" />
+              <aside v-show="post.image && post.image.sensitive" class="blur-toggle">
+                <img v-show="blurred" :src="post.image | proxyApiUrl" class="preview" />
+                <base-button
+                  :icon="blurred ? 'eye' : 'eye-slash'"
+                  filled
+                  circle
+                  @click="blurred = !blurred"
+                />
+              </aside>
+            </template>
+            <section class="menu">
+              <user-teaser :user="post.author" :date-time="post.createdAt">
+                <template #dateTime>
+                  <ds-text v-if="post.createdAt !== post.updatedAt">
+                    ({{ $t('post.edited') }})
+                  </ds-text>
+                </template>
+              </user-teaser>
+              <client-only>
+                <content-menu
+                  placement="bottom-end"
+                  resource-type="contribution"
+                  :resource="post"
+                  :modalsData="menuModalsData"
+                  :is-owner="isAuthor"
+                  @pinPost="pinPost"
+                  @unpinPost="unpinPost"
+                />
+              </client-only>
+            </section>
+            <ds-space margin-bottom="small" />
+            <h2 class="title hyphenate-text">{{ post.title }}</h2>
+            <ds-space margin-bottom="small" />
+            <content-viewer class="content hyphenate-text" :content="post.content" />
+            <!-- Categories -->
+            <div v-if="categoriesActive" class="categories">
+              <ds-space margin="xx-large" />
+              <ds-space margin="xx-small" />
+              <hc-category
+                v-for="category in post.categories"
+                :key="category.id"
+                :icon="category.icon"
+                :name="$t(`contribution.category.name.${category.slug}`)"
+                v-tooltip="{
+                  content: $t(`contribution.category.description.${category.slug}`),
+                  placement: 'bottom-start',
+                }"
+              />
+            </div>
+            <ds-space margin-bottom="small" />
+            <!-- Tags -->
+            <div v-if="post.tags && post.tags.length" class="tags">
+              <ds-space margin="xx-small" />
+              <hc-hashtag v-for="tag in sortedTags" :key="tag.id" :id="tag.id" />
+            </div>
+            <ds-space margin-top="small">
+              <ds-flex :gutter="{ lg: 'small' }">
+                <!-- Shout Button -->
+                <ds-flex-item
+                  :width="{ lg: '15%', md: '22%', sm: '22%', base: '100%' }"
+                  class="shout-button"
+                >
+                  <hc-shout-button
+                    v-if="post.author"
+                    :disabled="isAuthor"
+                    :count="post.shoutedCount"
+                    :is-shouted="post.shoutedByCurrentUser"
+                    :post-id="post.id"
+                  />
+                </ds-flex-item>
+              </ds-flex>
+            </ds-space>
+            <!-- Comments -->
+            <ds-section>
+              <comment-list
+                :post="post"
+                @toggleNewCommentForm="toggleNewCommentForm"
+                @reply="reply"
+              />
+              <ds-space margin-bottom="large" />
+              <comment-form
+                v-if="showNewCommentForm && !isBlocked"
+                ref="commentForm"
+                :post="post"
+                @createComment="createComment"
+              />
+              <ds-placeholder v-if="isBlocked">
+                {{ $t('settings.blocked-users.explanation.commenting-disabled') }}
+                <br />
+                {{ $t('settings.blocked-users.explanation.commenting-explanation') }}
+                <page-params-link :pageParams="links.FAQ">
+                  {{ $t('site.faq') }}
+                </page-params-link>
+              </ds-placeholder>
+            </ds-section>
+          </base-card>
+        </ds-flex-item>
+        <ds-flex-item :width="{ base: '200px' }">
+          <ds-menu :routes="routes" class="post-side-navigation" />
+        </ds-flex-item>
+      </ds-flex>
+    </div>
  </transition>
 </template>

@ -167,6 +189,31 @@ export default {
    }, 50)
  },
  computed: {
+    routes() {
+      const { slug, id } = this.$route.params
+      return [
+        {
+          name: this.$t('common.post', null, 1),
+          path: `/post/${id}/${slug}`,
+          children: [
+            {
+              name: this.$t('common.comment', null, 2),
+              path: `/post/${id}/${slug}#comments`,
+            },
+            // TODO implement
+            /* {
+              name: this.$t('common.letsTalk'),
+              path: `/post/${id}/${slug}#lets-talk`
+            }, */
+            // TODO implement
+            /* {
+              name: this.$t('common.versus'),
+              path: `/post/${id}/${slug}#versus`
+            } */
+          ],
+        },
+      ]
+    },
    menuModalsData() {
      return postMenuModalsData(
        // "this.post" may not always be defined at the beginning …
@ -266,6 +313,11 @@ export default {
 }
 </script>
 <style lang="scss">
+.post-side-navigation {
+  position: sticky;
+  top: 65px;
+  z-index: 2;
+}
 .post-page {
  > .hero-image {
    position: relative;
--- a/webapp/pages/post/create.spec.js
+++ b/webapp/pages/post/create.spec.js
@ -11,6 +11,11 @@ describe('create.vue', () => {
    $env: {
      CATEGORIES_ACTIVE: false,
    },
+    $route: {
+      query: {
+        groupId: null,
+      },
+    },
  }

  describe('mount', () => {
--- a/webapp/pages/post/create.vue
+++ b/webapp/pages/post/create.vue
@ -1,18 +1,60 @@
 <template>
-  <ds-flex :width="{ base: '100%' }" gutter="base">
-    <ds-flex-item :width="{ base: '100%', md: 5 }">
-      <hc-contribution-form />
-    </ds-flex-item>
-    <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
-  </ds-flex>
+  <div>
+    <ds-space margin="small">
+      <ds-heading tag="h1">{{ $t('post.createNewPost.title') }}</ds-heading>
+      <ds-heading v-if="group" tag="h2">
+        {{ $t('post.createNewPost.forGroup.title', { name: group.name }) }}
+      </ds-heading>
+    </ds-space>
+    <ds-space margin="large" />
+    <ds-flex :width="{ base: '100%' }" gutter="base">
+      <ds-flex-item :width="{ base: '100%', md: 5 }">
+        <contribution-form :groupId="groupId" />
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
+    </ds-flex>
+  </div>
 </template>

 <script>
-import HcContributionForm from '~/components/ContributionForm/ContributionForm'
+import { groupQuery } from '~/graphql/groups'
+import ContributionForm from '~/components/ContributionForm/ContributionForm'

 export default {
  components: {
-    HcContributionForm,
+    ContributionForm,
+  },
+  data() {
+    const { groupId = null } = this.$route.query
+    return {
+      groupId,
+    }
+  },
+  computed: {
+    group() {
+      return this.Group && this.Group[0] ? this.Group[0] : null
+    },
+  },
+  apollo: {
+    Group: {
+      query() {
+        return groupQuery(this.$i18n)
+      },
+      variables() {
+        return {
+          id: this.groupId,
+          // followedByCount: this.followedByCount,
+          // followingCount: this.followingCount,
+        }
+      },
+      skip() {
+        return !this.groupId
+      },
+      error(error) {
+        this.$toast.error(error.message)
+      },
+      fetchPolicy: 'cache-and-network',
+    },
  },
 }
 </script>
--- a/webapp/pages/post/edit/_id.vue
+++ b/webapp/pages/post/edit/_id.vue
@ -1,20 +1,29 @@
 <template>
-  <ds-flex :width="{ base: '100%' }" gutter="base">
-    <ds-flex-item :width="{ base: '100%', md: 3 }">
-      <hc-contribution-form :contribution="contribution" />
-    </ds-flex-item>
-    <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
-  </ds-flex>
+  <div>
+    <ds-space margin="small">
+      <ds-heading tag="h1">{{ $t('post.editPost.title') }}</ds-heading>
+      <ds-heading v-if="contribution && contribution.group" tag="h2">
+        {{ $t('post.editPost.forGroup.title', { name: contribution.group.name }) }}
+      </ds-heading>
+    </ds-space>
+    <ds-space margin="large" />
+    <ds-flex :width="{ base: '100%' }" gutter="base">
+      <ds-flex-item :width="{ base: '100%', md: 3 }">
+        <contribution-form :contribution="contribution" />
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
+    </ds-flex>
+  </div>
 </template>

 <script>
-import HcContributionForm from '~/components/ContributionForm/ContributionForm'
+import ContributionForm from '~/components/ContributionForm/ContributionForm'
 import PostQuery from '~/graphql/PostQuery'
 import { mapGetters } from 'vuex'

 export default {
  components: {
-    HcContributionForm,
+    ContributionForm,
  },
  computed: {
    ...mapGetters({