From 961a260044573db0d92cd95ada7395635497899a Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 19 Jul 2023 10:39:54 +0200 Subject: [PATCH 1/6] remove default avatar, allow refetch rooms, count down read messages, update lastMessage & lastMessageAt, ... --- webapp/components/Chat/Chat.vue | 42 ++++++++++++++++++++------------- 1 file changed, 25 insertions(+), 17 deletions(-) diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue index d7864ebef..4ac5606e8 100644 --- a/webapp/components/Chat/Chat.vue +++ b/webapp/components/Chat/Chat.vue @@ -35,7 +35,7 @@
@@ -46,7 +46,7 @@
@@ -222,9 +222,9 @@ export default { ...mapMutations({ commitUnreadRoomCount: 'chat/UPDATE_ROOM_COUNT', }), - async fetchRooms({ room } = {}) { - this.roomsLoaded = false - const offset = this.roomPage * this.roomPageSize + async fetchRooms({ room, options = {} } = {}) { + this.roomsLoaded = options.refetch ? this.roomsLoaded : false + const offset = (options.refetch ? 0 : this.roomPage) * this.roomPageSize try { const { data: { Room }, @@ -238,16 +238,19 @@ export default { fetchPolicy: 'no-cache', }) - const newRooms = Room.map((r) => { - return { - ...r, + + const rms = [] + const rmsIds = [] + ;[...Room, ...this.rooms].forEach((r) => { + if(!rmsIds.find((v) => v === r.id)){ + rms.push({...r, index: r.lastMessage.date, users: r.users.map((u) => { return { ...u, username: u.name, avatar: u.avatar?.url } - }), + })}) + rmsIds.push(r.id) } }) - - this.rooms = [...this.rooms, ...newRooms] + this.rooms = rms if (Room.length < this.roomPageSize) { this.roomsLoaded = true @@ -282,8 +285,12 @@ export default { fetchPolicy: 'no-cache', }) - const newMsgIds = Message.filter((m) => m.seen === false).map((m) => m.id) + const newMsgIds = Message.filter((m) => m.seen === false && m.senderId !== this.currentUser.id).map((m) => m.id) if (newMsgIds.length) { + const roomIndex = this.rooms.findIndex((r) => r.id === room.id) + const changedRoom = {...this.rooms[roomIndex]} + changedRoom.unreadCount = changedRoom.unreadCount - newMsgIds.length + this.rooms[roomIndex] = changedRoom this.$apollo .mutate({ mutation: markMessagesAsSeen(), @@ -322,14 +329,15 @@ export default { }, async chatMessageAdded({ data }) { + const roomIndex = this.rooms.findIndex((r) => r.id === data.chatMessageAdded.room.id) + const changedRoom = {...this.rooms[roomIndex]} + changedRoom.lastMessage = data.chatMessageAdded + changedRoom.lastMessageAt = data.chatMessageAdded.date + this.rooms[roomIndex] = changedRoom if (data.chatMessageAdded.room.id === this.selectedRoom?.id) { this.fetchMessages({ room: this.selectedRoom, options: { refetch: true } }) } else { - // TODO this might be optimized selectively (first page vs rest) - this.rooms = [] - this.roomPage = 0 - this.roomsLoaded = false - this.fetchRooms() + this.fetchRooms({ options: { refetch: true } }) } }, From 41cca4f4ec93d28a265aa3683973c24eec67db21 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 19 Jul 2023 10:42:21 +0200 Subject: [PATCH 2/6] lint --- webapp/components/Chat/Chat.vue | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue index 4ac5606e8..698a270b7 100644 --- a/webapp/components/Chat/Chat.vue +++ b/webapp/components/Chat/Chat.vue @@ -238,15 +238,17 @@ export default { fetchPolicy: 'no-cache', }) - const rms = [] const rmsIds = [] ;[...Room, ...this.rooms].forEach((r) => { - if(!rmsIds.find((v) => v === r.id)){ - rms.push({...r, index: r.lastMessage.date, - users: r.users.map((u) => { - return { ...u, username: u.name, avatar: u.avatar?.url } - })}) + if (!rmsIds.find((v) => v === r.id)) { + rms.push({ + ...r, + index: r.lastMessage.date, + users: r.users.map((u) => { + return { ...u, username: u.name, avatar: u.avatar?.url } + }), + }) rmsIds.push(r.id) } }) @@ -285,10 +287,12 @@ export default { fetchPolicy: 'no-cache', }) - const newMsgIds = Message.filter((m) => m.seen === false && m.senderId !== this.currentUser.id).map((m) => m.id) + const newMsgIds = Message.filter( + (m) => m.seen === false && m.senderId !== this.currentUser.id, + ).map((m) => m.id) if (newMsgIds.length) { const roomIndex = this.rooms.findIndex((r) => r.id === room.id) - const changedRoom = {...this.rooms[roomIndex]} + const changedRoom = { ...this.rooms[roomIndex] } changedRoom.unreadCount = changedRoom.unreadCount - newMsgIds.length this.rooms[roomIndex] = changedRoom this.$apollo @@ -330,7 +334,7 @@ export default { async chatMessageAdded({ data }) { const roomIndex = this.rooms.findIndex((r) => r.id === data.chatMessageAdded.room.id) - const changedRoom = {...this.rooms[roomIndex]} + const changedRoom = { ...this.rooms[roomIndex] } changedRoom.lastMessage = data.chatMessageAdded changedRoom.lastMessageAt = data.chatMessageAdded.date this.rooms[roomIndex] = changedRoom From 897794b0eee36e3cad9fa379ed2ee02a66b5770b Mon Sep 17 00:00:00 2001 From: Markus Date: Wed, 19 Jul 2023 11:06:05 +0200 Subject: [PATCH 3/6] [feature] changed seen checks for chat component --- webapp/assets/_new/styles/export.scss | 4 ++++ webapp/assets/_new/styles/tokens.scss | 3 +++ webapp/constants/chat.js | 6 +++--- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/webapp/assets/_new/styles/export.scss b/webapp/assets/_new/styles/export.scss index 88b42bfc9..5b866d6b7 100644 --- a/webapp/assets/_new/styles/export.scss +++ b/webapp/assets/_new/styles/export.scss @@ -27,4 +27,8 @@ chatMessageBgOthers: $chat-message-bg-others; chatNewMessageColor: $chat-new-message-color; + + chatMessageTimestamp: $chat-message-timestamp; + chatMessageCheckmarkSeen: $chat-message-checkmark-seen; + chatMessageCheckmark: $chat-message-checkmark; } \ No newline at end of file diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss index e001ffa84..ef5086240 100644 --- a/webapp/assets/_new/styles/tokens.scss +++ b/webapp/assets/_new/styles/tokens.scss @@ -417,3 +417,6 @@ $chat-message-color: $text-color-base; $chat-message-bg-others: $color-neutral-80; $chat-sidemenu-bg: $color-secondary-active; $chat-new-message-color: $color-secondary-active; +$chat-message-timestamp: $text-color-soft; +$chat-message-checkmark-seen: $text-color-secondary; +$chat-message-checkmark: $text-color-soft; diff --git a/webapp/constants/chat.js b/webapp/constants/chat.js index a183a3922..181d88e0e 100644 --- a/webapp/constants/chat.js +++ b/webapp/constants/chat.js @@ -65,7 +65,7 @@ const STYLE = { backgroundSelected: '#c2dcf2', colorDeleted: '#757e85', colorUsername: '#9ca6af', - colorTimestamp: '#828c94', + colorTimestamp: styleData.chatMessageTimestamp, backgroundDate: '#e5effa', colorDate: '#505a62', backgroundSystem: '#e5effa', @@ -134,8 +134,8 @@ const STYLE = { emojiReaction: 'rgba(0, 0, 0, 0.3)', document: styleData.colorPrimary, pencil: '#9e9e9e', - checkmark: '#9e9e9e', - checkmarkSeen: '#0696c7', + checkmark: styleData.chatMessageCheckmark, + checkmarkSeen: styleData.chatMessageCheckmarkSeen, eye: '#fff', dropdownMessage: '#fff', dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)', From f7dd605838466b8d1acaf21de3c0ba05d6f7dc08 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 19 Jul 2023 11:36:35 +0200 Subject: [PATCH 4/6] shorten room message, update room message when sending --- webapp/components/Chat/Chat.vue | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue index 698a270b7..320ea3357 100644 --- a/webapp/components/Chat/Chat.vue +++ b/webapp/components/Chat/Chat.vue @@ -245,6 +245,7 @@ export default { rms.push({ ...r, index: r.lastMessage.date, + lastMessage: {...r.lastMessage, content: r.lastMessage.content.trim().substring(0,30)}, users: r.users.map((u) => { return { ...u, username: u.name, avatar: u.avatar?.url } }), @@ -336,6 +337,7 @@ export default { const roomIndex = this.rooms.findIndex((r) => r.id === data.chatMessageAdded.room.id) const changedRoom = { ...this.rooms[roomIndex] } changedRoom.lastMessage = data.chatMessageAdded + changedRoom.lastMessage.content = changedRoom.lastMessage.content.trim().substring(0,30) changedRoom.lastMessageAt = data.chatMessageAdded.date this.rooms[roomIndex] = changedRoom if (data.chatMessageAdded.room.id === this.selectedRoom?.id) { @@ -360,6 +362,12 @@ export default { content: message.content, }, }) + const roomIndex = this.rooms.findIndex((r) => r.id === message.roomId) + const changedRoom = { ...this.rooms[roomIndex] } + console.log(changedRoom) + changedRoom.lastMessage = message + changedRoom.lastMessage.content = changedRoom.lastMessage.content.trim().substring(0,30) + this.rooms[roomIndex] = changedRoom } catch (error) { this.$toast.error(error.message) } From 24187bf8a92d08e85988d2dbe9f640d54e9ec9a2 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 19 Jul 2023 11:45:36 +0200 Subject: [PATCH 5/6] increase unreadCount when receiving a message, fix problem with empty room --- webapp/components/Chat/Chat.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue index 320ea3357..9fec8d96f 100644 --- a/webapp/components/Chat/Chat.vue +++ b/webapp/components/Chat/Chat.vue @@ -244,8 +244,8 @@ export default { if (!rmsIds.find((v) => v === r.id)) { rms.push({ ...r, - index: r.lastMessage.date, - lastMessage: {...r.lastMessage, content: r.lastMessage.content.trim().substring(0,30)}, + index: r.lastMessage?.date, + lastMessage: {...r.lastMessage, content: r.lastMessage?.content.trim().substring(0,30)}, users: r.users.map((u) => { return { ...u, username: u.name, avatar: u.avatar?.url } }), @@ -339,6 +339,7 @@ export default { changedRoom.lastMessage = data.chatMessageAdded changedRoom.lastMessage.content = changedRoom.lastMessage.content.trim().substring(0,30) changedRoom.lastMessageAt = data.chatMessageAdded.date + changedRoom.unreadCount++ this.rooms[roomIndex] = changedRoom if (data.chatMessageAdded.room.id === this.selectedRoom?.id) { this.fetchMessages({ room: this.selectedRoom, options: { refetch: true } }) From 779d5641592c4386dbafdd5134adafefe486df93 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 19 Jul 2023 11:53:13 +0200 Subject: [PATCH 6/6] lint fixes --- webapp/components/Chat/Chat.vue | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue index 9fec8d96f..fdf1b3301 100644 --- a/webapp/components/Chat/Chat.vue +++ b/webapp/components/Chat/Chat.vue @@ -245,7 +245,10 @@ export default { rms.push({ ...r, index: r.lastMessage?.date, - lastMessage: {...r.lastMessage, content: r.lastMessage?.content.trim().substring(0,30)}, + lastMessage: { + ...r.lastMessage, + content: r.lastMessage?.content.trim().substring(0, 30), + }, users: r.users.map((u) => { return { ...u, username: u.name, avatar: u.avatar?.url } }), @@ -337,9 +340,9 @@ export default { const roomIndex = this.rooms.findIndex((r) => r.id === data.chatMessageAdded.room.id) const changedRoom = { ...this.rooms[roomIndex] } changedRoom.lastMessage = data.chatMessageAdded - changedRoom.lastMessage.content = changedRoom.lastMessage.content.trim().substring(0,30) + changedRoom.lastMessage.content = changedRoom.lastMessage.content.trim().substring(0, 30) changedRoom.lastMessageAt = data.chatMessageAdded.date - changedRoom.unreadCount++ + changedRoom.unreadCount++ this.rooms[roomIndex] = changedRoom if (data.chatMessageAdded.room.id === this.selectedRoom?.id) { this.fetchMessages({ room: this.selectedRoom, options: { refetch: true } }) @@ -365,9 +368,8 @@ export default { }) const roomIndex = this.rooms.findIndex((r) => r.id === message.roomId) const changedRoom = { ...this.rooms[roomIndex] } - console.log(changedRoom) changedRoom.lastMessage = message - changedRoom.lastMessage.content = changedRoom.lastMessage.content.trim().substring(0,30) + changedRoom.lastMessage.content = changedRoom.lastMessage.content.trim().substring(0, 30) this.rooms[roomIndex] = changedRoom } catch (error) { this.$toast.error(error.message)