@social-mail/social-mail-client 1.2.33 → 1.2.35

package/src/public/channel/BlogService.ts

@@ -0,0 +1,50 @@
+import DISingleton from "@web-atoms/core/dist/di/DISingleton";
+import { Inject } from "@web-atoms/core/dist/di/Inject";
+import EntityService from "../../services/EntityService";
+import { Email, Mailbox } from "../../model/model";
+import { Sql } from "../../common/Sql";
+import TaskManager from "@web-atoms/entity/dist/models/TaskManager";
+import EmailContentDownloader from "../../services/email/EmailContentDownloader";
+
+@DISingleton()
+export default class BlogService {
+
+    @Inject
+    entityService: EntityService;
+
+    @Inject
+    downloader: EmailContentDownloader;
+
+    async getEmails({
+        channelID = 0,
+        search = "",
+        start = 0,
+        size = 10,
+        cancelToken
+    }) {
+        let q = this.entityService.query(Email, "channelEmails", channelID);
+        if (search) {
+            q = q.where({ search }, (p) => (x) => Sql.text.includes(x.textBody, p.search));
+        }
+        const emails = await q
+            .include((x) => [x.attachments])
+            .toPagedList({ start, size, cancelToken });
+
+        const tasks = [];
+
+        for (const iterator of emails.items) {
+            if (!iterator.htmlBody) {
+                tasks.push(this.downloader.download(iterator));
+            }
+        }
+        await Promise.all(tasks);
+        return emails;
+    }
+
+    async getChannelID(emailAddress: any) {
+        const c = await this.entityService.query(Mailbox, "channels", emailAddress)
+            .firstOrDefault();
+        return c.mailboxID;
+    }
+
+}

package/src/public/channel/ChannelView.tsx

@@ -0,0 +1,76 @@
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import "../../style/GlobalStyle";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import EntityService from "../../services/EntityService";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { channelViewStyle } from "./channelViewStyle";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+import { IEmail } from "../../model/model";
+import InfiniteRepeater from "../../common/controls/repeater/InfiniteRepeater";
+import BlogService from "./BlogService";
+import Pack from "@web-atoms/core/dist/Pack";
+import { renderMail } from "../../web/page/mails/service/ConversationService";
+
+@Pack
+export default class ChannelView extends AtomControl {
+
+    @InjectProperty
+    blogService: BlogService;
+
+    search = "";
+
+    channelID = 0;
+
+    mails = [] as IEmail[];
+
+    constructor(app, e = document.createElement("section")) {
+        super(app, e);
+        this.runAfterInit(() => this.app.runAsync(() => this.init()));
+    }
+
+    async init() {
+
+        const { channelID, emailAddress } = (window as any).socialMail ?? {};
+
+        this.channelID = channelID || (await this.blogService.getChannelID(emailAddress));
+
+        this.renderer = <div data-layout="flex-center">
+            <span text="..."/>
+        </div>;
+
+        this.element.className = channelViewStyle;
+        this.renderer = <section>
+            <header>
+                <input
+                    placeholder="Search..."
+                    value={Bind.twoWaysImmediate(() => this.search)}/>
+            </header>
+            <section>
+                <AtomRepeater
+                    items={this.mails}
+                    { ... InfiniteRepeater.pagedItems((start) =>
+                            (c, e, cancelToken) =>
+                                this.blogService.getEmails({
+                                    channelID: this.channelID,
+                                    start,
+                                    search: this.search,
+                                    cancelToken
+                                })
+                    )}
+                    itemRenderer={(email: IEmail) => {
+                        return <div>
+                            <div { ... renderMail({ email })}></div>
+                        </div>;
+                    }}
+                />
+            </section>
+            <aside>
+                <AtomRepeater
+                />
+            </aside>
+            <footer></footer>
+        </section>;
+    }
+
+}

package/src/public/channel/channelViewStyle.ts

@@ -0,0 +1,42 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+export const channelViewStyle = styled.css `
+
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+    & > header, & > footer {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 10px;
+        padding: 10px;
+        background: #FAFAFA;
+    }
+
+    @media (min-width: 900px) {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        grid-template-rows: auto 1fr auto;
+        gap: 5px;
+
+        & > header {
+            grid-row: 1;
+            grid-column: 1 / span 2;
+        }
+        & > section {
+            grid-row: 2;
+            grid-column: 1;
+        }
+        & > aside {
+            grid-row: 2;
+            grid-column: 2;
+        }
+        & > footer {
+            grid-row: 3;
+            grid-column: 1 / span 2;
+        }
+    }
+
+`.installLocal();

package/src/services/email/EmailContentDownloader.ts

@@ -0,0 +1,33 @@
+import DISingleton from "@web-atoms/core/dist/di/DISingleton";
+import TaskManager from "@web-atoms/entity/dist/models/TaskManager";
+import { IEmail } from "../../model/model";
+import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
+
+@DISingleton({})
+export default class EmailContentDownloader extends TaskManager {
+
+    async download(email: IEmail) {
+        if (email.htmlBody) {
+            return email.htmlBody;
+        }
+
+        const cache = await window.caches.open("email-content-cache");
+
+        const cacheKey = new URL(email.htmlBodyUrl, location.href);
+
+        const content = await cache.match(cacheKey);
+
+        if (content) {
+            return email.htmlBody = await content.text();
+        }
+
+        const text = await FetchBuilder.get(email.htmlBodyUrl).responseAsText();
+        await cache.put(cacheKey, new Response(text, {
+            headers: {
+                "cache-control": "public, max-age=86000"
+            }
+        }));
+        return email.htmlBody = text;
+    }
+
+}

package/src/site-editor/editor/SelectedElement.tsx

@@ -33,15 +33,25 @@ export class SelectedElement {
     private cachedStyle: CSSStyleDeclaration;
     private cachedParentStyle: CSSStyleDeclaration;
 
+    private empty = {
+        setAttribute(n,v) {
+            this[n] = v;
+        },
+        getAttribute(n) {
+            return this[n];
+        }
+    };
+
     constructor(private editor: HtmlPageEditor) {
         this.name = "";
         this.isImage = false;
-        this.mo = new MutationObserver(() => {
+        this.mo = new MutationObserver((changes) => {
             AtomBinder.refreshValue(this, "element");
             this.cachedStyle = null;
             this.cachedParentStyle = null;
             AtomBinder.refreshValue(this, "currentStyle");
             AtomBinder.refreshValue(this, "parentStyle");
+            AtomBinder.refreshValue(this, "attributes");
             for (const iterator of this.styles.values()) {
                 AtomBinder.refreshValue(iterator, "value");
                 AtomBinder.refreshValue(iterator, "custom");
@@ -116,6 +126,7 @@ export class SelectedElement {
             this.cachedParentStyle = null;
             AtomBinder.refreshValue(this, "currentStyle");
             AtomBinder.refreshValue(this, "parentStyle");
+            AtomBinder.refreshValue(this, "attributes");
             this.mo.observe(e, { attributes: true });
         }
         e = this.e;

package/src/site-editor/editor/WebSitePageEditor.tsx

@@ -6,9 +6,7 @@ import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
 import { StylerSet } from "../styler/StylerSet";
 import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
 import CloudFileService from "../../web/page/files/service/CloudFileService";
-import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
 import Action from "@web-atoms/core/dist/view-model/Action";
-import MonacoEditor from "../../code-editor/MonaoEditor";
 import CodeEditorPage from "../../code-editor/CodeEditorPage";
 
 export default class WebSitePageEditor extends HtmlPageEditor {

package/src/site-editor/properties/Properties.tsx

@@ -7,12 +7,13 @@ import SizeGroupEditor from "./groups/SizeGroupEditor";
 import SpaceGroupEditor from "./groups/SpaceGroupEditor";
 import PositionGroupEditor from "./groups/PositionGroupEditor";
 import BackgroundGroupEditor from "./groups/BackgroundGroupEditor";
+import AttributeEditor from "./groups/AttributeEditor";
 
 export default function Properties() {
 
     return <div
         data-layout="vertical-flex-stretch-items">
-
+            <AttributeEditor/>
             <LayoutEditor/>
             <SizeGroupEditor/>
             <BorderGroupEditor/>

package/src/site-editor/properties/controls/PropertyEditor.tsx

@@ -74,14 +74,16 @@ export const BindStyleCustom = AtomControl.registerProperty("data-style-property
         }
 
 
-    `.installGlobal("[data-element=expander-property-editor]")
+    `.installGlobal("[data-element=expander-property-editor]");
 
-function PropertyEditor({ label = void 0, custom = void 0, ... a }, ... nodes: XNode[]) {
+function PropertyEditor({
+    label = void 0,
+    custom = void 0, ... a }, ... nodes: XNode[]) {
     if (!label && nodes.length === 1) {
         return nodes[0];
     }
     for (const iterator of nodes) {
-        (iterator.attributes ??= {})["data-element"] = "editor";
+        (iterator.attributes ??= {})["data-element"] ??= "editor";
     }
     return <div
         data-element="property-editor"
@@ -132,3 +134,14 @@ export function NumberProperty({ label, property, ... a }: { label?: string, pro
     </PropertyEditor>;
 }
 
+export function TextProperty({ label, property, attributeName, ... a }: { label?: string, attributeName?: string, property?: StylerProperty, [key: string]: any}) {
+    return <PropertyEditor
+        label={label} { ... a}>
+        <input
+            type="text" data-element="custom"
+            { ... BindStyleValue(attributeName ?? property.key)}
+            data-flex="stretch-full"
+            />
+    </PropertyEditor>;
+}
+

package/src/site-editor/properties/groups/AttributeEditor.tsx

@@ -0,0 +1,20 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { BindEditor, BindStyleValue, ExpanderPropertyEditor, TextProperty } from "../controls/PropertyEditor";
+
+export default function AttributeEditor() {
+    return <ExpanderPropertyEditor
+        isExpanded={true}
+        label="Attributes">
+        <TextProperty
+            label="Link"
+            style-display={BindEditor.oneWay((x) => x.selection.name === "a")}
+            attributeName="href"/>
+        <TextProperty
+            label="Target"
+            style-display={BindEditor.oneWay((x) => x.selection.name === "a")}
+            attributeName="target"/>
+        <TextProperty
+            label="Tool Tip"
+            attributeName="title"/>
+    </ExpanderPropertyEditor>;
+}

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

@@ -1,9 +1,11 @@
 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 PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
 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";
+import CodeSnippetPage from "../../../../code-editor/CodeSnippetPage";
+import type { MailHtmlEditor } from "../../../../common/controls/html/InlineHtmlEditorWithToolbar";
 
 export default function Insert({ alignment = "above" as IPopupOptions["alignment"]}) {
     return <PopupButton
@@ -22,6 +24,14 @@ export default function Insert({ alignment = "above" as IPopupOptions["alignment
                 label="Numbered List"
                 event-click={Bind.event((editor: any) => editor.executeCommand("insertOrderedList"))}
                 />
+            <MenuItem
+                icon="ri-list-ordered"
+                label="Insert Code"
+                event-click={Bind.event(async (editor: MailHtmlEditor) => {
+                    const code = await PageNavigator.pushPageForResult(CodeSnippetPage);
+                    (editor as any).executeCommand("insertHTML", void 0, `<pre style="margin: 5px; border: solid 1px lightgray; padding: 10px; border-radius: 10px;" contentEditable="true" spellcheck="false">${code}</pre><br/><p contentEditable="true"></p>`);
+                })}
+                />
             <MenuItem
                 { ... UploadEvent.AttachUploadAction({
                     accept: "image/*",

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

@@ -205,13 +205,18 @@ export default class MiniComposeBox extends AtomControl {
                 return;
             }
         }
+        const { html , text } = this.editor.htmlTextContent;
+        this.draft.htmlBody = html;
+        this.draft.textBody = text;
 
         this.draft.status = "scheduled";
         this.draft.dateSent = DateTime.now.add(TimeSpan.fromSeconds(30));
         await this.mailService.send(this.draft);
         this.draft ??= Email.create({
+            htmlBody: `<div contentEditable="true"><p></p><br/></div>`,
             attachments: []
         });
+        this.editor.htmlContent = this.draft.htmlBody;
     }
 
     @Action({})

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

@@ -55,7 +55,7 @@ export const renderMail = AtomControl.registerProperty("data-html", "html", (c,
     // e.appendChild(msg);
     const shadow = e.attachShadow({ mode: "open" });
     shadow.appendChild(msg);
-    if (!thread.timeRead) {
+    if (!thread.timeRead && thread.mailboxID) {
         const timeRead = DateTime.now;
         thread.timeRead = timeRead;
         const control = AtomControl.from(e);