Make user search in chats function – second step

webapp/components/Chat/AddChatRoomByUserSearch.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="add-chat-room-by-user-search">
+    <!-- Wolle -->
+    <h2 class="title">{{ $t('group.addUser') }}</h2>
+    <ds-space margin-bottom="small" />
+    <ds-space>
+      <select-user-search :id="id" ref="selectUserSearch" @select-user="selectUser" />
+      <!-- <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 SelectUserSearch from '~/components/generic/SelectUserSearch/SelectUserSearch'
+import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
+
+export default {
+  name: 'AddChatRoomByUserSearch',
+  components: {
+    UserTeaser,
+    SelectUserSearch,
+  },
+  props: {
+    // groupId: {
+    //   type: String,
+    //   required: true,
+    // },
+    // chatRooms: {
+    //   type: Array,
+    //   default: [],
+    // },
+  },
+  data() {
+    return {
+      id: 'search-user-to-add-to-group',
+      user: {},
+      // isOpen: false,
+    }
+  },
+  methods: {
+    // cancelModal() {
+    //   this.$refs.selectUserSearch.clear()
+    //   // this.isOpen = false
+    // },
+    // closeModal() {
+    //   this.$refs.selectUserSearch.clear()
+    //   // this.isOpen = false
+    // },
+    // confirmModal() {
+    //   this.addChatRoom()
+    //   // this.isOpen = false
+    //   this.$refs.selectUserSearch.clear()
+    // },
+    selectUser(user) {
+      this.user = user
+      // if (this.groupMembers.find((member) => member.id === this.user.id)) {
+      //   this.$toast.error(this.$t('group.errors.userAlreadyMember', { name: this.user.name }))
+      //   this.$refs.selectUserSearch.clear()
+      //   return
+      // }
+      this.$refs.selectUserSearch.clear()
+      this.$emit('close-user-search')
+      this.addChatRoom()
+    },
+    async addChatRoom() {
+      this.$emit('load-chat-rooms', 'XXX') // Wolle
+      // const newRole = 'usual'
+      // const username = this.user.name
+      // try {
+      //   await this.$apollo.mutate({
+      //     mutation: changeGroupMemberRoleMutation(),
+      //     variables: { groupId: this.groupId, userId: this.user.id, roleInGroup: newRole },
+      //   })
+      //   this.$toast.success(
+      //     this.$t('group.addMemberToGroupSuccess', {
+      //       role: this.$t(`group.roles.${newRole}`),
+      //       name: username,
+      //     }),
+      //   )
+      //   this.$emit('loadGroupMembers')
+      // } catch (error) {
+      //   this.$toast.error(error.message)
+      // }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.add-chat-room-by-user-search {
+  background-color: white;
+  padding: $space-base;
+}
+</style>

webapp/components/Chat/Chat.vue

@@ -364,7 +364,7 @@ export default {
     },
 
     addRoom() {
-      this.$emit('open-user-search')
+      this.$emit('open-close-user-search')
     },
   },
 }

webapp/pages/chat.vue

@@ -1,33 +1,34 @@
 <template>
   <div>
     <ds-heading tag="h1">{{ $t('chat.page.headline') }}</ds-heading>
-    <add-group-member
+    <add-chat-room-by-user-search
       v-if="showUserSearch"
-      :groupId="0"
-      :groupMembers="[]"
-      @loadGroupMembers="null"
+      @load-chat-rooms="loadChatRooms"
+      @close-user-search="showUserSearch = false"
     />
+    <!-- Wolle :chatRooms="chatRooms" -->
     <ds-space margin-bottom="small" />
     <chat
       :roomId="getShowChat.showChat ? getShowChat.roomID : null"
-      @open-user-search="showUserSearch = !showUserSearch"
+      @open-close-user-search="showUserSearch = !showUserSearch"
     />
   </div>
 </template>
 
 <script>
 import { mapGetters, mapMutations } from 'vuex'
-import AddGroupMember from '~/components/Group/AddGroupMember'
+import AddChatRoomByUserSearch from '~/components/Chat/AddChatRoomByUserSearch'
 import Chat from '../components/Chat/Chat.vue'
 
 export default {
   components: {
-    AddGroupMember,
+    AddChatRoomByUserSearch,
     Chat,
   },
   data() {
     return {
       showUserSearch: false,
+      // chatRooms: [] // Wolle
     }
   },
   mounted() {
@@ -42,6 +43,9 @@ export default {
     ...mapMutations({
       showChat: 'chat/SET_OPEN_CHAT',
     }),
+    loadChatRooms(newChatRoomID) {
+      console.log('loadChatRooms !!! newChatRoomID: ', newChatRoomID)
+    },
   },
 }
 </script>