@social-mail/social-mail-client 1.2.4 → 1.2.6

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.4",
+  "version": "1.2.6",
   "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/services/files/LocalFileService.tsx

@@ -31,7 +31,7 @@ export type UploadedFiles = CustomEvent<{ files: IUploadedFile[], extra: any}>;
 
     styled.css `
         display: inline-grid;
-        grid-template-rows: auto auto;
+        grid-template-rows: auto auto auto;
 
         & > [data-element=file-name] {
             grid-row: 1;
@@ -40,15 +40,20 @@ export type UploadedFiles = CustomEvent<{ files: IUploadedFile[], extra: any}>;
             text-overflow: ellipsis;
         }
 
-        & > [data-element=progress] {
+        & > progress {
             grid-row: 2;
             width: 100%;
         }
+        & > [data-element=error] {
+            grid-row: 3;
+            width: 100%;
+        }
 
     `.installGlobal("[data-attachment-file]");
 
 export interface IFileUpload {
     name: string;
+    error?: string;
     progress?: number;
     promise?: Promise<{ appFileID }>
 }
@@ -164,23 +169,38 @@ export default class LocalFileService extends TaskManager {
         const upload = {
             total: 0,
             tasks,
-            progress:0
+            progress:0,
+            error: "",
         };
         for (const file of files) {
             upload.total += file.size;
             const uploadFile: IFileUpload = {
                 name: file.name,
+                error: "",
                 progress: 0
             };
             uploadFile.promise = this.run(async () => {
-                uploadFile.progress = 0.01;
-
-                // we will check if file exists and has same sha256?
-
-                const r = await this.uploadFile(file, extra, ct, (n) => uploadFile.progress = n);
-                upload.progress += r.file.size;
-                setTimeout(() => tasks.remove(uploadFile), 500);
-                return r;
+                let lastError: string;
+                for(let i=0; i<3; i++) {
+                    try {
+                        uploadFile.progress = 0.01;
+
+                        // we will check if file exists and has same sha256?
+
+                        const r = await this.uploadFile(file, extra, ct, (n) => uploadFile.progress = n);
+                        upload.progress += r.file.size;
+                        setTimeout(() => tasks.remove(uploadFile), 500);
+                        upload.error = "";
+                        lastError = null;
+                        return r;
+                    } catch (error) {
+                        lastError = `${file.webkitRelativePath ?? ""}/${file.name} failed to upload.\n${error.stack ?? error}`;
+                        uploadFile.error = lastError;
+                    }
+                }
+                if (lastError) {
+                    upload.error += "\n" + lastError;
+                }
             });
             tasks.push(uploadFile);
         }
@@ -231,6 +251,10 @@ class FileUploadWindow extends PopupWindow {
                             min={0}
                             max={1}
                             value={Bind.source(file, (x) => x.source.progress)}/>
+                        <div
+                            data-element="error"
+                            data-color="red"
+                            text={Bind.source(file, (x) => x.source.error)}/>
                     </div>}
                 />
         </div>);

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] {
@@ -334,4 +334,14 @@ 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);
+        this.draft = null;
+    }
 }

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

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