sync form work

lib/app/communications/contact.js

@@ -0,0 +1,164 @@
+import { createElement } from "../../functions";
+import { createCheckbox } from "../../ui/checkbox";
+import Dropdown from "../../ui/dropdown";
+import { createPopup, showAlert } from "../../ui/popup";
+import { isEmail, nullOrEmpty, r } from "../../utility";
+
+class Contact {
+    #option;
+    #refs;
+
+    constructor(option = {}) {
+        this.#option = option;
+    }
+
+    async show(parent = document.body) {
+        const c = this.#option.contact;
+        const contactName = createElement('input', input => {
+            input.type = 'text';
+            input.tabIndex = 1;
+            input.maxLength = 200;
+            input.autocomplete = 'off';
+        });
+        const preferences = new Dropdown({ tabindex: 2 });
+        preferences.source = [
+            { value: '0', text: r('text', 'Text') },
+            { value: '1', text: r('email', 'Email') },
+            { value: '2', text: r('phone', 'Phone') }
+        ];
+        const contactEmail = createElement('input', input => {
+            input.type = 'email';
+            input.tabIndex = 3;
+            input.maxLength = 100;
+            input.autocomplete = 'off';
+        });
+        const contactMobile = createElement('input', input => {
+            input.type = 'tel';
+            input.tabIndex = 4;
+            input.maxLength = 50;
+            input.autocomplete = 'off';
+        });
+        const checkOpt = createCheckbox({
+            customerAttributes: {
+                tabindex: 5
+            }
+        });
+        const contactNotes = createElement('textarea', txt => {
+            txt.tabIndex = 6;
+            txt.maxLength = 2000;
+            txt.style.height = '100px';
+        });
+        const popup = createPopup(
+            c == null ? r('addContact', 'Add Contact') : r('editContact', 'Edit Contact'),
+            createElement('div', wrapper => {
+                wrapper.className = 'setting-wrapper';
+                wrapper.style.width = '500px';
+            },
+                createElement('div', 'setting-item',
+                    createElement('span', 'setting-label setting-required', r('contactNameColon', 'Contact Name:')),
+                    contactName
+                ),
+                createElement('div', 'setting-item',
+                    createElement('span', 'setting-label', r('contactPreferencesColon', 'Contact Preferences:')),
+                    preferences.create()
+                ),
+                createElement('div', 'setting-item',
+                    createElement('span', 'setting-label', r('contactEmailColon', 'Email Address:')),
+                    contactEmail
+                ),
+                createElement('div', 'setting-item',
+                    createElement('span', 'setting-label', r('contactMobileColon', 'Mobile:')),
+                    contactMobile
+                ),
+                createElement('div', 'setting-item',
+                    createElement('span', 'setting-label', r('contactOptColon', 'Opt Out:')),
+                    checkOpt
+                ),
+                createElement('div', 'setting-item',
+                    createElement('span', 'setting-label', r('contactNotesColon', 'Notes:')),
+                    contactNotes
+                )
+            ),
+            {
+                text: c == null ? r('addContactRecord', 'Add Contact Record') : r('editContactRecord', 'Edit Contact Record'),
+                trigger: () => {
+                    const item = this.prepare();
+                    if (item == null) {
+                        return false;
+                    }
+                    item.SaveToCustomer = 1;
+                    if (typeof this.#option.onSave === 'function') {
+                        return this.#option.onSave.call(this, item, c == null);
+                    }
+                }
+            },
+            {
+                text: r('workOrderOnly', 'Work Order Only'),
+                trigger: () => {
+                    const item = this.prepare();
+                    if (item == null) {
+                        return false;
+                    }
+                    item.SaveToCustomer = 0;
+                    if (typeof this.#option.onSave === 'function') {
+                        return this.#option.onSave.call(this, item, c == null);
+                    }
+                }
+            },
+            { text: r('cancel', 'Cancel') }
+        )
+        if (c != null) {
+            contactName.value = c.Name;
+            preferences.select(String(c.ContactPreference));
+            contactEmail.value = c.Email;
+            contactMobile.value = c.MobilePhone;
+            checkOpt.querySelector('input').checked = c.OptOut;
+            contactNotes.value = c.Notes;
+        }
+        this.#refs = {
+            contactName,
+            preferences,
+            contactEmail,
+            contactMobile,
+            checkOpt,
+            contactNotes
+        };
+        const result = await popup.show(parent);
+        setTimeout(() => contactName.focus());
+        return result;
+    }
+
+    prepare() {
+        const item = {
+            'Id': this.#option.contact?.Id,
+            'Name': this.#refs.contactName.value,
+            'ContactPreference': this.#refs.preferences.selected.value,
+            'Email': this.#refs.contactEmail.value,
+            'MobilePhone': this.#refs.contactMobile.value,
+            'OptOut': this.#refs.checkOpt.querySelector('input').checked,
+            'Notes': this.#refs.contactNotes.value
+        };
+        const title = this.#option.contact == null ? r('addContact', 'Add Contact') : r('editContact', 'Edit Contact');
+        if (nullOrEmpty(item.Name)) {
+            showAlert(title, r('contactNameRequired', 'Contact Name cannot be empty.'), 'warn')
+                .then(() => this.#refs.contactName.focus());
+            return null;
+        }
+        if (nullOrEmpty(item.Email) && nullOrEmpty(item.MobilePhone)) {
+            showAlert(title, r('contactEmailPhoneRequired', 'Email and Mobile Phone cannot both be empty.'), 'warn')
+                .then(() => nullOrEmpty(item.Email) ?
+                    this.#refs.contactEmail.focus() :
+                    this.#refs.contactMobile.focus());
+            return null;
+        }
+        if (!nullOrEmpty(item.Email) && !isEmail(item.Email)) {
+            showAlert(title, r('contactEmailInvalid', 'The email address is invalid.'), 'warn')
+                .then(() => this.#refs.contactEmail.focus());
+            return null;
+        }
+
+        return item;
+    }
+}
+
+export default Contact;