@social-mail/social-mail-client 1.9.55 → 1.9.57

package/package.json

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

package/src/common/commands/CommonCommands.ts

@@ -43,20 +43,6 @@ export default class CommonCommands extends Commands {
         openPage: () => import("../pages/websites/detail/WebSiteDetail")
     });
 
-
-    // static manageWebSite = Command.create({
-    //     route: "/studio/manage/{id}",
-    //     routeOrder: 100,
-    //     openPage: () => import("../pages/websites/manage/ManageWebSitePage")
-    // });
-
-
-    // static editWebSite = Command.create({
-    //     route: "/studio/edit/{id}",
-    //     routeOrder: 100,
-    //     openPage: () => import("../pages/websites/studio/WebSiteStudioPage")
-    // });
-
     static changePassword = Command.create({
         route: "/user/change-password",
         pushPage: () => import("../pages/user/change-password/ChangePasswordPage")

package/src/common/controls/tree/TreeView.global.css

@@ -10,6 +10,11 @@
         align-items: center;
         color: green;
 
+        & > [data-layout=container] {
+            grid-row: 2;
+            grid-column: 1 / span 3;
+        }
+
         & > [data-element=action] {
             grid-row: 1;
             grid-column: 3;
@@ -21,7 +26,7 @@
             }
         }
 
-        &:hover {
+        &:hover:not(:has([data-layout=tree-view-item]:hover)){
             background-color: var(--hover-color);
             color: var(--hover-text-color);
             & > [data-element=action] {

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

@@ -11,6 +11,7 @@ import "./TreeView.global.css";
 
 interface ITreeViewElement<T> extends HTMLDivElement, IDisposable {
     parentItem: T;
+    childrenContainer: HTMLElement;
     dataItem: T;
 }
 
@@ -231,6 +232,7 @@ export default class TreeView<T extends object = any> extends AtomControl {
     }
 
     protected createElement(item: T, parentItem?: T, insertIndex = -1) {
+
         const element = document.createElement("div") as ITreeViewElement<T>;
         element.setAttribute("data-layout", "tree-view-item");
 
@@ -243,6 +245,10 @@ export default class TreeView<T extends object = any> extends AtomControl {
             throw new Error("Children array must not be empty");
         }
 
+        const childContainer = document.createElement("div");
+        childContainer.setAttribute("data-layout", "container");
+        element.childrenContainer = childContainer;
+
         const watcher = children.watch((target, event, index, child) => {
             if (event === "add") {
                 // set parent in the
@@ -312,6 +318,7 @@ export default class TreeView<T extends object = any> extends AtomControl {
         const header = document.createElement("div");
         header.setAttribute("data-element", "header");
         element.appendChild(header);
+        element.appendChild(childContainer);
 
         const parentElement = this.map.get(parentItem);
         let last = parentElement;
@@ -323,8 +330,10 @@ export default class TreeView<T extends object = any> extends AtomControl {
             }
             if (insertIndex >= 1) {
                 last = this.map.get(siblings[insertIndex - 1]);
+                last.insertAdjacentElement("afterend", element);
+            } else {
+                parentElement.childrenContainer.insertAdjacentElement("beforeend", element);
             }
-            last.insertAdjacentElement("afterend", element);
             const pad = Number(parentElement.getAttribute("data-pad") ?? "0") + 10;
             element.setAttribute("data-pad", `${pad}`);
             element.style.paddingLeft = `${pad}px`;

package/src/common/pages/files/service/CloudFileService.ts

@@ -8,6 +8,8 @@ import { Sql } from "../../../../common/Sql";
 import SocialMailApp from "../../../../common/SocialMailApp";
 import LocalFileService from "../../../../services/files/LocalFileService";
 import Query from "@web-atoms/entity/dist/services/Query";
+import { CacheTTL } from "../../../cache/CacheTTL";
+import CacheVersions from "../../../cache/CacheVersions";
 
 const hideActivityIndicator = true;
 
@@ -132,6 +134,49 @@ export default class CloudFileService {
         return folder;
     }
 
+    async webRoot({ id, cancelToken = null}) {
+
+        const root = await this.entityService.query(AppFile)
+            .where({ id }, (p) => (x) => x.appFileID === p.id)
+            .firstOrDefault( {
+                cacheSeconds: CacheTTL.seconds.oneHour,
+                cacheVersion: CacheVersions.site,
+                cancelToken
+            });
+
+        const path = root.path + "%";
+
+        const files = await this.entityService.query(AppFile)
+            .where({ path }, (p) => (x) => Sql.text.like(x.path, p.path)
+                && x.isDeleted === false
+                && (x.contentType === "text/html" || x.isFolder === true)
+            )
+            .include((x) => x.creator)
+            .include((x) => x.children)
+            .toArray({ cancelToken });
+
+        root.children = [];
+        for (const file of files) {
+            if (file.parentID === id) {
+                root.children.push(file);
+                file.parent = root;
+            }
+        }
+
+        root.children?.sort((a, b) =>
+            a.isFolder && b.isFolder
+            ? a.name.localeCompare(b.name)
+            : (a.isFolder
+                ? Number.MIN_SAFE_INTEGER
+                : (b.isFolder
+                    ? Number.MAX_SAFE_INTEGER
+                    : a.name.localeCompare(b.name)
+                )
+            )
+        );
+        return root;
+    }
+
     async root({ id, templates = false, cancelToken = null}) {
 
         let root: IAppFile;
@@ -387,7 +432,11 @@ export default class CloudFileService {
     }
 
     getFilePath(root: IAppFile, selectedFile: IAppFile) {
-        const [ ignore, ... segments] = selectedFile.path.split("/") as any[];
+        const all = selectedFile.path.split("/") as any[];
+        while(all[0] !== root.appFileID) {
+            all.splice(0, 1);
+        }
+        const segments = all.slice(1);
         let path = "";
         for (const iterator of segments) {
             if (selectedFile.appFileID === iterator) {

package/src/site-editor-app/commands/SiteEditorCommands.ts

@@ -14,8 +14,8 @@ export default class SiteEditorCommands extends CommonCommands {
     });
 
     static editWebSite = Command.create({
-        route: "/social-mail/studio/edit/{id}",
-        routeOrder: 100,
+        route: "/social-mail/studio/edit/{id}/{*page}",
+        routeOrder: 1000,
         openPage: () => import("../pages/websites/studio/WebSiteStudioPage")
     });
 

package/src/site-editor-app/pages/websites/studio/WebSiteStudioPage.tsx

@@ -37,10 +37,12 @@ import StudioToolBar from "./tool-bar/StudioToolBar";
 import BasicShapes from "../../../../site-editor/tools/basic/BasicShapes";
 import StudioLayers from "./layers/StudioLayers";
 import Designs from "../../../../site-editor/tools/designs/Designs";
+import SiteEditorCommands from "../../../commands/SiteEditorCommands";
+import Loader from "../../../../common/controls/Loader";
 
 export default class WebSiteStudioPage extends ContentPage {
 
-    public parameters: { id: number; templates?: boolean; };
+    public parameters: { id: number; templates?: boolean; page?: string; };
 
     public selectedFile: IAppFile;
 
@@ -72,8 +74,13 @@ export default class WebSiteStudioPage extends ContentPage {
     private htmlEditor: HtmlPageEditor;
 
     async init() {
+
+        this.renderer = <div>
+            <Loader/>
+        </div>;
+
         this.search = "";
-        this.root = await this.cloudFileService.root(this.parameters);
+        this.root = await this.cloudFileService.webRoot(this.parameters);
 
         // find parent...
         this.element.dispatchEvent(new CustomEvent("iconClick", { bubbles: true}));
@@ -97,8 +104,29 @@ export default class WebSiteStudioPage extends ContentPage {
             return;
         }
 
-        const indexHtml = this.root.children.find((x) => x.name === "index.html");
-        this.selectedFile = indexHtml;
+
+        if (this.parameters?.page) {
+            // find page...
+
+            let { page } = this.parameters;
+            while(page.startsWith("/")) {
+                page = page.substring(1);
+            }
+            let segments = page.split("/");
+            const finalPage = segments.pop();
+            let root = this.root;
+            while(segments.length) {
+                const [first, ... all] = segments;
+                segments = all;
+                root = root.children.find((x) => x.name === first);
+            }
+            const finalFile = root.children.find((x) => x.name === finalPage);
+            this.selectedFile = finalFile;
+
+        } else {
+            const indexHtml = this.root.children.find((x) => x.name === "index.html");
+            this.selectedFile = indexHtml;
+        }
 
         const domain = this.webSite.channelDomains?.[0]?.domain?.domain;
         const infoEmail = domain ? `info@${domain.name}` : void 0;
@@ -106,6 +134,8 @@ export default class WebSiteStudioPage extends ContentPage {
 
         // const baseUrl = apiPath(`/api/site/draft/${this.root.appFileID}/`);
 
+        const htmlFile = await this.downloadHtml(this.selectedFile, this.cancelToken);
+
         this.titleRenderer = () => <div data-layout="row">
 
             <div text={this.root.name}/>
@@ -183,8 +213,9 @@ export default class WebSiteStudioPage extends ContentPage {
                                 root={this.root}
                                 class="folder-tree"
                                 accept="text/html"
+                                event-select-item={(c) => this.changeFile()}
                                 presenter={Bind.presenter((c) => this.folderTree = c)}
-                                selectedItem={Bind.twoWaysImmediate(() => this.selectedFile)}
+                                selectedItem={this.selectedFile}
                                 menuActions={(x: IAppFile) => !x.isFolder
                                     ? ( /\.(htm|html)$/i.test(x.name)
                                         ? [
@@ -235,14 +266,12 @@ export default class WebSiteStudioPage extends ContentPage {
                     />
             <WebSitePageEditor
                 class="file-list"
-                selectedFile={Bind.oneWay(() => this.selectedFile)}
-                baseUrl={Bind.oneWay(() => apiPath(`${this.root.url}${this.cloudFileService.getFilePath(this.root, this.selectedFile)}`))}
+                selectedFile={this.selectedFile}
+                baseUrl={apiPath(`${this.root.url}${this.cloudFileService.getFilePath(this.root, this.selectedFile)}`)}
                 folder={this.root}
                 presenter={Bind.presenter((c) => this.htmlEditor = c)}
                 event-html-page-changed={(ce: CustomEvent<string>) => this.modified = true}
-                htmlPage={Bind.oneWayAsync((s, e, cancelToken) =>  this.selectedFile
-                        ? this.downloadHtml(this.selectedFile, cancelToken)
-                        : void 0)}
+                htmlPage={htmlFile}
                 />
         </div>;
 
@@ -253,6 +282,11 @@ export default class WebSiteStudioPage extends ContentPage {
         </div>;
     }
 
+    changeFile(file = this.folderTree.selectedItem as IAppFile) {
+        const folder = this.cloudFileService.getFilePath(this.root, file) ?? "";
+        SiteEditorCommands.editWebSite.dispatch({ id: this.parameters.id, page: folder + file.name });
+    }
+
     @Action({ onEvent: "keydown"})
     onKeyDown(d, e: KeyboardEvent) {
         if(e.ctrlKey || e.metaKey) {
@@ -271,28 +305,6 @@ export default class WebSiteStudioPage extends ContentPage {
             .asText(true);
         this.pageContent = text;
         return text;
-        // const parser = new DOMParser();
-        // const doc = parser.parseFromString(text, "text/html");
-        // const injects = Array.from(doc.documentElement.querySelectorAll("inject")) as HTMLElement[];
-        // for (const e of injects) {
-        //     let src = e.getAttribute("src");
-        //     if(src.startsWith("/")) {
-        //         src = src.substring(1);
-        //     } else {
-        //         // will do it later
-        //     }
-        //     const injectedFile = await this.cloudFileService.children(this.root.appFileID, src)
-        //         .firstOrDefault();
-        //     text = await FetchBuilder.get(injectedFile.downloadUrl).asText();
-        //     const dom = parser.parseFromString(text, "text/html");
-        //     const children = Array.from(dom.body.children);
-        //     e.innerHTML = "";
-        //     for (const iterator of children) {
-        //         iterator.setAttribute("contentEditable", "false");
-        //         e.appendChild(iterator);
-        //     }
-        // }
-        // return doc.documentElement.outerHTML;
     }
 
     async createIndexHtml() {
@@ -371,6 +383,21 @@ export default class WebSiteStudioPage extends ContentPage {
     async duplicateHtml(file: IAppFile) {
         let { name }  = file;
         name = name.replace(/(\.[^\.]+)$/, (ext) => " Copy" + ext);
+
+        name = name.replace(/\.html$/, "");
+
+        name = prompt("Name of the file", name);
+        if (!name) {
+            return;
+        }
+
+        name = name + ".html";
+
+        // check if name already exists...
+        if(this.root.children.find((f) => f.name === name)) {
+            throw new Error("File with same name already exists");
+        }
+
         file = await this.cloudFileService.save({ ... file,
             appFileID: void 0,
             children: void 0,
@@ -378,7 +405,7 @@ export default class WebSiteStudioPage extends ContentPage {
             name
         });
         this.root.children.add(file);
-        this.selectedFile = file;
+        this.changeFile(file);
     }
 
     @Action({ onEvent: "file-history"})