350 lines
17 KiB
Vue
350 lines
17 KiB
Vue
<template>
|
|
<div class="flex gap-4 h-full flex-1 w-full overflow-auto">
|
|
<div class="w-64 h-full overflow-hidden border border-surface rounded-2xl flex flex-col">
|
|
<div class="flex items-center justify-between gap-2 p-4 border-b border-surface">
|
|
<div class="text-xl font-medium leading-7 text-color">Mails</div>
|
|
<Button icon="pi pi-plus" class="w-8 h-8" />
|
|
</div>
|
|
<div class="flex-1 flex flex-col overflow-auto justify-between gap-4 pt-4 pb-4 px-4">
|
|
<div class="flex-1 overflow-auto flex flex-col gap-2">
|
|
<div v-for="(navData, i) of inboxNavs" :key="i" class="flex flex-col gap-2">
|
|
<div class="text-sm font-medium leading-5 text-surface-400 dark:text-surface-500">{{ navData.title }}</div>
|
|
<button
|
|
v-for="(nav, j) of navData.navs"
|
|
:key="j"
|
|
@click="activeInboxNav = nav.name"
|
|
:class="activeInboxNav === nav.name ? 'text-color bg-emphasis' : 'text-muted-color bg-transparent'"
|
|
class="px-4 py-2 rounded-lg flex items-center gap-2 cursor-pointer hover:bg-emphasis transition-all"
|
|
>
|
|
<i :class="nav.icon"></i>
|
|
<span class="font-medium">{{ nav.name }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="border border-surface rounded-border px-4 pb-4 pt-3 mb-4">
|
|
<div class="font-medium text-color mb-4">Free Version</div>
|
|
<ProgressBar
|
|
:value="75"
|
|
:pt="{
|
|
value: {
|
|
class: 'bg-red-600'
|
|
}
|
|
}"
|
|
>
|
|
<span class="w-full text-center text-sm font-normal text-surface-0 leading-5 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">4 days left</span>
|
|
</ProgressBar>
|
|
</div>
|
|
<Button label="Upgrade to PRO 🚀" outlined class="w-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 h-full overflow-hidden flex border border-surface rounded-2xl">
|
|
<DataTable
|
|
v-model:selection="selectedRows"
|
|
scrollable
|
|
selectionMode="multiple"
|
|
:value="tableData"
|
|
:rows="10"
|
|
:pt="{
|
|
root: {
|
|
class: 'w-full flex-1 overflow-x-auto'
|
|
},
|
|
thead: {
|
|
class: 'hidden'
|
|
},
|
|
header: {
|
|
class: 'sticky top-0 z-10'
|
|
},
|
|
column: {
|
|
bodyCell: {
|
|
class: '!border-transparent'
|
|
}
|
|
}
|
|
}"
|
|
>
|
|
<template #header>
|
|
<div class="flex xl:items-center justify-between gap-2 flex-col xl:flex-row">
|
|
<div class="flex items-center gap-2">
|
|
<Checkbox :binary="true" class="mr-1" />
|
|
<Button icon="pi pi-envelope" outlined severity="secondary" />
|
|
<Button icon="pi pi-exclamation-circle" outlined severity="secondary" />
|
|
<Button icon="pi pi-tag" outlined severity="secondary" />
|
|
<Button icon="pi pi-inbox" label="Archive" outlined severity="secondary" />
|
|
<Button icon="pi pi-trash" label="Trash" outlined severity="secondary" />
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<IconField iconPosition="left" class="w-6/12 xl:max-w-36">
|
|
<InputIcon class="pi pi-search"> </InputIcon>
|
|
<InputText v-model="search" placeholder="Search" class="w-full" />
|
|
</IconField>
|
|
<Button icon="pi pi-filter" outlined severity="secondary" />
|
|
<Divider layout="vertical" class="m-0" />
|
|
<Button icon="pi pi-refresh" outlined severity="secondary" />
|
|
<Button label="1 of 15" class="!whitespace-nowrap" outlined severity="secondary" />
|
|
<Button icon="pi pi-chevron-left" outlined severity="secondary" />
|
|
<Button icon="pi pi-chevron-right" outlined severity="secondary" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #empty>Inbox is empty.</template>
|
|
<Column selectionMode="multiple" headerStyle="width: 1rem" style="width: 1rem"></Column>
|
|
<Column field="bookmarked" header="" headerStyle="width: 1rem" style="width: 1rem; padding: 0.5rem">
|
|
<template #body="{ data }">
|
|
<div @click="data.bookmarked = !data.bookmarked" @click.stop>
|
|
<i :class="data.bookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'"></i>
|
|
</div>
|
|
</template>
|
|
</Column>
|
|
<Column field="name" header="">
|
|
<template #body="{ data }">
|
|
<div class="flex items-center">
|
|
<OverlayBadge severity="danger" class="w-fit">
|
|
<Avatar
|
|
v-bind="data.image ? { image: data.image } : { label: data.capName }"
|
|
:class="{
|
|
'bg-violet-100 text-violet-950 text-xs font-medium': !data.image
|
|
}"
|
|
class="rounded-md overflow-hidden flex"
|
|
/>
|
|
</OverlayBadge>
|
|
<div class="ml-4 leading-6 text-color font-medium">{{ data.name }}</div>
|
|
</div>
|
|
</template>
|
|
</Column>
|
|
<Column field="title" header="" style="min-width: 14rem; max-width: 20rem">
|
|
<template #body="{ data }">
|
|
<div class="truncate">
|
|
<span class="text-color leading-6 mr-2">{{ data.title }}</span>
|
|
<span class="text-muted-color leading-5 text-sm">{{ data.message }}</span>
|
|
</div>
|
|
</template>
|
|
</Column>
|
|
<Column field="type" header="" style="width: 4rem">
|
|
<template #body="{ data }">
|
|
<Tag v-if="data.type" severity="secondary" :value="data.type" class="font-medium"></Tag>
|
|
</template>
|
|
</Column>
|
|
<Column field="time" header="" style="width: 4rem">
|
|
<template #body="{ data }">
|
|
<div class="text-right text-sm leading-5 text-muted-color">{{ data.time }}</div>
|
|
</template>
|
|
</Column>
|
|
</DataTable>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Inbox',
|
|
redrawListener: null,
|
|
data() {
|
|
return {
|
|
search: '',
|
|
activeInboxNav: 'Inbox',
|
|
inboxNavs: [
|
|
{
|
|
title: 'Navigation',
|
|
navs: [
|
|
{ name: 'Inbox', icon: 'pi pi-inbox' },
|
|
{ name: 'Starry', icon: 'pi pi-star' },
|
|
{ name: 'Drafts', icon: 'pi pi-file-o' },
|
|
{ name: 'Important', icon: 'pi pi-file-import' },
|
|
{ name: 'Sent', icon: 'pi pi-send' },
|
|
{ name: 'Archive', icon: 'pi pi-inbox' },
|
|
{ name: 'Spam', icon: 'pi pi-info-circle' },
|
|
{ name: 'Trash', icon: 'pi pi-trash' }
|
|
]
|
|
},
|
|
{
|
|
title: 'Other',
|
|
navs: [
|
|
{ name: 'Security', icon: 'pi pi-tag' },
|
|
{ name: 'Update', icon: 'pi pi-tag' },
|
|
{ name: 'Marketing', icon: 'pi pi-tag' },
|
|
{ name: 'HR', icon: 'pi pi-tag' }
|
|
]
|
|
}
|
|
],
|
|
tableData: [
|
|
{
|
|
id: 1,
|
|
bookmarked: false,
|
|
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg',
|
|
active: false,
|
|
name: 'Brook Simmons',
|
|
type: 'Security',
|
|
time: '3:24 PM',
|
|
title: 'Important Account Update',
|
|
message: "Dear customer, we've made updates to enhance your account security. Please log in to review and complete the necessary steps. Thank you for choosing ABC Corporation."
|
|
},
|
|
{
|
|
id: 2,
|
|
bookmarked: false,
|
|
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
|
|
active: false,
|
|
name: 'Dianne Russell',
|
|
type: 'Update',
|
|
time: '11:24 AM',
|
|
title: 'Weekly Project Update',
|
|
message: 'Hi team, attached is the weekly project update. Kindly review the progress and come prepared for our discussion in the upcoming meeting on [Date and Time].'
|
|
},
|
|
{
|
|
id: 3,
|
|
bookmarked: true,
|
|
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg',
|
|
active: false,
|
|
name: 'Amy Elsner',
|
|
type: 'Security',
|
|
time: '9:24 AM',
|
|
title: 'Urgent: Security Alert - Account Compromise',
|
|
message: 'Dear user, we detected unauthorized access to your account. Take immediate action to secure your account. Follow the provided link to reset your password. Thank you.'
|
|
},
|
|
{
|
|
id: 4,
|
|
bookmarked: false,
|
|
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/main-avatar.png',
|
|
active: false,
|
|
name: 'Jacob Jones',
|
|
type: 'Marketing',
|
|
time: 'Jan 21',
|
|
title: 'Exclusive Offer Inside - Limited Time Only',
|
|
message: "Greetings, check out our exclusive offer! Don't miss this limited-time deal. Details enclosed in the attached flyer. Act fast; the offer expires on [Date]."
|
|
},
|
|
{
|
|
id: 5,
|
|
bookmarked: false,
|
|
image: '',
|
|
active: false,
|
|
name: 'Cameron Watson',
|
|
capName: 'CW',
|
|
type: 'HR',
|
|
time: 'Jan 15',
|
|
title: 'Employee Appreciation Event - Save the Date',
|
|
message: 'Hello team, mark your calendars for our upcoming Employee Appreciation Event on [Date]. Stay tuned for more details and get ready for a day of celebration!'
|
|
},
|
|
{
|
|
id: 6,
|
|
bookmarked: true,
|
|
image: '',
|
|
active: false,
|
|
name: 'Wade Warren',
|
|
capName: 'WW',
|
|
type: 'Invoice',
|
|
time: 'Jan 12',
|
|
title: 'Your Recent Purchase - Order Confirmation',
|
|
message: 'Hi Wade Warren, secure your spot at the XYZ Conference 2024 with early bird registration. Enjoy discounted rates until [Date].'
|
|
},
|
|
{
|
|
id: 7,
|
|
bookmarked: false,
|
|
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar7.png',
|
|
active: false,
|
|
name: 'Guy Hawkins',
|
|
type: 'Events',
|
|
time: 'Jan 11',
|
|
title: 'Early Bird Registration Open - XYZ Conference 2024',
|
|
message: ' Attention users, we have scheduled system maintenance on Jan 17. Expect minimal service disruption during this period. Thank you for your understanding.'
|
|
},
|
|
{
|
|
id: 8,
|
|
bookmarked: false,
|
|
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png',
|
|
active: false,
|
|
name: 'Annette Black',
|
|
type: '',
|
|
time: 'Jan 8',
|
|
title: 'Upcoming System Maintenance Notice',
|
|
message: "Dear valued customer, as a token of appreciation, we're offering exclusive discounts for VIP customers. Explore the savings in the attached catalog. Expires [Date]."
|
|
},
|
|
{
|
|
id: 9,
|
|
bookmarked: true,
|
|
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar10.jpg',
|
|
active: false,
|
|
name: 'Darrell Steward',
|
|
type: 'Discount',
|
|
time: 'Jan 4',
|
|
title: 'Special Discounts for VIP Customers',
|
|
message: 'Hello Darrell Steward, stay updated with our latest news and highlights in the January edition of our newsletter. Enjoy the read!'
|
|
},
|
|
{
|
|
id: 10,
|
|
bookmarked: true,
|
|
image: '',
|
|
active: false,
|
|
name: 'Jerome Bell',
|
|
capName: 'JB',
|
|
type: 'Newsletter',
|
|
time: 'Jan 2',
|
|
title: 'Monthly Newsletter - January Edition',
|
|
message: "Dear user, we've updated our Terms of Service. Please review the changes to ensure compliance. Your continued use of our services implies acceptance. Thank you."
|
|
},
|
|
{
|
|
id: 11,
|
|
bookmarked: false,
|
|
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg',
|
|
active: false,
|
|
name: 'Onyama Limba',
|
|
type: '',
|
|
time: 'Jan 2',
|
|
title: 'Exclusive Travel Packages for You',
|
|
message: 'Greetings traveler, explore our exclusive travel packages tailored just for you. Plan your next adventure with XYZ Travel. Offers valid until [Date].'
|
|
},
|
|
{
|
|
id: 12,
|
|
bookmarked: false,
|
|
image: '',
|
|
active: false,
|
|
name: 'Robert Fox',
|
|
capName: 'RF',
|
|
type: 'Invitation',
|
|
time: '12.12.2023',
|
|
title: 'Invitation to Amsterdam',
|
|
message: "Hello Robert Fox, you're invited to our upcoming webinar on Amsterdam. Join us on [Date and Time] for an insightful session. Reserve your spot now!"
|
|
},
|
|
{
|
|
id: 13,
|
|
bookmarked: true,
|
|
image: '',
|
|
active: false,
|
|
name: 'Courtney Henry',
|
|
capName: 'CH',
|
|
type: '',
|
|
time: '12.09.2023',
|
|
title: 'New Arrivals - Check Out the Latest Books',
|
|
message: 'Book enthusiasts, discover our latest arrivals! Explore the attached catalog and dive into the world of new releases. Available for purchase starting [Date].'
|
|
},
|
|
{
|
|
id: 14,
|
|
bookmarked: true,
|
|
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg',
|
|
active: false,
|
|
name: 'Arlene McCoy',
|
|
type: '',
|
|
time: '12.04.2023',
|
|
title: 'New Product Demo',
|
|
message: 'Exclusive demo of our latest product on Thursday.'
|
|
},
|
|
{
|
|
id: 15,
|
|
bookmarked: false,
|
|
image: '',
|
|
active: false,
|
|
name: 'Jerome Bell',
|
|
capName: 'JB',
|
|
type: 'Newsletter',
|
|
time: '10.01.2023',
|
|
title: 'Monthly Newsletter - January Edition',
|
|
message: "Dear user, we've updated our Terms of Service. Please review the changes to ensure compliance. Your continued use of our services implies acceptance. Thank you."
|
|
}
|
|
],
|
|
selectedRows: []
|
|
};
|
|
},
|
|
methods: {},
|
|
components: {}
|
|
};
|
|
</script>
|