Implement post creation in a group

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
@@ -164,6 +168,14 @@ export default {
         }
       }
       this.loading = true
+      // Wolle: console.log('variables: ', {
+      //   title,
+      //   content,
+      //   categoryIds,
+      //   id: this.contribution.id || null,
+      //   image,
+      //   groupId: this.groupId,
+      // })
       this.$apollo
         .mutate({
           mutation: this.contribution.id ? PostMutations().UpdatePost : PostMutations().CreatePost,
@@ -173,6 +185,7 @@ export default {
             categoryIds,
             id: this.contribution.id || null,
             image,
+            groupId: this.groupId,
           },
         })
         .then(({ data }) => {

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) {
+      mutation (
-        CreatePost(title: $title, content: $content, categoryIds: $categoryIds, image: $image) {
+        $title: String!
+        $content: String!
+        $categoryIds: [ID]
+        $image: ImageInput
+        $groupId: ID
+      ) {
+        CreatePost(
+          title: $title
+          content: $content
+          categoryIds: $categoryIds
+          image: $image
+          groupId: $groupId
+        ) {
           title
           slug
           content
@@ -23,14 +35,14 @@ export default () => {
         $title: String!
         $content: String!
         $image: ImageInput
-        $categoryIds: [ID]
+        $categoryIds: [ID] # Wolle: $groupId: ID
       ) {
         UpdatePost(
           id: $id
           title: $title
           content: $content
           image: $image
-          categoryIds: $categoryIds
+          categoryIds: $categoryIds # Wolle: groupId: $groupId
         ) {
           id
           title

webapp/locales/de.json

@@ -605,6 +605,12 @@
       "submitted": "Kommentar gesendet",
       "updated": "Änderungen gespeichert"
     },
+    "createNewPost": {
+      "forGroup": {
+        "title": "Für die Gruppe „{name}“"
+      },
+      "title": "Erstelle einen neuen Beitrag"
+    },
     "edited": "bearbeitet",
     "menu": {
       "delete": "Beitrag löschen",

webapp/locales/en.json

@@ -605,6 +605,12 @@
       "submitted": "Comment submitted!",
       "updated": "Changes saved!"
     },
+    "createNewPost": {
+      "forGroup": {
+        "title": "For The Group “{name}”"
+      },
+      "title": "Create A New Post"
+    },
     "edited": "edited",
     "menu": {
       "delete": "Delete post",

webapp/pages/group/_id/_slug.vue

@@ -249,10 +249,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
@@ -370,8 +369,6 @@ export default {
     // const filter = tabToFilterMapping({ tab: 'post', id: this.$route.params.id })
     return {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
-      Group: [],
-      GroupMembers: [],
       loadGroupMembers: false,
       posts: [],
       // hasMore: true,

webapp/pages/post/create.vue

@@ -1,18 +1,62 @@
 <template>
-  <ds-flex :width="{ base: '100%' }" gutter="base">
+  <div>
-    <ds-flex-item :width="{ base: '100%', md: 5 }">
+    <ds-space margin="small">
-      <hc-contribution-form />
+      <ds-heading tag="h1">{{ $t('post.createNewPost.title') }}</ds-heading>
-    </ds-flex-item>
+      <ds-heading v-if="group" tag="h2">
-    <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
+        {{ $t('post.createNewPost.forGroup.title', { name: group.name }) }}
-  </ds-flex>
+      </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
+    // Wolle: console.log('groupId: ', groupId)
+    // Wolle: check if the user can post in this group. if not … ?
+    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>