From e5a969b3f79677c1b40414607906a2265adbe85f Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 8 Sep 2022 17:05:16 +0200
Subject: [PATCH] group settings add sidemenu

---
 .../CategoriesSelect/CategoriesSelect.vue     |  1 -
 .../CommentCard/CommentCard.story.js          |  3 +-
 webapp/components/DeleteData/DeleteData.vue   |  2 +-
 webapp/components/Editor/Editor.story.js      |  3 +-
 webapp/components/Editor/nodes/Embed.spec.js  |  3 +-
 .../components/Embed/EmbedComponent.spec.js   |  3 +-
 webapp/components/Emotions/Emotions.vue       |  2 +-
 webapp/components/Group/GroupCard.vue         | 61 +++++++++----
 webapp/components/Group/GroupForm.vue         | 27 ++++--
 webapp/components/Group/GroupLink.vue         | 15 ++++
 webapp/components/Group/GroupList.vue         | 72 ----------------
 webapp/components/Group/GroupMember.vue       |  9 --
 .../components/LocaleSwitch/LocaleSwitch.vue  |  2 +-
 webapp/components/Modal/DeleteUserModal.vue   |  2 +-
 webapp/components/Modal/DisableModal.vue      |  2 +-
 webapp/components/Password/Change.vue         |  2 +-
 .../PasswordReset/ChangePassword.vue          |  2 +-
 webapp/components/PasswordReset/Request.vue   |  2 +-
 .../components/PostTeaser/PostTeaser.story.js |  3 +-
 .../Registration/RegistrationSlideEmail.vue   |  7 +-
 .../Registration/RegistrationSlideInvite.vue  |  2 +-
 .../Registration/RegistrationSlideNonce.vue   |  2 +-
 webapp/components/Registration/Signup.vue     |  2 +-
 .../components/ReleaseModal/ReleaseModal.vue  |  2 +-
 .../SearchableInput/SearchableInput.story.js  | 12 ++-
 webapp/graphql/CommentMutations.js            |  4 +-
 webapp/graphql/Donations.js                   |  2 +-
 webapp/graphql/EmailAddress.js                |  4 +-
 webapp/graphql/EmbedQuery.js                  |  2 +-
 webapp/graphql/Moderation.js                  |  6 +-
 webapp/graphql/PostMutations.js               | 16 ++--
 webapp/graphql/Registration.js                |  2 +-
 webapp/graphql/Search.js                      |  8 +-
 webapp/graphql/User.js                        | 14 +--
 webapp/graphql/admin/Roles.js                 |  2 +-
 webapp/graphql/groups.js                      | 12 +--
 webapp/graphql/location.js                    |  2 +-
 webapp/graphql/settings/BlockedUsers.js       |  4 +-
 webapp/graphql/settings/MutedUsers.js         |  4 +-
 webapp/pages/admin/users.vue                  |  2 +-
 webapp/pages/group/_id.vue                    |  4 +-
 webapp/pages/group/create.vue                 | 11 +--
 webapp/pages/group/edit/_id.vue               | 86 +++++++++++--------
 webapp/pages/group/my-groups.vue              | 11 ---
 webapp/pages/post/_id.vue                     |  4 +-
 webapp/pages/profile/_id.vue                  |  4 +-
 webapp/pages/settings/my-social-media.vue     |  6 +-
 47 files changed, 213 insertions(+), 240 deletions(-)
 create mode 100644 webapp/components/Group/GroupLink.vue
 delete mode 100644 webapp/components/Group/GroupList.vue

diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index 1fb95a8db..b7d71de2d 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@@ -46,7 +46,6 @@ 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)
diff --git a/webapp/components/CommentCard/CommentCard.story.js b/webapp/components/CommentCard/CommentCard.story.js
index 75078657e..467a125d5 100644
--- a/webapp/components/CommentCard/CommentCard.story.js
+++ b/webapp/components/CommentCard/CommentCard.story.js
@@ -18,7 +18,8 @@ const comment = {
   author: {
     id: '1',
     avatar: {
-      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url:
+        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     slug: 'jenny-rostock',
     name: 'Rainer Unsinn',
diff --git a/webapp/components/DeleteData/DeleteData.vue b/webapp/components/DeleteData/DeleteData.vue
index a0cdcf29b..21b842fe6 100644
--- a/webapp/components/DeleteData/DeleteData.vue
+++ b/webapp/components/DeleteData/DeleteData.vue
@@ -103,7 +103,7 @@ export default {
       this.$apollo
         .mutate({
           mutation: gql`
-            mutation ($id: ID!, $resource: [Deletable]) {
+            mutation($id: ID!, $resource: [Deletable]) {
               DeleteUser(id: $id, resource: $resource) {
                 id
               }
diff --git a/webapp/components/Editor/Editor.story.js b/webapp/components/Editor/Editor.story.js
index 6e38eab7f..dfcc3cdf4 100644
--- a/webapp/components/Editor/Editor.story.js
+++ b/webapp/components/Editor/Editor.story.js
@@ -9,7 +9,8 @@ const embed = {
   title: 'Video Titel',
   // html: null,
   description: 'Video Description',
-  html: '<iframe width="auto" height="250" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
+  html:
+    '<iframe width="auto" height="250" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
 }
 
 const plugins = [
diff --git a/webapp/components/Editor/nodes/Embed.spec.js b/webapp/components/Editor/nodes/Embed.spec.js
index 372b189f9..e87ee1570 100644
--- a/webapp/components/Editor/nodes/Embed.spec.js
+++ b/webapp/components/Editor/nodes/Embed.spec.js
@@ -33,7 +33,8 @@ describe('Embed.vue', () => {
             video: null,
             lang: 'de',
             sources: ['resource', 'oembed'],
-            html: '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
+            html:
+              '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
           }),
         }
       })
diff --git a/webapp/components/Embed/EmbedComponent.spec.js b/webapp/components/Embed/EmbedComponent.spec.js
index cd3526368..fd7452c01 100644
--- a/webapp/components/Embed/EmbedComponent.spec.js
+++ b/webapp/components/Embed/EmbedComponent.spec.js
@@ -114,7 +114,8 @@ describe('EmbedComponent.vue', () => {
             video: null,
             lang: 'de',
             sources: ['resource', 'oembed'],
-            html: '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>',
+            html:
+              '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>',
           }
           wrapper = Wrapper()
         })
diff --git a/webapp/components/Emotions/Emotions.vue b/webapp/components/Emotions/Emotions.vue
index b4dc14a61..e75c8848d 100644
--- a/webapp/components/Emotions/Emotions.vue
+++ b/webapp/components/Emotions/Emotions.vue
@@ -83,7 +83,7 @@ export default {
       this.$apollo
         .query({
           query: gql`
-            query ($postId: ID!, $data: _EMOTEDInput!) {
+            query($postId: ID!, $data: _EMOTEDInput!) {
               PostsEmotionsCountByEmotion(postId: $postId, data: $data)
             }
           `,
diff --git a/webapp/components/Group/GroupCard.vue b/webapp/components/Group/GroupCard.vue
index b3463fa21..f5a4970fa 100644
--- a/webapp/components/Group/GroupCard.vue
+++ b/webapp/components/Group/GroupCard.vue
@@ -1,24 +1,39 @@
 <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>
-        </ds-grid-item>
-      </ds-grid>
+      <ds-page-title heading="Groups"></ds-page-title>
+      <ds-card v-for="item in items" :key="item.id" space="xx-small">
+        <nuxt-link to="/group/g1/testgruppe">{{ item.name }}</nuxt-link>
+        {{ item.categories ? item.categories.map((category) => category.name) : [] }}
+        <div>{{ item }}</div>
+        <ds-space>
+          <base-button
+            v-if="item.myRole === 'owner'"
+            icon="trash"
+            @click="deleteGroup(item)"
+          ></base-button>
+          <base-button
+            v-if="item.myRole === 'pending'"
+            icon="question-circle"
+            @click="removePending(item)"
+          ></base-button>
+          <base-button
+            v-if="item.myRole === 'owner'"
+            icon="edit"
+            @click="editGroup(item)"
+          ></base-button>
+          <base-button
+            v-if="item.myRole === 'usual'"
+            icon="close"
+            @click="unfollowGroup(item)"
+          ></base-button>
+          <base-button
+            v-if="item.myRole === null"
+            icon="plus"
+            @click="addMemeberToGroup(item)"
+          ></base-button>
+        </ds-space>
+      </ds-card>
     </ds-container>
   </div>
 </template>
@@ -27,15 +42,23 @@ export default {
   name: 'GroupList',
   props: {
     items: { type: Array, default: () => [] },
-    responseGroupListQuery: { type: Array, default: () => [] },
   },
   methods: {
+    removePending() {
+      alert('removePending group')
+    },
+    editGroup(item) {
+      this.$router.push({ path: `/group/edit/${item.id}` })
+    },
     deleteGroup() {
       alert('delete group')
     },
     unfollowGroup() {
       alert('unfollow group')
     },
+    addMemeberToGroup() {
+      alert('addMemeberToGroup group')
+    },
   },
 }
 </script>
diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index c5d997920..1b2d2037f 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -1,9 +1,6 @@
 <template>
   <div>
     <ds-container>
-      update: {{ update }}
-    <br />
-      this group: {{this.group}}
       <ds-form
         class="group-form"
         ref="groupForm"
@@ -91,7 +88,6 @@ export default {
     },
   },
   data() {
-    console.log('GroupForm group', this.group)
     const { name, groupType, about, description, actionRadius, categories } = this.group
     return {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
@@ -126,14 +122,27 @@ export default {
 
   methods: {
     submit() {
-      console.log('submit', this.formData) 
-      const { name, about, description, actionRadius, categoryIds } = this.formData
+      const { name, about, description, groupType, actionRadius, categoryIds } = this.formData
       this.update
-        ? this.$emit('updateGroup', { name, about, description, actionRadius, categoryIds, id: this.group.id })
-        : this.$emit('createGroup', this.formData)
+        ? this.$emit('updateGroup', {
+            name,
+            about,
+            description,
+            actionRadius,
+            categoryIds,
+            id: this.group.id,
+          })
+        : this.$emit('createGroup', {
+            name,
+            about,
+            description,
+            groupType,
+            actionRadius,
+            categoryIds,
+          })
     },
     reset() {
-      console.log('reset')
+      alert('reset')
     },
   },
 }
diff --git a/webapp/components/Group/GroupLink.vue b/webapp/components/Group/GroupLink.vue
new file mode 100644
index 000000000..4fcc7983d
--- /dev/null
+++ b/webapp/components/Group/GroupLink.vue
@@ -0,0 +1,15 @@
+<template>
+  <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>
+  </div>
+</template>
+<script>
+export default {
+  name: 'GroupLink',
+}
+</script>
diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
deleted file mode 100644
index 37b365b86..000000000
--- a/webapp/components/Group/GroupList.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <div>
-    <ds-container class="group-list">
-      <ds-space><h2>Group List</h2></ds-space>
-      <ds-table :data="items" :fields="fields">
-        <template slot="delete" slot-scope="scope">
-          <base-button
-            v-if="scope.row.myRole === 'owner'"
-            icon="trash"
-            @click="deleteGroup(scope.row)"
-          ></base-button>
-        </template>
-        <template slot="name" slot-scope="scope">
-          <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 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.myRole === 'owner'"
-            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
-            v-if="scope.row.myRole === 'usual'"
-            icon="close"
-            @click="unfollowGroup(scope.row)"
-          ></base-button>
-          <base-button
-            v-if="scope.row.myRole === null"
-            icon="plus"
-            @click="addMemeberToGroup(scope.row)"
-          ></base-button>
-        </template>
-      </ds-table>
-    </ds-container>
-  </div>
-</template>
-<script lang="ts">
-export default {
-  name: 'GroupList',
-  props: {
-    items: { type: Array, default: () => [] },
-    fields: { type: Array, default: () => [] },
-  },
-  methods: {
-    editGroup(formData) {
-      this.$router.push({ path: `/group/edit/${formData.id}` })
-    },
-    deleteGroup() {
-      alert('delete group')
-    },
-    unfollowGroup() {
-      alert('unfollow group')
-    },
-    addMemeberToGroup() {
-      alert('addMemeberToGroup group')
-    },
-  },
-  computed: {},
-}
-</script>
diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index 16f4ebecf..64edae6a3 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -1,14 +1,5 @@
 <template>
   <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">
diff --git a/webapp/components/LocaleSwitch/LocaleSwitch.vue b/webapp/components/LocaleSwitch/LocaleSwitch.vue
index 353fc406a..47e53028b 100644
--- a/webapp/components/LocaleSwitch/LocaleSwitch.vue
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.vue
@@ -82,7 +82,7 @@ export default {
       try {
         await this.$apollo.mutate({
           mutation: gql`
-            mutation ($id: ID!, $locale: String) {
+            mutation($id: ID!, $locale: String) {
               UpdateUser(id: $id, locale: $locale) {
                 id
                 locale
diff --git a/webapp/components/Modal/DeleteUserModal.vue b/webapp/components/Modal/DeleteUserModal.vue
index 8618582ee..87aa557d8 100644
--- a/webapp/components/Modal/DeleteUserModal.vue
+++ b/webapp/components/Modal/DeleteUserModal.vue
@@ -127,7 +127,7 @@ export default {
       this.$apollo
         .mutate({
           mutation: gql`
-            mutation ($id: ID!, $resource: [Deletable]) {
+            mutation($id: ID!, $resource: [Deletable]) {
               DeleteUser(id: $id, resource: $resource) {
                 id
               }
diff --git a/webapp/components/Modal/DisableModal.vue b/webapp/components/Modal/DisableModal.vue
index d28033ff8..19ef64332 100644
--- a/webapp/components/Modal/DisableModal.vue
+++ b/webapp/components/Modal/DisableModal.vue
@@ -53,7 +53,7 @@ export default {
         // await this.modalData.buttons.confirm.callback()
         await this.$apollo.mutate({
           mutation: gql`
-            mutation ($resourceId: ID!, $disable: Boolean, $closed: Boolean) {
+            mutation($resourceId: ID!, $disable: Boolean, $closed: Boolean) {
               review(resourceId: $resourceId, disable: $disable, closed: $closed) {
                 disable
               }
diff --git a/webapp/components/Password/Change.vue b/webapp/components/Password/Change.vue
index 94b69a8f6..cd955973f 100644
--- a/webapp/components/Password/Change.vue
+++ b/webapp/components/Password/Change.vue
@@ -65,7 +65,7 @@ export default {
     async handleSubmit(data) {
       this.loading = true
       const mutation = gql`
-        mutation ($oldPassword: String!, $password: String!) {
+        mutation($oldPassword: String!, $password: String!) {
           changePassword(oldPassword: $oldPassword, newPassword: $password)
         }
       `
diff --git a/webapp/components/PasswordReset/ChangePassword.vue b/webapp/components/PasswordReset/ChangePassword.vue
index c53afcc01..e65a7a04f 100644
--- a/webapp/components/PasswordReset/ChangePassword.vue
+++ b/webapp/components/PasswordReset/ChangePassword.vue
@@ -93,7 +93,7 @@ export default {
   methods: {
     async handleSubmitPassword() {
       const mutation = gql`
-        mutation ($nonce: String!, $email: String!, $password: String!) {
+        mutation($nonce: String!, $email: String!, $password: String!) {
           resetPassword(nonce: $nonce, email: $email, newPassword: $password)
         }
       `
diff --git a/webapp/components/PasswordReset/Request.vue b/webapp/components/PasswordReset/Request.vue
index 5398c13ed..5f4baf357 100644
--- a/webapp/components/PasswordReset/Request.vue
+++ b/webapp/components/PasswordReset/Request.vue
@@ -85,7 +85,7 @@ export default {
     },
     async handleSubmit() {
       const mutation = gql`
-        mutation ($email: String!) {
+        mutation($email: String!) {
           requestPasswordReset(email: $email)
         }
       `
diff --git a/webapp/components/PostTeaser/PostTeaser.story.js b/webapp/components/PostTeaser/PostTeaser.story.js
index e77e85585..c82396101 100644
--- a/webapp/components/PostTeaser/PostTeaser.story.js
+++ b/webapp/components/PostTeaser/PostTeaser.story.js
@@ -17,7 +17,8 @@ export const post = {
   author: {
     id: 'u3',
     avatar: {
-      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url:
+        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     slug: 'jenny-rostock',
     name: 'Rainer Unsinn',
diff --git a/webapp/components/Registration/RegistrationSlideEmail.vue b/webapp/components/Registration/RegistrationSlideEmail.vue
index 6ba443996..045269f00 100644
--- a/webapp/components/Registration/RegistrationSlideEmail.vue
+++ b/webapp/components/Registration/RegistrationSlideEmail.vue
@@ -35,7 +35,7 @@ import normalizeEmail from '~/components/utils/NormalizeEmail'
 import translateErrorMessage from '~/components/utils/TranslateErrorMessage'
 
 export const SignupMutation = gql`
-  mutation ($email: String!, $inviteCode: String) {
+  mutation($email: String!, $inviteCode: String) {
     Signup(email: $email, inviteCode: $inviteCode) {
       email
     }
@@ -165,8 +165,9 @@ export default {
             })
             this.setButtonValues()
 
-            const { email: responseEmail } =
-              this.sliderData.sliders[this.sliderIndex].data.response.Signup
+            const { email: responseEmail } = this.sliderData.sliders[
+              this.sliderIndex
+            ].data.response.Signup
             this.$toast.success(
               this.$t('components.registration.email.form.success', { email: responseEmail }),
             )
diff --git a/webapp/components/Registration/RegistrationSlideInvite.vue b/webapp/components/Registration/RegistrationSlideInvite.vue
index 48c62d412..f9ce15ee9 100644
--- a/webapp/components/Registration/RegistrationSlideInvite.vue
+++ b/webapp/components/Registration/RegistrationSlideInvite.vue
@@ -25,7 +25,7 @@ import gql from 'graphql-tag'
 import CONSTANTS_REGISTRATION from './../../constants/registration'
 
 export const isValidInviteCodeQuery = gql`
-  query ($code: ID!) {
+  query($code: ID!) {
     isValidInviteCode(code: $code)
   }
 `
diff --git a/webapp/components/Registration/RegistrationSlideNonce.vue b/webapp/components/Registration/RegistrationSlideNonce.vue
index b9de7afd1..147e84336 100644
--- a/webapp/components/Registration/RegistrationSlideNonce.vue
+++ b/webapp/components/Registration/RegistrationSlideNonce.vue
@@ -30,7 +30,7 @@ import CONSTANTS_REGISTRATION from './../../constants/registration'
 import EmailDisplayAndVerify from './EmailDisplayAndVerify'
 
 export const verifyNonceQuery = gql`
-  query ($email: String!, $nonce: String!) {
+  query($email: String!, $nonce: String!) {
     VerifyNonce(email: $email, nonce: $nonce)
   }
 `
diff --git a/webapp/components/Registration/Signup.vue b/webapp/components/Registration/Signup.vue
index 91b9ecd61..86142c338 100644
--- a/webapp/components/Registration/Signup.vue
+++ b/webapp/components/Registration/Signup.vue
@@ -70,7 +70,7 @@ import { SweetalertIcon } from 'vue-sweetalert-icons'
 import translateErrorMessage from '~/components/utils/TranslateErrorMessage'
 
 export const SignupMutation = gql`
-  mutation ($email: String!, $inviteCode: String) {
+  mutation($email: String!, $inviteCode: String) {
     Signup(email: $email, inviteCode: $inviteCode) {
       email
     }
diff --git a/webapp/components/ReleaseModal/ReleaseModal.vue b/webapp/components/ReleaseModal/ReleaseModal.vue
index fceb4b7a1..fef0d79d0 100644
--- a/webapp/components/ReleaseModal/ReleaseModal.vue
+++ b/webapp/components/ReleaseModal/ReleaseModal.vue
@@ -52,7 +52,7 @@ export default {
         // await this.modalData.buttons.confirm.callback()
         await this.$apollo.mutate({
           mutation: gql`
-            mutation ($resourceId: ID!, $disable: Boolean, $closed: Boolean) {
+            mutation($resourceId: ID!, $disable: Boolean, $closed: Boolean) {
               review(resourceId: $resourceId, disable: $disable, closed: $closed) {
                 disable
               }
diff --git a/webapp/components/generic/SearchableInput/SearchableInput.story.js b/webapp/components/generic/SearchableInput/SearchableInput.story.js
index f483129eb..62e422a67 100644
--- a/webapp/components/generic/SearchableInput/SearchableInput.story.js
+++ b/webapp/components/generic/SearchableInput/SearchableInput.story.js
@@ -78,7 +78,8 @@ export const searchResults = [
     id: 'u1',
     __typename: 'User',
     avatar: {
-      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url:
+        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     name: 'Peter Lustig',
     slug: 'peter-lustig',
@@ -87,7 +88,8 @@ export const searchResults = [
     id: 'cdbca762-0632-4564-b646-415a0c42d8b8',
     __typename: 'User',
     avatar: {
-      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url:
+        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     name: 'Herbert Schultz',
     slug: 'herbert-schultz',
@@ -96,7 +98,8 @@ export const searchResults = [
     id: 'u2',
     __typename: 'User',
     avatar: {
-      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url:
+        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     name: 'Bob der Baumeister',
     slug: 'bob-der-baumeister',
@@ -105,7 +108,8 @@ export const searchResults = [
     id: '7b654f72-f4da-4315-8bed-39de0859754b',
     __typename: 'User',
     avatar: {
-      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url:
+        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     name: 'Tonya Mohr',
     slug: 'tonya-mohr',
diff --git a/webapp/graphql/CommentMutations.js b/webapp/graphql/CommentMutations.js
index 191edf217..a73ebb00c 100644
--- a/webapp/graphql/CommentMutations.js
+++ b/webapp/graphql/CommentMutations.js
@@ -4,7 +4,7 @@ export default (i18n) => {
   const lang = i18n.locale().toUpperCase()
   return {
     CreateComment: gql`
-      mutation ($postId: ID!, $content: String!) {
+      mutation($postId: ID!, $content: String!) {
         CreateComment(postId: $postId, content: $content) {
           id
           contentExcerpt
@@ -36,7 +36,7 @@ export default (i18n) => {
       }
     `,
     UpdateComment: gql`
-      mutation ($content: String!, $id: ID!) {
+      mutation($content: String!, $id: ID!) {
         UpdateComment(content: $content, id: $id) {
           id
           contentExcerpt
diff --git a/webapp/graphql/Donations.js b/webapp/graphql/Donations.js
index 573158cbf..e412ee4fa 100644
--- a/webapp/graphql/Donations.js
+++ b/webapp/graphql/Donations.js
@@ -13,7 +13,7 @@ export const DonationsQuery = () => gql`
 
 export const UpdateDonations = () => {
   return gql`
-    mutation ($showDonations: Boolean, $goal: Int, $progress: Int) {
+    mutation($showDonations: Boolean, $goal: Int, $progress: Int) {
       UpdateDonations(showDonations: $showDonations, goal: $goal, progress: $progress) {
         id
         showDonations
diff --git a/webapp/graphql/EmailAddress.js b/webapp/graphql/EmailAddress.js
index b3b4df695..675ec6bed 100644
--- a/webapp/graphql/EmailAddress.js
+++ b/webapp/graphql/EmailAddress.js
@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
 
 export const AddEmailAddressMutation = gql`
-  mutation ($email: String!) {
+  mutation($email: String!) {
     AddEmailAddress(email: $email) {
       email
       createdAt
@@ -10,7 +10,7 @@ export const AddEmailAddressMutation = gql`
 `
 
 export const VerifyEmailAddressMutation = gql`
-  mutation ($email: String!, $nonce: String!) {
+  mutation($email: String!, $nonce: String!) {
     VerifyEmailAddress(email: $email, nonce: $nonce) {
       email
       verifiedAt
diff --git a/webapp/graphql/EmbedQuery.js b/webapp/graphql/EmbedQuery.js
index 70450722d..685095d34 100644
--- a/webapp/graphql/EmbedQuery.js
+++ b/webapp/graphql/EmbedQuery.js
@@ -2,7 +2,7 @@ import gql from 'graphql-tag'
 
 export default function () {
   return gql`
-    query ($url: String!) {
+    query($url: String!) {
       embed(url: $url) {
         type
         title
diff --git a/webapp/graphql/Moderation.js b/webapp/graphql/Moderation.js
index 8dc20f987..f4796d080 100644
--- a/webapp/graphql/Moderation.js
+++ b/webapp/graphql/Moderation.js
@@ -3,7 +3,7 @@ import gql from 'graphql-tag'
 export const reportsListQuery = () => {
   // no limit for the moment like before: "reports(first: 20, orderBy: createdAt_desc)"
   return gql`
-    query (
+    query(
       $orderBy: ReportOrdering
       $first: Int
       $offset: Int
@@ -94,7 +94,7 @@ export const reportsListQuery = () => {
 
 export const reportMutation = () => {
   return gql`
-    mutation ($resourceId: ID!, $reasonCategory: ReasonCategory!, $reasonDescription: String!) {
+    mutation($resourceId: ID!, $reasonCategory: ReasonCategory!, $reasonDescription: String!) {
       fileReport(
         resourceId: $resourceId
         reasonCategory: $reasonCategory
@@ -108,7 +108,7 @@ export const reportMutation = () => {
 
 export const reviewMutation = () => {
   return gql`
-    mutation ($resourceId: ID!, $disable: Boolean, $closed: Boolean) {
+    mutation($resourceId: ID!, $disable: Boolean, $closed: Boolean) {
       review(resourceId: $resourceId, disable: $disable, closed: $closed) {
         disable
       }
diff --git a/webapp/graphql/PostMutations.js b/webapp/graphql/PostMutations.js
index ee61efc3b..af91d245e 100644
--- a/webapp/graphql/PostMutations.js
+++ b/webapp/graphql/PostMutations.js
@@ -3,7 +3,7 @@ import gql from 'graphql-tag'
 export default () => {
   return {
     CreatePost: gql`
-      mutation ($title: String!, $content: String!, $categoryIds: [ID], $image: ImageInput) {
+      mutation($title: String!, $content: String!, $categoryIds: [ID], $image: ImageInput) {
         CreatePost(title: $title, content: $content, categoryIds: $categoryIds, image: $image) {
           title
           slug
@@ -18,7 +18,7 @@ export default () => {
       }
     `,
     UpdatePost: gql`
-      mutation (
+      mutation(
         $id: ID!
         $title: String!
         $content: String!
@@ -52,14 +52,14 @@ export default () => {
       }
     `,
     DeletePost: gql`
-      mutation ($id: ID!) {
+      mutation($id: ID!) {
         DeletePost(id: $id) {
           id
         }
       }
     `,
     AddPostEmotionsMutation: gql`
-      mutation ($to: _PostInput!, $data: _EMOTEDInput!) {
+      mutation($to: _PostInput!, $data: _EMOTEDInput!) {
         AddPostEmotions(to: $to, data: $data) {
           emotion
           from {
@@ -72,7 +72,7 @@ export default () => {
       }
     `,
     RemovePostEmotionsMutation: gql`
-      mutation ($to: _PostInput!, $data: _EMOTEDInput!) {
+      mutation($to: _PostInput!, $data: _EMOTEDInput!) {
         RemovePostEmotions(to: $to, data: $data) {
           emotion
           from {
@@ -85,7 +85,7 @@ export default () => {
       }
     `,
     pinPost: gql`
-      mutation ($id: ID!) {
+      mutation($id: ID!) {
         pinPost(id: $id) {
           id
           title
@@ -102,7 +102,7 @@ export default () => {
       }
     `,
     unpinPost: gql`
-      mutation ($id: ID!) {
+      mutation($id: ID!) {
         unpinPost(id: $id) {
           id
           title
@@ -119,7 +119,7 @@ export default () => {
       }
     `,
     markTeaserAsViewed: gql`
-      mutation ($id: ID!) {
+      mutation($id: ID!) {
         markTeaserAsViewed(id: $id) {
           id
         }
diff --git a/webapp/graphql/Registration.js b/webapp/graphql/Registration.js
index b6cc610d9..fcf9c52a7 100644
--- a/webapp/graphql/Registration.js
+++ b/webapp/graphql/Registration.js
@@ -1,6 +1,6 @@
 import gql from 'graphql-tag'
 export const SignupVerificationMutation = gql`
-  mutation (
+  mutation(
     $nonce: String!
     $name: String!
     $email: String!
diff --git a/webapp/graphql/Search.js b/webapp/graphql/Search.js
index 56f5d7c4c..96e507b2d 100644
--- a/webapp/graphql/Search.js
+++ b/webapp/graphql/Search.js
@@ -5,7 +5,7 @@ export const searchQuery = gql`
   ${userFragment}
   ${postFragment}
 
-  query ($query: String!) {
+  query($query: String!) {
     searchResults(query: $query, limit: 5) {
       __typename
       ... on Post {
@@ -33,7 +33,7 @@ export const searchPosts = gql`
   ${postFragment}
   ${tagsCategoriesAndPinnedFragment}
 
-  query ($query: String!, $firstPosts: Int, $postsOffset: Int) {
+  query($query: String!, $firstPosts: Int, $postsOffset: Int) {
     searchPosts(query: $query, firstPosts: $firstPosts, postsOffset: $postsOffset) {
       postCount
       posts {
@@ -55,7 +55,7 @@ export const searchPosts = gql`
 export const searchUsers = gql`
   ${userFragment}
 
-  query ($query: String!, $firstUsers: Int, $usersOffset: Int) {
+  query($query: String!, $firstUsers: Int, $usersOffset: Int) {
     searchUsers(query: $query, firstUsers: $firstUsers, usersOffset: $usersOffset) {
       userCount
       users {
@@ -67,7 +67,7 @@ export const searchUsers = gql`
 `
 
 export const searchHashtags = gql`
-  query ($query: String!, $firstHashtags: Int, $hashtagsOffset: Int) {
+  query($query: String!, $firstHashtags: Int, $hashtagsOffset: Int) {
     searchHashtags(query: $query, firstHashtags: $firstHashtags, hashtagsOffset: $hashtagsOffset) {
       hashtagCount
       hashtags {
diff --git a/webapp/graphql/User.js b/webapp/graphql/User.js
index f16323073..b3f131238 100644
--- a/webapp/graphql/User.js
+++ b/webapp/graphql/User.js
@@ -68,7 +68,7 @@ export const notificationQuery = (i18n) => {
     ${commentFragment}
     ${postFragment}
 
-    query ($read: Boolean, $orderBy: NotificationOrdering, $first: Int, $offset: Int) {
+    query($read: Boolean, $orderBy: NotificationOrdering, $first: Int, $offset: Int) {
       notifications(read: $read, orderBy: $orderBy, first: $first, offset: $offset) {
         id
         read
@@ -107,7 +107,7 @@ export const markAsReadMutation = (i18n) => {
     ${commentFragment}
     ${postFragment}
 
-    mutation ($id: ID!) {
+    mutation($id: ID!) {
       markAsRead(id: $id) {
         id
         read
@@ -180,7 +180,7 @@ export const followUserMutation = (i18n) => {
     ${userFragment}
     ${userCountsFragment}
 
-    mutation ($id: ID!) {
+    mutation($id: ID!) {
       followUser(id: $id) {
         ...user
         ...userCounts
@@ -200,7 +200,7 @@ export const unfollowUserMutation = (i18n) => {
     ${userFragment}
     ${userCountsFragment}
 
-    mutation ($id: ID!) {
+    mutation($id: ID!) {
       unfollowUser(id: $id) {
         ...user
         ...userCounts
@@ -217,7 +217,7 @@ export const unfollowUserMutation = (i18n) => {
 
 export const updateUserMutation = () => {
   return gql`
-    mutation (
+    mutation(
       $id: ID!
       $slug: String
       $name: String
@@ -260,7 +260,7 @@ export const updateUserMutation = () => {
 }
 
 export const checkSlugAvailableQuery = gql`
-  query ($slug: String!) {
+  query($slug: String!) {
     User(slug: $slug) {
       slug
     }
@@ -303,7 +303,7 @@ export const userDataQuery = (i18n) => {
     ${userFragment}
     ${postFragment}
     ${commentFragment}
-    query ($id: ID!) {
+    query($id: ID!) {
       userData(id: $id) {
         user {
           ...user
diff --git a/webapp/graphql/admin/Roles.js b/webapp/graphql/admin/Roles.js
index 4015ad06c..4365cb533 100644
--- a/webapp/graphql/admin/Roles.js
+++ b/webapp/graphql/admin/Roles.js
@@ -10,7 +10,7 @@ export const FetchAllRoles = () => {
 
 export const updateUserRole = (role, id) => {
   return gql`
-    mutation ($role: UserRole!, $id: ID!) {
+    mutation($role: UserRole!, $id: ID!) {
       switchUserRole(role: $role, id: $id) {
         name
         role
diff --git a/webapp/graphql/groups.js b/webapp/graphql/groups.js
index ff63f1a25..567c67668 100644
--- a/webapp/graphql/groups.js
+++ b/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
@@ -49,7 +49,7 @@ export const createGroupMutation = gql`
 `
 
 export const updateGroupMutation = gql`
-  mutation (
+  mutation(
     $id: ID!
     $name: String
     $slug: String
@@ -96,7 +96,7 @@ export const updateGroupMutation = gql`
 `
 
 export const joinGroupMutation = gql`
-  mutation ($groupId: ID!, $userId: ID!) {
+  mutation($groupId: ID!, $userId: ID!) {
     JoinGroup(groupId: $groupId, userId: $userId) {
       id
       name
@@ -107,7 +107,7 @@ export const joinGroupMutation = gql`
 `
 
 export const changeGroupMemberRoleMutation = gql`
-  mutation ($groupId: ID!, $userId: ID!, $roleInGroup: GroupMemberRole!) {
+  mutation($groupId: ID!, $userId: ID!, $roleInGroup: GroupMemberRole!) {
     ChangeGroupMemberRole(groupId: $groupId, userId: $userId, roleInGroup: $roleInGroup) {
       id
       name
@@ -120,7 +120,7 @@ export const changeGroupMemberRoleMutation = gql`
 // ------ queries
 
 export const groupQuery = gql`
-  query (
+  query(
     $isMember: Boolean
     $id: ID
     $name: String
@@ -177,7 +177,7 @@ export const groupQuery = gql`
 `
 
 export const groupMembersQuery = gql`
-  query ($id: ID!, $first: Int, $offset: Int, $orderBy: [_UserOrdering], $filter: _UserFilter) {
+  query($id: ID!, $first: Int, $offset: Int, $orderBy: [_UserOrdering], $filter: _UserFilter) {
     GroupMembers(id: $id, first: $first, offset: $offset, orderBy: $orderBy, filter: $filter) {
       id
       name
diff --git a/webapp/graphql/location.js b/webapp/graphql/location.js
index 1fff64782..0fa2c2a2d 100644
--- a/webapp/graphql/location.js
+++ b/webapp/graphql/location.js
@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
 
 export const queryLocations = () => gql`
-  query ($place: String!, $lang: String!) {
+  query($place: String!, $lang: String!) {
     queryLocations(place: $place, lang: $lang) {
       place_name
       id
diff --git a/webapp/graphql/settings/BlockedUsers.js b/webapp/graphql/settings/BlockedUsers.js
index 0c642b352..be1765138 100644
--- a/webapp/graphql/settings/BlockedUsers.js
+++ b/webapp/graphql/settings/BlockedUsers.js
@@ -20,7 +20,7 @@ export const blockedUsers = () => {
 
 export const blockUser = () => {
   return gql`
-    mutation ($id: ID!) {
+    mutation($id: ID!) {
       blockUser(id: $id) {
         id
         name
@@ -33,7 +33,7 @@ export const blockUser = () => {
 
 export const unblockUser = () => {
   return gql`
-    mutation ($id: ID!) {
+    mutation($id: ID!) {
       unblockUser(id: $id) {
         id
         name
diff --git a/webapp/graphql/settings/MutedUsers.js b/webapp/graphql/settings/MutedUsers.js
index 10db085af..f498534e3 100644
--- a/webapp/graphql/settings/MutedUsers.js
+++ b/webapp/graphql/settings/MutedUsers.js
@@ -20,7 +20,7 @@ export const mutedUsers = () => {
 
 export const muteUser = () => {
   return gql`
-    mutation ($id: ID!) {
+    mutation($id: ID!) {
       muteUser(id: $id) {
         id
         name
@@ -33,7 +33,7 @@ export const muteUser = () => {
 
 export const unmuteUser = () => {
   return gql`
-    mutation ($id: ID!) {
+    mutation($id: ID!) {
       unmuteUser(id: $id) {
         id
         name
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index cbd7433ad..6c324fd97 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -139,7 +139,7 @@ export default {
     User: {
       query() {
         return gql`
-          query ($filter: _UserFilter, $first: Int, $offset: Int, $email: String) {
+          query($filter: _UserFilter, $first: Int, $offset: Int, $email: String) {
             User(
               email: $email
               filter: $filter
diff --git a/webapp/pages/group/_id.vue b/webapp/pages/group/_id.vue
index d743633d1..047d12d7f 100644
--- a/webapp/pages/group/_id.vue
+++ b/webapp/pages/group/_id.vue
@@ -8,7 +8,7 @@ import PersistentLinks from '~/mixins/persistentLinks.js'
 
 const options = {
   queryId: gql`
-    query ($idOrSlug: ID) {
+    query($idOrSlug: ID) {
       Group(id: $idOrSlug) {
         id
         slug
@@ -16,7 +16,7 @@ const options = {
     }
   `,
   querySlug: gql`
-    query ($idOrSlug: String) {
+    query($idOrSlug: String) {
       Group(slug: $idOrSlug) {
         id
         slug
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index 335ec546c..135039d13 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -28,18 +28,11 @@ export default {
     }
   },
   methods: {
-    async createGroup(form) {
+    async createGroup(value) {
       try {
         await this.$apollo.mutate({
           mutation: createGroupMutation,
-          variables: {
-            name: form.name,
-            about: form.about,
-            description: form.description,
-            groupType: form.groupType,
-            actionRadius: form.actionRadius,
-            categoryIds: form.formData.categoryIds,
-          },
+          variables: value,
           update: (_, { data: { createGroupData } }) => {
             // const { sendNotificationEmails } = createGroup
             // this.setCreateGroup({
diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index 852aaf3ba..e1a131c70 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -1,52 +1,72 @@
 <template>
-  <ds-flex gutter="small">
-    <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 }">
-      <transition name="slide-up" appear>
-        <group-form @updateGroup="updateGroup" :group="group" :update="true" />
-      </transition>
-    </ds-flex-item>
-  </ds-flex>
+  <div>
+    <ds-page-title heading="Group Setting"></ds-page-title>
+    <ds-flex gutter="small">
+      <ds-flex-item :width="{ base: '100%', md: '200px' }">
+        <ds-list>
+          <ds-list-item>
+            <div @click="menu = 'default'">
+              <ds-text :color="menu === 'default' ? 'primary' : ''" Group data>Group Data</ds-text>
+            </div>
+          </ds-list-item>
+          <ds-list-item>
+            <div @click="menu = 'members'">
+              <ds-text :color="menu === 'members' ? 'primary' : ''" Group data>Members</ds-text>
+            </div>
+          </ds-list-item>
+          <ds-list-item>
+            <div @click="menu = 'socialMedia'">
+              <ds-text :color="menu === 'socialMedia' ? 'primary' : ''" Group data>
+                Social Media
+              </ds-text>
+            </div>
+          </ds-list-item>
+          <ds-list-item>
+            <div @click="menu = 'links'">
+              <ds-text :color="menu === 'links' ? 'primary' : ''" Group data>Links</ds-text>
+            </div>
+          </ds-list-item>
+        </ds-list>
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '100%', md: 1 }">
+        <group-form
+          v-show="menu === 'default'"
+          @updateGroup="updateGroup"
+          :group="group"
+          :update="true"
+        />
+        <group-member v-show="menu === 'members'" />
+        <div v-show="menu === 'socialMedia'">Social Media</div>
+        <group-link v-show="menu === 'links'" />
+      </ds-flex-item>
+    </ds-flex>
+  </div>
 </template>
 
 <script>
 import GroupForm from '~/components/Group/GroupForm'
+import GroupMember from '~/components/Group/GroupMember'
+import GroupLink from '~/components/Group/GroupLink'
 import { groupQuery, updateGroupMutation } from '~/graphql/groups.js'
 import { mapGetters } from 'vuex'
 
 export default {
   components: {
     GroupForm,
+    GroupMember,
+    GroupLink,
+  },
+  data() {
+    return {
+      menu: 'default',
+    }
   },
   computed: {
-    routes() {
-      return [
-        {
-          name: 'default',
-          path: ``,
-        },
-        {
-          name: 'members',
-          path: ``,
-        },
-        {
-          name: 'social media',
-          path: ``,
-        },
-        {
-          name: 'invite link',
-          path: ``,
-        },
-      ]
-    },
     ...mapGetters({
       user: 'auth/user',
     }),
   },
   async asyncData(context) {
-    console.log('asyncData start')
     const {
       app,
       error,
@@ -61,9 +81,6 @@ export default {
       query: groupQuery,
       variables: { id },
     })
-    console.log('asyncData group', group)
-    console.log('asyncData id', id)
-    console.log('asyncData group.myRole', group.myRole)
     if (group.myRole !== 'owner') {
       error({ statusCode: 403, message: 'NONONNNO' })
     }
@@ -71,7 +88,6 @@ export default {
   },
   methods: {
     async updateGroup(value) {
-        console.log('updateGroup form', value)
       try {
         await this.$apollo.mutate({
           mutation: updateGroupMutation,
diff --git a/webapp/pages/group/my-groups.vue b/webapp/pages/group/my-groups.vue
index d8e2dfc92..49efa4aa1 100644
--- a/webapp/pages/group/my-groups.vue
+++ b/webapp/pages/group/my-groups.vue
@@ -2,7 +2,6 @@
   <div>
     <div>my groups</div>
     <group-teaser />
-    <group-list :items="responseGroupListQuery" :fields="fields" />
     <br />
     <br />
     <group-card :items="responseGroupListQuery" />
@@ -10,28 +9,18 @@
 </template>
 <script>
 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'
 
-/*
- *
- * groupType: { public, closed, hidden }
- * myRole: { pending,   usual,   admin,   owner }
- * actionRadius { regional, national, continental,  global,   interplanetary
- *
- */
 export default {
   name: 'MyGroups',
   components: {
     GroupTeaser,
-    GroupList,
     GroupCard,
   },
   data() {
     return {
       responseGroupListQuery: [],
-      fields: ['delete', 'name', 'about', 'categories', 'edit', 'unfollow'],
     }
   },
   methods: {
diff --git a/webapp/pages/post/_id.vue b/webapp/pages/post/_id.vue
index 14cc65a4e..8d425eab7 100644
--- a/webapp/pages/post/_id.vue
+++ b/webapp/pages/post/_id.vue
@@ -19,7 +19,7 @@ import PersistentLinks from '~/mixins/persistentLinks.js'
 
 const options = {
   queryId: gql`
-    query ($idOrSlug: ID) {
+    query($idOrSlug: ID) {
       Post(id: $idOrSlug) {
         id
         slug
@@ -27,7 +27,7 @@ const options = {
     }
   `,
   querySlug: gql`
-    query ($idOrSlug: String) {
+    query($idOrSlug: String) {
       Post(slug: $idOrSlug) {
         id
         slug
diff --git a/webapp/pages/profile/_id.vue b/webapp/pages/profile/_id.vue
index 7a771425d..b9bbef83e 100644
--- a/webapp/pages/profile/_id.vue
+++ b/webapp/pages/profile/_id.vue
@@ -8,7 +8,7 @@ import PersistentLinks from '~/mixins/persistentLinks.js'
 
 const options = {
   queryId: gql`
-    query ($idOrSlug: ID) {
+    query($idOrSlug: ID) {
       User(id: $idOrSlug) {
         id
         slug
@@ -16,7 +16,7 @@ const options = {
     }
   `,
   querySlug: gql`
-    query ($idOrSlug: String) {
+    query($idOrSlug: String) {
       User(slug: $idOrSlug) {
         id
         slug
diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue
index d392032bb..a985371d6 100644
--- a/webapp/pages/settings/my-social-media.vue
+++ b/webapp/pages/settings/my-social-media.vue
@@ -112,7 +112,7 @@ export default {
       let mutation, variables, successMessage
       if (isCreation) {
         mutation = gql`
-          mutation ($url: String!) {
+          mutation($url: String!) {
             CreateSocialMedia(url: $url) {
               id
               url
@@ -123,7 +123,7 @@ export default {
         successMessage = thisList.$t('settings.social-media.successAdd')
       } else {
         mutation = gql`
-          mutation ($id: ID!, $url: String!) {
+          mutation($id: ID!, $url: String!) {
             UpdateSocialMedia(id: $id, url: $url) {
               id
               url
@@ -160,7 +160,7 @@ export default {
       try {
         await thisList.$apollo.mutate({
           mutation: gql`
-            mutation ($id: ID!) {
+            mutation($id: ID!) {
               DeleteSocialMedia(id: $id) {
                 id
                 url