@social-mail/social-mail-client 1.2.66 → 1.2.68

package/src/web/page/channels/detail/ChannelDetailPage.tsx

@@ -1,5 +1,5 @@
 import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
-import { IEmail, IMailbox } from "../../../../model/model";
+import { IEmail, IMailbox, IMailboxContactEmail } from "../../../../model/model";
 import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
 import MailboxService from "../../../../common/pages/mailboxes/services/MailboxService";
 import XNode from "@web-atoms/core/dist/core/XNode";
@@ -12,6 +12,11 @@ import LimitedText from "@web-atoms/web-controls/dist/basic/LimitedText";
 import { renderMail } from "../../mails/service/ConversationService";
 import { DateFormats } from "../../../../common/date/DateFormats";
 import styled from "@web-atoms/core/dist/style/styled";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
+import InlinePopupControl from "@web-atoms/web-controls/dist/basic/InlinePopupControl";
+import { MenuItem } from "@web-atoms/web-controls/dist/basic/PopupButton";
+import MailDetailPage from "../../mails/detail/MailDetailPage";
 
 const css = styled.css `
 
@@ -80,6 +85,8 @@ export default class ChannelDetailPage extends ContentPage {
 
     public search = "";
 
+    public version = 1;
+
     @InjectProperty
     private mailboxService: MailboxService;
 
@@ -106,6 +113,7 @@ export default class ChannelDetailPage extends ContentPage {
                             this.channelService.getMails({
                                 channelID: this.parameters.id,
                                 search: this.search,
+                                version: this.version,
                                 cancelToken
                             })
                     )}
@@ -117,6 +125,7 @@ export default class ChannelDetailPage extends ContentPage {
                 <h6 data-element="author" text={email.senderName}/>
                 <i
                     data-element="actions"
+                    data-click-event="mail-options"
                     class="fa-light fa-square-ellipsis-vertical"/>
                 <section
                     data-element="content">
@@ -129,4 +138,41 @@ export default class ChannelDetailPage extends ContentPage {
         </section>;
     }
 
+    @Action({ onEvent: "mail-options"})
+    async mailOptions(email: IEmail, ce: CustomEvent) {
+        void InlinePopupControl.showPopup(ce.target as HTMLElement, <div
+            data-click-event="none"
+            data-click-animate="none">
+                { email?.status === "published" &&
+                    <MenuItem
+                        icon="fas fa-trash-can"
+                        data-click-event="delete-mail"
+                        label="Hide"/>
+                }
+                <MenuItem
+                    eventClick={() => PageNavigator.pushPage(MailDetailPage, email)}
+                    icon="fas fa-eye"
+                    label="Details"
+                    />
+                <MenuItem
+                    href={`/api/files/download/${email.originalFileID}`}
+                    icon="fas fa-download"
+                    label="Download"
+                    />
+                <MenuItem
+                    data-click-event="open-logs"
+                    icon="fa-regular fa-clock-rotate-left"
+                    label="Logs"
+                    />
+        </div>);
+    }
+
+    @Action({
+        onEvent: "delete-mail",
+        confirm: "Are you sure you want to delete this email?"
+    })
+    async deleteMail(email: IEmail) {
+        await this.channelService.deleteMail(email);
+        this.version++;
+    }
 }

package/src/web/page/channels/services/ChannelService.ts

@@ -1,7 +1,7 @@
 import DITransient from "@web-atoms/core/dist/di/DITransient";
 import { Inject } from "@web-atoms/core/dist/di/Inject";
 import EntityService from "../../../../services/EntityService";
-import { Email, IMailboxContact, Mailbox, MailboxContact } from "../../../../model/model";
+import { Email, IEmail, IMailboxContact, Mailbox, MailboxContact } from "../../../../model/model";
 import { Sql } from "../../../../common/Sql";
 
 @DITransient({})
@@ -16,6 +16,7 @@ export default class ChannelService {
         start = 0,
         size = 100,
         search = "",
+        version = 0,
         cancelToken
     }) {
         let q = this.entityService.query(Email);
@@ -78,4 +79,13 @@ export default class ChannelService {
         }
         await this.entityService.save(cloners);
     }
+
+    async deleteMail(email: IEmail) {
+        const { emailID } = email;
+        await this.entityService.save(Email.create({
+            emailID,
+            status: "deleted"
+        }));
+        email.status = "deleted";
+    }
 }

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

@@ -29,6 +29,8 @@ 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";
+import ToggleEmoji from "./ToggleEmoji";
+import { emojiBarAsText } from "../../templates/emoji-bar/EmojiBar";
 
 const css = styled.css `
     display: grid;
@@ -103,7 +105,10 @@ export default class MiniComposeBox extends AtomControl {
 
         this.typedMessage = this.draft?.htmlBody
             ? this.draft.htmlBody
-            : `<div contentEditable="true" style="background-color: white; color: black;"><p>&nbsp;</br></p></div>`;
+            : `<section style="background-color: white; color: black;">
+                <section contentEditable="true">&nbsp;</br></section>
+                ${emojiBarAsText()}
+            </section>`;
 
         this.render(<div>
             <MailHtmlEditor
@@ -119,11 +124,12 @@ export default class MiniComposeBox extends AtomControl {
                     <AddLink/>
                     <Unlink/>
                     <Separator/>
+                    <ToggleEmoji/>
                 </Toolbar></div>}
                 data-element="editor"
                 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>`}
+                content={this.typedMessage}
                 style-min-height="50px"
                 />
             <i
@@ -209,6 +215,7 @@ export default class MiniComposeBox extends AtomControl {
         const { html , text } = this.editor.htmlTextContent;
         this.draft.htmlBody = html;
         this.draft.textBody = text;
+        await this.save();
 
         this.draft.status = "scheduled";
         this.draft.dateSent = DateTime.now.add(TimeSpan.fromSeconds(30));

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

@@ -0,0 +1,24 @@
+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 { MailHtmlEditor } from "../../../../common/controls/html/InlineHtmlEditorWithToolbar";
+
+const toggleEmojiAction = Bind.event((editor: MailHtmlEditor) => {
+
+});
+
+export default function ToggleEmoji({ alignment = "above" as IPopupOptions["alignment"]}) {
+    return <PopupButton
+        class="command"
+        data-layout="toolbar-button"
+        icon="fas fa-message-smile"
+        title="Toggle Emoji"
+        alignment={alignment}>
+            <MenuItem
+                icon="ri-list-unordered"
+                label="List"
+                event-click={toggleEmojiAction}
+                />
+        </PopupButton>;
+}

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

@@ -53,8 +53,15 @@ export default class MailService {
 
     async send(email: IEmail) {
         const { textBody } = email;
-        if (textBody) {
-            email.subject ||= textBody.split("\n")[0].substring(0, 80);
+        if (textBody && !email.subject ) {
+            const lines = textBody.split("\n");
+            for (const line of lines) {
+                if (!line.trim()) {
+                    continue;
+                }
+                email.subject ||= line.substring(0, 80);
+                break;
+            }
         }
         for (const iterator of email.recipients) {
             if (iterator.emailAddressText) {

package/src/web/page/templates/emoji-bar/EmojiBar.tsx

@@ -0,0 +1,42 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { Emoji } from "../../../../services/Emoji";
+import DomToString from "@web-atoms/email-dom/dist/DomToString";
+
+const EmojiButton = ({
+    emoji,
+    command = "track",
+    title
+}) => {
+    const emojiCode = "u" + Emoji.emojiUnicode(emoji);
+    const selector = `social-button-${emojiCode}`;
+    return <a
+        class={selector}
+        style="text-decoration: none;outline: none;border:none; margin-right: 5px"
+        data-social-mail-command={command}
+        title={title}
+        data-social-mail-transform="buttons-3x"
+        data-social-mail-transform-max-image="30px"
+        data-social-mail-track={emoji}>
+        <button style="margin: 1px;padding:2px;padding-left: 5px;padding-right: 5px; border: solid 1px lightgray; border-radius: 9999px; display: inline-flex; align-items: center;">
+            {emoji} <span
+                data-social-mail-element="count"/>
+        </button>
+    </a>;
+};
+
+export const emojiBar = (addComments = true) => <table data-social-mail-component="emoji-tracker" contentEditable="false" style="width:100%">
+    <td>
+        <EmojiButton emoji="👍" title={"Like this ... "}/>
+        <EmojiButton emoji="👎" title={"Don't like this ... "}/>
+        <EmojiButton emoji="🗨️" title={"Comment ... "}/>
+    </td>
+    <td style="text-align: right">
+        <EmojiButton
+            emoji="👁️‍🗨️"
+            command="view"
+            title={"Views"}
+            />
+    </td>
+</table>;
+
+export const emojiBarAsText = (addComments = true) =>  DomToString(emojiBar(addComments));