(feat) add message selection

Author: antoine92190

demo/src/ChatContainer.vue

@@ -50,6 +50,7 @@
 			:rooms-loaded="roomsLoaded"
 			:room-actions="roomActions"
 			:menu-actions="menuActions"
+			:message-selection-actions="messageSelectionActions"
 			:room-message="roomMessage"
 			:templates-text="templatesText"
 			@fetch-more-rooms="fetchMoreRooms"
@@ -62,6 +63,7 @@
 			@add-room="addRoom"
 			@room-action-handler="menuActionHandler"
 			@menu-action-handler="menuActionHandler"
+			@message-selection-action-handler="messageSelectionActionHandler"
 			@send-message-reaction="sendMessageReaction"
 			@typing-message="typingMessage"
 			@toggle-rooms-list="$emit('show-demo-options', $event.opened)"
@@ -138,6 +140,7 @@ export default {
 				{ name: 'removeUser', title: 'Remove User' },
 				{ name: 'deleteRoom', title: 'Delete Room' }
 			],
+			messageSelectionActions: [{ name: 'deleteMessages', title: 'Delete' }],
 			styles: { container: { borderRadius: '4px' } },
 			templatesText: [
 				{
@@ -687,6 +690,15 @@ export default {
 			}
 		},
 
+		messageSelectionActionHandler({ action, messages, roomId }) {
+			switch (action.name) {
+				case 'deleteMessages':
+					messages.forEach(message => {
+						this.deleteMessage({ message, roomId })
+					})
+			}
+		},
+
 		async sendMessageReaction({ reaction, remove, messageId, roomId }) {
 			firestoreService.updateMessageReactions(
 				roomId,

src/lib/ChatWindow.vue

@@ -38,6 +38,7 @@
 				:messages-loaded="messagesLoaded"
 				:menu-actions="menuActions"
 				:message-actions="messageActions"
+				:message-selection-actions="messageSelectionActions"
 				:auto-scroll="autoScroll"
 				:show-send-icon="showSendIcon"
 				:show-files="showFiles"
@@ -74,6 +75,7 @@
 				@open-failed-message="openFailedMessage"
 				@menu-action-handler="menuActionHandler"
 				@message-action-handler="messageActionHandler"
+				@message-selection-action-handler="messageSelectionActionHandler"
 				@send-message-reaction="sendMessageReaction"
 				@typing-message="typingMessage"
 				@textarea-action-handler="textareaActionHandler"
@@ -137,9 +139,11 @@ export default {
 			default: () => [
 				{ name: 'replyMessage', title: 'Reply' },
 				{ name: 'editMessage', title: 'Edit Message', onlyMe: true },
-				{ name: 'deleteMessage', title: 'Delete Message', onlyMe: true }
+				{ name: 'deleteMessage', title: 'Delete Message', onlyMe: true },
+				{ name: 'selectMessages', title: 'Select' }
 			]
 		},
+		messageSelectionActions: { type: Array, default: () => [] },
 		autoScroll: {
 			type: Object,
 			default: () => {
@@ -214,7 +218,8 @@ export default {
 		'textarea-action-handler',
 		'fetch-more-rooms',
 		'add-room',
-		'room-action-handler'
+		'room-action-handler',
+		'message-selection-action-handler'
 	],
 
 	data() {
@@ -400,6 +405,12 @@ export default {
 				roomId: this.room.roomId
 			})
 		},
+		messageSelectionActionHandler(ev) {
+			this.$emit('message-selection-action-handler', {
+				...ev,
+				roomId: this.room.roomId
+			})
+		},
 		sendMessageReaction(messageReaction) {
 			this.$emit('send-message-reaction', {
 				...messageReaction,

src/lib/Message/Message.scss

@@ -18,14 +18,14 @@
 		font-weight: 500;
 		text-transform: uppercase;
 		color: var(--chat-message-color-date);
-		background: var(--chat-message-bg-color-date);
+		background-color: var(--chat-message-bg-color-date);
 	}
 
 	.vac-card-system {
 		max-width: 250px;
 		padding: 8px 4px;
 		color: var(--chat-message-color-system);
-		background: var(--chat-message-bg-color-system);
+		background-color: var(--chat-message-bg-color-system);
 	}
 
 	.vac-line-new {
@@ -120,7 +120,7 @@
 	}
 
 	.vac-message-card {
-		background: var(--chat-message-bg-color);
+		background-color: var(--chat-message-bg-color);
 		color: var(--chat-message-color);
 		border-radius: 8px;
 		font-size: 14px;
@@ -141,14 +141,19 @@
 	}
 
 	.vac-message-current {
-		background: var(--chat-message-bg-color-me) !important;
+		background-color: var(--chat-message-bg-color-me) !important;
 	}
 
 	.vac-message-deleted {
 		color: var(--chat-message-color-deleted) !important;
 		font-size: 13px !important;
 		font-style: italic !important;
-		background: var(--chat-message-bg-color-deleted) !important;
+		background-color: var(--chat-message-bg-color-deleted) !important;
+	}
+
+	.vac-message-selected {
+		background-color: var(--chat-message-bg-color-selected) !important;
+		transition: background-color 0.2s;
 	}
 
 	.vac-icon-deleted {

src/lib/Message/Message.vue

@@ -26,6 +26,7 @@
 			v-else
 			class="vac-message-box"
 			:class="{ 'vac-offset-current': message.senderId === currentUserId }"
+			@click="selectMessage"
 		>
 			<slot name="message" v-bind="{ message }">
 				<div
@@ -48,7 +49,9 @@
 						:class="{
 							'vac-message-highlight': isMessageHover,
 							'vac-message-current': message.senderId === currentUserId,
-							'vac-message-deleted': message.deleted
+							'vac-message-deleted': message.deleted,
+							'vac-item-clickable': messageSelectionEnabled,
+							'vac-message-selected': isMessageSelected
 						}"
 						@mouseover="onHoverMessage"
 						@mouseleave="onLeaveMessage"
@@ -102,6 +105,7 @@
 							:room-users="roomUsers"
 							:text-formatting="textFormatting"
 							:link-options="linkOptions"
+							:message-selection-enabled="messageSelectionEnabled"
 							@open-file="openFile"
 						>
 							<template v-for="(i, name) in $scopedSlots" #[name]="data">
@@ -248,7 +252,9 @@ export default {
 		textFormatting: { type: Object, required: true },
 		linkOptions: { type: Object, required: true },
 		hideOptions: { type: Boolean, required: true },
-		usernameOptions: { type: Object, required: true }
+		usernameOptions: { type: Object, required: true },
+		messageSelectionEnabled: { type: Boolean, required: true },
+		selectedMessages: { type: Array, default: () => [] }
 	},
 
 	emits: [
@@ -258,7 +264,9 @@ export default {
 		'open-user-tag',
 		'open-failed-message',
 		'message-action-handler',
-		'send-message-reaction'
+		'send-message-reaction',
+		'select-message',
+		'unselect-message'
 	],
 
 	data() {
@@ -321,6 +329,14 @@ export default {
 			return this.messages.some(
 				message => message.senderId !== this.currentUserId && message.avatar
 			)
+		},
+		isMessageSelected() {
+			return (
+				this.messageSelectionEnabled &&
+				!!this.selectedMessages.find(
+					message => message._id === this.message._id
+				)
+			)
 		}
 	},
 
@@ -338,6 +354,9 @@ export default {
 					obj.index < res.index ? obj : res
 				)
 			}
+		},
+		messageSelectionEnabled() {
+			this.resetMessageHover()
 		}
 	},
 
@@ -353,14 +372,22 @@ export default {
 
 	methods: {
 		onHoverMessage() {
-			this.messageHover = true
-			if (this.canEditMessage()) this.hoverMessageId = this.message._id
+			if (!this.messageSelectionEnabled) {
+				this.messageHover = true
+				if (this.canEditMessage()) this.hoverMessageId = this.message._id
+			}
 		},
 		canEditMessage() {
 			return !this.message.deleted
 		},
 		onLeaveMessage() {
-			if (!this.optionsOpened && !this.emojiOpened) this.messageHover = false
+			if (!this.messageSelectionEnabled) {
+				if (!this.optionsOpened && !this.emojiOpened) this.messageHover = false
+				this.hoverMessageId = null
+			}
+		},
+		resetMessageHover() {
+			this.messageHover = false
 			this.hoverMessageId = null
 		},
 		openFile(file) {
@@ -370,8 +397,7 @@ export default {
 			this.$emit('open-user-tag', { user })
 		},
 		messageActionHandler(action) {
-			this.messageHover = false
-			this.hoverMessageId = null
+			this.resetMessageHover()
 
 			setTimeout(() => {
 				this.$emit('message-action-handler', { action, message: this.message })
@@ -384,6 +410,15 @@ export default {
 				remove: reaction && reaction.indexOf(this.currentUserId) !== -1
 			})
 			this.messageHover = false
+		},
+		selectMessage() {
+			if (this.messageSelectionEnabled) {
+				if (this.isMessageSelected) {
+					this.$emit('unselect-message', this.message._id)
+				} else {
+					this.$emit('select-message', this.message)
+				}
+			}
 		}
 	}
 }

src/lib/Message/MessageFiles/MessageFile/MessageFile.vue

@@ -6,7 +6,7 @@
 			class="vac-message-image-container"
 			@mouseover="imageHover = true"
 			@mouseleave="imageHover = false"
-			@click.stop="openFile('preview')"
+			@click="openFile($event, 'preview')"
 		>
 			<progress-bar
 				v-if="file.progress >= 0"
@@ -36,18 +36,21 @@
 				}"
 			>
 				<transition name="vac-fade-image">
-					<div v-if="imageHover && !isImageLoading" class="vac-image-buttons">
+					<div
+						v-if="!messageSelectionEnabled && imageHover && !isImageLoading"
+						class="vac-image-buttons"
+					>
 						<div
 							class="vac-svg-button vac-button-view"
-							@click.stop="openFile('preview')"
+							@click="openFile($event, 'preview')"
 						>
 							<slot name="eye-icon">
 								<svg-icon name="eye" />
 							</slot>
 						</div>
 						<div
 							class="vac-svg-button vac-button-download"
-							@click.stop="openFile('download')"
+							@click="openFile($event, 'download')"
 						>
 							<slot name="document-icon">
 								<svg-icon name="document" />
@@ -61,7 +64,7 @@
 		<div
 			v-else-if="isVideo"
 			class="vac-video-container"
-			@click.stop.prevent="openFile('preview')"
+			@click.prevent="openFile('preview')"
 		>
 			<progress-bar v-if="file.progress >= 0" :progress="file.progress" />
 			<video width="100%" height="100%" controls>
@@ -86,7 +89,8 @@ export default {
 		currentUserId: { type: [String, Number], required: true },
 		message: { type: Object, required: true },
 		file: { type: Object, required: true },
-		index: { type: Number, required: true }
+		index: { type: Number, required: true },
+		messageSelectionEnabled: { type: Boolean, required: true }
 	},
 
 	emits: ['open-file'],
@@ -139,8 +143,11 @@ export default {
 			image.src = this.file.url
 			image.addEventListener('load', () => (this.imageLoading = false))
 		},
-		openFile(action) {
-			this.$emit('open-file', { file: this.file, action })
+		openFile(event, action) {
+			if (!this.messageSelectionEnabled) {
+				event.stopPropagation()
+				this.$emit('open-file', { file: this.file, action })
+			}
 		}
 	}
 }

src/lib/Message/MessageFiles/MessageFiles.vue

@@ -6,6 +6,7 @@
 				:current-user-id="currentUserId"
 				:message="message"
 				:index="idx"
+				:message-selection-enabled="messageSelectionEnabled"
 				@open-file="$emit('open-file', $event)"
 			>
 				<template v-for="(i, name) in $scopedSlots" #[name]="data">
@@ -71,7 +72,8 @@ export default {
 		message: { type: Object, required: true },
 		roomUsers: { type: Array, required: true },
 		textFormatting: { type: Object, required: true },
-		linkOptions: { type: Object, required: true }
+		linkOptions: { type: Object, required: true },
+		messageSelectionEnabled: { type: Boolean, required: true }
 	},
 
 	emits: ['open-file', 'open-user-tag'],