@social-mail/social-mail-client 1.2.13 → 1.2.15

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

@@ -0,0 +1,66 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { IPopupOptions } from "@web-atoms/core/dist/web/services/PopupService";
+import PopupButton, { MenuItem } from "@web-atoms/web-controls/dist/basic/PopupButton";
+import UploadEvent from "@web-atoms/web-controls/dist/basic/UploadEvent";
+import AtomHtmlEditor from "@web-atoms/web-controls/dist/html-editor/AtomHtmlEditor";
+
+export default function Insert({ alignment = "above" as IPopupOptions["alignment"]}) {
+    return <PopupButton
+        class="command"
+        data-layout="toolbar-button"
+        icon="fas fa-plus"
+        title="Change Alignment"
+        alignment={alignment}>
+            <MenuItem
+                icon="ri-list-unordered"
+                label="List"
+                event-click={Bind.event((editor: any) => editor.executeCommand("insertUnorderedList"))}
+                />
+            <MenuItem
+                icon="ri-list-ordered"
+                label="Numbered List"
+                event-click={Bind.event((editor: any) => editor.executeCommand("insertOrderedList"))}
+                />
+            <MenuItem
+                { ... UploadEvent.AttachUploadAction({
+                    accept: "image/*",
+                    multiple: true,
+                    extra: {}
+                })}
+                data-click-event="send-photos"
+                icon="fas fa-image"
+                label="Add Photos"
+                />
+            <MenuItem
+                { ... UploadEvent.AttachUploadAction({
+                    accept: "image/*",
+                    capture: "user",
+                    extra: {}
+                })}
+                data-click-event="take-photo"
+                icon="fa-duotone fa-camera-retro"
+                label="Take Photo"
+                />
+            <MenuItem
+                { ... UploadEvent.AttachUploadAction({
+                    accept: "video/*",
+                    multiple: false,
+                    extra: {}
+                })}
+                data-click-event="send-video"
+                icon="fas fa-file-video"
+                label="Add Video"
+                />
+            <MenuItem
+                { ... UploadEvent.AttachUploadAction({
+                    accept: "video/*",
+                    capture: "user",
+                    extra: {}
+                })}
+                data-click-event="record-video"
+                icon="fa-duotone fa-video-plus"
+                label="Record Video"
+                />
+        </PopupButton>;
+}

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, EmailRecipient, IAppFile, IEmail, IMailbox, IMailboxContact, MailboxEmail } from "../../../../model/model";
+import { AppFile, Email, EmailRecipient, IAppFile, IEmail, IMailbox, IMailboxContact, IMailboxContactEmail, MailboxEmail } 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";
@@ -16,6 +16,19 @@ import MailService from "../service/MailService";
 import DateTime from "@web-atoms/date-time/dist/DateTime";
 import SendFiles from "./SendFiles";
 import sleep from "@web-atoms/core/dist/core/sleep";
+import InlineHtmlEditorWithToolbar, { MailHtmlEditor } from "../../../../common/controls/html/InlineHtmlEditorWithToolbar";
+import InlineHtmlEditor from "@web-atoms/web-controls/dist/html-editor/InlineHtmlEditor";
+import { Toolbar } from "@web-atoms/web-controls/dist/html-editor/AtomHtmlEditor";
+import Align from "@web-atoms/web-controls/dist/html-editor/commands/Align";
+import Bold from "@web-atoms/web-controls/dist/html-editor/commands/Bold";
+import Italic from "@web-atoms/web-controls/dist/html-editor/commands/Italic";
+import StrikeThrough from "@web-atoms/web-controls/dist/html-editor/commands/StrikeThrough";
+import Underline from "@web-atoms/web-controls/dist/html-editor/commands/Underline";
+import AddLink from "@web-atoms/web-controls/dist/html-editor/commands/AddLink";
+import Unlink from "@web-atoms/web-controls/dist/html-editor/commands/Unlink";
+import Separator from "@web-atoms/web-controls/dist/html-editor/commands/Separator";
+import Insert from "./Insert";
+import TimeSpan from "@web-atoms/date-time/dist/TimeSpan";
 
 const css = styled.css `
     display: grid;
@@ -37,6 +50,7 @@ const css = styled.css `
         grid-row: 2;
         grid-column: 3;
         border-radius: 10px;
+        place-self: center;
     }
 
     & > [data-element=editor] {
@@ -65,6 +79,10 @@ export default class MiniComposeBox extends AtomControl {
     @InjectProperty
     private mailService: MailService;
 
+    private active = false;
+
+    private editor: InlineHtmlEditor;
+
     constructor(app, e) {
         super(app, e);
         this.element.className = css;
@@ -75,21 +93,37 @@ export default class MiniComposeBox extends AtomControl {
 
         await sleep(100);
 
-        this.draft = await this.conversationService.getDraft(this.mailboxContact);
+        this.draft = (await this.conversationService.getDraft(this.mailboxContact))?.email;
 
         if (this.draft) {
             this.draft.attachments ??= [];
         }
 
+        this.typedMessage = this.draft?.htmlBody
+            ? this.draft.htmlBody
+            : `<div contentEditable="true" style="background-color: white; color: black;"><p>&nbsp;</br></p></div>`;
+
         this.render(<div>
-            <i
-                data-click-event="add-media"
-                data-element="add"
-                class="fa-solid fa-plus"
-                title="Attach media"/>
-            <textarea
+            <MailHtmlEditor
+                toolbar={() => <div><Toolbar>
+                    <Insert/>
+                    <Separator/>
+                    <Bold/>
+                    <Italic/>
+                    <Underline/>
+                    <StrikeThrough/>
+                    <Align alignment="above"/>
+                    <Separator/>
+                    <AddLink/>
+                    <Unlink/>
+                    <Separator/>
+                </Toolbar></div>}
                 data-element="editor"
-                value={Bind.twoWaysImmediate(() => this.typedMessage)}/>
+                data-html-editor="email-editor"
+                presenter={Bind.presenter((c) => this.editor = c )}
+                content={`<div contentEditable="true" style="background-color: white; color: black;">${this.typedMessage}</div>`}
+                style-min-height="50px"
+                />
             <i
                 data-element="send"
                 class="fa-solid fa-microphone-lines mic"
@@ -104,7 +138,7 @@ export default class MiniComposeBox extends AtomControl {
             <AtomRepeater
                 data-element="files"
                 items={Bind.oneWay(() => this.draft?.attachments)}
-                style-display={Bind.oneWay(() => this.draft && this.draft.attachments && this.draft.attachments.length > 0)}
+                style-display={Bind.oneWay(() => this.draft && this.draft.attachments && this.draft.attachments.length > 0, false)}
                 data-layout="flex-wrap-padding"
                 itemRenderer={(item: IAppFile) => <div
                     data-layout="icon-button">
@@ -119,12 +153,8 @@ export default class MiniComposeBox extends AtomControl {
         </div>);
     }
 
-    @Action({ onEvent: "add-media"})
-    async addMedia() {
-        const files = await SendFiles.showModal<IUploadedFile[]>({});
-        this.draft ??= Email.create({
-            attachments: []
-        });
+    @Action({ onEvent: "filesAvailable"})
+    async filesAvailable({ files, extra }) {
         this.addFiles(... files);
     }
 
@@ -146,22 +176,29 @@ export default class MiniComposeBox extends AtomControl {
 
     @Action({ onEvent: "input", defer: 500, blockMultipleExecution: true })
     async onChanged() {
-        if (!this.typedMessage) {
+        if (!this.editor?.htmlTextContent) {
             return;
         }
         this.draft ??= Email.create({
             attachments: []
         });
-        this.draft.mdBody = this.typedMessage;
+        const { html , text } = this.editor.htmlTextContent;
+        this.draft.htmlBody = html;
+        this.draft.textBody = text;
         await this.save();
     }
 
+    @Action({ onEvent: CommonEvents.onEmailUnscheduled})
+    async onEmailUnscheduled(mce: IMailboxContactEmail) {
+        this.draft = mce.email;
+    }
+
     @Action({
         onEvent: "send-email"
     })
     async sendEmail() {
         this.draft.status = "scheduled";
-        this.draft.dateSent = DateTime.now;
+        this.draft.dateSent = DateTime.now.add(TimeSpan.fromSeconds(30));
         await this.mailService.send(this.draft);
         this.draft ??= Email.create({
             attachments: []

package/src/web/page/mails/service/ConversationService.tsx

@@ -135,25 +135,28 @@ export default class ConversationService {
             return email;
         }
         if (create && email) {
-            email.recipients ??= [];
-            email.mailboxes ??= [];
+            const recipients = email.recipients ??= [];
+            const mailboxes = email.mailboxes ??= [];
+            const threads = email.threadEmails ??= [];
             email.senderID = mailboxID;
-            if (!email.mailboxes.some((m) => m.mailboxID === mailboxID)) {
-                email.mailboxes.push(MailboxEmail.create({
+            email.status = "draft";
+            if (!mailboxes.some((m) => m.mailboxID === mailboxID)) {
+                mailboxes.push(MailboxEmail.create({
                     mailboxID
                 }));
             }
-            if(!email.recipients.some((r) => r.emailAddressID === emailAddressID)) {
-                email.recipients.push(EmailRecipient.create({
+            if(!recipients.some((r) => r.emailAddressID === emailAddressID)) {
+                recipients.push(EmailRecipient.create({
                     emailAddressID
                 }));
             }
-            const mce = MailboxContactEmail.create({
-                mailboxID,
-                emailAddressID,
-                email
-            });
-            await this.entityService.save(mce);
+            if (!threads.some((r) => r.mailboxID === mailboxID)) {
+                threads.push(MailboxContactEmail.create({
+                    mailboxID,
+                    emailAddressID
+                }));
+            }
+            await this.entityService.save(email);
         }
         return email;
     }
@@ -210,6 +213,14 @@ export default class ConversationService {
         return emails;
     }
 
+    async stopEmail(mce: IMailboxContactEmail) {
+        const { email } = mce;
+        email.status = "draft";
+        await this.entityService.save(email, (c) => c);
+        CommonEvents.onEmailUnscheduled.dispatchEvent(mce);
+    }
+
+
     public renderText(html: string) {
         const div = document.createElement("div");
         div.innerHTML = html;
@@ -238,9 +249,10 @@ export default class ConversationService {
     }
 
     async delete(email: IEmail) {
-        const { emailID } = email;
+        const { emailID, status } = email;
         await this.entityService.delete(Email.create({
-            emailID
+            emailID,
+            status
         }));
         CommonEvents.onDraftDeleted.dispatchEvent(email);
     }

package/src/web/page/mails/service/MailService.ts

@@ -59,6 +59,7 @@ export default class MailService {
         }
         const cloner = this.entityService.cloner(email).include((x) => x.recipients).include((x) => x.attachments).copy;
         await this.entityService.save(cloner);
+        CommonEvents.onEmailScheduled.dispatchEvent(email);
     }
 
     async deleteAttachment(file: IAppFile) {