Skip to content

Commit 36432b4

Browse files
antoine92190antoine92190
committed
(refacto) replace string interpolation by v-html
1 parent 4d76f81 commit 36432b4

File tree

3 files changed

+61
-47
lines changed

3 files changed

+61
-47
lines changed

‎src/ChatWindow/Message.vue‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
<template>
22
<div>
3-
<div class="card-date" v-if="showDate">
4-
{{ message.date }}
5-
</div>
6-
7-
<div class="line-new" v-if="newMessage._id === message._id">
8-
{{ textMessages.NEW_MESSAGES }}
9-
</div>
3+
<div class="card-date" v-if="showDate" v-html="message.date"></div>
4+
<div
5+
class="line-new"
6+
v-if="newMessage._id === message._id"
7+
v-html="textMessages.NEW_MESSAGES"
8+
></div>
109

1110
<div
1211
class="message-box"
@@ -36,14 +35,14 @@
3635
'username-reply': !message.deleted && message.replyMessage
3736
}"
3837
>
39-
<span>{{ message.username }}</span>
38+
<span v-html="message.username"></span>
4039
</div>
4140

4241
<div
4342
v-if="!message.deleted && message.replyMessage"
4443
class="reply-message"
4544
>
46-
<div class="reply-username">{{ replyUsername }}</div>
45+
<div class="reply-username" v-html="replyUsername"></div>
4746

4847
<div class="image-reply-container" v-if="isImageReply">
4948
<div
@@ -54,15 +53,18 @@
5453
></div>
5554
</div>
5655

57-
<div class="reply-content">{{ message.replyMessage.content }}</div>
56+
<div
57+
class="reply-content"
58+
v-html="message.replyMessage.content"
59+
></div>
5860
</div>
5961

6062
<div v-if="message.deleted">
61-
<span>{{ textMessages.MESSAGE_DELETED }}</span>
63+
<span v-html="textMessages.MESSAGE_DELETED"></span>
6264
</div>
6365

6466
<div v-else-if="!message.file">
65-
<span>{{ message.content }}</span>
67+
<span v-html="message.content"></span>
6668
</div>
6769

6870
<div class="image-container" v-else-if="isImage">
@@ -98,7 +100,7 @@
98100
</div>
99101
</transition>
100102
</div>
101-
<span>{{ message.content }}</span>
103+
<span v-html="message.content"></span>
102104
</div>
103105

104106
<div v-else class="file-message">
@@ -108,14 +110,14 @@
108110
>
109111
<svg-icon name="document" />
110112
</div>
111-
<span>{{ message.content }}</span>
113+
<span v-html="message.content"></span>
112114
</div>
113115

114116
<div class="text-timestamp">
115117
<div class="icon-edited" v-if="message.edited && !message.deleted">
116118
<svg-icon name="pencil" />
117119
</div>
118-
<span>{{ message.timestamp }}</span>
120+
<span v-html="message.timestamp"></span>
119121
<span v-if="isMessageSeen">
120122
<svg-icon name="checkmark" class="icon-check" />
121123
</span>
@@ -186,9 +188,11 @@
186188
v-for="action in filteredMessageActions"
187189
:key="action.name"
188190
>
189-
<div class="menu-item" @click="messageActionHandler(action)">
190-
{{ action.title }}
191-
</div>
191+
<div
192+
class="menu-item"
193+
v-html="action.title"
194+
@click="messageActionHandler(action)"
195+
></div>
192196
</div>
193197
</div>
194198
</div>

‎src/ChatWindow/Room.vue‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,13 @@
1616
:style="{ 'background-image': `url('${room.avatar}')` }"
1717
></div>
1818
<div>
19-
<div class="room-name">{{ room.roomName }}</div>
20-
<div v-if="typingUsers" class="room-info">
21-
{{ typingUsers }} {{ textMessages.IS_TYPING }}
22-
</div>
23-
<div v-else class="room-info">
24-
{{ userStatus }}
25-
</div>
19+
<div class="room-name" v-html="room.roomName"></div>
20+
<div
21+
v-if="typingUsers"
22+
class="room-info"
23+
v-html="typingUsers + '' + textMessages.IS_TYPING"
24+
></div>
25+
<div v-else class="room-info" v-html="userStatus"></div>
2626
</div>
2727
<div
2828
class="svg-button room-options"
@@ -39,9 +39,11 @@
3939
>
4040
<div class="menu-list">
4141
<div v-for="action in menuActions" :key="action.name">
42-
<div class="menu-item" @click="menuActionHandler(action)">
43-
{{ action.title }}
44-
</div>
42+
<div
43+
class="menu-item"
44+
v-html="action.title"
45+
@click="menuActionHandler(action)"
46+
></div>
4547
</div>
4648
</div>
4749
</div>
@@ -53,12 +55,18 @@
5355
<div class="messages-container">
5456
<div :class="{ 'messages-hidden': loadingMessages }">
5557
<transition name="fade-message">
56-
<div class="text-started" v-if="showNoMessages">
57-
{{ textMessages.MESSAGES_EMPTY }}
58-
</div>
59-
<div class="text-started" v-if="showMessagesStarted">
60-
{{ textMessages.CONVERSATION_STARTED }} {{ messages[0].date }}
61-
</div>
58+
<div
59+
class="text-started"
60+
v-if="showNoMessages"
61+
v-html="textMessages.MESSAGES_EMPTY"
62+
></div>
63+
<div
64+
class="text-started"
65+
v-if="showMessagesStarted"
66+
v-html="
67+
textMessages.CONVERSATION_STARTED + ' ' + messages[0].date
68+
"
69+
></div>
6270
</transition>
6371
<transition name="fade-message">
6472
<infinite-loading
@@ -118,8 +126,8 @@
118126
class="image-reply"
119127
/>
120128
<div class="reply-info">
121-
<div class="reply-username">{{ messageReply.username }}</div>
122-
<div class="reply-content">{{ messageReply.content }}</div>
129+
<div class="reply-username" v-html="messageReply.username"></div>
130+
<div class="reply-content" v-html="messageReply.content"></div>
123131
</div>
124132
</div>
125133

@@ -149,7 +157,7 @@
149157
<div class="icon-file">
150158
<svg-icon name="file" />
151159
</div>
152-
<div class="file-message">{{ message }}</div>
160+
<div class="file-message" v-html="message"></div>
153161
<div class="svg-button icon-remove" @click="resetMessage(null, true)">
154162
<svg-icon name="close" />
155163
</div>

‎src/ChatWindow/RoomsList.vue‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,11 @@
2424

2525
<loader :show="loadingRooms"></loader>
2626

27-
<div class="rooms-empty" v-if="!loadingRooms && !rooms.length">
28-
{{ textMessages.ROOMS_EMPTY }}
29-
</div>
27+
<div
28+
class="rooms-empty"
29+
v-if="!loadingRooms && !rooms.length"
30+
v-html="textMessages.ROOMS_EMPTY"
31+
></div>
3032

3133
<div v-if="!loadingRooms" class="room-list">
3234
<div
@@ -48,12 +50,12 @@
4850
class="state-circle"
4951
:class="{ 'state-online': userStatus(room) === 'online' }"
5052
></div>
51-
<div class="room-name text-ellipsis">
52-
{{ room.roomName }}
53-
</div>
54-
<div class="text-date" v-if="room.lastMessage">
55-
{{ room.lastMessage.timestamp }}
56-
</div>
53+
<div class="room-name text-ellipsis" v-html="room.roomName"></div>
54+
<div
55+
class="text-date"
56+
v-if="room.lastMessage"
57+
v-html="room.lastMessage.timestamp"
58+
></div>
5759
</div>
5860
<div
5961
class="text-last text-ellipsis"
@@ -63,7 +65,7 @@
6365
<span v-if="room.lastMessage.seen">
6466
<svg-icon name="checkmark" class="icon-check" />
6567
</span>
66-
<span>{{ room.lastMessage.content }}</span>
68+
<span v-html="room.lastMessage.content"></span>
6769
</div>
6870
</div>
6971
</div>

0 commit comments

Comments
 (0)