(feat) add openFile event

Author: antoine92190

README.md

@@ -226,7 +226,7 @@ messages="[
 | sendMessage           | `{ roomId, content, file (3) }`               | A user has sent a message                             |
 | editMessage           | `{ roomId, messageId, newContent, file (3) }` | A user has edited a message                           |
 | deleteMessage         | `{ roomId, messageId }`                       | A user has deleted a message                          |
-| uploadFile            | `{ roomId, messageId, file (3) }`             | A user has uploaded a file                            |
+| openFile              | `{ message }`                                 | A user has clicked to view or download a file         |
 | addRoom               | -                                             | A user clicks on the plus icon next to searchbar      |
 | menuActionHandler (2) | `{ roomId, action }`                          | A user clicks on the vertical dots icon inside a room |
 

demo/src/ChatContainer.vue

@@ -58,6 +58,7 @@
 			@editMessage="editMessage"
 			@deleteMessage="deleteMessage"
 			@uploadFile="uploadFile"
+			@openFile="openFile"
 			@addRoom="addRoom"
 			@menuActionHandler="menuActionHandler"
 		/>
@@ -384,6 +385,10 @@ export default {
 			if (file) this.uploadFile({ file, messageId: id, roomId })
 		},
 
+		openFile(message) {
+			window.open(message.file.url, '_blank')
+		},
+
 		async editMessage({ messageId, newContent, roomId, file }) {
 			const newMessage = { edited: new Date() }
 			newMessage.content = newContent

src/ChatWindow/ChatMessage.vue

@@ -200,8 +200,8 @@ export default {
 			this.$emit('deleteMessage', this.message)
 			this.onLeaveMessage()
 		},
-		openFile({ url }) {
-			window.open(url, '_blank')
+		openFile() {
+			this.$emit('openFile', this.message)
 		},
 		checkImageFile() {
 			if (!this.message.file) return

src/ChatWindow/ChatWindow.vue

@@ -23,6 +23,7 @@
 				@editMessage="editMessage"
 				@deleteMessage="deleteMessage"
 				@uploadFile="uploadFile"
+				@openFile="openFile"
 				@menuActionHandler="menuActionHandler"
 			>
 			</messages-list>
@@ -124,6 +125,9 @@ export default {
 		uploadFile(file) {
 			this.$emit('uploadFile', file)
 		},
+		openFile(message) {
+			this.$emit('openFile', message)
+		},
 		menuActionHandler(ev) {
 			this.$emit('menuActionHandler', { action: ev, roomId: this.room.roomId })
 		}

src/ChatWindow/MessagesList.vue

@@ -60,6 +60,7 @@
 							:textMessages="textMessages"
 							@editMessage="editMessage"
 							@deleteMessage="deleteMessage"
+							@openFile="openFile"
 						></chat-message>
 					</div>
 				</transition-group>
@@ -339,6 +340,9 @@ export default {
 			const { type } = file
 			return imageTypes.some(t => type.includes(t))
 		},
+		openFile(message) {
+			this.$emit('openFile', message)
+		},
 		menuActionHandler(action) {
 			this.closeMenu()
 			this.$emit('menuActionHandler', action)