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

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

@@ -21,6 +21,7 @@ import { CommonEvents } from "../../../common/events/CommonEvents";
 import Switch from "@web-atoms/web-controls/dist/basic/Switch";
 import Checkbox from "@web-atoms/web-controls/dist/basic/Checkbox";
 import ToggleButtonBar from "@web-atoms/web-controls/dist/basic/ToggleButtonBar";
+import AddMiniContactPage from "./contact/AddMiniContactPage";
 
 const css = styled.css `
 &[data-page-type=master-detail] {
@@ -151,23 +152,23 @@ export default class MailsPage extends MasterDetailPage {
 
 
         // this.actionRenderer = () => <i class="fas fa-plus" data-click-event="compose-email"/>;
-        this.actionRenderer = () => <div><PopupActionButton
-            icon="fa-solid fa-plus"
-            popup={() => <div data-click-event="none" data-click-animate="no" >
-                <MenuItem
-                    label="Compose Social"
-                    data-click-event="compose-social"
-                    />
-                <MenuItem
-                    label="Compose Basic"
-                    data-click-event="compose-email"
-                    />
-                <MenuItem
-                    label="From Template"
-                    data-click-event="compose-template"
-                    />
-            </div>}
-            /></div>;
+        // this.actionRenderer = () => <div><PopupActionButton
+        //     icon="fa-solid fa-plus"
+        //     popup={() => <div data-click-event="none" data-click-animate="no" >
+        //         <MenuItem
+        //             label="Compose Social"
+        //             data-click-event="compose-social"
+        //             />
+        //         <MenuItem
+        //             label="Compose Basic"
+        //             data-click-event="compose-email"
+        //             />
+        //         <MenuItem
+        //             label="From Template"
+        //             data-click-event="compose-template"
+        //             />
+        //     </div>}
+        //     /></div>;
         document.title = mailbox.emailAddress?.emailAddress;
         if (isMobileView) {
             this.headerRenderer = () => <div data-layout="row">
@@ -192,7 +193,15 @@ export default class MailsPage extends MasterDetailPage {
                 class="threads"
                 header={true}
                 headerRenderer={() =>
-                    <div data-font-size="smaller"><ToggleButtonBar items={types} value={Bind.sourceTwoWays(this, (x) => x.source.showBlocked)}/></div>
+                    <div data-layout="row" data-font-size="smaller">
+                        <ToggleButtonBar items={types} value={Bind.sourceTwoWays(this, (x) => x.source.showBlocked)}/>
+                        <button
+                            data-click-event="add-new-contact"
+                            data-layout="accent-icon-button">
+                            <i class="fas fa-plus"/>
+                            Add
+                        </button>
+                    </div>
                 }
                 data-list-selection="default"
                 data-items-updated-event="mails-available"
@@ -309,4 +318,15 @@ export default class MailsPage extends MasterDetailPage {
         this.selectedThread = this.mails[index];
     }
 
+    @Action({ onEvent: "add-new-contact"})
+    async addNewContact() {
+        const c = await PageNavigator.pushPageForResult(AddMiniContactPage, { mailboxID: this.parameters.id });
+        let existing = this.mails.find((x) => x.emailAddressID === c.emailAddressID);
+        if (!existing) {
+            existing = c;
+            this.mails.add(existing);
+        }
+        this.selectedThread = existing;
+    }
+
 }

package/src/web/page/mails/contact/AddMiniContactPage.tsx

@@ -0,0 +1,72 @@
+import { PopupWindowPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { EmailAddress, IEmailAddress, IMailboxContact, MailboxContact } from "../../../../model/model";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import Form from "@web-atoms/web-controls/dist/basic/Form";
+import FormField from "@web-atoms/web-controls/dist/basic/FormField";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import MailboxService from "../../../../common/pages/mailboxes/services/MailboxService";
+import DateTime from "@web-atoms/date-time/dist/DateTime";
+
+const errorForInvalidEmail = (e: string) => {
+    if(!e) {
+        return "Email address is required";
+    }
+    if(/[\s\:\/\\\#\$\%\^]/i.test(e.trim())) {
+        return "Email address cannot contain space or special characters.";
+    }
+    if (!/\@/i.test(e)) {
+        return "Invalid email address";
+    }
+    return "";
+};
+
+export default class AddMiniContactPage extends PopupWindowPage {
+
+    model: IMailboxContact = MailboxContact.create({
+        name: "",
+        emailAddressText: ""
+    });
+
+    @InjectProperty
+    private mailboxService: MailboxService;
+
+    async init() {
+        this.model.mailboxID = this.parameters.mailboxID;
+        this.title = "Add New Contact";
+        this.renderer = <div>
+            <Form>
+                <FormField
+                    label="Valid Email Address"
+                    required={true}
+                    error={Bind.oneWay(() => errorForInvalidEmail(this.model.emailAddressText))}>
+                    <input
+                        autofocus={true}
+                        placeholder="... someone@socialmail.in "
+                        value={Bind.twoWaysImmediate(() => this.model.emailAddressText)}/>
+                </FormField>
+                <FormField label="Name">
+                    <input value={Bind.twoWaysImmediate(() => this.model.name)}/>
+                </FormField>
+                <div
+                    data-layout="command-row">
+                    <button
+                        data-submit-event="add-contact"
+                        data-layout="accent-icon-button">
+                        <i class="fas fa-save"/>
+                        Add
+                    </button>
+                </div>
+            </Form>
+        </div>;
+    }
+
+    @Action({ onEvent: "add-contact", close: true })
+    async addContact() {
+        const now = DateTime.now;
+        this.model.dateCreated = now;
+        this.model.dateUpdated = now;
+        return await this.mailboxService.saveContact(this.model);
+    }
+}

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

@@ -34,11 +34,16 @@ export const renderMail = AtomControl.registerProperty("data-html", "html", (c,
     for (const iterator of descendentElementIterator(msg)) {
         if(iterator.tagName === "IMG") {
             const src = iterator.getAttribute("src");
-            if (src?.startsWith("cid:")) {
-                const cid = src.substring(4);
-                const a = mail.attachments.find((x) => x.contentID === cid);
-                if (a) {
-                    iterator.setAttribute("src", `/api/files/${a.appFileID}/${a.fileContentID}/${a.name}`);
+            if (src) {
+                if (src.startsWith("cid:")) {
+                    const cid = src.substring(4);
+                    const a = mail.attachments.find((x) => x.contentID === cid);
+                    if (a) {
+                        iterator.setAttribute("src", `/api/files/${a.appFileID}/${a.fileContentID}/${a.name}`);
+                    }
+                }
+                if (/^http\:\/\//i.test(src)) {
+                    iterator.setAttribute("src", src.substring(5));
                 }
             }
             continue;
@@ -132,6 +137,7 @@ export default class ConversationService {
         if (create && email) {
             email.recipients ??= [];
             email.mailboxes ??= [];
+            email.senderID = mailboxID;
             if (!email.mailboxes.some((m) => m.mailboxID === mailboxID)) {
                 email.mailboxes.push(MailboxEmail.create({
                     mailboxID