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

package/src/common/controls/tree/FileTreeView.tsx

@@ -0,0 +1,74 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { IAppFile } from "../../../model/model";
+import TreeView from "./TreeView";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import CloudFileService from "../../../web/page/files/service/CloudFileService";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import Action from "@web-atoms/core/dist/view-model/Action";
+
+
+const getExtension = (name: string) => {
+    const index = name.lastIndexOf(".");
+    if (index === -1) {
+        return "dat";
+    }
+    return name.substring(index + 1);
+};
+
+export class FolderTreeView extends TreeView<IAppFile> {
+
+    @BindableProperty
+    public accept: string;
+
+    @BindableProperty
+    public folderId: number;
+
+    @InjectProperty
+    protected cloudFileService: CloudFileService;
+
+    constructor(app, e) {
+        super(app, e);
+
+        this.childrenProperty= (item) => item.children ??= [];
+        this.canSelect = (item) => item.isFolder;
+        this.isFolder = (item) => item.isFolder;
+        this.fileIconRenderer = (item) => <i
+            data-click-event="none"
+            class={`fiv-viv fiv-icon-${getExtension(item.name)}`}/>;
+        this.labelRenderer= (x) => <span
+            text={x.name}
+            title={x.name}/>;
+
+        this.render(<div folder={Bind.oneWayAsync((c, _, cancelToken) => this.loadFolder(this.folderId, this.accept, cancelToken ))}></div>);
+    }
+
+    @Action({ onEvent: "item-expanded"})
+    async onItemExpanded(item: IAppFile) {
+        await this.cloudFileService.expand(item);
+    }
+
+    protected async loadFolder(folder: number, accept: string, cancelToken) {
+        const f = await this.cloudFileService.getFolder(folder, cancelToken);
+        this.root = f;
+        this.selectedItem = f;
+    }
+
+}
+
+export class FileTreeView extends FolderTreeView {
+    constructor(app, e) {
+        super(app, e);
+        this.canSelect = (item) => !item.isFolder;
+        this.labelRenderer= (x) => <span
+            text={x.name}
+            title={x.name}
+            data-click-event={ x.isFolder ? "none": "select-item" } />;
+    }
+
+    protected async loadFolder(folder: number, accept: string, cancelToken) {
+        const f = await this.cloudFileService.root({ id: folder, cancelToken });
+        // f.children.remove(())
+        this.root = f;
+    }
+}

package/src/common/controls/tree/TreeView.tsx

@@ -103,7 +103,9 @@ export default class TreeView<T extends object = any> extends AtomControl {
 
     public labelRenderer: (item: T) => XNode;
 
-    public collapseIconRenderer: (item: T) => XNode;
+    public fileIconRenderer: (item: T) => XNode;
+
+    public folderIconRenderer: (item: T) => XNode;
 
     public actionRenderer: (item: T) => XNode;
 
@@ -111,6 +113,12 @@ export default class TreeView<T extends object = any> extends AtomControl {
 
     public canSelect: (item: T) => boolean = (x) => true;
 
+    public isFolder: (item: T) => boolean = (x) => true;
+
+    async init() {
+        // do nothing
+    }
+
     onPropertyChanging(name: keyof TreeView, oldValue, newValue) {
         if (name === "selectedItem") {
             if (oldValue) {
@@ -131,7 +139,9 @@ export default class TreeView<T extends object = any> extends AtomControl {
         }
         const element = this.map.get(newValue);
         if (!element) {
-            console.error(`Item not in the tree`);
+            if (this.root) {
+                console.error(`Item not in the tree`);
+            }
             return;
         }
         element.setAttribute("data-selected", "true");
@@ -155,14 +165,15 @@ export default class TreeView<T extends object = any> extends AtomControl {
             case "root":
             case "childrenProperty":
             case "labelRenderer":
-            case "collapseIconRenderer":
+            case "folderIconRenderer":
+            case "fileIconRenderer":
             case "actionRenderer":
                 const rootElement = this.element.firstElementChild as ITreeViewElement<T>;
                 rootElement?.dispose();
                 if (this.root
                     && this.childrenProperty
                     && this.labelRenderer
-                    && this.collapseIconRenderer) {
+                    && this.folderIconRenderer) {
                     this.element.innerHTML = "";
                     this.createElement(this.root, void 0, -1);
                     this.expand(this.root);
@@ -196,9 +207,12 @@ export default class TreeView<T extends object = any> extends AtomControl {
             title={item.label ?? item.name ?? item}
             text={item.label ?? item.name ?? item}
             />;
-        this.collapseIconRenderer = (item) => <i
+        this.folderIconRenderer = (item) => <i
             data-click-event="expand-collapse-item"
             class="fas"/>;
+        this.fileIconRenderer = (item) => <i
+            data-element="icon"
+            data-click-event="none"/>;
         this.runAfterInit(() => {
             if (this.root  && !this.element.firstElementChild) {
                 if (this.childrenProperty) {
@@ -222,6 +236,8 @@ export default class TreeView<T extends object = any> extends AtomControl {
             const element = findTreeElement(ce.target as HTMLElement);
             this.expandElement(element);
         } );
+
+        this.runAfterInit(() => this.app.runAsync(() => this.init?.()));
     }
 
     protected expandElement(element: ITreeViewElement<any>, toggle = true) {
@@ -297,9 +313,19 @@ export default class TreeView<T extends object = any> extends AtomControl {
         };
 
         const actionElement = this.actionRenderer?.(item);
-        const collapseElement = this.collapseIconRenderer(item);
+        const isFolder = this.isFolder?.(item) ?? true;
+        const iconElement = isFolder
+            ? this.folderIconRenderer(item)
+            : this.fileIconRenderer?.(item) ?? <i/>;
         const labelElement = this.labelRenderer(item);
 
+        if (iconElement) {
+            const a = iconElement.attributes ??= {};
+            a["data-element"] ??= isFolder ? "expand-collapse" : "file-icon";
+            a["data-click-event"] ??= "toggle-expand";
+            this.render(<div>{ iconElement }</div>, element, this);
+        }
+
         if (labelElement) {
             const a = labelElement.attributes ??= {};
             a["data-element"] = "label";
@@ -311,12 +337,6 @@ export default class TreeView<T extends object = any> extends AtomControl {
             (actionElement.attributes ??= {})["data-element"] = "action";
             this.render(<div>{ actionElement }</div>, element, this);
         }
-        if (collapseElement) {
-            const a = collapseElement.attributes ??= {};
-            a["data-element"] = "expand-collapse";
-            a["data-click-event"] = "toggle-expand";
-            this.render(<div>{ collapseElement }</div>, element, this);
-        }
 
         const header = document.createElement("div");
         header.setAttribute("data-element", "header");
@@ -379,3 +399,5 @@ export default class TreeView<T extends object = any> extends AtomControl {
     }
 
 }
+
+delete TreeView.prototype.init;

package/src/common/pages/websites/edit/WebSiteFolderEditor.tsx

@@ -19,7 +19,8 @@ export default class WebSiteFolderEditor extends PopupWindowPage {
         this.model = WebSiteFolder.create({
             folder: AppFile.create({
                 name: "Web Site",
-                isFolder: true
+                isFolder: true,
+                contentType: "application/site",
             }),
             isStatic: true
         });

package/src/common/pages/websites/manage/ManageWebSitePage.tsx

@@ -0,0 +1,44 @@
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import WebSiteService from "../../../../services/websites/WebSiteService";
+import { IWebSiteFolder, IWebSiteFolderVersion } from "../../../../model/model";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import CommonCommands from "../../../commands/CommonCommands";
+
+export default class ManageWebSitePage extends ContentPage {
+
+    parameters: { id: number };
+
+    @InjectProperty
+    private webSiteService: WebSiteService;
+
+    private model: IWebSiteFolder;
+
+    async init() {
+
+        this.model = await this.webSiteService.get(this.parameters.id);
+
+        this.renderer = <div>
+            <div>
+                {this.model.folder.name}
+                <a
+                    data-click-event="route"
+                    href={CommonCommands.editWebSite.displayRoute({ id: this.parameters.id })}>
+                    <button
+                        text="Edit"/>
+                    </a>
+                <button
+                    text="Preview"/>
+            </div>
+
+            <div>
+                <h5>Versions</h5>
+                <div>
+                    { ... (this.model.versions ?? [] as IWebSiteFolderVersion[]).map((v) => <div>
+                        {v.snapshotFolderID}
+                    </div>)}
+                </div>
+            </div>
+        </div>;
+    }
+}

package/src/common/pages/websites/studio/WebSiteStudioPage.tsx

@@ -0,0 +1,205 @@
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import CloudFileService from "../../../../web/page/files/service/CloudFileService";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import styled from "@web-atoms/core/dist/style/styled";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
+import PopupButton, { MenuItem } from "@web-atoms/web-controls/dist/basic/PopupButton";
+import UploadEvent from "@web-atoms/web-controls/dist/basic/UploadEvent";
+import { IAppFile, AppFile } from "../../../../model/model";
+import EditSharesPage from "../../../../web/page/files/shares/EditSharesPage";
+import EditTemplatePage from "../../../../web/page/templates/EditTemplatePage";
+import TreeView from "../../../controls/tree/TreeView";
+import ChooseWebSiteTemplatePage from "../templates/ChooseWebSiteTemplatePage";
+import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
+import { FileTreeView } from "../../../controls/tree/FileTreeView";
+import HtmlPageEditor from "../../../../site-editor/editor/HtmlPageEditor";
+
+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;
+        border: none;
+        overflow: auto;
+        justify-self: stretch;
+        align-self: stretch;
+    }
+`.installLocal();
+
+const getExtension = (name: string) => {
+    const index = name.lastIndexOf(".");
+    if (index === -1) {
+        return "dat";
+    }
+    return name.substring(index + 1);
+};
+
+
+export default class WebSiteStudioPage extends ContentPage {
+
+    public parameters: { id: number; templates?: boolean; };
+
+    public selectedFolder: IAppFile;
+
+    public root: IAppFile;
+
+    public search: string;
+
+    private version = 1;
+
+    private folderTree: TreeView;
+
+    @InjectProperty
+    private cloudFileService: CloudFileService;
+
+    async init() {
+        this.search = "";
+        this.root = await this.cloudFileService.root(this.parameters);
+        this.root.children ??= [];
+        this.root.children.remove((x) => x.contentType !== "text/html" && !x.isFolder);
+
+        await this.onItemExpanded(this.root);
+
+        if (!this.root.children?.length) {
+            await this.createIndexHtml();
+            return;
+        }
+
+        const indexHtml = this.root.children.find((x) => x.name === "index.html");
+        this.selectedFolder = indexHtml;
+
+        this.titleRenderer = () => <div data-layout="row">
+
+            <div text={Bind.oneWay(() => this.selectedFolder.name)}/>
+
+            <PopupButton
+                icon="fas fa-upload"
+                label="Upload"
+                data-layout="accent-icon-button"
+                alignment="bottomLeft"
+                popup={() => <div>
+                    <MenuItem
+                        icon="fas fa-upload"
+                        data-extra={Bind.oneWay(() => JSON.stringify({ parentID: this.selectedFolder.appFileID }))}
+                        { ... UploadEvent.AttachUploadAction({
+                            multiple: true,
+                            accept: "*/*"
+                        })} label="Files"/>
+                    <MenuItem
+                        icon="fas fa-upload"
+                        data-extra={Bind.oneWay(() => JSON.stringify({ parentID: this.selectedFolder.appFileID }))}
+                        { ... UploadEvent.AttachUploadAction({
+                            multiple: true,
+                            folder: true,
+                            accept: "*/*"
+                        })} label="Folder"/>
+                </div>}
+                />
+
+            <span text="|"/>
+
+            <i
+                data-click-event="new-folder"
+                class="fas fa-plus"/>
+            <span
+                data-click-event="new-folder"
+                text="Folder"/>
+
+            <span text="|"/>
+
+            { this.parameters.templates && <div
+                data-layout="row"
+                style-display={Bind.oneWay(() => this.selectedFolder.appFileID > 0)}>
+                <i class="fas fa-plus" data-click-event="new-template"/>
+                <span
+                    data-click-event="new-template"
+                    text="New Template"/>
+            </div>}
+        </div>;
+
+        this.renderer = <div class={css}>
+            <FileTreeView
+                root={this.root}
+                class="folder-tree"
+                accept="text/html"
+                presenter={Bind.presenter((c) => this.folderTree = c)}
+                selectedItem={Bind.twoWaysImmediate(() => this.selectedFolder)}
+                />
+            <HtmlPageEditor
+                class="file-list"
+                folder={this.root}
+                htmlPage={Bind.oneWayAsync((s, e, cancelToken) =>  this.selectedFolder
+                        ? FetchBuilder.get(this.selectedFolder.downloadUrl)
+                            .cancelToken(cancelToken)
+                            .responseAsText(true)
+                        : void 0)}
+                />
+        </div>;
+    }
+
+    async createIndexHtml() {
+        await PageNavigator.pushPageForResultOrCancel(ChooseWebSiteTemplatePage, this.root);
+        await this.init();
+    }
+
+
+    @Action({ onEvent: "edit-shares"})
+    editShares(file: IAppFile) {
+        PageNavigator.pushPage(EditSharesPage, file);
+    }
+
+    @Action({ onEvent: "open-folder"})
+    openFolder(file: IAppFile) {
+        this.selectedFolder = file;
+    }
+
+    @Action({ onEvent: "new-folder"})
+    async newFolder() {
+        const name = prompt("Enter name of the folder");
+        if (!name) {
+            return;
+        }
+        const parentID = this.selectedFolder.appFileID;
+        const folder = await this.cloudFileService.createFolder({ name, parentID });
+        this.selectedFolder.children.add(folder);
+    }
+
+    @Action({ onEvent: "item-expanded"})
+    async onItemExpanded(folder: IAppFile) {
+        await this.cloudFileService.files({
+            search: "",
+            accept: "text/html",
+            folder,
+            cancelToken: null
+        });
+    }
+
+    @Action({ onEvent: "files-available"})
+    async onFilesUploaded() {
+        this.version++;
+    }
+
+    @Action({ onEvent: "new-template"})
+    async newTemplate() {
+        const parentID = this.selectedFolder.appFileID;
+        const file = await PageNavigator.pushPageForResult(EditTemplatePage, { file: AppFile.create({
+            parentID
+        })});
+        this.selectedFolder.children.add(file);
+    }
+
+    @Action({ onEvent: "open-template"})
+    async openTemplate(file: IAppFile) {
+        await PageNavigator.pushPageForResultOrCancel(EditTemplatePage, { file });
+    }
+}

package/src/common/pages/websites/templates/ChooseWebSiteTemplatePage.tsx

@@ -0,0 +1,38 @@
+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 Action from "@web-atoms/core/dist/view-model/Action";
+import { UMD } from "@web-atoms/core/dist/core/types";
+
+export default class ChooseWebSiteTemplatePage extends PopupWindowPage {
+
+    parameters: IAppFile;
+
+    async init() {
+        this.renderer = <div>
+            <button
+                data-click-event="create-template"
+                text="Create"/>
+        </div>;
+    }
+
+    @Action({ onEvent: "create-template", close: true})
+    async createTemplate() {
+
+        // upload a simple html...
+        const path = UMD.resolvePath("@social-mail/social-mail-client/content/templates/plain/index.html");
+        const rs = await fetch(path);
+        const text = await rs.text();
+
+        // upload
+        await this.upload("index.html", text);
+    }
+
+    async upload(fileName: string, content: string) {
+        const url = `/api/upload?parentID=${this.parameters.appFileID}`;
+        const body = new FormData();
+        body.append(fileName, new Blob([content], { type: "text/html"}), fileName);
+        const rs = await fetch(url, { method: "POST", body });
+    }
+
+}

package/src/model/model.ts

@@ -43,6 +43,7 @@ export interface IAppFile extends IClrEntity {
 	templates?: ICollection<IEmailTemplate>;
 	userPins?: ICollection<IUserPin>;
 	websiteFolder?: IWebSiteFolder;
+	websiteVersions?: ICollection<IWebSiteFolderVersion>;
 }
 
 export const AppFileContentDispositionArray = [{"label":"attachment","value":"attachment"},{"label":"inline","value":"inline"}];
@@ -623,6 +624,7 @@ export interface IWebSiteFolder extends IClrEntity {
 	isStatic?: boolean;
 	folder?: IAppFile;
 	hosts?: ICollection<IWebSiteFolderHost>;
+	versions?: ICollection<IWebSiteFolderVersion>;
 }
 
 export const WebSiteFolder: IModel<IWebSiteFolder> = new Model<IWebSiteFolder>("WebSiteFolder", ["folderID"], { currentVersionID: 0,isStatic: false });
@@ -635,6 +637,15 @@ export interface IWebSiteFolderHost extends IClrEntity {
 
 export const WebSiteFolderHost: IModel<IWebSiteFolderHost> = new Model<IWebSiteFolderHost>("WebSiteFolderHost", ["host"], {  });
 
+export interface IWebSiteFolderVersion extends IClrEntity {
+	folderID?: number;
+	snapshotFolderID?: number;
+	websiteFolder?: IWebSiteFolder;
+	snapshotFolder?: IAppFile;
+}
+
+export const WebSiteFolderVersion: IModel<IWebSiteFolderVersion> = new Model<IWebSiteFolderVersion>("WebSiteFolderVersion", ["folderID","snapshotFolderID"], {  });
+
 export interface ILoginSession extends IClrEntity {
 	readonly sessionID?: number;
 	userID?: number;

package/src/services/websites/WebSiteService.ts

@@ -9,9 +9,16 @@ export default class WebSiteService {
     @Inject
     private entityService: EntityService;
 
+    async get(id) {
+        return this.entityService.query(WebSiteFolder)
+            .where({ id}, (p) => (x) => x.folderID === p.id)
+            .include((x) => [x.folder, x.hosts, x.versions])
+            .firstOrDefault();
+    }
+
     async list() {
         return this.entityService.query(WebSiteFolder)
-            .include((x) => x.folder)
+            .include((x) => [x.folder, x.hosts])
             .toArray();
     }
 

package/src/site-editor/blocks/Block.tsx

@@ -0,0 +1,38 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import type IEditorCommandParameter from "../commands/IEditorCommandParameter";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import type HtmlPageEditor from "../editor/HtmlPageEditor";
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+        padding: 5px;
+        cursor: pointer;
+        &:hover {
+            background-color: #00800080;
+        }
+    `.installGlobal("[data-html-editor-element=block]");
+
+
+export function Block({
+    className,
+    title,
+    factory }: { className: string, title: string, factory:(doc: Document) => HTMLElement }) {
+
+    return () => {
+        return <i
+            data-html-editor-element="block"
+            class={className}
+            title={title}
+            draggable={true}
+            event-click={(e) => {
+                const editor = (AtomControl.from(e.target) as HtmlPageEditor);
+                editor.insertElement(factory(editor.htmlDocument));
+            }}
+            event-dragstart={(e: DragEvent) => {
+                const ne = factory((AtomControl.from(e.target) as HtmlPageEditor).htmlDocument);
+                e.dataTransfer.setDragImage(ne, 0, 0);
+                e.dataTransfer.setData("text/html", ne.outerHTML);
+            }}
+        />;
+    };
+}

package/src/site-editor/blocks/ImageBlock.tsx

@@ -0,0 +1,14 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { Block } from "./Block";
+
+const src = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMuNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+`;
+
+export const ImageBlock = Block({
+        className: "fas fa-image",
+        title: "Add Image",
+        factory: (d) => {
+            const img = d.createElement("img");
+            img.setAttribute("src", src);
+            return img;
+        }
+    });

package/src/site-editor/blocks/WrapGrid.tsx

@@ -0,0 +1,11 @@
+import { Block } from "./Block";
+
+export const WrapGrid = Block({
+    className: "fa-duotone fa-grid-horizontal fa-rotate-90",
+    title: "Wrap Grid",
+    factory: (doc) => {
+        const e = doc.createElement("div");
+        e.setAttribute("styler-layout", "wrap-list");
+        return e;
+    }
+});

package/src/site-editor/commands/CodeCommand.tsx

@@ -0,0 +1,36 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { EditorCommand } from "./EditorCommand";
+import { PopupWindowPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
+
+class CodeEditorWindow extends PopupWindowPage<string, string> {
+
+    async init() {
+        this.element.style.minWidth = "90%";
+        this.element.style.minHeight = "90%";
+
+        this.renderer = <div>
+            <textarea
+                data-position="absolute-fill"
+                value={Bind.twoWaysImmediate(() => this.parameters)}/>
+        </div>;
+
+        this.footerRenderer = () => <div data-layout="command-row">
+            <button
+                event-click={() => this.close(this.parameters)}
+                text="Save"/>
+        </div>;
+    }
+}
+
+export const CodeCommand = () => {
+    return <i
+        class="fa-solid fa-code"
+        event-click={EditorCommand.onClick(async (editor, e) => {
+            const text = await PageNavigator.pushPageForResult(CodeEditorWindow, editor.htmlPage);
+            editor.htmlPage = text;
+            editor.commit();
+        })}
+        />;
+};