do not open modal if selected user is already member of group

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 {