@social-mail/social-mail-client 1.2.215 → 1.2.217

package/src/common/controls/reference-editor/ReferenceEditor.tsx

@@ -0,0 +1,227 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+import Expander from "@web-atoms/web-controls/dist/basic/Expander";
+import { AddIconTextButton, DeleteIconButton } from "../buttons/IconButton";
+import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import PopupService from "@web-atoms/core/dist/web/services/PopupService";
+import EntityService from "../../../services/EntityService";
+import styled from "@web-atoms/core/dist/style/styled";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import ExpressionParser from "@web-atoms/core/dist/core/ExpressionParser";
+import { modelEntitySchemas } from "../../../model/model";
+import { IModel, IModelSchema, IRelation } from "@web-atoms/entity/dist/services/BaseEntityService";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import { CancelToken } from "@web-atoms/core/dist/core/types";
+import Query from "@web-atoms/entity/dist/services/Query";
+import InfiniteRepeater from "../repeater/InfiniteRepeater";
+import Action from "@web-atoms/core/dist/view-model/Action";
+
+    styled.css `
+
+    position: relative;
+    overflow: visible !important;
+
+    & .model {
+
+        position: relative;
+        overflow: visible !important;
+
+    }
+
+    & .suggestions {
+        position: absolute;
+        background-color: canvas;
+        padding: 10px;
+        border: solid 1px lightgray;
+        top: 2rem;
+        border-radius: 10px;
+        z-index: 40000;
+    }
+
+`.installGlobal("[data-reference-editor=reference-editor]");
+
+export default class ReferenceEditor<T = any, TR = any> extends AtomControl {
+
+    public label: string = "";
+
+    public model: T = null;
+
+    public field: (x: T) => TR = null;
+
+    public searchQuery: (q: Query<TR>, searchText: string) => Query<TR> = null;
+
+    public cacheVersion = "c1";
+
+    public cacheSeconds = 15;
+
+
+    public editModelPage: any = null;
+
+    public addNewDefaults: Partial<TR> = {};
+
+    public ["event-reference-updated"]: (ce: CustomEvent<TR>) => any;
+
+    private reference: any = null;
+    private fieldName: string = null;
+    private search = "";
+    private suggestions: TR[] = null;
+    private relation: IRelation = null;
+
+    @InjectProperty
+    private entityService: EntityService;
+    private schema: IModel<any> = null;
+    private showSearch = false;
+    private hasFocus = false;
+
+    constructor(app, e) {
+        super(app, e);
+        this.runAfterInit(() => this.app.runAsync(() => this.init()));
+    }
+
+    public itemRenderer: (x: TR) => XNode = () => <div title="Setup Item Renderer to customize view" text="Model"/>;
+    public suggestionRenderer: (x: TR) => XNode = (x) => this.itemRenderer(x);
+    public onAddNew: (search: string) => Promise<TR> = (search) => PageNavigator.pushPageForResult(this.editModelPage, { search, ... this.addNewDefaults });
+
+    async init() {
+
+        const fieldName = ExpressionParser.parsePath(this.field)[0][0];
+        this.fieldName = fieldName;
+
+        const renderModel = (renderer, model: any) => <div
+            class="model"
+            data-border="frame"
+            data-padding="auto"
+            data-layout="vertical-flex-stretch-items">
+                <div data-layout="row">
+                <label text={Bind.oneWay(() => this.label)}/>
+                {model && renderer(model)}
+                {model && <i
+                    event-click={() => this.clearModel()}
+                    title="Clear"
+                    data-cursor="pointer"
+                    data-color="red"
+                    class="fas fa-times-circle"/>}
+                {!model && <input
+                    type="search"
+                    placeholder={`Search ${this.label}`}
+                    event-focus={() => this.hasFocus = true}
+                    event-blur={() => setTimeout(() => this.hasFocus = false, 250)}
+                    value={Bind.twoWaysImmediate(() => this.search)}
+                />}
+            </div>
+            {!model && <div
+                class="suggestions"
+                style-display={Bind.oneWay(() => this.showSearch)}
+                >
+                <div>
+                    <div
+                        style-max-height="200px"
+                        data-overflow-y="auto">
+                        <AtomRepeater
+                            data-layout="data-grid"
+                            data-list-selection="default"
+                            data-click-event="select-suggestion"
+                            items={this.suggestions}
+                            { ... InfiniteRepeater.pagedItems((start) => (c, e, cancelToken) => this.queryItems(start, this.search, cancelToken, this.showSearch))}
+                            itemRenderer={this.suggestionRenderer}
+                            />
+                    </div>
+                    <div
+                        data-layout="row"
+                        data-cursor="pointer"
+                        event-click={() => this.addNew()}
+                        >
+                        <i class="fas fa-plus"/>
+                        Add New
+                    </div>
+                </div>
+            </div>}
+        </div>;
+
+        const fx = () => this.model[this.fieldName];
+        fx.toString = () => `() => this.model.${fieldName}`;
+
+        this.renderer = <div
+            data-reference-editor="reference-editor"
+            reference={Bind.oneWay(fx)}
+            schema={Bind.oneWay(() => modelEntitySchemas[(this.model as any).$type])}
+            relation={Bind.oneWay(() => this.schema.schema.relations.find((x) => x.name === this.fieldName))}
+            renderer={Bind.oneWay(() => renderModel(this.itemRenderer, this.reference) ) }
+            showSearch={Bind.oneWay(() => (this.hasFocus || this.search) ? true : false)}
+            ></div>;
+    }
+
+    queryItems(start, search: string, cancelToken: CancelToken, showSearch) {
+        if (!showSearch) {
+            return {
+                items: [],
+                total: 0
+            };
+        }
+        let q: Query<TR> = this.entityService.query(this.relation.relatedModel) as any;
+        q = this.searchQuery(q, search);
+        const { cacheVersion, cacheSeconds } = this;
+        return q.toPagedList({
+            start,
+            size: 10,
+            cacheSeconds,
+            cacheVersion,
+            cancelToken
+        });
+    }
+
+    async addNew() {
+        this.showSearch = false;
+        const model = await this.onAddNew(this.search);
+    }
+
+    async clearModel(): Promise<any> {
+        this.model[this.fieldName] = null;
+
+        const relation = this.relation;
+        if (!relation.isInverse) {
+            this.model[relation.fkMap[0].fk] = null;
+        }
+
+        // save...
+
+        // if we have all keys...
+        if (!this.hasAllKeys()) {
+            this.element.dispatchEvent(new CustomEvent("referenceUpdated",{
+                detail: null
+            }));
+            return;
+        }
+
+        await this.entityService.save(this.model as any, (c) => c);
+        this.element.dispatchEvent(new CustomEvent("referenceUpdated",{
+            detail: null
+        }));
+}
+
+    hasAllKeys() {
+        const { schema, model } = this;
+        if (!model) {
+            return;
+        }
+        for (const key of schema.schema.keys) {
+            if(!model[key.name]) {
+                return false;
+            }
+        }
+        return schema.schema.keys.length > 0;
+    }
+
+    @Action({ onEvent: "select-suggestion"})
+    selectSuggestion(item) {
+        const { relation, model } = this;
+        model[this.fieldName] = item;
+        model[relation.fkMap[0].fk] = item[relation.fkMap[0].relatedKey];
+
+        this.element.dispatchEvent(new CustomEvent("referenceUpdated",{
+            detail: item
+        }));
+    }
+
+}

package/src/common/controls/search-items/SearchItemsPage.tsx

@@ -0,0 +1,10 @@
+import { IModel } from "@web-atoms/entity/dist/services/BaseEntityService";
+import { PopupWindowPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+
+export default class SearchItemsPage<T> extends PopupWindowPage {
+
+    public entityModel: IModel<T>;
+
+    public query: any;
+
+}

package/src/common/controls/tags/TagChips.tsx

@@ -0,0 +1,51 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import AtomChips, { Chip, Suggestion } from "@web-atoms/web-controls/dist/basic/AtomChips";
+import EntityService from "../../../services/EntityService";
+import { CancelToken } from "@web-atoms/core/dist/core/types";
+import { IStoreItemTag, ITag, Tag } from "../../../model/model";
+import { Sql } from "../../Sql";
+
+export default class TagChips extends AtomChips {
+
+    @InjectProperty
+    private entityService: EntityService;
+
+    protected preCreate(): void {
+        super.preCreate();
+
+        this.labelPath = (x: IStoreItemTag) => x.tag?.name;
+        this.prompt = "Tags";
+        this.itemRenderer = (x: IStoreItemTag) => <Chip
+            deleted={x.$deleted}
+            label={x.tag?.name}
+            />;
+        this.suggestionRenderer = (x: ITag) =>
+            <Suggestion text={x.name}/>;
+        this.enterKeyHint = "enter";
+        this.itemToChip = (item, name) => ({ $deleted: false, tag: Tag.create({ name }) });
+
+        this.render(<div suggestions={Bind.oneWayAsync((c, e, cancelToken) =>
+            this.searchItems(cancelToken, this.search), { watchDelayInMS: 750 })}></div>);
+
+        this.valuePath = (x: IStoreItemTag) => x.tag?.tagID ?? x.tagID;
+    }
+
+    private async searchItems(cancelToken: CancelToken, search: string) {
+        if (!search) {
+            return null;
+        }
+        let q = this.entityService.query(Tag);
+        search = search.toLocaleLowerCase();
+        q = q.where({ search: search + "%" }, (p) => (x) => Sql.text.like(x.name, p.search));
+        const items = await q.orderBy((x) => x.name)
+            .toPagedList({
+                cancelToken,
+                hideActivityIndicator: true,
+                size: 10
+            });
+        return items.items.map((tag) => ({ tag }));
+    }
+
+}

package/src/common/pages/contacts/ContactEditorPage.tsx

@@ -0,0 +1,132 @@
+import { PopupWindowPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { Contact, ContactEmail, ContactPhone, HostedDomain, IContact, IContactEmail, IContactPhone, IHostedDomain } from "../../../model/model";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import Form from "@web-atoms/web-controls/dist/basic/Form";
+import FormField from "@web-atoms/web-controls/dist/basic/FormField";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import ToggleButtonBar from "@web-atoms/web-controls/dist/basic/ToggleButtonBar";
+import Select from "@web-atoms/web-controls/dist/basic/Select";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import EntityService from "../../../services/EntityService";
+import CollectionEditor from "../../controls/collection-editor/CollectionEditor";
+import CollectionEditorEx from "../../controls/collection-editor/CollectionEditorEx";
+import { SaveIconTextButton } from "../../controls/buttons/IconButton";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import ContactService from "../../../services/contacts/ContactService";
+
+const contactTypes = [
+    { label: "Company", value: "company"},
+    { label: "Person", value: "person"}
+];
+
+export default class ContactEditorPage extends PopupWindowPage<IContact> {
+
+    public model: IContact = null;
+
+    @InjectProperty
+    entityService: EntityService;
+
+    @InjectProperty
+    contactService: ContactService;
+
+    async init() {
+
+        this.model = this.parameters?.contactID
+            ? await this.contactService.get(this.parameters.contactID)
+            : Contact.create({
+                type: "person",
+                name: "",
+                emails: [
+                    ContactEmail.create({
+                        emailAddressText: "",
+                        emailAddressID: null
+                    })
+                ],
+                phones: [
+                    ContactPhone.create({
+                        phoneNumberE64: ""
+                    })
+                ]});
+
+        this.title = this.model.contactID ? "Edit " + this.model.name : "Add New Contact";
+
+        this.renderer = <div>
+            <Form>
+                <FormField
+                    label="Name"
+                    required={true}
+                    error={Bind.oneWay(() => this.model.name ? "" : "Name is required")}>
+                    <input
+                        value={Bind.twoWaysImmediate(() => this.model.name)}
+                        autofocus={true}
+                        />
+                </FormField>
+                <FormField label="Type">
+                    <ToggleButtonBar
+                        items={contactTypes}
+                        labelPath={(x) => x.label}
+                        valuePath={(x) => x.value}
+                        value={Bind.twoWaysImmediate(() => this.model.type)}
+                        />
+                </FormField>
+                <FormField label="Domain">
+                    <Select
+                        items={Bind.oneWay(() => this.entityService.query(HostedDomain)
+                            .include((x) => x.domain)
+                            .toArray())}
+                        labelPath={(x: IHostedDomain) => x.domain.name}
+                        valuePath={(x: IHostedDomain) => x.domainID}
+                        value={Bind.twoWaysImmediate(() => this.model.domainID)}
+                        />
+                </FormField>
+                <div data-layout="flex-wrap-padding">
+                    <CollectionEditorEx
+                        label="Phone"
+                        model={this.model}
+                        field={(x) => x.phones}
+                        itemRenderer={(item: IContactPhone) => <div>
+                            <input
+                                value={Bind.sourceTwoWays(item, (x) => x.source.phoneNumberE64)}/>
+                        </div>}/>
+                    <CollectionEditorEx
+                        label="Email"
+                        model={this.model}
+                        field={(x) => x.emails}
+                        itemRenderer={(item: IContactEmail) => <div>
+                            {item.emailAddress
+                                ? <div text={item.emailAddress.emailAddress}/>
+                                : <input
+                                    value={Bind.sourceTwoWays(item, (x) => x.source.emailAddress)}/>
+                            }
+                        </div>}/>
+                </div>
+                <details open={true} data-border="frame">
+                    <summary>Tax Numbers</summary>
+                    <div data-layout="vertical-flex-stretch-items">
+                        <FormField label="GST ID (GSTIN)">
+                            <input value={Bind.twoWaysImmediate(() => this.model.gstTaxID)}/>
+                        </FormField>
+                        <FormField label="Income TAX (PAN/TAX ID)">
+                            <input value={Bind.twoWaysImmediate(() => this.model.incomeTaxID)}/>
+                        </FormField>
+                        <FormField label="Sales TAX ID">
+                            <input value={Bind.twoWaysImmediate(() => this.model.salesTaxID)}/>
+                        </FormField>
+                    </div>
+                </details>
+                <div data-layout="sticky-command-row">
+                    <SaveIconTextButton
+                        data-submit-event="save-contact"
+                        />
+                </div>
+            </Form>
+        </div>;
+    }
+
+    @Action({ onEvent: "save-contact", close: true })
+    async saveContact() {
+        await this.contactService.save(this.model);
+        return this.model;
+    }
+
+}

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

@@ -12,6 +12,8 @@ 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";
+import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
+import EditOrderPage from "./orders/EditOrderPage";
 
 export default class StoreDetailPage extends ContentPage<{ id: any }> {
 
@@ -78,7 +80,7 @@ export default class StoreDetailPage extends ContentPage<{ id: any }> {
 
     @Action({ onEvent: "create-order"})
     async createOrder() {
-        
+        await PageNavigator.pushPageForResult(EditOrderPage, { storeID: this.parameters.id });
     }
 
 }

package/src/common/pages/stores/folders/EditItemFolderPage.tsx

@@ -0,0 +1,69 @@
+import { PopupWindowPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { IStoreItemFolder, StoreItemFolder } from "../../../../model/model";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import EntityService from "../../../../services/EntityService";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import Form from "@web-atoms/web-controls/dist/basic/Form";
+import FormField from "@web-atoms/web-controls/dist/basic/FormField";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import ReferenceEditor from "../../../controls/reference-editor/ReferenceEditor";
+import Query from "@web-atoms/entity/dist/services/Query";
+import { Sql } from "../../../Sql";
+import { SaveIconTextButton } from "../../../controls/buttons/IconButton";
+import Action from "@web-atoms/core/dist/view-model/Action";
+
+export default class EditItemFolderPage extends PopupWindowPage<IStoreItemFolder> {
+
+    model: IStoreItemFolder = null;
+
+    @InjectProperty
+    entityService: EntityService;
+
+    async init() {
+        this.model = this.parameters?.itemFolderID
+            ? await this.entityService.query(StoreItemFolder).where(this.parameters, (p) => (x) => x.itemFolderID === p.itemFolderID).firstOrDefault()
+            : StoreItemFolder.create({
+                parent: null,
+                storeID: this.parameters?.storeID
+            });
+
+        if (!this.parameters.storeID) {
+            alert("Store is not set");
+            this.cancel();
+            return;
+        }
+
+        this.renderer = <div>
+            <Form>
+                <FormField label="Name">
+                    <input
+                        placeholder="Name"
+                        value={Bind.twoWaysImmediate(() => this.model.name)}
+                        autofocus={true}/>
+                </FormField>
+                <ReferenceEditor
+                    label="Folder"
+                    model={this.model}
+                    field={(x) => x.parent}
+                    searchQuery={(q: Query<IStoreItemFolder>, search) =>
+                        (search ? q.where({ search }, (p) => (x) => Sql.text.startsWith(x.name, p.search)) : q)
+                        .orderBy((x) => x.path)
+                    }
+                    itemRenderer={(x) => <div><label text={x.name}/></div>}
+                    />
+                <div data-layout="command-row">
+                    <SaveIconTextButton
+                        data-submit-event="save-folder"
+                        />
+                </div>
+            </Form>
+        </div>;
+    }
+
+    @Action({ onEvent: "save-folder", close: true })
+    async saveFolder() {
+        await this.entityService.save(this.model, (c) => c);
+        return this.model;
+    }
+
+}