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

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

@@ -1,25 +1,38 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
 import styled from "@web-atoms/core/dist/style/styled";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
-import { AppFile, Email, EmailRecipient, IAppFile, IEmail, IMailbox, IMailboxContact, MailboxEmail } from "../../../model/model";
+import { AppFile, Email, EmailRecipient, IAppFile, IEmail, IMailbox, IMailboxContact, MailboxEmail } from "../../../../model/model";
 import Bind from "@web-atoms/core/dist/core/Bind";
 import Action from "@web-atoms/core/dist/view-model/Action";
-import AudioRecorder from "../../../common/controls/audio/AudioRecorder";
+import AudioRecorder from "../../../../common/controls/audio/AudioRecorder";
 import { Inject } from "@web-atoms/core/dist/di/Inject";
-import ConversationService from "./service/ConversationService";
-import { IUploadedFile } from "../../../services/files/LocalFileService";
+import ConversationService from "../service/ConversationService";
+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 { CommonEvents } from "../../../../common/events/CommonEvents";
+import MailService from "../service/MailService";
 import DateTime from "@web-atoms/date-time/dist/DateTime";
+import SendFiles from "./SendFiles";
+import sleep from "@web-atoms/core/dist/core/sleep";
 
 const css = styled.css `
     display: grid;
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto 1fr auto;
 
+    & > [data-element=add] {
+        grid-row: 1 / span 2;
+        grid-column: 1;
+        align-self: center;
+        font-size: larger;
+        padding: 10px;
+        background-color: white;
+        border-radius: 9999px;
+        cursor: pointer;
+    }
+
     & > [data-element=send] {
         grid-row: 2;
         grid-column: 3;
@@ -32,6 +45,10 @@ const css = styled.css `
         margin-left: 5px;
         margin-right: 5px;
     }
+    & > [data-element=files] {
+        grid-row: 3;
+        grid-column: 2;
+    }
 `.installLocal();
 
 export default class MiniComposeBox extends AtomControl {
@@ -56,9 +73,18 @@ export default class MiniComposeBox extends AtomControl {
 
     async init() {
 
+        await sleep(100);
+
         this.draft = await this.conversationService.getDraft(this.mailboxContact);
 
+        this.draft.attachments ??= [];
+
         this.render(<div>
+            <i
+                data-click-event="add-media"
+                data-element="add"
+                class="fa-solid fa-plus"
+                title="Attach media"/>
             <textarea
                 data-element="editor"
                 value={Bind.twoWaysImmediate(() => this.typedMessage)}/>
@@ -74,13 +100,41 @@ export default class MiniComposeBox extends AtomControl {
                 data-click-event="send-email"
             />
             <AtomRepeater
+                data-element="files"
                 items={Bind.oneWay(() => this.draft?.attachments)}
+                style-display={Bind.oneWay(() => this.draft && this.draft.attachments && this.draft.attachments.length > 0)}
                 data-layout="flex-wrap-padding"
-                itemRenderer={(item: IAppFile) => <div data-layout="row"><label text={item.name}/></div>}
+                itemRenderer={(item: IAppFile) => <div
+                    data-layout="icon-button">
+                    <label text={item.name}/>
+                    <i
+                        data-click-event="delete-attachment"
+                        class="fas fa-times-circle"
+                        data-cursor="pointer"
+                        data-color="red"/>
+                </div>}
                 />
         </div>);
     }
 
+    @Action({ onEvent: "add-media"})
+    async addMedia() {
+        const files = await SendFiles.showModal<IUploadedFile[]>({});
+        this.draft ??= Email.create({
+            attachments: []
+        });
+        this.addFiles(... files);
+    }
+
+    @Action({
+        onEvent: "delete-attachment",
+        confirm: "Are you sure you want to delete this attachment?"
+    })
+    async deleteAttachment(file: IAppFile) {
+        await this.mailService.deleteAttachment(file);
+        this.draft?.attachments.remove(file);
+    }
+
     @Action({ onEvent: CommonEvents.onDraftDeleted })
     async refreshDraft() {
         this.draft ??= Email.create({
@@ -119,20 +173,22 @@ export default class MiniComposeBox extends AtomControl {
             attachments: []
         });
         this.draft.mdBody = this.typedMessage;
-        this.addFile(uploadedFile);
+        this.addFiles(uploadedFile);
         await this.save();
     }
 
-    private addFile({ appFileID, url, file }: IUploadedFile) {
-        this.draft.attachments ??= [];
+    private addFiles(... files: IUploadedFile[]) {
+        const attachments = this.draft.attachments ??= [];
         AtomBinder.refreshValue(this, "draft");
-        this.draft.attachments.add(AppFile.create({
-            appFileID,
-            contentType: file.type,
-            name: file.name,
-            contentID: appFileID.toString(36),
-            url
-        }));
+        for (const { appFileID, url, file } of files) {
+            attachments.add(AppFile.create({
+                appFileID,
+                contentType: file.type,
+                name: file.name,
+                contentID: appFileID.toString(36),
+                url
+            }));
+        }
     }
 
     private async save() {

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

@@ -0,0 +1,63 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import { MenuItem } from "@web-atoms/web-controls/dist/basic/PopupButton";
+import UploadEvent from "@web-atoms/web-controls/dist/basic/UploadEvent";
+import BottomPopup from "@web-atoms/web-controls/dist/mobile-app/BottomPopup";
+import { IMailboxContact } from "../../../../model/model";
+
+export default class SendFiles extends BottomPopup {
+
+    async init() {
+        this.renderer = <div>
+            <div data-layout="vertical-flex-center-items">
+                <MenuItem
+                    { ... UploadEvent.AttachUploadAction({
+                        accept: "image/*",
+                        multiple: true,
+                        extra: {}
+                    })}
+                    data-click-event="send-photos"
+                    icon="fas fa-image"
+                    label="Send Photos"
+                    />
+                <MenuItem
+                    { ... UploadEvent.AttachUploadAction({
+                        accept: "image/*",
+                        capture: "user",
+                        extra: {}
+                    })}
+                    data-click-event="take-photo"
+                    icon="fa-duotone fa-video-plus"
+                    label="Take Photo"
+                    />
+                <MenuItem
+                    { ... UploadEvent.AttachUploadAction({
+                        accept: "video/*",
+                        multiple: false,
+                        extra: {}
+                    })}
+                    data-click-event="send-video"
+                    icon="fas fa-video"
+                    label="Send Video"
+                    />
+                <MenuItem
+                    { ... UploadEvent.AttachUploadAction({
+                        accept: "video/*",
+                        capture: "user",
+                        extra: {}
+                    })}
+                    data-click-event="record-video"
+                    icon="fa-duotone fa-video-plus"
+                    label="Record Video"
+                    />
+            </div>
+        </div>;
+    }
+
+    @Action({ onEvent: "filesAvailable"})
+    async filesAvailable({ files, extra }) {
+        this.close(files);
+        // send to compose...
+    }
+
+}

package/src/web/page/mails/service/MailService.ts

@@ -1,8 +1,9 @@
 import DISingleton from "@web-atoms/core/dist/di/DISingleton";
 import { Inject } from "@web-atoms/core/dist/di/Inject";
 import EntityService from "../../../../services/EntityService";
-import { AppFile, Email, EmailAddress, IEmail, Mailbox, MailboxContact } from "../../../../model/model";
+import { AppFile, Email, EmailAddress, IAppFile, IEmail, Mailbox, MailboxContact } from "../../../../model/model";
 import { Sql } from "../../../../common/Sql";
+import { CommonEvents } from "../../../../common/events/CommonEvents";
 
 @DISingleton()
 export default class MailService {
@@ -59,4 +60,13 @@ export default class MailService {
         const cloner = this.entityService.cloner(email).include((x) => x.recipients).include((x) => x.attachments).copy;
         await this.entityService.save(cloner);
     }
+
+    async deleteAttachment(file: IAppFile) {
+        const { appFileID } = file;
+        await this.entityService.save(AppFile.create({
+            $deleted: true,
+            appFileID
+        }));
+        CommonEvents.onFileDeleted.dispatchEvent(file);
+    }
 }

package/dist/web/page/mails/MiniComposeBox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MiniComposeBox.d.ts","sourceRoot":"","sources":["../../../../src/web/page/mails/MiniComposeBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAC5E,OAAO,EAA4C,MAAM,EAAY,eAAe,EAAgB,MAAM,sBAAsB,CAAC;AAiCjI,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,WAAW;IAE5C,cAAc,EAAE,eAAe,CAAQ;IAEvC,KAAK,EAAE,MAAM,CAAQ;IAErB,YAAY,EAAE,MAAM,CAAM;IAGjC,OAAO,CAAC,mBAAmB,CAAsB;IAGjD,OAAO,CAAC,WAAW,CAAc;gBAErB,GAAG,KAAA,EAAE,CAAC,KAAA;IAMZ,IAAI;IA4BJ,YAAY;IAOZ,SAAS;IAcT,SAAS;IAUT,gBAAgB;IAUtB,OAAO,CAAC,OAAO;YAYD,IAAI;CAIrB"}

package/dist/web/page/mails/MiniComposeBox.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["MiniComposeBox","css","_export","setters","_tslib","XNode","_webAtomsCoreDistCoreXNode","default","_webAtomsCoreDistStyleStyled","styled","_webAtomsCoreDistWebControlsAtomControl","AtomControl","_modelModel","AppFile","Email","_webAtomsCoreDistCoreBind","Bind","_webAtomsCoreDistViewModelAction","Action","_commonControlsAudioAudioRecorder","AudioRecorder","_serviceConversationService","ConversationService","_webAtomsWebControlsDistBasicAtomRepeater","AtomRepeater","_webAtomsCoreDistCoreInjectProperty","InjectProperty","_webAtomsCoreDistCoreAtomBinder","AtomBinder","_commonEventsCommonEvents","CommonEvents","_serviceMailService","MailService","_webAtomsDateTimeDistDateTime","DateTime","execute","installLocal","constructor","app","e","mailboxContact","draft","typedMessage","element","className","runAsync","init","conversationService","getDraft","render","create","value","twoWaysImmediate","class","event-click","sendAudioMessage","oneWay","items","_a","attachments","itemRenderer","item","text","name","refreshDraft","onChanged","mdBody","save","sendEmail","status","dateSent","now","mailService","send","uploadedFile","show","addFile","appFileID","url","file","_b","refreshValue","add","contentType","type","contentID","toString","Object","assign","email","__decorate","onEvent","onDraftDeleted","defer","blockMultipleExecution"],"sources":["../../../../src/web/page/mails/MiniComposeBox.tsx"],"sourcesContent":[null],"mappings":"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"}