(feat) add failure message icon

Author: antoine92190

README.md

@@ -525,6 +525,7 @@ Message states:
 - `distributed: true` two checkmarks
 - `seen: true` two blue checkmarks
 - `deleted: true` grey background with deleted message text
+- `failure: true` red clickable failure icon
 
 ```javascript
 messages="[
@@ -542,6 +543,7 @@ messages="[
     distributed: true,
     seen: true,
     deleted: false,
+    failure: true,
     disableActions: false,
     disableReactions: false,
     files: [
@@ -597,6 +599,7 @@ messages="[
 | `delete-message`                     | `{ roomId, message }`                                                     | Deleted a message                               |
 | `open-file`                          | `{ message, file }`                                                       | Clicked to view or download a file              |
 | `open-user-tag`(3)                   | `{ user }`                                                                | Clicked on a user tag inside a message          |
+| `open-failed-message`                | `{ roomId, message }`                                                     | Clicked on the failure icon next to a message   |
 | `add-room`                           | -                                                                         | Clicked on the plus icon next to searchbar      |
 | `room-action-handler`(4)             | `{ roomId, action }`                                                      | Clicked on the vertical dots icon inside a room |
 | `menu-action-handler`(5)             | `{ roomId, action }`                                                      | Clicked on the vertical dots icon inside a room |
@@ -605,7 +608,7 @@ messages="[
 | `room-info` (7)                      | `room`                                                                    | Clicked the room header bar                     |
 | `toggle-rooms-list`                  | `{ opened }`                                                              | Clicked on the toggle icon inside a room header |
 | `textarea-action-handler`(8)         | `{ roomId, message }`                                                     | Clicked on custom icon inside the footer        |
-| `typing-message`                     | `{ message, roomId }`                                                     | Started typing a message                        |
+| `typing-message`                     | `{ roomId, message }`                                                     | Started typing a message                        |
 
 **(1)** `fetch-messages` is triggered every time a room is opened. If the room is opened for the first time, the `options` param will hold `reset: true`.<br>
 **(1)** `fetch-messages` should be a method implementing a pagination system. Its purpose is to load older messages of a conversation when the user scroll on top.

src/lib/ChatWindow.vue

@@ -69,6 +69,7 @@
 				@delete-message="deleteMessage"
 				@open-file="openFile"
 				@open-user-tag="openUserTag"
+				@open-failed-message="openFailedMessage"
 				@menu-action-handler="menuActionHandler"
 				@message-action-handler="messageActionHandler"
 				@send-message-reaction="sendMessageReaction"
@@ -174,6 +175,7 @@ export default {
 		'delete-message',
 		'open-file',
 		'open-user-tag',
+		'open-failed-message',
 		'menu-action-handler',
 		'message-action-handler',
 		'send-message-reaction',
@@ -336,6 +338,12 @@ export default {
 		openUserTag({ user }) {
 			this.$emit('open-user-tag', { user })
 		},
+		openFailedMessage({ message }) {
+			this.$emit('open-failed-message', {
+				message,
+				roomId: this.room.roomId
+			})
+		},
 		menuActionHandler(ev) {
 			this.$emit('menu-action-handler', {
 				action: ev,

src/lib/Message/Message.scss

@@ -68,6 +68,26 @@
 		align-self: flex-end;
 	}
 
+	.vac-failure-container {
+		position: relative;
+		align-self: flex-end;
+		height: 20px;
+		width: 20px;
+		margin: 0 0 2px -4px;
+		border-radius: 50%;
+		background-color: #f44336;
+
+		.vac-failure-text {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			color: white;
+			font-size: 15px;
+			font-weight: bold;
+		}
+	}
+
 	.vac-message-container {
 		position: relative;
 		padding: 2px 10px;
@@ -213,6 +233,10 @@
 			}
 		}
 
+		.vac-failure-container {
+			margin-left: 2px;
+		}
+
 		.vac-offset-current {
 			margin-left: 20%;
 		}

src/lib/Message/Message.vue

@@ -179,6 +179,17 @@
 					class="vac-avatar vac-avatar-current"
 					:style="{ 'background-image': `url('${message.avatar}')` }"
 				/>
+				<slot name="message-failure" v-bind="{ message }">
+					<div
+						v-if="message.failure && message.senderId === currentUserId"
+						class="vac-failure-container vac-svg-button"
+						@click="$emit('open-failed-message', { message })"
+					>
+						<div class="vac-failure-text">
+							!
+						</div>
+					</div>
+				</slot>
 			</slot>
 		</div>
 	</div>
@@ -232,6 +243,7 @@ export default {
 		'message-added',
 		'open-file',
 		'open-user-tag',
+		'open-failed-message',
 		'message-action-handler',
 		'send-message-reaction'
 	],

src/lib/Room/Room.vue

@@ -86,6 +86,7 @@
 								@message-action-handler="messageActionHandler"
 								@open-file="openFile"
 								@open-user-tag="openUserTag"
+								@open-failed-message="$emit('open-failed-message', $event)"
 								@send-message-reaction="sendMessageReaction"
 								@hide-options="hideOptions = $event"
 							>
@@ -398,6 +399,7 @@ export default {
 		'typing-message',
 		'open-file',
 		'open-user-tag',
+		'open-failed-message',
 		'textarea-action-handler'
 	],
 

types/index.d.ts

@@ -58,19 +58,24 @@ export interface MessageReactions {
 
 export interface Message {
 	_id: StringNumber
+	indexId?: StringNumber
 	content: string
 	senderId: StringNumber
+	username?: string
+	avayar?: string
 	date: string
 	timestamp: string
-	username?: string
 	system?: boolean
 	saved?: boolean
 	distributed?: boolean
 	seen?: boolean
+	deleted?: boolean
+	failure?: boolean
 	disableActions?: boolean
 	disableReactions?: boolean
 	files?: MessageFile[]
 	reactions?: MessageReactions
+	replyMessage?: Message
 }
 
 export type Messages = Message[]