@social-mail/social-mail-client 1.2.2 → 1.2.3

package/package.json

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

package/src/common/controls/html/InlineHtmlEditorWithToolbar.tsx

@@ -58,7 +58,7 @@ const onAttachInlineImage = async (ce: CustomEvent) => {
     reader.onload = () => {
         c.executeCommand("insertHTML", void 0, `<div><img
             data-content="data-url"
-            src="${reader.result}" style='max-height: 700px;'/>
+            src="${reader.result as any}" style='max-height: 700px;'/>
         </div>`);
     };
     reader.readAsDataURL(file);

package/src/services/files/LocalFileService.tsx

@@ -10,6 +10,8 @@ import XNode from "@web-atoms/core/dist/core/XNode";
 import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
 import Bind from "@web-atoms/core/dist/core/Bind";
 import PopupService from "@web-atoms/core/dist/web/services/PopupService";
+import { IAppFile } from "../../model/model";
+import TaskManager from "@web-atoms/entity/dist/models/TaskManager";
 
 export const acceptDocumentAndMedia = ".doc, .docx, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, video/*, application/pdf, .pdf, .txt, audio/*, image/*, .csv, text/csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain, text/html";
 
@@ -30,16 +32,9 @@ export type UploadedFiles = CustomEvent<{ files: IUploadedFile[], extra: any}>;
     styled.css `
         display: inline-grid;
         grid-template-rows: auto auto;
-        grid-template-columns: auto 1fr auto;
-
-        & > [data-element=preview] {
-            grid-row: 1 / span 2;
-            grid-column: 1;
-        }
 
         & > [data-element=file-name] {
             grid-row: 1;
-            grid-column: 2;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
@@ -47,14 +42,9 @@ export type UploadedFiles = CustomEvent<{ files: IUploadedFile[], extra: any}>;
 
         & > [data-element=progress] {
             grid-row: 2;
-            grid-column: 2 / span 2;
             width: 100%;
         }
 
-        & > [data-element=delete] {
-            grid-row: 1;
-            grid-column: 3;
-        }
     `.installGlobal("[data-attachment-file]");
 
 export interface IFileUpload {
@@ -64,12 +54,13 @@ export interface IFileUpload {
 }
 
 @DISingleton()
-export default class LocalFileService {
+export default class LocalFileService extends TaskManager {
 
     @Inject
     private app: App;
 
     constructor() {
+        super();
         document.body.addEventListener("uploadRequested", (ce: CustomEvent) => {
             const { target, detail: { files, extra, uploadEvent } } = ce;
             ce.preventDefault();
@@ -165,14 +156,35 @@ export default class LocalFileService {
         });
     }
 
-    async upload(files: File[], extra: any, ct?: CancelToken) {
-        return files.map((file) => {
+    upload(files: File[], extra: any, ct?: CancelToken) {
+
+        const { parentID } = extra;
+
+        const tasks = [] as IFileUpload[];
+        const upload = {
+            total: 0,
+            tasks,
+            progress:0
+        };
+        for (const file of files) {
+            upload.total += file.size;
             const uploadFile: IFileUpload = {
-                name: file.name
+                name: file.name,
+                progress: 0
             };
-            uploadFile.promise = this.uploadFile(file, extra, ct, (n) => uploadFile.progress = n);
-            return uploadFile;
-        });
+            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;
+            });
+            tasks.push(uploadFile);
+        }
+        return upload;
     }
 
 }
@@ -197,17 +209,27 @@ class FileUploadWindow extends PopupWindow {
             await this.requestCancel();
         }, null, { capture: true });
 
-        this.files = await this.localFileService.upload(this.parameters.files, this.parameters.extra, this.cancelToken);
+        const task = this.localFileService.upload(this.parameters.files, this.parameters.extra, this.cancelToken);
+        this.files = task.tasks;
+
+        this.footerRenderer = () => <div data-layout="command-row">
+            <progress min={0} max={task.total} value={Bind.source(task, (x) => x.source.progress)}/>
+        </div>;
 
-        this.render(<div>
+        this.render(<div
+            data-overflow="auto"
+            style-max-height="500px"
+            style-max-width="400px">
             <AtomRepeater
+                data-layout="vertical-flex-stretch-items"
                 items={this.files}
                 itemRenderer={(file) =>
                     <div data-attachment-file="file">
                         <div data-element="file-name" text={file.name}/>
                         <progress
+                            style-display={Bind.source(file, (x) => x.source.progress > 0)}
                             min={0}
-                            max={100}
+                            max={1}
                             value={Bind.source(file, (x) => x.source.progress)}/>
                     </div>}
                 />