From 11f5ce746a20ff13b3f3155863472e9fcac13c0e Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 17 Oct 2022 16:47:37 +0200
Subject: [PATCH 1/7] search input for invite user in group

---
 webapp/components/Group/GroupMember.vue | 27 +++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index 28412d33a..525c95127 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -1,5 +1,24 @@
 <template>
   <div>
+    <base-card>
+      <h2 class="title">{{ $t('admin.users.name') }}</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('admin.users.form.placeholder')"
+              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>
+    </base-card>
     <ds-table :fields="tableFields" :data="groupMembers" condensed>
       <template #avatar="scope">
         <nuxt-link
@@ -74,6 +93,7 @@
   </div>
 </template>
 <script>
+import { User } from '~/graphql/User'
 import { changeGroupMemberRoleMutation } from '~/graphql/groups.js'
 
 export default {
@@ -92,6 +112,9 @@ export default {
     return {
       isOpen: false,
       memberId: null,
+      form: {
+          query: '',
+      },
     }
   },
   computed: {
@@ -121,6 +144,7 @@ export default {
     },
   },
   methods: {
+    
     async changeMemberRole(id, event) {
       const newRole = event.target.value
       try {
@@ -135,6 +159,9 @@ export default {
         this.$toast.error(error.message)
       }
     },
+    async submit() {
+      console.log('submit', this.form.query)
+    }
     // TODO: implement removal of group members
     // openModal(row) {
     //   this.isOpen = true

From a8cf6acd931040a0c0301d236a1eeadfbce274b3 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 18 Oct 2022 13:38:05 +0200
Subject: [PATCH 2/7] add slug user to group member

---
 webapp/components/Group/GroupMember.vue | 55 +++++++++++++++++++++----
 webapp/graphql/User.js                  |  4 +-
 webapp/locales/de.json                  |  1 +
 webapp/locales/en.json                  |  1 +
 4 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index 525c95127..df3b899d2 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -18,6 +18,13 @@
           </ds-flex-item>
         </ds-flex>
       </ds-form>
+      <div v-if="noSlug">Kein User mit diesem Slug gefunden!</div>
+      <div v-if="slugUser.length > 0">
+        {{slugUser}}
+        <ds-button size="small" primary @click="addMemberToGroup(slugUser)">
+          {{ $t('group.addMemberToGroup') }}
+        </ds-button>
+      </div>
     </base-card>
     <ds-table :fields="tableFields" :data="groupMembers" condensed>
       <template #avatar="scope">
@@ -70,7 +77,7 @@
         </ds-chip>
       </template>
       <template #edit="scope">
-        <ds-button size="small" primary :disabled="true" @click="openModal(scope.row)">
+        <ds-button  v-if="scope.row.myRoleInGroup !== 'owner'" size="small" primary @click="deleteMember(scope.row.id)">
           <!-- TODO: implement removal of group members -->
           <!--           :disabled="scope.row.myRoleInGroup === 'owner'"
  -->
@@ -93,7 +100,7 @@
   </div>
 </template>
 <script>
-import { User } from '~/graphql/User'
+import { minimisedUserQuery } from '~/graphql/User'
 import { changeGroupMemberRoleMutation } from '~/graphql/groups.js'
 
 export default {
@@ -112,6 +119,8 @@ export default {
     return {
       isOpen: false,
       memberId: null,
+      noSlug: false,
+      slugUser: [],
       form: {
           query: '',
       },
@@ -159,17 +168,49 @@ export default {
         this.$toast.error(error.message)
       }
     },
+    async addMemberToGroup () {
+      const newRole = 'usual'
+      try {
+        await this.$apollo.mutate({
+          mutation: changeGroupMemberRoleMutation(),
+          variables: { groupId: this.groupId, userId: this.slugUser[0].id, roleInGroup: newRole },
+        })
+        this.$toast.success(
+          this.$t('group.changeMemberRole', { role: this.$t(`group.roles.${newRole}`) }),
+        )
+      } catch (error) {
+        this.$toast.error(error.message)
+      }
+    },
     async submit() {
-      console.log('submit', this.form.query)
-    }
+      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
+        }
+      } catch (error) {
+        this.noSlug = true
+      } finally {
+      }
+    },
     // TODO: implement removal of group members
     // openModal(row) {
     //   this.isOpen = true
     //   this.memberId = row.id
     // },
-    // deleteMember(id) {
-    //   alert('deleteMember: ' + id)
-    // },
+    deleteMember(id) {
+      alert('deleteMember: ' + id)
+    },
   },
 }
 </script>
diff --git a/webapp/graphql/User.js b/webapp/graphql/User.js
index 5c29bc0b4..0d3a24d8b 100644
--- a/webapp/graphql/User.js
+++ b/webapp/graphql/User.js
@@ -49,8 +49,8 @@ export default (i18n) => {
 
 export const minimisedUserQuery = () => {
   return gql`
-    query {
-      User(orderBy: slug_asc) {
+    query ($slug: String) {
+      User(slug: $slug, orderBy: slug_asc) {
         id
         slug
         name
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 6375ca48f..356c3ca3c 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -440,6 +440,7 @@
       "roleInGroup": "Rolle",
       "slug": "Eindeutiger Name"
     },
+    "addMemberToGroup":"zur Gruppe hinzufügen",
     "membersCount": "Mitglied ::: Mitglieder",
     "membersListTitle": "Gruppenmitglieder",
     "membersListTitleNotAllowedSeeingGroupMembers": "Gruppenmitglieder unsichtbar",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index aab9c6f83..924f56f3a 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -441,6 +441,7 @@
       "slug": "Unique name"
     },
     "membersCount": "Member ::: Members",
+    "addMemberToGroup":"zur Gruppe hinzufügen",
     "membersListTitle": "Group Members",
     "membersListTitleNotAllowedSeeingGroupMembers": "Group Members invisible",
     "myGroups": "My Groups",

From 548dcaaf6e9e2b756b0c102cbbd3404cef8a5ecb Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 18 Oct 2022 14:23:14 +0200
Subject: [PATCH 3/7] dynamic load by add new group member per slug

---
 webapp/components/Group/GroupMember.vue | 4 ++++
 webapp/pages/group/edit/_id/members.vue | 8 +++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index df3b899d2..97ba73b13 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -175,6 +175,10 @@ export default {
           mutation: changeGroupMemberRoleMutation(),
           variables: { groupId: this.groupId, userId: this.slugUser[0].id, roleInGroup: newRole },
         })
+        // this.$apollo.queries.GroupMembers.refetch()
+         this.$emit('loadGroupMembers')
+         this.slugUser = []
+         this.form.query = ''
         this.$toast.success(
           this.$t('group.changeMemberRole', { role: this.$t(`group.roles.${newRole}`) }),
         )
diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
index eeeee05d1..794907796 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="groupMembers" />
+      <group-member :groupId="group.id" :groupMembers="groupMembers" @loadGroupMembers="loadGroupMembers" />
     </base-card>
   </div>
 </template>
@@ -44,5 +44,11 @@ export default {
       fetchPolicy: 'cache-and-network',
     },
   },
+  methods: {
+    loadGroupMembers(){
+      this.$apollo.queries.GroupMembers.refetch()
+      console.log('loadGroupMembers this.GroupMembers', this.GroupMembers)
+    }
+  },
 }
 </script>

From 3c4d4bb8ebc8a7284c327d8c500feabea92e6a0f Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 18 Oct 2022 14:43:29 +0200
Subject: [PATCH 4/7] style flex find user per slug

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

diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index 97ba73b13..cb181a1eb 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -20,10 +20,18 @@
       </ds-form>
       <div v-if="noSlug">Kein User mit diesem Slug gefunden!</div>
       <div v-if="slugUser.length > 0">
-        {{slugUser}}
-        <ds-button size="small" primary @click="addMemberToGroup(slugUser)">
-          {{ $t('group.addMemberToGroup') }}
-        </ds-button>
+        <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>
     </base-card>
     <ds-table :fields="tableFields" :data="groupMembers" condensed>

From 79644cb60a0169886d1198a58d9df28790b5b976 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 18 Oct 2022 19:29:48 +0200
Subject: [PATCH 5/7] add locals for group member

---
 webapp/components/Group/GroupMember.vue | 30 +++++++++++++++----------
 webapp/locales/de.json                  |  4 +++-
 webapp/locales/en.json                  |  4 +++-
 webapp/pages/group/edit/_id/members.vue | 11 +++++----
 4 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index cb181a1eb..e508d4719 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -1,20 +1,20 @@
 <template>
   <div>
     <base-card>
-      <h2 class="title">{{ $t('admin.users.name') }}</h2>
+      <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('admin.users.form.placeholder')"
+              :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"  />
+            <base-button filled circle type="submit" icon="search" />
           </ds-flex-item>
         </ds-flex>
       </ds-form>
@@ -22,7 +22,9 @@
       <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>
+            <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>
@@ -85,7 +87,12 @@
         </ds-chip>
       </template>
       <template #edit="scope">
-        <ds-button  v-if="scope.row.myRoleInGroup !== 'owner'" size="small" primary @click="deleteMember(scope.row.id)">
+        <ds-button
+          v-if="scope.row.myRoleInGroup !== 'owner'"
+          size="small"
+          primary
+          @click="deleteMember(scope.row.id)"
+        >
           <!-- TODO: implement removal of group members -->
           <!--           :disabled="scope.row.myRoleInGroup === 'owner'"
  -->
@@ -130,7 +137,7 @@ export default {
       noSlug: false,
       slugUser: [],
       form: {
-          query: '',
+        query: '',
       },
     }
   },
@@ -161,7 +168,6 @@ export default {
     },
   },
   methods: {
-    
     async changeMemberRole(id, event) {
       const newRole = event.target.value
       try {
@@ -176,7 +182,7 @@ export default {
         this.$toast.error(error.message)
       }
     },
-    async addMemberToGroup () {
+    async addMemberToGroup() {
       const newRole = 'usual'
       try {
         await this.$apollo.mutate({
@@ -184,9 +190,9 @@ export default {
           variables: { groupId: this.groupId, userId: this.slugUser[0].id, roleInGroup: newRole },
         })
         // this.$apollo.queries.GroupMembers.refetch()
-         this.$emit('loadGroupMembers')
-         this.slugUser = []
-         this.form.query = ''
+        this.$emit('loadGroupMembers')
+        this.slugUser = []
+        this.form.query = ''
         this.$toast.success(
           this.$t('group.changeMemberRole', { role: this.$t(`group.roles.${newRole}`) }),
         )
@@ -204,7 +210,7 @@ export default {
             slug: this.form.query,
           },
         })
-        if(User.length === 0)  { 
+        if (User.length === 0) {
           this.noSlug = true
         } else {
           this.noSlug = false
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 356c3ca3c..2254c19d0 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -404,6 +404,9 @@
       "regional": "Regionale Gruppe"
     },
     "actionRadius": "Aktionsradius",
+    "addMemberToGroup": "Zur Gruppe hinzufügen",
+    "addUser": "Benutzer hinzufügen",
+    "addUserPlaceholder": "eindeutiger Benutzername > @slug-from-user",
     "categories": "Thema ::: Themen",
     "changeMemberRole": "Die Rolle wurde auf „{role}“ geändert!",
     "contentMenu": {
@@ -440,7 +443,6 @@
       "roleInGroup": "Rolle",
       "slug": "Eindeutiger Name"
     },
-    "addMemberToGroup":"zur Gruppe hinzufügen",
     "membersCount": "Mitglied ::: Mitglieder",
     "membersListTitle": "Gruppenmitglieder",
     "membersListTitleNotAllowedSeeingGroupMembers": "Gruppenmitglieder unsichtbar",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 924f56f3a..639454555 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -404,6 +404,9 @@
       "regional": "Regional Group"
     },
     "actionRadius": "Action radius",
+    "addMemberToGroup": "Add to group",
+    "addUser": "Add User",
+    "addUserPlaceholder": "unique username > @slug-from-user",
     "categories": "Topic ::: Topics",
     "changeMemberRole": "The role has been changed to “{role}”!",
     "contentMenu": {
@@ -441,7 +444,6 @@
       "slug": "Unique name"
     },
     "membersCount": "Member ::: Members",
-    "addMemberToGroup":"zur Gruppe hinzufügen",
     "membersListTitle": "Group Members",
     "membersListTitleNotAllowedSeeingGroupMembers": "Group Members invisible",
     "myGroups": "My Groups",
diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
index 794907796..c1e19bcd1 100644
--- a/webapp/pages/group/edit/_id/members.vue
+++ b/webapp/pages/group/edit/_id/members.vue
@@ -3,7 +3,11 @@
     <base-card>
       <ds-heading tag="h3">{{ $t('group.members') }}</ds-heading>
       <ds-space margin="large" />
-      <group-member :groupId="group.id" :groupMembers="groupMembers" @loadGroupMembers="loadGroupMembers" />
+      <group-member
+        :groupId="group.id"
+        :groupMembers="groupMembers"
+        @loadGroupMembers="loadGroupMembers"
+      />
     </base-card>
   </div>
 </template>
@@ -45,10 +49,9 @@ export default {
     },
   },
   methods: {
-    loadGroupMembers(){
+    loadGroupMembers() {
       this.$apollo.queries.GroupMembers.refetch()
-      console.log('loadGroupMembers this.GroupMembers', this.GroupMembers)
-    }
+    },
   },
 }
 </script>

From af5447e83021f120095f2ecb4b03f73f4fe0417f Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 20 Oct 2022 15:58:34 +0200
Subject: [PATCH 6/7] coverage 65.14%, add specs GroupList.spec,
 GroupMember.spec

---
 webapp/components/Group/GroupList.spec.js   | 34 ++++++++++++++++++++
 webapp/components/Group/GroupList.vue       |  2 +-
 webapp/components/Group/GroupMember.spec.js | 35 +++++++++++++++++++++
 webapp/components/Group/GroupMember.vue     |  2 +-
 4 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 webapp/components/Group/GroupList.spec.js
 create mode 100644 webapp/components/Group/GroupMember.spec.js

diff --git a/webapp/components/Group/GroupList.spec.js b/webapp/components/Group/GroupList.spec.js
new file mode 100644
index 000000000..b0b3c9473
--- /dev/null
+++ b/webapp/components/Group/GroupList.spec.js
@@ -0,0 +1,34 @@
+import { config, mount } from '@vue/test-utils'
+import GroupList from './GroupList.vue'
+
+const localVue = global.localVue
+
+ 
+const propsData = {
+  groups: [],
+}
+
+describe('GroupList', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(GroupList, { propsData, mocks, localVue })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.findAll('.group-list')).toHaveLength(1)
+    })
+  })
+})
diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index 645f670d2..7618e5b57 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="group-list">
     <ds-space margin-bottom="small" v-for="group in groups" :key="group.id">
       <group-teaser :group="group" />
     </ds-space>
diff --git a/webapp/components/Group/GroupMember.spec.js b/webapp/components/Group/GroupMember.spec.js
new file mode 100644
index 000000000..a0ca6f3ef
--- /dev/null
+++ b/webapp/components/Group/GroupMember.spec.js
@@ -0,0 +1,35 @@
+import { config, mount } from '@vue/test-utils'
+import GroupMember from './GroupMember.vue'
+
+const localVue = global.localVue
+
+ 
+const propsData = {
+    groupId: '',
+    groupMembers: []
+}
+
+describe('GroupMember', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(GroupMember, { propsData, mocks, localVue })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.findAll('.group-member')).toHaveLength(1)
+    })
+  })
+})
diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index e508d4719..0a99aa21c 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="group-member">
     <base-card>
       <h2 class="title">{{ $t('group.addUser') }}</h2>
       <ds-form v-model="form" @submit="submit">

From de33b2288d9088011bb636f96b0dbc6acadef986 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 20 Oct 2022 16:01:16 +0200
Subject: [PATCH 7/7] fix lint

---
 webapp/components/Group/GroupList.spec.js   | 3 +--
 webapp/components/Group/GroupMember.spec.js | 7 +++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/webapp/components/Group/GroupList.spec.js b/webapp/components/Group/GroupList.spec.js
index b0b3c9473..ca6909de7 100644
--- a/webapp/components/Group/GroupList.spec.js
+++ b/webapp/components/Group/GroupList.spec.js
@@ -1,9 +1,8 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import GroupList from './GroupList.vue'
 
 const localVue = global.localVue
 
- 
 const propsData = {
   groups: [],
 }
diff --git a/webapp/components/Group/GroupMember.spec.js b/webapp/components/Group/GroupMember.spec.js
index a0ca6f3ef..0c0b46e43 100644
--- a/webapp/components/Group/GroupMember.spec.js
+++ b/webapp/components/Group/GroupMember.spec.js
@@ -1,12 +1,11 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import GroupMember from './GroupMember.vue'
 
 const localVue = global.localVue
 
- 
 const propsData = {
-    groupId: '',
-    groupMembers: []
+  groupId: '',
+  groupMembers: [],
 }
 
 describe('GroupMember', () => {