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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.98",
+  "version": "1.2.99",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/common/controls/emoji-picker/EmojiPicker.tsx

@@ -1,8 +1,6 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
 import sleep from "@web-atoms/core/dist/core/sleep";
-import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
 import WebApp from "@web-atoms/core/dist/web/WebApp";
-import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
 import BottomPopup from "@web-atoms/web-controls/dist/mobile-app/BottomPopup";
 
 declare let EmojiMart: any;
@@ -18,16 +16,6 @@ interface IEmoji {
     }[];
 }
 
-interface IEmojiMart {
-    categories: {
-        id: string;
-        emojis: string[];
-    }[];
-    emojis: {
-        [key: string]: IEmoji
-    };
-}
-
 export default class EmojiPicker extends BottomPopup {
 
     async init() {

package/src/public/channel/BlogService.ts

@@ -26,18 +26,24 @@ export default class BlogService {
     }) {
         const q = this.entityService.query(Email, "channelEmails", channelID)
             .where({ emailID }, (p) => (x) => x.emailID === p.emailID)
-            .include((x) => [x.children, x.engagements]);
-        return q.firstOrDefault();
+            .include((x) => [x.engagements]);
+        const email = await q.firstOrDefault();
+        await this.downloader.downloadFromUrl(`/api/emails/channel/content/html/${channelID}/${email.emailID}/${email.headerMessageID}`, email);
+        return email;
     }
 
     async getEmails({
         channelID = 0,
+        parentID = 0,
         search = "",
         start = 0,
         size = 10,
         cancelToken
     }) {
         let q = this.entityService.query(Email, "channelEmails", channelID);
+        if(parentID) {
+            q = q.where({ parentID}, (p) => (x) => x.parentID === p.parentID);
+        }
         if (search) {
             q = q.where({ search }, (p) => (x) => Sql.text.includes(x.textBody, p.search));
         }
@@ -49,9 +55,11 @@ export default class BlogService {
         const tasks = [];
 
         for (const email of emails.items) {
-            tasks.push(this.downloader.downloadFromUrl(`/api/emails/channel/content/html/${channelID}/${email.emailID}`, email));
-            for (const iterator of email.attachments) {
-                iterator.url = `/api/emails/channel/attachment/${channelID}/${email.emailID}/${iterator.appFileID}`;
+            tasks.push(this.downloader.downloadFromUrl(`/api/emails/channel/content/html/${channelID}/${email.emailID}/${email.headerMessageID}`, email));
+            if (email.attachments) {
+                for (const iterator of email.attachments) {
+                    iterator.url = `/api/emails/channel/attachment/${channelID}/${email.emailID}/${email.headerMessageID}/${iterator.appFileID}`;
+                }
             }
         }
         await Promise.all(tasks);

package/src/public/channel/ChannelMessage.tsx

@@ -4,10 +4,15 @@ import BlogService from "./BlogService";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import { DateFormats } from "../../common/date/DateFormats";
 import { renderMail } from "../../web/page/mails/service/ConversationService";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import EmojiPopup from "./emoji/EmojiPopup";
+import { channelViewStyle } from "./styles/channelViewStyle";
+import PopupService from "@web-atoms/core/dist/web/services/PopupService";
+import { IEmail, IMailbox } from "../../model/model";
 
 const url = (window as any).pageUrl as URL;
 
-let {1: channelID = 1, 2: emailID = 82 } = /^\/channels\/([^\/]+)\/([^\/]+)\//.exec(url.pathname) ?? {} as any;
+let {1: channelID = "1", 2: emailID = "2a" } = /^\/channels\/([^\/]+)\/([^\/]+)\//.exec(url?.pathname) ?? {} as any;
 
 channelID = parseInt(channelID, 36);
 emailID = parseInt(emailID, 36);
@@ -17,6 +22,10 @@ export default class ChannelMessage extends AtomControl {
     @InjectProperty
     blogService: BlogService;
 
+
+    private channel: IMailbox;
+    private email: IEmail;
+
     constructor(app, e = document.createElement("section")) {
         super(app, e);
         this.runAfterInit(() => this.app.runAsync(() => this.init()));
@@ -25,26 +34,69 @@ export default class ChannelMessage extends AtomControl {
     async init() {
 
         const channel = await this.blogService.getChannel(void 0, channelID, void 0);
+        this.channel = channel;
 
-        const email = await this.blogService.getEmail(emailID);
+        const email = await this.blogService.getEmail({ emailID, channelID });
+        this.email = email;
 
-        this.renderer = <section data-element="blog-item">
+        const engagements = email.engagements ?? [];
+        this.element.className = channelViewStyle;
+        this.element.setAttribute("data-blog-list", "blog-list");
+        this.element.setAttribute("data-layout", "flex-center");
+        this.renderer = <section>
             <header>
                 <div styler-display="flex" styler-gap="size-default">
                     <span text={channel.emailAddress.name}/>
                     <a href={`mailto:subscribe-${channel.emailAddress.emailAddress}?subject=subscribe`}><button>Follow</button></a>
                 </div>
             </header>
-            <h4 data-element="title">
-                <label text={email.subject}/>
-            </h4>
-            <h6 data-element="date" text={DateFormats.relative.short(email.dateSent)}/>
-            <h5 text={email.senderName}/>
-            <section
-                data-element="content">
-                <section { ... renderMail({ email })}/>
+            <section>
+                <section>
+                    <section data-element="blog-item">
+                        <h4 data-element="title">
+                            <label text={email.subject}/>
+                        </h4>
+                        <h6 data-element="date" text={DateFormats.relative.short(email.dateSent)}/>
+                        <h5 text={email.senderName}/>
+                        <section
+                            data-element="content">
+                            <section { ... renderMail({ email })}/>
+                        </section>
+                        <footer>
+                            <i
+                                data-click-event="react-email"
+                                class="fa-light fa-face-smile-plus" title="React"/>
+                            { ... engagements.map((x) =>
+                                <span
+                                    title={`View all ${x.engagement} ${x.count}`}
+                                    text={`${x.engagement} ${x.count}`}/>)}
+                        </footer>
+
+                    </section>
+                </section>
             </section>
+            <aside></aside>
+            <footer></footer>
         </section>;
     }
 
+    @Action({ onEvent: "react-email"})
+    async reactEmail(a, ce: CustomEvent) {
+        const emoji: string = await EmojiPopup.showControl(ce.target as any, { parentElement: ce.target as any});
+        const { channel, email } = this;
+        const subject = `${emoji}:${Number(email.emailID).toString(36)}:${email.headerMessageID}`;
+        await PopupService.alert({
+            message: <div data-layout="vertical-flex">
+                To engage with this conversation, please join the channel.
+                And then reply to this email with following subject.
+                <div>To: {channel.emailAddress.emailAddress}</div>
+                <div>Subject: {subject}</div>
+                <div>
+                    <a href={`mailto:${channel.emailAddress.emailAddress}?subject=${subject}&body=${emoji}`}>Email Now</a>
+                </div>
+            </div>,
+            title: "Send Email"
+        });
+    }
+
 }

package/src/public/channel/ChannelMessageList.tsx

@@ -9,9 +9,8 @@ import { DateFormats } from "../../common/date/DateFormats";
 import { IMailbox, IEmail } from "../../model/model";
 import { renderMail } from "../../web/page/mails/service/ConversationService";
 import BlogService from "./BlogService";
-import { channelViewStyle } from "./channelViewStyle";
+import { channelViewStyle } from "./styles/channelViewStyle";
 import { UrlService } from "./UrlService";
-import sleep from "@web-atoms/core/dist/core/sleep";
 
 export default class ChannelView extends AtomControl {
 
@@ -97,12 +96,12 @@ export default class ChannelView extends AtomControl {
                                     <section { ... renderMail({ email })}/>
                                 </LimitedText>
                             </section>
-                            <section>
+                            <footer>
                             { ... engagements.map((x) =>
                                 <span
                                     title={`View all ${x.engagement} ${x.count}`}
                                     text={`${x.engagement} ${x.count}`}/>)}
-                            </section>
+                            </footer>
                         </section>;
                     }}
                 />

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/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/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();