@social-mail/social-mail-client 1.2.65 → 1.2.67

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

@@ -1,7 +1,81 @@
 import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
-import { 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";
+import AppCommands from "../../../commands/AppCommands";
+import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+import ChannelService from "../services/ChannelService";
+import InfiniteRepeater from "../../../../common/controls/repeater/InfiniteRepeater";
+import Bind from "@web-atoms/core/dist/core/Bind";
+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 `
+
+    & [data-blog-list=blog-list] {
+
+
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        & > * {
+            border: solid 1px lightgray;
+            border-radius: 5px;
+            display: inline-grid;
+            grid-template-columns: 5px 1fr auto auto 5px;
+            grid-template-rows: 5px auto auto 1fr auto 5px;
+
+            & > [data-element=bg] {
+                grid-row: 1 / span 3;
+                grid-column: 1/ span 5;
+                background-color: lightgrey;
+                z-index: -1;
+            }
+
+            & > h4, & > h6 {
+                margin-block-start: 0;
+                margin-block-end: 0;
+            }
+
+            & > [data-element=actions] {
+                grid-row: 2;
+                grid-column: 4;
+            }
+
+            & > [data-element=title] {
+                grid-row: 3;
+                grid-column: 2 / span 2;
+            }
+
+            & > [data-element=date] {
+                grid-row: 2;
+                grid-column: 3;
+            }
+
+            & > [data-element=author] {
+                grid-row: 2;
+                grid-column: 2;
+            }
+
+            & > [data-element=content] {
+                grid-row: 4;
+                grid-column: 2 / span 4;
+            }
+        }
+
+    }
+
+`.installLocal();
+
 
 export default class ChannelDetailPage extends ContentPage {
 
@@ -9,12 +83,96 @@ export default class ChannelDetailPage extends ContentPage {
 
     public mailbox: IMailbox;
 
+    public search = "";
+
+    public version = 1;
+
     @InjectProperty
     private mailboxService: MailboxService;
 
+    @InjectProperty
+    private channelService: ChannelService;
+
     async init() {
+
         this.mailbox = await this.mailboxService.get(this.parameters.id);
         this.title = `${this.mailbox.emailAddress.name || this.mailbox.name} (${this.mailbox.emailAddress.emailAddress})`;
+
+        this.headerRenderer = () => <div data-layout="header-row">
+            <input type="search" value={Bind.twoWaysImmediate(() => this.search)}/>
+            <a
+                data-click-event="route"
+                href={AppCommands.openSubscribers.displayRoute({ id: this.parameters.id})}>Subscribers</a>
+        </div>;
+
+        this.renderer = <section class={css}>
+            <AtomRepeater
+                data-blog-list="blog-list"
+                { ... InfiniteRepeater.pagedItems((start) =>
+                        (c, e, cancelToken) =>
+                            this.channelService.getMails({
+                                channelID: this.parameters.id,
+                                search: this.search,
+                                version: this.version,
+                                cancelToken
+                            })
+                    )}
+                itemRenderer={(email: IEmail) => <section data-element="blog-item">
+                <div data-element="bg"/>
+                <h4 data-element="title"
+                    text={email.subject}/>
+                <h6 data-element="date" text={DateFormats.relative.short(email.dateSent)}/>
+                <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">
+                    <LimitedText height={200}>
+                        <section { ... renderMail({ email })}/>
+                    </LimitedText>
+                </section>
+            </section>}
+                />
+        </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 { IMailboxContact, Mailbox, MailboxContact } from "../../../../model/model";
+import { Email, IEmail, IMailboxContact, Mailbox, MailboxContact } from "../../../../model/model";
 import { Sql } from "../../../../common/Sql";
 
 @DITransient({})
@@ -10,6 +10,38 @@ export default class ChannelService {
     @Inject
     private entityService: EntityService;
 
+    public async getMails({
+        channelID,
+        published = true,
+        start = 0,
+        size = 100,
+        search = "",
+        version = 0,
+        cancelToken
+    }) {
+        let q = this.entityService.query(Email);
+
+        if (channelID) {
+            q = q.where({ channelID}, (p) => (x) => x.mailboxes.some((m) => m.mailboxID === p.channelID));
+        }
+
+        if (published) {
+            q = q.where((x) => x.status === "published");
+        } else {
+            q = q.where((x) => x.status !== "published");
+        }
+
+        if (search) {
+            if (!/\%/.test(search)) {
+                search = search + "%";
+            }
+            q = q.where({ search }, (p) => (x) => Sql.text.like(x.subject, p.search));
+        }
+
+        return q.orderByDescending((x) => x.emailID)
+            .toPagedList({ start, size, cancelToken });
+    }
+
     public async getMailbox(id: number) {
         return this.entityService.query(Mailbox)
             .include((x) => x.emailAddress)
@@ -47,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/ConversationPage.tsx

@@ -288,6 +288,11 @@ export default class ConversationPage extends ContentPage {
         void InlinePopupControl.showPopup(ce.target as HTMLElement, <div
             data-click-event="none"
             data-click-animate="none">
+                { thread.email?.status === "published" &&
+                    <MenuItem
+                        icon="fas fa-delete"
+                        data-click-event="un-publish-mail"/>
+                }
                 <MenuItem
                     eventClick={() => PageNavigator.pushPage(MailDetailPage, thread.email)}
                     icon="fas fa-eye"

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

@@ -52,8 +52,9 @@ export default class MailService {
     }
 
     async send(email: IEmail) {
-        if (email.textBody) {
-            email.subject ||= email.textBody.substring(0, 80);
+        const { textBody } = email;
+        if (textBody) {
+            email.subject ||= textBody.split("\n")[0].substring(0, 80);
         }
         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));