@social-mail/social-mail-client 1.2.489 → 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,7 +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";
+// import LocalDbService from "./local-db/LocalDbService";
 
 @DISingleton()
 export default class LoginService {

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

@@ -49,12 +49,19 @@ export default class LocalDbService {
     }
 
     async query<T>(a: TemplateStringsArray | TemplateQuery, ... args: any[]): Promise<IResult<T>> {
-        const pg = await this.ready();
-        if (!(a instanceof TemplateQuery)) {
-            a = TemplateQuery.create(a, ... args);
+        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);
         }
-        const q = a.toQuery();
-        return pg.query(q.text, q.values);
     }
 
 }

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

@@ -27,7 +27,23 @@ export default abstract class LocalTable<T> {
 
     public abstract startSync(): Promise<void>;
 
-    public abstract init(): 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>>;
@@ -38,7 +54,7 @@ export default abstract class LocalTable<T> {
             // 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]}`;
+                where = where.add `${TemplateQuery.literal(key.name)} = ${element[key.name]}`;
             }
 
             let fields = TemplateQuery.fragments(" , ");
@@ -69,5 +85,29 @@ export default abstract class LocalTable<T> {
 
     }
 
+    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

@@ -88,11 +88,16 @@ export default class TemplateQuery {
                 text += literal;
                 continue;
             }
-            let an = map.get(arg ?? null);
-            if (!an) {
+            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(arg, an);
-                values.push(arg);
+                map.set(av, an);
+                values.push(this.toValue(av));
             }
             text += an;
         }
@@ -101,6 +106,27 @@ export default class TemplateQuery {
             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 {

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

@@ -46,15 +46,15 @@ export default class LocalMailbox extends LocalTable<IMailbox> {
         } while(true);
     }
 
-    public async init() {
-        await this.service.query `CREATE TABLE ${this.name} IF NOT EXISTS
-        (
-            mailboxId char (200),
-            name char (200),
-            dateUpdated timestamp,
-            primary key (mailboxId)
-        )
-        `;
-    }
+    // 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/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"