190 lines
7.9 KiB
Vue
190 lines
7.9 KiB
Vue
<!-- =========================================================================================
|
|
File Name: EmailView.vue
|
|
Description: Email Application - Single Email View (Inbox)
|
|
----------------------------------------------------------------------------------------
|
|
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
|
Author: Pixinvent
|
|
Author URL: http://www.themeforest.net/user/pixinvent
|
|
========================================================================================== -->
|
|
|
|
|
|
<template>
|
|
<div>
|
|
<vs-sidebar click-not-close parent="#email-app" :hidden-background="true" class="full-vs-sidebar email-view-sidebar items-no-padding" v-model="isSidebarActive" position-right>
|
|
<div class="mail-sidebar-content px-0 sm:pb-6 h-full" v-if="currentMail">
|
|
<div class="flex flex-wrap items-center email-header justify-between md:px-8 px-6 sm:pb-2 sm: pt-6 d-theme-dark-bg">
|
|
<div class="flex mb-4">
|
|
<div class="flex items-center">
|
|
<feather-icon :icon="$vs.rtl ? 'ArrowRightIcon' : 'ArrowLeftIcon'" @click="$emit('closeSidebar')" class="cursor-pointer mr-4" svg-classes="w-6 h-6"></feather-icon>
|
|
<h4 v-if="currentMail.subject">{{ currentMail.subject }}</h4>
|
|
<h4 v-else>(no subject)</h4>
|
|
</div>
|
|
</div>
|
|
<div class="ml-10 mb-4 mt-1">
|
|
<div class="email__actions--single flex items-baseline">
|
|
|
|
<feather-icon icon="StarIcon" class="cursor-pointer" :svgClasses="[{'text-warning stroke-current stroke-current': currentMail.isStarred}, 'h-6 w-6']" @click="toggleIsStarred" />
|
|
|
|
|
|
<!-- ADD LABEL DROPDOWN -->
|
|
<vs-dropdown vs-custom-content vs-trigger-click class="cursor-pointer">
|
|
<feather-icon icon="TagIcon" svg-classes="h-6 w-6" class="cursor-pointer ml-4"></feather-icon>
|
|
<vs-dropdown-menu style="z-index: 40001">
|
|
<vs-dropdown-item v-for="(label, index) in emailTags" :key="index" @click.stop>
|
|
<vs-checkbox :vs-value="label.value" v-model="currentMailLabels">{{ label.text }}</vs-checkbox>
|
|
</vs-dropdown-item>
|
|
</vs-dropdown-menu>
|
|
</vs-dropdown>
|
|
|
|
<feather-icon :icon="$vs.rtl ? 'ChevronsRightIcon' : 'ChevronsLeftIcon'" svg-classes="h-6 w-6" class="cursor-pointer ml-4 hidden sm:inline-flex" @click="$emit('previousMail')" />
|
|
<feather-icon :icon="$vs.rtl ? 'ChevronsLeftIcon' : 'ChevronsRightIcon'" svg-classes="h-6 w-6" class="cursor-pointer ml-4 hidden sm:inline-flex" @click="$emit('nextMail')" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<component :is="scrollbarTag" class="scroll-area-mail-content md:px-8 md:pb-8 pt-4 px-6 pb-6" :settings="settings" :key="$vs.rtl">
|
|
<!-- LABEL ROW -->
|
|
<div class="vx-row">
|
|
<div class="vx-col w-full">
|
|
<div class="email__labels--single flex ml-10 items-center mt-2">
|
|
<transition-group name="list" tag="div" class="flex">
|
|
<div v-for="label in currentMail.labels" :key="label" class="open-mail-label flex items-center mr-4">
|
|
<div class="h-3 w-3 rounded-full mr-1" :class="'bg-' + labelColor(label)"></div>
|
|
<span class="text-sm">سفارش</span>
|
|
</div>
|
|
</transition-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /LABEL ROW -->
|
|
<br>
|
|
|
|
<div class="vx-row mb-4" v-if="currentMail.replies.length && !showThread">
|
|
<div class="vx-col w-full">
|
|
<span class="text-primary font-medium ml-10 cursor-pointer" @click="showThread = true">{{ currentMail.replies.length }} تیکت های قبل تر</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="isSidebarActive">
|
|
|
|
<!-- ALL MESSAGES - THREAD -->
|
|
<div class="vx-row" v-for="threadMail in currentMail.replies.slice().reverse()" :key="threadMail.id" v-if="showThread">
|
|
<div class="vx-col w-full">
|
|
<email-mail-card :mailContent="threadMail" class="mb-10" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LATEST MESSAGE -->
|
|
<div class="vx-row">
|
|
<div class="vx-col w-full">
|
|
<email-mail-card :mailContent="currentMail" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="vx-row" style="margin-top: 2.2rem">
|
|
<div class="vx-col w-full">
|
|
<vx-card>
|
|
<div class="vx-row">
|
|
<div class="vx-col w-full flex justify-between">
|
|
<span class="text-lg"><span class="text-primary font-semibold cursor-pointer">پاسخ </span> یا <span class="text-primary font-semibold cursor-pointer">ارسال</span> جواب به این تیکت</span>
|
|
<feather-icon icon="PaperclipIcon"></feather-icon>
|
|
</div>
|
|
</div>
|
|
</vx-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</component>
|
|
</div>
|
|
</vs-sidebar>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
|
|
import EmailMailCard from './TicketMailCard.vue'
|
|
|
|
export default {
|
|
props: {
|
|
emailTags: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
openMailId: {
|
|
required: true,
|
|
validator: prop => typeof prop === 'number' || prop === null
|
|
},
|
|
isSidebarActive: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
mailFilter: {
|
|
type: String
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
showThread: false,
|
|
settings: {
|
|
maxScrollbarLength: 60,
|
|
wheelSpeed: 0.50
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
isSidebarActive (value) {
|
|
if (!value) {
|
|
this.$emit('closeSidebar')
|
|
setTimeout(() => {
|
|
this.showThread = false
|
|
}, 500)
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
currentMail () {
|
|
return this.$store.getters['email/getMail'](this.openMailId)
|
|
},
|
|
labelColor () {
|
|
return (label) => {
|
|
const tags = this.$store.state.email.mailTags
|
|
return tags.find((tag) => {
|
|
return tag.value === label
|
|
}).color
|
|
}
|
|
},
|
|
currentMailLabels: {
|
|
get () {
|
|
return this.currentMail.labels
|
|
},
|
|
set (value) {
|
|
if (Array.isArray(value)) {
|
|
const payload = { mailId: this.openMailId, labels: value }
|
|
this.$store.dispatch('email/setLabels', payload)
|
|
}
|
|
}
|
|
},
|
|
scrollbarTag () { return this.$store.getters.scrollbarTag }
|
|
},
|
|
methods: {
|
|
toggleIsStarred () {
|
|
const payload = { mailId: this.openMailId, value: !this.currentMail.isStarred }
|
|
this.$store.dispatch('email/toggleIsMailStarred', payload)
|
|
},
|
|
moveTo (to) {
|
|
this.$emit('closeSidebar')
|
|
this.$emit('moveTo', to)
|
|
}
|
|
},
|
|
components: {
|
|
VuePerfectScrollbar,
|
|
EmailMailCard
|
|
},
|
|
updated () {
|
|
if (!this.currentMail) return
|
|
if (this.currentMail.unread && this.isSidebarActive) this.$store.dispatch('email/setUnread', { emailIds: [this.openMailId], unread: false })
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|