add graphql groups, add createGroup mutation

webapp/components/GroupForm/GroupForm.vue

@@ -2,25 +2,25 @@
   <div>
     <ds-container>
       <ds-form @submit="submit">
-        <ds-input v-model="name" label="Gruppenname" placeholder="Your name ..."></ds-input>
+        <ds-input v-model="form.name" label="Gruppenname" placeholder="Your name ..."></ds-input>
 
         <ds-select
           icon="user"
-          v-model="status"
+          v-model="form.status"
           label="Status"
           :options="['offen', 'geschlossen', 'geheim']"
           placeholder="Status ..."
         ></ds-select>
 
-        <ds-input v-model="description" label="Beschreibung" type="textarea" rows="3"></ds-input>
+        <ds-input v-model="form.description" label="Beschreibung" type="textarea" rows="3"></ds-input>
 
-        <div>{{ name }}</div>
-        <div>{{ status }}</div>
-        <div>{{ description }}</div>
+        <div>{{ form.name }}</div>
+        <div>{{ form.status }}</div>
+        <div>{{ form.description }}</div>
 
         <ds-space margin-top="large">
           <ds-button @click.prevent="reset()">Reset form</ds-button>
-          <ds-button :disabled="disabled" icon="save" primary>Save group</ds-button>
+          <ds-button type="submit" :disabled="disabled" icon="save" primary>Save group</ds-button>
         </ds-space>
       </ds-form>
       <ds-space centered>
@@ -38,24 +38,33 @@ export default {
   components: {
     CategoriesSelect,
   },
+  props:{
+    value: {
+      type: Object,
+       default: () => ({}),
+      required: true,
+    }
+  },
   data() {
     return {
-      name: '',
-      status: '',
-      description: '',
-      disable: false,
+      form: {
+        name: '',
+        status: '',
+        description: '',
+        disable: false,
+      }
+      
     }
   },
 
   methods: {
     submit() {
-      console.log('handleSubmit')
-    },
-    handleSubmit() {
-      console.log('handleSubmit')
+       console.log('submit', this.form)
+      this.$emit('createGroup', this.form)
+     
     },
     reset() {
-      console.log('handleSubmit')
+      console.log('reset')
     },
   },
 }

webapp/graphql/groups.js

@@ -0,0 +1,107 @@
+import gql from 'graphql-tag'
+
+// ------ mutations
+
+export const createGroupMutation = gql`
+  mutation (
+    $id: ID
+    $name: String!
+    $slug: String
+    $about: String
+    $description: String!
+    $groupType: GroupType!
+    $actionRadius: GroupActionRadius!
+    $categoryIds: [ID]
+  ) {
+    CreateGroup(
+      id: $id
+      name: $name
+      slug: $slug
+      about: $about
+      description: $description
+      groupType: $groupType
+      actionRadius: $actionRadius
+      categoryIds: $categoryIds
+    ) {
+      id
+      name
+      slug
+      createdAt
+      updatedAt
+      disabled
+      deleted
+      about
+      description
+      groupType
+      actionRadius
+      myRole
+      # Wolle: owner {
+      #   name
+      # }
+    }
+  }
+`
+
+// ------ queries
+
+export const groupQuery = gql`
+  query (
+    $isMember: Boolean
+    $id: ID
+    $name: String
+    $slug: String
+    $createdAt: String
+    $updatedAt: String
+    $about: String
+    $description: String
+    # $groupType: GroupType!,
+    # $actionRadius: GroupActionRadius!,
+    # $categoryIds: [ID]
+    $locationName: String
+    $first: Int
+    $offset: Int
+    $orderBy: [_GroupOrdering]
+    $filter: _GroupFilter
+  ) {
+    Group(
+      isMember: $isMember
+      id: $id
+      name: $name
+      slug: $slug
+      createdAt: $createdAt
+      updatedAt: $updatedAt
+      about: $about
+      description: $description
+      # groupType: $groupType
+      # actionRadius: $actionRadius
+      # categoryIds: $categoryIds
+      locationName: $locationName
+      first: $first
+      offset: $offset
+      orderBy: $orderBy
+      filter: $filter
+    ) {
+      id
+      name
+      slug
+      createdAt
+      updatedAt
+      disabled
+      deleted
+      about
+      description
+      groupType
+      actionRadius
+      myRole
+      categories {
+        id
+        slug
+        name
+        icon
+      }
+      # Wolle: owner {
+      #   name
+      # }
+    }
+  }
+`

webapp/pages/group/create.vue

@@ -2,7 +2,7 @@
   <div>
   <ds-flex :width="{ base: '100%' }" gutter="base">
     <ds-flex-item :width="{ base: '100%', md: 5 }">
-      <new-group-form />
+      <new-group-form @createGroup="createGroup"/>
     </ds-flex-item>
     <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
   </ds-flex>
@@ -14,11 +14,49 @@
 <script>
 import NewGroupForm from '~/components/GroupForm/GroupForm'
 import GroupMember from '~/components/GroupMember/GroupMember.vue'
+import { createGroupMutation } from '~/graphql/groups.js'
 
 export default {
   components: {
     NewGroupForm,
     GroupMember,
   },
+  data() {
+    return {
+      createGroupData: {},
+    }
+  },
+   methods: {
+    async createGroup(form) {
+      console.log('createGroupMutation', form)
+      try {
+        await this.$apollo.mutate({
+          mutation: createGroupMutation(),
+          variables: {
+             id: 0,
+             name: 'Gruppenname',
+             slug: '0',
+             about: 'About',
+             description: 'Description',
+             groupType: 'offen',
+             actionRadius: 'GroupActionRadius',
+             categoryIds: ['1','2','3']
+          },
+          update: (_, { data: { createGroupData } }) => {
+            console.log(this.createGroupData)
+            // const { sendNotificationEmails } = createGroup
+            // this.setCreateGroup({
+            //   ...this.createGroup,
+            //   sendNotificationEmails,
+            // })
+            this.$toast.success(this.$t('settings.notifications.success-update'))
+          },
+        })
+      } catch (error) {
+        // this.notifyByEmail = !this.notifyByEmail
+        this.$toast.error(error.message)
+      }
+    },
+  },
 }
 </script>