@social-mail/social-mail-client 1.2.97 → 1.2.99

package/src/public/channel/ChannelView.tsx

@@ -1,72 +1,10 @@
 import "../../style/GlobalStyle";
 import Pack from "@web-atoms/core/dist/Pack";
-import styled from "@web-atoms/core/dist/style/styled";
 
-    styled.css `
-
-    box-sizing: border-box;
-
-    & > header {
-
-    }
-
-    & > section {
-        & [data-element=blog-item] {
-            margin: 10px;
-            border: solid 1px lightgray;
-            border-radius: 10px;
-            display: grid;
-            grid-template-columns: 1fr auto auto;
-            grid-template-rows: auto 1fr;
-
-            background-color: gray;
-
-            & > h4 {
-                grid-row: 1;
-                grid-column: 1;
-                margin-block-start: 0;
-                margin-block-end: 0;
-                padding: 10px;
-                & > a {
-                    text-decoration: none;
-                    color: white;
-                    &:hover {
-                        text-decoration: underline;
-                        color: #73ff73;
-                    }
-                }
-            }
-
-            & > h5 {
-                grid-row: 1;
-                grid-column: 2;
-                margin-block-start: 0;
-                margin-block-end: 0;
-                padding: 10px;
-            }
-            & > h6 {
-                grid-row: 1;
-                grid-column: 3;
-                margin-block-start: 0;
-                margin-block-end: 0;
-                padding: 10px;
-            }
-            & > section {
-                padding: 10px;
-                border-bottom-left-radius: 10px;
-                border-bottom-right-radius: 10px;
-                grid-row: 2;
-                grid-column: 1 / span 3;
-                background-color: canvas;
-            }
-        }
-    }
-
-    `.installGlobal("[data-blog-list=blog-list]");
 
 const url = new URL(location.href);
 (window as any).pageUrl = url;
-const { default: view } = await (/\/channels\//.test(url.pathname)
+const { default: view } = await (/\/channels\//.test(url.pathname) || url.searchParams.has("detail")
     ? import("./ChannelMessage")
     : import("./ChannelMessageList")) as any;
 

package/src/public/channel/emoji/EmojiPopup.tsx

@@ -0,0 +1,28 @@
+import WebApp from "@web-atoms/core/dist/web/WebApp";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import InlinePopup from "@web-atoms/web-controls/dist/basic/InlinePopup";
+
+declare let EmojiMart: any;
+
+export default class EmojiPopup extends InlinePopup {
+    constructor(app, e) {
+        super(app, e);
+        this.runAfterInit(() => this.app.runAsync(() => this.init()));
+    }
+
+    async init() {
+
+        await WebApp.installScript("https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js");
+
+        const picker = new EmojiMart.Picker({
+            previewPosition: "none",
+            autoFocus: true,
+            theme: "light",
+            maxFrequentRows: 2,
+            onEmojiSelect: (emoji) => this.close(emoji.native)
+        });
+
+        this.element.appendChild(picker);
+
+    }
+}

package/src/public/channel/styles/channelViewStyle.ts

@@ -0,0 +1,110 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+styled.css `
+
+box-sizing: border-box;
+
+& > header {
+
+}
+
+& > section {
+    & [data-element=blog-item] {
+        margin: 10px;
+        border: solid 1px lightgray;
+        border-radius: 10px;
+        display: grid;
+        grid-template-columns: 1fr auto auto;
+        grid-template-rows: auto 1fr auto;
+
+        background-color: gray;
+
+        & > h4 {
+            grid-row: 1;
+            grid-column: 1;
+            margin-block-start: 0;
+            margin-block-end: 0;
+            padding: 10px;
+            & > a {
+                text-decoration: none;
+                color: white;
+                &:hover {
+                    text-decoration: underline;
+                    color: #73ff73;
+                }
+            }
+        }
+
+        & > h5 {
+            grid-row: 1;
+            grid-column: 2;
+            margin-block-start: 0;
+            margin-block-end: 0;
+            padding: 10px;
+        }
+        & > h6 {
+            grid-row: 1;
+            grid-column: 3;
+            margin-block-start: 0;
+            margin-block-end: 0;
+            padding: 10px;
+        }
+        & > section {
+            padding: 10px;
+            grid-row: 2;
+            grid-column: 1 / span 3;
+            background-color: canvas;
+        }
+        & > footer {
+            padding: 10px;
+            grid-row: 3;
+            grid-column: 1/ span 3;
+            background-color: canvas;
+            border-bottom-left-radius: 10px;
+            border-bottom-right-radius: 10px;
+        }
+    }
+}
+
+`.installGlobal("[data-blog-list=blog-list]");
+
+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

@@ -9,29 +9,33 @@ import DateTime from "@web-atoms/date-time/dist/DateTime";
 @DISingleton({})
 export default class EmailContentDownloader extends TaskManager {
 
-    async download(mce: IMailboxContactEmail) {
+    download(mce: IMailboxContactEmail) {
+        return this.downloadFromUrl(mce.htmlBodyUrl, mce.email);
+    }
+
+    async downloadFromUrl(url: string, email: IEmail) {
 
         const cache = await window.caches.open("email-content-cache");
 
-        const cacheKey = new URL(mce.htmlBodyUrl, location.href);
+        const cacheKey = new URL(url, location.href);
 
         const content = await cache.match(cacheKey);
 
         if (content) {
-            return mce.email.htmlBody = await content.text();
+            return email.htmlBody = await content.text();
         }
 
         return await this.run(async () => {
 
             for(let i = 0;i<3;i++) {
                 try {
-                    const text = await FetchBuilder.get(mce.htmlBodyUrl).responseAsText();
+                    const text = await FetchBuilder.get(url).responseAsText();
                     await cache.put(cacheKey, new Response(text, {
                         headers: {
                             "cache-control": "public, max-age=86000"
                         }
                     }));
-                    return mce.email.htmlBody = text;
+                    return email.htmlBody = text;
                 } catch (error){
                     // eslint-disable-next-line no-console
                     console.error(error);

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

@@ -3,6 +3,8 @@ import { Inject } from "@web-atoms/core/dist/di/Inject";
 import EntityService from "../../../../services/EntityService";
 import { Email, IEmail, IMailboxContact, Mailbox, MailboxContact } from "../../../../model/model";
 import { Sql } from "../../../../common/Sql";
+import EmailContentDownloader from "../../../../services/email/EmailContentDownloader";
+import EngagementService from "../../mails/service/EngagementService";
 
 @DITransient({})
 export default class ChannelService {
@@ -10,6 +12,12 @@ export default class ChannelService {
     @Inject
     private entityService: EntityService;
 
+    @Inject
+    private emailContentDownloader: EmailContentDownloader;
+
+    @Inject
+    private engagementService: EngagementService;
+
     public async getMails({
         channelID,
         published = true,
@@ -38,8 +46,15 @@ export default class ChannelService {
             q = q.where({ search }, (p) => (x) => Sql.text.like(x.subject, p.search));
         }
 
-        return q.orderByDescending((x) => x.emailID)
+        const result = await q.orderByDescending((x) => x.emailID)
             .toPagedList({ start, size, cancelToken });
+        const tasks = [];
+        for (const iterator of result.items) {
+            tasks.push(this.emailContentDownloader.download(iterator));
+            tasks.push(this.engagementService.downloadEngagements(iterator));
+        }
+        await Promise.all(tasks);
+        return result;
     }
 
     public async getMailbox(id: number) {

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

@@ -28,7 +28,7 @@ import Separator from "@web-atoms/web-controls/dist/html-editor/commands/Separat
 import Insert from "./Insert";
 import TimeSpan from "@web-atoms/date-time/dist/TimeSpan";
 import ToggleEmoji from "./ToggleEmoji";
-import Attach from "./Atttach";
+import Attach from "./Attach";
 import PopupService from "@web-atoms/core/dist/web/services/PopupService";
 
 const css = styled.css `
@@ -68,6 +68,11 @@ const css = styled.css `
     }
 `.installLocal();
 
+const defaultEmailBody = `<section style="background-color: white; color: black;">
+<section contentEditable="true">&nbsp;</br></section>
+<footer data-social-mail-commands="emoji-bar"></footer>
+</section>`;
+
 export default class MiniComposeBox extends AtomControl {
 
     public mailboxContact: IMailboxContact = null;
@@ -106,10 +111,7 @@ export default class MiniComposeBox extends AtomControl {
 
         this.typedMessage = this.draft?.htmlBody
             ? this.draft.htmlBody
-            : `<section style="background-color: white; color: black;">
-                <section contentEditable="true">&nbsp;</br></section>
-                <footer data-social-mail-commands="emoji-bar"></footer>
-            </section>`;
+            : defaultEmailBody;
 
         this.render(<div>
             <MailHtmlEditor
@@ -292,7 +294,7 @@ export default class MiniComposeBox extends AtomControl {
         await this.mailService.send(this.draft);
         this.draft = Email.create({
             subject: "",
-            htmlBody: `<div contentEditable="true"><p></p><br/></div>`,
+            htmlBody: defaultEmailBody,
             attachments: []
         });
         this.editor.htmlContent = this.draft.htmlBody;

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

@@ -16,7 +16,7 @@ export default class EngagementService {
     entityService: EntityService;
 
     @Inject
-    emailContentDownloder: EmailContentDownloader;
+    emailContentDownloader: EmailContentDownloader;
 
     async downloadEngagements(email: IEmail) {
 
@@ -61,7 +61,7 @@ export default class EngagementService {
             { start, size, cacheVersion , cacheSeconds }
         );
 
-        await Promise.all(list.items.map((x) => this.emailContentDownloder.download(x)));
+        await Promise.all(list.items.map((x) => this.emailContentDownloader.download(x)));
 
         return list;
     }

package/dist/public/channel/channelViewStyle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"channelViewStyle.d.ts","sourceRoot":"","sources":["../../../src/public/channel/channelViewStyle.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,QAuCb,CAAC"}

package/dist/public/channel/channelViewStyle.js

@@ -1,53 +0,0 @@
-System.register(["@web-atoms/core/dist/style/styled"], function (_export, _context) {
-  "use strict";
-
-  var styled, channelViewStyle;
-  return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }],
-    execute: function () {
-      _export("channelViewStyle", 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());
-    }
-  };
-});
-//# sourceMappingURL=channelViewStyle.js.map

package/dist/public/channel/channelViewStyle.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["styled","_webAtomsCoreDistStyleStyled","default","execute","_export","channelViewStyle","css","installLocal"],"sources":["../../../src/public/channel/channelViewStyle.ts"],"sourcesContent":[null],"mappings":";;;;;;MAAOA,MAAM,GAAAC,4BAAA,CAAAC,OAAA;IAAA;IAAAC,OAAA,WAAAA,CAAA;MAAAC,OAAA,qBAEAC,gBAAgB,GAAGL,MAAM,CAACM,GAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC1C,CAACC,YAAY,EAAE;IAAA;EAAA;AAAA"}

package/dist/web/page/mails/mini-compose/Atttach.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Atttach.d.ts","sourceRoot":"","sources":["../../../../../src/web/page/mails/mini-compose/Atttach.tsx"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,SAAiD,EAAC;;CAAA,OA0DlF"}

package/dist/web/page/mails/mini-compose/Atttach.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Attach","alignment","XNode","create","PopupButton","class","icon","title","MenuItem","Object","assign","UploadEvent","AttachUploadAction","accept","multiple","extra","label","capture","_export","setters","_webAtomsCoreDistCoreXNode","default","_webAtomsWebControlsDistBasicPopupButton","_webAtomsWebControlsDistBasicUploadEvent","execute"],"sources":["../../../../../src/web/page/mails/mini-compose/Atttach.tsx"],"sourcesContent":[null],"mappings":";;;;EASc,SAAUA,MAAMA,CAAC;IAAEC,SAAS,GAAG;EAAqC,CAAC;IAC/E,OAAOC,KAAA,CAAAC,MAAA,CAACC,WAAW;MACfC,KAAK,EAAC,SAAS;MAAA,eACH,gBAAgB;MAC5BC,IAAI,EAAC,uBAAuB;MAC5BC,KAAK,EAAC,QAAQ;MACdN,SAAS,EAAEA;IAAS,GAChBC,KAAA,CAAAC,MAAA,CAACK,QAAQ,EAAAC,MAAA,CAAAC,MAAA,KACCC,WAAW,CAACC,kBAAkB,CAAC;MACjCC,MAAM,EAAE,SAAS;MACjBC,QAAQ,EAAE,IAAI;MACdC,KAAK,EAAE;KAEV,CAAC;MACFT,IAAI,EAAC,cAAc;MACnBU,KAAK,EAAC;IAAe,GACnB,EACNd,KAAA,CAAAC,MAAA,CAACK,QAAQ,EAAAC,MAAA,CAAAC,MAAA,KACCC,WAAW,CAACC,kBAAkB,CAAC;MACjCC,MAAM,EAAE,SAAS;MACjBI,OAAO,EAAE,MAAM;MACfF,KAAK,EAAE;KAEV,CAAC;MACFT,IAAI,EAAC,4BAA4B;MACjCU,KAAK,EAAC;IAAY,GAChB,EACNd,KAAA,CAAAC,MAAA,CAACK,QAAQ,EAAAC,MAAA,CAAAC,MAAA,KACCC,WAAW,CAACC,kBAAkB,CAAC;MACjCC,MAAM,EAAE,SAAS;MACjBC,QAAQ,EAAE,KAAK;MACfC,KAAK,EAAE;KAEV,CAAC;MACFT,IAAI,EAAC,mBAAmB;MACxBU,KAAK,EAAC;IAAc,GAClB,EACNd,KAAA,CAAAC,MAAA,CAACK,QAAQ,EAAAC,MAAA,CAAAC,MAAA,KACCC,WAAW,CAACC,kBAAkB,CAAC;MACjCC,MAAM,EAAE,SAAS;MACjBI,OAAO,EAAE,MAAM;MACfF,KAAK,EAAE;KAEV,CAAC;MACFT,IAAI,EAAC,0BAA0B;MAC/BU,KAAK,EAAC;IAAc,GAClB,EACNd,KAAA,CAAAC,MAAA,CAACK,QAAQ,EAAAC,MAAA,CAAAC,MAAA,KACCC,WAAW,CAACC,kBAAkB,CAAC;MACjCC,MAAM,EAAE,KAAK;MACbE,KAAK,EAAE;KAEV,CAAC;MACFT,IAAI,EAAC,oBAAoB;MACzBU,KAAK,EAAC,kBAAkB;MAAA,mBACR;IAAO,GACrB,CACI;EACtB;EAACE,OAAA,YA1DuBlB,MAAM;EAAA;IAAAmB,OAAA,aAAAC,0BAAA;MARvBlB,KAAK,GAAAkB,0BAAA,CAAAC,OAAA;IAAA,aAAAC,wCAAA;MAGLlB,WAAW,GAAAkB,wCAAA,CAAAD,OAAA;MAAIb,QAAQ,GAAAc,wCAAA,CAARd,QAAQ;IAAA,aAAAe,wCAAA;MACvBZ,WAAW,GAAAY,wCAAA,CAAAF,OAAA;IAAA;IAAAG,OAAA,WAAAA,CAAA;EAAA;AAAA"}

package/src/public/channel/channelViewStyle.ts

@@ -1,42 +0,0 @@
-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();