@social-mail/social-mail-client 1.2.209 → 1.2.211

package/node_modules/@web-atoms/web-controls/src/basic/TypeWriter.tsx

@@ -0,0 +1,85 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import sleep from "@web-atoms/core/dist/core/sleep";
+import { CancelToken } from "@web-atoms/core/dist/core/types";
+import styled from "@web-atoms/core/dist/style/styled";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+
+    styled.css `
+    display: inline-flex;
+    align-items: center;
+    justify-content: start;
+    white-space: nowrap;
+    padding-right: 1px;
+    border-right-style: solid;
+    border-right-width: 2px;
+    border-right-color: currentColor;
+`.installGlobal("[data-component=type-writer]");
+
+const disposableProperty = Symbol("type-writer-timer");
+
+const nbsp = "\u202f";
+
+const tp = AtomControl.registerProperty("data-type-writer","type-writer", (c, e, value) => {
+
+    e[disposableProperty]?.cancel();
+
+    const ct = new CancelToken();
+    e[disposableProperty] = ct;
+    c.app.runAsync(async () => {
+
+        const separator = e.getAttribute("separator") ?? e.getAttribute("data-separator") ?? ",";
+
+        const typeDelay = Number(e.getAttribute("type-delay") ?? e.getAttribute("data-type-delay") ?? "180");
+
+        const pause = Number(e.getAttribute("pause") ?? e.getAttribute("data-pause") ?? "700");
+
+        const deleteDelay = Number(e.getAttribute("delete-delay") ?? e.getAttribute("data-delete-delay") ?? "100");
+
+        const textList = value
+            .split(separator)
+            .map((x) => x.trim())
+            .filter((x) => x);
+
+        e.textContent = nbsp;
+
+        let index = 0;
+        const max = textList.length;
+
+
+        while(!ct.cancelled) {
+            if (!e.isConnected) {
+                return;
+            }
+            const current = textList[index];
+
+            let length = 0;
+
+            // forward...
+            while(length < current.length) {
+                e.textContent = current.substring(0, ++length) || nbsp;
+                await sleep(typeDelay);
+            }
+
+            await sleep(pause);
+
+            while(length) {
+                e.textContent = current.substring(0, --length) || nbsp;
+                await sleep(deleteDelay);
+            }
+
+            await sleep(deleteDelay);
+
+            index++;
+            if (index === max) {
+                index = 0;
+            }
+        }
+    });
+});
+
+export default function TypeWriter({ text, ... a}) {
+    return <div
+        data-component="type-writer"
+        { ... tp(text)}
+        { ... a}></div>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.209",
+  "version": "1.2.211",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -19,7 +19,7 @@
     "@web-atoms/font-awesome": "^1.0.37",
     "@web-atoms/hybrid-clr": "^1.0.21",
     "@web-atoms/module-loader": "^2.1.42",
-    "@web-atoms/web-controls": "^2.4.22",
+    "@web-atoms/web-controls": "^2.4.25",
     "reflect-metadata": "^0.1.13",
     "tinycolor2": "^1.6.0"
   },

package/src/admin/commands/AdminCommands.ts

@@ -47,4 +47,9 @@ export default class AdminCommands extends CommonCommands {
         openPage: () => import("../pages/repair/RepairPage")
     });
 
+    static editStores = Command.create({
+        route: "/admin/stores",
+        openPage: () => import("../pages/stores/AdminStoreList")
+    });
+
 }

package/src/admin/drawer/AdminDrawer.tsx

@@ -76,6 +76,11 @@ export default class AdminDrawer extends Drawer {
                     label="Web Sites"
                     commandLink={CommonCommands.openWebSiteList.displayRoute({})}
                     />
+                <MenuItem
+                    icon="fas fa-dollar"
+                    label="Stores"
+                    commandLink={AdminCommands.editStores.displayRoute({})}
+                    />
                 <MenuItem
                     icon="fas fa-gear"
                     label="Config"

package/src/admin/pages/stores/AdminStoreDetailPage.tsx

@@ -0,0 +1,74 @@
+import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { IStore, IStoreUser, IWebSiteStore, StoreUser, WebSiteFolder, WebSiteStore } from "../../../model/model";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import StoreService from "../../../services/store/StoreService";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import Form from "@web-atoms/web-controls/dist/basic/Form";
+import CollectionEditor from "../../../common/controls/collection-editor/CollectionEditor";
+import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
+import ChooserFolderPage from "../../../common/pages/folders/ChooserFolderPage";
+import ChooseUserPage from "../users/ChooseUserPage";
+
+export default class AdminStoreDetailPage extends ContentPage<IStore> {
+
+    public model: IStore;
+
+    @InjectProperty
+    private storeService: StoreService;
+
+    async init() {
+
+        this.model = await this.storeService.get(this.parameters.storeID);
+
+        this.title = this.model.name;
+
+        this.renderer = <div>
+            <Form>
+                <div data-layout="vertical-flex-stretch-items">
+                    <div data-layout="frame-vertical-flex">
+                    </div>
+                </div>
+
+                <CollectionEditor
+                    label="WebSites"
+                    model={this.model}
+                    collection="storeWebsites"
+                    itemFactory={() => this.chooseWebSite()}
+                    itemRenderer={(item: IWebSiteStore) => <tr>
+                        <td text={item.website.folder.name }/>
+                    </tr>}
+                    />
+
+                <CollectionEditor
+                    label="Users"
+                    model={this.model}
+                    collection="storeUsers"
+                    itemFactory={() => this.chooseUser()}
+                    itemRenderer={(item: IStoreUser) => <tr>
+                        <td text={item.user.displayName }/>
+                        <td text={item.user.userName}/>
+                    </tr>}
+                    />
+
+            </Form>
+        </div>;
+    }
+
+    async chooseUser() {
+        const user = await PageNavigator.pushPageForResult(ChooseUserPage);
+        return StoreUser.create({
+            user,
+            userID: user.userID
+        });
+    }
+
+    async chooseWebSite() {
+        const folder = await PageNavigator.pushPageForResult(ChooserFolderPage, { contentType: "application/site"});
+        return WebSiteStore.create({
+            folderID: folder.appFileID,
+            website: WebSiteFolder.create({
+                folder
+            })
+        });
+    }
+}

package/src/admin/pages/stores/AdminStoreList.tsx

@@ -0,0 +1,109 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { IStore, Store } from "../../../model/model";
+import InfiniteRepeater from "../../../common/controls/repeater/InfiniteRepeater";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import StoreService from "../../../services/store/StoreService";
+import MasterDetailPage from "@web-atoms/web-controls/dist/mobile-app/MasterDetailPage";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { AddIconTextButton } from "../../../common/controls/buttons/IconButton";
+import styled from "@web-atoms/core/dist/style/styled";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import AdminStoreDetailPage from "./AdminStoreDetailPage";
+
+const css = styled.css `
+&[data-page-type=master-detail] > [data-page-element=content][data-mode=desktop] {
+    grid-template-columns: 150px 1fr auto;
+}
+`.installLocal();
+
+export default class AdminStoreListPage extends MasterDetailPage {
+
+    items: IStore[] = [];
+
+    selectedItem = null as IStore;
+
+    search = "";
+
+    @InjectProperty
+    private storeService: StoreService;
+
+    async init() {
+
+        this.element.className = css;
+
+        this.titleRenderer = () => <div data-layout="row">
+            <input
+                placeholder="Search"
+                type="search"
+                value={Bind.twoWaysImmediate(() => this.search)}/>
+        </div>;
+
+        this.footerRenderer = () => <div data-layout="row">
+            <AddIconTextButton
+                data-click-event="add-item"
+                />
+        </div>;
+
+        this.renderer = <div>
+            <div>
+            <AtomRepeater
+                data-layout="data-grid"
+                selectOnClick={true}
+                data-list-selection="default"
+                data-selection-updated-event="item-selected"
+                data-event-items-updated="items-loaded"
+                selectedItem={Bind.twoWaysImmediate(() => this.selectedItem)}
+                items={this.items}
+                { ... InfiniteRepeater.pagedItems((start) =>
+                    (c, e, cancelToken) =>
+                        this.storeService.stores({
+                            start,
+                            cancelToken
+                        })
+                )}
+                itemRenderer={(store: IStore) => <div>
+                    <label text={store.storeID}/>
+                    <label text={store.name}/>
+                </div>}
+                />
+            </div>
+        </div>;
+    }
+
+    @Action({ onEvent: "items-loaded", defer: 100 })
+    itemsLoaded() {
+        if(this.selectedItem) {
+            if(this.items.includes(this.selectedItem)) {
+                return;
+            }
+            this.selectedItem = this.items.find((x) => x.storeID === this.selectedItem.storeID);
+            if (this.selectedItem) {
+                return;
+            }
+        }
+        this.selectedItem = this.items[0];
+    }
+
+    @Action({ onEvent: "item-selected"})
+    itemSelected() {
+        if(!this.selectedItem) {
+            return;
+        }
+        this.openDetail(AdminStoreDetailPage, this.selectedItem);
+    }
+
+    @Action({ onEvent: "add-item"})
+    async newItem() {
+        const name = prompt("Name of the store");
+        if (!name) {
+            return;
+        }
+        const store = Store.create({ name });
+        await this.storeService.save(store);
+        this.items.add(store);
+        this.selectedItem = store;
+    }
+
+}

package/src/admin/pages/users/UserDetailsPage.tsx

@@ -8,7 +8,7 @@ import { toFileSize } from "../../../common/NumberFormats";
 import CollectionEditor from "../../../common/controls/collection-editor/CollectionEditor";
 import EditDomainUserPage from "./domains/EditDomainUserPage";
 import EditUserMailboxPage from "./mailboxes/EditUserMailboxPage";
-import EditFileAcessPage from "./files/EditFileAccessPage";
+import EditFileAccessPage from "./files/EditFileAccessPage";
 import { DeleteIconTextButton, SaveIconButton, SaveIconTextButton } from "../../../common/controls/buttons/IconButton";
 import Action from "@web-atoms/core/dist/view-model/Action";
 import FormField from "@web-atoms/web-controls/dist/basic/FormField";
@@ -94,7 +94,7 @@ export default class UserDetailsPage extends ContentPage {
                 <CollectionEditor
                     label="Drives/Files"
                     model={this.model}
-                    addPage={EditFileAcessPage}
+                    addPage={EditFileAccessPage}
                     collection="fileAccessList"
                     itemRenderer={(item: IAppFileAccess) => <tr>
                         <td text={item.file.name }/>

package/src/admin/pages/users/files/EditFileAccessPage.tsx

@@ -11,7 +11,7 @@ import Bind from "@web-atoms/core/dist/core/Bind";
 import { SaveIconTextButton } from "../../../../common/controls/buttons/IconButton";
 import Action from "@web-atoms/core/dist/view-model/Action";
 
-export default class EditFileAcessPage extends PopupWindowPage {
+export default class EditFileAccessPage extends PopupWindowPage {
 
     public parameters: IAppFileAccess;
 

package/src/common/commands/CommonCommands.ts

@@ -57,4 +57,23 @@ export default class CommonCommands extends Commands {
         routeOrder: 2000,
         openPage: () => import("../pages/websites/list/WebSiteListPage")
     });
+
+    static editStore = Command.create({
+        route: "/stores/detail/{id}",
+        routeOrder: 100,
+        openPage: () => import("../pages/stores/StoreDetailPage")
+    });
+
+    static editProductList = Command.create({
+        route: "/stores/{storeID}",
+        routeOrder: 500,
+        openPage: () => import("../pages/stores/products/EditProductListPage")
+    });
+
+
+    static editProduct = Command.create({
+        route: "/stores/product/{id}",
+        routeOrder: 200,
+        openPage: () => import("../pages/stores/products/EditProductDetailPage")
+    });
 }

package/src/common/controls/countries/CountrySelect.tsx

@@ -21,7 +21,13 @@ export const CountrySelect = (a) => <DropDown
     labelPath={(item) => item.isdCode?.startsWith("+") ? item.isdCode : `+${item.isdCode} ${item.value}`}
     valuePath={(item) => item.value}
     items={Bind.oneTimeAsync(() => loadCountries())}
-    { ... a}/>
+    { ... a}/>;
+
+export const CurrencySelect = (a) => <DropDown
+    labelPath={(item:ICountry) => item.currency + "(" + item.label + ")"}
+    valuePath={(item:ICountry) => item.currency}
+    items={Bind.oneTimeAsync(() => loadCountries())}
+    { ... a}/>;
 
 export const isdForCountry = async (countryCode: string) =>
     (await loadCountries()).find((x) => x.value === countryCode).isdCode;

package/src/common/pages/folders/ChooserFolderPage.tsx

@@ -23,7 +23,7 @@ const css = styled.css `
 
 export default class ChooserFolderPage extends PopupWindowPage<any, IAppFile> {
 
-    public parameters: { chooseFile?: boolean };
+    public parameters: { chooseFile?: boolean, contentType?: string };
 
     private root: IAppFile;
 
@@ -47,7 +47,12 @@ export default class ChooserFolderPage extends PopupWindowPage<any, IAppFile> {
             name: "Drives"
         });
 
-        const drives = await this.cloudFileService.drives({start: 0, size: -1, cancelToken: null});
+        const drives = await this.cloudFileService.drives({
+            start: 0,
+            size: -1,
+            cancelToken: null,
+            contentType: this.parameters.contentType
+        });
 
         this.root.children = drives.items;
 

package/src/common/pages/stores/StoreDetailPage.tsx

@@ -0,0 +1,84 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { Inject } from "@web-atoms/core/dist/di/Inject";
+import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import StoreService from "../../../services/store/StoreService";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import { IStore, IStoreOrder } from "../../../model/model";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import AppCommands from "../../../web/commands/AppCommands";
+import CommonCommands from "../../commands/CommonCommands";
+import InfiniteRepeater from "../../controls/repeater/InfiniteRepeater";
+import StoreOrderService from "../../../services/store/StoreOrderService";
+import { AddIconTextButton } from "../../controls/buttons/IconButton";
+import Action from "@web-atoms/core/dist/view-model/Action";
+
+export default class StoreDetailPage extends ContentPage<{ id: any }> {
+
+    @InjectProperty
+    storeService: StoreService;
+
+    @InjectProperty
+    storeOrderService: StoreOrderService;
+
+    model: IStore;
+
+    items: IStoreOrder[] = [];
+    selectedItem: IStoreOrder = null;
+
+    search = "";
+
+    async init() {
+
+        this.model = await this.storeService.get(this.parameters.id);
+
+        this.title = `${this.model.name} Orders`;
+
+        this.headerRenderer = () => <div data-layout="flex-wrap-padding">
+                <input type="search" value={Bind.twoWaysImmediate(() => this.search)}/>
+                <a
+                    data-click-event="route"
+                    href={CommonCommands.editProductList.displayRoute({ storeID: this.parameters.id })}
+                    text="Products"
+                    />
+            </div>;
+
+        this.renderer = <div>
+            <div>
+            <AtomRepeater
+                    data-layout="data-grid"
+                    items={this.items}
+                    { ... InfiniteRepeater.pagedItems((start) =>
+                        (c, e, cancelToken) =>
+                            this.storeOrderService.list({
+                                storeID: this.parameters.id,
+                                start,
+                                search: this.search,
+                                cancelToken
+                            })
+                        )}
+                    itemRenderer={(item: IStoreOrder) => <div>
+                        <label text={item.orderID}/>
+                        <label text={item.orderNumber}/>
+                        <a text={item.customer.displayName}
+                            data-click-event="route"
+                            />
+                    </div>}
+                    />
+                </div>
+        </div>;
+
+        this.footerRenderer = () => <div data-layout="row">
+            <AddIconTextButton
+                data-click-event="create-order"
+                text="Create Order"
+                />
+        </div>;
+    }
+
+    @Action({ onEvent: "create-order"})
+    async createOrder() {
+        
+    }
+
+}

package/src/common/pages/stores/orders/EditOrderPage.tsx

@@ -0,0 +1,30 @@
+import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { IStoreOrder, StoreOrder } from "../../../../model/model";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import StoreOrderService from "../../../../services/store/StoreOrderService";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import Form from "@web-atoms/web-controls/dist/basic/Form";
+
+export default class EditOrderPage extends ContentPage<IStoreOrder> {
+
+    model: IStoreOrder;
+
+    @InjectProperty
+    storeOrderService: StoreOrderService;
+
+    async init() {
+
+        this.model = this.parameters.orderID
+            ? await this.storeOrderService.get(this.parameters.orderID)
+            : StoreOrder.create({
+                ... this.parameters
+            });
+
+        this.renderer = <div>
+            <Form>
+                
+            </Form>
+        </div>;
+
+    }
+}

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

@@ -0,0 +1,59 @@
+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, IStoreItemPrice, IStoreItemTag } 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";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import EditItemPricePage from "./prices/EditItemPricePage";
+
+export default class EditProductDetailPage extends ContentPage<{ id }> {
+
+    model: IStoreItem = null;
+
+    @InjectProperty
+    storeItemService: StoreItemService;
+
+    async init() {
+
+        this.model = await this.storeItemService.get(this.parameters.id);
+
+        this.renderer = <div>
+            <Form>
+                <FormField label="Name">
+                    <input value={Bind.twoWaysImmediate(() => this.model.name)}/>
+                </FormField>
+                <FormField label="Description">
+                    <textarea
+                        rows="5"
+                        cols="80"
+                        value={Bind.twoWaysImmediate(() => this.model.name)}/>
+                </FormField>
+                <CollectionEditor
+                    label="Prices"
+                    model={this.model}
+                    collection="storeItemPrices"
+                    addPage={EditItemPricePage}
+                    itemRenderer={(item: IStoreItemPrice) => <tr>
+                        <td text={item.currency}/>
+                        <td text={item.amount }/>
+                        <td text={item.startDate}/>
+                        <td text={item.endDate}/>
+                    </tr>}
+                />
+                <CollectionEditor
+                    label="Tags"
+                    model={this.model}
+                    collection="storeItemTags"
+                    itemRenderer={(item: IStoreItemTag) => <tr>
+                        <td text={item.tag.name}/>
+                        <td text={item.tagValue}/>
+                    </tr>}
+                />
+            </Form>
+        </div>;
+    }
+
+}