@social-mail/social-mail-client 1.2.488 → 1.2.490

package/src/public/contact-us/ContactUsApp.tsx

@@ -10,29 +10,97 @@ import Pack from "@web-atoms/core/dist/Pack";
 import Action from "@web-atoms/core/dist/view-model/Action";
 
     styled.css `
-    display: flex;
-    justify-content: center;
+    display: grid;
     align-items: center;
+    justify-items: stretch;
+
+    padding: 20px;
+
+    & [data-form] {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto auto auto auto auto;
+
+        background-color: transparent;
+
+        & .field-error, & .error-message {
+            background-color: transparent;
+            color: red;
+        }
+
+        & > * {
+            background-color: #80808015;
+            padding: 5px;
+            padding-left: 10px;
+            padding-right: 10px;
+            border-radius: 10px;
+        }
+
+    }
+
+    & .error-message {
+        grid-column: 1 / span 2;
+        grid-row: 1;
+    }
+
+    & .name {
+        grid-column: 1;
+        grid-row: 2;
+    }
+
+    & .contact {
+        grid-column: 2;
+        grid-row: 2;
+    }
+
+    & .questions {
+        grid-column: 1 / span 2;
+        grid-row: 3;
+    }
+
+    & .verify {
+        grid-column: 1 / span 2;
+        grid-row: 4;
+        & img {
+            max-width: 250px;
+        }
+    }
+
+    & .email {
+        grid-column: 1 / span 2;
+        grid-row: 5;
+        background-color: transparent;
+        place-self: center;
+        & button {
+            display: flex;
+            gap: 10px;
+            background-color: lightgreen;
+            font-size: larger;
+            border: none;
+            outline: none;
+            padding: 10px;
+            padding-left: 20px;
+            padding-right: 20px;
+            border-radius: 20px;
+            margin-bottom: 20px;
+            &:hover {
+                box-shadow: 0 0 5px 5px #0000FF50;
+            }
+        }
+    }
+
     & .captcha {
         display: flex;
         flex-direction: column;
         gap: 10px;
     }
+
+
+
     & input, &,textarea {
         border: none;
         outline: none;
         background-color: transparent;
-        border-bottom: solid 1px lightgray;
-    }
-    & button {
-        display: flex;
-        gap: 10px;
-        background-color: lightgreen;
-        padding: 2px;
-        padding-left: 10px;
-        padding-right: 10px;
-        border-radius: 10px;
-        margin-bottom: 10px;
     }
     `.installGlobal("contact-us");
 
@@ -61,26 +129,30 @@ export default class ContactUsApp extends AtomControl {
 
         captcha.code = "";
 
-        this.renderer = <div>
+        this.renderer = <div event-click={(e) => this.selectInput(e.target as any)}>
             <Form>
-                <FormField label="Your Name"
+                <FormField class="name" label="Your Name"
                     error={Bind.oneWay(() => (this.model.name) ? "" : "Name is required")}>
                     <input
                         autofocus={true}
                         value={Bind.twoWaysImmediate(() => this.model.name)}/>
                 </FormField>
                 <FormField
+                    class="contact"
                     label="Your Phone/Email"
                     error={Bind.oneWay(() => (this.model.email || this.model.phone) ? "" : "Email or Phone is required")}>
                     <input
                         value={Bind.twoWaysImmediate(() => this.model.email)}/>
                 </FormField>
-                <FormField label="Questions">
+                <FormField
+                    class="questions"
+                    label="Questions">
                     <textarea
                         rows="8"
                         value={Bind.twoWaysImmediate(() => this.model.description)}/>
                 </FormField>
                 <FormField
+                    class="verify"
                     label="Verify Code"
                     error={Bind.oneWay(() => this.model.captcha.code ? "" : "Code is required")}>
                     <div>
@@ -90,7 +162,9 @@ export default class ContactUsApp extends AtomControl {
                         </div>
                     </div>
                 </FormField>
-                <FormField label="">
+                <FormField
+                    class="email"
+                    label="">
                     <div>
                         <EmailIconTextButton
                             data-submit-event="send-email"
@@ -102,6 +176,17 @@ export default class ContactUsApp extends AtomControl {
         </div>;
     }
 
+    selectInput(target: HTMLElement) {
+        while(target) {
+            const input = target.querySelector("input") ?? target.querySelector("textarea");
+            if (input) {
+                input.focus();
+                return;
+            }
+            target = target.parentElement;
+        }
+    }
+
     @Action({
         onEvent: "send-email"
     })

package/src/services/LoginService.ts

@@ -8,6 +8,7 @@ import WebPushService from "./WebPushService";
 import sleep from "@web-atoms/core/dist/core/sleep";
 import DateTime from "@web-atoms/date-time/dist/DateTime";
 import { CancelToken } from "@web-atoms/core/dist/core/types";
+// import LocalDbService from "./local-db/LocalDbService";
 
 @DISingleton()
 export default class LoginService {
@@ -23,6 +24,10 @@ export default class LoginService {
     public async getUser() {
         this.user ??= (await this.entityService.query(LoginSession, "currentUser").firstOrDefault())?.user;
         SocialMailApp.user = this.user;
+        if (this.user?.userID) {
+            // let start syncing...
+            // this.app.resolve(LocalDbService).sync();
+        }
         return this.user;
     }
 

package/src/services/local-db/LocalDbService.ts

@@ -1,32 +1,68 @@
-import { UMD } from "@web-atoms/core/dist/core/types";
-import DISingleton from "@web-atoms/core/dist/di/DISingleton";
-import SqlDbFactory from "./SqlDbFactory";
-
-@DISingleton()
-export default class LocalDbService {
-
-    async contacts() {
-        const db = await this.load();
-        return db.execute `SELECT * FROM mailbox_thread_emails`;
-    }
-
-    private load() {
-        const r = (async () => {
-            const db = await SqlDbFactory.load("sm1");
-            // seed db...
-            await db.query(`
-                CREATE TABLE IF NOT EXISTS mailboxes (mailbox_id TEXT PRIMARY KEY, name TEXT);
-                CREATE TABLE IF NOT EXISTS mailbox_threads (mailbox_id TEXT, email_address_id TEXT, PRIMARY KEY (mailbox_id, email_address_id));
-                CREATE TABLE IF NOT EXISTS mailbox_thread_emails (mailbox_id TEXT, email_address_id TEXT, email_id TEXT, PRIMARY KEY (mailbox_id, email_address_id, email_id));
-            `);
-            return db;
-        })();
-
-        Object.defineProperty(this, "load", {
-            value: () => r
-         });
-
-        return r;
-    }
-
-}
+/* eslint-disable no-console */
+import DISingleton from "@web-atoms/core/dist/di/DISingleton";
+import LocalMailbox from "./mailboxes/LocalMailbox";
+import { UMD } from "@web-atoms/core/dist/core/types";
+import Modules from "../../common/Modules";
+import { Inject } from "@web-atoms/core/dist/di/Inject";
+import EntityService from "../EntityService";
+import TemplateQuery from "./core/TemplateQuery";
+
+const pgWorker = UMD.resolvePath("@social-mail/social-mail-client/pg-worker.js");
+
+export interface IResult<T> {
+    rows: T[];
+    affectedRows: number;
+}
+
+@DISingleton()
+export default class LocalDbService {
+
+    @Inject
+    entityService: EntityService;
+
+    public mailboxes = new LocalMailbox(this);
+
+    sync() {
+        this.ready().catch(console.error);
+    }
+
+    ready() {
+        const w = (async () => {
+            const { default: pg }= await Modules.import(pgWorker);
+
+            await pg.waitReady;
+
+            // start syncing
+            for (const key in this) {
+                if (Object.prototype.hasOwnProperty.call(this, key)) {
+                    const element = this[key];
+                    if (element instanceof LocalMailbox) {
+                        element.sync().catch(console.error);
+                    }
+                }
+            }
+
+            return pg;
+        })();
+        Object.defineProperty(this, "ready", { value: () => w });
+        return w;
+    }
+
+    async query<T>(a: TemplateStringsArray | TemplateQuery, ... args: any[]): Promise<IResult<T>> {
+        let q;
+        try {
+            const pg = await this.ready();
+            if (!(a instanceof TemplateQuery)) {
+                a = TemplateQuery.create(a, ... args);
+            }
+            q = a.toQuery();
+            console.log (q);
+            return await pg.query(q.text, q.values);
+        } catch (error) {
+            console.error(`Failed executing ${q.text}`);
+            console.error(error);
+        }
+    }
+
+}
+

package/src/services/local-db/core/LocalTable.ts

@@ -0,0 +1,113 @@
+import { IModel, IModelSchema, Model } from "@web-atoms/entity/dist/services/BaseEntityService";
+import type LocalDbService from "../LocalDbService";
+import TemplateQuery from "./TemplateQuery";
+import { IResult } from "../LocalDbService";
+
+export default abstract class LocalTable<T> {
+
+    name: TemplateQuery;
+    model: IModel<T>;
+
+    constructor(
+        protected readonly service: LocalDbService
+    ) {
+
+    }
+
+    async sync() {
+        const s = (async () => {
+            await this.init();
+            await this.startSync();
+            delete this.sync;
+        })();
+        Object.defineProperty(this, "sync", { value: () => s});
+        return s;
+    }
+
+
+    public abstract startSync(): Promise<void>;
+
+    public async afterInit() {
+
+    }
+
+    public async init() {
+        let keys = TemplateQuery.fragments(",");
+        let pKeys = TemplateQuery.fragments(",");
+        for (const { name, dataType, length } of this.model.schema.keys) {
+            keys = keys.add `${TemplateQuery.literal(name)} ${TemplateQuery.literal(this.toPgType(dataType, length))}`;
+            pKeys = pKeys.add `${TemplateQuery.literal(name)}`;
+        }
+        await this.query `CREATE TABLE IF NOT EXISTS ${this.name} (${keys}, PRIMARY KEY (${pKeys}))`;
+        for (const { name, dataType, length } of this.model.schema.properties) {
+            await this.query `ALTER TABLE ${this.name} ADD COLUMN IF NOT EXISTS ${TemplateQuery.literal(name)} ${TemplateQuery.literal(this.toPgColumn(dataType, length))}`;
+        }
+        await this.afterInit();
+    }
+
+    public query(a: TemplateStringsArray | TemplateQuery, ... args: any[]) {
+        return this.service.query(a, ... args) as Promise<IResult<T>>;
+    }
+
+    async save(element: T, retry = 3) {
+        try {
+            // try to update directly...
+            let where = TemplateQuery.fragments(" AND ");
+            for(const key of this.model.schema.keys) {
+                where = where.add `${TemplateQuery.literal(key.name)} = ${element[key.name]}`;
+            }
+
+            let fields = TemplateQuery.fragments(" , ");
+            for (const field of this.model.schema.properties) {
+                fields = fields.add `${TemplateQuery.literal(field.name)} = ${element[field.name]}`;
+            }
+
+            const { affectedRows } = await this.query `UPDATE ${this.name} SET ${fields} WHERE ${where}`;
+            if (affectedRows === 1) {
+                return;
+            }
+
+            // need to insert
+            let values  = TemplateQuery.fragments(" , ");
+            let columns = TemplateQuery.fragments(" , ");
+            for(const key of this.model.schema.keys) {
+                columns = columns.add `${element[key.name]}`;
+                values = values.add `${element[key.name]}`;
+            }
+            await this.query `INSERT INTO ${this.name} (${columns}) VALUES (${values}) `;
+        } catch (error) {
+            if (-- retry) {
+                await this.save(element, retry);
+                return;
+            }
+            throw error;
+        }
+
+    }
+
+    private toPgColumn(type: string, length: number) {
+        const pgType = this.toPgType(type, length);
+        return pgType + " NULL";
+    }
+
+    private toPgType(type: string, length: number): string {
+        switch(type) {
+            case "Integer":
+                return "int";
+            case "BigInt":
+                return "bigint";
+            case "Boolean":
+            case "Bool":
+                return "bool";
+            case "DateTime":
+                return "timestamp";
+            case "Decimal":
+            case "Double":
+                return "real";
+        }
+        if (length) {
+            return `varchar (${length})`;
+        }
+        return "text";
+    }
+}

package/src/services/local-db/core/TemplateQuery.ts

@@ -0,0 +1,135 @@
+export interface IQueryPart {
+    literal?: string;
+    arg?: any;
+}
+
+export class QueryFragments {
+
+    public readonly fragments: IQueryPart[] = [];
+
+    public readonly prefix: string;
+
+    public readonly separator: string;
+
+    constructor(
+        separator: string,
+        prefix?: string) {
+        this.prefix = prefix;
+        this.separator = separator;
+    }
+
+    public add(query: TemplateQuery | QueryFragments): QueryFragments;
+    public add(query: TemplateStringsArray, ... args: any[]): QueryFragments;
+    public add(query: TemplateQuery | QueryFragments | TemplateStringsArray, ... args: any[]): QueryFragments {
+        const { separator } = this;
+        if (separator && this.fragments.length) {
+            this.fragments.push({ literal: separator });
+        }
+
+        if (query instanceof QueryFragments) {
+            query = query.toQuery();
+        } else if (!(query instanceof TemplateQuery)) {
+            query = TemplateQuery.create(query, ... args);
+        }
+
+        this.fragments.push(... query.fragments);
+
+        return this;
+    }
+
+    public toQuery(): TemplateQuery {
+        const f = [];
+        if (this.prefix) {
+            f.push({ literal: this.prefix });
+        }
+        f.push(... this.fragments);
+        return new TemplateQuery(f);
+    }
+
+}
+
+export default class TemplateQuery {
+
+    public static literal(literal: string) {
+        return new TemplateQuery([ { literal }]);
+    }
+
+    public static create(query: TemplateStringsArray, ... args: any[]): TemplateQuery {
+        const q = new TemplateQuery();
+        for (let index = 0; index < query.length; index++) {
+            const literal = query[index];
+            q.fragments.push({ literal });
+            if (index < args.length) {
+
+                const arg = args[index];
+                if (arg instanceof TemplateQuery || arg instanceof QueryFragments) {
+                    q.fragments.push(... arg.fragments);
+                    continue;
+                }
+                q.fragments.push({ arg });
+            }
+        }
+        return q;
+    }
+
+    public static fragments(separator: string): QueryFragments;
+    public static fragments(separator: string, prefix?: string): QueryFragments {
+        return new QueryFragments(separator, prefix);
+    }
+
+    constructor(public fragments: IQueryPart[] = []) {}
+
+    public toQuery(prefix?: string, argName = (index) => `$${index + 1}`): IQuery {
+        let text = prefix ?? "";
+        const values = [];
+        const map = new Map();
+        for (const { literal, arg } of this.fragments) {
+            if (literal !== void 0) {
+                text += literal;
+                continue;
+            }
+            const av = arg ?? null;
+            if (av === null) {
+                text += " NULL ";
+                continue;
+            }
+            let an = map.get(av);
+            if (an === void 0) {
+                an = argName(values.length);
+                map.set(av, an);
+                values.push(this.toValue(av));
+            }
+            text += an;
+        }
+        return {
+            text,
+            values
+        };
+    }
+
+    toValue(av: any): any {
+        if (av === void 0) {
+            return null;
+        }
+        if (av === null) {
+            return null;
+        }
+        if (av instanceof Date) {
+            return av.toJSON();
+        }
+        switch(typeof av) {
+            case "boolean":
+                return av;
+            case "string":
+            case "number":
+            case "bigint":
+                return (av as any).toString();
+        }
+        return av;
+    }
+}
+
+export interface IQuery {
+    text: string;
+    values: any[];
+}

package/src/services/local-db/mailboxes/LocalMailbox.ts

@@ -0,0 +1,60 @@
+import DateTime from "@web-atoms/date-time/dist/DateTime";
+import { IMailbox, Mailbox } from "../../../model/model";
+import LocalTable from "../core/LocalTable";
+import TemplateQuery from "../core/TemplateQuery";
+
+export default class LocalMailbox extends LocalTable<IMailbox> {
+
+    name = TemplateQuery.literal("mailboxes");
+
+    model = Mailbox;
+
+    public async startSync() {
+
+        const es = this.service.entityService;
+
+        let q = es.query(this.model);
+
+        let max = null;
+
+        // get last max updated...
+        const { rows:[first] } = await this.query `SELECT * FROM ${this.name} ORDER BY dateUpdated DESC LIMIT 1`;
+        if (first) {
+            max = first.dateUpdated;
+            q = q.where({ max}, (p) => (x) => x.dateUpdated >= p.max);
+        }
+
+        let min = DateTime.now;
+
+        do {
+            const result = await q.where({ min }, (p) => (x) => x.dateUpdated < p.min)
+                .orderByDescending((x) => x.dateUpdated)
+                .toPagedList({
+                    start: 0,
+                    size: 200,
+                    count: false
+                });
+
+            if (!result.items.length) {
+                break;
+            }
+
+            for (const element of result.items) {
+                await this.save(element);
+                min = element.dateUpdated;
+            }
+        } while(true);
+    }
+
+    // public async init() {
+    //     await this.service.query `CREATE TABLE IF NOT EXISTS ${this.name}
+    //     (
+    //         mailboxId char (200),
+    //         name char (200),
+    //         dateUpdated timestamp,
+    //         primary key (mailboxId)
+    //     )
+    //     `;
+    // }
+
+}

package/src/services/mime-service/MimeNode.ts

@@ -393,7 +393,7 @@ export class MimeNode {
             return;
         }
 
-        let text = this.textContent;
+        let text = this.text;
         if (this.contentTransferEncoding === "quoted-printable") {
             text = quotedPrintable.encode( RawBuffer.encode(text));
         }

package/src/site-editor/editor/HtmlPageEditor.tsx

@@ -121,6 +121,31 @@ import BreadCrum from "./BreadCrum";
                 pointer-events: none;
                 outline: solid 1px green;
                 z-index: 22;
+                & > .lt, & > .rt, & > .lb, & > .rb {
+                    position: absolute;
+                    width: 10px;
+                    height: 10px;
+                    background-color: blue;
+                    border: solid 1px white;
+                    display: none;
+                    border-radius: 5px;
+                }
+                & > .lt {
+                    top: -5px;
+                    left: -5px;
+                }
+                & > .rt {
+                    top: -5px;
+                    right: -5px;
+                }
+                & > .lb {
+                    bottom: -5px;
+                    left: -5px;
+                }
+                & > .rb {
+                    bottom: -5px;
+                    right: -5px;
+                }
                 & > div {
                     pointer-events: all;
                     position: absolute;
@@ -345,12 +370,17 @@ export default class HtmlPageEditor extends AtomControl {
                     style-left={Bind.oneWay(() => this.dropTarget.left)}
                     style-top={Bind.oneWay(() => this.dropTarget.top)}
                     style-width={Bind.oneWay(() => this.dropTarget.width)}
-                    style-height={Bind.oneWay(() => this.dropTarget.height)}></div>
+                    style-height={Bind.oneWay(() => this.dropTarget.height)}>
+                </div>
                 <div data-element="selection"
                     style-left={Bind.oneWay(() => this.selection.left)}
                     style-top={Bind.oneWay(() => this.selection.top)}
                     style-width={Bind.oneWay(() => this.selection.width)}
                     style-height={Bind.oneWay(() => this.selection.height)}>
+                        <i class="lt" />
+                        <i class="rt" />
+                        <i class="lb" />
+                        <i class="rb" />
                         <div>
                             <i
                                 class="fa-regular fa-arrow-up"

package/src/tests/template-query/template-queries.test.ts

@@ -0,0 +1,22 @@
+import TemplateQuery from "../../services/local-db/core/TemplateQuery";
+import { Assert } from "../Assert";
+
+export default function() {
+    let tq = TemplateQuery.fragments(" AND ");
+    tq = tq.add `a === ${4}`;
+    tq = tq.add `b === ${5}`;
+
+    let q = tq.toQuery().toQuery();
+    Assert.equal("a === $1 AND b === $2", q.text);
+
+
+    let o1 = TemplateQuery.fragments(" OR ");
+    o1 = o1.add `(a === ${4}`;
+    o1 = o1.add `b === ${5})`;
+
+    tq = tq.add(o1.toQuery());
+
+    q = tq.toQuery().toQuery();
+    Assert.equal("a === $1 AND b === $2 AND (a === $1 OR b === $2)", q.text);
+
+}