From a2561bde89779d020c144f651e7446938434c97b Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 12 Sep 2022 13:16:55 +0200
Subject: [PATCH 01/38] member management first step

---
 webapp/components/Group/GroupMember.vue | 91 ++++++++++++++++---------
 webapp/pages/group/edit/_id/members.vue | 36 +++++++++-
 2 files changed, 92 insertions(+), 35 deletions(-)

diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index f522ee795..f1113f5eb 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -1,56 +1,83 @@
 <template>
   <div>
     <ds-space><h3>Members</h3></ds-space>
-    <ds-table :data="GroupMembers" :fields="tableFields">
+    <ds-table :data="responseGroupMembersQuery" :fields="tableFields" condensed>
       <template slot="avatar">
-        <ds-avatar online size="small" name="Hans Peter"></ds-avatar>
+        <ds-avatar online size="small" :name="responseGroupMembersQuery.name"></ds-avatar>
       </template>
-      <template slot="loves" slot-scope="scope">
-        {{ scope.row.name }} loves {{ scope.row.loves }}
+      <template slot="myRoleInGroup" slot-scope="scope">
+        <ds-select
+          v-if="scope.row.myRoleInGroup !== 'owner'"
+          :options="['usual', 'admin']"
+          v-model="scope.row.myRoleInGroup"
+          :value="scope.row.myRoleInGroup"
+          @input="changeMemberRole(scope.row.id, scope.row.myRoleInGroup)"
+        ></ds-select>
       </template>
       <template slot="edit" slot-scope="scope">
-        <ds-button size="small" @click="deleteRow(scope.row)">delete</ds-button>
+        <ds-button
+          v-if="scope.row.myRoleInGroup !== 'owner'"
+          size="small"
+          @click="openModal(scope.row)"
+        >
+          delete
+        </ds-button>
       </template>
     </ds-table>
+    <ds-modal
+      v-if="isOpen"
+      v-model="isOpen"
+      title="delete member ?"
+      force
+      extended
+      confirm-label="delete member"
+      @confirm="deleteMember(memberId)"
+      cancel-label="Please not"
+    />
   </div>
 </template>
 <script>
+import { changeGroupMemberRoleMutation } from '~/graphql/groups.js'
+
 export default {
   name: 'GroupMember',
+  props: {
+    groupId: {
+      type: String,
+      required: true,
+    },
+    responseGroupMembersQuery: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
   data() {
     return {
-      tableFields: ['avatar', 'name', 'type', 'loves', 'edit'],
-      GroupMembers: [
-        {
-          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',
-        },
-      ],
+      isOpen: false,
+      memberId: null,
+      tableFields: ['avatar', 'name', 'slug', 'myRoleInGroup', 'edit'],
     }
   },
   methods: {
-    deleteRow(row) {
-      const index = this.tableData.indexOf(row)
-      if (index > -1) {
-        this.tableData.splice(index, 1)
+    async changeMemberRole(id, value) {
+      try {
+        await this.$apollo.mutate({
+          mutation: changeGroupMemberRoleMutation,
+          variables: { groupId: this.groupId, userId: id, roleInGroup: value },
+        })
+        // this.$toast.success(this.$t('group.group-updated'))
+      } catch (error) {
+        this.$toast.error(error.message)
       }
     },
+    openModal(row) {
+      this.isOpen = true
+      this.memberId = row.id
+    },
+    deleteMember(id) {
+      alert('deleteMember: ' + id)
+    },
   },
 }
 </script>
diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
index 3902137f0..7b2c72cfc 100644
--- a/webapp/pages/group/edit/_id/members.vue
+++ b/webapp/pages/group/edit/_id/members.vue
@@ -1,16 +1,46 @@
 <template>
   <div>
-    <ds-container>
-      <group-member />
-    </ds-container>
+    <group-member :responseGroupMembersQuery="responseGroupMembersQuery" :groupId="group.id" />
   </div>
 </template>
 
 <script>
 import GroupMember from '~/components/Group/GroupMember'
+import { groupMembersQuery } from '~/graphql/groups.js'
+
 export default {
   components: {
     GroupMember,
   },
+  props: {
+    group: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      responseGroupMembersQuery: [],
+    }
+  },
+  methods: {
+    async groupMembersQueryList() {
+      try {
+        const response = await this.$apollo.query({
+          query: groupMembersQuery,
+          variables: { id: this.group.id },
+        })
+        this.responseGroupMembersQuery = response.data.GroupMembers
+      } catch (error) {
+        this.responseGroupMembersQuery = []
+      } finally {
+        this.pending = false
+      }
+    },
+  },
+  created() {
+    this.groupMembersQueryList()
+  },
 }
 </script>

From 6d5f37a7b2a0421c91f835f8d21d578c6401682b Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 12 Sep 2022 13:19:14 +0200
Subject: [PATCH 02/38] add success toaster if changeMemberRole

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

diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index f1113f5eb..44334b094 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -66,7 +66,7 @@ export default {
           mutation: changeGroupMemberRoleMutation,
           variables: { groupId: this.groupId, userId: id, roleInGroup: value },
         })
-        // this.$toast.success(this.$t('group.group-updated'))
+        this.$toast.success('Die Rolle wurde auf ('+value+') geändert!')
       } catch (error) {
         this.$toast.error(error.message)
       }

From 8f3a28ba538791e93ef3d4eab39e4665092debdd Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 13 Sep 2022 08:15:30 +0200
Subject: [PATCH 03/38] add group button in menu, change text

---
 webapp/components/Group/GroupButton.vue |  6 ++++++
 webapp/components/Group/GroupCard.vue   |  1 -
 webapp/components/Group/GroupMember.vue | 24 +++++++++++++++---------
 webapp/layouts/default.vue              |  6 ++++++
 webapp/pages/group/edit/_id.vue         |  7 +++++--
 webapp/pages/my-groups.vue              |  2 +-
 6 files changed, 33 insertions(+), 13 deletions(-)
 create mode 100644 webapp/components/Group/GroupButton.vue

diff --git a/webapp/components/Group/GroupButton.vue b/webapp/components/Group/GroupButton.vue
new file mode 100644
index 000000000..f6965b349
--- /dev/null
+++ b/webapp/components/Group/GroupButton.vue
@@ -0,0 +1,6 @@
+<template>
+    <div>
+        <nuxt-link to="/my-groups"><base-button icon="users" circle ghost /></nuxt-link>
+        
+    </div>
+</template>
\ No newline at end of file
diff --git a/webapp/components/Group/GroupCard.vue b/webapp/components/Group/GroupCard.vue
index 81e593cce..4e1def269 100644
--- a/webapp/components/Group/GroupCard.vue
+++ b/webapp/components/Group/GroupCard.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
     <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/${item.id}`">{{ item.name }}</nuxt-link>
         {{ item.categories ? item.categories.map((category) => category.name) : [] }}
diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index 44334b094..a2a561ac7 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -1,18 +1,22 @@
 <template>
   <div>
     <ds-space><h3>Members</h3></ds-space>
+    <base-card>
     <ds-table :data="responseGroupMembersQuery" :fields="tableFields" condensed>
       <template slot="avatar">
         <ds-avatar online size="small" :name="responseGroupMembersQuery.name"></ds-avatar>
       </template>
       <template slot="myRoleInGroup" slot-scope="scope">
-        <ds-select
-          v-if="scope.row.myRoleInGroup !== 'owner'"
+        <select
+        v-if="scope.row.myRoleInGroup !== 'owner'"
           :options="['usual', 'admin']"
-          v-model="scope.row.myRoleInGroup"
-          :value="scope.row.myRoleInGroup"
-          @input="changeMemberRole(scope.row.id, scope.row.myRoleInGroup)"
-        ></ds-select>
+          :value="`${scope.row.myRoleInGroup}`"
+          v-on:change="changeMemberRole(scope.row.id, $event)"
+            > 
+            <option v-for="value in ['usual', 'admin']" :key="value">
+                {{ value }}
+            </option>
+          </select> 
       </template>
       <template slot="edit" slot-scope="scope">
         <ds-button
@@ -24,6 +28,7 @@
         </ds-button>
       </template>
     </ds-table>
+  </base-card>
     <ds-modal
       v-if="isOpen"
       v-model="isOpen"
@@ -60,13 +65,14 @@ export default {
     }
   },
   methods: {
-    async changeMemberRole(id, value) {
+    async changeMemberRole(id, event) {
+      const newRole = event.target.value
       try {
         await this.$apollo.mutate({
           mutation: changeGroupMemberRoleMutation,
-          variables: { groupId: this.groupId, userId: id, roleInGroup: value },
+          variables: { groupId: this.groupId, userId: id, roleInGroup: newRole },
         })
-        this.$toast.success('Die Rolle wurde auf ('+value+') geändert!')
+        this.$toast.success('Die Rolle wurde auf ('+newRole+') geändert!')
       } catch (error) {
         this.$toast.error(error.message)
       }
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 1e4fe5cf5..06d2cce66 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -64,6 +64,9 @@
                       <invite-button placement="top" />
                     </client-only>
                   </div>
+                  <client-only>
+                    <group-button />
+                  </client-only>
                   <client-only>
                     <avatar-menu placement="top" />
                   </client-only>
@@ -100,6 +103,8 @@ import PageFooter from '~/components/PageFooter/PageFooter'
 import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
 import InviteButton from '~/components/InviteButton/InviteButton'
 import CategoriesMenu from '~/components/FilterMenu/CategoriesMenu.vue'
+import GroupButton from '~/components/Group/GroupButton.vue'
+
 
 export default {
   components: {
@@ -113,6 +118,7 @@ export default {
     PageFooter,
     InviteButton,
     CategoriesMenu,
+    GroupButton,
   },
   mixins: [seo],
   data() {
diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index 804905e94..ffa74ee99 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ds-page-title heading="Group Setting"></ds-page-title>
+
+    <h1 class="ds-heading ds-heading-h1">{{group.name}}</h1>
+    <div class="">Group Setting</div>
+    
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
         <ds-menu :routes="routes" :is-exact="() => true" />
@@ -12,7 +15,7 @@
       </ds-flex-item>
     </ds-flex>
     <ds-space centered>
-      <nuxt-link to="/group/my-groups">zurück</nuxt-link>
+      <nuxt-link to="/my-groups">zurück</nuxt-link>
     </ds-space>
   </div>
 </template>
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index 49efa4aa1..68524ab85 100644
--- a/webapp/pages/my-groups.vue
+++ b/webapp/pages/my-groups.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div>my groups</div>
+    <h1 class="ds-heading ds-heading-h1">My Groups</h1>
     <group-teaser />
     <br />
     <br />

From ab2d7ad87d6471cd80f66ca36a4e9d92b8f14da8 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 13 Sep 2022 09:56:03 +0200
Subject: [PATCH 04/38] style first step one

---
 webapp/components/Group/GroupForm.vue         |  7 ++--
 .../Group/{GroupCard.vue => GroupList.vue}    | 36 +++++++++++++++----
 webapp/pages/my-groups.vue                    |  6 ++--
 3 files changed, 36 insertions(+), 13 deletions(-)
 rename webapp/components/Group/{GroupCard.vue => GroupList.vue} (58%)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index d79349fda..d0f853163 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -31,6 +31,7 @@
           rows="3"
         ></ds-input>
 
+        <ds-space margin-top="large">
         <ds-select
           icon="card"
           v-model="formData.actionRadius"
@@ -38,14 +39,14 @@
           :options="['regional', 'national', 'continental', 'global']"
           placeholder="Radius ..."
         ></ds-select>
+      </ds-space>
+        <ds-space margin-top="large">
         <categories-select
           v-if="categoriesActive"
           model="categoryIds"
           :existingCategoryIds="formData.categoryIds"
         />
-
-        <div>{{ formData }}</div>
-
+      </ds-space>  
         <ds-space margin-top="large">
           <ds-button @click.prevent="reset()">Reset form</ds-button>
           <ds-button
diff --git a/webapp/components/Group/GroupCard.vue b/webapp/components/Group/GroupList.vue
similarity index 58%
rename from webapp/components/Group/GroupCard.vue
rename to webapp/components/Group/GroupList.vue
index 4e1def269..cdb537a3a 100644
--- a/webapp/components/Group/GroupCard.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -1,11 +1,25 @@
 <template>
   <div>
     <ds-container class="group-card">
-      <ds-card v-for="item in items" :key="item.id" space="xx-small">
-        <nuxt-link :to="`/group/${item.id}`">{{ item.name }}</nuxt-link>
-        {{ item.categories ? item.categories.map((category) => category.name) : [] }}
-        <div>{{ item }}</div>
-        <ds-space>
+      <ds-flex v-for="item in items" :key="item.id" class="border-bottom">
+      <ds-flex-item width="80%" centered>
+        <ds-space margin="large">
+          <nuxt-link :to="`/group/${item.id}`">
+            <ds-text size="x-large">{{ item.name }}</ds-text>
+          </nuxt-link>
+          <div>
+            <ds-space margin-top="small">
+              {{ item.about }}
+            </ds-space>
+          </div>
+          <ds-space margin-top="small">
+            <ds-chip :color="item.groupType === 'public' ? 'primary' : 'warning'">{{item.groupType}}</ds-chip>
+            <ds-chip v-for="category in item.categories" :key="category.name"><ds-icon :name="category.icon"></ds-icon> {{category.name}}</ds-chip>
+          </ds-space>
+        </ds-space>
+      </ds-flex-item>
+      <ds-flex-item width="20%" centered>
+        
           <base-button
             v-if="item.myRole === 'owner'"
             icon="trash"
@@ -31,8 +45,9 @@
             icon="plus"
             @click="addMemeberToGroup(item)"
           ></base-button>
-        </ds-space>
-      </ds-card>
+        
+      </ds-flex-item>
+    </ds-flex>
     </ds-container>
   </div>
 </template>
@@ -61,3 +76,10 @@ export default {
   },
 }
 </script>
+<style scoped>
+.border-bottom {
+  border-bottom: 1px solid #17b53f;
+  background-color: rgb(255, 255, 255);
+  padding-left: 20px;
+}
+</style>
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index 68524ab85..8ae31ad25 100644
--- a/webapp/pages/my-groups.vue
+++ b/webapp/pages/my-groups.vue
@@ -4,19 +4,19 @@
     <group-teaser />
     <br />
     <br />
-    <group-card :items="responseGroupListQuery" />
+    <group-list :items="responseGroupListQuery" />
   </div>
 </template>
 <script>
 import GroupTeaser from '~/components/Group/GroupTeaser.vue'
-import GroupCard from '~/components/Group/GroupCard.vue'
+import GroupList from '~/components/Group/GroupList.vue'
 import { groupQuery } from '~/graphql/groups.js'
 
 export default {
   name: 'MyGroups',
   components: {
     GroupTeaser,
-    GroupCard,
+    GroupList,
   },
   data() {
     return {

From 70b32b93632507b5736c5d6a621f73a20bc9d5ca Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 13 Sep 2022 15:06:47 +0200
Subject: [PATCH 05/38] add disable submit button on formData new and update

---
 webapp/components/Group/GroupForm.vue   | 51 ++++++++++++++++++++++++-
 webapp/components/Group/GroupList.vue   |  9 ++++-
 webapp/components/Group/GroupTeaser.vue | 27 -------------
 webapp/pages/group/create.vue           | 11 +++---
 webapp/pages/group/edit/_id.vue         |  7 ++--
 webapp/pages/my-groups.vue              | 19 +++++++--
 6 files changed, 80 insertions(+), 44 deletions(-)
 delete mode 100644 webapp/components/Group/GroupTeaser.vue

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index d0f853163..1cb7ca34c 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -53,7 +53,7 @@
             type="submit"
             @click.prevent="submit()"
             icon="save"
-            :disabled="disabled"
+            :disabled="update ? submitDisableEdit : submitDisable"
             primary
           >
             {{ update ? $t('group.update') : $t('group.save') }}
@@ -61,7 +61,7 @@
         </ds-space>
       </ds-form>
       <ds-space centered v-show="!update">
-        <nuxt-link to="/group/my-groups">zurück</nuxt-link>
+        <nuxt-link to="/my-groups">zurück</nuxt-link>
       </ds-space>
     </ds-container>
   </div>
@@ -147,5 +147,52 @@ export default {
       alert('reset')
     },
   },
+  computed: {
+    submitDisable() {
+      if (
+        this.formData.name !== ''
+        && this.formData.groupType !== ''
+        && this.formData.about !== ''
+        && this.formData.description !== ''
+        && this.formData.actionRadius !== ''
+        && this.formData.categoryIds.length > 0
+        ) {
+        return false
+      }
+      return true
+    },
+    submitDisableEdit() {
+       
+      if (
+        this.formData.name !== this.group.name
+        || this.formData.groupType !== this.group.groupType
+        || this.formData.about !== this.group.about
+        || this.formData.description !== this.group.description
+        || this.formData.actionRadius !== this.group.actionRadius
+        || this.formData.categoryIds.length === 0
+        || !this.sameCategories
+        ) {
+        return false
+      }
+      return true
+    },
+    sameCategories(){
+      let formDataCategories = this.formData.categoryIds.map((categoryIds) => categoryIds)
+      let groupDataCategories = this.group.categories.map((category) => category.id)
+      let result
+      let each = true
+
+      if (formDataCategories.length !== groupDataCategories.length) return false
+
+      if (JSON.stringify(formDataCategories) !== JSON.stringify(groupDataCategories)) {
+        formDataCategories.forEach(element => {
+          result = groupDataCategories.filter(groupCategorieId => groupCategorieId === element)
+          if (result.length === 0) each = false
+        })
+        return each
+      }
+      return true
+    }
+  }
 }
 </script>
diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index cdb537a3a..cb7f33901 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -13,8 +13,13 @@
             </ds-space>
           </div>
           <ds-space margin-top="small">
-            <ds-chip :color="item.groupType === 'public' ? 'primary' : 'warning'">{{item.groupType}}</ds-chip>
-            <ds-chip v-for="category in item.categories" :key="category.name"><ds-icon :name="category.icon"></ds-icon> {{category.name}}</ds-chip>
+            <ds-chip v-if="item.groupType === 'public'" color="primary">{{item.groupType}}</ds-chip>
+            <ds-chip v-if="item.groupType === 'hidden'" color="warning">{{item.groupType}}</ds-chip>
+            <ds-chip v-if="item.groupType === 'closed'" color="danger">{{item.groupType}}</ds-chip>
+            <ds-chip v-for="category in item.categories" :key="category.name">
+              <ds-icon :name="category.icon"></ds-icon> 
+              {{category.name}}
+            </ds-chip>
           </ds-space>
         </ds-space>
       </ds-flex-item>
diff --git a/webapp/components/Group/GroupTeaser.vue b/webapp/components/Group/GroupTeaser.vue
deleted file mode 100644
index 33a50dca7..000000000
--- a/webapp/components/Group/GroupTeaser.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="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>
-<script>
-export default {
-  name: 'GroupTeaser',
-}
-</script>
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index 1c95fffbc..a5f178e92 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -1,26 +1,25 @@
 <template>
-  <div>
-    <h2>Create Groupe</h2>
+  <div><ds-section>
+    <h1 class="ds-heading ds-heading-h1">Create New Groupe</h1></ds-section>
+    <ds-space margin="large" >
     <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 />
+  </ds-space>
+  
   </div>
 </template>
 
 <script>
 import GroupForm from '~/components/Group/GroupForm'
-import GroupMember from '~/components/Group/GroupMember'
 import { createGroupMutation } from '~/graphql/groups.js'
 
 export default {
   components: {
     GroupForm,
-    GroupMember,
   },
   data() {
     return {
diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index ffa74ee99..039342e5e 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-
+  <ds-section>
     <h1 class="ds-heading ds-heading-h1">{{group.name}}</h1>
-    <div class="">Group Setting</div>
-    
+    <div class="">Group Setting</div></ds-section>
+  <ds-space margin="large" >
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
         <ds-menu :routes="routes" :is-exact="() => true" />
@@ -14,6 +14,7 @@
         </transition>
       </ds-flex-item>
     </ds-flex>
+  </ds-space>
     <ds-space centered>
       <nuxt-link to="/my-groups">zurück</nuxt-link>
     </ds-space>
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index 8ae31ad25..bcfbcc610 100644
--- a/webapp/pages/my-groups.vue
+++ b/webapp/pages/my-groups.vue
@@ -1,21 +1,32 @@
 <template>
-  <div>
+  <div><ds-section>
     <h1 class="ds-heading ds-heading-h1">My Groups</h1>
-    <group-teaser />
+    <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-section>
     <br />
     <br />
     <group-list :items="responseGroupListQuery" />
   </div>
 </template>
 <script>
-import GroupTeaser from '~/components/Group/GroupTeaser.vue'
 import GroupList from '~/components/Group/GroupList.vue'
 import { groupQuery } from '~/graphql/groups.js'
 
 export default {
   name: 'MyGroups',
   components: {
-    GroupTeaser,
     GroupList,
   },
   data() {

From 41955c5f562293e316ae047e71081cc57e77b322 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 13 Sep 2022 20:40:40 +0200
Subject: [PATCH 06/38] add gruopMenu

---
 webapp/assets/_new/styles/tokens.scss         |   1 +
 webapp/components/Group/GroupList.vue         |  89 ++++++++-----
 webapp/components/Group/GroupMenu.vue         | 121 ++++++++++++++++++
 .../_new/generic/BaseButton/BaseButton.vue    |  12 +-
 4 files changed, 188 insertions(+), 35 deletions(-)
 create mode 100644 webapp/components/Group/GroupMenu.vue

diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index 53abd01f8..d0cc49097 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -268,6 +268,7 @@ $size-avatar-large: 114px;
  * @presenter Spacing
  */
 
+ $size-button-large: 50px;
  $size-button-base: 36px;
  $size-button-small: 26px;
 
diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index cb7f33901..8d0583e5a 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -1,21 +1,32 @@
 <template>
   <div>
+    
     <ds-container class="group-card">
-      <ds-flex v-for="item in items" :key="item.id" class="border-bottom">
-      <ds-flex-item width="80%" centered>
+      <ds-space>
+    <div @click="onlyOwnerGroups(true)" ref="myGruops" >show only my groups</div>
+    <div @click="onlyOwnerGroups(false)" ref="allGruops" hidden>show all groups</div>
+  </ds-space>
+      <ds-flex v-for="item in items" :key="item.id" class="border-bottom" 
+      :ref="item.myRole === null ? 'null' : item.myRole">
+      <ds-flex-item width="90%" centered>
+        {{item.myRole}}
         <ds-space margin="large">
           <nuxt-link :to="`/group/${item.id}`">
             <ds-text size="x-large">{{ item.name }}</ds-text>
           </nuxt-link>
+          
+          <ds-chip v-if="item.groupType === 'public'" color="primary">{{item.groupType}}</ds-chip>
+            <ds-chip v-if="item.groupType === 'hidden'" color="warning">{{item.groupType}}</ds-chip>
+            <ds-chip v-if="item.groupType === 'closed'" color="danger">{{item.groupType}}</ds-chip>
+            <ds-chip v-if="item.myRole === 'owner'" color="inverse">{{item.myRole}}</ds-chip>
+          <ds-chip v-if="item.myRole === 'usual' || item.myRole === 'pending'">{{item.myRole}}</ds-chip>
+             
           <div>
             <ds-space margin-top="small">
               {{ item.about }}
             </ds-space>
           </div>
           <ds-space margin-top="small">
-            <ds-chip v-if="item.groupType === 'public'" color="primary">{{item.groupType}}</ds-chip>
-            <ds-chip v-if="item.groupType === 'hidden'" color="warning">{{item.groupType}}</ds-chip>
-            <ds-chip v-if="item.groupType === 'closed'" color="danger">{{item.groupType}}</ds-chip>
             <ds-chip v-for="category in item.categories" :key="category.name">
               <ds-icon :name="category.icon"></ds-icon> 
               {{category.name}}
@@ -23,42 +34,25 @@
           </ds-space>
         </ds-space>
       </ds-flex-item>
-      <ds-flex-item width="20%" centered>
-        
-          <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-flex-item width="10%" centered>
+        <group-menu
+            resource-type="group"
+            :resource="item"
+            :isOwner="item.myRole"
+          />
       </ds-flex-item>
     </ds-flex>
     </ds-container>
   </div>
 </template>
-<script lang="ts">
+<script>
+import GroupMenu from '~/components/Group/GroupMenu'
+
 export default {
   name: 'GroupList',
+  components: {
+    GroupMenu,
+  },
   props: {
     items: { type: Array, default: () => [] },
   },
@@ -78,6 +72,33 @@ export default {
     addMemeberToGroup() {
       alert('addMemeberToGroup group')
     },
+    onlyOwnerGroups(bool){
+      console.log('bool', bool)
+      console.log('this.$refs.usual', this.$refs.usual)
+      console.log('this.$refs.pending', this.$refs.pending)
+      console.log('this.$refs.null', this.$refs.null)
+      
+        this.$refs.myGruops.hidden = bool
+        this.$refs.allGruops.hidden = !bool
+     
+
+      if (this.$refs.usual) {
+        this.$refs.usual.forEach(element => {
+         element.$el.hidden = bool})
+        }
+
+          
+         if (this.$refs.null) {
+          this.$refs.null.forEach(element => {
+          element.$el.hidden = bool})
+         }
+
+         if (this.$refs.pending) {
+          this.$refs.pending.forEach(element => {
+          element.$el.hidden = bool})
+         }
+      
+    }
   },
 }
 </script>
diff --git a/webapp/components/Group/GroupMenu.vue b/webapp/components/Group/GroupMenu.vue
new file mode 100644
index 000000000..427297485
--- /dev/null
+++ b/webapp/components/Group/GroupMenu.vue
@@ -0,0 +1,121 @@
+<template>
+  <dropdown class="group-menu" :placement="placement" offset="5">
+    <template #default="{ toggleMenu }">
+      <slot name="button" :toggleMenu="toggleMenu">
+        <base-button
+          data-test="group-menu-button"
+          icon="ellipsis-v"
+          size="large"
+          circle
+          ghost
+          @click.prevent="toggleMenu()"
+        />
+      </slot>
+    </template>
+    <template #popover="{ toggleMenu }">
+      <div class="group-menu-popover">
+        <ds-menu :routes="routes">
+          <template #menuitem="item">
+            <ds-menu-item
+              :route="item.route"
+              :parents="item.parents"
+              @click.stop.prevent="openItem(item.route, toggleMenu)"
+            >
+              <base-icon :name="item.route.icon" />
+              {{ item.route.label }}
+            </ds-menu-item>
+          </template>
+        </ds-menu>
+      </div>
+    </template>
+  </dropdown>
+</template>
+
+<script>
+import Dropdown from '~/components/Dropdown'
+
+export default {
+  name: 'ContentMenu',
+  components: {
+    Dropdown,
+  },
+  props: {
+    placement: { type: String, default: 'top-end' },
+    resource: { type: Object, required: true },
+    isOwner: { type: String, default: false },
+    resourceType: {
+      type: String,
+      required: true,
+      validator: (value) => {
+        return value.match(/(group)/)
+      },
+    },
+  },
+  computed: {
+    routes() {
+      const routes = []
+ 
+ 
+      if (this.resourceType === 'group') {
+        if (this.isOwner === 'owner') {
+          routes.push({
+              label: 'Settings',
+              path: `/group/edit/${this.resource.id}`,
+              icon: 'edit',
+            })
+        }
+        if (this.isOwner === 'usual') {
+          routes.push({
+              label: 'Unfollowing',
+              callback: () => {
+              this.unfollowGroup(this.resource)
+            },
+              icon: 'minus',
+            })
+        }
+        if (this.isOwner === 'pending') {
+          routes.push({
+              label: 'Unfollowing',
+              callback: () => {
+              this.removePending(this.resource)
+            },
+              icon: 'minus',
+            })
+        }
+        if (this.isOwner === null) {
+          routes.push({
+              label: 'Following',
+              callback: () => {
+              this.addMemeberToGroup(this.resource)
+            },
+              icon: 'plus',
+            })
+        }
+      }
+
+      return routes
+    },
+  },
+  methods: {
+    openItem(route, toggleMenu) {
+      if (route.callback) {
+        route.callback()
+      } else {
+        this.$router.push(route)
+      }
+      toggleMenu()
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.group-menu-popover {
+  nav {
+    margin-top: -$space-xx-small;
+    margin-bottom: -$space-xx-small;
+    margin-left: -$space-x-small;
+    margin-right: -$space-x-small;
+  }
+}
+</style>
diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue
index d87598d76..e5c7fa047 100644
--- a/webapp/components/_new/generic/BaseButton/BaseButton.vue
+++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue
@@ -46,7 +46,7 @@ export default {
       type: String,
       default: 'regular',
       validator(value) {
-        return value.match(/(small|regular)/)
+        return value.match(/(small|regular|large)/)
       },
     },
     type: {
@@ -66,6 +66,7 @@ export default {
       if (this.danger) buttonClass += ' --danger'
       if (this.loading) buttonClass += ' --loading'
       if (this.size === 'small') buttonClass += ' --small'
+      if (this.size === 'large') buttonClass += ' --large'
 
       if (this.filled) buttonClass += ' --filled'
       else if (this.ghost) buttonClass += ' --ghost'
@@ -123,6 +124,15 @@ export default {
     }
   }
 
+  &.--large {
+    height: $size-button-large;
+    font-size: $font-size-large;
+
+    &.--circle {
+      width: $size-button-large;
+    }
+  }
+
   &:not(.--icon-only) > .base-icon {
     margin-right: $space-xx-small;
   }

From f1957c5fe714026173d3389013f40cc7c7b48bfa Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 13 Sep 2022 20:46:18 +0200
Subject: [PATCH 07/38] fix lint

---
 webapp/components/Group/GroupButton.vue |   9 +-
 webapp/components/Group/GroupForm.vue   |  73 +++++++-------
 webapp/components/Group/GroupList.vue   | 124 ++++++++++++------------
 webapp/components/Group/GroupMember.vue |  52 +++++-----
 webapp/components/Group/GroupMenu.vue   |  37 ++++---
 webapp/layouts/default.vue              |   1 -
 webapp/pages/group/create.vue           |  23 ++---
 webapp/pages/group/edit/_id.vue         |  31 +++---
 webapp/pages/my-groups.vue              |  34 ++++---
 9 files changed, 193 insertions(+), 191 deletions(-)

diff --git a/webapp/components/Group/GroupButton.vue b/webapp/components/Group/GroupButton.vue
index f6965b349..2000e3046 100644
--- a/webapp/components/Group/GroupButton.vue
+++ b/webapp/components/Group/GroupButton.vue
@@ -1,6 +1,5 @@
 <template>
-    <div>
-        <nuxt-link to="/my-groups"><base-button icon="users" circle ghost /></nuxt-link>
-        
-    </div>
-</template>
\ No newline at end of file
+  <div>
+    <nuxt-link to="/my-groups"><base-button icon="users" circle ghost /></nuxt-link>
+  </div>
+</template>
diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 1cb7ca34c..01f5f906c 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -32,21 +32,21 @@
         ></ds-input>
 
         <ds-space margin-top="large">
-        <ds-select
-          icon="card"
-          v-model="formData.actionRadius"
-          label="Radius"
-          :options="['regional', 'national', 'continental', 'global']"
-          placeholder="Radius ..."
-        ></ds-select>
-      </ds-space>
+          <ds-select
+            icon="card"
+            v-model="formData.actionRadius"
+            label="Radius"
+            :options="['regional', 'national', 'continental', 'global']"
+            placeholder="Radius ..."
+          ></ds-select>
+        </ds-space>
         <ds-space margin-top="large">
-        <categories-select
-          v-if="categoriesActive"
-          model="categoryIds"
-          :existingCategoryIds="formData.categoryIds"
-        />
-      </ds-space>  
+          <categories-select
+            v-if="categoriesActive"
+            model="categoryIds"
+            :existingCategoryIds="formData.categoryIds"
+          />
+        </ds-space>
         <ds-space margin-top="large">
           <ds-button @click.prevent="reset()">Reset form</ds-button>
           <ds-button
@@ -150,49 +150,48 @@ export default {
   computed: {
     submitDisable() {
       if (
-        this.formData.name !== ''
-        && this.formData.groupType !== ''
-        && this.formData.about !== ''
-        && this.formData.description !== ''
-        && this.formData.actionRadius !== ''
-        && this.formData.categoryIds.length > 0
-        ) {
+        this.formData.name !== '' &&
+        this.formData.groupType !== '' &&
+        this.formData.about !== '' &&
+        this.formData.description !== '' &&
+        this.formData.actionRadius !== '' &&
+        this.formData.categoryIds.length > 0
+      ) {
         return false
       }
       return true
     },
     submitDisableEdit() {
-       
       if (
-        this.formData.name !== this.group.name
-        || this.formData.groupType !== this.group.groupType
-        || this.formData.about !== this.group.about
-        || this.formData.description !== this.group.description
-        || this.formData.actionRadius !== this.group.actionRadius
-        || this.formData.categoryIds.length === 0
-        || !this.sameCategories
-        ) {
+        this.formData.name !== this.group.name ||
+        this.formData.groupType !== this.group.groupType ||
+        this.formData.about !== this.group.about ||
+        this.formData.description !== this.group.description ||
+        this.formData.actionRadius !== this.group.actionRadius ||
+        this.formData.categoryIds.length === 0 ||
+        !this.sameCategories
+      ) {
         return false
       }
       return true
     },
-    sameCategories(){
-      let formDataCategories = this.formData.categoryIds.map((categoryIds) => categoryIds)
-      let groupDataCategories = this.group.categories.map((category) => category.id)
+    sameCategories() {
+      const formDataCategories = this.formData.categoryIds.map((categoryIds) => categoryIds)
+      const groupDataCategories = this.group.categories.map((category) => category.id)
       let result
       let each = true
 
       if (formDataCategories.length !== groupDataCategories.length) return false
 
       if (JSON.stringify(formDataCategories) !== JSON.stringify(groupDataCategories)) {
-        formDataCategories.forEach(element => {
-          result = groupDataCategories.filter(groupCategorieId => groupCategorieId === element)
+        formDataCategories.forEach((element) => {
+          result = groupDataCategories.filter((groupCategorieId) => groupCategorieId === element)
           if (result.length === 0) each = false
         })
         return each
       }
       return true
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index 8d0583e5a..714dd8c43 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -1,47 +1,54 @@
 <template>
   <div>
-    
     <ds-container class="group-card">
       <ds-space>
-    <div @click="onlyOwnerGroups(true)" ref="myGruops" >show only my groups</div>
-    <div @click="onlyOwnerGroups(false)" ref="allGruops" hidden>show all groups</div>
-  </ds-space>
-      <ds-flex v-for="item in items" :key="item.id" class="border-bottom" 
-      :ref="item.myRole === null ? 'null' : item.myRole">
-      <ds-flex-item width="90%" centered>
-        {{item.myRole}}
-        <ds-space margin="large">
-          <nuxt-link :to="`/group/${item.id}`">
-            <ds-text size="x-large">{{ item.name }}</ds-text>
-          </nuxt-link>
-          
-          <ds-chip v-if="item.groupType === 'public'" color="primary">{{item.groupType}}</ds-chip>
-            <ds-chip v-if="item.groupType === 'hidden'" color="warning">{{item.groupType}}</ds-chip>
-            <ds-chip v-if="item.groupType === 'closed'" color="danger">{{item.groupType}}</ds-chip>
-            <ds-chip v-if="item.myRole === 'owner'" color="inverse">{{item.myRole}}</ds-chip>
-          <ds-chip v-if="item.myRole === 'usual' || item.myRole === 'pending'">{{item.myRole}}</ds-chip>
-             
-          <div>
-            <ds-space margin-top="small">
-              {{ item.about }}
-            </ds-space>
-          </div>
-          <ds-space margin-top="small">
-            <ds-chip v-for="category in item.categories" :key="category.name">
-              <ds-icon :name="category.icon"></ds-icon> 
-              {{category.name}}
+        <div @click="onlyOwnerGroups(true)" ref="myGruops">show only my groups</div>
+        <div @click="onlyOwnerGroups(false)" ref="allGruops" hidden>show all groups</div>
+      </ds-space>
+      <ds-flex
+        v-for="item in items"
+        :key="item.id"
+        class="border-bottom"
+        :ref="item.myRole === null ? 'null' : item.myRole"
+      >
+        <ds-flex-item width="90%" centered>
+          {{ item.myRole }}
+          <ds-space margin="large">
+            <nuxt-link :to="`/group/${item.id}`">
+              <ds-text size="x-large">{{ item.name }}</ds-text>
+            </nuxt-link>
+
+            <ds-chip v-if="item.groupType === 'public'" color="primary">
+              {{ item.groupType }}
             </ds-chip>
+            <ds-chip v-if="item.groupType === 'hidden'" color="warning">
+              {{ item.groupType }}
+            </ds-chip>
+            <ds-chip v-if="item.groupType === 'closed'" color="danger">
+              {{ item.groupType }}
+            </ds-chip>
+            <ds-chip v-if="item.myRole === 'owner'" color="inverse">{{ item.myRole }}</ds-chip>
+            <ds-chip v-if="item.myRole === 'usual' || item.myRole === 'pending'">
+              {{ item.myRole }}
+            </ds-chip>
+
+            <div>
+              <ds-space margin-top="small">
+                {{ item.about }}
+              </ds-space>
+            </div>
+            <ds-space margin-top="small">
+              <ds-chip v-for="category in item.categories" :key="category.name">
+                <ds-icon :name="category.icon"></ds-icon>
+                {{ category.name }}
+              </ds-chip>
+            </ds-space>
           </ds-space>
-        </ds-space>
-      </ds-flex-item>
-      <ds-flex-item width="10%" centered>
-        <group-menu
-            resource-type="group"
-            :resource="item"
-            :isOwner="item.myRole"
-          />
-      </ds-flex-item>
-    </ds-flex>
+        </ds-flex-item>
+        <ds-flex-item width="10%" centered>
+          <group-menu resource-type="group" :resource="item" :isOwner="item.myRole" />
+        </ds-flex-item>
+      </ds-flex>
     </ds-container>
   </div>
 </template>
@@ -72,33 +79,28 @@ export default {
     addMemeberToGroup() {
       alert('addMemeberToGroup group')
     },
-    onlyOwnerGroups(bool){
-      console.log('bool', bool)
-      console.log('this.$refs.usual', this.$refs.usual)
-      console.log('this.$refs.pending', this.$refs.pending)
-      console.log('this.$refs.null', this.$refs.null)
-      
-        this.$refs.myGruops.hidden = bool
-        this.$refs.allGruops.hidden = !bool
-     
+    onlyOwnerGroups(bool) {
+      this.$refs.myGruops.hidden = bool
+      this.$refs.allGruops.hidden = !bool
 
       if (this.$refs.usual) {
-        this.$refs.usual.forEach(element => {
-         element.$el.hidden = bool})
-        }
+        this.$refs.usual.forEach((element) => {
+          element.$el.hidden = bool
+        })
+      }
 
-          
-         if (this.$refs.null) {
-          this.$refs.null.forEach(element => {
-          element.$el.hidden = bool})
-         }
+      if (this.$refs.null) {
+        this.$refs.null.forEach((element) => {
+          element.$el.hidden = bool
+        })
+      }
 
-         if (this.$refs.pending) {
-          this.$refs.pending.forEach(element => {
-          element.$el.hidden = bool})
-         }
-      
-    }
+      if (this.$refs.pending) {
+        this.$refs.pending.forEach((element) => {
+          element.$el.hidden = bool
+        })
+      }
+    },
   },
 }
 </script>
diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index a2a561ac7..00c3a4094 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -2,33 +2,33 @@
   <div>
     <ds-space><h3>Members</h3></ds-space>
     <base-card>
-    <ds-table :data="responseGroupMembersQuery" :fields="tableFields" condensed>
-      <template slot="avatar">
-        <ds-avatar online size="small" :name="responseGroupMembersQuery.name"></ds-avatar>
-      </template>
-      <template slot="myRoleInGroup" slot-scope="scope">
-        <select
-        v-if="scope.row.myRoleInGroup !== 'owner'"
-          :options="['usual', 'admin']"
-          :value="`${scope.row.myRoleInGroup}`"
-          v-on:change="changeMemberRole(scope.row.id, $event)"
-            > 
+      <ds-table :data="responseGroupMembersQuery" :fields="tableFields" condensed>
+        <template slot="avatar">
+          <ds-avatar online size="small" :name="responseGroupMembersQuery.name"></ds-avatar>
+        </template>
+        <template slot="myRoleInGroup" slot-scope="scope">
+          <select
+            v-if="scope.row.myRoleInGroup !== 'owner'"
+            :options="['usual', 'admin']"
+            :value="`${scope.row.myRoleInGroup}`"
+            v-on:change="changeMemberRole(scope.row.id, $event)"
+          >
             <option v-for="value in ['usual', 'admin']" :key="value">
-                {{ value }}
+              {{ value }}
             </option>
-          </select> 
-      </template>
-      <template slot="edit" slot-scope="scope">
-        <ds-button
-          v-if="scope.row.myRoleInGroup !== 'owner'"
-          size="small"
-          @click="openModal(scope.row)"
-        >
-          delete
-        </ds-button>
-      </template>
-    </ds-table>
-  </base-card>
+          </select>
+        </template>
+        <template slot="edit" slot-scope="scope">
+          <ds-button
+            v-if="scope.row.myRoleInGroup !== 'owner'"
+            size="small"
+            @click="openModal(scope.row)"
+          >
+            delete
+          </ds-button>
+        </template>
+      </ds-table>
+    </base-card>
     <ds-modal
       v-if="isOpen"
       v-model="isOpen"
@@ -72,7 +72,7 @@ export default {
           mutation: changeGroupMemberRoleMutation,
           variables: { groupId: this.groupId, userId: id, roleInGroup: newRole },
         })
-        this.$toast.success('Die Rolle wurde auf ('+newRole+') geändert!')
+        this.$toast.success('Die Rolle wurde auf (' + newRole + ') geändert!')
       } catch (error) {
         this.$toast.error(error.message)
       }
diff --git a/webapp/components/Group/GroupMenu.vue b/webapp/components/Group/GroupMenu.vue
index 427297485..171a876af 100644
--- a/webapp/components/Group/GroupMenu.vue
+++ b/webapp/components/Group/GroupMenu.vue
@@ -42,7 +42,7 @@ export default {
   props: {
     placement: { type: String, default: 'top-end' },
     resource: { type: Object, required: true },
-    isOwner: { type: String, default: false },
+    isOwner: { type: String, default: null },
     resourceType: {
       type: String,
       required: true,
@@ -54,42 +54,41 @@ export default {
   computed: {
     routes() {
       const routes = []
- 
- 
+
       if (this.resourceType === 'group') {
         if (this.isOwner === 'owner') {
           routes.push({
-              label: 'Settings',
-              path: `/group/edit/${this.resource.id}`,
-              icon: 'edit',
-            })
+            label: 'Settings',
+            path: `/group/edit/${this.resource.id}`,
+            icon: 'edit',
+          })
         }
         if (this.isOwner === 'usual') {
           routes.push({
-              label: 'Unfollowing',
-              callback: () => {
+            label: 'Unfollowing',
+            callback: () => {
               this.unfollowGroup(this.resource)
             },
-              icon: 'minus',
-            })
+            icon: 'minus',
+          })
         }
         if (this.isOwner === 'pending') {
           routes.push({
-              label: 'Unfollowing',
-              callback: () => {
+            label: 'Unfollowing',
+            callback: () => {
               this.removePending(this.resource)
             },
-              icon: 'minus',
-            })
+            icon: 'minus',
+          })
         }
         if (this.isOwner === null) {
           routes.push({
-              label: 'Following',
-              callback: () => {
+            label: 'Following',
+            callback: () => {
               this.addMemeberToGroup(this.resource)
             },
-              icon: 'plus',
-            })
+            icon: 'plus',
+          })
         }
       }
 
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 06d2cce66..153e83c3c 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -105,7 +105,6 @@ import InviteButton from '~/components/InviteButton/InviteButton'
 import CategoriesMenu from '~/components/FilterMenu/CategoriesMenu.vue'
 import GroupButton from '~/components/Group/GroupButton.vue'
 
-
 export default {
   components: {
     Logo,
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index a5f178e92..5eaff8f91 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -1,15 +1,16 @@
 <template>
-  <div><ds-section>
-    <h1 class="ds-heading ds-heading-h1">Create New Groupe</h1></ds-section>
-    <ds-space margin="large" >
-    <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>
-  </ds-space>
-  
+  <div>
+    <ds-section>
+      <h1 class="ds-heading ds-heading-h1">Create New Groupe</h1>
+    </ds-section>
+    <ds-space margin="large">
+      <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>
+    </ds-space>
   </div>
 </template>
 
diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index 039342e5e..aa6fc6539 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -1,20 +1,21 @@
 <template>
   <div>
-  <ds-section>
-    <h1 class="ds-heading ds-heading-h1">{{group.name}}</h1>
-    <div class="">Group Setting</div></ds-section>
-  <ds-space margin="large" >
-    <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>
-          <nuxt-child :group="group" />
-        </transition>
-      </ds-flex-item>
-    </ds-flex>
-  </ds-space>
+    <ds-section>
+      <h1 class="ds-heading ds-heading-h1">{{ group.name }}</h1>
+      <div class="">Group Setting</div>
+    </ds-section>
+    <ds-space margin="large">
+      <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>
+            <nuxt-child :group="group" />
+          </transition>
+        </ds-flex-item>
+      </ds-flex>
+    </ds-space>
     <ds-space centered>
       <nuxt-link to="/my-groups">zurück</nuxt-link>
     </ds-space>
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index bcfbcc610..888f6280c 100644
--- a/webapp/pages/my-groups.vue
+++ b/webapp/pages/my-groups.vue
@@ -1,20 +1,22 @@
 <template>
-  <div><ds-section>
-    <h1 class="ds-heading ds-heading-h1">My Groups</h1>
-    <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-section>
+  <div>
+    <ds-section>
+      <h1 class="ds-heading ds-heading-h1">My Groups</h1>
+      <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-section>
     <br />
     <br />
     <group-list :items="responseGroupListQuery" />

From b57f5e253c4d6ce7e8339ac371880b19ded76483 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 14 Sep 2022 11:25:43 +0200
Subject: [PATCH 08/38] add following event and emit

---
 webapp/components/Group/GroupList.vue | 97 ++++++++++++++-------------
 webapp/components/Group/GroupMenu.vue |  9 +--
 webapp/graphql/groups.js              | 11 +++
 3 files changed, 67 insertions(+), 50 deletions(-)

diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index 714dd8c43..30351ae83 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -1,59 +1,49 @@
 <template>
-  <div>
     <ds-container class="group-card">
       <ds-space>
-        <div @click="onlyOwnerGroups(true)" ref="myGruops">show only my groups</div>
-        <div @click="onlyOwnerGroups(false)" ref="allGruops" hidden>show all groups</div>
+        <div @click="onlyOwnerGroups(true)" ref="myGruops"><ds-button >show only my groups</ds-button ></div>
+        <div @click="onlyOwnerGroups(false)" ref="allGruops" hidden><ds-button >show all groups</ds-button ></div>
       </ds-space>
-      <ds-flex
-        v-for="item in items"
-        :key="item.id"
-        class="border-bottom"
-        :ref="item.myRole === null ? 'null' : item.myRole"
-      >
-        <ds-flex-item width="90%" centered>
-          {{ item.myRole }}
-          <ds-space margin="large">
-            <nuxt-link :to="`/group/${item.id}`">
-              <ds-text size="x-large">{{ item.name }}</ds-text>
-            </nuxt-link>
-
-            <ds-chip v-if="item.groupType === 'public'" color="primary">
-              {{ item.groupType }}
-            </ds-chip>
-            <ds-chip v-if="item.groupType === 'hidden'" color="warning">
-              {{ item.groupType }}
-            </ds-chip>
-            <ds-chip v-if="item.groupType === 'closed'" color="danger">
-              {{ item.groupType }}
-            </ds-chip>
-            <ds-chip v-if="item.myRole === 'owner'" color="inverse">{{ item.myRole }}</ds-chip>
-            <ds-chip v-if="item.myRole === 'usual' || item.myRole === 'pending'">
-              {{ item.myRole }}
-            </ds-chip>
-
-            <div>
+      <ds-space margin-bottom="small" v-for="item in items" :key="item.id"> 
+        <ds-card  :ref="item.myRole === null ? 'null' : item.myRole">
+          <ds-flex>
+            <ds-flex-item width="90%" centered>
+              <ds-space margin="large">
+              <nuxt-link :to="`/group/${item.id}`">
+                <ds-text size="x-large">{{ item.name }}</ds-text>
+              </nuxt-link> 
+              <ds-text size="small">
+                {{ item.groupType }}
+                <ds-chip v-if="item.myRole === 'owner'" color="inverse">{{ item.myRole }}</ds-chip>
+                <ds-chip v-if="item.myRole === 'usual' || item.myRole === 'pending'">
+                  {{ item.myRole }}
+                </ds-chip>
+              </ds-text>
               <ds-space margin-top="small">
-                {{ item.about }}
+                <ds-text bold>{{ item.about }}</ds-text> 
               </ds-space>
-            </div>
-            <ds-space margin-top="small">
-              <ds-chip v-for="category in item.categories" :key="category.name">
+              <ds-space margin-top="small">
+                {{ item.description }}
+              </ds-space>
+              <ds-space margin-top="small">
+                <ds-chip v-for="category in item.categories" :key="category.name">
                 <ds-icon :name="category.icon"></ds-icon>
-                {{ category.name }}
-              </ds-chip>
+                  {{ category.name }}
+                </ds-chip>
+              </ds-space>
             </ds-space>
-          </ds-space>
-        </ds-flex-item>
-        <ds-flex-item width="10%" centered>
-          <group-menu resource-type="group" :resource="item" :isOwner="item.myRole" />
-        </ds-flex-item>
-      </ds-flex>
-    </ds-container>
-  </div>
+          </ds-flex-item>
+          <ds-flex-item width="10%" centered>
+            <group-menu resource-type="group" :resource="item" :isOwner="item.myRole" @joinGroup="joinGroup"/>
+          </ds-flex-item>
+        </ds-flex>
+      </ds-card>
+    </ds-space>
+  </ds-container>
 </template>
 <script>
 import GroupMenu from '~/components/Group/GroupMenu'
+import { joinGroupMutation } from '~/graphql/groups.js'
 
 export default {
   name: 'GroupList',
@@ -76,9 +66,24 @@ export default {
     unfollowGroup() {
       alert('unfollow group')
     },
-    addMemeberToGroup() {
+    async joinGroup(value) {
       alert('addMemeberToGroup group')
+      console.log(value)
+      console.log(this.$store.getters['auth/user'].id)
+
+      const { id } = value
+      const variables = { groupId: id, userId: this.$store.getters['auth/user'].id }
+      try {
+         await this.$apollo.mutate({
+           mutation: joinGroupMutation,
+           variables,
+         })
+        this.$toast.success(this.$t('group.group-created'))
+      } catch (error) {
+        this.$toast.error(error.message)
+      }
     },
+   
     onlyOwnerGroups(bool) {
       this.$refs.myGruops.hidden = bool
       this.$refs.allGruops.hidden = !bool
diff --git a/webapp/components/Group/GroupMenu.vue b/webapp/components/Group/GroupMenu.vue
index 171a876af..deed94e75 100644
--- a/webapp/components/Group/GroupMenu.vue
+++ b/webapp/components/Group/GroupMenu.vue
@@ -16,6 +16,7 @@
       <div class="group-menu-popover">
         <ds-menu :routes="routes">
           <template #menuitem="item">
+            {{item.parents}}
             <ds-menu-item
               :route="item.route"
               :parents="item.parents"
@@ -40,7 +41,7 @@ export default {
     Dropdown,
   },
   props: {
-    placement: { type: String, default: 'top-end' },
+    placement: { type: String, default: 'bottom-end' },
     resource: { type: Object, required: true },
     isOwner: { type: String, default: null },
     resourceType: {
@@ -67,7 +68,7 @@ export default {
           routes.push({
             label: 'Unfollowing',
             callback: () => {
-              this.unfollowGroup(this.resource)
+              // this.$emit('join-group', this.resource)
             },
             icon: 'minus',
           })
@@ -76,7 +77,7 @@ export default {
           routes.push({
             label: 'Unfollowing',
             callback: () => {
-              this.removePending(this.resource)
+              // this.removePending(this.resource)
             },
             icon: 'minus',
           })
@@ -85,7 +86,7 @@ export default {
           routes.push({
             label: 'Following',
             callback: () => {
-              this.addMemeberToGroup(this.resource)
+                this.$emit('joinGroup', this.resource)
             },
             icon: 'plus',
           })
diff --git a/webapp/graphql/groups.js b/webapp/graphql/groups.js
index ff63f1a25..e650bd83e 100644
--- a/webapp/graphql/groups.js
+++ b/webapp/graphql/groups.js
@@ -106,6 +106,17 @@ export const joinGroupMutation = gql`
   }
 `
 
+export const leaveGroupMutation = gql`
+  mutation ($groupId: ID!, $userId: ID!) {
+    LeaveGroup(groupId: $groupId, userId: $userId) {
+      id
+      name
+      slug
+      myRoleInGroup
+    }
+  }
+`
+
 export const changeGroupMemberRoleMutation = gql`
   mutation ($groupId: ID!, $userId: ID!, $roleInGroup: GroupMemberRole!) {
     ChangeGroupMemberRole(groupId: $groupId, userId: $userId, roleInGroup: $roleInGroup) {

From bc8cba13b3dc5b8c6d2f1514e31cd962cd9db2de Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 15 Sep 2022 12:38:59 +0200
Subject: [PATCH 09/38] add location and location name for group

---
 backend/src/db/graphql/groups.js        |  1 +
 backend/src/schema/resolvers/groups.js  | 16 +++++-
 backend/src/schema/types/type/Group.gql |  1 +
 webapp/components/Group/GroupForm.vue   | 74 ++++++++++++++++++++++++-
 webapp/components/Group/GroupList.vue   |  4 +-
 webapp/graphql/groups.js                |  5 +-
 webapp/pages/group/create.vue           |  4 +-
 webapp/pages/group/edit/_id/index.vue   |  4 +-
 8 files changed, 96 insertions(+), 13 deletions(-)

diff --git a/backend/src/db/graphql/groups.js b/backend/src/db/graphql/groups.js
index ff63f1a25..301146280 100644
--- a/backend/src/db/graphql/groups.js
+++ b/backend/src/db/graphql/groups.js
@@ -159,6 +159,7 @@ export const groupQuery = gql`
       deleted
       about
       description
+      descriptionExcerpt
       groupType
       actionRadius
       categories {
diff --git a/backend/src/schema/resolvers/groups.js b/backend/src/schema/resolvers/groups.js
index 239a299dd..4a84b524f 100644
--- a/backend/src/schema/resolvers/groups.js
+++ b/backend/src/schema/resolvers/groups.js
@@ -6,6 +6,7 @@ import { DESCRIPTION_WITHOUT_HTML_LENGTH_MIN } from '../../constants/groups'
 import { removeHtmlTags } from '../../middleware/helpers/cleanHtml.js'
 import Resolver from './helpers/Resolver'
 import { mergeImage } from './images/images'
+import createOrUpdateLocations from './users/location'
 
 export default {
   Query: {
@@ -130,7 +131,9 @@ export default {
         return group
       })
       try {
-        return await writeTxResultPromise
+        const group =  await writeTxResultPromise
+        await createOrUpdateLocations(params.id, params.locationName, session)
+        return group
       } catch (error) {
         if (error.code === 'Neo.ClientError.Schema.ConstraintValidationFailed')
           throw new UserInputError('Group with this slug already exists!')
@@ -201,7 +204,9 @@ export default {
         return group
       })
       try {
-        return await writeTxResultPromise
+        const group =  await writeTxResultPromise
+        await createOrUpdateLocations(params.id, params.locationName, session)
+        return group
       } catch (error) {
         if (error.code === 'Neo.ClientError.Schema.ConstraintValidationFailed')
           throw new UserInputError('Group with this slug already exists!')
@@ -274,11 +279,18 @@ export default {
   },
   Group: {
     ...Resolver('Group', {
+      undefinedToNull: [
+        'deleted',
+        'disabled',
+        'locationName',
+        'about',
+      ],
       hasMany: {
         categories: '-[:CATEGORIZED]->(related:Category)',
       },
       hasOne: {
         avatar: '-[:AVATAR_IMAGE]->(related:Image)',
+        location: '-[:IS_IN]->(related:Location)',
       },
     }),
   },
diff --git a/backend/src/schema/types/type/Group.gql b/backend/src/schema/types/type/Group.gql
index c1b097857..afb2264ba 100644
--- a/backend/src/schema/types/type/Group.gql
+++ b/backend/src/schema/types/type/Group.gql
@@ -29,6 +29,7 @@ type Group {
 
   about: String # goal
   description: String!
+  descriptionExcerpt: String!
   groupType: GroupType!
   actionRadius: GroupActionRadius!
 
diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 01f5f906c..3adf3204c 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <div v-if="update">add: slug, location, tiptap editor in description</div>
     <ds-container>
       <ds-form
         class="group-form"
@@ -14,6 +15,13 @@
           placeholder="Your name ..."
         ></ds-input>
 
+        <ds-input
+          v-if="update"
+          v-model="formData.slug"
+          label="Slug"
+          placeholder="Your name ..."
+        ></ds-input>
+
         <ds-select
           icon="user"
           v-model="formData.groupType"
@@ -30,7 +38,18 @@
           type="textarea"
           rows="3"
         ></ds-input>
-
+        <ds-space margin-top="large">
+          <ds-select
+          id="city"
+          v-model="formData.locationName"
+          icon="map-marker"
+          :options="cities"
+          :label="$t('settings.data.labelCity')"
+          :placeholder="$t('settings.data.labelCity')"
+          :loading="loadingGeo"
+          @input.native="handleCityInput"
+        />
+        </ds-space>
         <ds-space margin-top="large">
           <ds-select
             icon="card"
@@ -71,6 +90,9 @@
 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'
+import { queryLocations } from '~/graphql/location'
+
+let timeout
 
 export default {
   name: 'GroupForm',
@@ -90,24 +112,30 @@ export default {
     },
   },
   data() {
-    const { name, groupType, about, description, actionRadius, categories } = this.group
+    const { name, slug, groupType, about, description, actionRadius, locationName, categories } = this.group
     return {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
       disabled: false,
+      loadingGeo: false,
+      cities: [],
       formData: {
         name: name || '',
+        slug: slug || '',
         groupType: groupType || '',
         about: about || '',
         description: description || '',
+        locationName: locationName || '',
         actionRadius: actionRadius || '',
         categoryIds: categories ? categories.map((category) => category.id) : [],
       },
       formSchema: {
         name: { required: true, min: NAME_LENGTH_MIN, max: NAME_LENGTH_MAX },
+        slug: { required: false },
         groupType: { required: true },
         about: { required: true },
         description: { required: true },
         actionRadius: { required: true },
+        locationName: { required: false },
         categoryIds: {
           type: 'array',
           required: this.categoriesActive,
@@ -127,13 +155,14 @@ export default {
 
   methods: {
     submit() {
-      const { name, about, description, groupType, actionRadius, categoryIds } = this.formData
+      const { name, about, description, groupType, actionRadius, locationName, categoryIds } = this.formData
       const variables = {
         name,
         about,
         description,
         groupType,
         actionRadius,
+        locationName: locationName.label,
         categoryIds,
       }
       this.update
@@ -143,6 +172,43 @@ export default {
           })
         : this.$emit('createGroup', variables)
     },
+    handleCityInput(value) {
+      clearTimeout(timeout)
+      timeout = setTimeout(() => this.requestGeoData(value), 500)
+    },
+    processLocationsResult(places) {
+      if (!places.length) {
+        return []
+      }
+      const result = []
+      places.forEach((place) => {
+        result.push({
+          label: place.place_name,
+          value: place.place_name,
+          id: place.id,
+        })
+      })
+
+      return result
+    },
+    async requestGeoData(e) {
+      const value = e.target ? e.target.value.trim() : ''
+      if (value === '') {
+        this.cities = []
+        return
+      }
+      this.loadingGeo = true
+
+      const place = encodeURIComponent(value)
+      const lang = this.$i18n.locale()
+
+      const {
+        data: { queryLocations: res },
+      } = await this.$apollo.query({ query: queryLocations(), variables: { place, lang } })
+
+      this.cities = this.processLocationsResult(res)
+      this.loadingGeo = false
+    },
     reset() {
       alert('reset')
     },
@@ -155,6 +221,7 @@ export default {
         this.formData.about !== '' &&
         this.formData.description !== '' &&
         this.formData.actionRadius !== '' &&
+        this.formData.locationName !== '' &&
         this.formData.categoryIds.length > 0
       ) {
         return false
@@ -168,6 +235,7 @@ export default {
         this.formData.about !== this.group.about ||
         this.formData.description !== this.group.description ||
         this.formData.actionRadius !== this.group.actionRadius ||
+        this.formData.locationName !== this.group.locationName ||
         this.formData.categoryIds.length === 0 ||
         !this.sameCategories
       ) {
diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index 30351ae83..5206f8297 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -23,7 +23,7 @@
                 <ds-text bold>{{ item.about }}</ds-text> 
               </ds-space>
               <ds-space margin-top="small">
-                {{ item.description }}
+               <div v-html="item.descriptionExcerpt"></div>
               </ds-space>
               <ds-space margin-top="small">
                 <ds-chip v-for="category in item.categories" :key="category.name">
@@ -34,7 +34,7 @@
             </ds-space>
           </ds-flex-item>
           <ds-flex-item width="10%" centered>
-            <group-menu resource-type="group" :resource="item" :isOwner="item.myRole" @joinGroup="joinGroup"/>
+            <group-menu v-if="item.myRole === 'owner'" resource-type="group" :resource="item" :isOwner="item.myRole" @joinGroup="joinGroup"/>
           </ds-flex-item>
         </ds-flex>
       </ds-card>
diff --git a/webapp/graphql/groups.js b/webapp/graphql/groups.js
index e650bd83e..9506a0547 100644
--- a/webapp/graphql/groups.js
+++ b/webapp/graphql/groups.js
@@ -42,7 +42,7 @@ export const createGroupMutation = gql`
         name
         icon
       }
-      # locationName # test this as result
+      locationName # test this as result
       myRole
     }
   }
@@ -170,6 +170,7 @@ export const groupQuery = gql`
       deleted
       about
       description
+      descriptionExcerpt
       groupType
       actionRadius
       categories {
@@ -181,7 +182,7 @@ export const groupQuery = gql`
       avatar {
         url
       }
-      # locationName # test this as result
+      locationName # test this as result
       myRole
     }
   }
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index 5eaff8f91..9073b333c 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -29,8 +29,8 @@ export default {
   },
   methods: {
     async createGroup(value) {
-      const { name, about, description, groupType, actionRadius, categoryIds } = value
-      const variables = { name, about, description, groupType, actionRadius, categoryIds }
+      const { name, about, description, groupType, actionRadius, locationName, categoryIds } = value
+      const variables = { name, about, description, groupType, actionRadius, locationName, categoryIds }
       try {
         await this.$apollo.mutate({
           mutation: createGroupMutation,
diff --git a/webapp/pages/group/edit/_id/index.vue b/webapp/pages/group/edit/_id/index.vue
index 7930f92fc..58afa90c4 100644
--- a/webapp/pages/group/edit/_id/index.vue
+++ b/webapp/pages/group/edit/_id/index.vue
@@ -23,8 +23,8 @@ export default {
   },
   methods: {
     async updateGroup(value) {
-      const { id, name, about, description, groupType, actionRadius, categoryIds } = value
-      const variables = { id, name, about, description, groupType, actionRadius, categoryIds }
+      const { id, name, about, description, groupType, actionRadius, locationName, categoryIds } = value
+      const variables = { id, name, about, description, groupType, actionRadius, locationName, categoryIds }
       try {
         await this.$apollo.mutate({
           mutation: updateGroupMutation,

From a5e0794ec804904405e6b3deef24bdcadb4ad075 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 15 Sep 2022 13:13:51 +0200
Subject: [PATCH 10/38] style in groupList for locationName and radius

---
 webapp/components/Group/GroupList.vue | 17 ++++-------------
 webapp/pages/group/create.vue         |  2 ++
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index 5206f8297..590243277 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -30,6 +30,10 @@
                 <ds-icon :name="category.icon"></ds-icon>
                   {{ category.name }}
                 </ds-chip>
+                <ds-space margin="x-small">
+                  <div v-if="item.locationName">{{ item.locationName }}</div>
+                  <div v-if="item.actionRadius">{{ item.actionRadius }}</div>
+                </ds-space>
               </ds-space>
             </ds-space>
           </ds-flex-item>
@@ -54,23 +58,10 @@ export default {
     items: { 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')
-    },
     async joinGroup(value) {
-      alert('addMemeberToGroup group')
-      console.log(value)
-      console.log(this.$store.getters['auth/user'].id)
-
       const { id } = value
       const variables = { groupId: id, userId: this.$store.getters['auth/user'].id }
       try {
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index 9073b333c..0a050c7cc 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -29,6 +29,8 @@ export default {
   },
   methods: {
     async createGroup(value) {
+      console.log('createGroup')
+      console.log(value)
       const { name, about, description, groupType, actionRadius, locationName, categoryIds } = value
       const variables = { name, about, description, groupType, actionRadius, locationName, categoryIds }
       try {

From 7d5205e08badecf45feba2d3b0fbbc1c246f0c11 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 19 Sep 2022 18:27:41 +0200
Subject: [PATCH 11/38] translation of the texts

---
 webapp/components/Group/GroupForm.vue   | 22 +++++++++++-----------
 webapp/components/Group/GroupList.vue   |  4 ++--
 webapp/components/Group/GroupMember.vue | 10 +++++-----
 webapp/components/Group/GroupMenu.vue   |  8 ++++----
 webapp/locales/de.json                  | 20 ++++++++++++++++++--
 webapp/locales/en.json                  | 19 +++++++++++++++++--
 webapp/pages/group/create.vue           |  2 +-
 webapp/pages/group/edit/_id.vue         |  8 ++++----
 webapp/pages/my-groups.vue              |  2 +-
 9 files changed, 63 insertions(+), 32 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 3adf3204c..de0b1f38f 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -11,30 +11,30 @@
       >
         <ds-input
           v-model="formData.name"
-          label="Gruppenname"
-          placeholder="Your name ..."
+          :label="$t('group.group-name')"
+          :placeholder="`${$t('group.group-name')}…` "
         ></ds-input>
 
         <ds-input
           v-if="update"
           v-model="formData.slug"
-          label="Slug"
-          placeholder="Your name ..."
+          :label="$t('users.table.columns.slug')"
+          :placeholder="`${$t('group.group-name')}…` "
         ></ds-input>
 
         <ds-select
           icon="user"
           v-model="formData.groupType"
-          label="Sichtbarkeit"
+          :label="$t('group.visibility')"
           :options="['public', 'closed', 'hidden']"
           placeholder="Status ..."
         ></ds-select>
 
-        <ds-input v-model="formData.about" label="Kurzbeschreibung" rows="3"></ds-input>
+        <ds-input v-model="formData.about" :label="$t('group.short-description')" rows="3"></ds-input>
 
         <ds-input
           v-model="formData.description"
-          label="Beschreibung"
+          :label="$t('group.long-description')"
           type="textarea"
           rows="3"
         ></ds-input>
@@ -54,9 +54,9 @@
           <ds-select
             icon="card"
             v-model="formData.actionRadius"
-            label="Radius"
+            :label="$t('group.radius')"
             :options="['regional', 'national', 'continental', 'global']"
-            placeholder="Radius ..."
+            :placeholder="`${$t('group.radius')} …`"
           ></ds-select>
         </ds-space>
         <ds-space margin-top="large">
@@ -67,7 +67,7 @@
           />
         </ds-space>
         <ds-space margin-top="large">
-          <ds-button @click.prevent="reset()">Reset form</ds-button>
+          <ds-button @click.prevent="reset()">{{ $t('group.reset-form') }}</ds-button>
           <ds-button
             type="submit"
             @click.prevent="submit()"
@@ -80,7 +80,7 @@
         </ds-space>
       </ds-form>
       <ds-space centered v-show="!update">
-        <nuxt-link to="/my-groups">zurück</nuxt-link>
+        <nuxt-link to="/my-groups">{{$t('group.back')}}</nuxt-link>
       </ds-space>
     </ds-container>
   </div>
diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index 590243277..5f3ab8d4d 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -1,8 +1,8 @@
 <template>
     <ds-container class="group-card">
       <ds-space>
-        <div @click="onlyOwnerGroups(true)" ref="myGruops"><ds-button >show only my groups</ds-button ></div>
-        <div @click="onlyOwnerGroups(false)" ref="allGruops" hidden><ds-button >show all groups</ds-button ></div>
+        <div @click="onlyOwnerGroups(true)" ref="myGruops"><ds-button >{{$t('group.show-my-created-groups')}}</ds-button ></div>
+        <div @click="onlyOwnerGroups(false)" ref="allGruops" hidden><ds-button >{{$t('group.show-all-my-groups')}}</ds-button ></div>
       </ds-space>
       <ds-space margin-bottom="small" v-for="item in items" :key="item.id"> 
         <ds-card  :ref="item.myRole === null ? 'null' : item.myRole">
diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index 00c3a4094..16f22eb2d 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ds-space><h3>Members</h3></ds-space>
+    <ds-space><h3>{{$t('group.members')}}</h3></ds-space>
     <base-card>
       <ds-table :data="responseGroupMembersQuery" :fields="tableFields" condensed>
         <template slot="avatar">
@@ -32,12 +32,12 @@
     <ds-modal
       v-if="isOpen"
       v-model="isOpen"
-      title="delete member ?"
+      :title="`${$t('group.remove-member')} ?`"
       force
       extended
-      confirm-label="delete member"
+      :confirm-label="$t('group.remove-member')"
       @confirm="deleteMember(memberId)"
-      cancel-label="Please not"
+      :cancel-label="$t('actions.cancel')"
     />
   </div>
 </template>
@@ -72,7 +72,7 @@ export default {
           mutation: changeGroupMemberRoleMutation,
           variables: { groupId: this.groupId, userId: id, roleInGroup: newRole },
         })
-        this.$toast.success('Die Rolle wurde auf (' + newRole + ') geändert!')
+        this.$toast.success(this.$t('group.change-member-role', {role: newRole}))
       } catch (error) {
         this.$toast.error(error.message)
       }
diff --git a/webapp/components/Group/GroupMenu.vue b/webapp/components/Group/GroupMenu.vue
index deed94e75..58a2d60ae 100644
--- a/webapp/components/Group/GroupMenu.vue
+++ b/webapp/components/Group/GroupMenu.vue
@@ -59,14 +59,14 @@ export default {
       if (this.resourceType === 'group') {
         if (this.isOwner === 'owner') {
           routes.push({
-            label: 'Settings',
+            label: $t('admin.settings.name'),
             path: `/group/edit/${this.resource.id}`,
             icon: 'edit',
           })
         }
         if (this.isOwner === 'usual') {
           routes.push({
-            label: 'Unfollowing',
+            label: $t('group.unfollowing'),
             callback: () => {
               // this.$emit('join-group', this.resource)
             },
@@ -75,7 +75,7 @@ export default {
         }
         if (this.isOwner === 'pending') {
           routes.push({
-            label: 'Unfollowing',
+            label: $t('group.unfollowing'),
             callback: () => {
               // this.removePending(this.resource)
             },
@@ -84,7 +84,7 @@ export default {
         }
         if (this.isOwner === null) {
           routes.push({
-            label: 'Following',
+            label: $t('group.follow'),
             callback: () => {
                 this.$emit('joinGroup', this.resource)
             },
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 4e046044b..172c6233a 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -371,11 +371,28 @@
     "following": "Folge Ich"
   },
   "group": {
+    "group-name":"Gruppenname",
+    "myGroups": "Meine Gruppen",
     "group-created": "Die Gruppe wurde angelegt!",
     "group-updated": "Die Gruppendaten wurden geändert!",
     "newGroup": "Erstelle eine neue Gruppe",
     "save": "Neue Gruppe anlegen",
-    "update": "Änderung speichern"
+    "update": "Änderung speichern",
+    "show-my-created-groups":"Meine angelegten Gruppen anzeigen",
+    "show-all-my-groups":"Alle meine Gruppen anzeigen",
+    "visibility":"Sichtbarkeit",
+    "short-description":"Kurzbeschreibung",
+    "long-description":"Beschreibung",
+    "radius":"Radius",
+    "reset-form":"Formular zurücksetzen",
+    "back":"zurück",
+    "unfollowing":"Nicht mehr folgen",
+    "follow":"Folge",
+    "settings":"Gruppeneinstellungen",
+    "general":"Allgemein",
+    "members":"Mitglieder",
+    "removemember":"Mitglied entfernen",
+    "change-member-role":"Die Rolle wurde auf ({role}) geändert!"
   },
   "hashtags-filter": {
     "clearSearch": "Suche löschen",
@@ -754,7 +771,6 @@
       "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 2f5bef5fe..26db326a4 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -371,11 +371,27 @@
     "following": "Following"
   },
   "group": {
+    "group-name":"Group name",
+    "myGroups": "My Groups",
     "group-created": "The group was created!",
     "group-updated": "The group data has been changed.",
     "newGroup": "Create a new Group",
     "save": "Create new group",
-    "update": "Save change"
+    "update": "Save change",
+    "show-my-created-groups":"show only my groups",
+    "show-all-my-groups":"show all groups",
+    "visibility":"Visibility",
+    "short-description":"Short description",
+    "long-description":"Description",
+    "radius":"Radius",
+    "reset-form":"Reset form",
+    "back":"back",
+    "unfollowing":"unfollowing",
+    "follow":"Follow",
+    "settings":"Group Settings",
+    "general":"General",
+    "members":"Members",
+    "remove-member":"Remove member"
   },
   "hashtags-filter": {
     "clearSearch": "Clear search",
@@ -754,7 +770,6 @@
       "unmute": "Unmute user",
       "unmuted": "{name} is unmuted again"
     },
-    "myGroups": "My Groups",
     "name": "Settings",
     "notifications": {
       "name": "Notifications",
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index 0a050c7cc..bbc10e131 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <ds-section>
-      <h1 class="ds-heading ds-heading-h1">Create New Groupe</h1>
+      <h1 class="ds-heading ds-heading-h1">{{$t('group.newGroup')}}Create New Groupe</h1>
     </ds-section>
     <ds-space margin="large">
       <ds-flex :width="{ base: '100%' }" gutter="base">
diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index aa6fc6539..938d6f26a 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -2,7 +2,7 @@
   <div>
     <ds-section>
       <h1 class="ds-heading ds-heading-h1">{{ group.name }}</h1>
-      <div class="">Group Setting</div>
+      <div class="">{{$t('group.settings')}}</div>
     </ds-section>
     <ds-space margin="large">
       <ds-flex gutter="small">
@@ -17,7 +17,7 @@
       </ds-flex>
     </ds-space>
     <ds-space centered>
-      <nuxt-link to="/my-groups">zurück</nuxt-link>
+      <nuxt-link to="/my-groups">{{$t('group.back')}}</nuxt-link>
     </ds-space>
   </div>
 </template>
@@ -34,11 +34,11 @@ export default {
     routes() {
       return [
         {
-          name: 'General',
+          name: $t('group.general'), 
           path: `/group/edit/${this.group.id}`,
         },
         {
-          name: 'Members',
+          name: $t('group.members'),
           path: `/group/edit/${this.group.id}/members`,
         },
       ]
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index 888f6280c..b91fcec48 100644
--- a/webapp/pages/my-groups.vue
+++ b/webapp/pages/my-groups.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <ds-section>
-      <h1 class="ds-heading ds-heading-h1">My Groups</h1>
+      <h1 class="ds-heading ds-heading-h1">{{$t('group.myGroups')}}</h1>
       <nuxt-link :to="{ name: 'group-create' }">
         <base-button
           v-tooltip="{

From 57a6e74d10dd408928e330fb17c968ff79b5d705 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 19 Sep 2022 18:50:53 +0200
Subject: [PATCH 12/38] fix lint and locales

---
 webapp/components/Group/GroupForm.vue   | 36 ++++++++++--------
 webapp/components/Group/GroupList.vue   | 50 +++++++++++++++----------
 webapp/components/Group/GroupMember.vue |  6 ++-
 webapp/components/Group/GroupMenu.vue   | 12 +++---
 webapp/locales/de.json                  | 34 ++++++++---------
 webapp/locales/en.json                  | 33 ++++++++--------
 webapp/pages/group/create.vue           | 14 +++++--
 webapp/pages/group/edit/_id.vue         |  8 ++--
 webapp/pages/group/edit/_id/index.vue   | 14 ++++++-
 webapp/pages/my-groups.vue              |  2 +-
 10 files changed, 122 insertions(+), 87 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index de0b1f38f..7a3882723 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -12,14 +12,14 @@
         <ds-input
           v-model="formData.name"
           :label="$t('group.group-name')"
-          :placeholder="`${$t('group.group-name')}…` "
+          :placeholder="`${$t('group.group-name')}…`"
         ></ds-input>
 
         <ds-input
           v-if="update"
           v-model="formData.slug"
           :label="$t('users.table.columns.slug')"
-          :placeholder="`${$t('group.group-name')}…` "
+          :placeholder="`${$t('group.group-name')}…`"
         ></ds-input>
 
         <ds-select
@@ -30,7 +30,11 @@
           placeholder="Status ..."
         ></ds-select>
 
-        <ds-input v-model="formData.about" :label="$t('group.short-description')" rows="3"></ds-input>
+        <ds-input
+          v-model="formData.about"
+          :label="$t('group.short-description')"
+          rows="3"
+        ></ds-input>
 
         <ds-input
           v-model="formData.description"
@@ -40,15 +44,15 @@
         ></ds-input>
         <ds-space margin-top="large">
           <ds-select
-          id="city"
-          v-model="formData.locationName"
-          icon="map-marker"
-          :options="cities"
-          :label="$t('settings.data.labelCity')"
-          :placeholder="$t('settings.data.labelCity')"
-          :loading="loadingGeo"
-          @input.native="handleCityInput"
-        />
+            id="city"
+            v-model="formData.locationName"
+            icon="map-marker"
+            :options="cities"
+            :label="$t('settings.data.labelCity')"
+            :placeholder="$t('settings.data.labelCity')"
+            :loading="loadingGeo"
+            @input.native="handleCityInput"
+          />
         </ds-space>
         <ds-space margin-top="large">
           <ds-select
@@ -80,7 +84,7 @@
         </ds-space>
       </ds-form>
       <ds-space centered v-show="!update">
-        <nuxt-link to="/my-groups">{{$t('group.back')}}</nuxt-link>
+        <nuxt-link to="/my-groups">{{ $t('group.back') }}</nuxt-link>
       </ds-space>
     </ds-container>
   </div>
@@ -112,7 +116,8 @@ export default {
     },
   },
   data() {
-    const { name, slug, groupType, about, description, actionRadius, locationName, categories } = this.group
+    const { name, slug, groupType, about, description, actionRadius, locationName, categories } =
+      this.group
     return {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
       disabled: false,
@@ -155,7 +160,8 @@ export default {
 
   methods: {
     submit() {
-      const { name, about, description, groupType, actionRadius, locationName, categoryIds } = this.formData
+      const { name, about, description, groupType, actionRadius, locationName, categoryIds } =
+        this.formData
       const variables = {
         name,
         about,
diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index 5f3ab8d4d..a25a1bbf9 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -1,17 +1,21 @@
 <template>
-    <ds-container class="group-card">
-      <ds-space>
-        <div @click="onlyOwnerGroups(true)" ref="myGruops"><ds-button >{{$t('group.show-my-created-groups')}}</ds-button ></div>
-        <div @click="onlyOwnerGroups(false)" ref="allGruops" hidden><ds-button >{{$t('group.show-all-my-groups')}}</ds-button ></div>
-      </ds-space>
-      <ds-space margin-bottom="small" v-for="item in items" :key="item.id"> 
-        <ds-card  :ref="item.myRole === null ? 'null' : item.myRole">
-          <ds-flex>
-            <ds-flex-item width="90%" centered>
-              <ds-space margin="large">
+  <ds-container class="group-card">
+    <ds-space>
+      <div @click="onlyOwnerGroups(true)" ref="myGruops">
+        <ds-button>{{ $t('group.show-my-created-groups') }}</ds-button>
+      </div>
+      <div @click="onlyOwnerGroups(false)" ref="allGruops" hidden>
+        <ds-button>{{ $t('group.show-all-my-groups') }}</ds-button>
+      </div>
+    </ds-space>
+    <ds-space margin-bottom="small" v-for="item in items" :key="item.id">
+      <ds-card :ref="item.myRole === null ? 'null' : item.myRole">
+        <ds-flex>
+          <ds-flex-item width="90%" centered>
+            <ds-space margin="large">
               <nuxt-link :to="`/group/${item.id}`">
                 <ds-text size="x-large">{{ item.name }}</ds-text>
-              </nuxt-link> 
+              </nuxt-link>
               <ds-text size="small">
                 {{ item.groupType }}
                 <ds-chip v-if="item.myRole === 'owner'" color="inverse">{{ item.myRole }}</ds-chip>
@@ -20,14 +24,14 @@
                 </ds-chip>
               </ds-text>
               <ds-space margin-top="small">
-                <ds-text bold>{{ item.about }}</ds-text> 
+                <ds-text bold>{{ item.about }}</ds-text>
               </ds-space>
               <ds-space margin-top="small">
-               <div v-html="item.descriptionExcerpt"></div>
+                <div v-html="item.descriptionExcerpt"></div>
               </ds-space>
               <ds-space margin-top="small">
                 <ds-chip v-for="category in item.categories" :key="category.name">
-                <ds-icon :name="category.icon"></ds-icon>
+                  <ds-icon :name="category.icon"></ds-icon>
                   {{ category.name }}
                 </ds-chip>
                 <ds-space margin="x-small">
@@ -38,7 +42,13 @@
             </ds-space>
           </ds-flex-item>
           <ds-flex-item width="10%" centered>
-            <group-menu v-if="item.myRole === 'owner'" resource-type="group" :resource="item" :isOwner="item.myRole" @joinGroup="joinGroup"/>
+            <group-menu
+              v-if="item.myRole === 'owner'"
+              resource-type="group"
+              :resource="item"
+              :isOwner="item.myRole"
+              @joinGroup="joinGroup"
+            />
           </ds-flex-item>
         </ds-flex>
       </ds-card>
@@ -65,16 +75,16 @@ export default {
       const { id } = value
       const variables = { groupId: id, userId: this.$store.getters['auth/user'].id }
       try {
-         await this.$apollo.mutate({
-           mutation: joinGroupMutation,
-           variables,
-         })
+        await this.$apollo.mutate({
+          mutation: joinGroupMutation,
+          variables,
+        })
         this.$toast.success(this.$t('group.group-created'))
       } catch (error) {
         this.$toast.error(error.message)
       }
     },
-   
+
     onlyOwnerGroups(bool) {
       this.$refs.myGruops.hidden = bool
       this.$refs.allGruops.hidden = !bool
diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index 16f22eb2d..a62f7e16d 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <ds-space><h3>{{$t('group.members')}}</h3></ds-space>
+    <ds-space>
+      <h3>{{ $t('group.members') }}</h3>
+    </ds-space>
     <base-card>
       <ds-table :data="responseGroupMembersQuery" :fields="tableFields" condensed>
         <template slot="avatar">
@@ -72,7 +74,7 @@ export default {
           mutation: changeGroupMemberRoleMutation,
           variables: { groupId: this.groupId, userId: id, roleInGroup: newRole },
         })
-        this.$toast.success(this.$t('group.change-member-role', {role: newRole}))
+        this.$toast.success(this.$t('group.change-member-role', { role: newRole }))
       } catch (error) {
         this.$toast.error(error.message)
       }
diff --git a/webapp/components/Group/GroupMenu.vue b/webapp/components/Group/GroupMenu.vue
index 58a2d60ae..09f877906 100644
--- a/webapp/components/Group/GroupMenu.vue
+++ b/webapp/components/Group/GroupMenu.vue
@@ -16,7 +16,7 @@
       <div class="group-menu-popover">
         <ds-menu :routes="routes">
           <template #menuitem="item">
-            {{item.parents}}
+            {{ item.parents }}
             <ds-menu-item
               :route="item.route"
               :parents="item.parents"
@@ -59,14 +59,14 @@ export default {
       if (this.resourceType === 'group') {
         if (this.isOwner === 'owner') {
           routes.push({
-            label: $t('admin.settings.name'),
+            label: this.$t('admin.settings.name'),
             path: `/group/edit/${this.resource.id}`,
             icon: 'edit',
           })
         }
         if (this.isOwner === 'usual') {
           routes.push({
-            label: $t('group.unfollowing'),
+            label: this.$t('group.unfollowing'),
             callback: () => {
               // this.$emit('join-group', this.resource)
             },
@@ -75,7 +75,7 @@ export default {
         }
         if (this.isOwner === 'pending') {
           routes.push({
-            label: $t('group.unfollowing'),
+            label: this.$t('group.unfollowing'),
             callback: () => {
               // this.removePending(this.resource)
             },
@@ -84,9 +84,9 @@ export default {
         }
         if (this.isOwner === null) {
           routes.push({
-            label: $t('group.follow'),
+            label: this.$t('group.follow'),
             callback: () => {
-                this.$emit('joinGroup', this.resource)
+              this.$emit('joinGroup', this.resource)
             },
             icon: 'plus',
           })
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 172c6233a..de169d95e 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -371,28 +371,28 @@
     "following": "Folge Ich"
   },
   "group": {
-    "group-name":"Gruppenname",
-    "myGroups": "Meine Gruppen",
+    "back": "zurück",
+    "change-member-role": "Die Rolle wurde auf ({role}) geändert!",
+    "follow": "Folge",
+    "general": "Allgemein",
     "group-created": "Die Gruppe wurde angelegt!",
+    "group-name": "Gruppenname",
     "group-updated": "Die Gruppendaten wurden geändert!",
+    "long-description": "Beschreibung",
+    "members": "Mitglieder",
+    "myGroups": "Meine Gruppen",
     "newGroup": "Erstelle eine neue Gruppe",
+    "radius": "Radius",
+    "remove-member": "Mitglied entfernen",
+    "reset-form": "Formular zurücksetzen",
     "save": "Neue Gruppe anlegen",
+    "settings": "Gruppeneinstellungen",
+    "short-description": "Kurzbeschreibung",
+    "show-all-my-groups": "Alle meine Gruppen anzeigen",
+    "show-my-created-groups": "Meine angelegten Gruppen anzeigen",
+    "unfollowing": "Nicht mehr folgen",
     "update": "Änderung speichern",
-    "show-my-created-groups":"Meine angelegten Gruppen anzeigen",
-    "show-all-my-groups":"Alle meine Gruppen anzeigen",
-    "visibility":"Sichtbarkeit",
-    "short-description":"Kurzbeschreibung",
-    "long-description":"Beschreibung",
-    "radius":"Radius",
-    "reset-form":"Formular zurücksetzen",
-    "back":"zurück",
-    "unfollowing":"Nicht mehr folgen",
-    "follow":"Folge",
-    "settings":"Gruppeneinstellungen",
-    "general":"Allgemein",
-    "members":"Mitglieder",
-    "removemember":"Mitglied entfernen",
-    "change-member-role":"Die Rolle wurde auf ({role}) geändert!"
+    "visibility": "Sichtbarkeit"
   },
   "hashtags-filter": {
     "clearSearch": "Suche löschen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 26db326a4..1b32454a0 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -371,27 +371,28 @@
     "following": "Following"
   },
   "group": {
-    "group-name":"Group name",
-    "myGroups": "My Groups",
+    "back": "back",
+    "change-member-role": "The role has been changed to ({role})!",
+    "follow": "Follow",
+    "general": "General",
     "group-created": "The group was created!",
+    "group-name": "Group name",
     "group-updated": "The group data has been changed.",
+    "long-description": "Description",
+    "members": "Members",
+    "myGroups": "My Groups",
     "newGroup": "Create a new Group",
+    "radius": "Radius",
+    "remove-member": "Remove member",
+    "reset-form": "Reset form",
     "save": "Create new group",
+    "settings": "Group Settings",
+    "short-description": "Short description",
+    "show-all-my-groups": "show all groups",
+    "show-my-created-groups": "show only my groups",
+    "unfollowing": "unfollowing",
     "update": "Save change",
-    "show-my-created-groups":"show only my groups",
-    "show-all-my-groups":"show all groups",
-    "visibility":"Visibility",
-    "short-description":"Short description",
-    "long-description":"Description",
-    "radius":"Radius",
-    "reset-form":"Reset form",
-    "back":"back",
-    "unfollowing":"unfollowing",
-    "follow":"Follow",
-    "settings":"Group Settings",
-    "general":"General",
-    "members":"Members",
-    "remove-member":"Remove member"
+    "visibility": "Visibility"
   },
   "hashtags-filter": {
     "clearSearch": "Clear search",
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index bbc10e131..29bf0c6cd 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <ds-section>
-      <h1 class="ds-heading ds-heading-h1">{{$t('group.newGroup')}}Create New Groupe</h1>
+      <h1 class="ds-heading ds-heading-h1">{{ $t('group.newGroup') }}Create New Groupe</h1>
     </ds-section>
     <ds-space margin="large">
       <ds-flex :width="{ base: '100%' }" gutter="base">
@@ -29,10 +29,16 @@ export default {
   },
   methods: {
     async createGroup(value) {
-      console.log('createGroup')
-      console.log(value)
       const { name, about, description, groupType, actionRadius, locationName, categoryIds } = value
-      const variables = { name, about, description, groupType, actionRadius, locationName, categoryIds }
+      const variables = {
+        name,
+        about,
+        description,
+        groupType,
+        actionRadius,
+        locationName,
+        categoryIds,
+      }
       try {
         await this.$apollo.mutate({
           mutation: createGroupMutation,
diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index 938d6f26a..c60300a3a 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -2,7 +2,7 @@
   <div>
     <ds-section>
       <h1 class="ds-heading ds-heading-h1">{{ group.name }}</h1>
-      <div class="">{{$t('group.settings')}}</div>
+      <div class="">{{ $t('group.settings') }}</div>
     </ds-section>
     <ds-space margin="large">
       <ds-flex gutter="small">
@@ -17,7 +17,7 @@
       </ds-flex>
     </ds-space>
     <ds-space centered>
-      <nuxt-link to="/my-groups">{{$t('group.back')}}</nuxt-link>
+      <nuxt-link to="/my-groups">{{ $t('group.back') }}</nuxt-link>
     </ds-space>
   </div>
 </template>
@@ -34,11 +34,11 @@ export default {
     routes() {
       return [
         {
-          name: $t('group.general'), 
+          name: this.$t('group.general'),
           path: `/group/edit/${this.group.id}`,
         },
         {
-          name: $t('group.members'),
+          name: this.$t('group.members'),
           path: `/group/edit/${this.group.id}/members`,
         },
       ]
diff --git a/webapp/pages/group/edit/_id/index.vue b/webapp/pages/group/edit/_id/index.vue
index 58afa90c4..85b775e78 100644
--- a/webapp/pages/group/edit/_id/index.vue
+++ b/webapp/pages/group/edit/_id/index.vue
@@ -23,8 +23,18 @@ export default {
   },
   methods: {
     async updateGroup(value) {
-      const { id, name, about, description, groupType, actionRadius, locationName, categoryIds } = value
-      const variables = { id, name, about, description, groupType, actionRadius, locationName, categoryIds }
+      const { id, name, about, description, groupType, actionRadius, locationName, categoryIds } =
+        value
+      const variables = {
+        id,
+        name,
+        about,
+        description,
+        groupType,
+        actionRadius,
+        locationName,
+        categoryIds,
+      }
       try {
         await this.$apollo.mutate({
           mutation: updateGroupMutation,
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index b91fcec48..f291e093e 100644
--- a/webapp/pages/my-groups.vue
+++ b/webapp/pages/my-groups.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <ds-section>
-      <h1 class="ds-heading ds-heading-h1">{{$t('group.myGroups')}}</h1>
+      <h1 class="ds-heading ds-heading-h1">{{ $t('group.myGroups') }}</h1>
       <nuxt-link :to="{ name: 'group-create' }">
         <base-button
           v-tooltip="{

From 17891c93ae449f3be278715d8c74d1bdc0af23f2 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 20 Sep 2022 08:50:48 +0200
Subject: [PATCH 13/38] fix locales lint

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

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 188d99665..73ebdc6d3 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -375,10 +375,6 @@
     "following": "Folge Ich"
   },
   "group": {
-    "back": "zurück",
-    "change-member-role": "Die Rolle wurde auf ({role}) geändert!",
-    "follow": "Folge",
-    "general": "Allgemein",
     "actionRadii": {
       "continental": "Kontinentale Gruppe",
       "global": "Globale Gruppe",
@@ -387,26 +383,15 @@
       "regional": "Regionale Gruppe"
     },
     "actionRadius": "Aktionsradius",
+    "back": "zurück",
+    "change-member-role": "Die Rolle wurde auf ({role}) geändert!",
+    "follow": "Folge",
     "foundation": "Gründung",
+    "general": "Allgemein",
     "goal": "Ziel der Gruppe",
     "group-created": "Die Gruppe wurde angelegt!",
     "group-name": "Gruppenname",
     "group-updated": "Die Gruppendaten wurden geändert!",
-    "long-description": "Beschreibung",
-    "members": "Mitglieder",
-    "myGroups": "Meine Gruppen",
-    "newGroup": "Erstelle eine neue Gruppe",
-    "radius": "Radius",
-    "remove-member": "Mitglied entfernen",
-    "reset-form": "Formular zurücksetzen",
-    "save": "Neue Gruppe anlegen",
-    "settings": "Gruppeneinstellungen",
-    "short-description": "Kurzbeschreibung",
-    "show-all-my-groups": "Alle meine Gruppen anzeigen",
-    "show-my-created-groups": "Meine angelegten Gruppen anzeigen",
-    "unfollowing": "Nicht mehr folgen",
-    "update": "Änderung speichern",
-    "visibility": "Sichtbarkeit"
     "joinLeaveButton": {
       "iAmMember": "Bin Mitglied",
       "join": "Beitreten"
@@ -416,9 +401,15 @@
       "message": "Eine Gruppe zu verlassen ist möglicherweise nicht rückgängig zu machen!<br>Gruppe <b>„{name}“</b> verlassen!",
       "title": "Möchtest du wirklich die Gruppe verlassen?"
     },
+    "long-description": "Beschreibung",
+    "members": "Mitglieder",
     "membersCount": "Mitglieder",
     "membersListTitle": "Gruppenmitglieder",
+    "myGroups": "Meine Gruppen",
     "newGroup": "Erstelle eine neue Gruppe",
+    "radius": "Radius",
+    "remove-member": "Mitglied entfernen",
+    "reset-form": "Formular zurücksetzen",
     "role": "Deine Rolle in der Gruppe",
     "roles": {
       "admin": "Administrator",
@@ -427,13 +418,19 @@
       "usual": "Einfaches Mitglied"
     },
     "save": "Neue Gruppe anlegen",
+    "settings": "Gruppeneinstellungen",
+    "short-description": "Kurzbeschreibung",
+    "show-all-my-groups": "Alle meine Gruppen anzeigen",
+    "show-my-created-groups": "Meine angelegten Gruppen anzeigen",
     "type": "Gruppentyp",
     "types": {
       "closed": "Geschlossene Gruppe",
       "hidden": "Versteckte Gruppe",
       "public": "Öffentliche Gruppe"
     },
-    "update": "Änderung speichern"
+    "unfollowing": "Nicht mehr folgen",
+    "update": "Änderung speichern",
+    "visibility": "Sichtbarkeit"
   },
   "hashtags-filter": {
     "clearSearch": "Suche löschen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index efb3aa856..7e93d6cdf 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -375,10 +375,6 @@
     "following": "Following"
   },
   "group": {
-    "back": "back",
-    "change-member-role": "The role has been changed to ({role})!",
-    "follow": "Follow",
-    "general": "General",
     "actionRadii": {
       "continental": "Continental Group",
       "global": "Global Group",
@@ -387,26 +383,15 @@
       "regional": "Regional Group"
     },
     "actionRadius": "Action radius",
+    "back": "back",
+    "change-member-role": "The role has been changed to ({role})!",
+    "follow": "Follow",
     "foundation": "Foundation",
+    "general": "General",
     "goal": "Goal of group",
     "group-created": "The group was created!",
     "group-name": "Group name",
     "group-updated": "The group data has been changed.",
-    "long-description": "Description",
-    "members": "Members",
-    "myGroups": "My Groups",
-    "newGroup": "Create a new Group",
-    "radius": "Radius",
-    "remove-member": "Remove member",
-    "reset-form": "Reset form",
-    "save": "Create new group",
-    "settings": "Group Settings",
-    "short-description": "Short description",
-    "show-all-my-groups": "show all groups",
-    "show-my-created-groups": "show only my groups",
-    "unfollowing": "unfollowing",
-    "update": "Save change",
-    "visibility": "Visibility"
     "joinLeaveButton": {
       "iAmMember": "I'm a member",
       "join": "Join"
@@ -416,9 +401,15 @@
       "message": "Leaving a group may be irreversible!<br>Leave group <b>“{name}”</b>!",
       "title": "Do you really want to leave the group?"
     },
+    "long-description": "Description",
+    "members": "Members",
     "membersCount": "Members",
     "membersListTitle": "Group Members",
+    "myGroups": "My Groups",
     "newGroup": "Create a new Group",
+    "radius": "Radius",
+    "remove-member": "Remove member",
+    "reset-form": "Reset form",
     "role": "Your role in the group",
     "roles": {
       "admin": "Administrator",
@@ -427,13 +418,19 @@
       "usual": "Simple Member"
     },
     "save": "Create new group",
+    "settings": "Group Settings",
+    "short-description": "Short description",
+    "show-all-my-groups": "show all groups",
+    "show-my-created-groups": "show only my groups",
     "type": "Group type",
     "types": {
       "closed": "Closed Group",
       "hidden": "Hidden Group",
       "public": "Public Group"
     },
-    "update": "Save change"
+    "unfollowing": "unfollowing",
+    "update": "Save change",
+    "visibility": "Visibility"
   },
   "hashtags-filter": {
     "clearSearch": "Clear search",

From c37aef89bc2331697829f655ea03a61cc4cb7282 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 23 Sep 2022 08:31:36 +0200
Subject: [PATCH 14/38] 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 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 7a3882723..09d9ff799 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -11,8 +11,8 @@
       >
         <ds-input
           v-model="formData.name"
-          :label="$t('group.group-name')"
-          :placeholder="`${$t('group.group-name')}…`"
+          :label="$t('group.groupName')"
+          :placeholder="`${$t('group.groupName')}…`"
         ></ds-input>
 
         <ds-input

From bf492ce9c37053384ae70fd4607ee1f97750fa10 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 23 Sep 2022 08:31:46 +0200
Subject: [PATCH 15/38] 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 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 09d9ff799..8ed18f4aa 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -19,7 +19,7 @@
           v-if="update"
           v-model="formData.slug"
           :label="$t('users.table.columns.slug')"
-          :placeholder="`${$t('group.group-name')}…`"
+          :placeholder="`${$t('group.groupName')}…`"
         ></ds-input>
 
         <ds-select

From 522a9ff4c176170613757e54bc1f9803bd5cc1bd Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 23 Sep 2022 08:32:03 +0200
Subject: [PATCH 16/38] 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 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 8ed18f4aa..f04c01ae2 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -25,7 +25,7 @@
         <ds-select
           icon="user"
           v-model="formData.groupType"
-          :label="$t('group.visibility')"
+          :label="$t('group.type')"
           :options="['public', 'closed', 'hidden']"
           placeholder="Status ..."
         ></ds-select>

From 10975f55519aac3fe9a2285563002c9281af3b7e Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 23 Sep 2022 08:32:24 +0200
Subject: [PATCH 17/38] 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 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index f04c01ae2..2e446f3b6 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -32,7 +32,7 @@
 
         <ds-input
           v-model="formData.about"
-          :label="$t('group.short-description')"
+          :label="$t('group.goal')"
           rows="3"
         ></ds-input>
 

From 15981750a71905970f8c64871ee2a3e215dd6a08 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 23 Sep 2022 08:32:34 +0200
Subject: [PATCH 18/38] 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 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 2e446f3b6..a44c12bb9 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -38,7 +38,7 @@
 
         <ds-input
           v-model="formData.description"
-          :label="$t('group.long-description')"
+          :label="$t('group.description')"
           type="textarea"
           rows="3"
         ></ds-input>

From 475363041896ff9d4fed547a0f96b56b1f1975a0 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 23 Sep 2022 08:32:49 +0200
Subject: [PATCH 19/38] 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 7e93d6cdf..74e81ec7f 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -384,7 +384,7 @@
     },
     "actionRadius": "Action radius",
     "back": "back",
-    "change-member-role": "The role has been changed to ({role})!",
+    "change-member-role": "The role has been changed to “{role}”!",
     "follow": "Follow",
     "foundation": "Foundation",
     "general": "General",

From c8dc0d99c099fd501838ab8e74c5dd8424320d2c Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 23 Sep 2022 08:57:27 +0200
Subject: [PATCH 20/38] 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 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index a44c12bb9..c06fea683 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -58,9 +58,9 @@
           <ds-select
             icon="card"
             v-model="formData.actionRadius"
-            :label="$t('group.radius')"
+            :label="$t('group.actionRadius')"
             :options="['regional', 'national', 'continental', 'global']"
-            :placeholder="`${$t('group.radius')} …`"
+            :placeholder="`${$t('group.actionRadius')} …`"
           ></ds-select>
         </ds-space>
         <ds-space margin-top="large">

From 4c55ca731e8d1e8a108d039e9e417f1811d50122 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 23 Sep 2022 08:59:45 +0200
Subject: [PATCH 21/38] Update webapp/pages/my-groups.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/my-groups.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index f291e093e..18bdda59e 100644
--- a/webapp/pages/my-groups.vue
+++ b/webapp/pages/my-groups.vue
@@ -23,7 +23,7 @@
   </div>
 </template>
 <script>
-import GroupList from '~/components/Group/GroupList.vue'
+import GroupList from '~/components/Group/GroupList'
 import { groupQuery } from '~/graphql/groups.js'
 
 export default {

From 22f5c90a21120c4e4b390e771f76ef186660abc6 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 23 Sep 2022 09:00:07 +0200
Subject: [PATCH 22/38] Update webapp/pages/group/edit/_id/members.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/members.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
index 7b2c72cfc..e411c8969 100644
--- a/webapp/pages/group/edit/_id/members.vue
+++ b/webapp/pages/group/edit/_id/members.vue
@@ -16,7 +16,7 @@ export default {
     group: {
       type: Object,
       required: false,
-      default: () => ({}),
+      default: {},
     },
   },
   data() {

From fcf2bba1e8cdb14de787af65f8ca4c50efe873e7 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 23 Sep 2022 09:06:25 +0200
Subject: [PATCH 23/38] Update webapp/components/Group/GroupList.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/GroupList.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index a25a1bbf9..1dd2709a4 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -84,7 +84,6 @@ export default {
         this.$toast.error(error.message)
       }
     },
-
     onlyOwnerGroups(bool) {
       this.$refs.myGruops.hidden = bool
       this.$refs.allGruops.hidden = !bool

From 3d6c5e6f62c6718da6dba3808d83452c8e8331d9 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 23 Sep 2022 09:13:05 +0200
Subject: [PATCH 24/38] 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 73ebdc6d3..acf66bd09 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -384,7 +384,7 @@
     },
     "actionRadius": "Aktionsradius",
     "back": "zurück",
-    "change-member-role": "Die Rolle wurde auf ({role}) geändert!",
+    "change-member-role": "Die Rolle wurde auf „{role}“ geändert!",
     "follow": "Folge",
     "foundation": "Gründung",
     "general": "Allgemein",

From 69620ca8d749a0480dba292318b0e0fcbd4cc665 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 23 Sep 2022 10:38:21 +0200
Subject: [PATCH 25/38] fix reviews

---
 webapp/components/Group/GroupList.vue   |  8 ++++----
 webapp/components/Group/GroupMember.vue |  6 +++---
 webapp/locales/de.json                  | 10 +++++-----
 webapp/locales/en.json                  | 10 +++++-----
 webapp/pages/group/create.vue           |  4 ++--
 webapp/pages/group/edit/_id/members.vue |  4 ++--
 6 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index a25a1bbf9..10e53f3b7 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -2,10 +2,10 @@
   <ds-container class="group-card">
     <ds-space>
       <div @click="onlyOwnerGroups(true)" ref="myGruops">
-        <ds-button>{{ $t('group.show-my-created-groups') }}</ds-button>
+        <ds-button>{{ $t('group.showMyCreatedGroups') }}</ds-button>
       </div>
       <div @click="onlyOwnerGroups(false)" ref="allGruops" hidden>
-        <ds-button>{{ $t('group.show-all-my-groups') }}</ds-button>
+        <ds-button>{{ $t('group.showAllMyGroups') }}</ds-button>
       </div>
     </ds-space>
     <ds-space margin-bottom="small" v-for="item in items" :key="item.id">
@@ -23,7 +23,7 @@
                   {{ item.myRole }}
                 </ds-chip>
               </ds-text>
-              <ds-space margin-top="small">
+              <ds-space v-if="item.about" margin-top="small">
                 <ds-text bold>{{ item.about }}</ds-text>
               </ds-space>
               <ds-space margin-top="small">
@@ -79,7 +79,7 @@ export default {
           mutation: joinGroupMutation,
           variables,
         })
-        this.$toast.success(this.$t('group.group-created'))
+        this.$toast.success(this.$t('group.groupCreated'))
       } catch (error) {
         this.$toast.error(error.message)
       }
diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index a62f7e16d..20fd20662 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -34,10 +34,10 @@
     <ds-modal
       v-if="isOpen"
       v-model="isOpen"
-      :title="`${$t('group.remove-member')} ?`"
+      :title="`${$t('group.removeMember')} ?`"
       force
       extended
-      :confirm-label="$t('group.remove-member')"
+      :confirm-label="$t('group.removeMember')"
       @confirm="deleteMember(memberId)"
       :cancel-label="$t('actions.cancel')"
     />
@@ -74,7 +74,7 @@ export default {
           mutation: changeGroupMemberRoleMutation,
           variables: { groupId: this.groupId, userId: id, roleInGroup: newRole },
         })
-        this.$toast.success(this.$t('group.change-member-role', { role: newRole }))
+        this.$toast.success(this.$t('group.changeMemberRole', { role: newRole }))
       } catch (error) {
         this.$toast.error(error.message)
       }
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 73ebdc6d3..3a8b6daff 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -384,12 +384,12 @@
     },
     "actionRadius": "Aktionsradius",
     "back": "zurück",
-    "change-member-role": "Die Rolle wurde auf ({role}) geändert!",
+    "changeMemberRole": "Die Rolle wurde auf ({role}) geändert!",
     "follow": "Folge",
     "foundation": "Gründung",
     "general": "Allgemein",
     "goal": "Ziel der Gruppe",
-    "group-created": "Die Gruppe wurde angelegt!",
+    "groupCreated": "Die Gruppe wurde angelegt!",
     "group-name": "Gruppenname",
     "group-updated": "Die Gruppendaten wurden geändert!",
     "joinLeaveButton": {
@@ -408,7 +408,7 @@
     "myGroups": "Meine Gruppen",
     "newGroup": "Erstelle eine neue Gruppe",
     "radius": "Radius",
-    "remove-member": "Mitglied entfernen",
+    "removeMember": "Mitglied entfernen",
     "reset-form": "Formular zurücksetzen",
     "role": "Deine Rolle in der Gruppe",
     "roles": {
@@ -420,8 +420,8 @@
     "save": "Neue Gruppe anlegen",
     "settings": "Gruppeneinstellungen",
     "short-description": "Kurzbeschreibung",
-    "show-all-my-groups": "Alle meine Gruppen anzeigen",
-    "show-my-created-groups": "Meine angelegten Gruppen anzeigen",
+    "showAllMyGroups": "Alle meine Gruppen anzeigen",
+    "showMyCreatedGroups": "Meine angelegten Gruppen anzeigen",
     "type": "Gruppentyp",
     "types": {
       "closed": "Geschlossene Gruppe",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 7e93d6cdf..e7440bd60 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -384,12 +384,12 @@
     },
     "actionRadius": "Action radius",
     "back": "back",
-    "change-member-role": "The role has been changed to ({role})!",
+    "changeMemberRole": "The role has been changed to ({role})!",
     "follow": "Follow",
     "foundation": "Foundation",
     "general": "General",
     "goal": "Goal of group",
-    "group-created": "The group was created!",
+    "groupCreated": "The group was created!",
     "group-name": "Group name",
     "group-updated": "The group data has been changed.",
     "joinLeaveButton": {
@@ -408,7 +408,7 @@
     "myGroups": "My Groups",
     "newGroup": "Create a new Group",
     "radius": "Radius",
-    "remove-member": "Remove member",
+    "removeMember": "Remove member",
     "reset-form": "Reset form",
     "role": "Your role in the group",
     "roles": {
@@ -420,8 +420,8 @@
     "save": "Create new group",
     "settings": "Group Settings",
     "short-description": "Short description",
-    "show-all-my-groups": "show all groups",
-    "show-my-created-groups": "show only my groups",
+    "showAllMyGroups": "show all groups",
+    "showMyCreatedGroups": "show only my groups",
     "type": "Group type",
     "types": {
       "closed": "Closed Group",
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index 29bf0c6cd..27204c71f 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <ds-section>
-      <h1 class="ds-heading ds-heading-h1">{{ $t('group.newGroup') }}Create New Groupe</h1>
+      <h1 class="ds-heading ds-heading-h1">{{ $t('group.newGroup') }}</h1>
     </ds-section>
     <ds-space margin="large">
       <ds-flex :width="{ base: '100%' }" gutter="base">
@@ -44,7 +44,7 @@ export default {
           mutation: createGroupMutation,
           variables,
         })
-        this.$toast.success(this.$t('group.group-created'))
+        this.$toast.success(this.$t('group.groupCreated'))
       } catch (error) {
         this.$toast.error(error.message)
       }
diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
index 7b2c72cfc..0a1771eaf 100644
--- a/webapp/pages/group/edit/_id/members.vue
+++ b/webapp/pages/group/edit/_id/members.vue
@@ -32,8 +32,8 @@ export default {
           variables: { id: this.group.id },
         })
         this.responseGroupMembersQuery = response.data.GroupMembers
-      } catch (error) {
-        this.responseGroupMembersQuery = []
+      } catch (err) {
+        this.$toast.error(err.message)
       } finally {
         this.pending = false
       }

From 12a0ca59f81ba70f726e6842642a9309a4984ed6 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 23 Sep 2022 10:40:00 +0200
Subject: [PATCH 26/38] fix lint && locales

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

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 3a8b6daff..b47618319 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -389,9 +389,9 @@
     "foundation": "Gründung",
     "general": "Allgemein",
     "goal": "Ziel der Gruppe",
-    "groupCreated": "Die Gruppe wurde angelegt!",
     "group-name": "Gruppenname",
     "group-updated": "Die Gruppendaten wurden geändert!",
+    "groupCreated": "Die Gruppe wurde angelegt!",
     "joinLeaveButton": {
       "iAmMember": "Bin Mitglied",
       "join": "Beitreten"
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index e7440bd60..a01a01dea 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -389,9 +389,9 @@
     "foundation": "Foundation",
     "general": "General",
     "goal": "Goal of group",
-    "groupCreated": "The group was created!",
     "group-name": "Group name",
     "group-updated": "The group data has been changed.",
+    "groupCreated": "The group was created!",
     "joinLeaveButton": {
       "iAmMember": "I'm a member",
       "join": "Join"

From f1427b2528a1dfbe34de3dc3023818a83bf69631 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 23 Sep 2022 10:45:38 +0200
Subject: [PATCH 27/38] fix lint

---
 webapp/components/Group/GroupForm.vue   | 6 +-----
 webapp/pages/group/edit/_id/members.vue | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index c06fea683..fc4b857e8 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -30,11 +30,7 @@
           placeholder="Status ..."
         ></ds-select>
 
-        <ds-input
-          v-model="formData.about"
-          :label="$t('group.goal')"
-          rows="3"
-        ></ds-input>
+        <ds-input v-model="formData.about" :label="$t('group.goal')" rows="3"></ds-input>
 
         <ds-input
           v-model="formData.description"
diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
index 2ae41e4fc..970aac106 100644
--- a/webapp/pages/group/edit/_id/members.vue
+++ b/webapp/pages/group/edit/_id/members.vue
@@ -16,7 +16,7 @@ export default {
     group: {
       type: Object,
       required: false,
-      default: {},
+      default: () => {},
     },
   },
   data() {

From 02d1a441d2ecab37e1f22e5759852423a5ad2ee5 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 23 Sep 2022 10:51:36 +0200
Subject: [PATCH 28/38] fix lint backend

---
 backend/src/schema/resolvers/groups.js | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/backend/src/schema/resolvers/groups.js b/backend/src/schema/resolvers/groups.js
index ea955afa0..2f7ed4588 100644
--- a/backend/src/schema/resolvers/groups.js
+++ b/backend/src/schema/resolvers/groups.js
@@ -136,7 +136,7 @@ export default {
         return group
       })
       try {
-        const group =  await writeTxResultPromise
+        const group = await writeTxResultPromise
         await createOrUpdateLocations(params.id, params.locationName, session)
         return group
       } catch (error) {
@@ -209,7 +209,7 @@ export default {
         return group
       })
       try {
-        const group =  await writeTxResultPromise
+        const group = await writeTxResultPromise
         await createOrUpdateLocations(params.id, params.locationName, session)
         return group
       } catch (error) {
@@ -305,12 +305,7 @@ export default {
   },
   Group: {
     ...Resolver('Group', {
-      undefinedToNull: [
-        'deleted',
-        'disabled',
-        'locationName',
-        'about',
-      ],
+      undefinedToNull: ['deleted', 'disabled', 'locationName', 'about'],
       hasMany: {
         categories: '-[:CATEGORIZED]->(related:Category)',
       },

From 13ec4ee776728983e25d87078b804bdaaca66e38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 24 Sep 2022 18:06:15 +0200
Subject: [PATCH 29/38] Refine design and a bit functionality, first step

---
 webapp/components/Group/GroupForm.vue   | 162 ++++++++++++------------
 webapp/components/Group/GroupList.vue   |  51 ++++----
 webapp/components/Group/GroupMember.vue | 149 +++++++++++++++-------
 webapp/locales/de.json                  |  28 ++--
 webapp/locales/en.json                  |  26 +++-
 webapp/pages/group/create.vue           |  29 +++--
 webapp/pages/group/edit/_id.vue         |  37 +++---
 webapp/pages/group/edit/_id/index.vue   |   6 +-
 webapp/pages/group/edit/_id/members.vue |   6 +-
 webapp/pages/my-groups.vue              | 108 ++++++++++------
 webapp/pages/settings.vue               |  13 +-
 11 files changed, 377 insertions(+), 238 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index fc4b857e8..df4aa211a 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -1,88 +1,90 @@
 <template>
   <div>
-    <div v-if="update">add: slug, location, tiptap editor in description</div>
-    <ds-container>
-      <ds-form
-        class="group-form"
-        ref="groupForm"
-        v-model="formData"
-        :schema="formSchema"
-        @submit="submit"
-      >
-        <ds-input
-          v-model="formData.name"
-          :label="$t('group.groupName')"
-          :placeholder="`${$t('group.groupName')}…`"
-        ></ds-input>
+    <!-- Wolle: <div v-if="update">add: slug, location, tiptap editor in description</div> -->
+    <!-- Wolle: <ds-container> -->
+    <ds-form
+      class="group-form"
+      ref="groupForm"
+      v-model="formData"
+      :schema="formSchema"
+      @submit="submit"
+    >
+      <ds-input
+        :label="$t('group.name')"
+        v-model="formData.name"
+        :placeholder="`${$t('group.name')} …`"
+      ></ds-input>
 
-        <ds-input
-          v-if="update"
-          v-model="formData.slug"
-          :label="$t('users.table.columns.slug')"
-          :placeholder="`${$t('group.groupName')}…`"
-        ></ds-input>
+      <!-- Wolle: Why update here? -->
+      <ds-input
+        v-if="update"
+        :label="$t('group.labelSlug')"
+        v-model="formData.slug"
+        icon="at"
+        :placeholder="`${$t('group.labelSlug')} …`"
+      ></ds-input>
 
+      <ds-select
+        :label="$t('group.type')"
+        v-model="formData.groupType"
+        :options="['public', 'closed', 'hidden']"
+        icon="user"
+        :placeholder="$t('group.type') + ' …'"
+      ></ds-select>
+
+      <ds-input v-model="formData.about" :label="$t('group.goal')" rows="3"></ds-input>
+
+      <ds-input
+        :label="$t('group.description')"
+        v-model="formData.description"
+        type="textarea"
+        rows="3"
+      ></ds-input>
+      <ds-space margin-top="large">
         <ds-select
-          icon="user"
-          v-model="formData.groupType"
-          :label="$t('group.type')"
-          :options="['public', 'closed', 'hidden']"
-          placeholder="Status ..."
+          :label="$t('group.actionRadius')"
+          v-model="formData.actionRadius"
+          :options="['regional', 'national', 'continental', 'global']"
+          icon="globe"
+          :placeholder="`${$t('group.actionRadius')} …`"
         ></ds-select>
-
-        <ds-input v-model="formData.about" :label="$t('group.goal')" rows="3"></ds-input>
-
-        <ds-input
-          v-model="formData.description"
-          :label="$t('group.description')"
-          type="textarea"
-          rows="3"
-        ></ds-input>
-        <ds-space margin-top="large">
-          <ds-select
-            id="city"
-            v-model="formData.locationName"
-            icon="map-marker"
-            :options="cities"
-            :label="$t('settings.data.labelCity')"
-            :placeholder="$t('settings.data.labelCity')"
-            :loading="loadingGeo"
-            @input.native="handleCityInput"
-          />
-        </ds-space>
-        <ds-space margin-top="large">
-          <ds-select
-            icon="card"
-            v-model="formData.actionRadius"
-            :label="$t('group.actionRadius')"
-            :options="['regional', 'national', 'continental', 'global']"
-            :placeholder="`${$t('group.actionRadius')} …`"
-          ></ds-select>
-        </ds-space>
-        <ds-space margin-top="large">
-          <categories-select
-            v-if="categoriesActive"
-            model="categoryIds"
-            :existingCategoryIds="formData.categoryIds"
-          />
-        </ds-space>
-        <ds-space margin-top="large">
-          <ds-button @click.prevent="reset()">{{ $t('group.reset-form') }}</ds-button>
-          <ds-button
-            type="submit"
-            @click.prevent="submit()"
-            icon="save"
-            :disabled="update ? submitDisableEdit : submitDisable"
-            primary
-          >
-            {{ update ? $t('group.update') : $t('group.save') }}
-          </ds-button>
-        </ds-space>
-      </ds-form>
-      <ds-space centered v-show="!update">
-        <nuxt-link to="/my-groups">{{ $t('group.back') }}</nuxt-link>
+        <ds-select
+          id="city"
+          :label="$t('settings.data.labelCity')"
+          v-model="formData.locationName"
+          :options="cities"
+          icon="map-marker"
+          :placeholder="$t('settings.data.labelCity') + ' …'"
+          :loading="loadingGeo"
+          @input.native="handleCityInput"
+        />
       </ds-space>
-    </ds-container>
+      <ds-space margin-top="large">
+        <categories-select
+          v-if="categoriesActive"
+          model="categoryIds"
+          :existingCategoryIds="formData.categoryIds"
+        />
+      </ds-space>
+      <ds-space margin-top="large">
+        <nuxt-link to="/my-groups">
+          <ds-button>{{ $t('actions.cancel') }}</ds-button>
+        </nuxt-link>
+        <ds-button
+          type="submit"
+          icon="save"
+          :disabled="update ? submitDisableEdit : submitDisable"
+          primary
+          @click.prevent="submit()"
+        >
+          {{ update ? $t('group.update') : $t('group.save') }}
+        </ds-button>
+      </ds-space>
+    </ds-form>
+    <!-- Wolle: <ds-space centered v-show="!update">
+        <nuxt-link to="/my-groups">{{ $t('group.back') }}</nuxt-link>
+      </ds-space> -->
+    <!-- Wolle: </ds-container> -->
   </div>
 </template>
 
@@ -153,7 +155,6 @@ export default {
       },
     }
   },
-
   methods: {
     submit() {
       const { name, about, description, groupType, actionRadius, locationName, categoryIds } =
@@ -211,9 +212,6 @@ export default {
       this.cities = this.processLocationsResult(res)
       this.loadingGeo = false
     },
-    reset() {
-      alert('reset')
-    },
   },
   computed: {
     submitDisable() {
diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index afeccd628..19cb95fc2 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -1,15 +1,17 @@
 <template>
-  <ds-container class="group-card">
-    <ds-space>
+  <div>
+    <!-- Wolle: <ds-container class="group-card"> -->
+    <!-- Wolle: <ds-space>
       <div @click="onlyOwnerGroups(true)" ref="myGruops">
         <ds-button>{{ $t('group.showMyCreatedGroups') }}</ds-button>
       </div>
       <div @click="onlyOwnerGroups(false)" ref="allGruops" hidden>
         <ds-button>{{ $t('group.showAllMyGroups') }}</ds-button>
       </div>
-    </ds-space>
+    </ds-space> -->
     <ds-space margin-bottom="small" v-for="item in items" :key="item.id">
-      <ds-card :ref="item.myRole === null ? 'null' : item.myRole">
+      <!-- Wolle: <ds-card :ref="item.myRole === null ? 'null' : item.myRole"> -->
+      <ds-card>
         <ds-flex>
           <ds-flex-item width="90%" centered>
             <ds-space margin="large">
@@ -53,7 +55,8 @@
         </ds-flex>
       </ds-card>
     </ds-space>
-  </ds-container>
+    <!-- Wolle: </ds-container> -->
+  </div>
 </template>
 <script>
 import GroupMenu from '~/components/Group/GroupMenu'
@@ -84,28 +87,28 @@ export default {
         this.$toast.error(error.message)
       }
     },
-    onlyOwnerGroups(bool) {
-      this.$refs.myGruops.hidden = bool
-      this.$refs.allGruops.hidden = !bool
+    // Wolle: onlyOwnerGroups(bool) {
+    //   this.$refs.myGruops.hidden = bool
+    //   this.$refs.allGruops.hidden = !bool
 
-      if (this.$refs.usual) {
-        this.$refs.usual.forEach((element) => {
-          element.$el.hidden = bool
-        })
-      }
+    //   if (this.$refs.usual) {
+    //     this.$refs.usual.forEach((element) => {
+    //       element.$el.hidden = bool
+    //     })
+    //   }
 
-      if (this.$refs.null) {
-        this.$refs.null.forEach((element) => {
-          element.$el.hidden = bool
-        })
-      }
+    //   if (this.$refs.null) {
+    //     this.$refs.null.forEach((element) => {
+    //       element.$el.hidden = bool
+    //     })
+    //   }
 
-      if (this.$refs.pending) {
-        this.$refs.pending.forEach((element) => {
-          element.$el.hidden = bool
-        })
-      }
-    },
+    //   if (this.$refs.pending) {
+    //     this.$refs.pending.forEach((element) => {
+    //       element.$el.hidden = bool
+    //     })
+    //   }
+    // },
   },
 }
 </script>
diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index 92ea0e7db..28412d33a 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -1,46 +1,76 @@
 <template>
   <div>
-    <ds-space>
-      <h3>{{ $t('group.members') }}</h3>
-    </ds-space>
-    <base-card>
-      <ds-table :data="responseGroupMembersQuery" :fields="tableFields" condensed>
-        <template slot="avatar">
-          <ds-avatar online size="small" :name="responseGroupMembersQuery.name"></ds-avatar>
-        </template>
-        <template slot="myRoleInGroup" slot-scope="scope">
-          <select
-            v-if="scope.row.myRoleInGroup !== 'owner'"
-            :options="['usual', 'admin']"
-            :value="`${scope.row.myRoleInGroup}`"
-            v-on:change="changeMemberRole(scope.row.id, $event)"
-          >
-            <option v-for="value in ['usual', 'admin']" :key="value">
-              {{ value }}
-            </option>
-          </select>
-        </template>
-        <template slot="edit" slot-scope="scope">
-          <ds-button
-            v-if="scope.row.myRoleInGroup !== 'owner'"
-            size="small"
-            @click="openModal(scope.row)"
-          >
-            delete
-          </ds-button>
-        </template>
-      </ds-table>
-    </base-card>
-    <ds-modal
+    <ds-table :fields="tableFields" :data="groupMembers" condensed>
+      <template #avatar="scope">
+        <nuxt-link
+          :to="{
+            name: 'profile-id-slug',
+            params: { id: scope.row.id, slug: scope.row.slug },
+          }"
+        >
+          <ds-avatar online size="small" :name="scope.row.name"></ds-avatar>
+        </nuxt-link>
+      </template>
+      <template #name="scope">
+        <nuxt-link
+          :to="{
+            name: 'profile-id-slug',
+            params: { id: scope.row.id, slug: scope.row.slug },
+          }"
+        >
+          <ds-text>
+            <b>{{ scope.row.name | truncate(20) }}</b>
+          </ds-text>
+        </nuxt-link>
+      </template>
+      <template #slug="scope">
+        <nuxt-link
+          :to="{
+            name: 'profile-id-slug',
+            params: { id: scope.row.id, slug: scope.row.slug },
+          }"
+        >
+          <ds-text>
+            <b>{{ `@${scope.row.slug}` | truncate(20) }}</b>
+          </ds-text>
+        </nuxt-link>
+      </template>
+      <template #roleInGroup="scope">
+        <select
+          v-if="scope.row.myRoleInGroup !== 'owner'"
+          :options="['pending', 'usual', 'admin', 'owner']"
+          :value="`${scope.row.myRoleInGroup}`"
+          @change="changeMemberRole(scope.row.id, $event)"
+        >
+          <option v-for="role in ['pending', 'usual', 'admin', 'owner']" :key="role" :value="role">
+            {{ $t(`group.roles.${role}`) }}
+          </option>
+        </select>
+        <ds-chip v-else color="primary">
+          {{ $t(`group.roles.${scope.row.myRoleInGroup}`) }}
+        </ds-chip>
+      </template>
+      <template #edit="scope">
+        <ds-button size="small" primary :disabled="true" @click="openModal(scope.row)">
+          <!-- TODO: implement removal of group members -->
+          <!--           :disabled="scope.row.myRoleInGroup === 'owner'"
+ -->
+          {{ $t('group.removeMemberButton') }}
+        </ds-button>
+      </template>
+    </ds-table>
+    <!-- TODO: implement removal of group members -->
+    <!-- TODO: change to ocelot.social modal -->
+    <!-- <ds-modal
       v-if="isOpen"
       v-model="isOpen"
-      :title="`${$t('group.removeMember')} ?`"
+      :title="`${$t('group.removeMember')}`"
       force
       extended
       :confirm-label="$t('group.removeMember')"
-      @confirm="deleteMember(memberId)"
       :cancel-label="$t('actions.cancel')"
-    />
+      @confirm="deleteMember(memberId)"
+    /> -->
   </div>
 </template>
 <script>
@@ -53,19 +83,43 @@ export default {
       type: String,
       required: true,
     },
-    responseGroupMembersQuery: {
+    groupMembers: {
       type: Array,
       required: false,
-      default: () => [],
     },
   },
   data() {
     return {
       isOpen: false,
       memberId: null,
-      tableFields: ['avatar', 'name', 'slug', 'myRoleInGroup', 'edit'],
     }
   },
+  computed: {
+    tableFields() {
+      return {
+        avatar: {
+          label: this.$t('group.membersAdministrationList.avatar'),
+          align: 'left',
+        },
+        name: {
+          label: this.$t('group.membersAdministrationList.name'),
+          align: 'left',
+        },
+        slug: {
+          label: this.$t('group.membersAdministrationList.slug'),
+          align: 'left',
+        },
+        roleInGroup: {
+          label: this.$t('group.membersAdministrationList.roleInGroup'),
+          align: 'left',
+        },
+        edit: {
+          label: '',
+          align: 'left',
+        },
+      }
+    },
+  },
   methods: {
     async changeMemberRole(id, event) {
       const newRole = event.target.value
@@ -74,18 +128,21 @@ export default {
           mutation: changeGroupMemberRoleMutation(),
           variables: { groupId: this.groupId, userId: id, roleInGroup: newRole },
         })
-        this.$toast.success(this.$t('group.changeMemberRole', { role: newRole }))
+        this.$toast.success(
+          this.$t('group.changeMemberRole', { role: this.$t(`group.roles.${newRole}`) }),
+        )
       } catch (error) {
         this.$toast.error(error.message)
       }
     },
-    openModal(row) {
-      this.isOpen = true
-      this.memberId = row.id
-    },
-    deleteMember(id) {
-      alert('deleteMember: ' + id)
-    },
+    // TODO: implement removal of group members
+    // openModal(row) {
+    //   this.isOpen = true
+    //   this.memberId = row.id
+    // },
+    // deleteMember(id) {
+    //   alert('deleteMember: ' + id)
+    // },
   },
 }
 </script>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index e5b37959f..7a9a0a2bf 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -406,33 +406,47 @@
     "actionRadius": "Aktionsradius",
     "back": "zurück",
     "categories": "Thema ::: Themen",
-    "change-member-role": "Die Rolle wurde auf „{role}“ geändert!",
+    "changeMemberRole": "Die Rolle wurde auf „{role}“ geändert!",
+    "createNewGroup": {
+      "title": "Erstelle eine neue Gruppe",
+      "tooltip": "Erstelle eine neue Gruppe"
+    },
+    "description": "Beschreibung",
+    "editGroupSettings": {
+      "groupName": "Einstellungen für „{name}“",
+      "title": "Meine Gruppe ändern"
+    },
     "follow": "Folge",
     "foundation": "Gründung",
     "general": "Allgemein",
     "goal": "Ziel der Gruppe",
-    "group-name": "Gruppenname",
     "group-updated": "Die Gruppendaten wurden geändert!",
     "groupCreated": "Die Gruppe wurde angelegt!",
     "joinLeaveButton": {
       "iAmMember": "Bin Mitglied",
       "join": "Beitreten"
     },
+    "labelSlug": "Eindeutiger Gruppenname",
     "leaveModal": {
       "confirmButton": "Verlassen",
       "message": "Eine Gruppe zu verlassen ist möglicherweise nicht rückgängig zu machen!<br>Gruppe <b>„{name}“</b> verlassen!",
       "title": "Möchtest du wirklich die Gruppe verlassen?"
     },
-    "long-description": "Beschreibung",
     "members": "Mitglieder",
+    "membersAdministrationList": {
+      "avatar": "Avatar",
+      "name": "Name",
+      "roleInGroup": "Rolle",
+      "slug": "Eindeutiger Name"
+    },
     "membersCount": "Mitglied ::: Mitglieder",
     "membersListTitle": "Gruppenmitglieder",
     "membersListTitleNotAllowedSeeingGroupMembers": "Gruppenmitglieder unsichtbar",
     "myGroups": "Meine Gruppen",
-    "newGroup": "Erstelle eine neue Gruppe",
+    "name": "Gruppenname",
     "radius": "Radius",
-    "removeMember": "Mitglied entfernen",
-    "reset-form": "Formular zurücksetzen",
+    "removeMember": "Mitglied aus der Gruppe entfernen?",
+    "removeMemberButton": "Entfernen",
     "role": "Deine Rolle in der Gruppe",
     "roles": {
       "admin": "Administrator",
@@ -441,8 +455,6 @@
       "usual": "Einfaches Mitglied"
     },
     "save": "Neue Gruppe anlegen",
-    "settings": "Gruppeneinstellungen",
-    "short-description": "Kurzbeschreibung",
     "showAllMyGroups": "Alle meine Gruppen anzeigen",
     "showMyCreatedGroups": "Meine angelegten Gruppen anzeigen",
     "type": "Gruppentyp",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 0a8aed42a..5dc030566 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -406,33 +406,47 @@
     "actionRadius": "Action radius",
     "back": "back",
     "categories": "Topic ::: Topics",
-    "change-member-role": "The role has been changed to “{role}”!",
+    "changeMemberRole": "The role has been changed to “{role}”!",
+    "createNewGroup": {
+      "title": "Create A New Group",
+      "tooltip": "Create a new group"
+    },
+    "description": "Description",
+    "editGroupSettings": {
+      "groupName": "Settings Of “{name}”",
+      "title": "Edit My Group"
+    },
     "follow": "Follow",
     "foundation": "Foundation",
     "general": "General",
     "goal": "Goal of group",
-    "group-name": "Group name",
     "group-updated": "The group data has been changed.",
     "groupCreated": "The group was created!",
     "joinLeaveButton": {
       "iAmMember": "I'm a member",
       "join": "Join"
     },
+    "labelSlug": "Unique group name",
     "leaveModal": {
       "confirmButton": "Leave",
       "message": "Leaving a group may be irreversible!<br>Leave group <b>“{name}”</b>!",
       "title": "Do you really want to leave the group?"
     },
-    "long-description": "Description",
     "members": "Members",
+    "membersAdministrationList": {
+      "avatar": "Avatar",
+      "name": "Name",
+      "roleInGroup": "Role",
+      "slug": "Unique name"
+    },
     "membersCount": "Member ::: Members",
     "membersListTitle": "Group Members",
     "membersListTitleNotAllowedSeeingGroupMembers": "Group Members invisible",
     "myGroups": "My Groups",
-    "newGroup": "Create a new Group",
+    "name": "Group name",
     "radius": "Radius",
     "removeMember": "Remove member",
-    "reset-form": "Reset form",
+    "removeMemberButton": "Remove",
     "role": "Your role in the group",
     "roles": {
       "admin": "Administrator",
@@ -441,8 +455,6 @@
       "usual": "Simple Member"
     },
     "save": "Create new group",
-    "settings": "Group Settings",
-    "short-description": "Short description",
     "showAllMyGroups": "show all groups",
     "showMyCreatedGroups": "show only my groups",
     "type": "Group type",
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index c72d45c75..d0516713f 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -1,16 +1,23 @@
 <template>
   <div>
-    <ds-section>
-      <h1 class="ds-heading ds-heading-h1">{{ $t('group.newGroup') }}</h1>
-    </ds-section>
-    <ds-space margin="large">
-      <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>
+    <ds-space margin="small">
+      <ds-heading tag="h1">{{ $t('group.createNewGroup.title') }}</ds-heading>
     </ds-space>
+    <ds-space margin="large" />
+    <ds-container>
+      <base-card>
+        <ds-space margin="large">
+          <ds-flex :width="{ base: '100%' }" gutter="base">
+            <ds-flex-item :width="{ base: '100%', md: 5 }">
+              <ds-container>
+                <group-form @createGroup="createGroup" />
+              </ds-container>
+            </ds-flex-item>
+            <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
+          </ds-flex>
+        </ds-space>
+      </base-card>
+    </ds-container>
   </div>
 </template>
 
@@ -45,6 +52,8 @@ export default {
           variables,
         })
         this.$toast.success(this.$t('group.groupCreated'))
+        this.$router.history.push('/my-groups')
+        // Wolle: refetch groups on '/my-groups'
       } catch (error) {
         this.$toast.error(error.message)
       }
diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index 159a88b61..12e67cef3 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -1,24 +1,27 @@
 <template>
   <div>
-    <ds-section>
-      <h1 class="ds-heading ds-heading-h1">{{ group.name }}</h1>
-      <div class="">{{ $t('group.settings') }}</div>
-    </ds-section>
-    <ds-space margin="large">
-      <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>
-            <nuxt-child :group="group" />
-          </transition>
-        </ds-flex-item>
-      </ds-flex>
+    <ds-space margin="small">
+      <ds-heading tag="h1">{{ $t('group.editGroupSettings.title') }}</ds-heading>
+      <ds-heading tag="h2">
+        {{ $t('group.editGroupSettings.groupName', { name: group.name }) }}
+      </ds-heading>
     </ds-space>
-    <ds-space centered>
+    <ds-space margin="large" />
+    <!-- Wolle: <ds-space margin="large"> -->
+    <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>
+          <nuxt-child :group="group" />
+        </transition>
+      </ds-flex-item>
+    </ds-flex>
+    <!-- Wolle: </ds-space> -->
+    <!-- Wolle: <ds-space centered>
       <nuxt-link to="/my-groups">{{ $t('group.back') }}</nuxt-link>
-    </ds-space>
+    </ds-space> -->
   </div>
 </template>
 
diff --git a/webapp/pages/group/edit/_id/index.vue b/webapp/pages/group/edit/_id/index.vue
index 27e216464..578b8f115 100644
--- a/webapp/pages/group/edit/_id/index.vue
+++ b/webapp/pages/group/edit/_id/index.vue
@@ -1,8 +1,10 @@
 <template>
   <div>
-    <ds-container>
+    <base-card>
+      <ds-heading tag="h3">{{ $t('group.general') }}</ds-heading>
+      <ds-space margin="large" />
       <group-form :group="group" :update="true" @updateGroup="updateGroup" />
-    </ds-container>
+    </base-card>
   </div>
 </template>
 
diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
index 2f9e2b442..bc651b834 100644
--- a/webapp/pages/group/edit/_id/members.vue
+++ b/webapp/pages/group/edit/_id/members.vue
@@ -1,6 +1,10 @@
 <template>
   <div>
-    <group-member :responseGroupMembersQuery="responseGroupMembersQuery" :groupId="group.id" />
+    <base-card>
+      <ds-heading tag="h3">{{ $t('group.members') }}</ds-heading>
+      <ds-space margin="large" />
+      <group-member :groupId="group.id" :groupMembers="responseGroupMembersQuery" />
+    </base-card>
   </div>
 </template>
 
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index 1792a3c88..63ce87214 100644
--- a/webapp/pages/my-groups.vue
+++ b/webapp/pages/my-groups.vue
@@ -1,27 +1,33 @@
 <template>
   <div>
-    <ds-section>
-      <h1 class="ds-heading ds-heading-h1">{{ $t('group.myGroups') }}</h1>
-      <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-section>
-    <br />
-    <br />
-    <group-list :items="responseGroupListQuery" />
+    <ds-space margin="small">
+      <ds-heading tag="h1">{{ $t('group.myGroups') }}</ds-heading>
+    </ds-space>
+    <ds-space margin="large" />
+    <ds-container>
+      <!-- create group -->
+      <ds-space centered>
+        <!-- Wolle: <client-only> -->
+        <nuxt-link :to="{ name: 'group-create' }">
+          <base-button
+            class="group-add-button"
+            icon="plus"
+            circle
+            filled
+            v-tooltip="{
+              content: $t('group.createNewGroup.tooltip'),
+              placement: 'left',
+            }"
+          />
+        </nuxt-link>
+        <!-- Wolle: </client-only> -->
+      </ds-space>
+      <!-- group list -->
+      <group-list :items="myGroups" />
+    </ds-container>
   </div>
 </template>
+
 <script>
 import GroupList from '~/components/Group/GroupList'
 import { groupQuery } from '~/graphql/groups.js'
@@ -33,26 +39,56 @@ export default {
   },
   data() {
     return {
-      responseGroupListQuery: [],
+      Group: [],
     }
   },
-  methods: {
-    async groupListQuery() {
-      try {
-        const response = await this.$apollo.query({
-          query: groupQuery(this.$i18n),
-        })
-        this.responseGroupListQuery = response.data.Group
-      } catch (error) {
-        this.responseGroupListQuery = []
-        this.$toast.error(error.message)
-      } finally {
-        this.pending = false
-      }
+  computed: {
+    myGroups() {
+      return this.Group ? this.Group : []
     },
   },
-  created() {
-    this.groupListQuery()
+  methods: {
+    // Wolle: async groupListQuery() {
+    //   try {
+    //     const response = await this.$apollo.query({
+    //       query: groupQuery(this.$i18n),
+    //       variables: { isMember: true },
+    //     })
+    //     this.Group = response.data.Group
+    //   } catch (error) {
+    //     this.Group = []
+    //     this.$toast.error(error.message)
+    //   } finally {
+    //     this.pending = false
+    //   }
+    // },
+  },
+  // Wolle: remove
+  // created() {
+  //   this.groupListQuery()
+  // },
+  apollo: {
+    Group: {
+      query() {
+        return groupQuery(this.$i18n)
+      },
+      variables() {
+        return {
+          isMember: true,
+        }
+      },
+      error(error) {
+        this.Group = []
+        this.$toast.error(error.message)
+      },
+      fetchPolicy: 'cache-and-network',
+    },
   },
 }
 </script>
+
+<style lang="scss">
+.group-add-button {
+  box-shadow: $box-shadow-x-large;
+}
+</style>
diff --git a/webapp/pages/settings.vue b/webapp/pages/settings.vue
index 660449fb6..5b87cf12d 100644
--- a/webapp/pages/settings.vue
+++ b/webapp/pages/settings.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ds-heading tag="h1">{{ $t('settings.name') }}</ds-heading>
+    <ds-space margin="small">
+      <ds-heading tag="h1">{{ $t('settings.name') }}</ds-heading>
+    </ds-space>
+    <ds-space margin="large" />
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
         <ds-menu :routes="routes" :is-exact="() => true" />
@@ -39,10 +42,10 @@ export default {
           name: this.$t('settings.social-media.name'),
           path: `/settings/my-social-media`,
         },
-        {
-          name: this.$t('settings.myGroups'),
-          path: `/my-groups`,
-        },
+        // Wolle: {
+        //   name: this.$t('settings.myGroups'),
+        //   path: `/my-groups`,
+        // },
         {
           name: this.$t('settings.muted-users.name'),
           path: `/settings/muted-users`,

From 84d90ddb781001f2e0a9d10e9f3983a1a0becf09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 24 Sep 2022 18:13:55 +0200
Subject: [PATCH 30/38] Refine design and a bit functionality, additions to
 first step

---
 webapp/components/Group/GroupForm.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index df4aa211a..978740358 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -14,7 +14,6 @@
         v-model="formData.name"
         :placeholder="`${$t('group.name')} …`"
       ></ds-input>
-
       <!-- Wolle: Why update here? -->
       <ds-input
         v-if="update"
@@ -23,7 +22,7 @@
         icon="at"
         :placeholder="`${$t('group.labelSlug')} …`"
       ></ds-input>
-
+      <!-- Wolle: translate options -->
       <ds-select
         :label="$t('group.type')"
         v-model="formData.groupType"
@@ -31,9 +30,7 @@
         icon="user"
         :placeholder="$t('group.type') + ' …'"
       ></ds-select>
-
       <ds-input v-model="formData.about" :label="$t('group.goal')" rows="3"></ds-input>
-
       <ds-input
         :label="$t('group.description')"
         v-model="formData.description"
@@ -41,6 +38,7 @@
         rows="3"
       ></ds-input>
       <ds-space margin-top="large">
+        <!-- Wolle: translate options -->
         <ds-select
           :label="$t('group.actionRadius')"
           v-model="formData.actionRadius"

From 41af877ab5f1b5ba178b445782b351467d9055f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sun, 25 Sep 2022 12:54:07 +0200
Subject: [PATCH 31/38] Refine functionality, second step

---
 webapp/components/Group/GroupForm.vue | 200 +++++++++++++++++---------
 webapp/pages/group/create.vue         |   1 +
 2 files changed, 133 insertions(+), 68 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 978740358..d804c5d08 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -14,7 +14,6 @@
         v-model="formData.name"
         :placeholder="`${$t('group.name')} …`"
       ></ds-input>
-      <!-- Wolle: Why update here? -->
       <ds-input
         v-if="update"
         :label="$t('group.labelSlug')"
@@ -22,14 +21,34 @@
         icon="at"
         :placeholder="`${$t('group.labelSlug')} …`"
       ></ds-input>
-      <!-- Wolle: translate options -->
-      <ds-select
+      <!-- groupType -->
+      <!-- TODO: change it has to be implemented later -->
+      <!-- TODO: move 'ds-select' from styleguide to main code and implement missen translation etc. functionality -->
+      <!-- <ds-select
+        id="groupType"
         :label="$t('group.type')"
-        v-model="formData.groupType"
-        :options="['public', 'closed', 'hidden']"
+        :v-model="formData.groupType"
+        :label-prop="'label'"
+        :options="groupTypeOptions"
         icon="user"
         :placeholder="$t('group.type') + ' …'"
-      ></ds-select>
+      ></ds-select> -->
+      <ds-text class="select-label">
+        {{ $t('group.type') }}
+      </ds-text>
+      <ds-icon class="select-icon" name="user" />
+      <select
+        class="select"
+        :options="groupTypeOptions"
+        :value="formData.groupType"
+        :disabled="update"
+        @change="changeGroupType($event)"
+      >
+        <option v-for="groupType in groupTypeOptions" :key="groupType" :value="groupType">
+          {{ $t(`group.types.${groupType}`) }}
+        </option>
+      </select>
+      <!-- description -->
       <ds-input v-model="formData.about" :label="$t('group.goal')" rows="3"></ds-input>
       <ds-input
         :label="$t('group.description')"
@@ -38,14 +57,36 @@
         rows="3"
       ></ds-input>
       <ds-space margin-top="large">
-        <!-- Wolle: translate options -->
-        <ds-select
+        <!-- actionRadius -->
+        <!-- TODO: move 'ds-select' from styleguide to main code and implement missen translation etc. functionality -->
+        <!-- <ds-select
+          id="actionRadius"
           :label="$t('group.actionRadius')"
-          v-model="formData.actionRadius"
+          v-model="formData"
+          model="actionRadius"
           :options="['regional', 'national', 'continental', 'global']"
           icon="globe"
           :placeholder="`${$t('group.actionRadius')} …`"
-        ></ds-select>
+        ></ds-select> -->
+        <ds-text class="select-label">
+          {{ $t('group.actionRadius') }}
+        </ds-text>
+        <ds-icon class="select-icon" name="globe" />
+        <select
+          class="select"
+          :options="actionRadiusOptions"
+          :value="formData.actionRadius"
+          @change="changeActionRadius($event)"
+        >
+          <option
+            v-for="actionRadius in actionRadiusOptions"
+            :key="actionRadius"
+            :value="actionRadius"
+          >
+            {{ $t(`group.actionRadii.${actionRadius}`) }}
+          </option>
+        </select>
+        <!-- location -->
         <ds-select
           id="city"
           :label="$t('settings.data.labelCity')"
@@ -117,6 +158,8 @@ export default {
     return {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
       disabled: false,
+      groupTypeOptions: ['public', 'closed', 'hidden'],
+      actionRadiusOptions: ['regional', 'national', 'continental', 'global'],
       loadingGeo: false,
       cities: [],
       formData: {
@@ -153,64 +196,6 @@ export default {
       },
     }
   },
-  methods: {
-    submit() {
-      const { name, about, description, groupType, actionRadius, locationName, categoryIds } =
-        this.formData
-      const variables = {
-        name,
-        about,
-        description,
-        groupType,
-        actionRadius,
-        locationName: locationName.label,
-        categoryIds,
-      }
-      this.update
-        ? this.$emit('updateGroup', {
-            ...variables,
-            id: this.group.id,
-          })
-        : this.$emit('createGroup', variables)
-    },
-    handleCityInput(value) {
-      clearTimeout(timeout)
-      timeout = setTimeout(() => this.requestGeoData(value), 500)
-    },
-    processLocationsResult(places) {
-      if (!places.length) {
-        return []
-      }
-      const result = []
-      places.forEach((place) => {
-        result.push({
-          label: place.place_name,
-          value: place.place_name,
-          id: place.id,
-        })
-      })
-
-      return result
-    },
-    async requestGeoData(e) {
-      const value = e.target ? e.target.value.trim() : ''
-      if (value === '') {
-        this.cities = []
-        return
-      }
-      this.loadingGeo = true
-
-      const place = encodeURIComponent(value)
-      const lang = this.$i18n.locale()
-
-      const {
-        data: { queryLocations: res },
-      } = await this.$apollo.query({ query: queryLocations(), variables: { place, lang } })
-
-      this.cities = this.processLocationsResult(res)
-      this.loadingGeo = false
-    },
-  },
   computed: {
     submitDisable() {
       if (
@@ -259,5 +244,84 @@ export default {
       return true
     },
   },
+  methods: {
+    submit() {
+      const { name, about, description, groupType, actionRadius, locationName, categoryIds } =
+        this.formData
+      const variables = {
+        name,
+        about,
+        description,
+        groupType,
+        actionRadius,
+        locationName: locationName.label,
+        categoryIds,
+      }
+      this.update
+        ? this.$emit('updateGroup', {
+            ...variables,
+            id: this.group.id,
+          })
+        : this.$emit('createGroup', variables)
+    },
+    changeGroupType(event) {
+      this.formData.groupType = event.target.value
+    },
+    changeActionRadius(event) {
+      this.formData.actionRadius = event.target.value
+    },
+    handleCityInput(value) {
+      clearTimeout(timeout)
+      timeout = setTimeout(() => this.requestGeoData(value), 500)
+    },
+    processLocationsResult(places) {
+      if (!places.length) {
+        return []
+      }
+      const result = []
+      places.forEach((place) => {
+        result.push({
+          label: place.place_name,
+          value: place.place_name,
+          id: place.id,
+        })
+      })
+
+      return result
+    },
+    async requestGeoData(e) {
+      const value = e.target ? e.target.value.trim() : ''
+      if (value === '') {
+        this.cities = []
+        return
+      }
+      this.loadingGeo = true
+
+      const place = encodeURIComponent(value)
+      const lang = this.$i18n.locale()
+
+      const {
+        data: { queryLocations: res },
+      } = await this.$apollo.query({ query: queryLocations(), variables: { place, lang } })
+
+      this.cities = this.processLocationsResult(res)
+      this.loadingGeo = false
+    },
+  },
 }
 </script>
+
+<style lang="scss">
+.select-label {
+  margin-bottom: 3pt;
+  color: $text-color-soft;
+}
+.select-icon {
+  margin-right: 4pt;
+  color: $text-color-disabled;
+}
+.select {
+  margin-bottom: $space-small;
+  color: $text-color-base;
+}
+</style>
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index d0516713f..8c7113b50 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -54,6 +54,7 @@ export default {
         this.$toast.success(this.$t('group.groupCreated'))
         this.$router.history.push('/my-groups')
         // Wolle: refetch groups on '/my-groups'
+        // seems to work of its own now, because of implementation of vue apollo queries in '/my-groups'
       } catch (error) {
         this.$toast.error(error.message)
       }

From 023ee74633a80fc115d80bb821bfd3f4787677b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sun, 25 Sep 2022 13:22:24 +0200
Subject: [PATCH 32/38] Cleanup

---
 webapp/pages/my-groups.vue | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index 63ce87214..4320904d5 100644
--- a/webapp/pages/my-groups.vue
+++ b/webapp/pages/my-groups.vue
@@ -47,26 +47,6 @@ export default {
       return this.Group ? this.Group : []
     },
   },
-  methods: {
-    // Wolle: async groupListQuery() {
-    //   try {
-    //     const response = await this.$apollo.query({
-    //       query: groupQuery(this.$i18n),
-    //       variables: { isMember: true },
-    //     })
-    //     this.Group = response.data.Group
-    //   } catch (error) {
-    //     this.Group = []
-    //     this.$toast.error(error.message)
-    //   } finally {
-    //     this.pending = false
-    //   }
-    // },
-  },
-  // Wolle: remove
-  // created() {
-  //   this.groupListQuery()
-  // },
   apollo: {
     Group: {
       query() {

From e5acca7329fc9b121f3c6f81d4abffb271caf84b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sun, 25 Sep 2022 13:23:21 +0200
Subject: [PATCH 33/38] Use Vue Apollo automatic fetching in 'members.vue'

---
 webapp/pages/group/edit/_id/members.vue | 41 +++++++++++++------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
index bc651b834..94b489871 100644
--- a/webapp/pages/group/edit/_id/members.vue
+++ b/webapp/pages/group/edit/_id/members.vue
@@ -3,7 +3,7 @@
     <base-card>
       <ds-heading tag="h3">{{ $t('group.members') }}</ds-heading>
       <ds-space margin="large" />
-      <group-member :groupId="group.id" :groupMembers="responseGroupMembersQuery" />
+      <group-member :groupId="group.id" :groupMembers="groupMembers" />
     </base-card>
   </div>
 </template>
@@ -19,32 +19,35 @@ export default {
   props: {
     group: {
       type: Object,
-      required: false,
-      default: () => {},
+      required: true,
     },
   },
   data() {
     return {
-      responseGroupMembersQuery: [],
+      GroupMembers: [],
     }
   },
-  methods: {
-    async groupMembersQueryList() {
-      try {
-        const response = await this.$apollo.query({
-          query: groupMembersQuery(),
-          variables: { id: this.group.id },
-        })
-        this.responseGroupMembersQuery = response.data.GroupMembers
-      } catch (err) {
-        this.$toast.error(err.message)
-      } finally {
-        this.pending = false
-      }
+  computed: {
+    groupMembers() {
+      return this.GroupMembers ? this.GroupMembers : []
     },
   },
-  created() {
-    this.groupMembersQueryList()
+  apollo: {
+    GroupMembers: {
+      query() {
+        return groupMembersQuery()
+      },
+      variables() {
+        return {
+          id: this.group.id,
+        }
+      },
+      error(error) {
+        this.GroupMembers = []
+        this.$toast.error(error.message)
+      },
+      fetchPolicy: 'cache-and-network',
+    },
   },
 }
 </script>

From 7b11122bea4868624dd1c1641219e71070412e20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 26 Sep 2022 10:31:00 +0200
Subject: [PATCH 34/38] Refine design and functionality of group list and
 create, edit group

---
 .../{GroupMenu.vue => GroupContentMenu.vue}   |   7 +-
 webapp/components/Group/GroupForm.vue         |  69 +++---
 webapp/components/Group/GroupList.vue         | 112 +---------
 webapp/components/Group/GroupTeaser.vue       | 203 ++++++++++++++++++
 webapp/components/PostTeaser/PostTeaser.vue   |   3 +-
 webapp/pages/group/_id/_slug.vue              |  26 +--
 webapp/pages/group/create.vue                 |  14 +-
 webapp/pages/group/edit/_id.vue               |   1 -
 webapp/pages/group/edit/_id/index.vue         |  26 ++-
 webapp/pages/my-groups.vue                    |   5 +-
 webapp/pages/profile/_id/_slug.vue            |   3 +-
 11 files changed, 293 insertions(+), 176 deletions(-)
 rename webapp/components/Group/{GroupMenu.vue => GroupContentMenu.vue} (97%)
 create mode 100644 webapp/components/Group/GroupTeaser.vue

diff --git a/webapp/components/Group/GroupMenu.vue b/webapp/components/Group/GroupContentMenu.vue
similarity index 97%
rename from webapp/components/Group/GroupMenu.vue
rename to webapp/components/Group/GroupContentMenu.vue
index 09f877906..e61786fe7 100644
--- a/webapp/components/Group/GroupMenu.vue
+++ b/webapp/components/Group/GroupContentMenu.vue
@@ -3,12 +3,11 @@
     <template #default="{ toggleMenu }">
       <slot name="button" :toggleMenu="toggleMenu">
         <base-button
-          data-test="group-menu-button"
           icon="ellipsis-v"
-          size="large"
+          size="small"
           circle
-          ghost
           @click.prevent="toggleMenu()"
+          data-test="group-menu-button"
         />
       </slot>
     </template>
@@ -36,7 +35,7 @@
 import Dropdown from '~/components/Dropdown'
 
 export default {
-  name: 'ContentMenu',
+  name: 'GroupContentMenu',
   components: {
     Dropdown,
   },
diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index d804c5d08..87b46091b 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -1,7 +1,5 @@
 <template>
   <div>
-    <!-- Wolle: <div v-if="update">add: slug, location, tiptap editor in description</div> -->
-    <!-- Wolle: <ds-container> -->
     <ds-form
       class="group-form"
       ref="groupForm"
@@ -97,6 +95,8 @@
           :loading="loadingGeo"
           @input.native="handleCityInput"
         />
+        <!-- TODO: implement clear button -->
+        <!-- <base-button icon="close" circle ghost size="small" :disabled="formData.locationName.length === 0" @click="clear" /> -->
       </ds-space>
       <ds-space margin-top="large">
         <categories-select
@@ -198,50 +198,39 @@ export default {
   },
   computed: {
     submitDisable() {
-      if (
-        this.formData.name !== '' &&
-        this.formData.groupType !== '' &&
-        this.formData.about !== '' &&
-        this.formData.description !== '' &&
-        this.formData.actionRadius !== '' &&
-        this.formData.locationName !== '' &&
-        this.formData.categoryIds.length > 0
-      ) {
-        return false
-      }
-      return true
+      return (
+        this.formData.name === '' ||
+        this.formData.groupType === '' ||
+        // this.formData.about === '' || // not mandatory
+        this.formData.description === '' ||
+        this.formData.actionRadius === '' ||
+        // this.formData.locationName === '' || // not mandatory
+        this.formData.categoryIds.length === 0
+      )
     },
     submitDisableEdit() {
-      if (
-        this.formData.name !== this.group.name ||
-        this.formData.groupType !== this.group.groupType ||
-        this.formData.about !== this.group.about ||
-        this.formData.description !== this.group.description ||
-        this.formData.actionRadius !== this.group.actionRadius ||
-        this.formData.locationName !== this.group.locationName ||
-        this.formData.categoryIds.length === 0 ||
-        !this.sameCategories
-      ) {
-        return false
-      }
-      return true
+      return (
+        this.formData.name === this.group.name &&
+        this.formData.slug === this.group.slug &&
+        // this.formData.groupType === this.group.groupType && // can not be changed for now
+        this.formData.about === this.group.about &&
+        this.formData.description === this.group.description &&
+        this.formData.actionRadius === this.group.actionRadius &&
+        this.formData.locationName === (this.group.locationName ? this.group.locationName : '') &&
+        this.sameCategories
+      )
     },
     sameCategories() {
-      const formDataCategories = this.formData.categoryIds.map((categoryIds) => categoryIds)
-      const groupDataCategories = this.group.categories.map((category) => category.id)
-      let result
-      let each = true
+      const formDataCategories = this.formData.categoryIds.map((id) => id).sort()
+      const groupDataCategories = this.group.categories.map((category) => category.id).sort()
+      let equal = true
 
       if (formDataCategories.length !== groupDataCategories.length) return false
 
-      if (JSON.stringify(formDataCategories) !== JSON.stringify(groupDataCategories)) {
-        formDataCategories.forEach((element) => {
-          result = groupDataCategories.filter((groupCategorieId) => groupCategorieId === element)
-          if (result.length === 0) each = false
-        })
-        return each
-      }
-      return true
+      formDataCategories.forEach((id, index) => {
+        equal = equal && id === groupDataCategories[index]
+      })
+      return equal
     },
   },
   methods: {
@@ -311,7 +300,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .select-label {
   margin-bottom: 3pt;
   color: $text-color-soft;
diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index 19cb95fc2..645f670d2 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -1,121 +1,21 @@
 <template>
   <div>
-    <!-- Wolle: <ds-container class="group-card"> -->
-    <!-- Wolle: <ds-space>
-      <div @click="onlyOwnerGroups(true)" ref="myGruops">
-        <ds-button>{{ $t('group.showMyCreatedGroups') }}</ds-button>
-      </div>
-      <div @click="onlyOwnerGroups(false)" ref="allGruops" hidden>
-        <ds-button>{{ $t('group.showAllMyGroups') }}</ds-button>
-      </div>
-    </ds-space> -->
-    <ds-space margin-bottom="small" v-for="item in items" :key="item.id">
-      <!-- Wolle: <ds-card :ref="item.myRole === null ? 'null' : item.myRole"> -->
-      <ds-card>
-        <ds-flex>
-          <ds-flex-item width="90%" centered>
-            <ds-space margin="large">
-              <nuxt-link :to="`/group/${item.id}`">
-                <ds-text size="x-large">{{ item.name }}</ds-text>
-              </nuxt-link>
-              <ds-text size="small">
-                {{ item.groupType }}
-                <ds-chip v-if="item.myRole === 'owner'" color="inverse">{{ item.myRole }}</ds-chip>
-                <ds-chip v-if="item.myRole === 'usual' || item.myRole === 'pending'">
-                  {{ item.myRole }}
-                </ds-chip>
-              </ds-text>
-              <ds-space v-if="item.about" margin-top="small">
-                <ds-text bold>{{ item.about }}</ds-text>
-              </ds-space>
-              <ds-space margin-top="small">
-                <div v-html="item.descriptionExcerpt"></div>
-              </ds-space>
-              <ds-space margin-top="small">
-                <ds-chip v-for="category in item.categories" :key="category.name">
-                  <ds-icon :name="category.icon"></ds-icon>
-                  {{ category.name }}
-                </ds-chip>
-                <ds-space margin="x-small">
-                  <div v-if="item.locationName">{{ item.locationName }}</div>
-                  <div v-if="item.actionRadius">{{ item.actionRadius }}</div>
-                </ds-space>
-              </ds-space>
-            </ds-space>
-          </ds-flex-item>
-          <ds-flex-item width="10%" centered>
-            <group-menu
-              v-if="item.myRole === 'owner'"
-              resource-type="group"
-              :resource="item"
-              :isOwner="item.myRole"
-              @joinGroup="joinGroup"
-            />
-          </ds-flex-item>
-        </ds-flex>
-      </ds-card>
+    <ds-space margin-bottom="small" v-for="group in groups" :key="group.id">
+      <group-teaser :group="group" />
     </ds-space>
-    <!-- Wolle: </ds-container> -->
   </div>
 </template>
+
 <script>
-import GroupMenu from '~/components/Group/GroupMenu'
-import { joinGroupMutation } from '~/graphql/groups.js'
+import GroupTeaser from '~/components/Group/GroupTeaser'
 
 export default {
   name: 'GroupList',
   components: {
-    GroupMenu,
+    GroupTeaser,
   },
   props: {
-    items: { type: Array, default: () => [] },
-  },
-  methods: {
-    editGroup(item) {
-      this.$router.push({ path: `/group/edit/${item.id}` })
-    },
-    async joinGroup(value) {
-      const { id } = value
-      const variables = { groupId: id, userId: this.$store.getters['auth/user'].id }
-      try {
-        await this.$apollo.mutate({
-          mutation: joinGroupMutation(),
-          variables,
-        })
-        this.$toast.success(this.$t('group.groupCreated'))
-      } catch (error) {
-        this.$toast.error(error.message)
-      }
-    },
-    // Wolle: onlyOwnerGroups(bool) {
-    //   this.$refs.myGruops.hidden = bool
-    //   this.$refs.allGruops.hidden = !bool
-
-    //   if (this.$refs.usual) {
-    //     this.$refs.usual.forEach((element) => {
-    //       element.$el.hidden = bool
-    //     })
-    //   }
-
-    //   if (this.$refs.null) {
-    //     this.$refs.null.forEach((element) => {
-    //       element.$el.hidden = bool
-    //     })
-    //   }
-
-    //   if (this.$refs.pending) {
-    //     this.$refs.pending.forEach((element) => {
-    //       element.$el.hidden = bool
-    //     })
-    //   }
-    // },
+    groups: { type: Array, default: () => [] },
   },
 }
 </script>
-<style scoped>
-.border-bottom {
-  border-bottom: 1px solid #17b53f;
-  background-color: rgb(255, 255, 255);
-  padding-left: 20px;
-}
-</style>
diff --git a/webapp/components/Group/GroupTeaser.vue b/webapp/components/Group/GroupTeaser.vue
new file mode 100644
index 000000000..9ebbbcdce
--- /dev/null
+++ b/webapp/components/Group/GroupTeaser.vue
@@ -0,0 +1,203 @@
+<template>
+  <nuxt-link
+    class="group-teaser"
+    :to="{ name: 'group-id-slug', params: { id: group.id, slug: group.slug } }"
+  >
+    <base-card
+      :class="{
+        'disabled-content': group.disabled,
+      }"
+    >
+      <h2 class="title hyphenate-text">{{ group.name }}</h2>
+      <div class="slug-location">
+        <!-- group slug -->
+        <div>
+          <ds-text color="soft">
+            <base-icon name="at" />
+            {{ group.slug }}
+          </ds-text>
+        </div>
+        <!-- group location -->
+        <div class="location-item">
+          <ds-text v-if="group && group.location" color="soft">
+            <base-icon name="map-marker" />
+            {{ group && group.location ? group.location.name : '' }}
+          </ds-text>
+        </div>
+      </div>
+      <!-- TODO: replace editor content with tiptap render view -->
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div class="content hyphenate-text" v-html="descriptionExcerpt" />
+      <footer class="footer">
+        <div>
+          <!-- group my role in group -->
+          <ds-chip color="primary">
+            {{ group && group.myRole ? $t('group.roles.' + group.myRole) : '' }}
+          </ds-chip>
+          <!-- group type -->
+          <ds-chip color="primary">
+            {{ group && group.groupType ? $t('group.types.' + group.groupType) : '' }}
+          </ds-chip>
+          <!-- group action radius -->
+          <ds-chip color="primary">
+            {{ group && group.actionRadius ? $t('group.actionRadii.' + group.actionRadius) : '' }}
+          </ds-chip>
+        </div>
+        <!-- group categories -->
+        <div class="categories" v-if="categoriesActive">
+          <category
+            v-for="category in group.categories"
+            :key="category.id"
+            v-tooltip="{
+              content: $t(`contribution.category.description.${category.slug}`),
+              placement: 'bottom-start',
+            }"
+            :icon="category.icon"
+          />
+        </div>
+        <div v-else class="categories-placeholder"></div>
+        <!-- group context menu -->
+        <client-only>
+          <group-content-menu
+            v-if="group.myRole === 'owner'"
+            resource-type="group"
+            :resource="group"
+            :isOwner="group.myRole"
+            @joinGroup="joinGroup"
+          />
+        </client-only>
+      </footer>
+      <footer class="footer">
+        <!-- group goal -->
+        <div class="labeled-chip">
+          <ds-text class="label-text hyphenate-text" color="soft" size="small">
+            {{ $t('group.goal') }}
+          </ds-text>
+          <div class="chip">
+            <ds-chip v-if="group && group.about">{{ group ? group.about : '' }}</ds-chip>
+          </div>
+        </div>
+      </footer>
+    </base-card>
+  </nuxt-link>
+</template>
+
+<script>
+import Category from '~/components/Category'
+import GroupContentMenu from '~/components/Group/GroupContentMenu'
+import { joinGroupMutation } from '~/graphql/groups.js'
+
+export default {
+  name: 'GroupTeaser',
+  components: {
+    Category,
+    GroupContentMenu,
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    },
+    width: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+    }
+  },
+  computed: {
+    descriptionExcerpt() {
+      return this.$filters.removeLinks(this.group.descriptionExcerpt)
+    },
+  },
+  methods: {
+    editGroup(group) {
+      this.$router.push({ path: `/group/edit/${group.id}` })
+    },
+    async joinGroup(value) {
+      const { id } = value
+      const variables = { groupId: id, userId: this.$store.getters['auth/user'].id }
+      try {
+        await this.$apollo.mutate({
+          mutation: joinGroupMutation(),
+          variables,
+        })
+        this.$toast.success(this.$t('group.groupCreated'))
+      } catch (error) {
+        this.$toast.error(error.message)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.group-teaser,
+.group-teaser:hover,
+.group-teaser:active {
+  position: relative;
+  display: block;
+  height: 100%;
+  color: $text-color-base;
+
+  > .ribbon {
+    position: absolute;
+    top: 50%;
+    right: -7px;
+  }
+}
+
+.group-teaser > .base-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  > .title {
+    font-size: 32px;
+  }
+
+  > .slug-location {
+    display: flex;
+    margin-bottom: $space-small;
+
+    > .location-item {
+      margin-left: $space-small;
+    }
+  }
+
+  > .content {
+    flex-grow: 1;
+    margin-bottom: $space-small;
+  }
+
+  > .footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    > .categories-placeholder {
+      flex-grow: 1;
+    }
+
+    > .labeled-chip {
+      margin-top: $space-xx-small;
+
+      > .chip {
+        margin-top: -$space-small + $space-x-small;
+      }
+    }
+
+    > .content-menu {
+      position: relative;
+      z-index: $z-index-post-teaser-link;
+    }
+  }
+
+  .user-teaser {
+    margin-bottom: $space-small;
+  }
+}
+</style>
diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index 7e8471f9e..dc1829a4d 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -19,9 +19,8 @@
       </client-only>
       <h2 class="title hyphenate-text">{{ post.title }}</h2>
       <!-- TODO: replace editor content with tiptap render view -->
-      <!-- eslint-disable vue/no-v-html -->
+      <!-- eslint-disable-next-line vue/no-v-html -->
       <div class="content hyphenate-text" v-html="excerpt" />
-      <!-- eslint-enable vue/no-v-html -->
       <footer
         class="footer"
         v-observe-visibility="(isVisible, entry) => visibilityChanged(isVisible, entry, post.id)"
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index 120c79cbd..dd8bccda6 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -31,26 +31,27 @@
             />
           </client-only> -->
           <ds-space margin="small">
-            <!-- Group name -->
+            <!-- group name -->
             <ds-heading tag="h3" align="center" no-margin>
               {{ groupName }}
             </ds-heading>
-            <!-- Group slug -->
+            <!-- group slug -->
             <ds-text align="center" color="soft">
+              <base-icon name="at" data-test="at" />
               {{ groupSlug }}
             </ds-text>
-            <!-- Group location -->
+            <!-- group location -->
             <ds-text v-if="group && group.location" align="center" color="soft" size="small">
               <base-icon name="map-marker" data-test="map-marker" />
               {{ group && group.location ? group.location.name : '' }}
             </ds-text>
-            <!-- Group created at -->
+            <!-- group created at -->
             <ds-text align="center" color="soft" size="small">
               {{ $t('group.foundation') }} {{ group.createdAt | date('MMMM yyyy') }}
             </ds-text>
           </ds-space>
           <ds-flex v-if="isAllowedSeeingGroupMembers">
-            <!-- Group members count -->
+            <!-- group members count -->
             <ds-flex-item v-if="isAllowedSeeingGroupMembers">
               <client-only>
                 <ds-number :label="$t('group.membersCount', {}, groupMembers.length)">
@@ -110,7 +111,7 @@
           </div>
           <hr />
           <ds-space margin-top="small" margin-bottom="small">
-            <!-- Group my role in group -->
+            <!-- group my role in group -->
             <template v-if="isGroupMember">
               <ds-text class="centered-text hyphenate-text" color="soft" size="small">
                 {{ $t('group.role') }}
@@ -121,7 +122,7 @@
                 </ds-chip>
               </div>
             </template>
-            <!-- Group type -->
+            <!-- group type -->
             <ds-text class="centered-text hyphenate-text" color="soft" size="small">
               {{ $t('group.type') }}
             </ds-text>
@@ -130,7 +131,7 @@
                 {{ group && group.groupType ? $t('group.types.' + group.groupType) : '' }}
               </ds-chip>
             </div>
-            <!-- Group action radius -->
+            <!-- group action radius -->
             <ds-text class="centered-text hyphenate-text" color="soft" size="small">
               {{ $t('group.actionRadius') }}
             </ds-text>
@@ -143,7 +144,7 @@
             </div>
             <ds-space margin="x-small" />
           </ds-space>
-          <!-- Group categories -->
+          <!-- group categories -->
           <template v-if="categoriesActive">
             <hr />
             <ds-space margin-top="small" margin-bottom="small">
@@ -176,7 +177,7 @@
               </div>
             </ds-space>
           </template>
-          <!-- Group goal -->
+          <!-- group goal -->
           <template v-if="group && group.about">
             <hr />
             <ds-space margin-top="small" margin-bottom="small">
@@ -230,14 +231,13 @@
         <ds-space>
           <base-card class="group-description">
             <!-- TODO: replace editor content with tiptap render view -->
-            <!-- eslint-disable vue/no-v-html -->
+            <!-- eslint-disable-next-line vue/no-v-html -->
             <div
               v-if="isDescriptionCollapsed"
               class="content hyphenate-text"
               v-html="groupDescriptionExcerpt"
             />
             <content-viewer v-else class="content hyphenate-text" :content="group.description" />
-            <!-- eslint-enable vue/no-v-html -->
             <base-button
               class="collaps-button"
               size="small"
@@ -401,7 +401,7 @@ export default {
     },
     groupSlug() {
       const { slug } = this.group || {}
-      return slug && `@${slug}`
+      return slug
     },
     groupDescriptionExcerpt() {
       return this.group ? this.$filters.removeLinks(this.group.descriptionExcerpt) : ''
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index 8c7113b50..b16cf933f 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -46,15 +46,23 @@ export default {
         locationName,
         categoryIds,
       }
+      let responseId, responseSlug
       try {
         await this.$apollo.mutate({
           mutation: createGroupMutation(),
           variables,
+          update: (_store, { data }) => {
+            const { id: groupId, slug: groupSlug } = data.CreateGroup
+            responseId = groupId
+            responseSlug = groupSlug
+          },
         })
         this.$toast.success(this.$t('group.groupCreated'))
-        this.$router.history.push('/my-groups')
-        // Wolle: refetch groups on '/my-groups'
-        // seems to work of its own now, because of implementation of vue apollo queries in '/my-groups'
+        // this.$router.history.push('/my-groups')
+        this.$router.history.push({
+          name: 'group-id-slug',
+          params: { id: responseId, slug: responseSlug },
+        })
       } catch (error) {
         this.$toast.error(error.message)
       }
diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index 12e67cef3..39b9eff5f 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -7,7 +7,6 @@
       </ds-heading>
     </ds-space>
     <ds-space margin="large" />
-    <!-- Wolle: <ds-space margin="large"> -->
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
         <ds-menu :routes="routes" :is-exact="() => true" />
diff --git a/webapp/pages/group/edit/_id/index.vue b/webapp/pages/group/edit/_id/index.vue
index 578b8f115..c50eaa4c4 100644
--- a/webapp/pages/group/edit/_id/index.vue
+++ b/webapp/pages/group/edit/_id/index.vue
@@ -25,10 +25,9 @@ export default {
   },
   methods: {
     async updateGroup(value) {
-      const { id, name, about, description, groupType, actionRadius, locationName, categoryIds } =
-        value
-      const variables = {
+      const {
         id,
+        slug,
         name,
         about,
         description,
@@ -36,13 +35,34 @@ export default {
         actionRadius,
         locationName,
         categoryIds,
+      } = value
+      const variables = {
+        id,
+        name,
+        slug,
+        about,
+        description,
+        groupType,
+        actionRadius,
+        locationName,
+        categoryIds,
       }
+      let responseId, responseSlug
       try {
         await this.$apollo.mutate({
           mutation: updateGroupMutation(),
           variables,
+          update: (_store, { data }) => {
+            const { id: groupId, slug: groupSlug } = data.UpdateGroup
+            responseId = groupId
+            responseSlug = groupSlug
+          },
         })
         this.$toast.success(this.$t('group.group-updated'))
+        this.$router.history.push({
+          name: 'group-id-slug',
+          params: { id: responseId, slug: responseSlug },
+        })
       } catch (error) {
         this.$toast.error(error.message)
       }
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index 4320904d5..7302b92ad 100644
--- a/webapp/pages/my-groups.vue
+++ b/webapp/pages/my-groups.vue
@@ -7,11 +7,11 @@
     <ds-container>
       <!-- create group -->
       <ds-space centered>
-        <!-- Wolle: <client-only> -->
         <nuxt-link :to="{ name: 'group-create' }">
           <base-button
             class="group-add-button"
             icon="plus"
+            size="large"
             circle
             filled
             v-tooltip="{
@@ -20,10 +20,9 @@
             }"
           />
         </nuxt-link>
-        <!-- Wolle: </client-only> -->
       </ds-space>
       <!-- group list -->
-      <group-list :items="myGroups" />
+      <group-list :groups="myGroups" />
     </ds-container>
   </div>
 </template>
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 668c271d6..81bb5c49b 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -31,6 +31,7 @@
               {{ userName }}
             </ds-heading>
             <ds-text align="center" color="soft">
+              <base-icon name="at" />
               {{ userSlug }}
             </ds-text>
             <ds-text v-if="user.location" align="center" color="soft" size="small">
@@ -253,7 +254,7 @@ export default {
     },
     userSlug() {
       const { slug } = this.user || {}
-      return slug && `@${slug}`
+      return slug
     },
     tabOptions() {
       return [

From 0d44d8ae043e297e9974014a5726bcbead1a6b83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 26 Sep 2022 11:39:14 +0200
Subject: [PATCH 35/38] Cleanup

- Reduce tooltip delay to 750ms.
---
 webapp/components/Group/GroupContentMenu.vue | 37 +++++---------------
 webapp/components/Group/GroupForm.vue        | 13 ++++---
 webapp/components/Group/GroupTeaser.vue      | 27 +-------------
 webapp/locales/de.json                       | 10 +++---
 webapp/locales/en.json                       | 10 +++---
 webapp/pages/group/edit/_id.vue              |  4 ---
 webapp/pages/group/edit/_id/index.vue        |  2 +-
 webapp/pages/settings.vue                    |  4 ---
 webapp/plugins/v-tooltip.js                  |  2 +-
 9 files changed, 27 insertions(+), 82 deletions(-)

diff --git a/webapp/components/Group/GroupContentMenu.vue b/webapp/components/Group/GroupContentMenu.vue
index e61786fe7..cfebe65a4 100644
--- a/webapp/components/Group/GroupContentMenu.vue
+++ b/webapp/components/Group/GroupContentMenu.vue
@@ -42,7 +42,7 @@ export default {
   props: {
     placement: { type: String, default: 'bottom-end' },
     resource: { type: Object, required: true },
-    isOwner: { type: String, default: null },
+    group: { type: Object, required: true },
     resourceType: {
       type: String,
       required: true,
@@ -56,40 +56,19 @@ export default {
       const routes = []
 
       if (this.resourceType === 'group') {
-        if (this.isOwner === 'owner') {
+        routes.push({
+          label: this.$t('group.contentMenu.visitGroupPage'),
+          icon: 'home',
+          name: 'group-id-slug',
+          params: { id: this.group.id, slug: this.group.slug },
+        })
+        if (this.group.myRole === 'owner') {
           routes.push({
             label: this.$t('admin.settings.name'),
             path: `/group/edit/${this.resource.id}`,
             icon: 'edit',
           })
         }
-        if (this.isOwner === 'usual') {
-          routes.push({
-            label: this.$t('group.unfollowing'),
-            callback: () => {
-              // this.$emit('join-group', this.resource)
-            },
-            icon: 'minus',
-          })
-        }
-        if (this.isOwner === 'pending') {
-          routes.push({
-            label: this.$t('group.unfollowing'),
-            callback: () => {
-              // this.removePending(this.resource)
-            },
-            icon: 'minus',
-          })
-        }
-        if (this.isOwner === null) {
-          routes.push({
-            label: this.$t('group.follow'),
-            callback: () => {
-              this.$emit('joinGroup', this.resource)
-            },
-            icon: 'plus',
-          })
-        }
       }
 
       return routes
diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 87b46091b..daf0c1d2a 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -46,11 +46,18 @@
           {{ $t(`group.types.${groupType}`) }}
         </option>
       </select>
+      <!-- goal -->
+      <ds-input
+        :label="$t('group.goal')"
+        v-model="formData.about"
+        :placeholder="$t('group.goal') + ' …'"
+        rows="3"
+      ></ds-input>
       <!-- description -->
-      <ds-input v-model="formData.about" :label="$t('group.goal')" rows="3"></ds-input>
       <ds-input
         :label="$t('group.description')"
         v-model="formData.description"
+        :placeholder="$t('group.description') + ' …'"
         type="textarea"
         rows="3"
       ></ds-input>
@@ -120,10 +127,6 @@
         </ds-button>
       </ds-space>
     </ds-form>
-    <!-- Wolle: <ds-space centered v-show="!update">
-        <nuxt-link to="/my-groups">{{ $t('group.back') }}</nuxt-link>
-      </ds-space> -->
-    <!-- Wolle: </ds-container> -->
   </div>
 </template>
 
diff --git a/webapp/components/Group/GroupTeaser.vue b/webapp/components/Group/GroupTeaser.vue
index 9ebbbcdce..9a6eb9bcc 100644
--- a/webapp/components/Group/GroupTeaser.vue
+++ b/webapp/components/Group/GroupTeaser.vue
@@ -58,13 +58,7 @@
         <div v-else class="categories-placeholder"></div>
         <!-- group context menu -->
         <client-only>
-          <group-content-menu
-            v-if="group.myRole === 'owner'"
-            resource-type="group"
-            :resource="group"
-            :isOwner="group.myRole"
-            @joinGroup="joinGroup"
-          />
+          <group-content-menu resource-type="group" :resource="group" :group="group" />
         </client-only>
       </footer>
       <footer class="footer">
@@ -85,7 +79,6 @@
 <script>
 import Category from '~/components/Category'
 import GroupContentMenu from '~/components/Group/GroupContentMenu'
-import { joinGroupMutation } from '~/graphql/groups.js'
 
 export default {
   name: 'GroupTeaser',
@@ -113,24 +106,6 @@ export default {
       return this.$filters.removeLinks(this.group.descriptionExcerpt)
     },
   },
-  methods: {
-    editGroup(group) {
-      this.$router.push({ path: `/group/edit/${group.id}` })
-    },
-    async joinGroup(value) {
-      const { id } = value
-      const variables = { groupId: id, userId: this.$store.getters['auth/user'].id }
-      try {
-        await this.$apollo.mutate({
-          mutation: joinGroupMutation(),
-          variables,
-        })
-        this.$toast.success(this.$t('group.groupCreated'))
-      } catch (error) {
-        this.$toast.error(error.message)
-      }
-    },
-  },
 }
 </script>
 
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 7a9a0a2bf..7a6810174 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -404,9 +404,11 @@
       "regional": "Regionale Gruppe"
     },
     "actionRadius": "Aktionsradius",
-    "back": "zurück",
     "categories": "Thema ::: Themen",
     "changeMemberRole": "Die Rolle wurde auf „{role}“ geändert!",
+    "contentMenu": {
+      "visitGroupPage": "Gruppe anzeigen"
+    },
     "createNewGroup": {
       "title": "Erstelle eine neue Gruppe",
       "tooltip": "Erstelle eine neue Gruppe"
@@ -420,7 +422,6 @@
     "foundation": "Gründung",
     "general": "Allgemein",
     "goal": "Ziel der Gruppe",
-    "group-updated": "Die Gruppendaten wurden geändert!",
     "groupCreated": "Die Gruppe wurde angelegt!",
     "joinLeaveButton": {
       "iAmMember": "Bin Mitglied",
@@ -455,17 +456,14 @@
       "usual": "Einfaches Mitglied"
     },
     "save": "Neue Gruppe anlegen",
-    "showAllMyGroups": "Alle meine Gruppen anzeigen",
-    "showMyCreatedGroups": "Meine angelegten Gruppen anzeigen",
     "type": "Gruppentyp",
     "types": {
       "closed": "Geschlossene Gruppe",
       "hidden": "Versteckte Gruppe",
       "public": "Öffentliche Gruppe"
     },
-    "unfollowing": "Nicht mehr folgen",
     "update": "Änderung speichern",
-    "visibility": "Sichtbarkeit"
+    "updatedGroup": "Die Gruppendaten wurden geändert!"
   },
   "hashtags-filter": {
     "clearSearch": "Suche löschen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 5dc030566..051f11e4e 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -404,9 +404,11 @@
       "regional": "Regional Group"
     },
     "actionRadius": "Action radius",
-    "back": "back",
     "categories": "Topic ::: Topics",
     "changeMemberRole": "The role has been changed to “{role}”!",
+    "contentMenu": {
+      "visitGroupPage": "Show group"
+    },
     "createNewGroup": {
       "title": "Create A New Group",
       "tooltip": "Create a new group"
@@ -420,7 +422,6 @@
     "foundation": "Foundation",
     "general": "General",
     "goal": "Goal of group",
-    "group-updated": "The group data has been changed.",
     "groupCreated": "The group was created!",
     "joinLeaveButton": {
       "iAmMember": "I'm a member",
@@ -455,17 +456,14 @@
       "usual": "Simple Member"
     },
     "save": "Create new group",
-    "showAllMyGroups": "show all groups",
-    "showMyCreatedGroups": "show only my groups",
     "type": "Group type",
     "types": {
       "closed": "Closed Group",
       "hidden": "Hidden Group",
       "public": "Public Group"
     },
-    "unfollowing": "unfollowing",
     "update": "Save change",
-    "visibility": "Visibility"
+    "updatedGroup": "The group data has been changed."
   },
   "hashtags-filter": {
     "clearSearch": "Clear search",
diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index 39b9eff5f..7a0f9d051 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -17,10 +17,6 @@
         </transition>
       </ds-flex-item>
     </ds-flex>
-    <!-- Wolle: </ds-space> -->
-    <!-- Wolle: <ds-space centered>
-      <nuxt-link to="/my-groups">{{ $t('group.back') }}</nuxt-link>
-    </ds-space> -->
   </div>
 </template>
 
diff --git a/webapp/pages/group/edit/_id/index.vue b/webapp/pages/group/edit/_id/index.vue
index c50eaa4c4..e3c934dc5 100644
--- a/webapp/pages/group/edit/_id/index.vue
+++ b/webapp/pages/group/edit/_id/index.vue
@@ -58,7 +58,7 @@ export default {
             responseSlug = groupSlug
           },
         })
-        this.$toast.success(this.$t('group.group-updated'))
+        this.$toast.success(this.$t('group.updatedGroup'))
         this.$router.history.push({
           name: 'group-id-slug',
           params: { id: responseId, slug: responseSlug },
diff --git a/webapp/pages/settings.vue b/webapp/pages/settings.vue
index 5b87cf12d..1fce64d8f 100644
--- a/webapp/pages/settings.vue
+++ b/webapp/pages/settings.vue
@@ -42,10 +42,6 @@ export default {
           name: this.$t('settings.social-media.name'),
           path: `/settings/my-social-media`,
         },
-        // Wolle: {
-        //   name: this.$t('settings.myGroups'),
-        //   path: `/my-groups`,
-        // },
         {
           name: this.$t('settings.muted-users.name'),
           path: `/settings/muted-users`,
diff --git a/webapp/plugins/v-tooltip.js b/webapp/plugins/v-tooltip.js
index 73681e9b3..0c0cbc8d6 100644
--- a/webapp/plugins/v-tooltip.js
+++ b/webapp/plugins/v-tooltip.js
@@ -3,7 +3,7 @@ import VTooltip from 'v-tooltip'
 
 Vue.use(VTooltip, {
   defaultDelay: {
-    show: 1500,
+    show: 750,
     hide: 50,
   },
   defaultOffset: 2,

From 211a4b9130ff9a7ad25ed39c3db56870f95a69b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 26 Sep 2022 11:52:09 +0200
Subject: [PATCH 36/38] Fix webapp tests

---
 webapp/pages/group/_id/_slug.spec.js | 36 ++++++++++++++++++----------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/webapp/pages/group/_id/_slug.spec.js b/webapp/pages/group/_id/_slug.spec.js
index 0cca122b3..1f92212ab 100644
--- a/webapp/pages/group/_id/_slug.spec.js
+++ b/webapp/pages/group/_id/_slug.spec.js
@@ -238,7 +238,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.text()).toContain('@yoga-practice')
+            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('yoga-practice')
           })
 
           describe('displays no(!) group location – because is "null"', () => {
@@ -385,7 +386,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.text()).toContain('@yoga-practice')
+            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('yoga-practice')
           })
 
           describe('displays no(!) group location – because is "null"', () => {
@@ -492,7 +494,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.text()).toContain('@yoga-practice')
+            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('yoga-practice')
           })
 
           describe('displays no(!) group location – because is "null"', () => {
@@ -599,7 +602,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.text()).toContain('@yoga-practice')
+            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('yoga-practice')
           })
 
           describe('displays no(!) group location – because is "null"', () => {
@@ -710,7 +714,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.text()).toContain('@school-for-citizens')
+            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('school-for-citizens')
           })
 
           describe('displays group location', () => {
@@ -821,7 +826,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.text()).toContain('@school-for-citizens')
+            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('school-for-citizens')
           })
 
           describe('displays group location', () => {
@@ -932,7 +938,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.text()).toContain('@school-for-citizens')
+            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('school-for-citizens')
           })
 
           describe('displays group location', () => {
@@ -1043,7 +1050,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.text()).toContain('@school-for-citizens')
+            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('school-for-citizens')
           })
 
           describe('displays group location', () => {
@@ -1158,7 +1166,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.text()).toContain('@investigative-journalism')
+            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('investigative-journalism')
           })
 
           describe('displays group location', () => {
@@ -1272,7 +1281,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.text()).toContain('@investigative-journalism')
+            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            expect(wrapper.text()).toContain('investigative-journalism')
           })
 
           describe('displays group location', () => {
@@ -1386,7 +1396,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has no(!) group slug', () => {
-            expect(wrapper.text()).not.toContain('@investigative-journalism')
+            expect(wrapper.find('[data-test="at"]').exists()).toBe(false)
+            expect(wrapper.text()).not.toContain('investigative-journalism')
           })
 
           describe('displays not(!) group location', () => {
@@ -1488,7 +1499,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has no(!) group slug', () => {
-            expect(wrapper.text()).not.toContain('@investigative-journalism')
+            expect(wrapper.find('[data-test="at"]').exists()).toBe(false)
+            expect(wrapper.text()).not.toContain('investigative-journalism')
           })
 
           describe('displays not(!) group location', () => {

From e430f22392608340865734f5db65b9ccea1a5cdc Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 27 Sep 2022 11:24:02 +0200
Subject: [PATCH 37/38] add test GroupContentMenu ans GroupForm

---
 .../components/Group/GroupContentMenu.spec.js | 36 +++++++++++++++++
 webapp/components/Group/GroupForm.spec.js     | 39 +++++++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 webapp/components/Group/GroupContentMenu.spec.js
 create mode 100644 webapp/components/Group/GroupForm.spec.js

diff --git a/webapp/components/Group/GroupContentMenu.spec.js b/webapp/components/Group/GroupContentMenu.spec.js
new file mode 100644
index 000000000..6639c77e7
--- /dev/null
+++ b/webapp/components/Group/GroupContentMenu.spec.js
@@ -0,0 +1,36 @@
+import { mount } from '@vue/test-utils'
+import GroupContentMenu from './GroupContentMenu.vue'
+
+const localVue = global.localVue
+
+const propsData = {
+    resource: {},
+    group: {},
+    resourceType: 'group',
+
+}
+
+describe('GroupContentMenu', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(GroupContentMenu, { propsData, mocks, localVue })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.findAll('.group-menu')).toHaveLength(1)
+    })
+  })
+})
diff --git a/webapp/components/Group/GroupForm.spec.js b/webapp/components/Group/GroupForm.spec.js
new file mode 100644
index 000000000..83a16745c
--- /dev/null
+++ b/webapp/components/Group/GroupForm.spec.js
@@ -0,0 +1,39 @@
+import { config, mount } from '@vue/test-utils'
+import GroupForm from './GroupForm.vue'
+
+const localVue = global.localVue
+
+config.stubs['nuxt-link'] = '<span><slot /></span>'
+
+const propsData = {
+    update: false,
+    group: {},
+}
+
+describe('GroupForm', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+      $env: {
+        CATEGORIES_ACTIVE: true,
+      },
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(GroupForm, { propsData, mocks, localVue })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.findAll('.group-form')).toHaveLength(1)
+    })
+  })
+})

From c2dc8b47a0479230aa899f60e274bcf6209e0b2f Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 27 Sep 2022 11:24:48 +0200
Subject: [PATCH 38/38] fix lint

---
 webapp/components/Group/GroupContentMenu.spec.js | 7 +++----
 webapp/components/Group/GroupForm.spec.js        | 4 ++--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/webapp/components/Group/GroupContentMenu.spec.js b/webapp/components/Group/GroupContentMenu.spec.js
index 6639c77e7..69c13e6f0 100644
--- a/webapp/components/Group/GroupContentMenu.spec.js
+++ b/webapp/components/Group/GroupContentMenu.spec.js
@@ -4,10 +4,9 @@ import GroupContentMenu from './GroupContentMenu.vue'
 const localVue = global.localVue
 
 const propsData = {
-    resource: {},
-    group: {},
-    resourceType: 'group',
-
+  resource: {},
+  group: {},
+  resourceType: 'group',
 }
 
 describe('GroupContentMenu', () => {
diff --git a/webapp/components/Group/GroupForm.spec.js b/webapp/components/Group/GroupForm.spec.js
index 83a16745c..0300bacd0 100644
--- a/webapp/components/Group/GroupForm.spec.js
+++ b/webapp/components/Group/GroupForm.spec.js
@@ -6,8 +6,8 @@ const localVue = global.localVue
 config.stubs['nuxt-link'] = '<span><slot /></span>'
 
 const propsData = {
-    update: false,
-    group: {},
+  update: false,
+  group: {},
 }
 
 describe('GroupForm', () => {