@social-mail/social-mail-client 1.2.5 → 1.2.7

package/node_modules/@web-atoms/web-controls/index.js

@@ -0,0 +1,89 @@
+(() => {
+
+    let script = document.currentScript;
+    let src = script.src;
+    let index = src.lastIndexOf("/");
+    src = src.substring(0, index);
+
+    const loadScript = (url) => {
+        return new Promise((resolve, reject) => {
+            var script = document.createElement("script");
+            script.type = "text/javascript";
+            script.src = url;
+            var s = script;
+            s.onerror = function (e) {
+                alert(`Script ${url} failed to load`);
+                console.error(`${url} failed to load ${e.stack || e}`);
+                reject(e);
+            };
+            s.onload = s.onreadystatechange = function () {
+            if ((s.readyState && s.readyState !== "complete" && s.readyState !== "loaded")) {
+                console.error("error loading " + url);
+                reject(`error loading ${url}`);
+                return;
+            }
+            s.onload = s.onreadystatechange = null;
+                resolve();
+                s.remove();
+            };
+            document.body.appendChild(s);
+        });
+    };
+
+    const loadPackage = () => {
+
+        let package = script.getAttribute("data-package");
+        let packageRoot = script.getAttribute("data-package-root");
+        if (packageRoot === void 0 || packageRoot === null) {
+            packageRoot = src;
+        }
+        if (!package) {
+            fetch(src + "/package.json").then((x) => x.json().then((json) => {
+                script.setAttribute("data-package", json.name);
+                loadPackage();
+            }));
+            return;
+        }
+
+        const view = script.getAttribute("data-view");
+
+        const packed = JSON.parse(script.getAttribute("data-packed") ?? "true");
+        const min = JSON.parse(script.getAttribute("data-min") ?? "true");
+        const viewName = view.startsWith("@") ? view : `${package}/${view}`;
+
+        const init = ()  => {
+            const empty = () => () => null;
+    
+            AmdLoader.moduleProgress = empty;
+            const done = () => {
+                const we = document.getElementById("webAtomsLoader");
+                if (we) {
+                    we.remove();
+                }
+            };
+            UMD.setupRoot(package, packageRoot);
+            UMD.lang = "en-US";
+            const map = script.getAttribute("data-map");
+            if (map) {
+                try {
+                    for (const [key, value] of JSON.parse(map)) {
+                        UMD.map(key, value);
+                    }
+                } catch (error) {
+                    console.error(error);
+                }
+            }
+            UMD.loadView(viewName, 0).then(done);
+        }
+
+        if (!packed) {
+            init();
+            return;
+        }
+
+        const viewUrl = `${packageRoot}/${view}${packed ? ".pack" : ""}${min ? ".min" : ""}.js`;
+        loadScript(viewUrl).then(init);
+    };
+
+    loadPackage();
+})();

package/node_modules/@web-atoms/web-controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-atoms/web-controls",
-  "version": "2.4.6",
+  "version": "2.4.15",
   "description": "HTML controls for web atoms core",
   "main": "index.js",
   "scripts": {

package/node_modules/@web-atoms/web-controls/src/dev/DevHost.tsx

@@ -0,0 +1,222 @@
+import Bind from "@web-atoms/core/dist/core/Bind"
+import XNode from "@web-atoms/core/dist/core/XNode"
+import { BaseService, Get, Query } from "@web-atoms/core/dist/services/http/RestService";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import styled from "@web-atoms/core/dist/style/styled";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+
+import "@web-atoms/data-styles/data-styles";
+import { CancelToken } from "@web-atoms/core/dist/core/types";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import DISingleton from "@web-atoms/core/dist/di/DISingleton";
+import AtomRepeater from "../basic/AtomRepeater";
+import ToggleButtonBar from "../basic/ToggleButtonBar";
+
+	styled.css `
+		:root {
+			--accent-color: orangered;
+			--accent-text-color: white;
+		}
+		html, body {
+			margin: 0;
+			padding: 0;
+			font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+		}
+	`.installGlobal();
+
+	const css = styled.css `
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		display: grid;
+		grid-template-rows: auto 1fr;
+		gap: 5px;
+
+		& > header {
+			grid-row: 1;
+		}
+		& > div {
+			grid-row: 2;
+			align-items: stretch;
+			justify-self: stretch;
+			overflow: auto;
+
+			& [data-item-index]:hover {
+				background-color: lightgreen;
+			}
+		}
+	`.installLocal();
+
+const fileTypes = () => [
+	{ label: "Packed", value: "packed"},
+	{ label: "All", value: "all"}
+];
+
+const designModes = () => [
+	{ label: "Design", value: true },
+	{ label: "Live", value: false }
+];
+
+const replaceSrc = (src: string): string => {
+    src = src.split("\\").join("/");
+    const tokens = src.split("/");
+    if (tokens[0] === "src") {
+        tokens[0] = "dist";
+    }
+    return tokens.join("/");
+}
+
+const toAbsoluteUrl = (file: IFilePath, designMode?: boolean) => {
+	let url = `/_view/${replaceSrc(file.dir)}/${file.name}`;
+	if (designMode) {
+		if (url.indexOf("?") === -1) {
+			url += "?";
+		}
+		url += "&designMode=true";
+	}
+	return `${location.protocol}//${location.host}${url}`;
+};
+
+@DISingleton({})
+export class FileService extends BaseService {
+
+    public async getModules(search: string, packed: boolean, cancelToken: CancelToken) {
+        const result = await this.getRemoteModules(search, packed, cancelToken);
+        return result.files;
+    }
+
+    @Get("/flat-modules")
+    private getRemoteModules(
+        @Query("search") search: string,
+        @Query("packed") packed: boolean,
+        ct?: CancelToken): Promise<IFilePathResult> {
+        return null;
+    }
+
+}
+
+export default class AppHost extends AtomControl {
+
+	public search: string = "";
+
+	public designMode = false;
+
+	public fileType = "packed";
+
+	@InjectProperty
+	private fileService: FileService;
+
+	public async init() {
+
+		this.render(
+		<div
+			class={css}>
+			<header
+				data-layout="row"
+				data-padding="auto"
+				class="header">
+				<input
+					type="search"
+					value={Bind.twoWaysImmediate(() => this.search)}
+					placeholder="Search...">
+				</input>
+
+				<span>Mode</span>
+				<ToggleButtonBar
+					items={designModes()}
+					value={Bind.twoWays(() => this.designMode)}
+					/>
+
+				<ToggleButtonBar
+					items={fileTypes()}
+					value={Bind.twoWays(() => this.fileType)}
+					/>
+			</header>
+			<div>
+				<AtomRepeater
+					class="grid"
+					items={Bind.oneWayAsync((x, e, cancelToken) =>
+						this.getModules(this.search, this.fileType === "packed", cancelToken))}
+					for="table"
+					itemRenderer={(item: IFilePath) => <tr
+						template="itemTemplate">
+						<td>
+							<div
+								text={item.name}
+								title={item.dir}
+								style="font-weight: 500;">
+							</div>
+							<div
+								style="font-size: small;"
+								text={item.dir}>
+							</div>
+						</td>
+						<td>
+							<a
+								data-layout="accent-button"
+								data-text-decoration="none"
+								href={Bind.source(item, (x) => toAbsoluteUrl(x.source, this.designMode))}
+								target="_blank"
+								text="Open">
+							</a>
+							<i
+								class="fas fa-copy"
+								title="Copy Url"
+								style="margin: 5px; cursor: pointer;"
+								data-click-event="copy-url"
+								eventClick={() => this.copyUrl(toAbsoluteUrl(item, this.designMode))}>
+							</i>
+						</td>
+					</tr> } />
+			</div>
+		</div>
+		);
+	}
+
+	async getModules(search: string, packed: boolean, cancelToken: CancelToken) {
+		const result = await this.fileService.getModules(search, packed, cancelToken);
+		if (!result.length && packed) {
+			this.fileType = "all";
+		}
+		return result;
+	}
+
+	protected preCreate(): void {
+		super.preCreate();
+		(this.app).installStyleSheet({
+            href: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css",
+            integrity: "sha256-HtsXJanqjKTc8vVQjO4YMhiqFoXkfBsjBWcX91T1jr8=",
+            crossOrigin: "anonymous"
+        });
+		this.runAfterInit(() => this.app.runAsync(() => this.init()));
+	}
+
+    @Action({ success: "Copied successfully"})
+	protected async copyUrl(url: string) {
+        await navigator.clipboard.writeText(url);
+	}
+}
+export interface IFilePath {
+
+    name: string;
+    base: string;
+    dir: string;
+    ext: string;
+    root: string;
+    url: string;
+    hostUrl?: string;
+    package?: string;
+    visible: boolean;
+    packed?: boolean;
+    module?: string;
+
+}
+
+export interface IFilePathResult {
+
+    files: IFilePath[];
+
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -19,7 +19,7 @@
     "@web-atoms/font-awesome": "^1.0.37",
     "@web-atoms/hybrid-clr": "^1.0.21",
     "@web-atoms/module-loader": "^2.1.34",
-    "@web-atoms/web-controls": "^2.4.6",
+    "@web-atoms/web-controls": "^2.4.15",
     "reflect-metadata": "^0.1.13",
     "tinycolor2": "^1.6.0"
   },

package/src/common/events/CommonEvents.ts

@@ -1,9 +1,11 @@
 import EventScope from "@web-atoms/core/dist/core/EventScope";
-import { IMailboxContact, IMailboxContactEmail } from "../../model/model";
+import { IEmail, IMailboxContact, IMailboxContactEmail } from "../../model/model";
 
 export const CommonEvents = {
 
     onThreadMarkedAsRead: EventScope.create<IMailboxContactEmail>(),
 
-    onThreadMarkedAsBlocked: EventScope.create<IMailboxContact>()
+    onThreadMarkedAsBlocked: EventScope.create<IMailboxContact>(),
+
+    onDraftDeleted: EventScope.create<IEmail>()
 };

package/src/web/page/mails/ConversationPage.tsx

@@ -31,7 +31,7 @@ const itemCss = styled.css `
     border-radius: 10px;
     padding: 10px;
     margin-right: 20%;
-    overflow: hidden;
+    contain: content;
     position: relative;
     background-color: canvas;
     &[data-sent=true] {
@@ -81,8 +81,6 @@ export default class ConversationPage extends ContentPage {
 
     private mails: IMailboxContactEmail[] = [];
 
-    private draft: IEmail = null;
-
     private search: string = "";
     private version = 1;
 
@@ -193,11 +191,9 @@ export default class ConversationPage extends ContentPage {
             </div>
         </PopupActionButton>;
 
-        this.draft = await this.conversationService.getDraft(this.parameters);
-
         this.footerRenderer = () => <MiniComposeBox
             mailboxContact={this.parameters}
-            draft={this.draft} />;
+            />;
     }
 
     @Action({ onEvent: "click"})
@@ -334,4 +330,13 @@ export default class ConversationPage extends ContentPage {
     async unblockSender() {
         await this.conversationService.block(this.parameters);
     }
+
+    @Action({
+        onEvent: "delete-draft",
+        confirm: "Are you sure you want to delete this draft?"
+    })
+    async deleteDraft(mce: IMailboxContactEmail) {
+        await this.conversationService.delete(mce.email);
+        this.mails.remove(mce);
+    }
 }

package/src/web/page/mails/MiniComposeBox.tsx

@@ -11,6 +11,9 @@ import { IUploadedFile } from "../../../services/files/LocalFileService";
 import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
 import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
 import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder";
+import { CommonEvents } from "../../../common/events/CommonEvents";
+import MailService from "./service/MailService";
+import DateTime from "@web-atoms/date-time/dist/DateTime";
 
 const css = styled.css `
     display: grid;
@@ -42,6 +45,9 @@ export default class MiniComposeBox extends AtomControl {
     @InjectProperty
     private conversationService: ConversationService;
 
+    @InjectProperty
+    private mailService: MailService;
+
     constructor(app, e) {
         super(app, e);
         this.element.className = css;
@@ -49,6 +55,9 @@ export default class MiniComposeBox extends AtomControl {
     }
 
     async init() {
+
+        this.draft = await this.conversationService.getDraft(this.mailboxContact);
+
         this.render(<div>
             <textarea
                 data-element="editor"
@@ -62,7 +71,7 @@ export default class MiniComposeBox extends AtomControl {
                 data-element="send"
                 class="fa-solid fa-angle-double-right send"
                 style-display={Bind.oneWay(() => !!this.typedMessage)}
-                event-click={() => this.sendMessage()}
+                data-click-event="send-email"
             />
             <AtomRepeater
                 items={Bind.oneWay(() => this.draft?.attachments)}
@@ -72,6 +81,13 @@ export default class MiniComposeBox extends AtomControl {
         </div>);
     }
 
+    @Action({ onEvent: CommonEvents.onDraftDeleted })
+    async refreshDraft() {
+        this.draft ??= Email.create({
+            attachments: []
+        });
+    }
+
     @Action({ onEvent: "input", defer: 500, blockMultipleExecution: true })
     async onChanged() {
         if (!this.typedMessage) {
@@ -84,12 +100,20 @@ export default class MiniComposeBox extends AtomControl {
         await this.save();
     }
 
-    sendMessage(): any {
-        throw new Error("Method not implemented.");
+    @Action({
+        onEvent: "send-email"
+    })
+    async sendEmail() {
+        this.draft.status = "scheduled";
+        this.draft.dateSent = DateTime.now;
+        await this.mailService.send(this.draft);
+        this.draft ??= Email.create({
+            attachments: []
+        });
     }
 
     @Action({})
-    private async sendAudioMessage() {
+    async sendAudioMessage() {
         const uploadedFile = await AudioRecorder.show<IUploadedFile>();
         this.draft ??= Email.create({
             attachments: []

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

@@ -231,4 +231,12 @@ export default class ConversationService {
         CommonEvents.onThreadMarkedAsBlocked.dispatchEvent(thread);
     }
 
+    async delete(email: IEmail) {
+        const { emailID } = email;
+        await this.entityService.delete(Email.create({
+            emailID
+        }));
+        CommonEvents.onDraftDeleted.dispatchEvent(email);
+    }
+
 }