@social-mail/social-mail-client 1.2.367 → 1.2.369

package/src/web/page/mails/ConversationPage.tsx

@@ -34,6 +34,7 @@ import { apiPath } from "../../../common/apiPath";
 import { AddIconTextButton, DeleteIconTextButton, EditIconTextButton } from "../../../common/controls/buttons/IconButton";
 import sleep from "@web-atoms/core/dist/core/sleep";
 import UnsubscribeWindow from "./unsubscribe/UnsubscribeWindow";
+import MiniComposePage from "./mini-compose/MiniComposePage";
 
 const itemCss = styled.css `
     border: solid 1px lightgray;
@@ -67,6 +68,7 @@ const itemCss = styled.css `
         }
         margin-bottom: 5px;
     }
+
 `.installLocal();
 
 
@@ -82,6 +84,10 @@ const css = styled.css `
 
         }
     }
+
+    & [data-mini-compose]  {
+        border-top: solid 1px lightgray;
+    }
 `.installLocal();
 
 let id = 1;
@@ -374,7 +380,8 @@ export default class ConversationPage extends ContentPage {
     @Action({ onEvent: "edit-draft"})
     startCompose(thread: IMailboxContactEmail = null, email = null) {
         this.footerRenderer = () => <MiniComposeBox
-            mailboxContact={thread ?? this.parameters}
+            senderID={this.parameters.mailboxID}
+            mailboxContacts={[thread ?? this.parameters]}
             draft={thread?.email ?? email}
             />;
     }
@@ -478,11 +485,11 @@ export default class ConversationPage extends ContentPage {
             data-click-event="none"
             data-click-animate="none">
                 <MenuItem
-                    eventClick={() => CommonEvents.onEmailForward.dispatchEvent(thread)}
+                    eventClick={() => this.onEmailForward(thread)}
                     label="As Inline Message"
                     />
                 <MenuItem
-                    eventClick={() => CommonEvents.onEmailForwardAsAttachment.dispatchEvent(thread)}
+                    eventClick={() => this.onEmailForward(thread, true)}
                     label="As Attachment"
                     />
             </div>, { alignment: "above"});
@@ -526,6 +533,11 @@ export default class ConversationPage extends ContentPage {
         PageNavigator.pushPage(LogsPage, { emailID });
     }
 
+    @Action({})
+    async onEmailForward(thread: IMailboxContactEmail, asAttachment = false) {
+        PageNavigator.pushPage(MiniComposePage, { thread , asAttachment });
+    }
+
     @Action({ onEvent: "react-email"})
     async reactEmail(thread: IMailboxContactEmail, ce: CustomEvent) {
         const emoji = await EmojiPicker.show<string>({

package/src/web/page/mails/mini-compose/MiniComposeBox.tsx

@@ -1,7 +1,7 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
 import styled from "@web-atoms/core/dist/style/styled";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
-import { AppFile, Email, IAppFile, IEmail, IMailboxContact, IMailboxContactEmail } from "../../../../model/model";
+import { AppFile, Email, EmailRecipient, IAppFile, IEmail, IEmailRecipient, IMailboxContact, IMailboxContactEmail } from "../../../../model/model";
 import Bind from "@web-atoms/core/dist/core/Bind";
 import Action from "@web-atoms/core/dist/view-model/Action";
 import AudioRecorder from "../../../../common/controls/audio/AudioRecorder";
@@ -36,12 +36,12 @@ import EmailLabel from "../../../../common/controls/email-recipients/EmailLabel"
 import Loader from "../../../../common/controls/Loader";
 import { descendentElementIterator } from "@web-atoms/core/dist/web/core/AtomUI";
 import TitleEditor from "@web-atoms/web-controls/dist/basic/TitleEditor";
+import EmailRecipientChips from "../../../../common/controls/email-recipients/EmailRecipientChips";
 
 const css = styled.css `
     display: grid;
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto 1fr auto;
-    border-top: solid 1px lightgray;
     max-height: 50vh;
 
     background-color: canvas;
@@ -103,12 +103,25 @@ const defaultEmailBody = `<section style="background-color: white; color: black;
 
 export default class MiniComposeBox extends AtomControl {
 
-    public mailboxContact: IMailboxContact = null;
+    public mailboxContacts: IMailboxContact[] = [];
+
+    public senderID: number = null;
 
     public draft: IEmail = null;
 
     public typedMessage: string = "";
 
+    public to = null as IEmailRecipient[];
+
+    public cc = null as IEmailRecipient[];
+    public bcc = null as IEmailRecipient[];
+
+    public showSendButton = true;
+
+    public showTo = false;
+    private showCc = false;
+    private showBcc = false;
+
     @InjectProperty
     private conversationService: ConversationService;
 
@@ -129,6 +142,7 @@ export default class MiniComposeBox extends AtomControl {
     constructor(app, e) {
         super(app, e);
         this.element.className = css;
+        this.element.setAttribute("data-mini-compose", "mini-compose");
         this.app.runAsync(() => this.init());
     }
 
@@ -146,6 +160,34 @@ export default class MiniComposeBox extends AtomControl {
             this.ensureDraft();
         }
 
+        // segregate to/cc/bcc
+        this.to ??= [];
+        this.cc ??= [];
+        this.bcc ??= [];
+        if (this.draft.recipients) {
+            for (const iterator of this.draft.recipients) {
+                if (iterator.type === "to") {
+                    this.to.add(iterator);
+                    this.showTo ||= !this.mailboxContacts?.some((x) => x.emailAddressID === iterator.emailAddressID);
+                    continue;
+                }
+                if (iterator.type === "cc") {
+                    this.showTo = true;
+                    this.showCc = true;
+                    this.cc.add(iterator);
+                    continue;
+                }
+                if (iterator.type === "bcc") {
+                    this.showTo = true;
+                    this.showCc = true;
+                    this.showBcc = true;
+                    this.bcc.add(iterator);
+                    continue;
+                }
+            }
+        }
+
+
         this.typedMessage = this.draft?.htmlBody
             ? this.draft.htmlBody
             : defaultEmailBody;
@@ -154,23 +196,61 @@ export default class MiniComposeBox extends AtomControl {
             <MailHtmlEditor
                 toolbar={() => <div>
                     <Toolbar>
-                        <Insert/>
+                        <Insert alignment={ this.showSendButton ? "above" : "below" }/>
                         <Separator/>
-                        <Attach/>
+                        <Attach alignment={ this.showSendButton ? "above" : "below" }/>
                         <Separator/>
                         <Bold/>
                         <Italic/>
                         <Underline/>
                         <StrikeThrough/>
-                        <Align alignment="above"/>
+                        <Align alignment={ this.showSendButton ? "above" : "below" }/>
                         <Separator/>
                         <AddLink/>
                         <Unlink/>
                     </Toolbar>
-                    <TitleEditor
-                        class="subject"
-                        placeholder="Subject ... "
-                        value={Bind.sourceTwoWays(this, (x) => x.source.draft.subject)}/>
+                    <div data-layout="vertical-flex-stretch-items" style-width="100%">
+                        <div data-layout="row">
+                            <TitleEditor
+                                data-flex="stretch-full"
+                                class="subject"
+                                placeholder="Subject ... "
+                                value={Bind.sourceTwoWays(this, (x) => x.source.draft.subject)}/>
+                            <i
+                                style-display={Bind.source(this, (x) => !x.source.showTo)}
+                                event-click={() => this.showTo = true} class="fas fa-angle-down"/>
+                        </div>
+                        <div data-layout="row" style-display={Bind.source(this, (x) => x.source.showTo)}>
+                            <EmailRecipientChips
+                                prompt="To"
+                                data-flex="stretch-full"
+                                items={this.to}
+                                />
+                            <label
+                                style-display={Bind.source(this, (x) => !x.source.showCc)}
+                                event-click={() => this.showCc = true}
+                                text="CC"
+                                />
+                        </div>
+                        <div data-layout="row" style-display={Bind.source(this, (x) => x.source.showCc)}>
+                            <EmailRecipientChips
+                                prompt="Cc"
+                                data-flex="stretch-full"
+                                items={this.cc}
+                                />
+                            <label
+                                style-display={Bind.source(this, (x) => !x.source.showBcc)}
+                                event-click={() => this.showBcc = true}
+                                text="BCC"
+                                />
+                        </div>
+                        <EmailRecipientChips
+                            prompt="Bcc"
+                            data-flex="stretch-full"
+                            style-display={Bind.source(this, (x) => x.source.showBcc)}
+                            items={this.bcc}
+                            />
+                    </div>
                 </div>}
                 data-element="editor"
                 data-html-editor="email-editor"
@@ -179,17 +259,17 @@ export default class MiniComposeBox extends AtomControl {
                 style-min-height="50px"
                 attachments={Bind.oneWay(() => this.draft.attachments)}
                 />
-            <i
+            { this.showSendButton && <i
                 data-element="send"
                 class="fa-solid fa-microphone-lines mic"
                 event-click={() => this.sendAudioMessage()}
-                style-display={Bind.oneWay(() => !this.typedMessage)} />
-            <i
+                style-display={Bind.oneWay(() => !this.typedMessage)} /> }
+            { this.showSendButton && <i
                 data-element="send"
                 class="fa-solid fa-angle-double-right send"
                 style-display={Bind.oneWay(() => !!this.typedMessage)}
                 data-click-event="send-email"
-            />
+            /> }
             <AtomRepeater
                 data-element="files"
                 items={Bind.oneWay(() => this.draft?.attachments)}
@@ -329,93 +409,93 @@ export default class MiniComposeBox extends AtomControl {
         this.draft = mce.email;
     }
 
-    @Action({ onEvent: CommonEvents.onEmailForward})
-    async onForwardEmail(mce: IMailboxContactEmail) {
-        if (this.draft?.emailID) {
-            await this.save(true);
-            this.draft = null;
-        }
-        this.ensureDraft();
-        const { email } = mce;
-        const { recipients } = email;
-        const to = recipients?.filter((x) => x.type === "to");
-        const cc = recipients?.filter((x) => x.type === "cc");
-        this.draft.htmlBody = DomToString(
-            <section
-            style="background-color: white; color: black;">
-            <section contentEditable="true">
-                {"\xa0"}
-                <br/>
-            </section>
-            <blockquote
-                contentEditable="false"
-                data-type="forwarded"
-                style="margin-inline-start: 20px; margin-inline-end: 0; border-left: solid 1px lightgray; padding-left: 10px;">
-                <summary><div>From: ${email.senderName} {`<${email.senderEmail.emailAddress}>`}</div>
-                    <div>
-                        { to?.length && <div>
-                            <label style="margin-right:10px;">To:</label>
-                            { ... to.map((x) => <EmailLabel recipient={x} />) }
-                        </div> }
-                        { cc?.length && <div>
-                            <label style="margin-right:10px;">CC:</label>
-                            { ... cc.map((x) => <EmailLabel recipient={x} />) }
-                        </div>}
-                        <div>
-                            <label style="margin-right:10px;">Subject:</label>
-                            <label>{email.subject}</label>
-                        </div>
-                        <div data-type="html-body">
-                            {email.htmlBody}
-                        </div>
-                    </div>
-                </summary>
-            </blockquote>
-            <footer data-social-mail-commands="emoji-bar">
-            </footer>
-        </section>);
-
-        // copy all attachments..
-        this.editor.htmlContent = this.draft.htmlBody;
-
-        const attachments = mce.email.attachments;
-        if (attachments) {
-            for (const iterator of attachments) {
-                this.draft.attachments.add(AppFile.create({
-                    ... iterator,
-                    appFileID: void 0,
-                }));
-            }
-        }
-        await this.save(!!attachments);
-    }
-
-    @Action({ onEvent: CommonEvents.onEmailForwardAsAttachment})
-    async onForwardEmailAsAttachment(mce: IMailboxContactEmail) {
-        if (this.draft?.emailID) {
-            await this.save(true);
-            this.draft = null;
-        }
-        this.ensureDraft();
-        const { email, signedFileLogID } = mce;
-        const { mimeFileID } = email;
-
-        this.draft.htmlBody = DomToString(<section
-            style="background-color: white; color: black;">
-            <section contentEditable="true">
-                {"\xa0"}
-                <br/>
-            </section>
-        </section>);
-        this.editor.htmlContent = this.draft.htmlBody;
-
-        this.draft.attachments.add(AppFile.create({
-            name: "forwarded.eml",
-            sourceEmailLogID: mimeFileID ?? signedFileLogID,
-            contentType: "message/rfc822"
-        }));
-        await this.save(true);
-    }
+    // @Action({ onEvent: CommonEvents.onEmailForward})
+    // async onForwardEmail(mce: IMailboxContactEmail) {
+    //     if (this.draft?.emailID) {
+    //         await this.save(true);
+    //         this.draft = null;
+    //     }
+    //     this.ensureDraft();
+    //     const { email } = mce;
+    //     const { recipients } = email;
+    //     const to = recipients?.filter((x) => x.type === "to");
+    //     const cc = recipients?.filter((x) => x.type === "cc");
+    //     this.draft.htmlBody = DomToString(
+    //         <section
+    //         style="background-color: white; color: black;">
+    //         <section contentEditable="true">
+    //             {"\xa0"}
+    //             <br/>
+    //         </section>
+    //         <blockquote
+    //             contentEditable="false"
+    //             data-type="forwarded"
+    //             style="margin-inline-start: 20px; margin-inline-end: 0; border-left: solid 1px lightgray; padding-left: 10px;">
+    //             <summary><div>From: ${email.senderName} {`<${email.senderEmail.emailAddress}>`}</div>
+    //                 <div>
+    //                     { to?.length && <div>
+    //                         <label style="margin-right:10px;">To:</label>
+    //                         { ... to.map((x) => <EmailLabel recipient={x} />) }
+    //                     </div> }
+    //                     { cc?.length && <div>
+    //                         <label style="margin-right:10px;">CC:</label>
+    //                         { ... cc.map((x) => <EmailLabel recipient={x} />) }
+    //                     </div>}
+    //                     <div>
+    //                         <label style="margin-right:10px;">Subject:</label>
+    //                         <label>{email.subject}</label>
+    //                     </div>
+    //                     <div data-type="html-body">
+    //                         {email.htmlBody}
+    //                     </div>
+    //                 </div>
+    //             </summary>
+    //         </blockquote>
+    //         <footer data-social-mail-commands="emoji-bar">
+    //         </footer>
+    //     </section>);
+
+    //     // copy all attachments..
+    //     this.editor.htmlContent = this.draft.htmlBody;
+
+    //     const attachments = mce.email.attachments;
+    //     if (attachments) {
+    //         for (const iterator of attachments) {
+    //             this.draft.attachments.add(AppFile.create({
+    //                 ... iterator,
+    //                 appFileID: void 0,
+    //             }));
+    //         }
+    //     }
+    //     await this.save(!!attachments);
+    // }
+
+    // @Action({ onEvent: CommonEvents.onEmailForwardAsAttachment})
+    // async onForwardEmailAsAttachment(mce: IMailboxContactEmail) {
+    //     if (this.draft?.emailID) {
+    //         await this.save(true);
+    //         this.draft = null;
+    //     }
+    //     this.ensureDraft();
+    //     const { email, signedFileLogID } = mce;
+    //     const { mimeFileID } = email;
+
+    //     this.draft.htmlBody = DomToString(<section
+    //         style="background-color: white; color: black;">
+    //         <section contentEditable="true">
+    //             {"\xa0"}
+    //             <br/>
+    //         </section>
+    //     </section>);
+    //     this.editor.htmlContent = this.draft.htmlBody;
+
+    //     this.draft.attachments.add(AppFile.create({
+    //         name: "forwarded.eml",
+    //         sourceEmailLogID: mimeFileID ?? signedFileLogID,
+    //         contentType: "message/rfc822"
+    //     }));
+    //     await this.save(true);
+    // }
 
     @Action({
         onEvent: "send-email"
@@ -440,6 +520,7 @@ export default class MiniComposeBox extends AtomControl {
         const saved = this.draft;
         this.draft = Email.create({
             subject: "",
+            senderID: this.senderID,
             htmlBody: defaultEmailBody,
             attachments: []
         });
@@ -455,6 +536,23 @@ export default class MiniComposeBox extends AtomControl {
         await this.addFiles(uploadedFile);
     }
 
+    async save(saveAttachments = true) {
+        const { prevSave, saveCancelToken } = this;
+        saveCancelToken?.cancel();
+        const ct = this.saveCancelToken = new CancelToken();
+        this.prevSave = (async () => {
+            try {
+                if (prevSave) {
+                    await prevSave;
+                }
+                this.draft.senderID = this.senderID;
+                this.draft = await this.conversationService.draft(this.draft, this.mailboxContacts , true, saveAttachments, ct);
+            } catch {
+                // ignore...
+            }
+        })().catch(console.error);
+    }
+
     private async addFiles(... files: IUploadedFile[]) {
         this.ensureDraft();
         const attachments = this.draft.attachments;
@@ -477,25 +575,25 @@ export default class MiniComposeBox extends AtomControl {
     private ensureDraft() {
         this.draft ??= Email.create({
             subject: "",
+            senderID: this.senderID,
             attachments: []
         });
         this.draft.attachments ??= [];
-    }
 
-    private async save(saveAttachments = true) {
-        const { prevSave, saveCancelToken } = this;
-        saveCancelToken?.cancel();
-        const ct = this.saveCancelToken = new CancelToken();
-        this.prevSave = (async () => {
-            try {
-                if (prevSave) {
-                    await prevSave;
+        // populate recipients
+        if (!this.draft.recipients) {
+            const recipients = this.draft.recipients = [] as IEmailRecipient[];
+            for (const iterator of this.mailboxContacts) {
+                if (recipients.some((x) => x.emailAddressID === iterator.emailAddressID)) {
+                    continue;
                 }
-                this.draft = await this.conversationService.draft({ ... this.mailboxContact, email: this.draft }, true, saveAttachments, ct);
-            } catch {
-                // ignore...
+                recipients.push(EmailRecipient.create({
+                    emailAddressID: iterator.emailAddressID,
+                    emailAddressText: iterator.emailAddress?.emailAddress ?? "",
+                    type: "to"
+                }));
             }
-        })().catch(console.error);
+        }
     }
 
 }

package/src/web/page/mails/mini-compose/MiniComposePage.tsx

@@ -0,0 +1,128 @@
+import { PopupWindowPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { AppFile, Email, IAppFile, IMailboxContactEmail } from "../../../../model/model";
+import DomToString from "@web-atoms/email-dom/dist/DomToString";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import EmailLabel from "../../../../common/controls/email-recipients/EmailLabel";
+import MiniComposeBox from "./MiniComposeBox";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { EmailIconTextButton, SaveIconTextButton } from "../../../../common/controls/buttons/IconButton";
+import Action from "@web-atoms/core/dist/view-model/Action";
+
+export default class MiniComposePage extends PopupWindowPage<{ thread: IMailboxContactEmail, asAttachment: boolean }> {
+
+    composer: MiniComposeBox;
+
+    async init() {
+
+        const { htmlBody, attachments } = this.prepareEmail();
+
+        const draft = Email.create({
+            senderID: this.parameters.thread.mailboxID,
+            htmlBody,
+            attachments
+        });
+
+        this.renderer = <div>
+            <MiniComposeBox
+                senderID={this.parameters.thread.mailboxID}
+                draft={draft}
+                to={[]}
+                mailboxContacts={[]}
+                presenter={Bind.presenter((c) => this.composer = c)}
+                showSendButton={false}
+                showTo={true}
+                />
+            <div data-layout="command-row">
+                <EmailIconTextButton
+                    event-click={() => this.save(true)}
+                    text="Send"
+                    />
+                <SaveIconTextButton
+                    event-click={() => this.save()}
+                    />
+            </div>
+        </div>;
+
+    }
+
+    @Action({ close: true })
+    async save(send = false) {
+        if (send) {
+            await this.composer.sendEmail();
+            return send;
+        }
+        await this.composer.save(true);
+        return send;
+    }
+
+    prepareEmail () {
+
+        this.title = "Forward";
+
+        let htmlBody;
+        let attachments = [] as IAppFile[];
+
+        const { thread: { email, signedFileLogID }, asAttachment } = this.parameters;
+        const { mimeFileID } = email;
+
+        if (asAttachment) {
+            htmlBody = DomToString(<section
+                style="background-color: white; color: black;">
+                <section contentEditable="true">
+                    {"\xa0"}
+                    <br/>
+                </section>
+            </section>);
+
+            attachments = [AppFile.create({
+                name: "forwarded.eml",
+                sourceEmailLogID: mimeFileID ?? signedFileLogID,
+                contentType: "message/rfc822"
+            })];
+        } else {
+            const { recipients } = email;
+            const to = recipients?.filter((x) => x.type === "to");
+            const cc = recipients?.filter((x) => x.type === "cc");
+            htmlBody = DomToString(
+                <section
+                style="background-color: white; color: black;">
+                <section contentEditable="true">
+                    {"\xa0"}
+                    <br/>
+                </section>
+                <blockquote
+                    contentEditable="false"
+                    data-type="forwarded"
+                    style="margin-inline-start: 20px; margin-inline-end: 0; border-left: solid 1px lightgray; padding-left: 10px;">
+                    <summary><div>From: {email.senderName} {`<${email.senderEmail.emailAddress}>`}</div>
+                        <div>
+                            { (to?.length) > 0 && <div>
+                                <label style="margin-right:10px;">To:</label>
+                                { ... to.map((x) => <EmailLabel recipient={x} />) }
+                            </div> }
+                            { (cc?.length > 0) && <div>
+                                <label style="margin-right:10px;">CC:</label>
+                                { ... cc.map((x) => <EmailLabel recipient={x} />) }
+                            </div>}
+                            <div>
+                                <label style="margin-right:10px;">Subject:</label>
+                                <label>{email.subject}</label>
+                            </div>
+                            <div data-type="html-body">
+                                <div innerHTML={email.htmlBody}></div>
+                            </div>
+                        </div>
+                    </summary>
+                </blockquote>
+                <footer data-social-mail-commands="emoji-bar">
+                </footer>
+            </section>);
+
+            attachments = email.attachments?.map((x) => AppFile.create({ ... x, appFileID: void 0}));
+
+            return { htmlBody, attachments };
+        }
+
+    }
+
+}