KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Chore: Fix HTML rendering in ConversationCard (#963)

Browse source
This commit is contained in:
Pranav Raj S 2020-06-14 18:30:36 +05:30 • committed by GitHub
parent 5cb88237f5
commit 7c6ea3a05a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

51
app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
View file

@ -23,15 +23,19 @@
{{ inboxName(chat.inbox_id) }} {{ inboxName(chat.inbox_id) }}
</span> </span>
</h4> </h4>
<p <p v-if="lastMessageInChat" class="conversation--message">
class="conversation--message" <span v-if="lastMessageInChat.content">
v-html="extractMessageText(lastMessageInChat)" {{ lastMessageInChat.content }}
/> </span>
<span v-else-if="!lastMessageInChat.attachments">{{ ` ` }}</span>
<span v-else>
<i :class="`small-icon ${this.$t(`${attachmentIconKey}.ICON`)}`"></i>
{{ this.$t(`${attachmentIconKey}.CONTENT`) }}
</span>
</p>
<div class="conversation--meta"> <div class="conversation--meta">
<span class="timestamp"> <span class="timestamp">
{{ {{ dynamicTime(chat.timestamp) }}
lastMessageInChat ? dynamicTime(lastMessageInChat.created_at) : ''
}}
</span> </span>
<span class="unread">{{ getUnreadCount }}</span> <span class="unread">{{ getUnreadCount }}</span>
</div> </div>
@ -39,11 +43,8 @@
</div> </div>
</template> </template>
<script> <script>
/* eslint no-console: 0 */
/* eslint no-extra-boolean-cast: 0 */
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import Thumbnail from '../Thumbnail'; import Thumbnail from '../Thumbnail';
import getEmojiSVG from '../emoji/utils';
import conversationMixin from '../../../mixins/conversations'; import conversationMixin from '../../../mixins/conversations';
import timeMixin from '../../../mixins/time'; import timeMixin from '../../../mixins/time';
import router from '../../../routes'; import router from '../../../routes';
@ -85,6 +86,12 @@ export default {
); );
}, },
attachmentIconKey() {
const lastMessage = this.lastMessageInChat;
const [{ file_type: fileType } = {}] = lastMessage.attachments;
return `CHAT_LIST.ATTACHMENTS.${fileType}`;
},
isActiveChat() { isActiveChat() {
return this.currentChat.id === this.chat.id; return this.currentChat.id === this.chat.id;
}, },
@ -112,30 +119,6 @@ export default {
const path = conversationUrl(this.accountId, activeInbox, chat.id); const path = conversationUrl(this.accountId, activeInbox, chat.id);
router.push({ path: frontendURL(path) }); router.push({ path: frontendURL(path) });
}, },
extractMessageText(chatItem) {
if (!chatItem) {
return '';
}
const { content, attachments } = chatItem;
if (content) {
return content;
}
if (!attachments) {
return ' ';
}
const [attachment] = attachments;
const { file_type: fileType } = attachment;
const key = `CHAT_LIST.ATTACHMENTS.${fileType}`;
return `
<i class="small-icon ${this.$t(`${key}.ICON`)}"></i>
${this.$t(`${key}.CONTENT`)}
`;
},
getEmojiSVG,
inboxName(inboxId) { inboxName(inboxId) {
const stateInbox = this.$store.getters['inboxes/getInbox'](inboxId); const stateInbox = this.$store.getters['inboxes/getInbox'](inboxId);
return stateInbox.name || ''; return stateInbox.name || '';