Chatwoot/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue
Nithin David Thomas eee89bf0d8
feat: Show cc from last email on reply editor (#3983)
* Adds last emails to reply editor

* Fixes bug in reply box

* Adds test cases

* Prevents private notes having cc bcc data

* Prevents private notes having cc bcc data

* Init reply head with values

* fix broken tests

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
2022-02-28 21:42:50 +05:30

98 lines
2.3 KiB
Vue

<template>
<div
v-if="showHead"
class="message__mail-head"
:class="{ 'is-incoming': isIncoming }"
>
<div v-if="fromMail" class="meta-wrap">
<span class="message__content--type">{{ $t('EMAIL_HEADER.FROM') }}:</span>
<span>{{ fromMail }}</span>
</div>
<div v-if="toMails" class="meta-wrap">
<span class="message__content--type">{{ $t('EMAIL_HEADER.TO') }}:</span>
<span>{{ toMails }}</span>
</div>
<div v-if="ccMails" class="meta-wrap">
<span class="message__content--type">{{ $t('EMAIL_HEADER.CC') }}:</span>
<span>{{ ccMails }}</span>
</div>
<div v-if="bccMails" class="meta-wrap">
<span class="message__content--type">{{ $t('EMAIL_HEADER.BCC') }}:</span>
<span>{{ bccMails }}</span>
</div>
<div v-if="subject" class="meta-wrap">
<span class="message__content--type">
{{ $t('EMAIL_HEADER.SUBJECT') }}:
</span>
<span>{{ subject }}</span>
</div>
</div>
</template>
<script>
export default {
props: {
emailAttributes: {
type: Object,
default: () => ({}),
},
isIncoming: {
type: Boolean,
default: true,
},
cc: {
type: Array,
default: () => [],
},
bcc: {
type: Array,
default: () => [],
},
},
computed: {
fromMail() {
const from = this.emailAttributes.from || [];
return from.join(', ');
},
toMails() {
const to = this.emailAttributes.to || [];
return to.join(', ');
},
ccMails() {
const cc = this.emailAttributes.cc || this.cc || [];
return cc.join(', ');
},
bccMails() {
const bcc = this.emailAttributes.bcc || this.bcc || [];
return bcc.join(', ');
},
subject() {
return this.emailAttributes.subject || '';
},
showHead() {
return this.toMails || this.ccMails || this.bccMails || this.fromMail;
},
},
};
</script>
<style lang="scss" scoped>
.message__mail-head {
padding-bottom: var(--space-small);
margin-bottom: var(--space-small);
border-bottom: 1px solid var(--w-300);
&.is-incoming {
border-bottom: 1px solid var(--color-border-light);
}
}
.meta-wrap {
.message__content--type {
font-weight: var(--font-weight-bold);
font-size: var(--font-size-mini);
}
span {
font-size: var(--font-size-mini);
}
}
</style>