@social-mail/social-mail-client 1.0.113 → 1.0.115

package/src/web/drawer/AppDrawer.tsx

@@ -48,7 +48,7 @@ export default class AppDrawer extends Drawer {
 
         this.user = SocialMailApp.user;
 
-        const { mailboxes, channels, drives } = await this.getItems();
+        const { mailboxes, channels, drives, websites } = await this.getItems();
 
         this.renderer = <div>
             <div
@@ -111,6 +111,22 @@ export default class AppDrawer extends Drawer {
                         commandLink={AppCommands.openDrives.displayRoute({})}
                     />
                 </ExpanderMenu> }
+                { websites.length && <ExpanderMenu isExpanded={true}>
+                    <MenuItem
+                        icon="fas fa-hard-drive"
+                        label="Web Sites"
+                        commandLink={null}
+                        />
+                    { ... websites.map((d) => <MenuItem
+                        commandLink={AppCommands.manageWebSite.displayRoute({ id: d.appFileID })}
+                        label={d.name}
+                        description={`${d.creator?.displayName} ${ BigInt(d.fileSize) > BigInt(0) ? "(" + toFileSize(d.fileSize) + ")" : ""}`}
+                        />)}
+                    <MenuItem
+                        label="All"
+                        commandLink={AppCommands.openWebSiteList.displayRoute({})}
+                    />
+                </ExpanderMenu> }
                 <MenuItem
                     icon="fas fa-money-check-pen"
                     label="Templates"
@@ -157,12 +173,13 @@ export default class AppDrawer extends Drawer {
     async getItems() {
         const ms = this.resolve(MailboxService);
         const fs = this.resolve(CloudFileService);
-        const [mailboxes, channels, drives] = await Promise.all([
+        const [mailboxes, channels, drives, websites] = await Promise.all([
             ms.top(),
             ms.top({ isChannel: true }),
-            fs.top()
+            fs.top(),
+            fs.top(true)
         ]);
-        return { mailboxes, channels, drives };
+        return { mailboxes, channels, drives, websites };
     }
 
     @Action({ onEvent: "user-logout"})

package/src/web/page/files/FolderPage.tsx

@@ -2,7 +2,6 @@ import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
 import { AppFile, IAppFile } from "../../../model/model";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import UploadEvent from "@web-atoms/web-controls/dist/basic/UploadEvent";
-import { acceptDocumentAndMedia } from "../../../services/files/LocalFileService";
 import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
 import TreeView from "../../../common/controls/tree/TreeView";
 import Bind from "@web-atoms/core/dist/core/Bind";

package/src/web/page/files/media/ChooseMediaPage.tsx

@@ -0,0 +1,135 @@
+import { PopupWindowPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { IAppFile } from "../../../../model/model";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { FolderTreeView } from "../../../../common/controls/tree/FileTreeView";
+import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import CloudFileService from "../service/CloudFileService";
+import styled from "@web-atoms/core/dist/style/styled";
+import { FilesDragDrop } from "../../../../common/controls/drag-drop/FilesDragDrop";
+import Action from "@web-atoms/core/dist/view-model/Action";
+
+
+const css = styled.css `
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    gap: 5px;
+    & .folder-tree {
+        grid-column: 1;
+        grid-row: 1;
+    }
+    & .file-list {
+        grid-row: 1;
+        grid-column: 2;
+        position: relative;
+        overflow: auto;
+        & > * {
+            width: 100%;
+        }
+
+        & .media-file {
+            display: inline-block;
+            max-height: 300px;
+            border: solid 5px transparent;
+            overflow: hidden;
+            cursor: pointer;
+            &:hover {
+                border-color: lightblue;
+            }
+
+
+            &[data-selected-item] {
+                border-color: green;
+            }
+        }
+
+    }
+`.installLocal();
+
+export default class ChooseMediaPage extends PopupWindowPage<{folder: IAppFile, accept: string}, { file: IAppFile, size: number }> {
+
+    public parameters;
+
+    public selectedFolder: IAppFile;
+
+    @InjectProperty
+    private cloudFileService: CloudFileService;
+
+    private search = "";
+
+    private version = 1;
+
+    private size = 700;
+
+    private selectedFile: IAppFile = null;
+
+    async init() {
+        this.title = "Choose Media";
+
+        const { accept = "image/*, video/*, audio/*" } = this.parameters;
+
+        this.selectedFolder = this.parameters.folder;
+
+        this.element.style.minWidth = "90%";
+        this.element.style.minHeight = "90%";
+
+        this.renderer = <div class={css}>
+            <FolderTreeView
+                accept={accept}
+                folderId={this.parameters.folder.appFileID}
+                selectedItem={Bind.twoWaysImmediate(() => this.selectedFolder)}
+                />
+            <div
+                class="file-list"
+                { ... FilesDragDrop({
+                    extra: Bind.oneWay(() => JSON.stringify({ parentID: this.selectedFolder?.appFileID}))
+                })}
+                >
+                <AtomRepeater
+                    selectOnClick={true}
+                    selectedItem={Bind.twoWaysImmediate(() => this.selectedFile)}
+                    header={true}
+                    headerRenderer={(item) => <div
+                        data-position="sticky-top"
+                        data-layout="header-row">
+                    </div>}
+                    items={Bind.oneWayAsync((c, e, cancelToken) =>
+                        this.cloudFileService.files({
+                            search: this.search,
+                            folder: this.selectedFolder,
+                            version: this.version,
+                            accept,
+                            cancelToken
+                        })
+                    )}
+                    itemRenderer={(item: IAppFile) => <div class="media-file">
+                        <img src={`/api/files/jpg(300)/${item.appFileID}/${item.fileContentID}/${item.name}.300.jpg`} />
+                    </div>}
+                    />
+            </div>
+        </div>;
+
+        this.footerRenderer = () => <div
+            style-display={Bind.oneWay(() => this.selectedFile !== null)}
+            data-layout="command-row">
+            <input type="range" min="100" max="2000" step="100" value={Bind.twoWaysImmediate(() => this.size)} />
+            <span text={Bind.oneWay(() => `${this.size}px`)}/>
+            <button data-click-event="select-file" text="Save"/>
+        </div>;
+
+    }
+
+    @Action({ onEvent: "select-file", close: true })
+    async selectFile() {
+        const file = this.selectedFile;
+        const size = this.size;
+        return { file, size };
+    }
+
+    @Action({ onEvent: "files-available"})
+    async onFilesUploaded() {
+        this.version++;
+    }
+
+}

package/src/web/page/files/service/CloudFileService.ts

@@ -15,10 +15,14 @@ export default class CloudFileService {
     @Inject
     private entityService: EntityService;
 
-    async top() {
+    async top(site: boolean = false) {
         const userID = SocialMailApp.user.userID;
-        const top = await this.entityService.query(AppFile)
-            .where((x) => x.isFolder === true && x.parentID === null && x.path !== null)
+        let q = this.entityService.query(AppFile)
+            .where((x) => x.isFolder === true && x.parentID === null && x.path !== null);
+        q = site
+            ? q.where((x) => x.websiteFolder.folderID !== null)
+            : q.where((x) => x.websiteFolder.folderID === null);
+        const top = await q
             .orderByDescending({userID} , (p) => (x) => x.userPins.some((s) => p.userID === s.userID))
             .thenByDescending((x) => x.dateUpdated)
             .include((x) => x.creator)
@@ -58,15 +62,29 @@ export default class CloudFileService {
             .toArray();
 
         return all.filter((x) => !x.parentID);
-}
+    }
+
+    async getFolder(id, cancelToken = null) {
+        const folder = await this.entityService.query(AppFile)
+            .where({id}, (p) => (x) => x.appFileID === p.id)
+            .include((x) => x.creator)
+            .include((x) => x.children)
+            .firstOrDefault({ cancelToken });
+        if (folder.children) {
+            folder.children.remove((x) => !x.isFolder);
+        } else {
+            folder.children = [];
+        }
+        return folder;
+    }
 
-    async root({ id, templates = false}) {
+    async root({ id, templates = false, cancelToken = null}) {
 
         if (templates) {
 
             const children = await this.entityService.query(AppFile)
                 .where((x) => x.templates.some((c) => true))
-                .toArray();
+                .toArray({ cancelToken });
 
             const root = AppFile.create({
                 name: "Templates",
@@ -82,7 +100,7 @@ export default class CloudFileService {
             .where({id}, (p) => (x) => x.appFileID === p.id)
             .include((x) => x.creator)
             .include((x) => x.children)
-            .firstOrDefault();
+            .firstOrDefault({ cancelToken });
     }
 
     async rootFolders() {
@@ -129,10 +147,11 @@ export default class CloudFileService {
 
     async files({
         search = "",
+        accept = "",
         folder,
         cancelToken,
         showDeleted = false
-    }: { search: string, folder: IAppFile, cancelToken: CancelToken, version?: any, showDeleted?: boolean}) {
+    }: { search: string, accept?: string, folder: IAppFile, cancelToken: CancelToken, version?: any, showDeleted?: boolean}) {
         const parentID = folder?.appFileID;
 
         if (!parentID) {
@@ -147,6 +166,12 @@ export default class CloudFileService {
             }
             q = q.where({ search }, (p) => (x) => Sql.text.like(x.name, p.search));
         }
+
+        if (accept) {
+            const contentTypes = accept.split(/\,/g).map((x) => x.replace("*", "%").trim()).filter((x) => x);
+            q = q.where({ contentTypes }, (p) => (x) => x.isFolder || Sql.text.iLikeAny( x.contentType, p.contentTypes));
+        }
+
         const files = await q
             .orderByDescending((x) => x.isFolder)
                 .thenBy((x) => x.name)