From cf31f3c1d6ed25cd516aaf8f810a7fb1350c324d Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 3 Aug 2022 10:26:08 +0200
Subject: [PATCH 01/55] preparation for creating a new group

---
 webapp/components/GroupForm/GroupForm.vue     | 272 ++++++++++++++++++
 webapp/components/GroupTeaser/GroupTeaser.vue |  24 ++
 webapp/locales/de.json                        |   3 +
 webapp/locales/en.json                        |   3 +
 webapp/pages/group/create.vue                 |  18 ++
 webapp/pages/my-groups.vue                    |  16 ++
 6 files changed, 336 insertions(+)
 create mode 100644 webapp/components/GroupForm/GroupForm.vue
 create mode 100644 webapp/components/GroupTeaser/GroupTeaser.vue
 create mode 100644 webapp/pages/group/create.vue
 create mode 100644 webapp/pages/my-groups.vue

diff --git a/webapp/components/GroupForm/GroupForm.vue b/webapp/components/GroupForm/GroupForm.vue
new file mode 100644
index 000000000..76d659b96
--- /dev/null
+++ b/webapp/components/GroupForm/GroupForm.vue
@@ -0,0 +1,272 @@
+<template>
+<div>
+    <ds-container>
+      <ds-form
+    v-model="formData"
+    @submit="handleSubmit"
+    @input="handleInput"
+    @input-valid="handleInputValid"
+    @reset="handleReset"
+    :schema="formSchema">
+    <template slot-scope="{ errors, reset }">
+      <ds-input
+        model="name"
+        label="Gruppenname"
+        placeholder="Your name ..."></ds-input>
+       
+       
+      <ds-select
+        icon="user"
+        model="status"
+        label="Status"
+        :options="['offen', 'geschlossen', 'geheim']"
+        placeholder="Status ..."></ds-select>
+   
+      <ds-input
+        model="description"
+        label="Beschreibung"
+        type="textarea"
+        rows="3"></ds-input>
+      <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-space>
+    </template>
+  </ds-form>
+    </ds-container>
+    <div  align="center" style="padding-top: 30px">
+    <nuxt-link :to="{ name: 'my-groups' }">
+                <base-button :path="{ name: 'my-groups' }">zurück</base-button> 
+              </nuxt-link></div>
+
+</div>
+  <!--<ds-form
+    class="contribution-form"
+    ref="contributionForm"
+    v-model="formData"
+    :schema="formSchema"
+    @submit="submit"
+  >
+    <template #default="{ errors }">
+      <base-card>
+        <template #heroImage>
+          <img
+            v-if="formData.image"
+            :src="formData.image | proxyApiUrl"
+            :class="['image', formData.imageBlurred && '--blur-image']"
+          />
+          <image-uploader
+            :hasImage="!!formData.image"
+            :class="[formData.imageBlurred && '--blur-image']"
+            @addHeroImage="addHeroImage"
+            @addImageAspectRatio="addImageAspectRatio"
+            @addImageType="addImageType"
+          />
+        </template>
+        <div v-if="formData.image" class="blur-toggle">
+          <label for="blur-img">{{ $t('contribution.inappropriatePicture') }}</label>
+          <input type="checkbox" id="blur-img" v-model="formData.imageBlurred" />
+          <page-params-link class="link" :pageParams="links.FAQ">
+            {{ $t('contribution.inappropriatePicture') }}
+            <base-icon name="question-circle" />
+          </page-params-link>
+        </div>
+        <ds-input
+          model="title"
+          :placeholder="$t('contribution.title')"
+          name="title"
+          autofocus
+          size="large"
+        />
+        <ds-chip size="base" :color="errors && errors.title && 'danger'">
+          {{ formData.title.length }}/{{ formSchema.title.max }}
+          <base-icon v-if="errors && errors.title" name="warning" />
+        </ds-chip>
+        <hc-editor
+          :users="users"
+          :value="formData.content"
+          :hashtags="hashtags"
+          @input="updateEditorContent"
+        />
+        <ds-chip size="base" :color="errors && errors.content && 'danger'">
+          {{ contentLength }}
+          <base-icon v-if="errors && errors.content" name="warning" />
+        </ds-chip>
+        <div class="buttons">
+          <base-button data-test="cancel-button" :disabled="loading" @click="$router.back()" danger>
+            {{ $t('actions.cancel') }}
+          </base-button>
+          <base-button type="submit" icon="check" :loading="loading" :disabled="errors" filled>
+            {{ $t('actions.save') }}
+          </base-button>
+        </div>
+      </base-card>
+    </template>
+  </ds-form>
+  -->
+</template>
+
+<script>
+// import gql from 'graphql-tag'
+// import { mapGetters } from 'vuex'
+// import HcEditor from '~/components/Editor/Editor'
+// import PostMutations from '~/graphql/PostMutations.js'
+// import ImageUploader from '~/components/ImageUploader/ImageUploader'
+// import links from '~/constants/links.js'
+// import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
+
+export default {
+  // components: {
+  //   HcEditor,
+  //   ImageUploader,
+  //   PageParamsLink,
+  // },
+  // props: {
+  //   contribution: {
+  //     type: Object,
+  //     default: () => ({}),
+  //   },
+  // },
+  // data() {
+  //   const { title, content, image } = this.contribution
+  //   const {
+  //     sensitive: imageBlurred = false,
+  //     aspectRatio: imageAspectRatio = null,
+  //     type: imageType = null,
+  //   } = image || {}
+// 
+//   //   return {
+//   //     links,
+//   //     formData: {
+//   //       title: title || '',
+//   //       content: content || '',
+//   //       image: image || null,
+//   //       imageAspectRatio,
+//   //       imageType,
+//   //       imageBlurred,
+//   //     },
+//   //     formSchema: {
+//   //       title: { required: true, min: 3, max: 100 },
+//   //       content: { required: true },
+//   //       imageBlurred: { required: false },
+//   //     },
+//   //     loading: false,
+//   //     users: [],
+//   //     hashtags: [],
+//   //     imageUpload: null,
+//   //   }
+//   // },
+//   // computed: {
+//   //   ...mapGetters({
+//   //     currentUser: 'auth/user',
+//   //   }),
+//   //   contentLength() {
+//   //     return this.$filters.removeHtml(this.formData.content).length
+//   //   },
+//   // },
+//   // methods: {
+//   //   submit() {
+//   //     let image = null
+//   //     const { title, content } = this.formData
+//   //     if (this.formData.image) {
+//   //       image = {
+//   //         sensitive: this.formData.imageBlurred,
+//   //       }
+//   //       if (this.imageUpload) {
+//   //         image.upload = this.imageUpload
+//   //         image.aspectRatio = this.formData.imageAspectRatio
+//   //         image.type = this.formData.imageType
+//   //       }
+//   //     }
+//   //     this.loading = true
+//   //     this.$apollo
+//   //       .mutate({
+//   //         mutation: this.contribution.id ? PostMutations().UpdatePost : PostMutations().CreatePost,
+//   //         variables: {
+//   //           title,
+//   //           content,
+//   //           id: this.contribution.id || null,
+//   //           image,
+//   //         },
+//   //       })
+//   //       .then(({ data }) => {
+//   //         this.loading = false
+//   //         this.$toast.success(this.$t('contribution.success'))
+//   //         const result = data[this.contribution.id ? 'UpdatePost' : 'CreatePost']
+// 
+//   //         this.$router.push({
+//   //           name: 'post-id-slug',
+//   //           params: { id: result.id, slug: result.slug },
+//   //         })
+//   //       })
+//   //       .catch((err) => {
+//   //         this.$toast.error(err.message)
+//   //         this.loading = false
+//   //       })
+//   //   },
+//   //   updateEditorContent(value) {
+//   //     this.$refs.contributionForm.update('content', value)
+//   //   },
+//   //   addHeroImage(file) {
+//   //     this.formData.image = null
+//   //     if (file) {
+//   //       const reader = new FileReader()
+//   //       reader.onload = ({ target }) => {
+//   //         this.formData.image = {
+//   //           ...this.formData.image,
+//   //           url: target.result,
+//   //         }
+//   //       }
+//   //       reader.readAsDataURL(file)
+//   //       this.imageUpload = file
+//   //     }
+//   //   },
+//   //   addImageAspectRatio(aspectRatio) {
+//   //     this.formData.imageAspectRatio = aspectRatio
+//   //   },
+//   //   addImageType(imageType) {
+//   //     this.formData.imageType = imageType
+//   //   },
+//   // },
+//   // apollo: {
+//   //   User: {
+//   //     query() {
+  //       return gql`
+  //         query {
+  //           User(orderBy: slug_asc) {
+  //             id
+  //             slug
+  //           }
+  //         }
+  //       `
+  //     },
+  //     result({ data: { User } }) {
+  //       this.users = User
+  //     },
+  //   },
+  //   Tag: {
+  //     query() {
+  //       return gql`
+  //         query {
+  //           Tag(orderBy: id_asc) {
+  //             id
+  //           }
+  //         }
+  //       `
+  //     },
+  //     result({ data: { Tag } }) {
+  //       this.hashtags = Tag
+  //     },
+  //   },
+  // },
+}
+</script>
+
+
diff --git a/webapp/components/GroupTeaser/GroupTeaser.vue b/webapp/components/GroupTeaser/GroupTeaser.vue
new file mode 100644
index 000000000..e9b3ba670
--- /dev/null
+++ b/webapp/components/GroupTeaser/GroupTeaser.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="group-teaser">Group Teaser
+
+      <ds-grid-item :row-span="2" column-span="fullWidth">
+            <ds-space centered>
+              <nuxt-link :to="{ name: 'group-create' }">
+                <base-button
+                  v-tooltip="{
+                    content: $t('group.newGroup'),
+                    placement: 'left',
+                    delay: { show: 500 },
+                  }"
+                  :path="{ name: 'group-create' }"
+                  class="profile-post-add-button"
+                  icon="plus"
+                  circle
+                  filled
+                />
+              </nuxt-link>
+            </ds-space>
+          </ds-grid-item>
+
+  </div>
+</template>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 297daa511..162897883 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -366,6 +366,9 @@
     "follow": "Folgen",
     "following": "Folge Ich"
   },
+  "group": {
+    "newGroup":"Erstelle eine neue Gruppe"
+  },
   "hashtags-filter": {
     "clearSearch": "Suche löschen",
     "hashtag-search": "Suche nach #{hashtag}",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 8499b0290..4043eefd8 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -366,6 +366,9 @@
     "follow": "Follow",
     "following": "Following"
   },
+  "group": {
+    "newGroup":"Create a new Group"
+  },
   "hashtags-filter": {
     "clearSearch": "Clear search",
     "hashtag-search": "Searching for #{hashtag}",
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
new file mode 100644
index 000000000..6b52167f2
--- /dev/null
+++ b/webapp/pages/group/create.vue
@@ -0,0 +1,18 @@
+<template>
+<div>
+ <h2>Neue Gruppe</h2>
+  
+  
+      <new-group-form style="padding-top: 30px"/>
+  </div>
+</template>
+
+<script>
+import NewGroupForm from '~/components/GroupForm/GroupForm'
+
+export default {
+  components: {
+    NewGroupForm,
+  },
+}
+</script>
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
new file mode 100644
index 000000000..386bb1e51
--- /dev/null
+++ b/webapp/pages/my-groups.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <div>my groups</div>
+    <group-teaser />
+  </div>
+</template>
+<script>
+import GroupTeaser from '~/components/GroupTeaser/GroupTeaser.vue'
+
+export default {
+  name: 'MyGroups',
+  components: {
+    GroupTeaser,
+  },
+}
+</script>

From f1831661e58c1547485b16d49036e8ef5a14ac9b Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 7 Aug 2022 14:12:17 +0200
Subject: [PATCH 02/55] add my-groups page and setting link

---
 webapp/components/GroupForm/GroupForm.vue     | 208 +++++-------------
 webapp/components/GroupTeaser/GroupTeaser.vue |  40 ++--
 webapp/locales/de.json                        |   3 +
 webapp/locales/en.json                        |   3 +
 webapp/pages/group/create.vue                 |   9 +-
 webapp/pages/settings.vue                     |   4 +
 6 files changed, 88 insertions(+), 179 deletions(-)

diff --git a/webapp/components/GroupForm/GroupForm.vue b/webapp/components/GroupForm/GroupForm.vue
index 76d659b96..e730a3c13 100644
--- a/webapp/components/GroupForm/GroupForm.vue
+++ b/webapp/components/GroupForm/GroupForm.vue
@@ -3,10 +3,7 @@
     <ds-container>
       <ds-form
     v-model="formData"
-    @submit="handleSubmit"
-    @input="handleInput"
-    @input-valid="handleInputValid"
-    @reset="handleReset"
+    @submit="submit"
     :schema="formSchema">
     <template slot-scope="{ errors, reset }">
       <ds-input
@@ -27,6 +24,20 @@
         label="Beschreibung"
         type="textarea"
         rows="3"></ds-input>
+
+      <categories-select
+          v-if="categoriesActive"
+          model="categoryIds"
+          :existingCategoryIds="formData.categoryIds"
+        />
+        <ds-chip
+          v-if="categoriesActive"
+          size="base"
+          :color="errors && errors.categoryIds && 'danger'"
+        >
+          {{ formData.categoryIds.length }} / 3
+          <base-icon v-if="errors && errors.categoryIds" name="warning" />
+        </ds-chip>
       <ds-space margin-top="large">
         <ds-button @click.prevent="reset()">
           Reset form
@@ -47,122 +58,47 @@
               </nuxt-link></div>
 
 </div>
-  <!--<ds-form
-    class="contribution-form"
-    ref="contributionForm"
-    v-model="formData"
-    :schema="formSchema"
-    @submit="submit"
-  >
-    <template #default="{ errors }">
-      <base-card>
-        <template #heroImage>
-          <img
-            v-if="formData.image"
-            :src="formData.image | proxyApiUrl"
-            :class="['image', formData.imageBlurred && '--blur-image']"
-          />
-          <image-uploader
-            :hasImage="!!formData.image"
-            :class="[formData.imageBlurred && '--blur-image']"
-            @addHeroImage="addHeroImage"
-            @addImageAspectRatio="addImageAspectRatio"
-            @addImageType="addImageType"
-          />
-        </template>
-        <div v-if="formData.image" class="blur-toggle">
-          <label for="blur-img">{{ $t('contribution.inappropriatePicture') }}</label>
-          <input type="checkbox" id="blur-img" v-model="formData.imageBlurred" />
-          <page-params-link class="link" :pageParams="links.FAQ">
-            {{ $t('contribution.inappropriatePicture') }}
-            <base-icon name="question-circle" />
-          </page-params-link>
-        </div>
-        <ds-input
-          model="title"
-          :placeholder="$t('contribution.title')"
-          name="title"
-          autofocus
-          size="large"
-        />
-        <ds-chip size="base" :color="errors && errors.title && 'danger'">
-          {{ formData.title.length }}/{{ formSchema.title.max }}
-          <base-icon v-if="errors && errors.title" name="warning" />
-        </ds-chip>
-        <hc-editor
-          :users="users"
-          :value="formData.content"
-          :hashtags="hashtags"
-          @input="updateEditorContent"
-        />
-        <ds-chip size="base" :color="errors && errors.content && 'danger'">
-          {{ contentLength }}
-          <base-icon v-if="errors && errors.content" name="warning" />
-        </ds-chip>
-        <div class="buttons">
-          <base-button data-test="cancel-button" :disabled="loading" @click="$router.back()" danger>
-            {{ $t('actions.cancel') }}
-          </base-button>
-          <base-button type="submit" icon="check" :loading="loading" :disabled="errors" filled>
-            {{ $t('actions.save') }}
-          </base-button>
-        </div>
-      </base-card>
-    </template>
-  </ds-form>
-  -->
+  
 </template>
 
 <script>
-// import gql from 'graphql-tag'
-// import { mapGetters } from 'vuex'
-// import HcEditor from '~/components/Editor/Editor'
-// import PostMutations from '~/graphql/PostMutations.js'
-// import ImageUploader from '~/components/ImageUploader/ImageUploader'
-// import links from '~/constants/links.js'
-// import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
+import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 
 export default {
-  // components: {
-  //   HcEditor,
-  //   ImageUploader,
-  //   PageParamsLink,
-  // },
-  // props: {
-  //   contribution: {
-  //     type: Object,
-  //     default: () => ({}),
-  //   },
-  // },
-  // data() {
-  //   const { title, content, image } = this.contribution
-  //   const {
-  //     sensitive: imageBlurred = false,
-  //     aspectRatio: imageAspectRatio = null,
-  //     type: imageType = null,
-  //   } = image || {}
-// 
-//   //   return {
-//   //     links,
-//   //     formData: {
-//   //       title: title || '',
-//   //       content: content || '',
-//   //       image: image || null,
-//   //       imageAspectRatio,
-//   //       imageType,
-//   //       imageBlurred,
-//   //     },
-//   //     formSchema: {
-//   //       title: { required: true, min: 3, max: 100 },
-//   //       content: { required: true },
-//   //       imageBlurred: { required: false },
-//   //     },
-//   //     loading: false,
-//   //     users: [],
-//   //     hashtags: [],
-//   //     imageUpload: null,
-//   //   }
-//   // },
+   components: {
+       CategoriesSelect,
+   },
+    data() {
+      // const { name, status, description, categories } = this.group
+      categories: [{id: 0, name: 'Bildung'},{id: 1, name: 'Politik'}]
+ 
+       return {
+           categoriesActive: this.$env.CATEGORIES_ACTIVE,
+ 
+ formData: {
+     categoryIds: this.categories ? this.categories.map((category) => category.id) : [],
+       name: name || '',
+       status: status || '',
+       description: description || '',
+   },
+     formSchema: {
+        name: { required: true, min: 3, max: 100 },
+        description: { 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 []
+          },
+        },
+      },
+ 
+    }
+  },
 //   // computed: {
 //   //   ...mapGetters({
 //   //     currentUser: 'auth/user',
@@ -172,45 +108,9 @@ export default {
 //   //   },
 //   // },
 //   // methods: {
-//   //   submit() {
-//   //     let image = null
-//   //     const { title, content } = this.formData
-//   //     if (this.formData.image) {
-//   //       image = {
-//   //         sensitive: this.formData.imageBlurred,
-//   //       }
-//   //       if (this.imageUpload) {
-//   //         image.upload = this.imageUpload
-//   //         image.aspectRatio = this.formData.imageAspectRatio
-//   //         image.type = this.formData.imageType
-//   //       }
-//   //     }
-//   //     this.loading = true
-//   //     this.$apollo
-//   //       .mutate({
-//   //         mutation: this.contribution.id ? PostMutations().UpdatePost : PostMutations().CreatePost,
-//   //         variables: {
-//   //           title,
-//   //           content,
-//   //           id: this.contribution.id || null,
-//   //           image,
-//   //         },
-//   //       })
-//   //       .then(({ data }) => {
-//   //         this.loading = false
-//   //         this.$toast.success(this.$t('contribution.success'))
-//   //         const result = data[this.contribution.id ? 'UpdatePost' : 'CreatePost']
-// 
-//   //         this.$router.push({
-//   //           name: 'post-id-slug',
-//   //           params: { id: result.id, slug: result.slug },
-//   //         })
-//   //       })
-//   //       .catch((err) => {
-//   //         this.$toast.error(err.message)
-//   //         this.loading = false
-//   //       })
-//   //   },
+         handleSubmit() {
+             console.log('handleSubmit')
+         },
 //   //   updateEditorContent(value) {
 //   //     this.$refs.contributionForm.update('content', value)
 //   //   },
diff --git a/webapp/components/GroupTeaser/GroupTeaser.vue b/webapp/components/GroupTeaser/GroupTeaser.vue
index e9b3ba670..a199106a5 100644
--- a/webapp/components/GroupTeaser/GroupTeaser.vue
+++ b/webapp/components/GroupTeaser/GroupTeaser.vue
@@ -1,24 +1,24 @@
 <template>
-  <div class="group-teaser">Group Teaser
-
-      <ds-grid-item :row-span="2" column-span="fullWidth">
-            <ds-space centered>
-              <nuxt-link :to="{ name: 'group-create' }">
-                <base-button
-                  v-tooltip="{
-                    content: $t('group.newGroup'),
-                    placement: 'left',
-                    delay: { show: 500 },
-                  }"
-                  :path="{ name: 'group-create' }"
-                  class="profile-post-add-button"
-                  icon="plus"
-                  circle
-                  filled
-                />
-              </nuxt-link>
-            </ds-space>
-          </ds-grid-item>
+  <div class="group-teaser">
+    Group Teaser
 
+    <ds-grid-item :row-span="2" column-span="fullWidth">
+      <ds-space centered>
+        <nuxt-link :to="{ name: 'group-create' }">
+          <base-button
+            v-tooltip="{
+              content: $t('group.newGroup'),
+              placement: 'left',
+              delay: { show: 500 },
+            }"
+            :path="{ name: 'group-create' }"
+            class="profile-post-add-button"
+            icon="plus"
+            circle
+            filled
+          />
+        </nuxt-link>
+      </ds-space>
+    </ds-grid-item>
   </div>
 </template>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 162897883..cdc5817bb 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -741,6 +741,9 @@
       "unmute": "Stummschaltung aufheben",
       "unmuted": "{name} ist nicht mehr stummgeschaltet"
     },
+    "groups": {
+      "name":"Meine Gruppen"
+    },
     "name": "Einstellungen",
     "notifications": {
       "name": "Benachrichtigungen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 4043eefd8..658b84ffa 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -741,6 +741,9 @@
       "unmute": "Unmute user",
       "unmuted": "{name} is unmuted again"
     },
+    "groups": {
+      "name":"My Groups"
+    },
     "name": "Settings",
     "notifications": {
       "name": "Notifications",
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index 6b52167f2..b77096859 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -1,9 +1,8 @@
 <template>
-<div>
- <h2>Neue Gruppe</h2>
-  
-  
-      <new-group-form style="padding-top: 30px"/>
+  <div>
+    <h2>Neue Gruppe</h2>
+
+    <new-group-form style="padding-top: 30px" />
   </div>
 </template>
 
diff --git a/webapp/pages/settings.vue b/webapp/pages/settings.vue
index 360f1e969..c0a145306 100644
--- a/webapp/pages/settings.vue
+++ b/webapp/pages/settings.vue
@@ -39,6 +39,10 @@ export default {
           name: this.$t('settings.social-media.name'),
           path: `/settings/my-social-media`,
         },
+        {
+          name: this.$t('settings.groups.name'),
+          path: `/my-groups`,
+        },
         {
           name: this.$t('settings.muted-users.name'),
           path: `/settings/muted-users`,

From 25a64a0c3c79dd156bb94abbed01e7557ecce8e2 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 7 Aug 2022 21:37:19 +0200
Subject: [PATCH 03/55] prework for group form

---
 webapp/components/GroupForm/GroupForm.vue | 203 +++++-----------------
 webapp/pages/group/create.vue             |  12 +-
 2 files changed, 53 insertions(+), 162 deletions(-)

diff --git a/webapp/components/GroupForm/GroupForm.vue b/webapp/components/GroupForm/GroupForm.vue
index e730a3c13..bff03ec8a 100644
--- a/webapp/components/GroupForm/GroupForm.vue
+++ b/webapp/components/GroupForm/GroupForm.vue
@@ -1,172 +1,61 @@
 <template>
-<div>
+  <div>
     <ds-container>
-      <ds-form
-    v-model="formData"
-    @submit="submit"
-    :schema="formSchema">
-    <template slot-scope="{ errors, reset }">
-      <ds-input
-        model="name"
-        label="Gruppenname"
-        placeholder="Your name ..."></ds-input>
-       
-       
-      <ds-select
-        icon="user"
-        model="status"
-        label="Status"
-        :options="['offen', 'geschlossen', 'geheim']"
-        placeholder="Status ..."></ds-select>
-   
-      <ds-input
-        model="description"
-        label="Beschreibung"
-        type="textarea"
-        rows="3"></ds-input>
+      <ds-form v-model="formData" @submit="submit" :schema="formSchema">
+          <ds-input v-model="name" label="Gruppenname" placeholder="Your name ..."></ds-input>
 
-      <categories-select
-          v-if="categoriesActive"
-          model="categoryIds"
-          :existingCategoryIds="formData.categoryIds"
-        />
-        <ds-chip
-          v-if="categoriesActive"
-          size="base"
-          :color="errors && errors.categoryIds && 'danger'"
-        >
-          {{ formData.categoryIds.length }} / 3
-          <base-icon v-if="errors && errors.categoryIds" name="warning" />
-        </ds-chip>
-      <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-select
+            icon="user"
+            v-model="status"
+            label="Status"
+            :options="['offen', 'geschlossen', 'geheim']"
+            placeholder="Status ..."
+          ></ds-select>
+
+          <ds-input v-model="description" label="Beschreibung" type="textarea" rows="3"></ds-input>
+
+           <div>{{name}}</div>
+      <div>{{status}}</div>
+      <div>{{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-space>
+    
+      </ds-form>
+      <ds-space centered>
+        zurück
       </ds-space>
-    </template>
-  </ds-form>
     </ds-container>
-    <div  align="center" style="padding-top: 30px">
-    <nuxt-link :to="{ name: 'my-groups' }">
-                <base-button :path="{ name: 'my-groups' }">zurück</base-button> 
-              </nuxt-link></div>
-
-</div>
-  
+  </div>
 </template>
 
 <script>
 import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 
 export default {
-   components: {
-       CategoriesSelect,
-   },
-    data() {
-      // const { name, status, description, categories } = this.group
-      categories: [{id: 0, name: 'Bildung'},{id: 1, name: 'Politik'}]
- 
-       return {
-           categoriesActive: this.$env.CATEGORIES_ACTIVE,
- 
- formData: {
-     categoryIds: this.categories ? this.categories.map((category) => category.id) : [],
-       name: name || '',
-       status: status || '',
-       description: description || '',
-   },
-     formSchema: {
-        name: { required: true, min: 3, max: 100 },
-        description: { 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 []
-          },
-        },
-      },
- 
+  components: {
+    CategoriesSelect,
+  },
+  data() {
+    return {
+      name: '',
+      status: '',
+      description: '',
     }
   },
-//   // computed: {
-//   //   ...mapGetters({
-//   //     currentUser: 'auth/user',
-//   //   }),
-//   //   contentLength() {
-//   //     return this.$filters.removeHtml(this.formData.content).length
-//   //   },
-//   // },
-//   // methods: {
-         handleSubmit() {
-             console.log('handleSubmit')
-         },
-//   //   updateEditorContent(value) {
-//   //     this.$refs.contributionForm.update('content', value)
-//   //   },
-//   //   addHeroImage(file) {
-//   //     this.formData.image = null
-//   //     if (file) {
-//   //       const reader = new FileReader()
-//   //       reader.onload = ({ target }) => {
-//   //         this.formData.image = {
-//   //           ...this.formData.image,
-//   //           url: target.result,
-//   //         }
-//   //       }
-//   //       reader.readAsDataURL(file)
-//   //       this.imageUpload = file
-//   //     }
-//   //   },
-//   //   addImageAspectRatio(aspectRatio) {
-//   //     this.formData.imageAspectRatio = aspectRatio
-//   //   },
-//   //   addImageType(imageType) {
-//   //     this.formData.imageType = imageType
-//   //   },
-//   // },
-//   // apollo: {
-//   //   User: {
-//   //     query() {
-  //       return gql`
-  //         query {
-  //           User(orderBy: slug_asc) {
-  //             id
-  //             slug
-  //           }
-  //         }
-  //       `
-  //     },
-  //     result({ data: { User } }) {
-  //       this.users = User
-  //     },
-  //   },
-  //   Tag: {
-  //     query() {
-  //       return gql`
-  //         query {
-  //           Tag(orderBy: id_asc) {
-  //             id
-  //           }
-  //         }
-  //       `
-  //     },
-  //     result({ data: { Tag } }) {
-  //       this.hashtags = Tag
-  //     },
-  //   },
-  // },
+ 
+  methods: {
+  submit() {
+    console.log('handleSubmit')
+  },
+  handleSubmit() {
+    console.log('handleSubmit')
+  },
+  reset() {
+    console.log('handleSubmit')
+  },
+ },
 }
 </script>
-
-
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index b77096859..9463083f1 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -1,11 +1,13 @@
 <template>
-  <div>
-    <h2>Neue Gruppe</h2>
-
-    <new-group-form style="padding-top: 30px" />
-  </div>
+  <ds-flex :width="{ base: '100%' }" gutter="base">
+    <ds-flex-item :width="{ base: '100%', md: 5 }">
+      <new-group-form />
+    </ds-flex-item>
+    <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
+  </ds-flex>
 </template>
 
+
 <script>
 import NewGroupForm from '~/components/GroupForm/GroupForm'
 

From d50ae27e49412a38c35d925a2ad2955cbc11a2da Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 10 Aug 2022 09:07:32 +0200
Subject: [PATCH 04/55] prework for group list

---
 webapp/components/GroupForm/GroupForm.vue     |  5 ++--
 webapp/components/GroupList/GroupList.vue     | 27 +++++++++++++++++
 webapp/components/GroupTeaser/GroupTeaser.vue |  9 ++++--
 webapp/pages/my-groups.vue                    | 30 +++++++++++++++++++
 4 files changed, 67 insertions(+), 4 deletions(-)
 create mode 100644 webapp/components/GroupList/GroupList.vue

diff --git a/webapp/components/GroupForm/GroupForm.vue b/webapp/components/GroupForm/GroupForm.vue
index bff03ec8a..1bd4455d7 100644
--- a/webapp/components/GroupForm/GroupForm.vue
+++ b/webapp/components/GroupForm/GroupForm.vue
@@ -25,8 +25,8 @@
     
       </ds-form>
       <ds-space centered>
-        zurück
-      </ds-space>
+      <nuxt-link to="/my-groups">zurück</nuxt-link>
+    </ds-space>
     </ds-container>
   </div>
 </template>
@@ -35,6 +35,7 @@
 import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 
 export default {
+  name: 'GroupForm',
   components: {
     CategoriesSelect,
   },
diff --git a/webapp/components/GroupList/GroupList.vue b/webapp/components/GroupList/GroupList.vue
new file mode 100644
index 000000000..bfaceed21
--- /dev/null
+++ b/webapp/components/GroupList/GroupList.vue
@@ -0,0 +1,27 @@
+<template>
+<div>
+     <ds-container class="group-list">
+         <ds-space><h2>Group List</h2></ds-space>
+           <ds-table :data="items" :fields="fields">
+      <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>
+      </template>
+    </ds-table>
+     </ds-container>
+</div>
+</template>
+<script lang="ts">
+
+export default {
+    name: 'GroupList',
+    props: {
+        items: { type: Array, default: () => [] },
+        fields: { type: Array, default: () => [] }
+    }
+}
+</script>
diff --git a/webapp/components/GroupTeaser/GroupTeaser.vue b/webapp/components/GroupTeaser/GroupTeaser.vue
index a199106a5..22df641e9 100644
--- a/webapp/components/GroupTeaser/GroupTeaser.vue
+++ b/webapp/components/GroupTeaser/GroupTeaser.vue
@@ -1,7 +1,5 @@
 <template>
   <div class="group-teaser">
-    Group Teaser
-
     <ds-grid-item :row-span="2" column-span="fullWidth">
       <ds-space centered>
         <nuxt-link :to="{ name: 'group-create' }">
@@ -22,3 +20,10 @@
     </ds-grid-item>
   </div>
 </template>
+<script>
+ 
+export default  {
+    name: 'GroupTeaser',
+}
+</script>
+
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index 386bb1e51..a861403ed 100644
--- a/webapp/pages/my-groups.vue
+++ b/webapp/pages/my-groups.vue
@@ -2,15 +2,45 @@
   <div>
     <div>my groups</div>
     <group-teaser />
+    <group-list :items="items" :fields="fields"/>
   </div>
 </template>
 <script>
 import GroupTeaser from '~/components/GroupTeaser/GroupTeaser.vue'
+import GroupList from  '~/components/GroupList/GroupList.vue'
 
 export default {
   name: 'MyGroups',
   components: {
     GroupTeaser,
+    GroupList
   },
+  data() {
+      return {
+         fields: ['name', 'type', 'loves', 'edit'],
+        items: [
+          {
+            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'
+          }
+        ]
+      }
+    }
 }
 </script>

From addfc39c4c3b1a6132b4e1b82061a01ed651fb48 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 11 Aug 2022 11:10:52 +0200
Subject: [PATCH 05/55] add groupe site id und slug

---
 webapp/components/GroupForm/GroupForm.vue     | 60 +++++++--------
 webapp/components/GroupList/GroupCard.vue     | 50 ++++++++++++
 webapp/components/GroupList/GroupList.vue     | 73 +++++++++++++-----
 webapp/components/GroupMember/GroupMember.vue | 67 ++++++++++++++++
 webapp/components/GroupTeaser/GroupTeaser.vue |  6 +-
 webapp/pages/group/_id.vue                    |  9 +++
 webapp/pages/group/_id/_slug.vue              |  6 ++
 webapp/pages/group/create.vue                 |  7 +-
 webapp/pages/my-groups.vue                    | 76 ++++++++++++-------
 9 files changed, 270 insertions(+), 84 deletions(-)
 create mode 100644 webapp/components/GroupList/GroupCard.vue
 create mode 100644 webapp/components/GroupMember/GroupMember.vue
 create mode 100644 webapp/pages/group/_id.vue
 create mode 100644 webapp/pages/group/_id/_slug.vue

diff --git a/webapp/components/GroupForm/GroupForm.vue b/webapp/components/GroupForm/GroupForm.vue
index 1bd4455d7..703adc45c 100644
--- a/webapp/components/GroupForm/GroupForm.vue
+++ b/webapp/components/GroupForm/GroupForm.vue
@@ -1,32 +1,31 @@
 <template>
   <div>
     <ds-container>
-      <ds-form v-model="formData" @submit="submit" :schema="formSchema">
-          <ds-input v-model="name" label="Gruppenname" placeholder="Your name ..."></ds-input>
+      <ds-form @submit="submit">
+        <ds-input v-model="name" label="Gruppenname" placeholder="Your name ..."></ds-input>
 
-          <ds-select
-            icon="user"
-            v-model="status"
-            label="Status"
-            :options="['offen', 'geschlossen', 'geheim']"
-            placeholder="Status ..."
-          ></ds-select>
+        <ds-select
+          icon="user"
+          v-model="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="description" label="Beschreibung" type="textarea" rows="3"></ds-input>
 
-           <div>{{name}}</div>
-      <div>{{status}}</div>
-      <div>{{description}}</div>
+        <div>{{ name }}</div>
+        <div>{{ status }}</div>
+        <div>{{ 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-space>
-    
+        <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-space>
       </ds-form>
       <ds-space centered>
-      <nuxt-link to="/my-groups">zurück</nuxt-link>
-    </ds-space>
+        <nuxt-link to="/my-groups">zurück</nuxt-link>
+      </ds-space>
     </ds-container>
   </div>
 </template>
@@ -44,19 +43,20 @@ export default {
       name: '',
       status: '',
       description: '',
+      disable: false,
     }
   },
- 
+
   methods: {
-  submit() {
-    console.log('handleSubmit')
+    submit() {
+      console.log('handleSubmit')
+    },
+    handleSubmit() {
+      console.log('handleSubmit')
+    },
+    reset() {
+      console.log('handleSubmit')
+    },
   },
-  handleSubmit() {
-    console.log('handleSubmit')
-  },
-  reset() {
-    console.log('handleSubmit')
-  },
- },
 }
 </script>
diff --git a/webapp/components/GroupList/GroupCard.vue b/webapp/components/GroupList/GroupCard.vue
new file mode 100644
index 000000000..4ae9f807f
--- /dev/null
+++ b/webapp/components/GroupList/GroupCard.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <ds-container class="group-card">
+      <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-container>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'GroupList',
+  props: {
+    items: { type: Array, default: () => [] },
+  },
+  methods: {
+    deleteGroup() {
+      alert('delete group')
+    },
+    unfollowGroup() {
+      alert('unfollow group')
+    },
+  },
+  computed: {
+    status(state) {
+      console.log(state)
+      // if (scope === 'hidden') return 'danger'
+      return 'inverse'
+    },
+  },
+}
+</script>
diff --git a/webapp/components/GroupList/GroupList.vue b/webapp/components/GroupList/GroupList.vue
index bfaceed21..69df8acb7 100644
--- a/webapp/components/GroupList/GroupList.vue
+++ b/webapp/components/GroupList/GroupList.vue
@@ -1,27 +1,58 @@
 <template>
-<div>
-     <ds-container class="group-list">
-         <ds-space><h2>Group List</h2></ds-space>
-           <ds-table :data="items" :fields="fields">
-      <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>
-      </template>
-    </ds-table>
-     </ds-container>
-</div>
+  <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.owner"
+            icon="trash"
+            @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>
+        <template slot="status" slot-scope="scope">
+          <ds-tag :color="status">{{ scope.row.status }}</ds-tag>
+        </template>
+        <template slot="edit" slot-scope="scope">
+          <base-button
+            v-if="!scope.row.owner"
+            icon="close"
+            @click="unfollowGroup(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>
+      </ds-table>
+    </ds-container>
+  </div>
 </template>
 <script lang="ts">
-
 export default {
-    name: 'GroupList',
-    props: {
-        items: { type: Array, default: () => [] },
-        fields: { type: Array, default: () => [] }
-    }
+  name: 'GroupList',
+  props: {
+    items: { type: Array, default: () => [] },
+    fields: { type: Array, default: () => [] },
+  },
+  methods: {
+    deleteGroup() {
+      alert('delete group')
+    },
+    unfollowGroup() {
+      alert('unfollow group')
+    },
+  },
+  computed: {
+    status(state) {
+      console.log(state)
+      // if (scope === 'hidden') return 'danger'
+      return 'inverse'
+    },
+  },
 }
 </script>
diff --git a/webapp/components/GroupMember/GroupMember.vue b/webapp/components/GroupMember/GroupMember.vue
new file mode 100644
index 000000000..f83b00685
--- /dev/null
+++ b/webapp/components/GroupMember/GroupMember.vue
@@ -0,0 +1,67 @@
+<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" >
+        <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>
+      </template>
+    </ds-table>
+    </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'
+          }
+        ]
+      }
+    },
+    methods: {
+      deleteRow(row) {
+        const index = this.tableData.indexOf(row)
+        if (index > -1) {
+          this.tableData.splice(index, 1)
+        }
+      }
+    }  
+    
+}
+</script>
diff --git a/webapp/components/GroupTeaser/GroupTeaser.vue b/webapp/components/GroupTeaser/GroupTeaser.vue
index 22df641e9..33a50dca7 100644
--- a/webapp/components/GroupTeaser/GroupTeaser.vue
+++ b/webapp/components/GroupTeaser/GroupTeaser.vue
@@ -21,9 +21,7 @@
   </div>
 </template>
 <script>
- 
-export default  {
-    name: 'GroupTeaser',
+export default {
+  name: 'GroupTeaser',
 }
 </script>
-
diff --git a/webapp/pages/group/_id.vue b/webapp/pages/group/_id.vue
new file mode 100644
index 000000000..7ce25e827
--- /dev/null
+++ b/webapp/pages/group/_id.vue
@@ -0,0 +1,9 @@
+<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>
\ No newline at end of file
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
new file mode 100644
index 000000000..36f2ccb2b
--- /dev/null
+++ b/webapp/pages/group/_id/_slug.vue
@@ -0,0 +1,6 @@
+<template>
+<div>
+    <ds-space />
+    Group Page 
+</div>    
+</template>
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index 9463083f1..e82fadd6e 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -1,19 +1,24 @@
 <template>
+  <div>
   <ds-flex :width="{ base: '100%' }" gutter="base">
     <ds-flex-item :width="{ base: '100%', md: 5 }">
       <new-group-form />
     </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 GroupMember from '~/components/GroupMember/GroupMember.vue'
 
 export default {
   components: {
     NewGroupForm,
+    GroupMember,
   },
 }
 </script>
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index a861403ed..81843f5d2 100644
--- a/webapp/pages/my-groups.vue
+++ b/webapp/pages/my-groups.vue
@@ -2,45 +2,65 @@
   <div>
     <div>my groups</div>
     <group-teaser />
-    <group-list :items="items" :fields="fields"/>
+    <group-list :items="items" :fields="fields" />
+    <br />
+    <br />
+    <group-card :items="items" />
   </div>
 </template>
 <script>
 import GroupTeaser from '~/components/GroupTeaser/GroupTeaser.vue'
-import GroupList from  '~/components/GroupList/GroupList.vue'
+import GroupList from '~/components/GroupList/GroupList.vue'
+import GroupCard from '~/components/GroupList/GroupCard.vue'
 
+/*
+ *
+ * gruppen status: { open, close, hidden }
+ *
+ *
+ */
 export default {
   name: 'MyGroups',
   components: {
     GroupTeaser,
-    GroupList
+    GroupList,
+    GroupCard,
   },
   data() {
-      return {
-         fields: ['name', 'type', 'loves', 'edit'],
-        items: [
-          {
-            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'
-          }
-        ]
-      }
+    return {
+      fields: ['delete', 'name', 'desc', 'status', 'edit'],
+      items: [
+        {
+          id: 0,
+          name: 'Rengar',
+          desc: 'Rengar Jungler Rengar Jungler Rengar Jungler Rengar Jungler Rengar Jungler ',
+          status: 'open',
+          owner: true,
+        },
+        {
+          id: 1,
+          name: 'Renekton',
+          desc:
+            'Renekton Toplaner Renekton Toplaner Renekton Toplaner Renekton Toplaner Renekton Toplaner ',
+          status: 'open',
+          owner: false,
+        },
+        {
+          id: 2,
+          name: 'Twitch',
+          desc: 'Twitch ADC',
+          status: 'close',
+          owner: true,
+        },
+        {
+          id: 3,
+          name: 'Blitz',
+          desc: 'Blitz Support',
+          status: 'hidden',
+          owner: true,
+        },
+      ],
     }
+  },
 }
 </script>

From 46d26a0ef8ab16b32662e53f763e25fc676b6037 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 14 Aug 2022 11:45:33 +0200
Subject: [PATCH 06/55] add graphql groups, add createGroup mutation

---
 webapp/components/GroupForm/GroupForm.vue |  41 +++++----
 webapp/graphql/groups.js                  | 107 ++++++++++++++++++++++
 webapp/pages/group/create.vue             |  40 +++++++-
 3 files changed, 171 insertions(+), 17 deletions(-)
 create mode 100644 webapp/graphql/groups.js

diff --git a/webapp/components/GroupForm/GroupForm.vue b/webapp/components/GroupForm/GroupForm.vue
index 703adc45c..2cbc67464 100644
--- a/webapp/components/GroupForm/GroupForm.vue
+++ b/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')
     },
   },
 }
diff --git a/webapp/graphql/groups.js b/webapp/graphql/groups.js
new file mode 100644
index 000000000..c41f06e4d
--- /dev/null
+++ b/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
+      # }
+    }
+  }
+`
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index e82fadd6e..c76be5360 100644
--- a/webapp/pages/group/create.vue
+++ b/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>

From c2a769f325c98665f97ebb1366a7e85ddec70f51 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 14 Aug 2022 12:49:15 +0200
Subject: [PATCH 07/55] add CategoriesSelect in GroupForm.vue

---
 webapp/components/GroupForm/GroupForm.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/webapp/components/GroupForm/GroupForm.vue b/webapp/components/GroupForm/GroupForm.vue
index 2cbc67464..8e29bf300 100644
--- a/webapp/components/GroupForm/GroupForm.vue
+++ b/webapp/components/GroupForm/GroupForm.vue
@@ -14,9 +14,13 @@
 
         <ds-input v-model="form.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>
 
         <ds-space margin-top="large">
           <ds-button @click.prevent="reset()">Reset form</ds-button>
@@ -39,19 +43,18 @@ export default {
     CategoriesSelect,
   },
   props:{
-    value: {
-      type: Object,
-       default: () => ({}),
-      required: true,
-    }
+    model: { type: String, required: true },
+    value: { type: String, default: '' },
   },
   data() {
     return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
       form: {
         name: '',
         status: '',
         description: '',
         disable: false,
+        categoryIds: [],
       }
       
     }

From 936ecf247728456ddc42bb5d3959c79ba03e4bca Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 15 Aug 2022 15:35:33 +0200
Subject: [PATCH 08/55] add mutation createGroup and query GroupList

---
 .../CategoriesSelect/CategoriesSelect.vue     |  1 +
 webapp/components/GroupForm/GroupForm.vue     | 91 ++++++++++++-----
 webapp/components/GroupList/GroupCard.vue     | 28 +++---
 webapp/components/GroupList/GroupList.vue     |  5 +-
 webapp/components/GroupMember/GroupMember.vue | 98 +++++++++----------
 webapp/graphql/groups.js                      | 16 +--
 webapp/pages/group/_id.vue                    | 17 ++--
 webapp/pages/group/_id/_slug.vue              |  6 +-
 webapp/pages/group/create.vue                 | 43 ++++----
 webapp/pages/my-groups.vue                    | 21 +++-
 10 files changed, 183 insertions(+), 143 deletions(-)

diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index b7d71de2d..1fb95a8db 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/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)
diff --git a/webapp/components/GroupForm/GroupForm.vue b/webapp/components/GroupForm/GroupForm.vue
index 8e29bf300..d52fea0c4 100644
--- a/webapp/components/GroupForm/GroupForm.vue
+++ b/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')
diff --git a/webapp/components/GroupList/GroupCard.vue b/webapp/components/GroupList/GroupCard.vue
index 4ae9f807f..f3ff5fab0 100644
--- a/webapp/components/GroupList/GroupCard.vue
+++ b/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() {
diff --git a/webapp/components/GroupList/GroupList.vue b/webapp/components/GroupList/GroupList.vue
index 69df8acb7..d16b208de 100644
--- a/webapp/components/GroupList/GroupList.vue
+++ b/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>
diff --git a/webapp/components/GroupMember/GroupMember.vue b/webapp/components/GroupMember/GroupMember.vue
index f83b00685..16f4ebecf 100644
--- a/webapp/components/GroupMember/GroupMember.vue
+++ b/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>
diff --git a/webapp/graphql/groups.js b/webapp/graphql/groups.js
index c41f06e4d..579380b24 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
@@ -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
-      # }
     }
   }
 `
diff --git a/webapp/pages/group/_id.vue b/webapp/pages/group/_id.vue
index 7ce25e827..6e8eed4b4 100644
--- a/webapp/pages/group/_id.vue
+++ b/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>
\ No newline at end of file
+  <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>
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index 36f2ccb2b..88c4b85c6 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -1,6 +1,6 @@
 <template>
-<div>
+  <div>
     <ds-space />
-    Group Page 
-</div>    
+    Group Page
+  </div>
 </template>
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index c76be5360..4526188d7 100644
--- a/webapp/pages/group/create.vue
+++ b/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,
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index 81843f5d2..7095289fd 100644
--- a/webapp/pages/my-groups.vue
+++ b/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>

From bfe6605b2195c7eec3cd5a937bbd0e15a520b3d7 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 5 Sep 2022 11:17:31 +0200
Subject: [PATCH 09/55] list upgrade database datas

---
 webapp/components/GroupForm/GroupForm.vue |  2 +-
 webapp/components/GroupList/GroupList.vue | 13 +++-----
 webapp/pages/my-groups.vue                | 39 +++--------------------
 3 files changed, 9 insertions(+), 45 deletions(-)

diff --git a/webapp/components/GroupForm/GroupForm.vue b/webapp/components/GroupForm/GroupForm.vue
index d52fea0c4..41348278e 100644
--- a/webapp/components/GroupForm/GroupForm.vue
+++ b/webapp/components/GroupForm/GroupForm.vue
@@ -17,7 +17,7 @@
         <ds-select
           icon="user"
           v-model="formData.status"
-          label="Status"
+          label="Sichtbarkeit"
           :options="['offen', 'geschlossen', 'geheim']"
           placeholder="Status ..."
         ></ds-select>
diff --git a/webapp/components/GroupList/GroupList.vue b/webapp/components/GroupList/GroupList.vue
index d16b208de..5d98ed182 100644
--- a/webapp/components/GroupList/GroupList.vue
+++ b/webapp/components/GroupList/GroupList.vue
@@ -2,6 +2,7 @@
   <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
@@ -13,8 +14,8 @@
         <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>
+        <template slot="categories" slot-scope="scope">
+          <ds-tag v-for="categorie in categories" :key="categorie.id" :color="status">{{ categorie.name }}</ds-tag>
         </template>
         <template slot="edit" slot-scope="scope">
           <base-button
@@ -46,12 +47,6 @@ export default {
       alert('unfollow group')
     },
   },
-  computed: {
-    status(state) {
-      console.log(state)
-      // if (scope === 'hidden') return 'danger'
-      return 'inverse'
-    },
-  },
+  computed: {},
 }
 </script>
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index 7095289fd..22b8df4e2 100644
--- a/webapp/pages/my-groups.vue
+++ b/webapp/pages/my-groups.vue
@@ -2,10 +2,10 @@
   <div>
     <div>my groups</div>
     <group-teaser />
-    <group-list :items="items" :fields="fields" />
+    <group-list :items="responseGroupListQuery" :fields="fields" />
     <br />
     <br />
-    <group-card :items="items" :responseGroupListQuery="responseGroupListQuery" />
+    <group-card :items="responseGroupListQuery" />
   </div>
 </template>
 <script>
@@ -30,38 +30,7 @@ export default {
   data() {
     return {
       responseGroupListQuery: [],
-      fields: ['delete', 'name', 'desc', 'status', 'edit'],
-      items: [
-        {
-          id: 0,
-          name: 'Rengar',
-          desc: 'Rengar Jungler Rengar Jungler Rengar Jungler Rengar Jungler Rengar Jungler ',
-          status: 'open',
-          owner: true,
-        },
-        {
-          id: 1,
-          name: 'Renekton',
-          desc:
-            'Renekton Toplaner Renekton Toplaner Renekton Toplaner Renekton Toplaner Renekton Toplaner ',
-          status: 'open',
-          owner: false,
-        },
-        {
-          id: 2,
-          name: 'Twitch',
-          desc: 'Twitch ADC',
-          status: 'close',
-          owner: true,
-        },
-        {
-          id: 3,
-          name: 'Blitz',
-          desc: 'Blitz Support',
-          status: 'hidden',
-          owner: true,
-        },
-      ],
+      fields: ['delete', 'name', 'about', 'categories', 'edit'],
     }
   },
   methods: {
@@ -70,7 +39,7 @@ export default {
         const response = await this.$apollo.query({
           query: groupQuery,
         })
-        this.responseGroupListQuery = response.data
+        this.responseGroupListQuery = response.data.Group
       } catch (error) {
         this.responseGroupListQuery = []
       } finally {

From 5f7b1c90949730592afb41259ea5187a76eaf46a Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 5 Sep 2022 13:26:00 +0200
Subject: [PATCH 10/55] new group mutation with correct data

---
 webapp/components/GroupForm/GroupForm.vue | 24 ++++++++++++++++++++---
 webapp/pages/group/create.vue             | 16 ++++++++-------
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/webapp/components/GroupForm/GroupForm.vue b/webapp/components/GroupForm/GroupForm.vue
index 41348278e..7b72b8616 100644
--- a/webapp/components/GroupForm/GroupForm.vue
+++ b/webapp/components/GroupForm/GroupForm.vue
@@ -18,10 +18,16 @@
           icon="user"
           v-model="formData.status"
           label="Sichtbarkeit"
-          :options="['offen', 'geschlossen', 'geheim']"
+          :options="['public', 'close', 'hidden']"
           placeholder="Status ..."
         ></ds-select>
 
+        <ds-input
+          v-model="formData.about"
+          label="Kurzbeschreibung"
+          rows="3"
+        ></ds-input>
+
         <ds-input
           v-model="formData.description"
           label="Beschreibung"
@@ -29,6 +35,14 @@
           rows="3"
         ></ds-input>
 
+        <ds-select
+          icon="card"
+          v-model="formData.radius"
+          label="Radius"
+          :options="['local', 'regional', 'global']"
+          placeholder="Radius ..."
+        ></ds-select>
+
         <categories-select
           v-if="categoriesActive"
           model="formData.categoryIds"
@@ -72,20 +86,24 @@ export default {
     },
   },
   data() {
-    const { name, status, description, categories } = this.group
+    const { name, status, about, description, radius, categories } = this.group
     return {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
       disabled: false,
       formData: {
         name: name || '',
         status: status || '',
+        about: about || '',
         description: description || '',
+        radius: radius || '',
         categoryIds: categories ? categories.map((category) => category.id) : [],
       },
       formSchema: {
         name: { required: true, min: 3, max: 100 },
-        description: { required: true },
         status: { required: true },
+        about: { required: true },
+        description: { required: true },
+        radius: { required: true },
         categoryIds: {
           type: 'array',
           required: this.categoriesActive,
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index 4526188d7..eddeb7345 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -28,17 +28,19 @@ 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,
           variables: {
-            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'],
+            name: form.name,
+            about: form.about,
+            description: form.description,
+            groupType: form.status,
+            actionRadius: form.radius,
+            categoryIds: form.formData.categoryIds,
           },
           update: (_, { data: { createGroupData } }) => {
             // const { sendNotificationEmails } = createGroup

From 228a676cd5ff47a80c3b6c4652926434bfe4f257 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 6 Sep 2022 12:20:25 +0200
Subject: [PATCH 11/55] fix locales

---
 webapp/locales/de.json | 8 ++++----
 webapp/locales/en.json | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 9bc66a337..0dbcb8486 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -370,7 +370,7 @@
     "following": "Folge Ich"
   },
   "group": {
-    "newGroup":"Erstelle eine neue Gruppe"
+    "newGroup": "Erstelle eine neue Gruppe"
   },
   "hashtags-filter": {
     "clearSearch": "Suche löschen",
@@ -720,6 +720,9 @@
         }
       }
     },
+    "groups": {
+      "name": "Meine Gruppen"
+    },
     "invites": {
       "name": "Einladungen"
     },
@@ -744,9 +747,6 @@
       "unmute": "Stummschaltung aufheben",
       "unmuted": "{name} ist nicht mehr stummgeschaltet"
     },
-    "groups": {
-      "name":"Meine Gruppen"
-    },
     "name": "Einstellungen",
     "notifications": {
       "name": "Benachrichtigungen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 7c0df0101..635ee9f3a 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -370,7 +370,7 @@
     "following": "Following"
   },
   "group": {
-    "newGroup":"Create a new Group"
+    "newGroup": "Create a new Group"
   },
   "hashtags-filter": {
     "clearSearch": "Clear search",
@@ -720,6 +720,9 @@
         }
       }
     },
+    "groups": {
+      "name": "My Groups"
+    },
     "invites": {
       "name": "Invites"
     },
@@ -744,9 +747,6 @@
       "unmute": "Unmute user",
       "unmuted": "{name} is unmuted again"
     },
-    "groups": {
-      "name":"My Groups"
-    },
     "name": "Settings",
     "notifications": {
       "name": "Notifications",

From ab662db0e4e29acd1496856c16989053415f7ca1 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 6 Sep 2022 18:46:47 +0200
Subject: [PATCH 12/55] empty array as input only clears all saved categories

---
 backend/src/schema/resolvers/users.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/backend/src/schema/resolvers/users.js b/backend/src/schema/resolvers/users.js
index 23a39a2a1..12f00ffb6 100644
--- a/backend/src/schema/resolvers/users.js
+++ b/backend/src/schema/resolvers/users.js
@@ -286,6 +286,10 @@ export default {
           { id },
         )
       })
+
+      // frontend gives [] when all categories are selected (default)
+      if (activeCategories.length === 0) return true
+
       const writeTxResultPromise = session.writeTransaction(async (transaction) => {
         const saveCategorySettingsResponse = await transaction.run(
           `

From 523d290ff8d63186d8f4368bea7224d83637a789 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 6 Sep 2022 18:50:05 +0200
Subject: [PATCH 13/55] add save icon

---
 webapp/assets/_new/icons/svgs/save.svg | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 webapp/assets/_new/icons/svgs/save.svg

diff --git a/webapp/assets/_new/icons/svgs/save.svg b/webapp/assets/_new/icons/svgs/save.svg
new file mode 100644
index 000000000..31c1d8459
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/save.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>save</title>
+<path d="M5 5h17.406l0.313 0.281 4 4 0.281 0.313v17.406h-22v-22zM7 7v18h2v-9h14v9h2v-14.563l-3-3v5.563h-12v-6h-3zM12 7v4h8v-4h-2v2h-2v-2h-4zM11 18v7h10v-7h-10z"></path>
+</svg>

From d4c338e04efbd1d62a166371bf74cef557bdfd43 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 6 Sep 2022 18:50:33 +0200
Subject: [PATCH 14/55] add save categories mutation

---
 webapp/graphql/SaveCategories.js | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 webapp/graphql/SaveCategories.js

diff --git a/webapp/graphql/SaveCategories.js b/webapp/graphql/SaveCategories.js
new file mode 100644
index 000000000..6154dacbc
--- /dev/null
+++ b/webapp/graphql/SaveCategories.js
@@ -0,0 +1,9 @@
+import gql from 'graphql-tag'
+
+export default () => {
+  return gql`
+    mutation($activeCategories: [String]) {
+      saveCategorySettings(activeCategories: $activeCategories)
+    }
+  `
+}

From d45ad17b4324907ef02a4330f496f28e0ea35834 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 6 Sep 2022 18:51:20 +0200
Subject: [PATCH 15/55] add save button to category filters

---
 .../components/FilterMenu/CategoriesFilter.vue   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/webapp/components/FilterMenu/CategoriesFilter.vue b/webapp/components/FilterMenu/CategoriesFilter.vue
index 47e4bcc10..6ed37d4b3 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.vue
+++ b/webapp/components/FilterMenu/CategoriesFilter.vue
@@ -7,6 +7,8 @@
         icon="check"
         @click="resetCategories"
       />
+      <hr />
+      <labeled-button filled :label="$t('actions.save')" icon="save" @click="saveCategories" />
     </template>
     <template #filter-list>
       <li v-for="category in categories" :key="category.id" class="item">
@@ -24,6 +26,7 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import CategoryQuery from '~/graphql/CategoryQuery.js'
+import SaveCategories from '~/graphql/SaveCategories.js'
 import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
 import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 
@@ -47,6 +50,19 @@ export default {
       resetCategories: 'posts/RESET_CATEGORIES',
       toggleCategory: 'posts/TOGGLE_CATEGORY',
     }),
+    saveCategories() {
+      this.$apollo
+        .mutate({
+          mutation: SaveCategories(),
+          variables: { activeCategories: this.filteredCategoryIds },
+        })
+        .then(() => {
+          this.$toast.success(this.$t('filter-menu.save.success'))
+        })
+        .catch(() => {
+          this.$toast.error(this.$t('filter-menu.save.error'))
+        })
+    },
   },
   apollo: {
     Category: {

From dcdef615c1f299bc9bd4f24f7be07d6de15ad49a Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 6 Sep 2022 18:51:55 +0200
Subject: [PATCH 16/55] add locales for saving categories

---
 webapp/locales/de.json | 6 +++++-
 webapp/locales/en.json | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index b17e47d08..0a21f0a4d 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -363,7 +363,11 @@
         "label": "Älteste zuerst"
       }
     },
-    "order-by": "Sortieren nach ..."
+    "order-by": "Sortieren nach ...",
+    "save": {
+      "error": "Themen konnten nicht gespeichert werden",
+      "success": "Themen gespeichert!"
+    }
   },
   "followButton": {
     "follow": "Folgen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 8587d9da5..22fa73593 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -363,7 +363,11 @@
         "label": "Oldest first"
       }
     },
-    "order-by": "Order by ..."
+    "order-by": "Order by ...",
+    "save": {
+      "error": "Failed saving topic settings",
+      "success": "Topics saved!"
+    }
   },
   "followButton": {
     "follow": "Follow",

From 3213bd3ee469afaa39b3ce98ddd2dc292871bf15 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 6 Sep 2022 19:17:06 +0200
Subject: [PATCH 17/55] test save categories

---
 .../FilterMenu/CategoriesFilter.spec.js       | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/webapp/components/FilterMenu/CategoriesFilter.spec.js b/webapp/components/FilterMenu/CategoriesFilter.spec.js
index ef0f2ad90..813f7b33c 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.spec.js
+++ b/webapp/components/FilterMenu/CategoriesFilter.spec.js
@@ -15,8 +15,19 @@ describe('CategoriesFilter.vue', () => {
     'posts/filteredCategoryIds': jest.fn(() => []),
   }
 
+  const apolloMutationMock = jest.fn().mockResolvedValue({
+    data: { saveCategorySettings: true },
+  })
+
   const mocks = {
     $t: jest.fn((string) => string),
+    $apollo: {
+      mutate: apolloMutationMock,
+    },
+    $toast: {
+      success: jest.fn(),
+      error: jest.fn(),
+    },
   }
 
   const Wrapper = () => {
@@ -76,5 +87,14 @@ describe('CategoriesFilter.vue', () => {
         expect(mutations['posts/RESET_CATEGORIES']).toHaveBeenCalledTimes(1)
       })
     })
+
+    describe('save categories', () => {
+      it('calls the API', async () => {
+        wrapper = await Wrapper()
+        const saveButton = wrapper.findAll('.categories-filter .sidebar .base-button').at(1)
+        saveButton.trigger('click')
+        expect(apolloMutationMock).toBeCalled()
+      })
+    })
   })
 })

From 341e3862074ec1f16789dc43961938047eb9e850 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 7 Sep 2022 13:37:48 +0200
Subject: [PATCH 18/55] linting

---
 webapp/graphql/SaveCategories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/graphql/SaveCategories.js b/webapp/graphql/SaveCategories.js
index 6154dacbc..d6db34b8a 100644
--- a/webapp/graphql/SaveCategories.js
+++ b/webapp/graphql/SaveCategories.js
@@ -2,7 +2,7 @@ import gql from 'graphql-tag'
 
 export default () => {
   return gql`
-    mutation($activeCategories: [String]) {
+    mutation ($activeCategories: [String]) {
       saveCategorySettings(activeCategories: $activeCategories)
     }
   `

From d05919fddb212988fa3c0e463530f702d27ad7e6 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 7 Sep 2022 14:08:03 +0200
Subject: [PATCH 19/55] add active categories to current user query

---
 webapp/graphql/User.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webapp/graphql/User.js b/webapp/graphql/User.js
index f16323073..053cb022f 100644
--- a/webapp/graphql/User.js
+++ b/webapp/graphql/User.js
@@ -285,6 +285,7 @@ export const currentUserQuery = gql`
         id
         url
       }
+      activeCategories
     }
   }
 `

From 18e15be24d503791740af93ee1a05f7471759ecf Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 7 Sep 2022 14:09:24 +0200
Subject: [PATCH 20/55] active categories is array of string (ids of
 categories), current user query resolves with active categories

---
 backend/src/schema/resolvers/user_management.js | 5 +++--
 backend/src/schema/types/type/User.gql          | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/backend/src/schema/resolvers/user_management.js b/backend/src/schema/resolvers/user_management.js
index beb2cddb3..9eea67108 100644
--- a/backend/src/schema/resolvers/user_management.js
+++ b/backend/src/schema/resolvers/user_management.js
@@ -20,8 +20,9 @@ export default {
         const result = await transaction.run(
           `
             MATCH (user:User {id: $id})
-            WITH user, [(user)<-[:OWNED_BY]-(medium:SocialMedia) | properties(medium) ] as media
-            RETURN user {.*, socialMedia: media } as user
+            MATCH (category:Category) WHERE NOT ((user)-[:NOT_INTERESTED_IN]->(category))
+            WITH user, [(user)<-[:OWNED_BY]-(medium:SocialMedia) | properties(medium) ] as media, category
+            RETURN user {.*, socialMedia: media, activeCategories: collect(category.id) } as user
           `,
           { id: user.id },
         )
diff --git a/backend/src/schema/types/type/User.gql b/backend/src/schema/types/type/User.gql
index d2ac79037..c3fcf932b 100644
--- a/backend/src/schema/types/type/User.gql
+++ b/backend/src/schema/types/type/User.gql
@@ -115,11 +115,11 @@ type User {
 
   emotions: [EMOTED]
 
-  activeCategories: [Category] @cypher(
+  activeCategories: [String] @cypher(
   statement: """
   MATCH (category:Category)
   WHERE NOT ((this)-[:NOT_INTERESTED_IN]->(category))
-  RETURN category
+  RETURN collect(category.id)
   """
   )
 }

From bcaeee44faa4752f09db5bd24ab26e4bbc36661f Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 7 Sep 2022 14:12:53 +0200
Subject: [PATCH 21/55] adopt active categories as array of ids

---
 backend/src/schema/resolvers/users.spec.js | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/backend/src/schema/resolvers/users.spec.js b/backend/src/schema/resolvers/users.spec.js
index 7116d2201..d8fce3b29 100644
--- a/backend/src/schema/resolvers/users.spec.js
+++ b/backend/src/schema/resolvers/users.spec.js
@@ -602,9 +602,7 @@ describe('save category settings', () => {
     const userQuery = gql`
       query ($id: ID) {
         User(id: $id) {
-          activeCategories {
-            id
-          }
+          activeCategories
         }
       }
     `
@@ -631,11 +629,7 @@ describe('save category settings', () => {
               data: {
                 User: [
                   {
-                    activeCategories: expect.arrayContaining([
-                      { id: 'cat1' },
-                      { id: 'cat3' },
-                      { id: 'cat5' },
-                    ]),
+                    activeCategories: expect.arrayContaining(['cat1', 'cat3', 'cat5']),
                   },
                 ],
               },
@@ -678,11 +672,11 @@ describe('save category settings', () => {
                 User: [
                   {
                     activeCategories: expect.arrayContaining([
-                      { id: 'cat10' },
-                      { id: 'cat11' },
-                      { id: 'cat12' },
-                      { id: 'cat8' },
-                      { id: 'cat9' },
+                      'cat10',
+                      'cat11',
+                      'cat12',
+                      'cat8',
+                      'cat9',
                     ]),
                   },
                 ],

From 860949dc6a3f6cc57c8bd83c9fb49bf34c1c9d8d Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 7 Sep 2022 15:00:04 +0200
Subject: [PATCH 22/55] test current user query for active categories

---
 .../src/schema/resolvers/user_management.js   |  2 +-
 .../schema/resolvers/user_management.spec.js  | 45 +++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/backend/src/schema/resolvers/user_management.js b/backend/src/schema/resolvers/user_management.js
index 9eea67108..71517dd05 100644
--- a/backend/src/schema/resolvers/user_management.js
+++ b/backend/src/schema/resolvers/user_management.js
@@ -20,7 +20,7 @@ export default {
         const result = await transaction.run(
           `
             MATCH (user:User {id: $id})
-            MATCH (category:Category) WHERE NOT ((user)-[:NOT_INTERESTED_IN]->(category))
+            OPTIONAL MATCH (category:Category) WHERE NOT ((user)-[:NOT_INTERESTED_IN]->(category))
             WITH user, [(user)<-[:OWNED_BY]-(medium:SocialMedia) | properties(medium) ] as media, category
             RETURN user {.*, socialMedia: media, activeCategories: collect(category.id) } as user
           `,
diff --git a/backend/src/schema/resolvers/user_management.spec.js b/backend/src/schema/resolvers/user_management.spec.js
index 264cf2752..4e0cfaa14 100644
--- a/backend/src/schema/resolvers/user_management.spec.js
+++ b/backend/src/schema/resolvers/user_management.spec.js
@@ -6,6 +6,7 @@ import { createTestClient } from 'apollo-server-testing'
 import createServer, { context } from '../../server'
 import encode from '../../jwt/encode'
 import { getNeode } from '../../db/neo4j'
+import { categories } from '../../constants/categories'
 
 const neode = getNeode()
 let query, mutate, variables, req, user
@@ -118,6 +119,7 @@ describe('currentUser', () => {
         }
         email
         role
+        activeCategories
       }
     }
   `
@@ -172,6 +174,49 @@ describe('currentUser', () => {
         }
         await respondsWith(expected)
       })
+
+      describe('with categories in DB', () => {
+        beforeEach(async () => {
+          await Promise.all(
+            categories.map(async ({ icon, name }, index) => {
+              await Factory.build('category', {
+                id: `cat${index + 1}`,
+                slug: name,
+                name,
+                icon,
+              })
+            }),
+          )
+        })
+
+        it('returns all categories', async () => {
+          const result = await query({ query: currentUserQuery, variables })
+          expect(result.data.currentUser.activeCategories).toHaveLength(categories.length)
+        })
+
+        describe('with categories saved for current user', () => {
+          const saveCategorySettings = gql`
+            mutation ($activeCategories: [String]) {
+              saveCategorySettings(activeCategories: $activeCategories)
+            }
+          `
+          beforeEach(async () => {
+            await mutate({
+              mutation: saveCategorySettings,
+              variables: { activeCategories: ['cat1', 'cat3', 'cat5', 'cat7'] },
+            })
+          })
+
+          it('returns only the saved active categories', async () => {
+            const result = await query({ query: currentUserQuery, variables })
+            expect(result.data.currentUser.activeCategories).toHaveLength(4)
+            expect(result.data.currentUser.activeCategories).toContain('cat1')
+            expect(result.data.currentUser.activeCategories).toContain('cat3')
+            expect(result.data.currentUser.activeCategories).toContain('cat5')
+            expect(result.data.currentUser.activeCategories).toContain('cat7')
+          })
+        })
+      })
     })
   })
 })

From 5596cd11e90408fac712b8de54bbcb3dc6a195d8 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 7 Sep 2022 15:13:14 +0200
Subject: [PATCH 23/55] test saving active categories

---
 webapp/store/auth.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/webapp/store/auth.js b/webapp/store/auth.js
index 4ef63e3ea..0147b97ac 100644
--- a/webapp/store/auth.js
+++ b/webapp/store/auth.js
@@ -3,6 +3,7 @@ import { VERSION } from '~/constants/terms-and-conditions-version.js'
 import { currentUserQuery } from '~/graphql/User'
 import Cookie from 'universal-cookie'
 import metadata from '~/constants/metadata'
+import { mutations as postMutations } from './posts.js'
 
 const cookies = new Cookie()
 
@@ -16,6 +17,9 @@ export const state = () => {
 
 export const mutations = {
   SET_USER(state, user) {
+    if (user.activeCategories) {
+      console.log(user.activeCategories)
+    }
     state.user = user || null
   },
   SET_TOKEN(state, token) {

From a65e306b85ebac8b705a79b430fd87698c4170a8 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 7 Sep 2022 16:04:09 +0200
Subject: [PATCH 24/55] all categories saved returns empty array

---
 backend/src/schema/resolvers/user_management.js   | 15 ++++++++++-----
 .../src/schema/resolvers/user_management.spec.js  |  9 ++++++---
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/backend/src/schema/resolvers/user_management.js b/backend/src/schema/resolvers/user_management.js
index 71517dd05..d88eafdae 100644
--- a/backend/src/schema/resolvers/user_management.js
+++ b/backend/src/schema/resolvers/user_management.js
@@ -21,16 +21,21 @@ export default {
           `
             MATCH (user:User {id: $id})
             OPTIONAL MATCH (category:Category) WHERE NOT ((user)-[:NOT_INTERESTED_IN]->(category))
-            WITH user, [(user)<-[:OWNED_BY]-(medium:SocialMedia) | properties(medium) ] as media, category
-            RETURN user {.*, socialMedia: media, activeCategories: collect(category.id) } as user
+            OPTIONAL MATCH (cats:Category)
+            WITH user, [(user)<-[:OWNED_BY]-(medium:SocialMedia) | properties(medium) ] AS media, category, toString(COUNT(cats)) AS categoryCount
+            RETURN user {.*, socialMedia: media, activeCategories: collect(category.id) } AS user, categoryCount
           `,
           { id: user.id },
         )
-        log(result)
-        return result.records.map((record) => record.get('user'))
+        const [categoryCount] = result.records.map((record) => record.get('categoryCount'))
+        const [currentUser] = result.records.map((record) => record.get('user'))
+        // frontend expects empty array when all categories are selected
+        if (currentUser.activeCategories.length === parseInt(categoryCount))
+          currentUser.activeCategories = []
+        return currentUser
       })
       try {
-        const [currentUser] = await currentUserTransactionPromise
+        const currentUser = await currentUserTransactionPromise
         return currentUser
       } finally {
         session.close()
diff --git a/backend/src/schema/resolvers/user_management.spec.js b/backend/src/schema/resolvers/user_management.spec.js
index 4e0cfaa14..e7f2f3ed1 100644
--- a/backend/src/schema/resolvers/user_management.spec.js
+++ b/backend/src/schema/resolvers/user_management.spec.js
@@ -189,9 +189,12 @@ describe('currentUser', () => {
           )
         })
 
-        it('returns all categories', async () => {
-          const result = await query({ query: currentUserQuery, variables })
-          expect(result.data.currentUser.activeCategories).toHaveLength(categories.length)
+        it('returns empty array for all categories', async () => {
+          await respondsWith({
+            data: {
+              currentUser: expect.objectContaining({ activeCategories: [] }),
+            },
+          })
         })
 
         describe('with categories saved for current user', () => {

From b323d0f5806f8afc52688cbfa8aee43d89d4bba1 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 7 Sep 2022 20:19:10 +0200
Subject: [PATCH 25/55] set category filter as stored in db after login

---
 webapp/components/LoginForm/LoginForm.vue | 17 +++++++++++++++++
 webapp/store/auth.js                      |  4 ----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index 0d85ca33a..ce2f3338b 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -58,6 +58,7 @@ import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParams
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
 import ShowPassword from '../ShowPassword/ShowPassword.vue'
+import { mapGetters, mapMutations } from 'vuex'
 
 export default {
   components: {
@@ -84,12 +85,28 @@ export default {
     iconName() {
       return this.showPassword ? 'eye-slash' : 'eye'
     },
+    ...mapGetters({
+      currentUser: 'auth/user',
+    }),
   },
   methods: {
+    ...mapMutations({
+      toggleCategory: 'posts/TOGGLE_CATEGORY',
+      resetCategories: 'posts/RESET_CATEGORIES',
+    }),
     async onSubmit() {
       const { email, password } = this.form
       try {
         await this.$store.dispatch('auth/login', { email, password })
+        if (this.currentUser && this.currentUser.activeCategories) {
+          if (this.currentUser.activeCategories.length > 0) {
+            this.currentUser.activeCategories.forEach((categoryId) => {
+              this.toggleCategory(categoryId)
+            })
+          } else {
+            this.resetCategories()
+          }
+        }
         this.$toast.success(this.$t('login.success'))
         this.$emit('success')
       } catch (err) {
diff --git a/webapp/store/auth.js b/webapp/store/auth.js
index 0147b97ac..4ef63e3ea 100644
--- a/webapp/store/auth.js
+++ b/webapp/store/auth.js
@@ -3,7 +3,6 @@ import { VERSION } from '~/constants/terms-and-conditions-version.js'
 import { currentUserQuery } from '~/graphql/User'
 import Cookie from 'universal-cookie'
 import metadata from '~/constants/metadata'
-import { mutations as postMutations } from './posts.js'
 
 const cookies = new Cookie()
 
@@ -17,9 +16,6 @@ export const state = () => {
 
 export const mutations = {
   SET_USER(state, user) {
-    if (user.activeCategories) {
-      console.log(user.activeCategories)
-    }
     state.user = user || null
   },
   SET_TOKEN(state, token) {

From 754251258dd29c0e0522f1ae13e5d14b30c99dee Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 7 Sep 2022 21:50:37 +0200
Subject: [PATCH 26/55] test setting of saved categories

---
 webapp/components/LoginForm/LoginForm.spec.js | 41 +++++++++++++++++--
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.spec.js b/webapp/components/LoginForm/LoginForm.spec.js
index 430fdbe21..4dfdea50a 100644
--- a/webapp/components/LoginForm/LoginForm.spec.js
+++ b/webapp/components/LoginForm/LoginForm.spec.js
@@ -12,6 +12,8 @@ config.stubs['nuxt-link'] = '<span><slot /></span>'
 config.stubs['locale-switch'] = '<span><slot /></span>'
 config.stubs['client-only'] = '<span><slot /></span>'
 
+const authUserMock = jest.fn().mockReturnValue({ activeCategories: [] })
+
 describe('LoginForm', () => {
   let mocks
   let propsData
@@ -26,10 +28,15 @@ describe('LoginForm', () => {
       storeMocks = {
         getters: {
           'auth/pending': () => false,
+          'auth/user': authUserMock,
         },
         actions: {
           'auth/login': jest.fn(),
         },
+        mutations: {
+          'posts/TOGGLE_CATEGORY': jest.fn(),
+          'posts/RESET_CATEGORIES': jest.fn(),
+        },
       }
       const store = new Vuex.Store(storeMocks)
       mocks = {
@@ -43,20 +50,46 @@ describe('LoginForm', () => {
     }
 
     describe('fill in email and password and submit', () => {
-      const fillIn = (wrapper, opts = {}) => {
+      const fillIn = async (wrapper, opts = {}) => {
         const { email = 'email@example.org', password = '1234' } = opts
         wrapper.find('input[name="email"]').setValue(email)
         wrapper.find('input[name="password"]').setValue(password)
-        wrapper.find('form').trigger('submit')
+        await wrapper.find('form').trigger('submit')
       }
 
-      it('dispatches login with form data', () => {
-        fillIn(Wrapper())
+      it('dispatches login with form data', async () => {
+        await fillIn(Wrapper())
         expect(storeMocks.actions['auth/login']).toHaveBeenCalledWith(expect.any(Object), {
           email: 'email@example.org',
           password: '1234',
         })
       })
+
+      describe('setting saved categories', () => {
+        beforeEach(() => {
+          jest.clearAllMocks()
+        })
+
+        describe('no categories saved', () => {
+          it('resets the categories', async () => {
+            await fillIn(Wrapper())
+            expect(storeMocks.actions['auth/login']).toBeCalled()
+            expect(storeMocks.mutations['posts/RESET_CATEGORIES']).toBeCalled()
+          })
+        })
+
+        describe('categories saved', () => {
+          it('sets the categories', async () => {
+            authUserMock.mockReturnValue({ activeCategories: ['cat1', 'cat9', 'cat12'] })
+            await fillIn(Wrapper())
+            expect(storeMocks.actions['auth/login']).toBeCalled()
+            expect(storeMocks.mutations['posts/TOGGLE_CATEGORY']).toBeCalledTimes(3)
+            expect(storeMocks.mutations['posts/TOGGLE_CATEGORY']).toBeCalledWith({}, 'cat1')
+            expect(storeMocks.mutations['posts/TOGGLE_CATEGORY']).toBeCalledWith({}, 'cat9')
+            expect(storeMocks.mutations['posts/TOGGLE_CATEGORY']).toBeCalledWith({}, 'cat12')
+          })
+        })
+      })
     })
 
     describe('Visibility of password', () => {

From 99d2ce9d29c5b9ac56df437e2147a7c00b83a3e7 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 8 Sep 2022 08:35:29 +0200
Subject: [PATCH 27/55] update group data funktion

---
 .../{GroupList => Group}/GroupCard.vue        |   7 --
 .../{GroupForm => Group}/GroupForm.vue        |  27 +++--
 .../{GroupList => Group}/GroupList.vue        |  22 +++-
 .../{GroupMember => Group}/GroupMember.vue    |   0
 .../{GroupTeaser => Group}/GroupTeaser.vue    |   0
 webapp/graphql/groups.js                      |  51 +++++++-
 webapp/locales/de.json                        |  10 +-
 webapp/locales/en.json                        |  10 +-
 webapp/pages/group/create.vue                 |  14 +--
 webapp/pages/group/edit/_id.vue               | 112 ++++++++++++++++++
 webapp/pages/{ => group}/my-groups.vue        |   8 +-
 webapp/pages/settings.vue                     |   4 +-
 12 files changed, 220 insertions(+), 45 deletions(-)
 rename webapp/components/{GroupList => Group}/GroupCard.vue (89%)
 rename webapp/components/{GroupForm => Group}/GroupForm.vue (80%)
 rename webapp/components/{GroupList => Group}/GroupList.vue (65%)
 rename webapp/components/{GroupMember => Group}/GroupMember.vue (100%)
 rename webapp/components/{GroupTeaser => Group}/GroupTeaser.vue (100%)
 create mode 100644 webapp/pages/group/edit/_id.vue
 rename webapp/pages/{ => group}/my-groups.vue (78%)

diff --git a/webapp/components/GroupList/GroupCard.vue b/webapp/components/Group/GroupCard.vue
similarity index 89%
rename from webapp/components/GroupList/GroupCard.vue
rename to webapp/components/Group/GroupCard.vue
index f3ff5fab0..b3463fa21 100644
--- a/webapp/components/GroupList/GroupCard.vue
+++ b/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>
diff --git a/webapp/components/GroupForm/GroupForm.vue b/webapp/components/Group/GroupForm.vue
similarity index 80%
rename from webapp/components/GroupForm/GroupForm.vue
rename to webapp/components/Group/GroupForm.vue
index 7b72b8616..e839dbb4c 100644
--- a/webapp/components/GroupForm/GroupForm.vue
+++ b/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')
diff --git a/webapp/components/GroupList/GroupList.vue b/webapp/components/Group/GroupList.vue
similarity index 65%
rename from webapp/components/GroupList/GroupList.vue
rename to webapp/components/Group/GroupList.vue
index 5d98ed182..aa779c8b8 100644
--- a/webapp/components/GroupList/GroupList.vue
+++ b/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')
     },
diff --git a/webapp/components/GroupMember/GroupMember.vue b/webapp/components/Group/GroupMember.vue
similarity index 100%
rename from webapp/components/GroupMember/GroupMember.vue
rename to webapp/components/Group/GroupMember.vue
diff --git a/webapp/components/GroupTeaser/GroupTeaser.vue b/webapp/components/Group/GroupTeaser.vue
similarity index 100%
rename from webapp/components/GroupTeaser/GroupTeaser.vue
rename to webapp/components/Group/GroupTeaser.vue
diff --git a/webapp/graphql/groups.js b/webapp/graphql/groups.js
index 579380b24..e077c6d1f 100644
--- a/webapp/graphql/groups.js
+++ b/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
     }
   }
 `
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 0dbcb8486..04299c404 100644
--- a/webapp/locales/de.json
+++ b/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"
     },
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 635ee9f3a..9d0c4b3ee 100644
--- a/webapp/locales/en.json
+++ b/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"
     },
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index eddeb7345..335ec546c 100644
--- a/webapp/pages/group/create.vue
+++ b/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) {
diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
new file mode 100644
index 000000000..00d9996da
--- /dev/null
+++ b/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>
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/group/my-groups.vue
similarity index 78%
rename from webapp/pages/my-groups.vue
rename to webapp/pages/group/my-groups.vue
index 22b8df4e2..7c3f18009 100644
--- a/webapp/pages/my-groups.vue
+++ b/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: {
diff --git a/webapp/pages/settings.vue b/webapp/pages/settings.vue
index c0a145306..96ea66976 100644
--- a/webapp/pages/settings.vue
+++ b/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'),

From fe6ad2cff3097462f5ae76dacb516c0be891eac1 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 8 Sep 2022 09:55:58 +0200
Subject: [PATCH 28/55] add better seed for group myRole

---
 backend/src/db/seed.js                | 50 +++++++++++----------------
 webapp/components/Group/GroupForm.vue | 16 ++++-----
 webapp/components/Group/GroupList.vue | 21 +++++++----
 webapp/graphql/groups.js              |  2 +-
 webapp/pages/group/edit/_id.vue       | 45 ++++++++++++------------
 webapp/pages/group/my-groups.vue      |  5 +--
 6 files changed, 69 insertions(+), 70 deletions(-)

diff --git a/backend/src/db/seed.js b/backend/src/db/seed.js
index b516ca529..632aa8f4d 100644
--- a/backend/src/db/seed.js
+++ b/backend/src/db/seed.js
@@ -325,13 +325,6 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
           userId: 'u2',
         },
       }),
-      mutate({
-        mutation: joinGroupMutation,
-        variables: {
-          groupId: 'g0',
-          userId: 'u3',
-        },
-      }),
       mutate({
         mutation: joinGroupMutation,
         variables: {
@@ -364,14 +357,6 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
           roleInGroup: 'admin',
         },
       }),
-      mutate({
-        mutation: changeGroupMemberRoleMutation,
-        variables: {
-          groupId: 'g0',
-          userId: 'u3',
-          roleInGroup: 'owner',
-        },
-      }),
     ])
 
     authenticatedUser = await jennyRostock.toJson()
@@ -430,7 +415,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       mutate({
         mutation: changeGroupMemberRoleMutation,
         variables: {
-          groupId: 'g0',
+          groupId: 'g1',
           userId: 'u1',
           roleInGroup: 'usual',
         },
@@ -438,15 +423,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       mutate({
         mutation: changeGroupMemberRoleMutation,
         variables: {
-          groupId: 'g0',
-          userId: 'u2',
-          roleInGroup: 'usual',
-        },
-      }),
-      mutate({
-        mutation: changeGroupMemberRoleMutation,
-        variables: {
-          groupId: 'g0',
+          groupId: 'g1',
           userId: 'u5',
           roleInGroup: 'admin',
         },
@@ -454,7 +431,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       mutate({
         mutation: changeGroupMemberRoleMutation,
         variables: {
-          groupId: 'g0',
+          groupId: 'g1',
           userId: 'u6',
           roleInGroup: 'owner',
         },
@@ -477,6 +454,13 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       }),
     ])
     await Promise.all([
+      mutate({
+        mutation: joinGroupMutation,
+        variables: {
+          groupId: 'g2',
+          userId: 'u3',
+        },
+      }),
       mutate({
         mutation: joinGroupMutation,
         variables: {
@@ -510,7 +494,15 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       mutate({
         mutation: changeGroupMemberRoleMutation,
         variables: {
-          groupId: 'g0',
+          groupId: 'g2',
+          userId: 'u3',
+          roleInGroup: 'pending',
+        },
+      }),
+      mutate({
+        mutation: changeGroupMemberRoleMutation,
+        variables: {
+          groupId: 'g2',
           userId: 'u4',
           roleInGroup: 'usual',
         },
@@ -518,7 +510,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       mutate({
         mutation: changeGroupMemberRoleMutation,
         variables: {
-          groupId: 'g0',
+          groupId: 'g2',
           userId: 'u5',
           roleInGroup: 'usual',
         },
@@ -526,7 +518,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       mutate({
         mutation: changeGroupMemberRoleMutation,
         variables: {
-          groupId: 'g0',
+          groupId: 'g2',
           userId: 'u6',
           roleInGroup: 'usual',
         },
diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index e839dbb4c..be475a3ee 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <ds-container>
-      update: {{update}}
+      update: {{ update }}
       <ds-form
         class="group-form"
         ref="groupForm"
@@ -23,11 +23,7 @@
           placeholder="Status ..."
         ></ds-select>
 
-        <ds-input
-          v-model="formData.about"
-          label="Kurzbeschreibung"
-          rows="3"
-        ></ds-input>
+        <ds-input v-model="formData.about" label="Kurzbeschreibung" rows="3"></ds-input>
 
         <ds-input
           v-model="formData.description"
@@ -61,7 +57,7 @@
             :disabled="disabled"
             primary
           >
-            {{update ? $t('group.update') : $t('group.save')}}
+            {{ update ? $t('group.update') : $t('group.save') }}
           </ds-button>
         </ds-space>
       </ds-form>
@@ -93,7 +89,7 @@ export default {
     },
   },
   data() {
-    const { name, groupType, about, description, actionRadius, categories } = this.groupData
+    const { name, groupType, about, description, actionRadius, categories } = this.group
     return {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
       disabled: false,
@@ -128,7 +124,9 @@ export default {
   methods: {
     submit() {
       console.log('submit', this.formData)
-      this.update ? this.$emit('updateGroup', this.formData) : this.$emit('createGroup', this.formData)
+      this.update
+        ? this.$emit('updateGroup', this.formData)
+        : this.$emit('createGroup', this.formData)
     },
     reset() {
       console.log('reset')
diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index aa779c8b8..0473d979e 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -5,21 +5,23 @@
       <ds-table :data="items" :fields="fields">
         <template slot="delete" slot-scope="scope">
           <base-button
-            v-if="scope.row.owner"
+            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>
+          <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>
+          <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"
+            v-if="scope.row.myRole === 'owner'"
             icon="edit"
             @click="editGroup(scope.row)"
           ></base-button>
@@ -30,11 +32,15 @@
         </template>
         <template slot="unfollow" slot-scope="scope">
           <base-button
-          :disabled="!scope.row.owner ? 'disable' : false"
-            v-if="!scope.row.owner"
+            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>
@@ -58,6 +64,9 @@ export default {
     unfollowGroup() {
       alert('unfollow group')
     },
+    addMemeberToGroup() {
+      alert('addMemeberToGroup group')
+    },
   },
   computed: {},
 }
diff --git a/webapp/graphql/groups.js b/webapp/graphql/groups.js
index e077c6d1f..d83ef8dfe 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
diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index 00d9996da..308267f13 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -1,16 +1,16 @@
 <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>
+    {{ $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>
@@ -41,16 +41,14 @@ export default {
           name: 'invite link',
           path: ``,
         },
-      ]},
+      ]
+    },
     ...mapGetters({
       user: 'auth/user',
     }),
-    
   },
   data() {
-      return {
-          groupData: {},
-      }
+    return {}
   },
   async asyncData(context) {
     console.log('asyncData start')
@@ -70,21 +68,22 @@ export default {
     })
     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' })
     }
-    return { group } 
+    return { group }
   },
   methods: {
-  async updateGroup(form, context) {
-    const {
-      params: { id },
-    } = context
+    async updateGroup(form, context) {
+      const {
+        params: { id },
+      } = context
       try {
         await this.$apollo.mutate({
           mutation: updateGroupMutation,
           variables: {
-            id: params,
+            id: id,
             name: form.name,
             about: form.about,
             description: form.description,
@@ -107,6 +106,6 @@ export default {
         this.$toast.error(error.message)
       }
     },
-},
+  },
 }
 </script>
diff --git a/webapp/pages/group/my-groups.vue b/webapp/pages/group/my-groups.vue
index 7c3f18009..d8e2dfc92 100644
--- a/webapp/pages/group/my-groups.vue
+++ b/webapp/pages/group/my-groups.vue
@@ -16,8 +16,9 @@ import { groupQuery } from '~/graphql/groups.js'
 
 /*
  *
- * gruppen status: { open, close, hidden }
- *
+ * groupType: { public, closed, hidden }
+ * myRole: { pending,   usual,   admin,   owner }
+ * actionRadius { regional, national, continental,  global,   interplanetary
  *
  */
 export default {

From fb9cf7559ea4e5f50f771e3fc268781b7b823d60 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 8 Sep 2022 11:59:54 +0200
Subject: [PATCH 29/55] fix updateGroup function

---
 webapp/components/Group/GroupForm.vue |  8 ++++++--
 webapp/components/Group/GroupList.vue |  1 -
 webapp/pages/group/_id.vue            |  1 -
 webapp/pages/group/edit/_id.vue       | 22 +++-------------------
 4 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index be475a3ee..c5d997920 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -2,6 +2,8 @@
   <div>
     <ds-container>
       update: {{ update }}
+    <br />
+      this group: {{this.group}}
       <ds-form
         class="group-form"
         ref="groupForm"
@@ -89,6 +91,7 @@ export default {
     },
   },
   data() {
+    console.log('GroupForm group', this.group)
     const { name, groupType, about, description, actionRadius, categories } = this.group
     return {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
@@ -123,9 +126,10 @@ export default {
 
   methods: {
     submit() {
-      console.log('submit', this.formData)
+      console.log('submit', this.formData) 
+      const { name, about, description, actionRadius, categoryIds } = this.formData
       this.update
-        ? this.$emit('updateGroup', this.formData)
+        ? this.$emit('updateGroup', { name, about, description, actionRadius, categoryIds, id: this.group.id })
         : this.$emit('createGroup', this.formData)
     },
     reset() {
diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index 0473d979e..37b365b86 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -55,7 +55,6 @@ export default {
   },
   methods: {
     editGroup(formData) {
-      console.log('GroupListedit group', formData)
       this.$router.push({ path: `/group/edit/${formData.id}` })
     },
     deleteGroup() {
diff --git a/webapp/pages/group/_id.vue b/webapp/pages/group/_id.vue
index 6e8eed4b4..77bc3adb8 100644
--- a/webapp/pages/group/_id.vue
+++ b/webapp/pages/group/_id.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
     _id groupe page
-    <div>{{ $route.params }}</div>
     <nuxt-link :to="{ name: 'group-create' }">
       bearbeiten
       <ds-icon name="ellipsis-v"></ds-icon>
diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index 308267f13..852aaf3ba 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -1,11 +1,9 @@
 <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>
@@ -47,9 +45,6 @@ export default {
       user: 'auth/user',
     }),
   },
-  data() {
-    return {}
-  },
   async asyncData(context) {
     console.log('asyncData start')
     const {
@@ -75,23 +70,12 @@ export default {
     return { group }
   },
   methods: {
-    async updateGroup(form, context) {
-      const {
-        params: { id },
-      } = context
+    async updateGroup(value) {
+        console.log('updateGroup form', value)
       try {
         await this.$apollo.mutate({
           mutation: updateGroupMutation,
-          variables: {
-            id: id,
-            name: form.name,
-            about: form.about,
-            description: form.description,
-            // groupType: form.groupType,
-            actionRadius: form.actionRadius,
-            categoryIds: form.categoryIds,
-            // locationName: ''
-          },
+          variables: value,
           update: (_, { data: { updateGroupData } }) => {
             // const { sendNotificationEmails } = createGroup
             // this.setCreateGroup({

From 571e8fbddc1a585b6de0e381c50735112ebd9e40 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 8 Sep 2022 12:20:28 +0200
Subject: [PATCH 30/55] resolve conflicts 2

---
 webapp/graphql/groups.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/webapp/graphql/groups.js b/webapp/graphql/groups.js
index 288defd93..ff63f1a25 100644
--- a/webapp/graphql/groups.js
+++ b/webapp/graphql/groups.js
@@ -161,20 +161,12 @@ export const groupQuery = gql`
       description
       groupType
       actionRadius
-<<<<<<< HEAD
-      myRole
-=======
->>>>>>> 5059-epic-groups
       categories {
         id
         slug
         name
         icon
       }
-<<<<<<< HEAD
-      # avatar # test this as result
-      # locationName # test this as result
-=======
       avatar {
         url
       }
@@ -191,7 +183,6 @@ export const groupMembersQuery = gql`
       name
       slug
       myRoleInGroup
->>>>>>> 5059-epic-groups
     }
   }
 `

From cc5fcb6704f44f9ade66d927cebf55948498277e Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 8 Sep 2022 15:17:05 +0200
Subject: [PATCH 31/55] Update webapp/locales/de.json
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 webapp/locales/de.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 0a21f0a4d..bc0b720c8 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -365,7 +365,7 @@
     },
     "order-by": "Sortieren nach ...",
     "save": {
-      "error": "Themen konnten nicht gespeichert werden",
+      "error": "Themen konnten nicht gespeichert werden!",
       "success": "Themen gespeichert!"
     }
   },

From 2c4f45ad70f13e7019e9472e390169953d458112 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 8 Sep 2022 15:17:12 +0200
Subject: [PATCH 32/55] Update webapp/locales/en.json
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 webapp/locales/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 22fa73593..b3555378f 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -365,7 +365,7 @@
     },
     "order-by": "Order by ...",
     "save": {
-      "error": "Failed saving topic settings",
+      "error": "Failed saving topic settings!",
       "success": "Topics saved!"
     }
   },

From 60627ffcf25018ea2367af0574035435cee303c0 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 8 Sep 2022 15:34:29 +0200
Subject: [PATCH 33/55] ensure that selected categories are resteted before
 toggling them to set saved categories

---
 webapp/components/LoginForm/LoginForm.spec.js | 4 ++--
 webapp/components/LoginForm/LoginForm.vue     | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.spec.js b/webapp/components/LoginForm/LoginForm.spec.js
index 4dfdea50a..10fc2c622 100644
--- a/webapp/components/LoginForm/LoginForm.spec.js
+++ b/webapp/components/LoginForm/LoginForm.spec.js
@@ -73,8 +73,8 @@ describe('LoginForm', () => {
         describe('no categories saved', () => {
           it('resets the categories', async () => {
             await fillIn(Wrapper())
-            expect(storeMocks.actions['auth/login']).toBeCalled()
             expect(storeMocks.mutations['posts/RESET_CATEGORIES']).toBeCalled()
+            expect(storeMocks.mutations['posts/TOGGLE_CATEGORY']).not.toBeCalled()
           })
         })
 
@@ -82,7 +82,7 @@ describe('LoginForm', () => {
           it('sets the categories', async () => {
             authUserMock.mockReturnValue({ activeCategories: ['cat1', 'cat9', 'cat12'] })
             await fillIn(Wrapper())
-            expect(storeMocks.actions['auth/login']).toBeCalled()
+            expect(storeMocks.mutations['posts/RESET_CATEGORIES']).toBeCalled()
             expect(storeMocks.mutations['posts/TOGGLE_CATEGORY']).toBeCalledTimes(3)
             expect(storeMocks.mutations['posts/TOGGLE_CATEGORY']).toBeCalledWith({}, 'cat1')
             expect(storeMocks.mutations['posts/TOGGLE_CATEGORY']).toBeCalledWith({}, 'cat9')
diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index ce2f3338b..59a6d7a24 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -99,12 +99,11 @@ export default {
       try {
         await this.$store.dispatch('auth/login', { email, password })
         if (this.currentUser && this.currentUser.activeCategories) {
+          this.resetCategories()
           if (this.currentUser.activeCategories.length > 0) {
             this.currentUser.activeCategories.forEach((categoryId) => {
               this.toggleCategory(categoryId)
             })
-          } else {
-            this.resetCategories()
           }
         }
         this.$toast.success(this.$t('login.success'))

From bb0d6329e7e36ea03671318ea8dd128a6d5a5a7a Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 8 Sep 2022 16:25:18 +0200
Subject: [PATCH 34/55] add new yunite icons

---
 webapp/assets/_new/icons/svgs/culture.svg     | 20 ++++++++++
 webapp/assets/_new/icons/svgs/energy.svg      | 14 +++++++
 webapp/assets/_new/icons/svgs/finance.svg     | 13 +++++++
 webapp/assets/_new/icons/svgs/health.svg      |  7 ++++
 webapp/assets/_new/icons/svgs/media.svg       |  7 ++++
 .../assets/_new/icons/svgs/miscellaneous.svg  | 13 +++++++
 webapp/assets/_new/icons/svgs/mobility.svg    | 11 ++++++
 webapp/assets/_new/icons/svgs/movement.svg    | 39 +++++++++----------
 webapp/assets/_new/icons/svgs/nature.svg      | 18 +++++++++
 webapp/assets/_new/icons/svgs/networking.svg  | 22 +++++++++++
 webapp/assets/_new/icons/svgs/peace.svg       |  8 ++++
 webapp/assets/_new/icons/svgs/politics.svg    | 12 ++++++
 webapp/assets/_new/icons/svgs/psyche.svg      |  8 ++++
 webapp/assets/_new/icons/svgs/science.svg     | 25 ++++++++++++
 .../assets/_new/icons/svgs/spirituality.svg   | 13 +++++++
 15 files changed, 210 insertions(+), 20 deletions(-)
 create mode 100644 webapp/assets/_new/icons/svgs/culture.svg
 create mode 100644 webapp/assets/_new/icons/svgs/energy.svg
 create mode 100644 webapp/assets/_new/icons/svgs/finance.svg
 create mode 100644 webapp/assets/_new/icons/svgs/health.svg
 create mode 100644 webapp/assets/_new/icons/svgs/media.svg
 create mode 100644 webapp/assets/_new/icons/svgs/miscellaneous.svg
 create mode 100644 webapp/assets/_new/icons/svgs/mobility.svg
 create mode 100644 webapp/assets/_new/icons/svgs/nature.svg
 create mode 100644 webapp/assets/_new/icons/svgs/networking.svg
 create mode 100644 webapp/assets/_new/icons/svgs/peace.svg
 create mode 100644 webapp/assets/_new/icons/svgs/politics.svg
 create mode 100644 webapp/assets/_new/icons/svgs/psyche.svg
 create mode 100644 webapp/assets/_new/icons/svgs/science.svg
 create mode 100644 webapp/assets/_new/icons/svgs/spirituality.svg

diff --git a/webapp/assets/_new/icons/svgs/culture.svg b/webapp/assets/_new/icons/svgs/culture.svg
new file mode 100644
index 000000000..d63e38cb4
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/culture.svg
@@ -0,0 +1,20 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M5.9,25.1c-0.3,0.3-0.3,0.8,0,1.1s0.8,0.3,1.1,0c1.7-1.7,4.5-1.7,6.3,0c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2
+		c0.3-0.3,0.3-0.8,0-1.1C12,22.8,8.2,22.8,5.9,25.1z"/>
+	<path d="M24.4,8.7c0.7-0.7,2-0.7,2.7,0C27.2,8.9,27.4,9,27.6,9c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.8,0-1.1
+		c-1.3-1.3-3.5-1.3-4.8,0C23,8,23,8.5,23.3,8.7C23.6,9,24.1,9,24.4,8.7z"/>
+	<path d="M16.4,7.7c-0.3,0.3-0.3,0.8,0,1.1c0.3,0.3,0.8,0.3,1.1,0c0.7-0.7,1.9-0.7,2.7,0C20.3,8.9,20.5,9,20.7,9s0.4-0.1,0.5-0.2
+		c0.3-0.3,0.3-0.8,0-1.1C19.9,6.4,17.7,6.4,16.4,7.7z"/>
+	<path d="M31.4,0.8c-0.2-0.1-0.5-0.2-0.7-0.1c-2,0.8-5.1,1.2-8.4,1.2s-6.4-0.4-8.4-1.2c-0.2-0.1-0.5-0.1-0.7,0.1
+		c-0.2,0.1-0.3,0.4-0.3,0.6v9.9c-1,0.1-1.9,0.1-3,0.1c-3.3,0-6.4-0.4-8.4-1.2c-0.2-0.1-0.5-0.1-0.7,0.1c-0.2,0.1-0.3,0.4-0.3,0.6
+		l0,11.5c0,5.2,4.2,9.4,9.4,9.4s9.4-4.2,9.4-9.4V22c0.7,0.3,1.6,0.4,3,0.4c5.2,0,9.4-4.2,9.4-9.4V1.4C31.7,1.2,31.6,0.9,31.4,0.8z
+		 M9.9,30.4c-4.4,0-7.9-3.6-7.9-7.9V12c2.1,0.6,4.9,1,7.9,1c2.7,0,5.2-0.3,7.3-0.8l0.5-0.1c0,1.6,0,2.9,0,4c0,1.3,0,2.4,0.1,3.2v3.2
+		C17.8,26.8,14.2,30.4,9.9,30.4z M30.2,13c0,4.4-3.6,7.9-7.9,7.9c-2.1,0-2.8,0-3-1.7v-2.8c0.9,0.5,1.9,0.8,3,0.8
+		c1.6,0,3.1-0.6,4.2-1.7c0.3-0.3,0.3-0.8,0-1.1s-0.8-0.3-1.1,0c-0.8,0.8-2,1.3-3.1,1.3c-1.1,0-2.1-0.4-3-1.2v-3.6
+		c0-0.2-0.1-0.5-0.3-0.6c-0.2-0.1-0.5-0.2-0.7-0.1c-0.4,0.2-0.9,0.3-1.4,0.4l-2.5,0.4V2.5c2.1,0.6,4.9,1,7.9,1c3,0,5.8-0.3,7.9-1V13
+		z"/>
+	<path d="M10.9,17.7c-0.3,0.3-0.3,0.8,0,1.1s0.8,0.3,1.1,0c0.7-0.7,2-0.7,2.7,0c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2
+		c0.3-0.3,0.3-0.8,0-1.1C14.4,16.4,12.2,16.4,10.9,17.7z"/>
+	<path d="M7.7,18.7C7.9,18.9,8.1,19,8.3,19s0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.8,0-1.1c-1.3-1.3-3.5-1.3-4.8,0c-0.3,0.3-0.3,0.8,0,1.1
+		s0.8,0.3,1.1,0C5.8,18,7,18,7.7,18.7z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/energy.svg b/webapp/assets/_new/icons/svgs/energy.svg
new file mode 100644
index 000000000..5035a5586
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/energy.svg
@@ -0,0 +1,14 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
+<path d="M27.6,19.7L26.8,19c-3-2.8-4.8-4.4-5.2-4.6c-0.9-0.6-2.9-0.5-3.6-0.4c-0.2-0.5-0.5-0.9-0.9-1.2V2.2
+	c0-1-0.7-1.6-1.3-1.6c-0.6-0.1-1.4,0.4-1.6,1.4c-0.1,0.5-0.3,1.4-0.5,2.4c-0.6,2.9-1,5-1,5.4c-0.1,1.1,1.1,2.8,1.5,3.3
+	c-0.3,0.4-0.5,0.9-0.5,1.4c0,0,0,0,0,0.1c-0.9,0.6-7.3,5-8.7,6c-0.8,0.6-0.9,1.4-0.6,2c0.2,0.4,0.7,0.7,1.2,0.7
+	c0.3,0,0.5-0.1,0.8-0.2c1.5-0.6,6.7-2.9,7.4-3.2c0.2-0.1,0.4-0.3,0.6-0.5l-1.3,11c0,1,2.3,1,2.8,1s2.8,0,2.8-1.1l-1.4-13.5
+	c1.8,1.1,7.2,4.4,8.6,5.2c0.3,0.2,0.7,0.3,0.9,0.3c0.5,0,0.9-0.2,1.1-0.5C28.5,21.4,28.5,20.5,27.6,19.7z M14.8,14.6
+	c0-0.8,0.6-1.2,1.2-1.2c0.6,0,1.2,0.6,1.2,1.2c0,0.8-0.6,1.2-1.2,1.2C15.2,15.8,14.8,15.2,14.8,14.6z M14.8,4.7c0.2-1,0.4-2,0.5-2.5
+	c0.1-0.5,0.3-0.7,0.5-0.6c0.2,0,0.4,0.2,0.4,0.6v10.2c-0.1,0-0.1,0-0.2,0c-0.3,0-0.6,0.1-0.9,0.2c-0.6-0.8-1.4-2-1.3-2.7
+	C13.8,9.5,14.4,6.5,14.8,4.7z M13.5,19.1c-0.6,0.3-5.8,2.6-7.3,3.2c-0.4,0.2-0.7,0.1-0.8-0.1c-0.1-0.2,0-0.4,0.3-0.7
+	c1.3-0.9,6.9-4.8,8.4-5.8c0.2,0.3,0.5,0.6,0.8,0.8C14.6,17.4,13.9,18.8,13.5,19.1z M16,30.4c-0.6,0-1.4-0.1-1.8-0.2l1.6-13.4
+	c0,0,0.1,0,0.1,0c0.1,0,0.3,0,0.4,0l1.4,13.4C17.4,30.3,16.6,30.4,16,30.4z M27.3,21.3c-0.1,0.1-0.4,0.2-0.7,0
+	c-1.5-0.9-7.2-4.4-8.8-5.3c0.2-0.3,0.3-0.6,0.4-0.9c1-0.1,2.5-0.1,3,0.3c0.4,0.2,3.6,3.2,5,4.5l0.8,0.7
+	C27.3,20.8,27.4,21.1,27.3,21.3z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/finance.svg b/webapp/assets/_new/icons/svgs/finance.svg
new file mode 100644
index 000000000..74081bc6a
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/finance.svg
@@ -0,0 +1,13 @@
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
+	<rect x="8.1" y="13.3" width="1.5" height="1.9"/>
+	<path d="M31.9,17.9L31.9,17.9l0-0.6c-0.2-5.5-4.1-10.3-9.5-11.6c-0.2,0-0.8-0.2-0.8-0.2c-3.1-0.6-6.3-0.5-9.5,0.1
+		c-0.3,0.1-0.6,0.1-0.9,0.2C10.6,5.7,10,5.4,9.7,5.4L9.5,5.3C8.7,5,7.6,4.6,6.8,5.1C6,5.7,6,6.7,6.2,7.3l0.3,1.2
+		C5.1,9.7,4,11.2,3.3,12.8c-0.4,0.8-0.8,0.8-1.2,0.8c-0.1,0-0.2,0-0.3,0H0l0,5.5l0.6,0.1c0,0,1.1,0.2,1.6,1C2.5,20.7,2.7,21,3,22.3
+		c1.1,3.4,3.6,5.3,4.6,5.9l0,3.9H12l2.6-3.4h6.1l1.7,3.4h4.9v-4.6l0.4-0.4c2.5-2.2,3.9-5.2,4.1-8.5l0-0.4
+		C31.9,18.1,31.9,18,31.9,17.9z M26.7,25.9l-0.9,0.9v3.8h-2.5l-1.7-3.4h-7.7l-2.6,3.4H9.1l0-3.2l-0.4-0.2c0,0-3.1-1.7-4.2-5.3
+		c-0.4-1.4-0.6-1.8-1-2.3c-0.5-0.9-1.4-1.3-2-1.5v-2.8l0.6,0c0.5,0,1.8,0,2.6-1.7c0.5-1.2,1.3-2.3,2.2-3.3c0.8-0.8,1.3-1,1.1-1.5
+		l0,0L7.6,7c-0.1-0.2-0.1-0.5,0-0.6c0.2-0.1,1,0.1,1.4,0.3l0.3,0.1c0.3,0.1,0.9,0.4,1.7,0.6l0.2,0.1l0.3-0.1c0.3-0.1,0.7-0.2,1-0.2
+		c3-0.6,5.9-0.6,8.9-0.1c0,0,0.6,0.1,0.8,0.1c4.7,1.1,8.2,5.3,8.4,10.1l0,0.8c-0.1,1.3-1.2,2.4-2.5,2.4c-1,0-1.9-0.9-1.9-2
+		c0-0.8,0.6-1.4,1.4-1.4v-1.5c-1.6,0-2.9,1.3-2.9,2.9c0,1.9,1.5,3.5,3.4,3.5c0.7,0,1.3-0.2,1.8-0.5C29.1,23.2,28.1,24.7,26.7,25.9z"
+		/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/health.svg b/webapp/assets/_new/icons/svgs/health.svg
new file mode 100644
index 000000000..acf50d7c1
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/health.svg
@@ -0,0 +1,7 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M26.1,20.7c-2.9,5.1-9.3,8.8-10.8,9.6c-2.1-1.1-13.7-7.8-13.7-16.1c0-3.6,2.8-6.5,6.5-6.5c2.6,0,4.9,1.5,5.9,3.9l0.7,1.7
+		l0.7-1.7c1-2.4,3.3-3.9,5.9-3.9c3.6,0,6.5,2.8,6.5,6.5V15h1.5v-0.8c0-4.5-3.5-8-8-8c-2.7,0-5.2,1.3-6.6,3.5
+		c-1.4-2.2-3.9-3.5-6.6-3.5c-4.5,0-8,3.5-8,8c0,10,14.3,17.3,14.9,17.6l0.3,0.2l0.3-0.2c0.3-0.2,8.3-4.2,11.8-10.4l0.4-0.7L26.5,20
+		L26.1,20.7z"/>
+	<polygon points="22.9,17 19.5,21.2 17,14.5 11.6,19.9 12.6,20.9 16.4,17.2 19,24.2 23.6,18.5 31.9,18.5 31.9,17 	"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/media.svg b/webapp/assets/_new/icons/svgs/media.svg
new file mode 100644
index 000000000..d63c98610
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/media.svg
@@ -0,0 +1,7 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M31.7,29.2L29.8,23V7.1c0-1.1-1-2.1-2.1-2.1H4.8c-1.1,0-2.1,1-2.1,2.1V23l-2,6.1c-0.2,0.6-0.1,1.3,0.2,1.9
+		c0.4,0.6,1,0.9,1.7,0.9h27.1c0.7,0,1.3-0.3,1.7-0.9C31.8,30.4,31.9,29.7,31.7,29.2z M4.2,7.1c0-0.3,0.3-0.6,0.6-0.6h22.8
+		c0.3,0,0.6,0.3,0.6,0.6v15.3h-24V7.1z M30.2,30.2c-0.1,0.1-0.2,0.2-0.5,0.2H2.6c-0.3,0-0.4-0.2-0.5-0.2C2.1,30,2,29.8,2.1,29.6
+		L4,23.9h24.4l1.8,5.8C30.4,29.8,30.3,30,30.2,30.2z"/>
+	<rect x="13.5" y="27.8" width="5.6" height="1.5"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/miscellaneous.svg b/webapp/assets/_new/icons/svgs/miscellaneous.svg
new file mode 100644
index 000000000..07f8dbe3f
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/miscellaneous.svg
@@ -0,0 +1,13 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M7.5,4.9c0.1-0.1,0.2-0.2,0.3-0.2l0.7-0.6l-1-1.4L6.8,3.1C6.7,3.3,6.6,3.4,6.5,3.5L5.8,4.1l1,1.3L7.5,4.9z"/>
+	<path d="M31.5,19.2c0.2-1,0.3-2.1,0.3-3.2c0-8.6-7-15.8-15.8-15.8c-1.7,0-3.3,0.2-5,0.8l-0.8,0.2l0.6,1.6l0.8-0.2
+		c1.5-0.5,3-0.7,4.5-0.7c3.6,0,6.9,1.4,9.4,3.7C22.7,6,21.3,7.3,21,9.7c-0.2,1.3,0.6,2.4,1.4,3.3c0.3,0.5,1,1.3,0.9,1.5
+		c0,0.2-0.2,0.3-0.6,0.6c-0.8,0.6-2,1.3-1.7,3.6c0.2,1.6,0.9,2.8,2.2,3.1c0.2,0.1,0.6,0.1,0.8,0.1c1,0,2.1-0.6,2.9-1.5
+		c0.8-1,0.8-1,2-0.5c0.2,0.1,0.4,0.2,0.6,0.3c-1.8,5.7-7.1,9.8-13.4,9.8c-1.7,0-3.4-0.3-4.9-0.9l-0.1-0.1c-0.7-1.8,1-4.3,2.9-5.9
+		c2.1-1.8,2.9-4.6,2.1-7.1c-0.5-1.2-1.4-2.1-2.7-2.3C12,13.5,10.6,14,9.7,15c-1,1.3-1.8,2-3,2c-1.3-0.1-3.3-2-4.3-3.1l-0.2-0.3
+		c0.4-2.1,1.2-4,2.4-5.7L5,7.2l-1.4-1L3.1,6.8c-1.8,2.8-2.9,5.9-2.9,9.2c0,8.6,7.1,15.8,15.9,15.8c7.3,0,13.5-5.1,15.2-11.9
+		L31.5,19.2L31.5,19.2z M2,16.1c0,0,0-0.1,0-0.1c1.1,1.1,2.9,2.6,4.5,2.6c2.1,0.1,3.3-1.3,4.5-2.5c0.5-0.6,1.3-0.8,2.1-0.7
+		c0.3,0.1,1,0.3,1.3,1.2c0.6,1.8,0,4-1.5,5.3c-0.9,0.9-3.7,3.6-3.5,6.5C5,26,2,21.3,2,16.1z M29.6,18.4c-1.7-0.9-2.7-1-4.1,0.9
+		c-0.6,0.7-1.3,1-1.8,0.9s-0.8-0.7-0.9-1.6c-0.1-1.3,0.3-1.5,0.9-2c0.5-0.3,1-0.7,1.3-1.5c0.3-1.2-0.5-2.2-1.2-3.1
+		c-0.5-0.7-1.2-1.5-1-2.1c0.1-1,0.3-2.6,4.3-2.7c1.9,2.4,3.1,5.5,3.1,8.8c0,0.8-0.1,1.6-0.2,2.4C29.8,18.4,29.7,18.4,29.6,18.4z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/mobility.svg b/webapp/assets/_new/icons/svgs/mobility.svg
new file mode 100644
index 000000000..9e36ec21e
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/mobility.svg
@@ -0,0 +1,11 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
+<path d="M31.8,20c0-6.8-5.6-9.1-8.2-9.1h-3.2c-0.3-1.6-1.7-2.9-3.5-2.9h-2.2v1.1h-3.4v1.5h3.4v2.1h-3.4v1.5h3.4v0.9h2.2
+	c1.7,0,3.1-1.2,3.4-2.7h3.3c1.3,0,6.7,1.3,6.7,7.6c0,6.9-7.2,7.2-7.2,7.2h-0.8h-0.1V28c0,1.3-1.1,2.4-2.5,2.4
+	c-1.4,0-2.5-1.1-2.5-2.4v-0.8H8.6V28c0,1.3-1.1,2.4-2.4,2.4c-1.5,0-2.4-1.2-2.4-2.4v-0.8H1.8v-2.6c0-0.1,0-0.8,0.5-1
+	c0.5-0.1,1.3-0.4,2.2-0.7c0.5-0.2,1.1-0.4,1.2-0.4c0.4,0,0.8-0.3,1.4-1l0.1-0.1c0.1-0.1,0.5-0.7,0.9-1.1c0.8-0.9,1-1.2,1.1-1.4
+	c0.1-0.1,0.5-0.4,1-0.4h8.6c0.6,0,0.8,0.2,1,0.4c0.4,0.5,1.9,2.5,1.9,2.5l1.2-0.9c0,0-1.5-2-1.9-2.5c-0.5-0.7-1.2-1-2.2-1h-8.6
+	c-1,0-2,0.6-2.2,1.1c-0.1,0.1-0.6,0.8-1,1.2c-0.5,0.6-0.8,1-0.9,1.2c-0.2,0.2-0.5,0.4-0.6,0.6c-0.2,0-0.5,0.2-1.5,0.5
+	c-0.7,0.3-1.6,0.6-2,0.7c-1,0.3-1.7,1.2-1.7,2.4v4.1h2.2c0.3,1.8,1.9,3.2,3.8,3.2c1.9,0,3.5-1.4,3.9-3.2h5.7
+	c0.3,1.8,1.9,3.2,3.9,3.2c1.9,0,3.5-1.4,3.9-3.2C26.2,28.5,31.8,26.6,31.8,20z M16.9,13.6h-0.8V9.6h0.8c1.1,0,2.1,0.9,2.1,2
+	S18,13.6,16.9,13.6z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/movement.svg b/webapp/assets/_new/icons/svgs/movement.svg
index ac5cd9cc0..81052875d 100644
--- a/webapp/assets/_new/icons/svgs/movement.svg
+++ b/webapp/assets/_new/icons/svgs/movement.svg
@@ -1,20 +1,19 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="24px" height="24.3px" viewBox="0 0 24 24.3" style="enable-background:new 0 0 24 24.3;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#333333;}
-</style>
-<g>
-	<circle class="st0" cx="17.1" cy="2.9" r="2.9"/>
-	<path class="st0" d="M23.5,5.6L23.5,5.6c-0.6-0.5-1.4-0.5-2,0.1l-2.7,3l-2.2-1.4c0.1,0.3,0.1,0.6,0.1,0.9c0,0.6-0.2,1.1-0.5,1.6
-		L16,10.2l1.5,1c0.4,0.3,0.9,0.4,1.4,0.4c0.1,0,0.2,0,0.4,0c0.6-0.1,1.2-0.4,1.6-0.9l2.7-3.1C24.2,7,24.1,6.1,23.5,5.6z"/>
-	<path class="st0" d="M6.5,17c-0.3-0.2-0.5-0.5-0.7-0.8c0,0,0,0,0,0L4.6,19l-4,2.7C0,22.1-0.2,23,0.2,23.6l0,0
-		c0.4,0.6,1.3,0.8,1.9,0.4l4.7-3.2l1.4-3.3l-0.7-0.1C7.2,17.4,6.8,17.2,6.5,17z"/>
-	<path class="st0" d="M16.3,15.1l-4.4-0.5l3.5-4.7l0.3-0.4C16,9,16.2,8.6,16.2,8.2c0-0.7-0.4-1.4-1-1.7c-0.1,0-0.1-0.1-0.2-0.1
-		l-1.8-0.7L9.4,4.4C9.1,4.3,8.8,4.3,8.5,4.3c-0.3,0-0.5,0-0.8,0.1c-0.5,0.2-1,0.5-1.3,0.9L3.7,8.5C3.2,9.1,3.3,10,3.9,10.5l0,0
-		c0.3,0.2,0.6,0.3,0.9,0.3c0.4,0,0.8-0.2,1.1-0.5L8.6,7L11.4,8l-4.8,6.5l0,0c-0.1,0.1-0.1,0.3-0.2,0.4c-0.2,0.8,0.4,1.7,1.3,1.8
-		l0.9,0.1l6.9,0.9l-1.7,2.7c-0.4,0.7-0.2,1.5,0.5,1.9h0c0.2,0.1,0.5,0.2,0.7,0.2c0.5,0,0.9-0.2,1.2-0.7l2-3.2
-		c0.4-0.7,0.5-1.6,0.1-2.3C17.8,15.7,17.1,15.2,16.3,15.1z"/>
-</g>
-</svg>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M16,9.9c-2.7,0-4.8-2.2-4.8-4.8s2.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8S18.6,9.9,16,9.9z M16,1.8c-1.8,0-3.3,1.5-3.3,3.3
+		s1.5,3.3,3.3,3.3c1.8,0,3.3-1.5,3.3-3.3S17.8,1.8,16,1.8z"/>
+	<path d="M19.6,32c-3.3,0-5.4-0.1-6-0.3c-2.6-1.1-2.6-2.5-2.4-3.1c0.5-2,4.1-3.1,8.7-2.6l0.3,0c0.4,0,0.8,0.3,0.8,0.8
+		s-0.3,0.8-0.8,0.8h-0.3c-4.7-0.4-7,0.8-7.1,1.5c-0.1,0.3,0.4,0.9,1.5,1.4c0.8,0.3,7.5,0.2,10.1,0.2c0.7,0,1.3,0,1.7,0
+		c0.6,0,1.3-0.5,1.3-1.3c0-1.6-2-3.1-3.6-4.2c-0.5-0.3-0.9-0.7-1.3-1c-0.2-0.2-0.4-0.4-0.7-0.6c-0.9-0.8-1.9-1.5-2-2.5
+		c-0.1-0.5,0-1.1,0.2-1.8c0.2-0.6,0.3-1.2,0.3-2c0-0.4,0.3-0.7,0.6-0.7c0.4-0.1,0.7,0.1,0.8,0.5c0.9,2.3,1.4,2.7,2.7,3.9
+		c0.6,0.5,1.3,1.1,2.4,2.1c0.5,0.5,1.2,0.5,1.6,0c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.5-0.3-0.8l-2.9-2.8c-1.3-1.2-1.9-2.8-2.5-4
+		c-0.7-1.7-1.1-2.5-2.1-2.5h-9c-0.9,0-1.3,0.7-2.1,2.5c-0.5,1.2-1.2,2.8-2.5,4l-2.9,2.8c-0.2,0.2-0.3,0.5-0.3,0.8
+		c0,0.3,0.1,0.5,0.3,0.8c0.5,0.5,1.2,0.5,1.6,0c0.5-0.5,1-1,1.6-1.5c1.6-1.3,3.2-2.7,3.5-4.4c0.1-0.4,0.4-0.6,0.8-0.6
+		c0.4,0,0.7,0.4,0.7,0.7c0,0.8,0.2,1.4,0.3,2c0.2,0.6,0.3,1.3,0.2,1.9c-0.2,0.9-1.2,1.7-2.1,2.5c-0.2,0.2-0.4,0.3-0.5,0.5
+		c-0.4,0.3-0.8,0.7-1.3,1c-1.6,1.2-3.6,2.7-3.6,4.2c0,0.6,0.5,1.3,1.3,1.3h4c0.4,0,0.8,0.3,0.8,0.8S11.3,32,10.9,32h-4
+		c-1.5,0-2.8-1.3-2.8-2.8c0-2.4,2.3-4.1,4.2-5.5c0.4-0.3,0.9-0.6,1.2-0.9c0.2-0.1,0.3-0.3,0.5-0.5c0.7-0.6,1.5-1.3,1.6-1.7
+		c0.1-0.2,0-0.6-0.1-1c-0.8,1.1-1.9,2-2.9,2.9c-0.6,0.5-1.1,0.9-1.5,1.4c-1.1,1.1-2.7,1.1-3.7,0c-0.5-0.5-0.8-1.2-0.8-1.8
+		s0.3-1.3,0.8-1.8l2.9-2.8c1.1-1,1.6-2.3,2.1-3.5c0.7-1.7,1.4-3.4,3.5-3.4h9c2,0,2.7,1.7,3.5,3.4c0.5,1.2,1.1,2.5,2.1,3.5l2.9,2.8
+		c0.5,0.5,0.8,1.2,0.8,1.8s-0.3,1.3-0.8,1.8c-1.1,1.1-2.7,1-3.7,0c-1-0.9-1.7-1.5-2.3-2c-0.9-0.8-1.5-1.3-2.1-2.3
+		c-0.1,0.4-0.2,0.8-0.2,1c0.1,0.5,0.9,1.1,1.5,1.6c0.2,0.2,0.5,0.4,0.7,0.6c0.3,0.3,0.8,0.6,1.2,0.9c1.9,1.4,4.2,3.1,4.2,5.5
+		c0,1.5-1.3,2.8-2.8,2.8c-0.3,0-0.9,0-1.7,0C22.5,32,20.9,32,19.6,32z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/nature.svg b/webapp/assets/_new/icons/svgs/nature.svg
new file mode 100644
index 000000000..d40250af4
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/nature.svg
@@ -0,0 +1,18 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M31,20.4c-0.4-0.3-1-0.5-1.6-0.5l-0.2-0.4c-0.5-1.4-2.1-1.6-3.6-1.1c-0.2,0.1-0.6,0.3-1,0.6c-0.7-0.8-2-0.9-3.2-0.5
+		c-0.5,0.2-1.8,0.9-2.5,1.3c-2.6-0.5-5.8-1.1-6.5-1.2c-2-0.2-3.3-0.2-4.9,0.3c-0.6,0.2-5.2,2.3-6.1,2.7L0.9,22l0.6,1.4l0.7-0.3
+		c2.5-1.2,5.5-2.5,5.9-2.6c1.4-0.4,2.4-0.4,4.3-0.2c0.9,0.1,8.1,1.5,9.4,1.8c0.9,0.2,0.9,0.7,0.9,0.8c0,0.3-0.1,0.4-0.1,0.4
+		s0,0-0.1,0h-8.6v1.5h2l0.5,0.3c0.1,0,1.4,0.9,2.4,1.3c1,0.4,2,0.4,2.7-0.2c2.6-1.7,6.7-4.4,7-4.6c0.6-0.4,1.4-0.4,1.6-0.2
+		c0.1,0.1,0.2,0.2,0.2,0.3s-0.1,0.2-0.2,0.3c-2.8,2-10.3,7.5-11.2,8c-1.2,0.7-2.8,0.3-3.6,0.1c-1.2-0.4-7.1-2.5-7.6-2.7
+		c-0.7-0.2-2.4-0.6-3.9,0C2.7,28,1,29,0.9,29l-0.7,0.3l0.7,1.3l0.7-0.3c0,0,1.7-0.9,2.8-1.4c0.9-0.4,2.2-0.2,2.6,0
+		c0.5,0.2,6.4,2.3,7.7,2.7c0.5,0.1,1.3,0.3,2.2,0.3c0.8,0,1.7-0.2,2.5-0.3c1.1-0.6,10.9-7.8,11.3-8.1c0.5-0.4,0.8-0.9,0.8-1.5
+		S31.5,20.8,31,20.4z M22,20c0,0,0.7-0.2,1.2-0.1c-0.4,0.3-0.8,0.5-1.1,0.7c0,0,0,0,0,0c-0.2-0.1-0.5-0.1-0.9-0.2
+		C21.6,20.2,21.9,20.1,22,20z M19.3,25.2c-0.2-0.1-0.4-0.2-0.6-0.3h2.1c-0.1,0.1-0.2,0.2-0.3,0.2C20.3,25.3,19.9,25.5,19.3,25.2z
+		 M24.2,22.7c0-0.5-0.2-0.9-0.5-1.2c1.2-0.7,2.4-1.5,2.7-1.6c0,0,1.4-0.4,1.7,0.3l0,0.1c-0.2,0.1-0.3,0.1-0.5,0.2
+		C27.5,20.5,25.8,21.6,24.2,22.7z"/>
+	<path d="M15.9,16c3,0,4.5-1.3,5.3-2.3c1.3,1.4,1.5,3,1.5,3.1l0.1,0.7l1.6-0.1l-0.1-0.7c-0.1-0.1-0.3-2.5-2.5-4.4
+		c0.4-1.6,0.1-3.5-1-4.9c-2.2-2.7-5.4-2.9-8.6-2.8c-2.9,0-4.6,0-6.4-0.9L4.9,3.2L4.7,4.2C4.3,6.3,5.2,9,7.1,11.5
+		C9.4,14.4,12.7,16,15.9,16z M12.3,6.1c3-0.1,5.7,0,7.4,2.2c0.7,0.8,1,2,0.8,3c-2-1.1-4-1.6-5.6-2.1c-1.2-0.3-2.3-0.6-2.7-1
+		l-0.6-0.5l-1,1.1l0.6,0.5c0.7,0.6,1.9,0.9,3.4,1.3c1.6,0.4,3.6,1,5.5,2.1c-0.7,1.2-2.1,1.8-4.1,1.8c-2.8,0-5.6-1.4-7.6-4
+		C7,8.9,6.2,7,6.2,5.5C8,6.1,9.7,6.1,12.3,6.1z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/networking.svg b/webapp/assets/_new/icons/svgs/networking.svg
new file mode 100644
index 000000000..b8d35da69
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/networking.svg
@@ -0,0 +1,22 @@
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+<path d="M31.6,16c-0.6-6.4-1.9-6.4-2.4-6.4c-0.4,0-0.8,0.1-1.1,0.4c-0.8,0.8-0.8,2.5-0.8,4.2c0,0.5,0,1.2,0,1.7h-0.1
+	C26,15.5,25.1,17,24.5,18c-0.1,0.2-0.2,0.4-0.3,0.5c-0.8,0.9-1.2,1.2-2.2,2c-0.4,0.4-1,0.6-1.5,0.9c-0.6,0.3-1.2,0.6-1.8,1.1
+	c-2.3,1.9-1.8,4.1-1.4,6.1c0.2,0.8,0.3,1.5,0.3,2.3v0.8h1.5v-0.8c0-0.9-0.2-1.7-0.4-2.6c-0.4-2.1-0.6-3.4,0.9-4.6
+	c0.4-0.4,1-0.6,1.5-0.9c0.6-0.3,1.2-0.6,1.8-1.1c1-0.8,1.5-1.2,2.4-2.2c0.1-0.1,0.3-0.4,0.4-0.7c0.2-0.3,0.7-1.2,1-1.4
+	c0.3,0.2,0.4,1.3,0.3,1.7c-0.3,1-1.1,1.9-1.9,2.8c-0.7,0.8-1.4,1.6-1.8,2.5L23,25l1.3,0.7l0.3-0.7c0.4-0.7,1-1.4,1.6-2.2
+	c0.9-1,1.8-2.1,2.2-3.3c0.2-0.5,0.2-1.4-0.1-2.2c0.4-0.5,0.4-1.4,0.4-3c0-0.8,0-2.5,0.3-3c0.3,0.5,0.7,1.8,1,4.9
+	c0.2,2,0.2,4.8-1.2,7.1c-0.5,0.9-1.3,1.7-2,2.4c-1.3,1.4-2.7,2.9-3,5.2l-0.1,0.7l1.5,0.2l0.1-0.7c0.2-1.7,1.4-3,2.6-4.3
+	c0.8-0.8,1.5-1.7,2.2-2.7C31.9,21.4,31.9,18.2,31.6,16z"/>
+<path d="M26.3,7.2c0-2.9-2.4-5.2-5.2-5.2c-2.4,0-3.9,1.4-4.5,2c-0.6-0.6-2.1-2-4.5-2C9.3,2,6.9,4.3,6.9,7.1c0,1,0.5,1.9,1,2.4
+	c0.4,0.6,0.8,1,0.8,1l7.4,7.5l0.6,0.6l7.9-7.9C24.6,10.7,26.3,9.2,26.3,7.2z M16.6,16.7l-7-7c0,0-0.4-0.3-0.7-0.8
+	C8.6,8.4,8.3,7.7,8.3,7.2c0-2.1,1.7-3.8,3.8-3.8c2,0,3.9,2,3.9,2L16.6,6l0.5-0.6c0,0,1.9-2,4-2s3.8,1.7,3.8,3.8
+	c0,1.1-1.3,2.5-1.3,2.5L16.6,16.7z"/>
+<path d="M13.4,22.6c-0.6-0.4-1.2-0.8-1.8-1.1c-0.6-0.3-1.1-0.6-1.5-0.9c-1-0.8-1.4-1.2-2.2-2c-0.1-0.1-0.2-0.3-0.3-0.5
+	c-0.6-1-1.5-2.5-2.7-2.1c-0.1,0-0.1,0.1-0.2,0.1c0-0.5,0-1.2,0-1.7c0-1.8,0-3.5-0.8-4.2c-0.3-0.3-0.7-0.4-1-0.4
+	c-0.5,0-1.8,0-2.4,6.4c-0.3,2.2-0.2,5.4,1.4,8.1c0.6,1,1.4,1.9,2.2,2.7c1.3,1.3,2.4,2.6,2.7,4.3L6.9,32l1.5-0.2L8.1,31
+	c-0.3-2.2-1.7-3.7-3.1-5.1c-0.7-0.8-1.5-1.6-2-2.5c-1.4-2.3-1.4-5.2-1.2-7.1c0.3-3.1,0.8-4.5,1-4.9c0.3,0.5,0.3,2.2,0.3,3
+	c0,1.7,0,2.6,0.5,3.1c-0.2,0.8-0.2,1.7-0.1,2.1C4,20.9,4.9,22,5.8,23c0.6,0.7,1.3,1.4,1.6,2.2l0.3,0.7L9,25.2l-0.3-0.7
+	c-0.5-0.9-1.2-1.7-1.8-2.5c-0.8-0.9-1.6-1.8-1.9-2.8c-0.1-0.4,0-1.5,0.3-1.7c0.3,0.2,0.8,1.1,1,1.4s0.3,0.6,0.5,0.7
+	c0.8,0.9,1.4,1.4,2.4,2.2c0.6,0.4,1.2,0.8,1.8,1.1c0.6,0.3,1.1,0.6,1.5,0.9c1.5,1.3,1.3,2.6,0.9,4.6C13.1,29.3,13,30.1,13,31v0.8
+	h1.5V31c0-0.7,0.2-1.5,0.3-2.3C15.2,26.8,15.7,24.5,13.4,22.6z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/peace.svg b/webapp/assets/_new/icons/svgs/peace.svg
new file mode 100644
index 000000000..408601cae
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/peace.svg
@@ -0,0 +1,8 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32px" height="32px">
+<path d="M27.3,5c-1.5-1.5-3.1-2.6-5-3.4c-2-0.8-4-1.2-6.2-1.2c-2.1,0-4.2,0.4-6.2,1.2C8,2.4,6.3,3.5,4.9,5c-1.5,1.5-2.6,3.1-3.4,5
+	c-0.8,2-1.2,4-1.2,6.2c0,2.1,0.4,4.2,1.2,6.2c0.8,1.9,1.9,3.6,3.4,5c1.5,1.5,3.1,2.6,5,3.4c2,0.8,4,1.2,6.2,1.2
+	c2.1,0,4.2-0.4,6.2-1.2c1.9-0.8,3.6-1.9,5-3.4c1.5-1.5,2.6-3.1,3.4-5c0.8-2,1.2-4,1.2-6.2c0-2.1-0.4-4.2-1.2-6.2
+	C29.8,8.1,28.7,6.4,27.3,5z M15.1,2.4v13.4L5.4,25c-2-2.4-3.2-5.5-3.2-8.8C2.2,8.9,7.9,2.9,15.1,2.4z M6.8,26.4l8.3-7.9V30
+	C11.9,29.7,9,28.4,6.8,26.4z M17.1,30V18.5l8.3,7.9C23.1,28.4,20.2,29.7,17.1,30z M26.7,25l-9.7-9.2V2.4c7.2,0.5,12.8,6.5,12.8,13.8
+	C29.9,19.5,28.7,22.6,26.7,25z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/politics.svg b/webapp/assets/_new/icons/svgs/politics.svg
new file mode 100644
index 000000000..35322097d
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/politics.svg
@@ -0,0 +1,12 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M19.3,15.4c0.3,0.2,0.9,0.5,1.1,0.8c0.5,0.6,0.6,1.2,0.6,1.3l0.8,3.1l1.4-0.4l-0.8-3c0-0.1-0.2-0.9-0.9-1.8
+		c-0.5-0.6-1.5-1.1-1.6-1.2l-8.5-4.7l-0.7,1.3L19.3,15.4z"/>
+	<path d="M7.4,19.1c0.4,2.2,2.5,4.1,3.4,4.8l0.9-1.2c-1.7-1.4-2.8-2.9-2.9-4.2l0-0.4l-2.3-1.3L11,7.8c0.1-0.2,0.1-0.4,0-0.6
+		c-0.1-0.2-0.2-0.3-0.4-0.4L6.5,4.9L5.9,6.3l3.4,1.6L4.4,17.9l-3.4-1.6l-0.6,1.4l4.1,1.9c0.1,0,0.2,0.1,0.3,0.1
+		c0.3,0,0.5-0.2,0.7-0.4l0.5-1L7.4,19.1z"/>
+	<path d="M28.9,30.5l-2.8-10.1l-5.6,1.5l-1.1-4c-0.1-0.4-0.5-0.6-0.9-0.5c-0.4,0.1-0.6,0.5-0.5,0.9l2.1,7.6c0.2,0.7-0.2,1.4-1,1.6
+		c-0.3,0.1-0.7,0-0.9-0.1c-0.3-0.2-0.5-0.4-0.6-0.8l-1.4-5c-0.1-0.3-0.4-0.5-0.7-0.6c-0.1,0-2.4,0-3.8-3.5c-0.2-0.4-0.6-0.6-1-0.4
+		c-0.4,0.2-0.6,0.6-0.4,1c1.4,3.4,3.6,4.2,4.6,4.4l0.2,0.9l-6.8,1.9l1.2,4.4l1.4-0.4l-0.8-2.9l5.3-1.5l0.6,2.1
+		c0.2,0.7,0.7,1.3,1.3,1.7c0.4,0.2,0.9,0.4,1.3,0.4c0.3,0,0.5,0,0.8-0.1c1.5-0.4,2.3-1.9,1.9-3.4L21,23.4l4.1-1.1l2.2,8.2h-20V32
+		h24.5v-1.5H28.9z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/psyche.svg b/webapp/assets/_new/icons/svgs/psyche.svg
new file mode 100644
index 000000000..8c285d5ca
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/psyche.svg
@@ -0,0 +1,8 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+<path class="st0" d="M30.8,12C30.5,7.4,27.9,3.5,24,1.8c-2-0.9-4.3-1.4-6.4-1.4v0.1c0,0,0,0,0,0V0.4c-2,0-3.9,0.4-5.7,1.2
+	c-1.8,0.8-3.4,2-4.7,3.6c0,0,0,0,0,0c-0.1,0.1-2.6,3.3-2.5,8.5l-3.4,6.3C1,20.7,1,21.4,1.4,22c0.3,0.6,1,0.9,1.6,0.9h1.9v2.8
+	c0,1.7,1.4,3.1,3.1,3.1h2.8v1.7c0,0.7,0,1.3,0,1.3l1.4,0v-4.3h-4c-1,0-1.9-0.8-1.9-1.9v-4H3.2c-0.5,0-0.8-0.5-0.6-1L6.2,14
+	c-0.2-5,2.2-8,2.2-8c1.2-1.4,2.6-2.5,4.2-3.2c1.5-0.6,3.2-1,4.8-1c2,0,4,0.4,5.9,1.3c3.7,1.6,5.7,5.3,6,9.2c0.1,2.1-0.3,4.3-1.1,6.2
+	c-0.4,1-0.9,1.9-1.5,2.8c-0.3,0.5-1.8,1.9-1.8,2.4c0,0,0,6,0,6.8l0,1.3c0.2,0,1.5,0,1.5,0s0-0.8,0-1.3c0,0,0-5.4,0-6.6
+	c0.2-0.3,0.6-0.7,0.9-1c0.4-0.4,0.6-0.7,0.8-0.9c0.7-1,1.2-2,1.6-3.1C30.5,16.6,30.9,14.3,30.8,12z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/science.svg b/webapp/assets/_new/icons/svgs/science.svg
new file mode 100644
index 000000000..9d3211223
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/science.svg
@@ -0,0 +1,25 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M28.4,16.1c1-1.7,1.9-3.3,2.5-4.9c1.5-4,1.3-7.3-0.6-9.2C27.5-0.8,22,0.1,16.1,3.7C10.3,0.1,4.7-0.8,2,1.9
+		c-2.8,2.8-1.9,8.3,1.8,14.1c-3.3,5.3-4.4,10.4-2.5,13.4C1.5,29.7,1.7,30,2,30.2c1.1,1.1,2.6,1.6,4.4,1.6c1.4,0,3-0.3,4.8-1
+		c1.6-0.6,3.2-1.4,4.9-2.5c2.6,1.6,5.1,2.7,7.4,3.2c0,0,0.1,0,0.1,0c0.3,0.1,0.7,0.1,1,0.2c0.1,0,0.1,0,0.2,0c0.4,0,0.7,0.1,1,0.1
+		c0,0,0,0,0,0c0,0,0,0,0,0c0.3,0,0.5,0,0.8-0.1c0.2,0,0.4,0,0.5,0c0.3,0,0.6-0.1,0.9-0.2c0.1,0,0.2,0,0.3-0.1
+		c0.3-0.1,0.5-0.2,0.8-0.4c0.1,0,0.2-0.1,0.3-0.1c0.3-0.2,0.6-0.4,0.9-0.7c1.9-1.9,2.1-5.2,0.6-9.2C30.3,19.4,29.5,17.7,28.4,16.1z
+		 M29.5,21.5c1.3,3.4,1.1,6.2-0.3,7.6c-0.2,0.2-0.4,0.3-0.6,0.5c-0.2,0.1-0.4,0.2-0.6,0.3c0,0-0.1,0-0.1,0.1
+		c-0.3,0.1-0.5,0.2-0.8,0.2c0,0,0,0,0,0c-0.3,0.1-0.6,0.1-0.9,0.1c0,0,0,0,0,0c-0.3,0-0.6,0-0.8,0c-0.1,0-0.1,0-0.2,0
+		c-0.2,0-0.5-0.1-0.7-0.1c-0.2,0-0.3,0-0.5-0.1c-0.1,0-0.3-0.1-0.4-0.1c-0.3-0.1-0.6-0.1-0.9-0.2c0,0-0.1,0-0.1,0
+		c-1.5-0.5-3.2-1.3-4.9-2.3c1.9-1.3,3.7-2.8,5.4-4.6c1.7-1.7,3.3-3.6,4.6-5.5C28.3,18.8,29,20.2,29.5,21.5z M5.6,16.1
+		c1.3-1.9,2.9-3.9,4.7-5.8c1.9-1.9,3.8-3.5,5.8-4.7c0,0,0,0,0.1,0c0.1,0.1,0.2,0.2,0.4,0.2c0.4,0.3,0.8,0.6,1.2,0.8c0,0,0,0,0.1,0.1
+		c0.4,0.3,0.8,0.6,1.2,1c0.1,0.1,0.2,0.2,0.4,0.3c0.3,0.3,0.6,0.5,0.9,0.8c0.1,0.1,0.2,0.2,0.4,0.3c0.4,0.4,0.8,0.8,1.2,1.2
+		c1.8,1.8,3.5,3.8,4.8,5.8c-1.3,2-2.9,3.9-4.8,5.8c-1.8,1.8-3.8,3.4-5.8,4.8c-1.9-1.3-3.9-2.9-5.8-4.8C8.5,20,6.9,18,5.6,16.1z
+		 M25.8,1.8c1.4,0,2.6,0.4,3.4,1.2c1.4,1.4,1.5,4.2,0.3,7.6c-0.5,1.3-1.2,2.7-2,4c-1.3-1.9-2.8-3.7-4.6-5.5
+		c-1.8-1.8-3.6-3.3-5.4-4.6C20.6,2.8,23.5,1.8,25.8,1.8z M3,3c0.2-0.2,0.4-0.4,0.7-0.5C3.8,2.4,3.9,2.4,4,2.3
+		c0.1-0.1,0.3-0.1,0.4-0.2C4.6,2.1,4.8,2,4.9,2c0.1,0,0.3-0.1,0.4-0.1c0.2,0,0.4,0,0.5,0c0.1,0,0.3,0,0.4,0c0.3,0,0.6,0,1,0.1
+		c0.1,0,0.1,0,0.2,0C7.8,1.9,8.1,2,8.4,2c0.1,0,0.2,0,0.3,0.1c0.3,0.1,0.7,0.2,1,0.3c0,0,0.1,0,0.1,0c0.4,0.1,0.8,0.3,1.2,0.4
+		c0.1,0,0.2,0.1,0.3,0.1c0.3,0.1,0.6,0.3,0.9,0.4c0.1,0,0.2,0.1,0.3,0.1c0.4,0.2,0.8,0.4,1.1,0.6c0,0,0.1,0,0.1,0
+		c0.4,0.2,0.7,0.4,1.1,0.6c-1.8,1.3-3.7,2.8-5.4,4.6C7.5,11,6,12.8,4.7,14.7C1.8,9.7,0.9,5.1,3,3z M10.7,29.4
+		c-3.4,1.3-6.2,1.1-7.6-0.3C0.9,27,1.8,22.4,4.7,17.5c1.3,1.8,2.8,3.7,4.6,5.4c0.4,0.4,0.9,0.8,1.3,1.2c0.1,0.1,0.2,0.2,0.3,0.3
+		c0.4,0.3,0.8,0.7,1.1,1c0.1,0.1,0.1,0.1,0.2,0.2c0.8,0.7,1.7,1.3,2.5,1.9C13.4,28.3,12,28.9,10.7,29.4z"/>
+	<path d="M19.4,19.3c1.8-1.8,1.8-4.8,0-6.6c-1.8-1.8-4.8-1.8-6.6,0c-1.8,1.8-1.8,4.8,0,6.6c0.9,0.9,2.1,1.4,3.3,1.4
+		C17.3,20.7,18.5,20.3,19.4,19.3z M13.9,13.8c0.6-0.6,1.4-0.9,2.2-0.9s1.6,0.3,2.2,0.9c1.2,1.2,1.2,3.2,0,4.4s-3.2,1.2-4.4,0
+		S12.7,15.1,13.9,13.8z"/>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/spirituality.svg b/webapp/assets/_new/icons/svgs/spirituality.svg
new file mode 100644
index 000000000..0c2757071
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/spirituality.svg
@@ -0,0 +1,13 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
+	<path d="M15.9,18.6c-1.4,0-2.7-0.5-3.7-1.5c-1.4-1.4-1.9-3.3-1.4-5.2c0.5-1.8,1.9-3.2,3.7-3.7c1.9-0.5,3.8,0,5.2,1.4
+	c1.3,1.3,1.9,3.3,1.4,5.2c-0.5,1.8-1.9,3.2-3.7,3.7c0,0,0,0,0,0C16.9,18.5,16.4,18.6,15.9,18.6z M17.2,17.7L17.2,17.7
+	L17.2,17.7z M15.9,9.5c-0.3,0-0.7,0-1,0.1c-1.2,0.3-2.3,1.4-2.6,2.6c-0.4,1.4,0,2.7,1,3.7s2.4,1.3,3.7,1
+	c1.2-0.3,2.3-1.4,2.6-2.6c0.4-1.4,0-2.7-1-3.7C17.9,9.9,16.9,9.5,15.9,9.5z"/>
+	<path d="M27.8,32H4v-2.2c0-5.5,4.4-9.9,9.9-9.9h4c5.5,0,9.9,4.4,9.9,9.9V32z M5.5,30.5h20.8v-0.7c0-4.6-3.8-8.4-8.4-8.4h-4
+	c-4.6,0-8.4,3.8-8.4,8.4V30.5z"/>
+	<rect x="15.6" y="0.5" width="1.5" height="4.3"/>
+	<rect x="23.6" y="7.2" transform="matrix(0.8679 -0.4968 0.4968 0.8679 -0.5339 13.83)" width="4.3" height="1.5"/>
+	<rect x="5.9" y="5.9" transform="matrix(0.4969 -0.8678 0.8678 0.4969 -3.6304 9.7958)" width="1.5" height="4.3"/>
+	<rect x="9.4" y="1.8" transform="matrix(0.8207 -0.5714 0.5714 0.8207 -0.4488 6.4807)" width="1.5" height="4.3"/>
+	<rect x="20.1" y="3.2" transform="matrix(0.5712 -0.8208 0.8208 0.5712 6.3227 19.9037)" width="4.3" height="1.5"/>
+</svg>

From 3508b372247970cb1f02c815f44bf9c04760b246 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 8 Sep 2022 16:28:45 +0200
Subject: [PATCH 35/55] load new icons for categories

---
 backend/src/constants/categories.js | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/backend/src/constants/categories.js b/backend/src/constants/categories.js
index 146131453..358afb852 100644
--- a/backend/src/constants/categories.js
+++ b/backend/src/constants/categories.js
@@ -1,6 +1,6 @@
 export const categories = [
   {
-    icon: 'users',
+    icon: 'networking',
     name: 'networking',
     description: 'Kooperation, Aktionsbündnisse, Solidarität, Hilfe',
   },
@@ -10,12 +10,12 @@ export const categories = [
     description: 'Bauen, Lebensgemeinschaften, Tiny Houses, Gemüsegarten',
   },
   {
-    icon: 'lightbulb',
+    icon: 'enrgy',
     name: 'energy',
     description: 'Öl, Gas, Kohle, Wind, Wasserkraft, Biogas, Atomenergie, ...',
   },
   {
-    icon: 'smile',
+    icon: 'psyche',
     name: 'psyche',
     description: 'Seele, Gefühle, Glück',
   },
@@ -30,7 +30,7 @@ export const categories = [
     description: 'Menschenrechte, Gesetze, Verordnungen',
   },
   {
-    icon: 'money',
+    icon: 'finance',
     name: 'finance',
     description: 'Geld, Finanzsystem, Alternativwährungen, ...',
   },
@@ -40,7 +40,7 @@ export const categories = [
     description: 'Familie, Pädagogik, Schule, Prägung',
   },
   {
-    icon: 'suitcase',
+    icon: 'mobility',
     name: 'mobility',
     description: 'Reise, Verkehr, Elektromobilität',
   },
@@ -50,48 +50,48 @@ export const categories = [
     description: 'Handel, Konsum, Marketing, Lebensmittel, Lieferketten, ...',
   },
   {
-    icon: 'angellist',
+    icon: 'peace',
     name: 'peace',
     description: 'Krieg, Militär, soziale Verteidigung, Waffen, Cyberattacken',
   },
   {
-    icon: 'university',
+    icon: 'politics',
     name: 'politics',
     description: 'Demokratie, Mitbestimmung, Wahlen, Korruption, Parteien',
   },
   {
-    icon: 'tree',
+    icon: 'nature',
     name: 'nature',
     description: 'Tiere, Pflanzen, Landwirtschaft, Ökologie, Artenvielfalt',
   },
   {
-    icon: 'graduation-cap',
+    icon: 'science',
     name: 'science',
     description: 'Bildung, Hochschule, Publikationen, ...',
   },
   {
-    icon: 'medkit',
+    icon: 'health',
     name: 'health',
     description: 'Medizin, Ernährung, WHO, Impfungen, Schadstoffe, ...',
   },
   {
-    icon: 'desktop',
+    icon: 'media',
     name: 'it-and-media',
     description:
       'Nachrichten, Manipulation, Datenschutz, Überwachung, Datenkraken, AI, Software, Apps',
   },
   {
-    icon: 'heart-o',
+    icon: 'spirituality',
     name: 'spirituality',
     description: 'Religion, Werte, Ethik',
   },
   {
-    icon: 'music',
+    icon: 'culture',
     name: 'culture',
     description: 'Kunst, Theater, Musik, Fotografie, Film',
   },
   {
-    icon: 'ellipsis-h',
+    icon: 'miscellaneous',
     name: 'miscellaneous',
     description: '',
   },

From 8e561711d0328cb4dc6d347bdab8c1a6d63650af Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 8 Sep 2022 16:37:41 +0200
Subject: [PATCH 36/55] fix typo

---
 backend/src/constants/categories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/constants/categories.js b/backend/src/constants/categories.js
index 358afb852..3676fed0b 100644
--- a/backend/src/constants/categories.js
+++ b/backend/src/constants/categories.js
@@ -10,7 +10,7 @@ export const categories = [
     description: 'Bauen, Lebensgemeinschaften, Tiny Houses, Gemüsegarten',
   },
   {
-    icon: 'enrgy',
+    icon: 'energy',
     name: 'energy',
     description: 'Öl, Gas, Kohle, Wind, Wasserkraft, Biogas, Atomenergie, ...',
   },

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 37/55] 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

From 46f981357f0ea68b9a967f03b911cc41f9084815 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 9 Sep 2022 10:19:24 +0200
Subject: [PATCH 38/55] fix lint

---
 .../components/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 +--
 webapp/components/Embed/EmbedComponent.spec.js   |  3 +--
 webapp/components/Emotions/Emotions.vue          |  2 +-
 webapp/components/LocaleSwitch/LocaleSwitch.vue  |  2 +-
 webapp/components/Modal/DeleteUserModal.vue      |  2 +-
 webapp/components/Modal/DisableModal.vue         |  2 +-
 webapp/components/Password/Change.vue            |  2 +-
 .../components/PasswordReset/ChangePassword.vue  |  2 +-
 webapp/components/PasswordReset/Request.vue      |  2 +-
 webapp/components/PostTeaser/PostTeaser.story.js |  3 +--
 .../Registration/RegistrationSlideEmail.vue      |  7 +++----
 .../Registration/RegistrationSlideInvite.vue     |  2 +-
 .../Registration/RegistrationSlideNonce.vue      |  2 +-
 webapp/components/Registration/Signup.vue        |  2 +-
 webapp/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/post/_id.vue                        |  4 ++--
 webapp/pages/profile/_id.vue                     |  4 ++--
 webapp/pages/settings/my-social-media.vue        |  6 +++---
 38 files changed, 75 insertions(+), 85 deletions(-)

diff --git a/webapp/components/CommentCard/CommentCard.story.js b/webapp/components/CommentCard/CommentCard.story.js
index 467a125d5..75078657e 100644
--- a/webapp/components/CommentCard/CommentCard.story.js
+++ b/webapp/components/CommentCard/CommentCard.story.js
@@ -18,8 +18,7 @@ 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 21b842fe6..a0cdcf29b 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 dfcc3cdf4..6e38eab7f 100644
--- a/webapp/components/Editor/Editor.story.js
+++ b/webapp/components/Editor/Editor.story.js
@@ -9,8 +9,7 @@ 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 e87ee1570..372b189f9 100644
--- a/webapp/components/Editor/nodes/Embed.spec.js
+++ b/webapp/components/Editor/nodes/Embed.spec.js
@@ -33,8 +33,7 @@ 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 fd7452c01..cd3526368 100644
--- a/webapp/components/Embed/EmbedComponent.spec.js
+++ b/webapp/components/Embed/EmbedComponent.spec.js
@@ -114,8 +114,7 @@ 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 e75c8848d..b4dc14a61 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/LocaleSwitch/LocaleSwitch.vue b/webapp/components/LocaleSwitch/LocaleSwitch.vue
index 47e53028b..353fc406a 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 87aa557d8..8618582ee 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 19ef64332..d28033ff8 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 cd955973f..94b69a8f6 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 e65a7a04f..c53afcc01 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 5f4baf357..5398c13ed 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 c82396101..e77e85585 100644
--- a/webapp/components/PostTeaser/PostTeaser.story.js
+++ b/webapp/components/PostTeaser/PostTeaser.story.js
@@ -17,8 +17,7 @@ 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 045269f00..6ba443996 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,9 +165,8 @@ 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 f9ce15ee9..48c62d412 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 147e84336..b9de7afd1 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 86142c338..91b9ecd61 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 fef0d79d0..fceb4b7a1 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 62e422a67..f483129eb 100644
--- a/webapp/components/generic/SearchableInput/SearchableInput.story.js
+++ b/webapp/components/generic/SearchableInput/SearchableInput.story.js
@@ -78,8 +78,7 @@ 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',
@@ -88,8 +87,7 @@ 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',
@@ -98,8 +96,7 @@ 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',
@@ -108,8 +105,7 @@ 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 a73ebb00c..191edf217 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 e412ee4fa..573158cbf 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 675ec6bed..b3b4df695 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 685095d34..70450722d 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 f4796d080..8dc20f987 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 af91d245e..ee61efc3b 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 fcf9c52a7..b6cc610d9 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 96e507b2d..56f5d7c4c 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 b3f131238..f16323073 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 4365cb533..4015ad06c 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 567c67668..ff63f1a25 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 0fa2c2a2d..1fff64782 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 be1765138..0c642b352 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 f498534e3..10db085af 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 6c324fd97..cbd7433ad 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 047d12d7f..d743633d1 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/post/_id.vue b/webapp/pages/post/_id.vue
index 8d425eab7..14cc65a4e 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 b9bbef83e..7a771425d 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 a985371d6..d392032bb 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

From 362aae3c5b519d26c774ffede8274c75de490403 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 9 Sep 2022 11:10:11 +0200
Subject: [PATCH 39/55] add router in group settings

---
 webapp/pages/group/edit/_id.vue         |  63 +++-------
 webapp/pages/group/edit/_id/index.vue   | 150 ++++++++++++++++++++++++
 webapp/pages/group/edit/_id/members.vue |  57 +++++++++
 3 files changed, 224 insertions(+), 46 deletions(-)
 create mode 100644 webapp/pages/group/edit/_id/index.vue
 create mode 100644 webapp/pages/group/edit/_id/members.vue

diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index e1a131c70..c4bba7396 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -3,68 +3,39 @@
     <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-menu :routes="routes" :is-exact="() => true" />
       </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'" />
+        <transition name="slide-up" appear>
+          <nuxt-child :group="group" :update="true" @updateGroup="updateGroup" />
+        </transition>
       </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: {
     ...mapGetters({
       user: 'auth/user',
     }),
+    routes() {
+      return [
+      {
+            name: 'formular',
+            path: `/group/edit/${this.group.id}`
+          },
+          {
+            name: 'members',
+            path: `/group/edit/${this.group.id}/members`
+          },
+    ]},
   },
   async asyncData(context) {
     const {
diff --git a/webapp/pages/group/edit/_id/index.vue b/webapp/pages/group/edit/_id/index.vue
new file mode 100644
index 000000000..b144278d4
--- /dev/null
+++ b/webapp/pages/group/edit/_id/index.vue
@@ -0,0 +1,150 @@
+<template>
+    <div>
+      <ds-container>
+        <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="formData.groupType"
+            label="Sichtbarkeit"
+            :options="['public', 'close', 'hidden']"
+            placeholder="Status ..."
+          ></ds-select>
+  
+          <ds-input v-model="formData.about" label="Kurzbeschreibung" rows="3"></ds-input>
+  
+          <ds-input
+            v-model="formData.description"
+            label="Beschreibung"
+            type="textarea"
+            rows="3"
+          ></ds-input>
+  
+          <ds-select
+            icon="card"
+            v-model="formData.actionRadius"
+            label="Radius"
+            :options="['local', 'regional', 'global']"
+            placeholder="Radius ..."
+          ></ds-select>
+  
+          <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"
+              @click.prevent="submit()"
+              icon="save"
+              :disabled="disabled"
+              primary
+            >
+              {{ update ? $t('group.update') : $t('group.save') }}
+            </ds-button>
+          </ds-space>
+        </ds-form>
+        <ds-space centered>
+          <nuxt-link to="/group/my-groups">zurück</nuxt-link>
+        </ds-space>
+      </ds-container>
+    </div>
+  </template>
+  
+  <script>
+  import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
+  
+  export default {
+    name: 'GroupForm',
+    components: {
+      CategoriesSelect,
+    },
+    props: {
+      update: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      group: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+    },
+    data() {
+      const { name, groupType, about, description, actionRadius, categories } = this.group
+      return {
+        categoriesActive: this.$env.CATEGORIES_ACTIVE,
+        disabled: false,
+        formData: {
+          name: name || '',
+          groupType: groupType || '',
+          about: about || '',
+          description: description || '',
+          actionRadius: actionRadius || '',
+          categoryIds: categories ? categories.map((category) => category.id) : [],
+        },
+        formSchema: {
+          name: { required: true, min: 3, max: 100 },
+          groupType: { required: true },
+          about: { required: true },
+          description: { required: true },
+          actionRadius: { 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() {
+        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', {
+              name,
+              about,
+              description,
+              groupType,
+              actionRadius,
+              categoryIds,
+            })
+      },
+      reset() {
+        alert('reset')
+      },
+    },
+  }
+  </script>
+  
\ No newline at end of file
diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
new file mode 100644
index 000000000..f6d2ca49d
--- /dev/null
+++ b/webapp/pages/group/edit/_id/members.vue
@@ -0,0 +1,57 @@
+<template>
+    <div>
+      <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>
+        </template>
+      </ds-table>
+    </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',
+          },
+        ],
+      }
+    },
+    methods: {
+      deleteRow(row) {
+        const index = this.tableData.indexOf(row)
+        if (index > -1) {
+          this.tableData.splice(index, 1)
+        }
+      },
+    },
+  }
+  </script>
+  
\ No newline at end of file

From 109a5f5aa47eeb853aa339f917aa6b0f55b1ee8c Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 9 Sep 2022 11:11:15 +0200
Subject: [PATCH 40/55] fix lint

---
 webapp/pages/group/edit/_id.vue         |  21 +-
 webapp/pages/group/edit/_id/index.vue   | 283 ++++++++++++------------
 webapp/pages/group/edit/_id/members.vue | 107 +++++----
 3 files changed, 204 insertions(+), 207 deletions(-)

diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index c4bba7396..ca5f25415 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -11,7 +11,6 @@
         </transition>
       </ds-flex-item>
     </ds-flex>
-   
   </div>
 </template>
 
@@ -20,22 +19,22 @@ import { groupQuery, updateGroupMutation } from '~/graphql/groups.js'
 import { mapGetters } from 'vuex'
 
 export default {
-
   computed: {
     ...mapGetters({
       user: 'auth/user',
     }),
     routes() {
       return [
-      {
-            name: 'formular',
-            path: `/group/edit/${this.group.id}`
-          },
-          {
-            name: 'members',
-            path: `/group/edit/${this.group.id}/members`
-          },
-    ]},
+        {
+          name: 'formular',
+          path: `/group/edit/${this.group.id}`,
+        },
+        {
+          name: 'members',
+          path: `/group/edit/${this.group.id}/members`,
+        },
+      ]
+    },
   },
   async asyncData(context) {
     const {
diff --git a/webapp/pages/group/edit/_id/index.vue b/webapp/pages/group/edit/_id/index.vue
index b144278d4..1b2d2037f 100644
--- a/webapp/pages/group/edit/_id/index.vue
+++ b/webapp/pages/group/edit/_id/index.vue
@@ -1,150 +1,149 @@
 <template>
-    <div>
-      <ds-container>
-        <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="formData.groupType"
-            label="Sichtbarkeit"
-            :options="['public', 'close', 'hidden']"
-            placeholder="Status ..."
-          ></ds-select>
-  
-          <ds-input v-model="formData.about" label="Kurzbeschreibung" rows="3"></ds-input>
-  
-          <ds-input
-            v-model="formData.description"
-            label="Beschreibung"
-            type="textarea"
-            rows="3"
-          ></ds-input>
-  
-          <ds-select
-            icon="card"
-            v-model="formData.actionRadius"
-            label="Radius"
-            :options="['local', 'regional', 'global']"
-            placeholder="Radius ..."
-          ></ds-select>
-  
-          <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"
-              @click.prevent="submit()"
-              icon="save"
-              :disabled="disabled"
-              primary
-            >
-              {{ update ? $t('group.update') : $t('group.save') }}
-            </ds-button>
-          </ds-space>
-        </ds-form>
-        <ds-space centered>
-          <nuxt-link to="/group/my-groups">zurück</nuxt-link>
+  <div>
+    <ds-container>
+      <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="formData.groupType"
+          label="Sichtbarkeit"
+          :options="['public', 'close', 'hidden']"
+          placeholder="Status ..."
+        ></ds-select>
+
+        <ds-input v-model="formData.about" label="Kurzbeschreibung" rows="3"></ds-input>
+
+        <ds-input
+          v-model="formData.description"
+          label="Beschreibung"
+          type="textarea"
+          rows="3"
+        ></ds-input>
+
+        <ds-select
+          icon="card"
+          v-model="formData.actionRadius"
+          label="Radius"
+          :options="['local', 'regional', 'global']"
+          placeholder="Radius ..."
+        ></ds-select>
+
+        <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"
+            @click.prevent="submit()"
+            icon="save"
+            :disabled="disabled"
+            primary
+          >
+            {{ update ? $t('group.update') : $t('group.save') }}
+          </ds-button>
         </ds-space>
-      </ds-container>
-    </div>
-  </template>
-  
-  <script>
-  import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
-  
-  export default {
-    name: 'GroupForm',
-    components: {
-      CategoriesSelect,
+      </ds-form>
+      <ds-space centered>
+        <nuxt-link to="/group/my-groups">zurück</nuxt-link>
+      </ds-space>
+    </ds-container>
+  </div>
+</template>
+
+<script>
+import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
+
+export default {
+  name: 'GroupForm',
+  components: {
+    CategoriesSelect,
+  },
+  props: {
+    update: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-    props: {
-      update: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      group: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
+    group: {
+      type: Object,
+      required: false,
+      default: () => ({}),
     },
-    data() {
-      const { name, groupType, about, description, actionRadius, categories } = this.group
-      return {
-        categoriesActive: this.$env.CATEGORIES_ACTIVE,
-        disabled: false,
-        formData: {
-          name: name || '',
-          groupType: groupType || '',
-          about: about || '',
-          description: description || '',
-          actionRadius: actionRadius || '',
-          categoryIds: categories ? categories.map((category) => category.id) : [],
-        },
-        formSchema: {
-          name: { required: true, min: 3, max: 100 },
-          groupType: { required: true },
-          about: { required: true },
-          description: { required: true },
-          actionRadius: { 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 []
-            },
+  },
+  data() {
+    const { name, groupType, about, description, actionRadius, categories } = this.group
+    return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+      disabled: false,
+      formData: {
+        name: name || '',
+        groupType: groupType || '',
+        about: about || '',
+        description: description || '',
+        actionRadius: actionRadius || '',
+        categoryIds: categories ? categories.map((category) => category.id) : [],
+      },
+      formSchema: {
+        name: { required: true, min: 3, max: 100 },
+        groupType: { required: true },
+        about: { required: true },
+        description: { required: true },
+        actionRadius: { 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() {
-        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', {
-              name,
-              about,
-              description,
-              groupType,
-              actionRadius,
-              categoryIds,
-            })
-      },
-      reset() {
-        alert('reset')
       },
+    }
+  },
+
+  methods: {
+    submit() {
+      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', {
+            name,
+            about,
+            description,
+            groupType,
+            actionRadius,
+            categoryIds,
+          })
     },
-  }
-  </script>
-  
\ No newline at end of file
+    reset() {
+      alert('reset')
+    },
+  },
+}
+</script>
diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
index f6d2ca49d..64edae6a3 100644
--- a/webapp/pages/group/edit/_id/members.vue
+++ b/webapp/pages/group/edit/_id/members.vue
@@ -1,57 +1,56 @@
 <template>
-    <div>
-      <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>
-        </template>
-      </ds-table>
-    </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',
-          },
-        ],
+  <div>
+    <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>
+      </template>
+    </ds-table>
+  </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',
+        },
+      ],
+    }
+  },
+  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>
-  
\ No newline at end of file
+  },
+}
+</script>

From a32a2d03be5efc3f6f040474dbc307fa8f94d5ce Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 9 Sep 2022 11:30:48 +0200
Subject: [PATCH 41/55] Update webapp/locales/de.json
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 webapp/locales/de.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index a1e25444f..5f3963e09 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -372,8 +372,8 @@
   },
   "group": {
     "newGroup": "Erstelle eine neue Gruppe",
-    "group-created": "Die Gruppe wurde angelegt.",
-    "group-updated": "Die Gruppendaten wurden geändert.",
+    "group-created": "Die Gruppe wurde angelegt!",
+    "group-updated": "Die Gruppendaten wurden geändert!",
     "save":"neue Gruppe anlegen",
     "update":"Änderung speichern"
   },

From b312ce49a5f3cfca60f94f5999949fb6a54862c1 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 9 Sep 2022 11:31:00 +0200
Subject: [PATCH 42/55] Update webapp/locales/de.json
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 webapp/locales/de.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 5f3963e09..c684a3d7b 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -374,7 +374,7 @@
     "newGroup": "Erstelle eine neue Gruppe",
     "group-created": "Die Gruppe wurde angelegt!",
     "group-updated": "Die Gruppendaten wurden geändert!",
-    "save":"neue Gruppe anlegen",
+    "save":"Neue Gruppe anlegen",
     "update":"Änderung speichern"
   },
   "hashtags-filter": {

From ca8047138edd1a749f048eb645c52534d29f4842 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 9 Sep 2022 11:31:08 +0200
Subject: [PATCH 43/55] Update webapp/locales/en.json
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 webapp/locales/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index eb590d5c6..7d9ea7a3d 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -372,7 +372,7 @@
   },
   "group": {
     "newGroup": "Create a new Group",
-    "group-created": "The group was created.",
+    "group-created": "The group was created!",
     "group-updated": "The group data has been changed.",
     "save":"Create new group",
     "update":"Save change"

From 3d5f29c0f1d7d372942036e8ab80b15c99c4a03b Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 9 Sep 2022 12:17:48 +0200
Subject: [PATCH 44/55] change page structure for groupe settings

---
 webapp/components/Group/GroupForm.vue |   7 +-
 webapp/pages/group/create.vue         |  14 +--
 webapp/pages/group/edit/_id.vue       |  28 +----
 webapp/pages/group/edit/_id/index.vue | 141 +++-----------------------
 4 files changed, 28 insertions(+), 162 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 1b2d2037f..4d4593a7b 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -35,13 +35,12 @@
           icon="card"
           v-model="formData.actionRadius"
           label="Radius"
-          :options="['local', 'regional', 'global']"
+          :options="['regional', 'national', 'continental', 'global']"
           placeholder="Radius ..."
         ></ds-select>
-
         <categories-select
           v-if="categoriesActive"
-          model="formData.categoryIds"
+          model="categoryIds"
           :existingCategoryIds="formData.categoryIds"
         />
 
@@ -60,7 +59,7 @@
           </ds-button>
         </ds-space>
       </ds-form>
-      <ds-space centered>
+      <ds-space centered v-show="!update">
         <nuxt-link to="/group/my-groups">zurück</nuxt-link>
       </ds-space>
     </ds-container>
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index 135039d13..1c95fffbc 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -29,21 +29,15 @@ export default {
   },
   methods: {
     async createGroup(value) {
+      const { name, about, description, groupType, actionRadius, categoryIds } = value
+      const variables = { name, about, description, groupType, actionRadius, categoryIds }
       try {
         await this.$apollo.mutate({
           mutation: createGroupMutation,
-          variables: value,
-          update: (_, { data: { createGroupData } }) => {
-            // const { sendNotificationEmails } = createGroup
-            // this.setCreateGroup({
-            //   ...this.createGroup,
-            //   sendNotificationEmails,
-            // })
-            this.$toast.success(this.$t('group.group-created'))
-          },
+          variables,
         })
+        this.$toast.success(this.$t('group.group-created'))
       } catch (error) {
-        // this.notifyByEmail = !this.notifyByEmail
         this.$toast.error(error.message)
       }
     },
diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index ca5f25415..4d8f3d7ad 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -7,15 +7,18 @@
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', md: 1 }">
         <transition name="slide-up" appear>
-          <nuxt-child :group="group" :update="true" @updateGroup="updateGroup" />
+          <nuxt-child :group="group" />
         </transition>
       </ds-flex-item>
     </ds-flex>
+    <ds-space centered>
+        <nuxt-link to="/group/my-groups">zurück</nuxt-link>
+      </ds-space>
   </div>
 </template>
 
 <script>
-import { groupQuery, updateGroupMutation } from '~/graphql/groups.js'
+import { groupQuery } from '~/graphql/groups.js'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -56,26 +59,5 @@ export default {
     }
     return { group }
   },
-  methods: {
-    async updateGroup(value) {
-      try {
-        await this.$apollo.mutate({
-          mutation: updateGroupMutation,
-          variables: value,
-          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>
diff --git a/webapp/pages/group/edit/_id/index.vue b/webapp/pages/group/edit/_id/index.vue
index 1b2d2037f..7930f92fc 100644
--- a/webapp/pages/group/edit/_id/index.vue
+++ b/webapp/pages/group/edit/_id/index.vue
@@ -1,148 +1,39 @@
 <template>
   <div>
     <ds-container>
-      <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="formData.groupType"
-          label="Sichtbarkeit"
-          :options="['public', 'close', 'hidden']"
-          placeholder="Status ..."
-        ></ds-select>
-
-        <ds-input v-model="formData.about" label="Kurzbeschreibung" rows="3"></ds-input>
-
-        <ds-input
-          v-model="formData.description"
-          label="Beschreibung"
-          type="textarea"
-          rows="3"
-        ></ds-input>
-
-        <ds-select
-          icon="card"
-          v-model="formData.actionRadius"
-          label="Radius"
-          :options="['local', 'regional', 'global']"
-          placeholder="Radius ..."
-        ></ds-select>
-
-        <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"
-            @click.prevent="submit()"
-            icon="save"
-            :disabled="disabled"
-            primary
-          >
-            {{ update ? $t('group.update') : $t('group.save') }}
-          </ds-button>
-        </ds-space>
-      </ds-form>
-      <ds-space centered>
-        <nuxt-link to="/group/my-groups">zurück</nuxt-link>
-      </ds-space>
+      <group-form :group="group" :update="true" @updateGroup="updateGroup" />
     </ds-container>
   </div>
 </template>
 
 <script>
-import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
+import GroupForm from '~/components/Group/GroupForm'
+import { updateGroupMutation } from '~/graphql/groups.js'
 
 export default {
-  name: 'GroupForm',
   components: {
-    CategoriesSelect,
+    GroupForm,
   },
   props: {
-    update: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     group: {
       type: Object,
       required: false,
       default: () => ({}),
     },
   },
-  data() {
-    const { name, groupType, about, description, actionRadius, categories } = this.group
-    return {
-      categoriesActive: this.$env.CATEGORIES_ACTIVE,
-      disabled: false,
-      formData: {
-        name: name || '',
-        groupType: groupType || '',
-        about: about || '',
-        description: description || '',
-        actionRadius: actionRadius || '',
-        categoryIds: categories ? categories.map((category) => category.id) : [],
-      },
-      formSchema: {
-        name: { required: true, min: 3, max: 100 },
-        groupType: { required: true },
-        about: { required: true },
-        description: { required: true },
-        actionRadius: { 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() {
-      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', {
-            name,
-            about,
-            description,
-            groupType,
-            actionRadius,
-            categoryIds,
-          })
-    },
-    reset() {
-      alert('reset')
+    async updateGroup(value) {
+      const { id, name, about, description, groupType, actionRadius, categoryIds } = value
+      const variables = { id, name, about, description, groupType, actionRadius, categoryIds }
+      try {
+        await this.$apollo.mutate({
+          mutation: updateGroupMutation,
+          variables,
+        })
+        this.$toast.success(this.$t('group.group-updated'))
+      } catch (error) {
+        this.$toast.error(error.message)
+      }
     },
   },
 }

From 07b3857e4babc48f7d7c311b0ba26f218f878e45 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 9 Sep 2022 12:18:57 +0200
Subject: [PATCH 45/55] Update webapp/pages/group/edit/_id/index.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 webapp/pages/group/edit/_id/index.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/pages/group/edit/_id/index.vue b/webapp/pages/group/edit/_id/index.vue
index 1b2d2037f..87fe95b23 100644
--- a/webapp/pages/group/edit/_id/index.vue
+++ b/webapp/pages/group/edit/_id/index.vue
@@ -119,7 +119,6 @@ export default {
       },
     }
   },
-
   methods: {
     submit() {
       const { name, about, description, groupType, actionRadius, categoryIds } = this.formData

From a5d5dd7eda14b84027b0c9ec4120318d79b96356 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 9 Sep 2022 12:23:51 +0200
Subject: [PATCH 46/55] import GroupMembers component in group settings

---
 webapp/components/Group/GroupMember.vue |  4 +-
 webapp/pages/group/edit/_id/members.vue | 62 +++++--------------------
 2 files changed, 13 insertions(+), 53 deletions(-)

diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index 64edae6a3..f522ee795 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <ds-space><h3>Members</h3></ds-space>
-    <ds-table :data="tableData" :fields="tableFields">
+    <ds-table :data="GroupMembers" :fields="tableFields">
       <template slot="avatar">
         <ds-avatar online size="small" name="Hans Peter"></ds-avatar>
       </template>
@@ -20,7 +20,7 @@ export default {
   data() {
     return {
       tableFields: ['avatar', 'name', 'type', 'loves', 'edit'],
-      tableData: [
+      GroupMembers: [
         {
           name: 'Rengar',
           type: 'Jungler',
diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
index 64edae6a3..fa22b19c9 100644
--- a/webapp/pages/group/edit/_id/members.vue
+++ b/webapp/pages/group/edit/_id/members.vue
@@ -1,56 +1,16 @@
 <template>
-  <div>
-    <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>
-      </template>
-    </ds-table>
-  </div>
-</template>
-<script>
+    <div>
+      <ds-container>
+        <group-member />
+      </ds-container>
+    </div>
+  </template>
+  
+  <script>
+  import GroupMember from '~/components/Group/GroupMember'
 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',
-        },
-      ],
+    components: {
+        GroupMember,
     }
-  },
-  methods: {
-    deleteRow(row) {
-      const index = this.tableData.indexOf(row)
-      if (index > -1) {
-        this.tableData.splice(index, 1)
-      }
-    },
-  },
 }
 </script>

From ad029247e7f5d8cccab34f242a63eade1f12c851 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 9 Sep 2022 13:03:38 +0200
Subject: [PATCH 47/55] Update webapp/components/Group/GroupForm.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 webapp/components/Group/GroupForm.vue | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 1b2d2037f..cd04f3dd4 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -123,23 +123,20 @@ export default {
   methods: {
     submit() {
       const { name, about, description, groupType, actionRadius, categoryIds } = this.formData
+      const variables = {
+        name,
+        about,
+        description,
+        groupType,
+        actionRadius,
+        categoryIds,
+      }
       this.update
         ? this.$emit('updateGroup', {
-            name,
-            about,
-            description,
-            actionRadius,
-            categoryIds,
+            ...variables,
             id: this.group.id,
           })
-        : this.$emit('createGroup', {
-            name,
-            about,
-            description,
-            groupType,
-            actionRadius,
-            categoryIds,
-          })
+        : this.$emit('createGroup', variables)
     },
     reset() {
       alert('reset')

From 62f57681eb878880fd0b14fa1b61099432c51c0e Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 9 Sep 2022 13:04:15 +0200
Subject: [PATCH 48/55] Update webapp/pages/group/edit/_id.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 webapp/pages/group/edit/_id.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index ca5f25415..bf27b3c88 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -26,7 +26,7 @@ export default {
     routes() {
       return [
         {
-          name: 'formular',
+          name: 'General',
           path: `/group/edit/${this.group.id}`,
         },
         {

From 7cb965e9adb1b32c79c5c5ec468c11dfa8fff6be Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 9 Sep 2022 13:04:26 +0200
Subject: [PATCH 49/55] Update webapp/pages/group/edit/_id.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 webapp/pages/group/edit/_id.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index bf27b3c88..fc15118c1 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -30,7 +30,7 @@ export default {
           path: `/group/edit/${this.group.id}`,
         },
         {
-          name: 'members',
+          name: 'Members',
           path: `/group/edit/${this.group.id}/members`,
         },
       ]

From a1da04ec050b7daa7ed63ba5b592f96b55380a80 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 9 Sep 2022 13:06:13 +0200
Subject: [PATCH 50/55] change components add constants

---
 .../CategoriesSelect/CategoriesSelect.vue     |  3 ++-
 webapp/components/Group/GroupCard.vue         |  2 +-
 webapp/components/Group/GroupForm.vue         |  6 +++--
 webapp/constants/groups.js                    |  2 ++
 webapp/pages/group/edit/_id.vue               |  4 ++--
 webapp/pages/group/edit/_id/members.vue       | 24 +++++++++----------
 webapp/pages/{group => }/my-groups.vue        |  0
 webapp/pages/settings.vue                     |  2 +-
 8 files changed, 24 insertions(+), 19 deletions(-)
 rename webapp/pages/{group => }/my-groups.vue (100%)

diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index b7d71de2d..48852d009 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@@ -17,6 +17,7 @@
 
 <script>
 import CategoryQuery from '~/graphql/CategoryQuery'
+import { CATEGORIES_MAX } from '~/constants/categories.js'
 import xor from 'lodash/xor'
 
 export default {
@@ -32,7 +33,7 @@ export default {
   data() {
     return {
       categories: null,
-      selectedMax: 3,
+      selectedMax: CATEGORIES_MAX,
       selectedCategoryIds: this.existingCategoryIds,
     }
   },
diff --git a/webapp/components/Group/GroupCard.vue b/webapp/components/Group/GroupCard.vue
index f5a4970fa..81e593cce 100644
--- a/webapp/components/Group/GroupCard.vue
+++ b/webapp/components/Group/GroupCard.vue
@@ -3,7 +3,7 @@
     <ds-container class="group-card">
       <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>
+        <nuxt-link :to="`/group/${item.id}`">{{ item.name }}</nuxt-link>
         {{ item.categories ? item.categories.map((category) => category.name) : [] }}
         <div>{{ item }}</div>
         <ds-space>
diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 4d4593a7b..dac2a6b72 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -68,6 +68,8 @@
 
 <script>
 import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
+import { CATEGORIES_MIN, CATEGORIES_MAX } from '~/constants/categories.js'
+import { NAME_LENGTH_MIN, NAME_LENGTH_MAX } from '~/constants/groups.js'
 
 export default {
   name: 'GroupForm',
@@ -100,7 +102,7 @@ export default {
         categoryIds: categories ? categories.map((category) => category.id) : [],
       },
       formSchema: {
-        name: { required: true, min: 3, max: 100 },
+        name: { required: true, min: NAME_LENGTH_MIN, max: NAME_LENGTH_MAX },
         groupType: { required: true },
         about: { required: true },
         description: { required: true },
@@ -109,7 +111,7 @@ export default {
           type: 'array',
           required: this.categoriesActive,
           validator: (_, value = []) => {
-            if (this.categoriesActive && (value.length === 0 || value.length > 3)) {
+            if (this.categoriesActive && (value.length < CATEGORIES_MIN || value.length > CATEGORIES_MAX)) {
               return [new Error(this.$t('common.validations.categories'))]
             }
             return []
diff --git a/webapp/constants/groups.js b/webapp/constants/groups.js
index b4a6063f1..d3eeb03cf 100644
--- a/webapp/constants/groups.js
+++ b/webapp/constants/groups.js
@@ -1,2 +1,4 @@
 // this file is duplicated in `backend/src/constants/group.js` and `webapp/constants/group.js`
+export const NAME_LENGTH_MIN = 3
+export const NAME_LENGTH_MAX = 50 
 export const DESCRIPTION_WITHOUT_HTML_LENGTH_MIN = 100 // with removed HTML tags
diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index 4d8f3d7ad..4e3beedc0 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -12,8 +12,8 @@
       </ds-flex-item>
     </ds-flex>
     <ds-space centered>
-        <nuxt-link to="/group/my-groups">zurück</nuxt-link>
-      </ds-space>
+      <nuxt-link to="/group/my-groups">zurück</nuxt-link>
+    </ds-space>
   </div>
 </template>
 
diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
index fa22b19c9..3902137f0 100644
--- a/webapp/pages/group/edit/_id/members.vue
+++ b/webapp/pages/group/edit/_id/members.vue
@@ -1,16 +1,16 @@
 <template>
-    <div>
-      <ds-container>
-        <group-member />
-      </ds-container>
-    </div>
-  </template>
-  
-  <script>
-  import GroupMember from '~/components/Group/GroupMember'
+  <div>
+    <ds-container>
+      <group-member />
+    </ds-container>
+  </div>
+</template>
+
+<script>
+import GroupMember from '~/components/Group/GroupMember'
 export default {
-    components: {
-        GroupMember,
-    }
+  components: {
+    GroupMember,
+  },
 }
 </script>
diff --git a/webapp/pages/group/my-groups.vue b/webapp/pages/my-groups.vue
similarity index 100%
rename from webapp/pages/group/my-groups.vue
rename to webapp/pages/my-groups.vue
diff --git a/webapp/pages/settings.vue b/webapp/pages/settings.vue
index 96ea66976..660449fb6 100644
--- a/webapp/pages/settings.vue
+++ b/webapp/pages/settings.vue
@@ -41,7 +41,7 @@ export default {
         },
         {
           name: this.$t('settings.myGroups'),
-          path: `/group/my-groups`,
+          path: `/my-groups`,
         },
         {
           name: this.$t('settings.muted-users.name'),

From 80940ae4f513315e9e019ee403a43f9b0e6f322a Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 9 Sep 2022 13:06:46 +0200
Subject: [PATCH 51/55] fix lint

---
 webapp/components/Group/GroupForm.vue | 5 ++++-
 webapp/constants/groups.js            | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index dac2a6b72..495667d1a 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -111,7 +111,10 @@ export default {
           type: 'array',
           required: this.categoriesActive,
           validator: (_, value = []) => {
-            if (this.categoriesActive && (value.length < CATEGORIES_MIN || value.length > CATEGORIES_MAX)) {
+            if (
+              this.categoriesActive &&
+              (value.length < CATEGORIES_MIN || value.length > CATEGORIES_MAX)
+            ) {
               return [new Error(this.$t('common.validations.categories'))]
             }
             return []
diff --git a/webapp/constants/groups.js b/webapp/constants/groups.js
index d3eeb03cf..3abf0d12a 100644
--- a/webapp/constants/groups.js
+++ b/webapp/constants/groups.js
@@ -1,4 +1,4 @@
 // this file is duplicated in `backend/src/constants/group.js` and `webapp/constants/group.js`
 export const NAME_LENGTH_MIN = 3
-export const NAME_LENGTH_MAX = 50 
+export const NAME_LENGTH_MAX = 50
 export const DESCRIPTION_WITHOUT_HTML_LENGTH_MIN = 100 // with removed HTML tags

From c155555ba2497422ffbfce2acb9e04026928010d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 10 Sep 2022 08:55:24 +0200
Subject: [PATCH 52/55] Fix locales

---
 webapp/locales/de.json | 8 ++++----
 webapp/locales/en.json | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index c684a3d7b..4e046044b 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -371,11 +371,11 @@
     "following": "Folge Ich"
   },
   "group": {
-    "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"
+    "newGroup": "Erstelle eine neue Gruppe",
+    "save": "Neue Gruppe anlegen",
+    "update": "Änderung speichern"
   },
   "hashtags-filter": {
     "clearSearch": "Suche löschen",
@@ -730,7 +730,6 @@
         }
       }
     },
-    "myGroups": "Meine Gruppen",
     "invites": {
       "name": "Einladungen"
     },
@@ -755,6 +754,7 @@
       "unmute": "Stummschaltung aufheben",
       "unmuted": "{name} ist nicht mehr stummgeschaltet"
     },
+    "myGroups": "Meine Gruppen",
     "name": "Einstellungen",
     "notifications": {
       "name": "Benachrichtigungen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 7d9ea7a3d..2f5bef5fe 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -371,11 +371,11 @@
     "following": "Following"
   },
   "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"
+    "newGroup": "Create a new Group",
+    "save": "Create new group",
+    "update": "Save change"
   },
   "hashtags-filter": {
     "clearSearch": "Clear search",
@@ -730,7 +730,6 @@
         }
       }
     },
-    "myGroups": "My Groups",
     "invites": {
       "name": "Invites"
     },
@@ -755,6 +754,7 @@
       "unmute": "Unmute user",
       "unmuted": "{name} is unmuted again"
     },
+    "myGroups": "My Groups",
     "name": "Settings",
     "notifications": {
       "name": "Notifications",

From 1796a04a9ca688cd5e9b062785cd74d0e746a30f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 10 Sep 2022 08:57:06 +0200
Subject: [PATCH 53/55] Update webapp/components/Group/GroupForm.vue

---
 webapp/components/Group/GroupForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 3118da581..d79349fda 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -18,7 +18,7 @@
           icon="user"
           v-model="formData.groupType"
           label="Sichtbarkeit"
-          :options="['public', 'close', 'hidden']"
+          :options="['public', 'closed', 'hidden']"
           placeholder="Status ..."
         ></ds-select>
 

From 5b1643208b15eb8e02ee147c533df110f3351b87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 10 Sep 2022 12:36:49 +0200
Subject: [PATCH 54/55] Upgrade neode from v^0.4.7 to v^0.4.8 in backend and
 main folder

---
 backend/package.json | 2 +-
 backend/yarn.lock    | 8 ++++----
 package.json         | 2 +-
 yarn.lock            | 8 ++++----
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/backend/package.json b/backend/package.json
index 62db1cf0f..f6299ee48 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -103,7 +103,7 @@
     "mustache": "^4.2.0",
     "neo4j-driver": "^4.0.2",
     "neo4j-graphql-js": "^2.11.5",
-    "neode": "^0.4.7",
+    "neode": "^0.4.8",
     "node-fetch": "~2.6.1",
     "nodemailer": "^6.4.4",
     "nodemailer-html-to-text": "^3.2.0",
diff --git a/backend/yarn.lock b/backend/yarn.lock
index 18f65abee..48c05947e 100644
--- a/backend/yarn.lock
+++ b/backend/yarn.lock
@@ -7574,10 +7574,10 @@ neo4j-graphql-js@^2.11.5:
     lodash "^4.17.15"
     neo4j-driver "^4.0.1"
 
-neode@^0.4.7:
-  version "0.4.7"
-  resolved "https://registry.yarnpkg.com/neode/-/neode-0.4.7.tgz#033007b57a2ee167e9ee5537493086db08d005eb"
-  integrity sha512-YXlc187JRpeKCBcUIkY6nimXXG+Tvlopfe71/FPno2THrwmYt5mm0RPHZ+mXF2O1Xg6zvjKvOpCpDz2vHBfroQ==
+neode@^0.4.8:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/neode/-/neode-0.4.8.tgz#0889b4fc7f1bf0b470b01fa5b8870373b5d47ad6"
+  integrity sha512-pb91NfCOg4Fj5o+98H+S2XYC+ByQfbdhwcc1UVuzuUQ0Ezzj+jWz8NmKWU8ZfCH6l4plk71yDAPd2eTwpt+Xvg==
   dependencies:
     "@hapi/joi" "^15.1.1"
     dotenv "^4.0.0"
diff --git a/package.json b/package.json
index a36063f04..d7463adac 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "jsonwebtoken": "^8.5.1",
     "mock-socket": "^9.0.3",
     "neo4j-driver": "^4.3.4",
-    "neode": "^0.4.7",
+    "neode": "^0.4.8",
     "npm-run-all": "^4.1.5",
     "rosie": "^2.1.0",
     "slug": "^6.0.0"
diff --git a/yarn.lock b/yarn.lock
index 7b1c5eb79..6103f10a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4481,10 +4481,10 @@ neo4j-driver@^4.2.2, neo4j-driver@^4.3.4:
     neo4j-driver-core "^4.3.4"
     rxjs "^6.6.3"
 
-neode@^0.4.7:
-  version "0.4.7"
-  resolved "https://registry.yarnpkg.com/neode/-/neode-0.4.7.tgz#033007b57a2ee167e9ee5537493086db08d005eb"
-  integrity sha512-YXlc187JRpeKCBcUIkY6nimXXG+Tvlopfe71/FPno2THrwmYt5mm0RPHZ+mXF2O1Xg6zvjKvOpCpDz2vHBfroQ==
+neode@^0.4.8:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/neode/-/neode-0.4.8.tgz#0889b4fc7f1bf0b470b01fa5b8870373b5d47ad6"
+  integrity sha512-pb91NfCOg4Fj5o+98H+S2XYC+ByQfbdhwcc1UVuzuUQ0Ezzj+jWz8NmKWU8ZfCH6l4plk71yDAPd2eTwpt+Xvg==
   dependencies:
     "@hapi/joi" "^15.1.1"
     dotenv "^4.0.0"

From 7bb3a05b07fe95ae89d7a626bff265420ea25c90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 14 Sep 2022 16:10:55 +0200
Subject: [PATCH 55/55] Clarify conversion to Cypher literal map for use as
 'MATCH' parameter by making a resolver helper function

---
 backend/src/schema/resolvers/groups.js        | 19 ++++++-----------
 .../src/schema/resolvers/helpers/Resolver.js  | 21 +++++++++++++++++++
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/backend/src/schema/resolvers/groups.js b/backend/src/schema/resolvers/groups.js
index 73ce56c0c..4349ac9bf 100644
--- a/backend/src/schema/resolvers/groups.js
+++ b/backend/src/schema/resolvers/groups.js
@@ -4,7 +4,10 @@ import CONFIG from '../../config'
 import { CATEGORIES_MIN, CATEGORIES_MAX } from '../../constants/categories'
 import { DESCRIPTION_WITHOUT_HTML_LENGTH_MIN } from '../../constants/groups'
 import { removeHtmlTags } from '../../middleware/helpers/cleanHtml.js'
-import Resolver from './helpers/Resolver'
+import Resolver, {
+  removeUndefinedNullValuesFromObject,
+  convertObjectToCypherMapLiteral,
+} from './helpers/Resolver'
 import { mergeImage } from './images/images'
 
 export default {
@@ -12,20 +15,10 @@ export default {
     Group: async (_object, params, context, _resolveInfo) => {
       const { isMember, id, slug } = params
       const matchParams = { id, slug }
-      Object.keys(matchParams).forEach((key) => {
-        if ([undefined, null].includes(matchParams[key])) {
-          delete matchParams[key]
-        }
-      })
+      removeUndefinedNullValuesFromObject(matchParams)
       const session = context.driver.session()
       const readTxResultPromise = session.readTransaction(async (txc) => {
-        const matchParamsEntries = Object.entries(matchParams)
-        let groupMatchParamsCypher = ''
-        matchParamsEntries.forEach((ele, index) => {
-          groupMatchParamsCypher += index === 0 ? ' {' : ''
-          groupMatchParamsCypher += `${ele[0]}: "${ele[1]}"`
-          groupMatchParamsCypher += index < matchParamsEntries.length - 1 ? ', ' : '}'
-        })
+        const groupMatchParamsCypher = convertObjectToCypherMapLiteral(matchParams)
         let groupCypher
         if (isMember === true) {
           groupCypher = `
diff --git a/backend/src/schema/resolvers/helpers/Resolver.js b/backend/src/schema/resolvers/helpers/Resolver.js
index f2861e7a0..56d382690 100644
--- a/backend/src/schema/resolvers/helpers/Resolver.js
+++ b/backend/src/schema/resolvers/helpers/Resolver.js
@@ -121,3 +121,24 @@ export default function Resolver(type, options = {}) {
   }
   return result
 }
+
+export const removeUndefinedNullValuesFromObject = (obj) => {
+  Object.keys(obj).forEach((key) => {
+    if ([undefined, null].includes(obj[key])) {
+      delete obj[key]
+    }
+  })
+}
+
+export const convertObjectToCypherMapLiteral = (params) => {
+  // I have found no other way yet. maybe "apoc.convert.fromJsonMap(key)" can help, but couldn't get it how, see: https://stackoverflow.com/questions/43217823/neo4j-cypher-inline-conversion-of-string-to-a-map
+  // result looks like: '{id: "g0", slug: "yoga"}'
+  const paramsEntries = Object.entries(params)
+  let mapLiteral = ''
+  paramsEntries.forEach((ele, index) => {
+    mapLiteral += index === 0 ? ' {' : ''
+    mapLiteral += `${ele[0]}: "${ele[1]}"`
+    mapLiteral += index < paramsEntries.length - 1 ? ', ' : '}'
+  })
+  return mapLiteral
+}