Create the chat room on user search in chats function

webapp/components/Chat/AddChatRoomByUserSearch.vue

@@ -5,28 +5,11 @@
     <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'
 
@@ -37,10 +20,6 @@ export default {
     SelectUserSearch,
   },
   props: {
-    // groupId: {
-    //   type: String,
-    //   required: true,
-    // },
     // chatRooms: {
     //   type: Array,
     //   default: [],
@@ -50,23 +29,9 @@ export default {
     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)) {
@@ -76,27 +41,10 @@ export default {
       // }
       this.$refs.selectUserSearch.clear()
       this.$emit('close-user-search')
-      this.addChatRoom()
+      this.addChatRoom(this.user?.id)
     },
-    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)
-      // }
+    async addChatRoom(userId) {
+      this.$emit('add-chat-room', userId)
     },
   },
 }

webapp/components/Chat/Chat.vue

@@ -160,22 +160,7 @@ export default {
   },
   mounted() {
     if (this.singleRoom) {
-      this.$apollo
-        .mutate({
-          mutation: createRoom(),
-          variables: {
-            userId: this.roomId,
-          },
-        })
-        .then(({ data: { CreateRoom } }) => {
-          this.fetchRooms({ room: CreateRoom })
-        })
-        .catch((error) => {
-          this.$toast.error(error)
-        })
-        .finally(() => {
-          // this.loading = false
-        })
+      this.newRoom(this.roomId)
     } else {
       this.fetchRooms()
     }
@@ -366,6 +351,25 @@ export default {
     addRoom() {
       this.$emit('open-close-user-search')
     },
+
+    newRoom(userId) {
+      this.$apollo
+        .mutate({
+          mutation: createRoom(),
+          variables: {
+            userId,
+          },
+        })
+        .then(({ data: { CreateRoom } }) => {
+          this.fetchRooms({ room: CreateRoom })
+        })
+        .catch((error) => {
+          this.$toast.error(error)
+        })
+        .finally(() => {
+          // this.loading = false
+        })
+    },
   },
 }
 </script>

webapp/pages/chat.vue

@@ -3,13 +3,14 @@
     <ds-heading tag="h1">{{ $t('chat.page.headline') }}</ds-heading>
     <add-chat-room-by-user-search
       v-if="showUserSearch"
-      @load-chat-rooms="loadChatRooms"
+      @add-chat-room="addChatRoom"
       @close-user-search="showUserSearch = false"
     />
     <!-- Wolle :chatRooms="chatRooms" -->
     <ds-space margin-bottom="small" />
     <chat
       :roomId="getShowChat.showChat ? getShowChat.roomID : null"
+      ref="chat"
       @open-close-user-search="showUserSearch = !showUserSearch"
     />
   </div>
@@ -43,8 +44,9 @@ export default {
     ...mapMutations({
       showChat: 'chat/SET_OPEN_CHAT',
     }),
-    loadChatRooms(newChatRoomID) {
-      console.log('loadChatRooms !!! newChatRoomID: ', newChatRoomID)
+    addChatRoom(userID) {
+      console.log('addChatRoom !!! newChatRoomID: ', userID)
+      this.$refs.chat.newRoom(userID)
     },
   },
 }