add mutation createGroup and query GroupList

webapp/components/CategoriesSelect/CategoriesSelect.vue

@@ -46,6 +46,7 @@ export default {
   },
   methods: {
     toggleCategory(id) {
+      console.log('toggleCategory', id)
       this.selectedCategoryIds = xor(this.selectedCategoryIds, [id])
       if (this.$parentForm) {
         this.$parentForm.update(this.model, this.selectedCategoryIds)

webapp/components/GroupForm/GroupForm.vue

@@ -1,30 +1,53 @@
 <template>
   <div>
     <ds-container>
-      <ds-form @submit="submit">
-        <ds-input v-model="form.name" label="Gruppenname" placeholder="Your name ..."></ds-input>
+      <ds-form
+        class="group-form"
+        ref="groupForm"
+        v-model="formData"
+        :schema="formSchema"
+        @submit="submit"
+      >
+        <ds-input
+          v-model="formData.name"
+          label="Gruppenname"
+          placeholder="Your name ..."
+        ></ds-input>
 
         <ds-select
           icon="user"
-          v-model="form.status"
+          v-model="formData.status"
           label="Status"
           :options="['offen', 'geschlossen', 'geheim']"
           placeholder="Status ..."
         ></ds-select>
 
-        <ds-input v-model="form.description" label="Beschreibung" type="textarea" rows="3"></ds-input>
+        <ds-input
+          v-model="formData.description"
+          label="Beschreibung"
+          type="textarea"
+          rows="3"
+        ></ds-input>
 
-        <categories-select 
-          v-model="form.categoryIds"
-          />
-        <div>{{ form.name }}</div>
-        <div>{{ form.status }}</div>
-        <div>{{ form.description }}</div>
-        <div>{{ form.categoryIds }}</div>
+        <categories-select
+          v-if="categoriesActive"
+          model="formData.categoryIds"
+          :existingCategoryIds="formData.categoryIds"
+        />
+
+        <div>{{ formData }}</div>
 
         <ds-space margin-top="large">
           <ds-button @click.prevent="reset()">Reset form</ds-button>
-          <ds-button type="submit" :disabled="disabled" icon="save" primary>Save group</ds-button>
+          <ds-button
+            type="submit"
+            @click.prevent="submit()"
+            icon="save"
+            :disabled="disabled"
+            primary
+          >
+            save
+          </ds-button>
         </ds-space>
       </ds-form>
       <ds-space centered>
@@ -42,29 +65,45 @@ export default {
   components: {
     CategoriesSelect,
   },
-  props:{
-    model: { type: String, required: true },
-    value: { type: String, default: '' },
+  props: {
+    group: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
+    const { name, status, description, categories } = this.group
     return {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
-      form: {
-        name: '',
-        status: '',
-        description: '',
-        disable: false,
-        categoryIds: [],
-      }
-      
+      disabled: false,
+      formData: {
+        name: name || '',
+        status: status || '',
+        description: description || '',
+        categoryIds: categories ? categories.map((category) => category.id) : [],
+      },
+      formSchema: {
+        name: { required: true, min: 3, max: 100 },
+        description: { required: true },
+        status: { required: true },
+        categoryIds: {
+          type: 'array',
+          required: this.categoriesActive,
+          validator: (_, value = []) => {
+            if (this.categoriesActive && (value.length === 0 || value.length > 3)) {
+              return [new Error(this.$t('common.validations.categories'))]
+            }
+            return []
+          },
+        },
+      },
     }
   },
 
   methods: {
     submit() {
-       console.log('submit', this.form)
-      this.$emit('createGroup', this.form)
-     
+      console.log('submit', this.formData)
+      this.$emit('createGroup', this.formData)
     },
     reset() {
       console.log('reset')

webapp/components/GroupList/GroupCard.vue

@@ -1,24 +1,21 @@
 <template>
   <div>
     <ds-container class="group-card">
+      {{ responseGroupListQuery }}
       <ds-space><h2>Group Card</h2></ds-space>
       <ds-grid>
         <ds-grid-item v-for="item in items" :key="item.id" :row-span="8">
-        <ds-placeholder>
-        <base-button
-            v-if="item.owner"
-            icon="trash"
-            @click="deleteGroup(item)"
-          ></base-button>
-          <nuxt-link to="/group/g1/testgruppe"> {{ item.name }}</nuxt-link> 
-          <base-button
-            v-if="!item.owner"
-            icon="close"
-            @click="unfollowGroup(item.row)"
-          ></base-button>
-          <nuxt-link :to="{ name: 'group-create' }">
-            <ds-icon v-show="item.owner" name="ellipsis-v"></ds-icon>
-          </nuxt-link>
+          <ds-placeholder>
+            <base-button v-if="item.owner" icon="trash" @click="deleteGroup(item)"></base-button>
+            <nuxt-link to="/group/g1/testgruppe">{{ item.name }}</nuxt-link>
+            <base-button
+              v-if="!item.owner"
+              icon="close"
+              @click="unfollowGroup(item.row)"
+            ></base-button>
+            <nuxt-link :to="{ name: 'group-create' }">
+              <ds-icon v-show="item.owner" name="ellipsis-v"></ds-icon>
+            </nuxt-link>
           </ds-placeholder>
         </ds-grid-item>
       </ds-grid>
@@ -30,6 +27,7 @@ export default {
   name: 'GroupList',
   props: {
     items: { type: Array, default: () => [] },
+    responseGroupListQuery: { type: Array, default: () => [] },
   },
   methods: {
     deleteGroup() {

webapp/components/GroupList/GroupList.vue

@@ -10,8 +10,8 @@
             @click="deleteGroup(scope.row)"
           ></base-button>
         </template>
-         <template slot="name" slot-scope="scope">
-            <nuxt-link to="/group/g1/testgruppe" > {{ scope.row.name }}</nuxt-link>
+        <template slot="name" slot-scope="scope">
+          <nuxt-link to="/group/g1/testgruppe">{{ scope.row.name }}</nuxt-link>
         </template>
         <template slot="status" slot-scope="scope">
           <ds-tag :color="status">{{ scope.row.status }}</ds-tag>
@@ -26,7 +26,6 @@
           <nuxt-link :to="{ name: 'group-create' }">
             <ds-icon v-show="scope.row.owner" name="ellipsis-v"></ds-icon>
           </nuxt-link>
-         
         </template>
       </ds-table>
     </ds-container>

webapp/components/GroupMember/GroupMember.vue

@@ -1,67 +1,65 @@
 <template>
+  <div>
     <div>
-         <div><ds-space><h3>Link zur Gruppe</h3></ds-space>
-             <ds-space>
-    <ds-copy-field>Copy Link for Invite Member please!</ds-copy-field>
-    </ds-space>
-  </div>
-  <br />
-  <hr />
-  <br />
-  <ds-space><h3>Members</h3></ds-space>
-        <ds-table :data="tableData" :fields="tableFields">
-        <template slot="avatar" >
+      <ds-space><h3>Link zur Gruppe</h3></ds-space>
+      <ds-space>
+        <ds-copy-field>Copy Link for Invite Member please!</ds-copy-field>
+      </ds-space>
+    </div>
+    <br />
+    <hr />
+    <br />
+    <ds-space><h3>Members</h3></ds-space>
+    <ds-table :data="tableData" :fields="tableFields">
+      <template slot="avatar">
         <ds-avatar online size="small" name="Hans Peter"></ds-avatar>
       </template>
       <template slot="loves" slot-scope="scope">
         {{ scope.row.name }} loves {{ scope.row.loves }}
       </template>
       <template slot="edit" slot-scope="scope">
-        <ds-button
-          size="small"
-          @click="deleteRow(scope.row)">delete</ds-button>
+        <ds-button size="small" @click="deleteRow(scope.row)">delete</ds-button>
       </template>
     </ds-table>
-    </div>
+  </div>
 </template>
 <script>
 export default {
-   name: 'GroupMember',
-    data() {
-      return {
-        tableFields: ['avatar', 'name', 'type', 'loves', 'edit'],
-        tableData: [
-          {
-            name: 'Rengar',
-            type: 'Jungler',
-            loves: 'Hide and seek'
-          },
-          {
-            name: 'Renekton',
-            type: 'Toplaner',
-            loves: 'Slice and dice'
-          },
-          {
-            name: 'Twitch',
-            type: 'ADC',
-            loves: 'Spray and pray'
-          },
-          {
-            name: 'Blitz',
-            type: 'Support',
-            loves: 'Hook you up'
-          }
-        ]
+  name: 'GroupMember',
+  data() {
+    return {
+      tableFields: ['avatar', 'name', 'type', 'loves', 'edit'],
+      tableData: [
+        {
+          name: 'Rengar',
+          type: 'Jungler',
+          loves: 'Hide and seek',
+        },
+        {
+          name: 'Renekton',
+          type: 'Toplaner',
+          loves: 'Slice and dice',
+        },
+        {
+          name: 'Twitch',
+          type: 'ADC',
+          loves: 'Spray and pray',
+        },
+        {
+          name: 'Blitz',
+          type: 'Support',
+          loves: 'Hook you up',
+        },
+      ],
+    }
+  },
+  methods: {
+    deleteRow(row) {
+      const index = this.tableData.indexOf(row)
+      if (index > -1) {
+        this.tableData.splice(index, 1)
       }
     },
-    methods: {
-      deleteRow(row) {
-        const index = this.tableData.indexOf(row)
-        if (index > -1) {
-          this.tableData.splice(index, 1)
-        }
-      }
-    }  
-    
+  },
 }
 </script>

webapp/graphql/groups.js

@@ -3,7 +3,7 @@ import gql from 'graphql-tag'
 // ------ mutations
 
 export const createGroupMutation = gql`
-  mutation (
+  mutation(
     $id: ID
     $name: String!
     $slug: String
@@ -35,9 +35,6 @@ export const createGroupMutation = gql`
       groupType
       actionRadius
       myRole
-      # Wolle: owner {
-      #   name
-      # }
     }
   }
 `
@@ -45,7 +42,7 @@ export const createGroupMutation = gql`
 // ------ queries
 
 export const groupQuery = gql`
-  query (
+  query(
     $isMember: Boolean
     $id: ID
     $name: String
@@ -54,9 +51,6 @@ export const groupQuery = gql`
     $updatedAt: String
     $about: String
     $description: String
-    # $groupType: GroupType!,
-    # $actionRadius: GroupActionRadius!,
-    # $categoryIds: [ID]
     $locationName: String
     $first: Int
     $offset: Int
@@ -72,9 +66,6 @@ export const groupQuery = gql`
       updatedAt: $updatedAt
       about: $about
       description: $description
-      # groupType: $groupType
-      # actionRadius: $actionRadius
-      # categoryIds: $categoryIds
       locationName: $locationName
       first: $first
       offset: $offset
@@ -99,9 +90,6 @@ export const groupQuery = gql`
         name
         icon
       }
-      # Wolle: owner {
-      #   name
-      # }
     }
   }
 `

webapp/pages/group/_id.vue

@@ -1,9 +1,10 @@
 <template>
-    <div>_id groupe page 
-        <div>{{$route.params}}</div>
-         <nuxt-link :to="{ name: 'group-create' }">
-         bearbeiten
-            <ds-icon name="ellipsis-v"></ds-icon>
-          </nuxt-link>
-    </div>
-</template>
+  <div>
+    _id groupe page
+    <div>{{ $route.params }}</div>
+    <nuxt-link :to="{ name: 'group-create' }">
+      bearbeiten
+      <ds-icon name="ellipsis-v"></ds-icon>
+    </nuxt-link>
+  </div>
+</template>

webapp/pages/group/_id/_slug.vue

@@ -1,6 +1,6 @@
 <template>
-<div>
+  <div>
     <ds-space />
-    Group Page 
-</div>    
+    Group Page
+  </div>
 </template>

webapp/pages/group/create.vue

@@ -1,24 +1,24 @@
 <template>
   <div>
-  <ds-flex :width="{ base: '100%' }" gutter="base">
-    <ds-flex-item :width="{ base: '100%', md: 5 }">
-      <new-group-form @createGroup="createGroup"/>
-    </ds-flex-item>
-    <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
-  </ds-flex>
-  <hr />
-  <group-member />
-</div>
+    <ds-flex :width="{ base: '100%' }" gutter="base">
+      <ds-flex-item :width="{ base: '100%', md: 5 }">
+        <group-form @createGroup="createGroup" />
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
+    </ds-flex>
+    <hr />
+    <group-member />
+  </div>
 </template>
 
 <script>
-import NewGroupForm from '~/components/GroupForm/GroupForm'
+import GroupForm from '~/components/GroupForm/GroupForm'
 import GroupMember from '~/components/GroupMember/GroupMember.vue'
 import { createGroupMutation } from '~/graphql/groups.js'
 
 export default {
   components: {
-    NewGroupForm,
+    GroupForm,
     GroupMember,
   },
   data() {
@@ -26,24 +26,21 @@ export default {
       createGroupData: {},
     }
   },
-   methods: {
+  methods: {
     async createGroup(form) {
-      console.log('createGroupMutation', form)
       try {
         await this.$apollo.mutate({
-          mutation: createGroupMutation(),
+          mutation: createGroupMutation,
           variables: {
-             id: 0,
-             name: 'Gruppenname',
-             slug: '0',
-             about: 'About',
-             description: 'Description',
-             groupType: 'offen',
-             actionRadius: 'GroupActionRadius',
-             categoryIds: ['1','2','3']
+            name: 'Gruppenname',
+            about: 'About',
+            description:
+              'Description Description Description Description Description Description Description Description Description Description Description Description ',
+            groupType: 'public',
+            actionRadius: 'regional',
+            categoryIds: ['cat15', 'cat5', 'cat1'],
           },
           update: (_, { data: { createGroupData } }) => {
-            console.log(this.createGroupData)
             // const { sendNotificationEmails } = createGroup
             // this.setCreateGroup({
             //   ...this.createGroup,

webapp/pages/my-groups.vue

@@ -5,13 +5,14 @@
     <group-list :items="items" :fields="fields" />
     <br />
     <br />
-    <group-card :items="items" />
+    <group-card :items="items" :responseGroupListQuery="responseGroupListQuery" />
   </div>
 </template>
 <script>
 import GroupTeaser from '~/components/GroupTeaser/GroupTeaser.vue'
 import GroupList from '~/components/GroupList/GroupList.vue'
 import GroupCard from '~/components/GroupList/GroupCard.vue'
+import { groupQuery } from '~/graphql/groups.js'
 
 /*
  *
@@ -28,6 +29,7 @@ export default {
   },
   data() {
     return {
+      responseGroupListQuery: [],
       fields: ['delete', 'name', 'desc', 'status', 'edit'],
       items: [
         {
@@ -62,5 +64,22 @@ export default {
       ],
     }
   },
+  methods: {
+    async groupListQuery() {
+      try {
+        const response = await this.$apollo.query({
+          query: groupQuery,
+        })
+        this.responseGroupListQuery = response.data
+      } catch (error) {
+        this.responseGroupListQuery = []
+      } finally {
+        this.pending = false
+      }
+    },
+  },
+  created() {
+    this.groupListQuery()
+  },
 }
 </script>