From b5ed19a72a9e737e6714112598e3f86a13ba3742 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 8 Nov 2022 09:03:38 +0100
Subject: [PATCH 01/12] feat(webapp): Search Users to Add to Group

---
 webapp/components/Group/GroupMember.vue | 178 ++++++++++++++----------
 1 file changed, 101 insertions(+), 77 deletions(-)

diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index 830318767..33b3c6086 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -2,39 +2,33 @@
   <div class="group-member">
     <base-card>
       <h2 class="title">{{ $t('group.addUser') }}</h2>
-      <ds-form v-model="form" @submit="submit">
-        <ds-flex gutter="small">
-          <ds-flex-item width="90%">
-            <ds-input
-              name="query"
-              model="query"
-              :placeholder="$t('group.addUserPlaceholder')"
-              icon="search"
-            />
-          </ds-flex-item>
-          <ds-flex-item width="30px">
-            <!-- <base-button filled circle type="submit" icon="search" :loading="$apollo.loading" /> -->
-            <base-button filled circle type="submit" icon="search" />
-          </ds-flex-item>
-        </ds-flex>
-      </ds-form>
-      <div v-if="noSlug">Kein User mit diesem Slug gefunden!</div>
-      <div v-if="slugUser.length > 0">
-        <ds-space margin="base" />
-        <ds-flex>
-          <ds-flex-item>
-            <ds-avatar online size="small" :name="slugUser[0].name"></ds-avatar>
-          </ds-flex-item>
-          <ds-flex-item>{{ slugUser[0].name }}</ds-flex-item>
-          <ds-flex-item>{{ slugUser[0].slug }}</ds-flex-item>
-          <ds-flex-item>
-            <ds-button size="small" primary @click="addMemberToGroup(slugUser)">
-              {{ $t('group.addMemberToGroup') }}
-            </ds-button>
-          </ds-flex-item>
-        </ds-flex>
-        <ds-space margin="base" />
-      </div>
+      <ds-select
+        type="search"
+        icon="search"
+        v-model="query"
+        label-prop="id"
+        :icon-right="null"
+        :options="users"
+        :loading="$apollo.queries.searchUsers.loading"
+        :filter="(item) => item"
+        :no-options-available="$t('group.addUserPlaceholder')"
+        :auto-reset-search="!startSearch"
+        :placeholder="$t('group.addUserPlaceholder')"
+        @focus.capture.native="onFocus"
+        @input.native="handleInput"
+        @keyup.enter.native="onEnter"
+        @keyup.delete.native="onDelete"
+        @keyup.esc.native="clear"
+        @blur.capture.native="onBlur"
+        @input.exact="onSelect"
+      >
+        <template #option="{ option }">
+          <p>
+            <!-- ToDo: Avoid redirect to user profile when clicking on slug -->
+            <user-teaser :user="option" :showPopover="false" />
+          </p>
+        </template>
+      </ds-select>
     </base-card>
     <ds-table :fields="tableFields" :data="groupMembers" condensed>
       <template #avatar="scope">
@@ -90,7 +84,7 @@
         <ds-button v-if="scope.row.myRoleInGroup !== 'owner'" size="small" primary disabled>
           <!-- TODO: implement removal of group members -->
           <!--           :disabled="scope.row.myRoleInGroup === 'owner'"
- -->
+          -->
           {{ $t('group.removeMemberButton') }}
         </ds-button>
       </template>
@@ -98,23 +92,28 @@
     <!-- TODO: implement removal of group members -->
     <!-- TODO: change to ocelot.social modal -->
     <!-- <ds-modal
-      v-if="isOpen"
-      v-model="isOpen"
-      :title="`${$t('group.removeMember')}`"
-      force
-      extended
-      :confirm-label="$t('group.removeMember')"
-      :cancel-label="$t('actions.cancel')"
-      @confirm="deleteMember(memberId)"
-    /> -->
+         v-if="isOpen"
+         v-model="isOpen"
+         :title="`${$t('group.removeMember')}`"
+         force
+         extended
+         :confirm-label="$t('group.removeMember')"
+         :cancel-label="$t('actions.cancel')"
+         @confirm="deleteMember(memberId)"
+         /> -->
   </div>
 </template>
 <script>
-import { minimisedUserQuery } from '~/graphql/User'
 import { changeGroupMemberRoleMutation } from '~/graphql/groups.js'
+import { searchUsers } from '~/graphql/Search.js'
+import { isEmpty } from 'lodash'
+import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
 
 export default {
   name: 'GroupMember',
+  components: {
+    UserTeaser,
+  },
   props: {
     groupId: {
       type: String,
@@ -127,13 +126,13 @@ export default {
   },
   data() {
     return {
-      isOpen: false,
-      memberId: null,
-      noSlug: false,
-      slugUser: [],
-      form: {
-        query: '',
-      },
+      // isOpen: false,
+      // memberId: null,
+      users: [],
+      id: 'search-user-to-add-to-group',
+      query: '',
+      searchProcess: null,
+      user: {},
     }
   },
   computed: {
@@ -161,8 +160,37 @@ export default {
         },
       }
     },
+    startSearch() {
+      return this.query && this.query.length > 3
+    },
   },
   methods: {
+    onFocus(event) {},
+    onBlur(event) {
+      this.query = ''
+    },
+    handleInput(event) {
+      this.query = event.target ? event.target.value.trim() : ''
+    },
+    onDelete(event) {
+      const value = event.target ? event.target.value.trim() : ''
+      if (isEmpty(value)) {
+        this.clear()
+      } else {
+        this.handleInput(event)
+      }
+    },
+    clear() {
+      this.query = ''
+      this.user = {}
+      this.users = []
+    },
+    onSelect(item) {
+      this.user = item
+      this.addMemberToGroup()
+      this.clear()
+    },
+    onEnter() {},
     async changeMemberRole(id, event) {
       const newRole = event.target.value
       try {
@@ -179,20 +207,16 @@ export default {
     },
     async addMemberToGroup() {
       const newRole = 'usual'
-      if (this.groupMembers.find((member) => member.id === this.slugUser[0].id)) {
-        this.$toast.error(
-          this.$t('group.errors.userAlreadyMember', { slug: this.slugUser[0].slug }),
-        )
+      if (this.groupMembers.find((member) => member.id === this.user.id)) {
+        this.$toast.error(this.$t('group.errors.userAlreadyMember', { slug: this.user.slug }))
         return
       }
       try {
         await this.$apollo.mutate({
           mutation: changeGroupMemberRoleMutation(),
-          variables: { groupId: this.groupId, userId: this.slugUser[0].id, roleInGroup: newRole },
+          variables: { groupId: this.groupId, userId: this.user.id, roleInGroup: newRole },
         })
         this.$emit('loadGroupMembers')
-        this.slugUser = []
-        this.form.query = ''
         this.$toast.success(
           this.$t('group.changeMemberRole', { role: this.$t(`group.roles.${newRole}`) }),
         )
@@ -200,26 +224,26 @@ export default {
         this.$toast.error(error.message)
       }
     },
-    async submit() {
-      try {
-        const {
-          data: { User },
-        } = await this.$apollo.query({
-          query: minimisedUserQuery(),
-          variables: {
-            slug: this.form.query,
-          },
-        })
-        if (User.length === 0) {
-          this.noSlug = true
-        } else {
-          this.noSlug = false
-          this.slugUser = User
+  },
+  apollo: {
+    searchUsers: {
+      query() {
+        return searchUsers
+      },
+      variables() {
+        return {
+          query: this.query,
+          firstUsers: 5,
+          usersOffset: 0,
         }
-      } catch (error) {
-        this.noSlug = true
-      } finally {
-      }
+      },
+      skip() {
+        return !this.startSearch
+      },
+      update({ searchUsers }) {
+        this.users = searchUsers.users
+      },
+      fetchPolicy: 'cache-and-network',
     },
   },
 }

From 42d14421e0740e061f42978116215b139ac31496 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 10 Nov 2022 10:23:51 +0100
Subject: [PATCH 02/12] style dropdwon search menu outside cards

---
 webapp/components/Group/GroupMember.vue | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index 33b3c6086..5a81cf607 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="group-member">
-    <base-card>
-      <h2 class="title">{{ $t('group.addUser') }}</h2>
-      <ds-select
+ 
+      <h3 class="title">{{ $t('group.addUser') }}</h3>
+      <ds-space margin-bottom="small" />
+     
+    <ds-space margin-bottom="small">
+    <ds-select
         type="search"
         icon="search"
         v-model="query"
@@ -29,7 +32,12 @@
           </p>
         </template>
       </ds-select>
-    </base-card>
+      
+      
+    </ds-space>
+    <ds-space margin-bottom="large" />
+    <h3 class="title">{{ $t('group.membersListTitle') }}</h3>
+    <ds-space margin-bottom="small" />
     <ds-table :fields="tableFields" :data="groupMembers" condensed>
       <template #avatar="scope">
         <nuxt-link
@@ -248,3 +256,10 @@ export default {
   },
 }
 </script>
+<style scoped>
+
+  
+.ds-select-dropdown {
+  position: unset;
+}
+</style>

From fc930174986e54af275a656c6bb93fceb88a6f50 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 10 Nov 2022 10:28:31 +0100
Subject: [PATCH 03/12] fix lint

---
 webapp/components/Group/GroupMember.vue | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index 5a81cf607..71bf523df 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -1,11 +1,10 @@
 <template>
   <div class="group-member">
- 
-      <h3 class="title">{{ $t('group.addUser') }}</h3>
-      <ds-space margin-bottom="small" />
-     
+    <h3 class="title">{{ $t('group.addUser') }}</h3>
+    <ds-space margin-bottom="small" />
+
     <ds-space margin-bottom="small">
-    <ds-select
+      <ds-select
         type="search"
         icon="search"
         v-model="query"
@@ -32,8 +31,6 @@
           </p>
         </template>
       </ds-select>
-      
-      
     </ds-space>
     <ds-space margin-bottom="large" />
     <h3 class="title">{{ $t('group.membersListTitle') }}</h3>
@@ -257,8 +254,6 @@ export default {
 }
 </script>
 <style scoped>
-
-  
 .ds-select-dropdown {
   position: unset;
 }

From 9ef44ed23c610fd33d0b7f3489e6e88388f01dfe Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 22 Nov 2022 12:22:40 +0100
Subject: [PATCH 04/12] new locales for add group member

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

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 31a514470..a12abc2dd 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -406,7 +406,8 @@
     "actionRadius": "Aktionsradius",
     "addMemberToGroup": "Zur Gruppe hinzufügen",
     "addUser": "Benutzer hinzufügen",
-    "addUserPlaceholder": "eindeutiger Benutzername > @slug-from-user",
+    "addUserNoOptions": "Keine Nutzer gefunden!",
+    "addUserPlaceholder": "Benutzername oder Slug",
     "allGroups": "Alle Gruppen",
     "categories": "Thema ::: Themen",
     "changeMemberRole": "Die Rolle wurde auf „{role}“ geändert!",
@@ -451,6 +452,12 @@
     "membersCount": "Mitglied ::: Mitglieder",
     "membersListTitle": "Gruppenmitglieder",
     "membersListTitleNotAllowedSeeingGroupMembers": "Gruppenmitglieder unsichtbar",
+    "modal": {
+      "cancel": "Abbrechen",
+      "confirm": "Bestätigen",
+      "confirmAddGroupMemberText": "Nutzer “{name}” zur Gruppe hinzufügen?",
+      "confirmAddGroupMemberTitle": "Bestätigen"
+    },
     "myGroups": "Meine Gruppen",
     "name": "Gruppenname",
     "radius": "Radius",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 4b63033c1..f141c3635 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -406,7 +406,8 @@
     "actionRadius": "Action radius",
     "addMemberToGroup": "Add to group",
     "addUser": "Add User",
-    "addUserPlaceholder": "unique username > @slug-from-user",
+    "addUserNoOptions": "No users found!",
+    "addUserPlaceholder": " User name or slug",
     "allGroups": "All Groups",
     "categories": "Topic ::: Topics",
     "changeMemberRole": "The role has been changed to “{role}”!",
@@ -451,6 +452,12 @@
     "membersCount": "Member ::: Members",
     "membersListTitle": "Group Members",
     "membersListTitleNotAllowedSeeingGroupMembers": "Group Members invisible",
+    "modal": {
+      "cancel": "Cancel",
+      "confirm": "Confirm",
+      "confirmAddGroupMemberText": "Add user “{name}” to group?",
+      "confirmAddGroupMemberTitle": "Confirm"
+    },
     "myGroups": "My Groups",
     "name": "Group name",
     "radius": "Radius",

From 0d160c028088460e128ed9e0e10bd266d4d69094 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 22 Nov 2022 12:24:02 +0100
Subject: [PATCH 05/12] add modal to add group member confrimation

---
 webapp/components/Group/AddGroupMember.vue  | 170 ++++++++++++++++++++
 webapp/components/Group/GroupMember.vue     |  94 +----------
 webapp/components/UserTeaser/UserTeaser.vue |  12 +-
 webapp/pages/group/edit/_id/members.vue     |  10 +-
 4 files changed, 188 insertions(+), 98 deletions(-)
 create mode 100644 webapp/components/Group/AddGroupMember.vue

diff --git a/webapp/components/Group/AddGroupMember.vue b/webapp/components/Group/AddGroupMember.vue
new file mode 100644
index 000000000..28beee0a1
--- /dev/null
+++ b/webapp/components/Group/AddGroupMember.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="add-group-member">
+    <h2 class="title">{{ $t('group.addUser') }}</h2>
+    <ds-space margin-bottom="small" />
+    <ds-space>
+      <ds-select
+        type="search"
+        icon="search"
+        label-prop="id"
+        :icon-right="null"
+        :options="users"
+        :loading="$apollo.queries.searchUsers.loading"
+        :filter="(item) => item"
+        :no-options-available="$t('group.addUserNoOptions')"
+        :auto-reset-search="true"
+        :placeholder="$t('group.addUserPlaceholder')"
+        @focus.capture.native="onFocus"
+        @input.native="handleInput"
+        @keyup.enter.native="onEnter"
+        @keyup.delete.native="onDelete"
+        @keyup.esc.native="clear"
+        @blur.capture.native="onBlur"
+        @input.exact="onSelect"
+      >
+        <template #option="{ option }">
+          <p>
+            <user-teaser :user="option" :showPopover="false" :linkToProfile="false" />
+          </p>
+        </template>
+      </ds-select>
+      <ds-modal v-if="isOpen"
+                force
+                extended
+                :confirm-label="$t('group.modal.confirm')"
+                :cancel-label="$t('group.modal.cancel')"
+                :title="$t('group.modal.confirmAddGroupMemberTitle')"
+                v-model="isOpen"
+                @close="closeModal"
+                @confirm="confirmModal"
+                @cancel="cancelModal"
+      >
+        <ds-text size="large">{{ $t('group.modal.confirmAddGroupMemberText', { name: user.name }) }}</ds-text>
+      </ds-modal>
+    </ds-space>
+  </div>
+</template>
+<script>
+ import { changeGroupMemberRoleMutation } from '~/graphql/groups.js'
+ import { searchUsers } from '~/graphql/Search.js'
+ import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
+ import { isEmpty } from 'lodash'
+ 
+ export default {
+   name: 'AddGroupMember',
+   components: {
+     UserTeaser,
+   },
+   props: {
+     groupId: {
+       type: String,
+       required: true,
+     },
+     groupMembers: {
+       type: Array,
+       required: false,
+     },
+   },
+   data() {
+     return {
+       users: [],
+       id: 'search-user-to-add-to-group',
+       query: '',
+       searchProcess: null,
+       user: {},
+       isOpen: false,
+     }
+   },
+   computed: {
+     startSearch() {
+       return this.query && this.query.length > 3
+     },
+   },
+   methods: {
+     cancelModal() {
+       this.user = {}
+       this.isOpen = false
+     },
+     closeModal() {
+       this.isOpen = false       
+     },
+     confirmModal(item) {
+       this.addMemberToGroup()
+       item = null
+       this.clear()
+       this.isOpen = false       
+     },
+     onFocus(event) {},
+     onBlur(event) {
+       this.query = ''
+     },
+     handleInput(event) {
+       this.query = event.target ? event.target.value.trim() : ''
+     },
+     onDelete(event) {
+       const value = event.target ? event.target.value.trim() : ''
+       if (isEmpty(value)) {
+         this.clear()
+       } else {
+         this.handleInput(event)
+       }
+     },
+     clear() {
+       this.query = ''
+       this.user = {}
+       this.users = []
+     },
+     onSelect(item) {
+       this.user = item
+       this.isOpen = true
+     },
+     onEnter() {},
+     async addMemberToGroup() {
+       const newRole = 'usual'
+       if (this.groupMembers.find((member) => member.id === this.user.id)) {
+         this.$toast.error(this.$t('group.errors.userAlreadyMember', { slug: this.user.slug }))
+         return
+       }
+       try {
+         await this.$apollo.mutate({
+           mutation: changeGroupMemberRoleMutation(),
+           variables: { groupId: this.groupId, userId: this.user.id, roleInGroup: newRole },
+         })
+         this.$emit('loadGroupMembers')
+         this.$toast.success(
+           this.$t('group.changeMemberRole', { role: this.$t(`group.roles.${newRole}`) }),
+         )
+       } catch (error) {
+         this.$toast.error(error.message)
+       }
+     },
+   },
+   apollo: {
+     searchUsers: {
+       query() {
+         return searchUsers
+       },
+       variables() {
+         return {
+           query: this.query,
+           firstUsers: 5,
+           usersOffset: 0,
+         }
+       },
+       skip() {
+         return !this.startSearch
+       },
+       update({ searchUsers }) {
+         this.users = searchUsers.users
+       },
+       fetchPolicy: 'cache-and-network',
+     },
+   },
+ }
+</script>
+<style lang="scss">
+.add-group-member {
+  background-color: white;
+  padding: 24px;
+}
+</style>
diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index 71bf523df..b8ed09f5a 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -1,39 +1,6 @@
 <template>
   <div class="group-member">
-    <h3 class="title">{{ $t('group.addUser') }}</h3>
-    <ds-space margin-bottom="small" />
-
-    <ds-space margin-bottom="small">
-      <ds-select
-        type="search"
-        icon="search"
-        v-model="query"
-        label-prop="id"
-        :icon-right="null"
-        :options="users"
-        :loading="$apollo.queries.searchUsers.loading"
-        :filter="(item) => item"
-        :no-options-available="$t('group.addUserPlaceholder')"
-        :auto-reset-search="!startSearch"
-        :placeholder="$t('group.addUserPlaceholder')"
-        @focus.capture.native="onFocus"
-        @input.native="handleInput"
-        @keyup.enter.native="onEnter"
-        @keyup.delete.native="onDelete"
-        @keyup.esc.native="clear"
-        @blur.capture.native="onBlur"
-        @input.exact="onSelect"
-      >
-        <template #option="{ option }">
-          <p>
-            <!-- ToDo: Avoid redirect to user profile when clicking on slug -->
-            <user-teaser :user="option" :showPopover="false" />
-          </p>
-        </template>
-      </ds-select>
-    </ds-space>
-    <ds-space margin-bottom="large" />
-    <h3 class="title">{{ $t('group.membersListTitle') }}</h3>
+    <h2 class="title">{{ $t('group.membersListTitle') }}</h2>
     <ds-space margin-bottom="small" />
     <ds-table :fields="tableFields" :data="groupMembers" condensed>
       <template #avatar="scope">
@@ -110,15 +77,9 @@
 </template>
 <script>
 import { changeGroupMemberRoleMutation } from '~/graphql/groups.js'
-import { searchUsers } from '~/graphql/Search.js'
-import { isEmpty } from 'lodash'
-import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
 
 export default {
   name: 'GroupMember',
-  components: {
-    UserTeaser,
-  },
   props: {
     groupId: {
       type: String,
@@ -131,9 +92,6 @@ export default {
   },
   data() {
     return {
-      // isOpen: false,
-      // memberId: null,
-      users: [],
       id: 'search-user-to-add-to-group',
       query: '',
       searchProcess: null,
@@ -165,37 +123,8 @@ export default {
         },
       }
     },
-    startSearch() {
-      return this.query && this.query.length > 3
-    },
   },
   methods: {
-    onFocus(event) {},
-    onBlur(event) {
-      this.query = ''
-    },
-    handleInput(event) {
-      this.query = event.target ? event.target.value.trim() : ''
-    },
-    onDelete(event) {
-      const value = event.target ? event.target.value.trim() : ''
-      if (isEmpty(value)) {
-        this.clear()
-      } else {
-        this.handleInput(event)
-      }
-    },
-    clear() {
-      this.query = ''
-      this.user = {}
-      this.users = []
-    },
-    onSelect(item) {
-      this.user = item
-      this.addMemberToGroup()
-      this.clear()
-    },
-    onEnter() {},
     async changeMemberRole(id, event) {
       const newRole = event.target.value
       try {
@@ -230,27 +159,6 @@ export default {
       }
     },
   },
-  apollo: {
-    searchUsers: {
-      query() {
-        return searchUsers
-      },
-      variables() {
-        return {
-          query: this.query,
-          firstUsers: 5,
-          usersOffset: 0,
-        }
-      },
-      skip() {
-        return !this.startSearch
-      },
-      update({ searchUsers }) {
-        this.users = searchUsers.users
-      },
-      fetchPolicy: 'cache-and-network',
-    },
-  },
 }
 </script>
 <style scoped>
diff --git a/webapp/components/UserTeaser/UserTeaser.vue b/webapp/components/UserTeaser/UserTeaser.vue
index c7d3df131..9fa3252ff 100644
--- a/webapp/components/UserTeaser/UserTeaser.vue
+++ b/webapp/components/UserTeaser/UserTeaser.vue
@@ -5,17 +5,22 @@
   </div>
   <div v-else :class="[{ 'disabled-content': user.disabled }]" placement="top-start">
     <div :class="['user-teaser']">
-      <nuxt-link :to="userLink" data-test="avatarUserLink">
-        <profile-avatar v-if="showAvatar" :profile="user" size="small" />
+      <nuxt-link v-if="linkToProfile && showAvatar" :to="userLink" data-test="avatarUserLink">
+        <profile-avatar :profile="user" size="small" />
       </nuxt-link>
+      <profile-avatar v-else-if="showAvatar" :profile="user" size="small" />
       <div class="info flex-direction-column">
         <div :class="wide ? 'flex-direction-row' : 'flex-direction-column'">
-          <nuxt-link :to="userLink">
+          <nuxt-link v-if="linkToProfile" :to="userLink">
             <span class="text">
               <span class="slug">{{ userSlug }}</span>
               <span v-if="!userOnly" class="name">{{ userName }}</span>
             </span>
           </nuxt-link>
+          <span v-else class="text">
+            <span class="slug">{{ userSlug }}</span>
+            <span v-if="!userOnly" class="name">{{ userName }}</span>
+          </span>
           <span v-if="wide">&nbsp;</span>
           <span v-if="group">
             <span class="text">
@@ -53,6 +58,7 @@ export default {
     ProfileAvatar,
   },
   props: {
+    linkToProfile: { type: Boolean, default: true },
     user: { type: Object, default: null },
     group: { type: Object, default: null },
     wide: { type: Boolean, default: false },
diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
index c1e19bcd1..9b811d41c 100644
--- a/webapp/pages/group/edit/_id/members.vue
+++ b/webapp/pages/group/edit/_id/members.vue
@@ -1,8 +1,12 @@
 <template>
   <div>
+    <add-group-member
+      :groupId="group.id"
+      :groupMembers="groupMembers"
+      @loadGroupMembers="loadGroupMembers"
+    />
+    <ds-space margin-bottom="small" />
     <base-card>
-      <ds-heading tag="h3">{{ $t('group.members') }}</ds-heading>
-      <ds-space margin="large" />
       <group-member
         :groupId="group.id"
         :groupMembers="groupMembers"
@@ -14,11 +18,13 @@
 
 <script>
 import GroupMember from '~/components/Group/GroupMember'
+import AddGroupMember from '~/components/Group/AddGroupMember'
 import { groupMembersQuery } from '~/graphql/groups.js'
 
 export default {
   components: {
     GroupMember,
+    AddGroupMember,
   },
   props: {
     group: {

From 5adf6b387d1f31eae4b325c4e32d10cf26deb2a3 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 22 Nov 2022 12:29:56 +0100
Subject: [PATCH 06/12] do not open modal if selected user is already member of
 group

---
 webapp/components/Group/AddGroupMember.vue | 258 +++++++++++----------
 1 file changed, 131 insertions(+), 127 deletions(-)

diff --git a/webapp/components/Group/AddGroupMember.vue b/webapp/components/Group/AddGroupMember.vue
index 28beee0a1..ca0a5b082 100644
--- a/webapp/components/Group/AddGroupMember.vue
+++ b/webapp/components/Group/AddGroupMember.vue
@@ -28,139 +28,143 @@
           </p>
         </template>
       </ds-select>
-      <ds-modal v-if="isOpen"
-                force
-                extended
-                :confirm-label="$t('group.modal.confirm')"
-                :cancel-label="$t('group.modal.cancel')"
-                :title="$t('group.modal.confirmAddGroupMemberTitle')"
-                v-model="isOpen"
-                @close="closeModal"
-                @confirm="confirmModal"
-                @cancel="cancelModal"
+      <ds-modal
+        v-if="isOpen"
+        force
+        extended
+        :confirm-label="$t('group.modal.confirm')"
+        :cancel-label="$t('group.modal.cancel')"
+        :title="$t('group.modal.confirmAddGroupMemberTitle')"
+        v-model="isOpen"
+        @close="closeModal"
+        @confirm="confirmModal"
+        @cancel="cancelModal"
       >
-        <ds-text size="large">{{ $t('group.modal.confirmAddGroupMemberText', { name: user.name }) }}</ds-text>
+        <ds-text size="large">
+          {{ $t('group.modal.confirmAddGroupMemberText', { name: user.name }) }}
+        </ds-text>
       </ds-modal>
     </ds-space>
   </div>
 </template>
 <script>
- import { changeGroupMemberRoleMutation } from '~/graphql/groups.js'
- import { searchUsers } from '~/graphql/Search.js'
- import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
- import { isEmpty } from 'lodash'
- 
- export default {
-   name: 'AddGroupMember',
-   components: {
-     UserTeaser,
-   },
-   props: {
-     groupId: {
-       type: String,
-       required: true,
-     },
-     groupMembers: {
-       type: Array,
-       required: false,
-     },
-   },
-   data() {
-     return {
-       users: [],
-       id: 'search-user-to-add-to-group',
-       query: '',
-       searchProcess: null,
-       user: {},
-       isOpen: false,
-     }
-   },
-   computed: {
-     startSearch() {
-       return this.query && this.query.length > 3
-     },
-   },
-   methods: {
-     cancelModal() {
-       this.user = {}
-       this.isOpen = false
-     },
-     closeModal() {
-       this.isOpen = false       
-     },
-     confirmModal(item) {
-       this.addMemberToGroup()
-       item = null
-       this.clear()
-       this.isOpen = false       
-     },
-     onFocus(event) {},
-     onBlur(event) {
-       this.query = ''
-     },
-     handleInput(event) {
-       this.query = event.target ? event.target.value.trim() : ''
-     },
-     onDelete(event) {
-       const value = event.target ? event.target.value.trim() : ''
-       if (isEmpty(value)) {
-         this.clear()
-       } else {
-         this.handleInput(event)
-       }
-     },
-     clear() {
-       this.query = ''
-       this.user = {}
-       this.users = []
-     },
-     onSelect(item) {
-       this.user = item
-       this.isOpen = true
-     },
-     onEnter() {},
-     async addMemberToGroup() {
-       const newRole = 'usual'
-       if (this.groupMembers.find((member) => member.id === this.user.id)) {
-         this.$toast.error(this.$t('group.errors.userAlreadyMember', { slug: this.user.slug }))
-         return
-       }
-       try {
-         await this.$apollo.mutate({
-           mutation: changeGroupMemberRoleMutation(),
-           variables: { groupId: this.groupId, userId: this.user.id, roleInGroup: newRole },
-         })
-         this.$emit('loadGroupMembers')
-         this.$toast.success(
-           this.$t('group.changeMemberRole', { role: this.$t(`group.roles.${newRole}`) }),
-         )
-       } catch (error) {
-         this.$toast.error(error.message)
-       }
-     },
-   },
-   apollo: {
-     searchUsers: {
-       query() {
-         return searchUsers
-       },
-       variables() {
-         return {
-           query: this.query,
-           firstUsers: 5,
-           usersOffset: 0,
-         }
-       },
-       skip() {
-         return !this.startSearch
-       },
-       update({ searchUsers }) {
-         this.users = searchUsers.users
-       },
-       fetchPolicy: 'cache-and-network',
-     },
-   },
- }
+import { changeGroupMemberRoleMutation } from '~/graphql/groups.js'
+import { searchUsers } from '~/graphql/Search.js'
+import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
+import { isEmpty } from 'lodash'
+
+export default {
+  name: 'AddGroupMember',
+  components: {
+    UserTeaser,
+  },
+  props: {
+    groupId: {
+      type: String,
+      required: true,
+    },
+    groupMembers: {
+      type: Array,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      users: [],
+      id: 'search-user-to-add-to-group',
+      query: '',
+      searchProcess: null,
+      user: {},
+      isOpen: false,
+    }
+  },
+  computed: {
+    startSearch() {
+      return this.query && this.query.length > 3
+    },
+  },
+  methods: {
+    cancelModal() {
+      this.user = {}
+      this.isOpen = false
+    },
+    closeModal() {
+      this.isOpen = false
+    },
+    confirmModal(item) {
+      this.addMemberToGroup()
+      item = null
+      this.clear()
+      this.isOpen = false
+    },
+    onFocus(event) {},
+    onBlur(event) {
+      this.query = ''
+    },
+    handleInput(event) {
+      this.query = event.target ? event.target.value.trim() : ''
+    },
+    onDelete(event) {
+      const value = event.target ? event.target.value.trim() : ''
+      if (isEmpty(value)) {
+        this.clear()
+      } else {
+        this.handleInput(event)
+      }
+    },
+    clear() {
+      this.query = ''
+      this.user = {}
+      this.users = []
+    },
+    onSelect(item) {
+      this.user = item
+      if (this.groupMembers.find((member) => member.id === this.user.id)) {
+        this.$toast.error(this.$t('group.errors.userAlreadyMember', { slug: this.user.slug }))
+        this.user = {}
+        return
+      }
+      this.isOpen = true
+    },
+    onEnter() {},
+    async addMemberToGroup() {
+      const newRole = 'usual'
+      try {
+        await this.$apollo.mutate({
+          mutation: changeGroupMemberRoleMutation(),
+          variables: { groupId: this.groupId, userId: this.user.id, roleInGroup: newRole },
+        })
+        this.$emit('loadGroupMembers')
+        this.$toast.success(
+          this.$t('group.changeMemberRole', { role: this.$t(`group.roles.${newRole}`) }),
+        )
+      } catch (error) {
+        this.$toast.error(error.message)
+      }
+    },
+  },
+  apollo: {
+    searchUsers: {
+      query() {
+        return searchUsers
+      },
+      variables() {
+        return {
+          query: this.query,
+          firstUsers: 5,
+          usersOffset: 0,
+        }
+      },
+      skip() {
+        return !this.startSearch
+      },
+      update({ searchUsers }) {
+        this.users = searchUsers.users
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+  },
+}
 </script>
 <style lang="scss">
 .add-group-member {

From 8bf22921cfd0c458757a390cc5ac7c39d66e0b1a Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 22 Nov 2022 12:40:13 +0100
Subject: [PATCH 07/12] use variable spacing instead of fix value in css

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

diff --git a/webapp/components/Group/AddGroupMember.vue b/webapp/components/Group/AddGroupMember.vue
index ca0a5b082..f4f66f3f5 100644
--- a/webapp/components/Group/AddGroupMember.vue
+++ b/webapp/components/Group/AddGroupMember.vue
@@ -169,6 +169,6 @@ export default {
 <style lang="scss">
 .add-group-member {
   background-color: white;
-  padding: 24px;
+  padding: $space-base;
 }
 </style>

From b7c620c78ce185214e1f703b6ffdedc26b7f56cc Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 23 Nov 2022 09:47:13 +0100
Subject: [PATCH 08/12] clear input field after select

---
 webapp/components/Group/AddGroupMember.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/webapp/components/Group/AddGroupMember.vue b/webapp/components/Group/AddGroupMember.vue
index f4f66f3f5..3bb6d6b13 100644
--- a/webapp/components/Group/AddGroupMember.vue
+++ b/webapp/components/Group/AddGroupMember.vue
@@ -7,6 +7,8 @@
         type="search"
         icon="search"
         label-prop="id"
+        v-model="query"
+        :id="id"
         :icon-right="null"
         :options="users"
         :loading="$apollo.queries.searchUsers.loading"
@@ -91,9 +93,8 @@ export default {
     closeModal() {
       this.isOpen = false
     },
-    confirmModal(item) {
+    confirmModal() {
       this.addMemberToGroup()
-      item = null
       this.clear()
       this.isOpen = false
     },

From 287e5c29ea6cebe945bba38588e248a4ec714126 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 23 Nov 2022 17:53:43 +0100
Subject: [PATCH 09/12] changes suggested by @tirokk

---
 webapp/components/Group/AddGroupMember.vue | 22 ++++++++++++--------
 webapp/components/Group/GroupMember.vue    | 24 ----------------------
 webapp/locales/de.json                     |  7 ++++---
 webapp/locales/en.json                     |  5 +++--
 4 files changed, 20 insertions(+), 38 deletions(-)

diff --git a/webapp/components/Group/AddGroupMember.vue b/webapp/components/Group/AddGroupMember.vue
index 3bb6d6b13..024f81b25 100644
--- a/webapp/components/Group/AddGroupMember.vue
+++ b/webapp/components/Group/AddGroupMember.vue
@@ -87,19 +87,20 @@ export default {
   },
   methods: {
     cancelModal() {
-      this.user = {}
+      this.clear()
       this.isOpen = false
     },
     closeModal() {
+      this.clear()
       this.isOpen = false
     },
     confirmModal() {
       this.addMemberToGroup()
-      this.clear()
       this.isOpen = false
+      this.clear()
     },
-    onFocus(event) {},
-    onBlur(event) {
+    onFocus() {},
+    onBlur() {
       this.query = ''
     },
     handleInput(event) {
@@ -119,10 +120,10 @@ export default {
       this.users = []
     },
     onSelect(item) {
-      this.user = item
+      this.user = { ...item }
       if (this.groupMembers.find((member) => member.id === this.user.id)) {
-        this.$toast.error(this.$t('group.errors.userAlreadyMember', { slug: this.user.slug }))
-        this.user = {}
+        this.$toast.error(this.$t('group.errors.userAlreadyMember', { name: this.user.name }))
+        this.clear()
         return
       }
       this.isOpen = true
@@ -135,10 +136,13 @@ export default {
           mutation: changeGroupMemberRoleMutation(),
           variables: { groupId: this.groupId, userId: this.user.id, roleInGroup: newRole },
         })
-        this.$emit('loadGroupMembers')
         this.$toast.success(
-          this.$t('group.changeMemberRole', { role: this.$t(`group.roles.${newRole}`) }),
+          this.$t('group.addMemberToGroupSuccess', {
+            role: this.$t(`group.roles.${newRole}`),
+            name: this.user.name,
+          }),
         )
+        this.$emit('loadGroupMembers')
       } catch (error) {
         this.$toast.error(error.message)
       }
diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index b8ed09f5a..bacd0259d 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -139,30 +139,6 @@ export default {
         this.$toast.error(error.message)
       }
     },
-    async addMemberToGroup() {
-      const newRole = 'usual'
-      if (this.groupMembers.find((member) => member.id === this.user.id)) {
-        this.$toast.error(this.$t('group.errors.userAlreadyMember', { slug: this.user.slug }))
-        return
-      }
-      try {
-        await this.$apollo.mutate({
-          mutation: changeGroupMemberRoleMutation(),
-          variables: { groupId: this.groupId, userId: this.user.id, roleInGroup: newRole },
-        })
-        this.$emit('loadGroupMembers')
-        this.$toast.success(
-          this.$t('group.changeMemberRole', { role: this.$t(`group.roles.${newRole}`) }),
-        )
-      } catch (error) {
-        this.$toast.error(error.message)
-      }
-    },
   },
 }
 </script>
-<style scoped>
-.ds-select-dropdown {
-  position: unset;
-}
-</style>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index a12abc2dd..2663f4982 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -405,9 +405,10 @@
     },
     "actionRadius": "Aktionsradius",
     "addMemberToGroup": "Zur Gruppe hinzufügen",
+    "addMemberToGroupSuccess": "„{name}“ wurde der Gruppe mit der Rolle „{role}“ hinzugefügt!",
     "addUser": "Benutzer hinzufügen",
     "addUserNoOptions": "Keine Nutzer gefunden!",
-    "addUserPlaceholder": "Benutzername oder Slug",
+    "addUserPlaceholder": "Benutzername",
     "allGroups": "Alle Gruppen",
     "categories": "Thema ::: Themen",
     "changeMemberRole": "Die Rolle wurde auf „{role}“ geändert!",
@@ -424,7 +425,7 @@
       "title": "Meine Gruppe ändern"
     },
     "errors": {
-      "userAlreadyMember": "Nutzer @{slug} ist bereits Mitglied"
+      "userAlreadyMember": "Nutzer „{name}“ ist bereits Mitglied"
     },
     "follow": "Folge",
     "foundation": "Gründung",
@@ -455,7 +456,7 @@
     "modal": {
       "cancel": "Abbrechen",
       "confirm": "Bestätigen",
-      "confirmAddGroupMemberText": "Nutzer “{name}” zur Gruppe hinzufügen?",
+      "confirmAddGroupMemberText": "Nutzer „{name}“ zur Gruppe hinzufügen?",
       "confirmAddGroupMemberTitle": "Bestätigen"
     },
     "myGroups": "Meine Gruppen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index f141c3635..4f1ee83f0 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -405,9 +405,10 @@
     },
     "actionRadius": "Action radius",
     "addMemberToGroup": "Add to group",
+    "addMemberToGroupSuccess": "“{name}” was added to the group with the role “{role}”!",
     "addUser": "Add User",
     "addUserNoOptions": "No users found!",
-    "addUserPlaceholder": " User name or slug",
+    "addUserPlaceholder": " Username",
     "allGroups": "All Groups",
     "categories": "Topic ::: Topics",
     "changeMemberRole": "The role has been changed to “{role}”!",
@@ -424,7 +425,7 @@
       "title": "Edit My Group"
     },
     "errors": {
-      "userAlreadyMember": "User @{slug} is already a member"
+      "userAlreadyMember": "User “{name}” is already a member"
     },
     "follow": "Follow",
     "foundation": "Foundation",

From e0b7d347454ce2ca7e7246591a5b8dcbfc3fa73b Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 23 Nov 2022 18:06:50 +0100
Subject: [PATCH 10/12] esnure that username is correct

---
 webapp/components/Group/AddGroupMember.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/webapp/components/Group/AddGroupMember.vue b/webapp/components/Group/AddGroupMember.vue
index 024f81b25..ff049ca4d 100644
--- a/webapp/components/Group/AddGroupMember.vue
+++ b/webapp/components/Group/AddGroupMember.vue
@@ -75,7 +75,6 @@ export default {
       users: [],
       id: 'search-user-to-add-to-group',
       query: '',
-      searchProcess: null,
       user: {},
       isOpen: false,
     }
@@ -120,7 +119,7 @@ export default {
       this.users = []
     },
     onSelect(item) {
-      this.user = { ...item }
+      this.user = item
       if (this.groupMembers.find((member) => member.id === this.user.id)) {
         this.$toast.error(this.$t('group.errors.userAlreadyMember', { name: this.user.name }))
         this.clear()
@@ -131,6 +130,7 @@ export default {
     onEnter() {},
     async addMemberToGroup() {
       const newRole = 'usual'
+      const username = this.user.name
       try {
         await this.$apollo.mutate({
           mutation: changeGroupMemberRoleMutation(),
@@ -139,7 +139,7 @@ export default {
         this.$toast.success(
           this.$t('group.addMemberToGroupSuccess', {
             role: this.$t(`group.roles.${newRole}`),
-            name: this.user.name,
+            name: username,
           }),
         )
         this.$emit('loadGroupMembers')

From 46f13d022dbb599daf83d4b7fba9589ba57a806a Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 24 Nov 2022 17:18:38 +0100
Subject: [PATCH 11/12] 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 4f1ee83f0..c4bb105cc 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -425,7 +425,7 @@
       "title": "Edit My Group"
     },
     "errors": {
-      "userAlreadyMember": "User “{name}” is already a member"
+      "userAlreadyMember": "User “{name}” is already a member!"
     },
     "follow": "Follow",
     "foundation": "Foundation",

From 78672cd2e50f84d9f4a2afa19a187b080d58942d Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 24 Nov 2022 17:18:55 +0100
Subject: [PATCH 12/12] 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 2663f4982..d3062584a 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -425,7 +425,7 @@
       "title": "Meine Gruppe ändern"
     },
     "errors": {
-      "userAlreadyMember": "Nutzer „{name}“ ist bereits Mitglied"
+      "userAlreadyMember": "Benutzer „{name}“ ist bereits Mitglied!"
     },
     "follow": "Folge",
     "foundation": "Gründung",