@social-mail/social-mail-client 1.2.714 → 1.2.716

package/src/site-editor-app/pages/store/web-hooks/WebHookPage.tsx

@@ -0,0 +1,59 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { ContentPage, PopupWindowPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { IWebHook, WebHook, WebHookEventTypeArray } from "../../../../model/model";
+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 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";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import EntityService from "../../../../services/EntityService";
+
+export default class WebHookPage extends PopupWindowPage<IWebHook> {
+
+    model = WebHook.create({});
+
+    @InjectProperty
+    entityService: EntityService;
+
+    async init() {
+
+        this.title = "Web Hook";
+
+        if (this.parameters) {
+            this.model = this.parameters;
+        }
+
+        this.renderer = <div>
+            <Form>
+
+                <FormField label="Type">
+                    <Select
+                        items={WebHookEventTypeArray}
+                        value={Bind.twoWaysImmediate(() => this.model.eventType)}
+                        />
+                </FormField>
+
+                <FormField label="Url">
+                    <input value={Bind.twoWaysImmediate(() => this.model.url)}/>
+                </FormField>
+
+                <div>
+                    <SaveIconTextButton
+                        data-submit-event="save-item"
+                        />
+                </div>
+
+            </Form>
+        </div>;
+
+    }
+
+    @Action({ onEvent: "save-item", close: true})
+    async saveItem() {
+        await this.entityService.save(this.model, (c) => c);
+        return this.model;
+    }
+
+}

package/src/web/page/mails/ConversationPage.tsx

@@ -35,6 +35,7 @@ import Loader from "../../../common/controls/Loader";
 import loaderImage from "@social-mail/social-mail-client/content/images/gif/loader.gif";
 import ConversationTags from "./ConversationTags";
 import ConversationTagChips, { ISearchItem } from "./ConversationTagChips";
+import WebHookListPage from "./web-hooks/WebHookListPage";
 
 
 const itemCss = styled.css `
@@ -348,6 +349,10 @@ export default class ConversationPage extends ContentPage {
                 data-layout="vertical-flex"
                 style-width="200px"
                 data-font-size="small">
+                <MenuItem
+                    data-click-event="open-contact-web-hooks"
+                    label="Web Hooks"
+                    />
                 <MenuItem
                     data-click-event="close-all-threads"
                     label="Close All Threads"
@@ -382,6 +387,16 @@ export default class ConversationPage extends ContentPage {
         this.showComposeButton();
     }
 
+    @Action({ onEvent: "open-contact-web-hooks" })
+    async openWebHooks() {
+        const title = `Web Hooks for Contact ${this.parameters.emailAddress.emailAddress}`;
+        PageNavigator.pushPage(WebHookListPage, {
+            mailboxID: this.parameters.mailboxID,
+            emailAddressID: this.parameters.emailAddressID,
+            title
+        });
+    }
+
     @Action({ onEvent: "emailSent"})
     showComposeButton(email = null) {
 

package/src/web/page/mails/MailboxContacts.tsx

@@ -29,6 +29,7 @@ import { MailAppEvents } from "../../commands/MailAppEvents";
 import EntityService from "../../../services/EntityService";
 import { toSentenceCase } from "../../../common/StringFormat";
 import MenuService from "../../../common/MenuService";
+import WebHookListPage from "./web-hooks/WebHookListPage";
 
 const css = styled.css `
 
@@ -52,6 +53,12 @@ const css = styled.css `
         padding-top: 5px;
         display: flex;
         justify-content: center;
+        align-items: centern;
+        gap: 10px;
+        & > i {
+            color: var(--accent-color);
+            cursor: pointer;
+        }
     }
 
     & .blocked-bar {
@@ -322,6 +329,9 @@ export default class MailsPage extends MasterDetailPage {
                             <i class="fas fa-plus"/>
                             Contact
                         </button>
+                        <i
+                            data-click-event="open-web-hooks"
+                            class="fas fa-gears"/>
                     </div>
                 </div>
             </Resizable>
@@ -344,6 +354,11 @@ export default class MailsPage extends MasterDetailPage {
         this.threadsRepeater.refreshItem(item);
     }
 
+    @Action({ onEvent: "open-web-hooks" })
+    async openWebHooks() {
+        PageNavigator.pushPage(WebHookListPage, { mailboxID: this.parameters.id, title: `Web Hooks for Mailbox ${this.title}` });
+    }
+
     @Action({ onEvent: "compose-template"})
     async composeTemplate() {
         const template = await PageNavigator.pushPageForResult(ChooserTemplatePage);

package/src/web/page/mails/web-hooks/WebHookListPage.tsx

@@ -0,0 +1,69 @@
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import EntityService from "../../../../services/EntityService";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { IWebHook, WebHook } from "../../../../model/model";
+import { DateFormats } from "../../../../common/date/DateFormats";
+import { AddIconTextButton } from "../../../../common/controls/buttons/IconButton";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import WebHookPage from "../../../../site-editor-app/pages/store/web-hooks/WebHookPage";
+import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
+
+export default class WebHookListPage extends ContentPage<{ mailboxID?, emailAddressID?, title? }> {
+
+    @InjectProperty
+    entityService: EntityService;
+
+    items: IWebHook[] = [];
+
+    async init() {
+
+        this.title = this.parameters.title;
+
+        this.renderer = <div>
+            <AtomRepeater
+                data-layout="data-grid"
+                items={Bind.oneWayAsync((c, e, cancelToken) => this.load({ cancelToken }))}
+                itemRenderer={(x: IWebHook) => <div>
+                    <label text={x.eventType}/>
+                    <label text={x.url}/>
+                    <label text={x.lastEvent}/>
+                    <label text={DateFormats.relative.short(x.lastEventTime)}/>
+                    <menu>
+                        <i
+                            class="fas fa-times-circle"
+                            data-color="red"
+                            data-cursor="pointer"
+                            />
+                    </menu>
+                </div>}
+                />
+        </div>;
+
+        this.footerRenderer = () => <div>
+            <AddIconTextButton
+                data-click-event="add-item"
+                text="Add Web Hook"
+                />
+        </div>;
+    }
+
+    async load({ cancelToken }) {
+        const { mailboxID, emailAddressID } = this.parameters;
+        let q = this.entityService.query(WebHook).where({ mailboxID }, (p) => (x) => x.mailboxID === p.mailboxID);
+        if (emailAddressID) {
+            q = q.where({ emailAddressID }, (p) => (x) => x.emailAddressID === p.emailAddressID);
+        }
+        return this.items = await q.toArray();
+    }
+
+    @Action({ onEvent: "add-item" })
+    async addItem() {
+        const { mailboxID, emailAddressID } = this.parameters;
+        const item = WebHook.create({ mailboxID , emailAddressID });
+        const result = await PageNavigator.pushPageForResult(WebHookPage, item);
+        this.items.add(result);
+    }
+}