@social-mail/social-mail-client 1.2.252 → 1.2.253

package/src/common/pages/stores/products/EditProductDetailPage.tsx

@@ -2,7 +2,7 @@ import XNode from "@web-atoms/core/dist/core/XNode";
 import Form from "@web-atoms/web-controls/dist/basic/Form";
 import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
 import CollectionEditor from "../../../controls/collection-editor/CollectionEditor";
-import { IStoreItem, IStoreItemFolder, IStoreItemPrice, IStoreItemTag, StoreItem, StoreItemItemTypeArray } from "../../../../model/model";
+import { IStoreItem, IStoreItemFolder, IStoreItemPrice, IStoreItemTag, IStoreMediaFile, StoreItem, StoreItemItemTypeArray } from "../../../../model/model";
 import StoreItemService from "../../../../services/store/StoreItemService";
 import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
 import FormField from "@web-atoms/web-controls/dist/basic/FormField";
@@ -21,8 +21,11 @@ import TagChips from "../../../controls/tags/TagChips";
 import { DateFormats } from "../../../date/DateFormats";
 import FolderViewControl from "../../../folder-view/FolderViewControl";
 import ProductEditor from "./ProductEditor";
+import MasterDetailPage from "@web-atoms/web-controls/dist/mobile-app/MasterDetailPage";
+import ProductHtmlEditor from "./html/ProductHtmlEditorPage";
+import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
 
-export default class EditProductDetailPage extends ContentPage<Partial<IStoreItem>> {
+export default class EditProductDetailPage extends MasterDetailPage<Partial<IStoreItem>> {
 
     model: IStoreItem = null;
 
@@ -83,4 +86,10 @@ export default class EditProductDetailPage extends ContentPage<Partial<IStoreIte
         await this.init();
     }
 
+    @Action({ onEvent: "editMediaFile"})
+    async editMediaFile(file: IStoreMediaFile) {
+        const item = this.model;
+        // this.openDetail(ProductHtmlEditor, { item, file });
+        await PageNavigator.pushPageForResult(ProductHtmlEditor, { item, file });
+    }
 }

package/src/common/pages/stores/products/ProductEditor.tsx

@@ -1,5 +1,5 @@
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
-import { IStoreItem, IStoreItemFolder, IStoreItemPrice, StoreItem, StoreItemItemTypeArray } from "../../../../model/model";
+import { IStoreItem, IStoreItemFolder, IStoreItemPrice, IStoreMediaFile, IStorePriceAddOn, StoreItem, StoreItemItemTypeArray, StoreMediaFile, StorePriceAddOn } from "../../../../model/model";
 import Bind from "@web-atoms/core/dist/core/Bind";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import Query from "@web-atoms/entity/dist/services/Query";
@@ -7,7 +7,7 @@ import Form from "@web-atoms/web-controls/dist/basic/Form";
 import FormField from "@web-atoms/web-controls/dist/basic/FormField";
 import Select from "@web-atoms/web-controls/dist/basic/Select";
 import { Sql } from "../../../Sql";
-import { SaveIconTextButton } from "../../../controls/buttons/IconButton";
+import { SaveIconTextButton, UploadIconTextButton } from "../../../controls/buttons/IconButton";
 import CollectionEditorEx from "../../../controls/collection-editor/CollectionEditorEx";
 import ReferenceEditor from "../../../controls/reference-editor/ReferenceEditor";
 import TagChips from "../../../controls/tags/TagChips";
@@ -16,19 +16,48 @@ import FolderViewControl from "../../../folder-view/FolderViewControl";
 import EditItemFolderPage from "../folders/EditItemFolderPage";
 import EditItemPricePage from "./prices/EditItemPricePage";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import { FilesDragDrop } from "../../../controls/drag-drop/FilesDragDrop";
+import UploadEvent from "@web-atoms/web-controls/dist/basic/UploadEvent";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import { signedImageUrl } from "../../../fileUrl";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import EntityService from "../../../../services/EntityService";
+import StoreItemService from "../../../../services/store/StoreItemService";
+import { InlinePopupButton } from "@web-atoms/web-controls/dist/basic/InlinePopup";
+import { MenuItem } from "@web-atoms/web-controls/dist/basic/PopupButton";
+import MasterDetailPage from "@web-atoms/web-controls/dist/mobile-app/MasterDetailPage";
+import ProductHtmlEditor from "./html/ProductHtmlEditorPage";
+import { Offers } from "./html/Offsers";
+import { Specifications } from "./html/Specifications";
 
 export default class ProductEditor extends AtomControl {
 
+    @BindableProperty
+    productID: number = null;
+
     @BindableProperty
     model: IStoreItem = null;
 
+    @InjectProperty
+    storeItemService: StoreItemService;
+
     onPropertyChanged(name: string): void {
         super.onPropertyChanged(name);
         switch(name) {
             case "model":
                 this.app.runAsync(() => this.init());
                 break;
+            case "productID":
+                this.app.runAsync(() => this.loadProduct());
+                break;
+        }
+    }
+
+    async loadProduct() {
+        if (!this.productID) {
+            return;
         }
+        this.model = await this.storeItemService.get(this.productID);
     }
 
     async init() {
@@ -70,41 +99,10 @@ export default class ProductEditor extends AtomControl {
                         value={Bind.twoWaysImmediate(() => this.model.description)}/>
                 </FormField>
             </div>
-            <CollectionEditorEx
-                label="Prices"
-                model={this.model}
-                field={(x) => x.storeItemPrices}
-                addPage={EditItemPricePage}
-                itemRenderer={(item: IStoreItemPrice) => <div>
-                    <div text={item.currency}/>
-                    <div text={item.amount }/>
-                    <div
-                        title={DateFormats.withWeekDayAndTime(item.startDate)}
-                        text={DateFormats.relative.short(item.startDate)}/>
-                    { item.endDate
-                        ? <div
-                            title={DateFormats.withWeekDayAndTime(item.endDate)}
-                            text={DateFormats.relative.short(item.endDate)}/>
-                        : <div/>
-                    }
-                    {/* <Switch
-                        checked={item.active}
-                        /> */}
-                </div>}
-            />
             <TagChips
                 softDeleteProperty={Bind.oneWay(() => this.model.storeItemID > 0)}
                 items={Bind.twoWaysImmediate(() => this.model.storeItemTags)}
                 />
-            <details
-                data-border="frame"
-                open={true}>
-                <summary text="Files"/>
-                <FolderViewControl
-                    root={Bind.oneWay(() => this.model.fileFolder)}
-                    />
-            </details>
-
             <CollectionEditorEx
                 style-display={Bind.oneWay(() => this.model.storeItemID > 0, false)}
                 label="Sizes"
@@ -142,7 +140,155 @@ export default class ProductEditor extends AtomControl {
                 }}
                 itemRenderer={(item: IStoreItem) => <div><a text={item.name}></a></div>}
                 />
+            <CollectionEditorEx
+                label="Prices"
+                model={this.model}
+                field={(x) => x.storeItemPrices}
+                addPage={EditItemPricePage}
+                itemRenderer={(item: IStoreItemPrice) => <div>
+                    <div text={item.currency}/>
+                    <div text={item.amount }/>
+                    <div
+                        title={DateFormats.withWeekDayAndTime(item.startDate)}
+                        text={DateFormats.relative.short(item.startDate)}/>
+                    { item.endDate
+                        ? <div
+                            title={DateFormats.withWeekDayAndTime(item.endDate)}
+                            text={DateFormats.relative.short(item.endDate)}/>
+                        : <div/>
+                    }
+                    <CollectionEditorEx
+                        label="Add Ons"
+                        model={item}
+                        field={(x) => x.addons}
+                        itemFactory={() => StorePriceAddOn.create({
+                            price: item,
+                            priceID: item.priceID,
+                            addOnItemID: null,
+                            addOnItem: null,
+                            inclusive: false,
+                            print: true
+                        })}
+                        saveAfterAdd={false}
+                        itemRenderer={(x: IStorePriceAddOn) => <div>
+                            <ReferenceEditor
+                                model={x}
+                                field={(a) => a.addOnItem}
+                                searchQuery={(q: Query<IStoreItem>, search) => (search
+                                    ? q.where({ search: search + "%" }, (p) => (i) => Sql.text.iLike(i.name, p.search))
+                                    : q)}
+                                suggestionRenderer={(i: IStoreItem) => <div><label text={i.name}/></div>}
+                                itemRenderer={(a: IStoreItem) => <div>
+                                    <label text={a.name}/>
+                                </div>}
+                                />
+                        </div>}
+                        />
+                    {/* <Switch
+                        checked={item.active}
+                        /> */}
+                </div>}
+            />
+            <details
+                data-border="frame">
+                <summary text="Files"/>
+                <FolderViewControl
+                    root={Bind.oneWay(() => this.model.fileFolder)}
+                    />
+            </details>
+
+            <CollectionEditorEx
+                style-display={Bind.oneWay(() => this.model.storeItemID > 0, false)}
+                label="Media"
+                layout="flex-wrap"
+                model={this.model}
+                field={(x) => x.mediaFiles}
+                footer={() => <div data-layout="row">
+                <UploadIconTextButton
+                    { ... UploadEvent.AttachUploadAction({
+                        uploadEvent: "files-uploaded",
+                        extra: Bind.oneWay(() => JSON.stringify({
+                            parentID: this.model.folderID
+                        }))
+                    })}
+                    />
+                    <InlinePopupButton
+                        icon="fas fa-plus"
+                        label="Add Html"
+                        popup={() => <div>
+                        <MenuItem
+                            data-click-event="add-offer"
+                            label="Add Offers"/>
+                        <MenuItem
+                            data-click-event="add-specifications"
+                            label="Add Specifications"/>
+                    </div>} ></InlinePopupButton>
+                </div>}
+                itemRenderer={(item: IStoreMediaFile) => <div>
+                    { item.isPreview
+                        ? <img
+                        src={this.mediaFileUrl(item)}
+                        />
+                        : <button
+                            data-click-event="edit-media-file"
+                            data-layout="link"
+                            text={item.title}
+                            />
+                    }
+                </div>}
+                { ... FilesDragDrop({
+                    uploadEvent: "files-uploaded",
+                    extra: Bind.oneWay(() => JSON.stringify({
+                        parentID: this.model.folderID
+                    }))
+                })}
+                />
 
         </div>;
     }
+    mediaFileUrl(item: IStoreMediaFile) {
+        if (item.appFile) {
+            return `/api/files/webp(200)/${item.appFileID}/${item.appFile.fileContentID}/${item.appFile.name}.webp`;
+        }
+        return signedImageUrl(item, 200);
+    }
+
+    @Action({ onEvent: "files-uploaded"})
+    async onFilesUploaded({ files }) {
+        this.model.mediaFiles ??= [];
+        for (const appFile of files) {
+            this.model.mediaFiles.add(StoreMediaFile.create({
+                appFile,
+                appFileID: appFile.appFileID
+            }));
+        }
+    }
+
+    @Action({ onEvent: ["add-offer", "add-specifications"]})
+    async onAddHtmlFile(data, e: Event) {
+        let title = "";
+        let template: () => string;
+        switch(e.type) {
+            case "addOffer":
+                title = "offer.html";
+                template = Offers;
+                break;
+            case "addSpecifications":
+                title = "specs.html";
+                template = Specifications;
+                break;
+            default:
+                return;
+        }
+
+        // create empty file...
+        const file = await this.storeItemService.getOrCreateMediaFile(this.model, title, template);
+        // this.openDetail(ProductHtmlEditor, { item: this.model, file });
+        this.element.dispatchEvent(new CustomEvent("editMediaFile", {
+            detail: file,
+            bubbles: true
+        }));
+
+    }
+
 }

package/src/common/pages/stores/products/html/Offsers.tsx

@@ -0,0 +1,9 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import DomToString from "@web-atoms/email-dom/dist/DomToString";
+
+export const Offers = () => DomToString(<main>
+    <section styler-layout="column">
+    </section>
+    <section styler-layout="column">
+    </section>
+</main>);

package/src/common/pages/stores/products/html/ProductHtmlEditor.tsx

@@ -0,0 +1,37 @@
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
+import { IAppFile } from "../../../../../model/model";
+import HtmlPageEditor from "../../../../../site-editor/editor/HtmlPageEditor";
+import ChooseMediaPage from "../../../../../web/page/files/media/ChooseMediaPage";
+import CloudFileService from "../../../../../web/page/files/service/CloudFileService";
+import { imageUrl, srcSetUrl, storeFileUrl } from "../../../../fileUrl";
+
+export default class ProductHtmlEditor extends HtmlPageEditor {
+
+    @BindableProperty
+    public folder: IAppFile = null;
+
+    @InjectProperty
+    private cloudFileService: CloudFileService;
+
+    async changeImage() {
+        const files: { file: IAppFile, size: number}[] = await PageNavigator.pushPageForResult(ChooseMediaPage, {
+            folder: this.folder,
+            accept: "image/*",
+            multiple: true,
+            selected: this.selection.element
+        });
+        const images = files.map(({ file, size}) => {
+            const src =  storeFileUrl(this.folder.appFileID, file, `webp(${size})`, `${file.name}.${size}.webp`);
+            const srcset = srcSetUrl(this.folder, file, (folder, f, s) => storeFileUrl(this.folder.appFileID, file, `webp(${s})`, `${file.name}.${s}.webp`));
+            return { src, "data-src-set": srcset };
+        });
+        await this.insertImage( ... images);
+    }
+
+    protected async setStylerSheet() {
+        // do nothing
+    }
+
+}

package/src/common/pages/stores/products/html/ProductHtmlEditorPage.tsx

@@ -0,0 +1,131 @@
+import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { IStoreItem, IStoreMediaFile } from "../../../../../model/model";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import Loader from "../../../../controls/Loader";
+import { signedUrl } from "../../../../fileUrl";
+import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
+import HtmlPageEditor from "../../../../../site-editor/editor/HtmlPageEditor";
+import ProductHtmlEditor from "./ProductHtmlEditor";
+import { StylerSet } from "../../../../../site-editor/styler/StylerSet";
+import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
+import CodeEditorPage from "../../../../../code-editor/CodeEditorPage";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import { SaveIconTextButton } from "../../../../controls/buttons/IconButton";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import CloudFileService from "../../../../../web/page/files/service/CloudFileService";
+import EntityService from "../../../../../services/EntityService";
+
+const wrap = (styleText, body) => `
+<!DOCTYPE html>
+<html>
+<style styler-style-sheet="styler-style-sheet">
+${styleText}
+</style>
+<body>
+${body}
+</body>
+</html>
+`;
+
+export default class ProductHtmlEditorPage extends ContentPage<{ item: IStoreItem, file: IStoreMediaFile }> {
+
+    storeItem: IStoreItem;
+
+    mediaFile: IStoreMediaFile;
+    html: string;
+    htmlEditor: HtmlPageEditor;
+    pageContent: string;
+
+    @InjectProperty
+    private cloudFileService: CloudFileService;
+    private originalHtml: string;
+
+    async init() {
+
+        this.renderer = <div>
+            <Loader/>
+        </div>;
+
+        this.storeItem = this.parameters.item;
+        this.mediaFile = this.parameters.file;
+
+        const htmlMain = this.mediaFile.fileContentID
+            ? await FetchBuilder.get(signedUrl(this.mediaFile)).responseAsText()
+            : "<main>Content</main>";
+
+        this.originalHtml = htmlMain;
+
+        const css = StylerSet.instance.toString();
+
+        this.html = wrap(css, htmlMain);
+
+        this.renderer = <div>
+            <ProductHtmlEditor
+                data-position="absolute-fill"
+                folder={this.storeItem.store.folder}
+                presenter={Bind.presenter((c) => this.htmlEditor = c)}
+                event-html-page-changed={(ce: CustomEvent<string>) => this.pageContent = ce.detail}
+                htmlPage={this.html}
+                />
+        </div>;
+
+        this.footerRenderer = () => <div
+            data-layout="header-row"
+            style-display={Bind.oneWay(() => this.pageContent !== this.html)}>
+            <SaveIconTextButton
+                event-click={() => this.savePage()}
+                text="Save"
+                />
+            <SaveIconTextButton
+                event-click={() => this.savePage(true)}
+                text="Save and Close"
+                />
+        </div>;
+
+    }
+
+    @Action({})
+    async savePage(close = false) {
+        if (!this.htmlEditor.lastCommittedBody) {
+            if (close) {
+                this.close(this.mediaFile);
+            }
+            return;
+        }
+        const { fileContentID } = await this.cloudFileService.saveFile({
+            appFileID: this.mediaFile.appFileID,
+            content: new File([this.htmlEditor.lastCommittedBody], this.parameters.file.title, { type: "text/html" })
+        });
+
+        this.mediaFile.fileContentID = fileContentID;
+        const es = this.resolve(EntityService);
+        await es.save(this.mediaFile, (c) => c);
+        if (close) {
+            this.close(this.mediaFile);
+        }
+    }
+
+    @Action({ onEvent: "edit-code"})
+    async editCode() {
+        const content = await PageNavigator.pushPageForResult(CodeEditorPage, {
+            fileName: this.parameters.file.title,
+            content: this.htmlEditor.lastCommittedHtml ?? this.htmlEditor.htmlPage
+        });
+        this.pageContent = content;
+        this.htmlEditor.htmlPage = content;
+    }
+
+    protected hide(): void {
+        this.pageContent = this.htmlEditor?.lastCommittedHtml ?? this.htmlEditor?.htmlPage;
+        super.hide();
+    }
+
+    protected show(): void {
+        super.show();
+        if (this.pageContent) {
+            setTimeout(() => this.htmlEditor.htmlPage = this.pageContent, 400);
+        }
+    }
+
+}

package/src/common/pages/stores/products/html/Specifications.tsx

@@ -0,0 +1,41 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import DomToString from "@web-atoms/email-dom/dist/DomToString";
+
+export const Specifications = () => DomToString(<main>
+    <section styler-layout="columns-2">
+        <table>
+            <thead>
+                <tr>
+                    <th colspan={2}>Spec 1</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Size</td>
+                    <td>Medium</td>
+                </tr>
+                <tr>
+                    <td>Color</td>
+                    <td>Transparent</td>
+                </tr>
+            </tbody>
+        </table>
+        <table>
+            <thead>
+                <tr>
+                    <th colspan={2}>Spec 1</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Size</td>
+                    <td>Medium</td>
+                </tr>
+                <tr>
+                    <td>Color</td>
+                    <td>Transparent</td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+</main>);

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

@@ -242,7 +242,7 @@ export default class WebSiteStudioPage extends ContentPage {
     @Action({ onEvent: "edit-code"})
     async editCode() {
         const content = await PageNavigator.pushPageForResult(CodeEditorPage, {
-            file: this.selectedFile,
+            fileName: this.selectedFile.name,
             content: this.htmlEditor.lastCommittedHtml ?? this.htmlEditor.htmlPage
         });
         this.pageContent = content;