update group data funktion

webapp/components/Group/GroupCard.vue

@@ -37,12 +37,5 @@ export default {
       alert('unfollow group')
     },
   },
-  computed: {
-    status(state) {
-      console.log(state)
-      // if (scope === 'hidden') return 'danger'
-      return 'inverse'
-    },
-  },
 }
 </script>

webapp/components/Group/GroupForm.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <ds-container>
+      update: {{update}}
       <ds-form
         class="group-form"
         ref="groupForm"
@@ -16,7 +17,7 @@
 
         <ds-select
           icon="user"
-          v-model="formData.status"
+          v-model="formData.groupType"
           label="Sichtbarkeit"
           :options="['public', 'close', 'hidden']"
           placeholder="Status ..."
@@ -37,7 +38,7 @@
 
         <ds-select
           icon="card"
-          v-model="formData.radius"
+          v-model="formData.actionRadius"
           label="Radius"
           :options="['local', 'regional', 'global']"
           placeholder="Radius ..."
@@ -60,12 +61,12 @@
             :disabled="disabled"
             primary
           >
-            save
+            {{update ? $t('group.update') : $t('group.save')}}
           </ds-button>
         </ds-space>
       </ds-form>
       <ds-space centered>
-        <nuxt-link to="/my-groups">zurück</nuxt-link>
+        <nuxt-link to="/group/my-groups">zurück</nuxt-link>
       </ds-space>
     </ds-container>
   </div>
@@ -80,30 +81,36 @@ export default {
     CategoriesSelect,
   },
   props: {
+    update: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     group: {
       type: Object,
+      required: false,
       default: () => ({}),
     },
   },
   data() {
-    const { name, status, about, description, radius, categories } = this.group
+    const { name, groupType, about, description, actionRadius, categories } = this.groupData
     return {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
       disabled: false,
       formData: {
         name: name || '',
-        status: status || '',
+        groupType: groupType || '',
         about: about || '',
         description: description || '',
-        radius: radius || '',
+        actionRadius: actionRadius || '',
         categoryIds: categories ? categories.map((category) => category.id) : [],
       },
       formSchema: {
         name: { required: true, min: 3, max: 100 },
-        status: { required: true },
+        groupType: { required: true },
         about: { required: true },
         description: { required: true },
-        radius: { required: true },
+        actionRadius: { required: true },
         categoryIds: {
           type: 'array',
           required: this.categoriesActive,
@@ -121,7 +128,7 @@ export default {
   methods: {
     submit() {
       console.log('submit', this.formData)
-      this.$emit('createGroup', this.formData)
+      this.update ? this.$emit('updateGroup', this.formData) : this.$emit('createGroup', this.formData)
     },
     reset() {
       console.log('reset')

webapp/components/Group/GroupList.vue

@@ -2,7 +2,6 @@
   <div>
     <ds-container class="group-list">
       <ds-space><h2>Group List</h2></ds-space>
-      {{items}}
       <ds-table :data="items" :fields="fields">
         <template slot="delete" slot-scope="scope">
           <base-button
@@ -12,22 +11,31 @@
           ></base-button>
         </template>
         <template slot="name" slot-scope="scope">
-          <nuxt-link to="/group/g1/testgruppe">{{ scope.row.name }}</nuxt-link>
+          <nuxt-link :to="`/group/g1/${scope.row.name}`">{{ scope.row.name }}</nuxt-link>
+          <small>{{scope.row}}</small>
         </template>
         <template slot="categories" slot-scope="scope">
-          <ds-tag v-for="categorie in categories" :key="categorie.id" :color="status">{{ categorie.name }}</ds-tag>
+          <ds-tag v-for="categorie in scope.row.categories" :key="categorie.id" color="primary">{{ categorie.name }}</ds-tag>
         </template>
         <template slot="edit" slot-scope="scope">
           <base-button
             v-if="!scope.row.owner"
-            icon="close"
-            @click="unfollowGroup(scope.row)"
+            icon="edit"
+            @click="editGroup(scope.row)"
           ></base-button>
 
           <nuxt-link :to="{ name: 'group-create' }">
             <ds-icon v-show="scope.row.owner" name="ellipsis-v"></ds-icon>
           </nuxt-link>
         </template>
+        <template slot="unfollow" slot-scope="scope">
+          <base-button
+          :disabled="!scope.row.owner ? 'disable' : false"
+            v-if="!scope.row.owner"
+            icon="close"
+            @click="unfollowGroup(scope.row)"
+          ></base-button>
+        </template>
       </ds-table>
     </ds-container>
   </div>
@@ -40,6 +48,10 @@ export default {
     fields: { type: Array, default: () => [] },
   },
   methods: {
+    editGroup(formData) {
+      console.log('GroupListedit group', formData)
+      this.$router.push({ path: `/group/edit/${formData.id}` })
+    },
     deleteGroup() {
       alert('delete group')
     },

webapp/graphql/groups.js

@@ -39,10 +39,57 @@ export const createGroupMutation = gql`
   }
 `
 
+export const updateGroupMutation = gql`
+  mutation (
+    $id: ID!
+    $name: String
+    $slug: String
+    $about: String
+    $description: String
+    $actionRadius: GroupActionRadius
+    $categoryIds: [ID]
+    $avatar: ImageInput
+    $locationName: String
+  ) {
+    UpdateGroup(
+      id: $id
+      name: $name
+      slug: $slug
+      about: $about
+      description: $description
+      actionRadius: $actionRadius
+      categoryIds: $categoryIds
+      avatar: $avatar
+      locationName: $locationName
+    ) {
+      id
+      name
+      slug
+      createdAt
+      updatedAt
+      disabled
+      deleted
+      about
+      description
+      groupType
+      actionRadius
+      categories {
+        id
+        slug
+        name
+        icon
+      }
+      # avatar # test this as result
+      # locationName # test this as result
+      myRole
+    }
+  }
+`
+
 // ------ queries
 
 export const groupQuery = gql`
-  query(
+  query (
     $isMember: Boolean
     $id: ID
     $name: String
@@ -90,6 +137,8 @@ export const groupQuery = gql`
         name
         icon
       }
+      # avatar # test this as result
+      # locationName # test this as result
     }
   }
 `

webapp/locales/de.json

@@ -370,7 +370,11 @@
     "following": "Folge Ich"
   },
   "group": {
-    "newGroup": "Erstelle eine neue Gruppe"
+    "newGroup": "Erstelle eine neue Gruppe",
+    "group-created": "Die Gruppe wurde angelegt.",
+    "group-updated": "Die Gruppendaten wurden geändert.",
+    "save":"neue Gruppe anlegen",
+    "update":"Änderung speichern"
   },
   "hashtags-filter": {
     "clearSearch": "Suche löschen",
@@ -720,9 +724,7 @@
         }
       }
     },
-    "groups": {
-      "name": "Meine Gruppen"
-    },
+    "myGroups": "Meine Gruppen",
     "invites": {
       "name": "Einladungen"
     },

webapp/locales/en.json

@@ -370,7 +370,11 @@
     "following": "Following"
   },
   "group": {
-    "newGroup": "Create a new Group"
+    "newGroup": "Create a new Group",
+    "group-created": "The group was created.",
+    "group-updated": "The group data has been changed.",
+    "save":"Create new group",
+    "update":"Save change"
   },
   "hashtags-filter": {
     "clearSearch": "Clear search",
@@ -720,9 +724,7 @@
         }
       }
     },
-    "groups": {
-      "name": "My Groups"
-    },
+    "myGroups": "My Groups",
     "invites": {
       "name": "Invites"
     },

webapp/pages/group/create.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <h2>Create Groupe</h2>
     <ds-flex :width="{ base: '100%' }" gutter="base">
       <ds-flex-item :width="{ base: '100%', md: 5 }">
         <group-form @createGroup="createGroup" />
@@ -12,8 +13,8 @@
 </template>
 
 <script>
-import GroupForm from '~/components/GroupForm/GroupForm'
-import GroupMember from '~/components/GroupMember/GroupMember.vue'
+import GroupForm from '~/components/Group/GroupForm'
+import GroupMember from '~/components/Group/GroupMember'
 import { createGroupMutation } from '~/graphql/groups.js'
 
 export default {
@@ -28,9 +29,6 @@ export default {
   },
   methods: {
     async createGroup(form) {
-      console.log("createGroup", form)
-      console.log("createGroup form.categoryIds", form.categoryIds)
-      console.log("createGroup form.radius", form.radius)
       try {
         await this.$apollo.mutate({
           mutation: createGroupMutation,
@@ -38,8 +36,8 @@ export default {
             name: form.name,
             about: form.about,
             description: form.description,
-            groupType: form.status,
-            actionRadius: form.radius,
+            groupType: form.groupType,
+            actionRadius: form.actionRadius,
             categoryIds: form.formData.categoryIds,
           },
           update: (_, { data: { createGroupData } }) => {
@@ -48,7 +46,7 @@ export default {
             //   ...this.createGroup,
             //   sendNotificationEmails,
             // })
-            this.$toast.success(this.$t('settings.notifications.success-update'))
+            this.$toast.success(this.$t('group.group-created'))
           },
         })
       } catch (error) {

webapp/pages/group/edit/_id.vue

@@ -0,0 +1,112 @@
+<template>
+  <ds-flex gutter="small">
+      {{$router}}
+      <ds-flex-item :width="{ base: '100%', md: '200px' }">
+        <ds-menu :routes="routes" :is-exact="() => true" />
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '100%', md: 1 }">
+        {{group}}
+        <transition name="slide-up" appear>
+            <group-form @updateGroup="updateGroup" :group="group" :update="true"/>
+        </transition>
+      </ds-flex-item>
+    </ds-flex>
+</template>
+
+<script>
+import GroupForm from '~/components/Group/GroupForm'
+import { groupQuery, updateGroupMutation } from '~/graphql/groups.js'
+import { mapGetters } from 'vuex'
+
+export default {
+  components: {
+    GroupForm,
+  },
+  computed: {
+    routes() {
+      return [
+        {
+          name: 'default',
+          path: ``,
+        },
+        {
+          name: 'members',
+          path: ``,
+        },
+        {
+          name: 'social media',
+          path: ``,
+        },
+        {
+          name: 'invite link',
+          path: ``,
+        },
+      ]},
+    ...mapGetters({
+      user: 'auth/user',
+    }),
+    
+  },
+  data() {
+      return {
+          groupData: {},
+      }
+  },
+  async asyncData(context) {
+    console.log('asyncData start')
+    const {
+      app,
+      error,
+      params: { id },
+    } = context
+    const client = app.apolloProvider.defaultClient
+    const {
+      data: {
+        Group: [group],
+      },
+    } = await client.query({
+      query: groupQuery,
+      variables: { id },
+    })
+    console.log('asyncData group', group)
+    console.log('asyncData id', id)
+    if (group.myRole !== 'owner') {
+      error({ statusCode: 403, message: 'NONONNNO' })
+    }
+    return { group } 
+  },
+  methods: {
+  async updateGroup(form, context) {
+    const {
+      params: { id },
+    } = context
+      try {
+        await this.$apollo.mutate({
+          mutation: updateGroupMutation,
+          variables: {
+            id: params,
+            name: form.name,
+            about: form.about,
+            description: form.description,
+            // groupType: form.groupType,
+            actionRadius: form.actionRadius,
+            categoryIds: form.categoryIds,
+            // locationName: ''
+          },
+          update: (_, { data: { updateGroupData } }) => {
+            // const { sendNotificationEmails } = createGroup
+            // this.setCreateGroup({
+            //   ...this.createGroup,
+            //   sendNotificationEmails,
+            // })
+            this.$toast.success(this.$t('group.group-updated'))
+          },
+        })
+      } catch (error) {
+        // this.notifyByEmail = !this.notifyByEmail
+        this.$toast.error(error.message)
+      }
+    },
+},
+}
+</script>

webapp/pages/group/my-groups.vue

@@ -9,9 +9,9 @@
   </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 GroupTeaser from '~/components/Group/GroupTeaser.vue'
+import GroupList from '~/components/Group/GroupList.vue'
+import GroupCard from '~/components/Group/GroupCard.vue'
 import { groupQuery } from '~/graphql/groups.js'
 
 /*
@@ -30,7 +30,7 @@ export default {
   data() {
     return {
       responseGroupListQuery: [],
-      fields: ['delete', 'name', 'about', 'categories', 'edit'],
+      fields: ['delete', 'name', 'about', 'categories', 'edit', 'unfollow'],
     }
   },
   methods: {

webapp/pages/settings.vue

@@ -40,8 +40,8 @@ export default {
           path: `/settings/my-social-media`,
         },
         {
-          name: this.$t('settings.groups.name'),
-          path: `/my-groups`,
+          name: this.$t('settings.myGroups'),
+          path: `/group/my-groups`,
         },
         {
           name: this.$t('settings.muted-users.name'),