this.selectFolder(folder as any)}
- >
-
-
${label}
- ${count > 0 ? html`
${count}` : ''}
+
+
+ this.searchTerm = (e.target as any).value}
+ >
+
+
+
+ this.refreshEmails()}>
+ ${this.isLoading ? html`` : html``}
+
+
+ this.markAllAsRead()}>
+
+ Mark all read
+
+
+
+ ${this.renderEmailList()}
`;
}
@@ -293,58 +273,58 @@ export class OpsViewEmails extends DeesElement {
}
return html`
-
- ({
- 'Status': html``,
- From: email.from,
- Subject: html`${email.subject}`,
- Date: this.formatDate(email.date),
- 'Attach': html`
- ${email.attachments?.length ? html`` : ''}
- `,
- })}
- .dataActions=${[
- {
- name: 'Read',
- iconName: 'eye',
- type: ['doubleClick', 'inRow'],
- actionFunc: async (actionData) => {
- this.selectedEmail = actionData.item;
- if (!actionData.item.read) {
- this.markAsRead(actionData.item.id);
- }
- }
- },
- {
- name: 'Reply',
- iconName: 'reply',
- type: ['contextmenu'],
- actionFunc: async (actionData) => {
- this.replyToEmail(actionData.item);
- }
- },
- {
- name: 'Forward',
- iconName: 'share',
- type: ['contextmenu'],
- actionFunc: async (actionData) => {
- this.forwardEmail(actionData.item);
- }
- },
- {
- name: 'Delete',
- iconName: 'trash',
- type: ['contextmenu'],
- actionFunc: async (actionData) => {
- this.deleteEmail(actionData.item.id);
+ ({
+ 'Status': html``,
+ From: email.from,
+ Subject: html`${email.subject}`,
+ Date: this.formatDate(email.date),
+ 'Attach': html`
+ ${email.attachments?.length ? html`` : ''}
+ `,
+ })}
+ .dataActions=${[
+ {
+ name: 'Read',
+ iconName: 'eye',
+ type: ['doubleClick', 'inRow'],
+ actionFunc: async (actionData) => {
+ this.selectedEmail = actionData.item;
+ if (!actionData.item.read) {
+ this.markAsRead(actionData.item.id);
}
}
- ]}
- .selectionMode=${'single'}
- >
-
+ },
+ {
+ name: 'Reply',
+ iconName: 'reply',
+ type: ['contextmenu'],
+ actionFunc: async (actionData) => {
+ this.replyToEmail(actionData.item);
+ }
+ },
+ {
+ name: 'Forward',
+ iconName: 'share',
+ type: ['contextmenu'],
+ actionFunc: async (actionData) => {
+ this.forwardEmail(actionData.item);
+ }
+ },
+ {
+ name: 'Delete',
+ iconName: 'trash',
+ type: ['contextmenu'],
+ actionFunc: async (actionData) => {
+ this.deleteEmail(actionData.item.id);
+ }
+ }
+ ]}
+ .selectionMode=${'single'}
+ heading1=${this.selectedFolder.charAt(0).toUpperCase() + this.selectedFolder.slice(1)}
+ heading2=${`${filteredEmails.length} emails`}
+ >
`;
}
@@ -356,114 +336,136 @@ export class OpsViewEmails extends DeesElement {
${this.selectedEmail.html ?
html`
` :
- html`
${this.selectedEmail.body}`
+ html`
${this.selectedEmail.body}
`
}
-
this.selectedEmail = null}>
-
- Back
-
-
this.replyToEmail(this.selectedEmail!)}>
-
- Reply
-
-
this.replyAllToEmail(this.selectedEmail!)}>
-
- Reply All
-
-
this.forwardEmail(this.selectedEmail!)}>
-
- Forward
-
-
this.deleteEmail(this.selectedEmail!.id)} type="danger">
-
- Delete
+ this.selectedEmail = null} type="secondary">
+
+ Back to List
+
+ this.replyToEmail(this.selectedEmail!)}>
+
+ Reply
+
+ this.replyAllToEmail(this.selectedEmail!)}>
+
+ Reply All
+
+ this.forwardEmail(this.selectedEmail!)}>
+
+ Forward
+
+ this.deleteEmail(this.selectedEmail!.id)} type="danger">
+
+ Delete
+
+
{
- if (e.target === e.currentTarget) this.showCompose = false;
- }}>
-
-
-
-
+ private async openComposeModal(replyTo?: IEmail, replyAll = false, forward = false) {
+ const { DeesModal } = await import('@design.estate/dees-catalog');
+
+ await DeesModal.createAndShow({
+ heading: forward ? 'Forward Email' : replyTo ? 'Reply to Email' : 'New Email',
+ content: html`
+
+ {
+ await this.sendEmail(e.detail);
+ // Close modal after sending
+ const modals = document.querySelectorAll('dees-modal');
+ modals.forEach(m => (m as any).destroy?.());
+ }}>
+ a.indexOf(v) === i) : [replyTo.from]) : []}
+ required
+ >
+
+
+
+
+
+
+
+
+
+
+
-
- `;
+ `,
+ menuOptions: [
+ {
+ name: 'Send',
+ iconName: 'paperPlane',
+ action: async (modalArg) => {
+ const form = modalArg.shadowRoot?.querySelector('dees-form') as any;
+ form?.submit();
+ }
+ },
+ {
+ name: 'Cancel',
+ iconName: 'xmark',
+ action: async (modalArg) => await modalArg.destroy()
+ }
+ ]
+ });
}
private getFilteredEmails(): IEmail[] {
@@ -518,16 +520,15 @@ export class OpsViewEmails extends DeesElement {
}
private async sendEmail(formData: any) {
-
try {
- // TODO: Implement actual email sending
+ // TODO: Implement actual email sending via API
console.log('Sending email:', formData);
- // Add to sent folder
+ // Add to sent folder (mock)
const newEmail: IEmail = {
id: `email-${Date.now()}`,
from: 'me@dcrouter.local',
- to: formData.to,
+ to: formData.to || [],
cc: formData.cc || [],
bcc: formData.bcc || [],
subject: formData.subject,
@@ -538,13 +539,13 @@ export class OpsViewEmails extends DeesElement {
};
this.emails = [...this.emails, newEmail];
- this.showCompose = false;
- // TODO: Implement toast notification when DeesToast.show is available
+ // Show success notification
console.log('Email sent successfully');
+ // TODO: Show toast notification when interface is available
} catch (error: any) {
- // TODO: Implement toast notification when DeesToast.show is available
console.error('Failed to send email', error);
+ // TODO: Show error toast notification when interface is available
}
}
@@ -581,18 +582,15 @@ export class OpsViewEmails extends DeesElement {
}
private async replyToEmail(email: IEmail) {
- // TODO: Open compose with reply context
- this.showCompose = true;
+ this.openComposeModal(email, false, false);
}
private async replyAllToEmail(email: IEmail) {
- // TODO: Open compose with reply all context
- this.showCompose = true;
+ this.openComposeModal(email, true, false);
}
private async forwardEmail(email: IEmail) {
- // TODO: Open compose with forward context
- this.showCompose = true;
+ this.openComposeModal(email, false, true);
}
private generateMockEmails() {