add follower

css/grid.scss

@@ -22,7 +22,6 @@
         --text-disabled-color: gray;
 
         --row-height: 36px;
-        --line-height: 24px;
         --header-line-height: 26px;
         --text-indent: 8px;
 

css/variables/definition.scss

@@ -29,9 +29,36 @@
 
     --border-radius: 2px;
     --text-indent: 4px;
+    --line-height: 24px;
 
     --font-size: .8125rem;
     --font-smaller-size: .75rem;
     --font-larger-size: .875rem;
     --font-family: "Franklin Gothic Book", "San Francisco", "Segoe UI", "Open Sans", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei UI", sans-serif;
+}
+
+.ui-input {
+    font-size: var(--font-size);
+    font-family: var(--font-family);
+    line-height: var(--line-height);
+    text-indent: var(--text-indent);
+    border: 1px solid var(--box-color);
+    border-radius: var(--border-radius);
+    transition: border-color .2s;
+
+    &:focus,
+    &:focus-visible {
+        outline: none;
+    }
+
+    &:focus,
+    &:hover {
+        border-color: var(--focus-color);
+    }
+
+    &:disabled {
+        border-color: var(--disabled-box-color);
+        color: var(--disabled-color);
+        background-color: var(--disabled-bg-color);
+    }
 }

lib/app/communications/contact.js

@@ -114,6 +114,8 @@ class Contact {
             contactMobile.value = c.MobilePhone;
             checkOpt.querySelector('input').checked = c.OptOut;
             contactNotes.value = c.Notes;
+        } else {
+            preferences.select('0');
         }
         this.#refs = {
             contactName,

lib/app/communications/customer.js

@@ -10,6 +10,7 @@ import { createBox } from "./lib";
 import { createPopup, showAlert, showConfirm } from "../../ui/popup";
 import Grid from "../../ui/grid";
 import Contact from "./contact";
+import Follower from "./follower";
 
 class NoteCol extends Grid.GridColumn {
     static create() {
@@ -605,7 +606,19 @@ class CustomerCommunication {
                                                     }
                                                 });
                                                 add.show(container);
-                                                */
+                                                 */
+                                                if (typeof this.#option.onInitFollower === 'function') {
+                                                    this.#option.onInitFollower().then(data => {
+                                                        if (typeof data === 'string') {
+                                                            showAlert(r('customerRecord', 'Customer Record'), data, 'warn');
+                                                            return;
+                                                        }
+                                                        const add = new Follower({
+                                                            followers: data
+                                                        });
+                                                        add.show(container);
+                                                    })
+                                                }
                                             });
                                             setTooltip(button, r('addFollower', 'Add Follower'))
                                         })

lib/app/communications/follower.js

@@ -0,0 +1,57 @@
+import { createElement } from "../../functions";
+import Grid from "../../ui/grid";
+import { createPopup } from "../../ui/popup";
+import { nullOrEmpty, r } from "../../utility";
+
+class Follower {
+    #option;
+
+    constructor(option = {}) {
+        this.#option = option;
+    }
+
+    async show(parent = document.body) {
+        const gridContainer = createElement('div', 'follower-grid');
+        const popup = createPopup(
+            r('addFollowers', 'Add Followers'),
+            createElement('div', 'follower-wrapper',
+                createElement('div', div => div.innerText = r('whoWantReceiveCustomerNotification', 'Who do you want to receive customer notifications?')),
+                createElement('input', search => {
+                    search.className = 'ui-input follower-search';
+                    search.addEventListener('input', () => {
+
+                    });
+                }),
+                gridContainer
+            ),
+            { text: r('ok', 'OK'), key: 'ok' },
+            { text: r('cancel', 'Cancel'), key: 'cancel' }
+        );
+        const result = await popup.show(parent);
+        // grid
+        const grid = new Grid(gridContainer);
+        grid.columns = [
+            { key: 'DisplayName', caption: r('contactName', 'Contact Name'), width: 240 },
+            { key: 'ContactTypeName', caption: r('contactType', 'Contact Type'), width: 120 },
+            {
+                key: 'Text',
+                caption: r('text', 'Text'),
+                type: Grid.ColumnTypes.Checkbox,
+                width: 60,
+                enabled: item => !nullOrEmpty(item.Mobile)
+            },
+            {
+                key: 'Email',
+                caption: r('email', 'Email'),
+                type: Grid.ColumnTypes.Checkbox,
+                width: 70,
+                enabled: item => !nullOrEmpty(item.ID)
+            }
+        ];
+        grid.init();
+        grid.source = this.#option.followers;
+        return result;
+    }
+}
+
+export default Follower;

lib/app/communications/style.scss

@@ -315,42 +315,53 @@
         }
     }
 
-    .popup-mask .grid {
-        height: 100%;
-        min-height: 120px;
-        overflow: hidden;
+    .popup-mask {
+        .grid {
+            height: 100%;
+            min-height: 120px;
+            overflow: hidden;
 
-        >.grid-body .grid-body-content>.grid-row>td {
-            vertical-align: top;
+            >.grid-body .grid-body-content>.grid-row>td {
+                vertical-align: top;
 
-            .col-icon {
-                padding: 10px 4px 10px 8px;
-            }
-
-            .icon-contact-type {
-                cursor: unset;
-
-                >svg {
-                    fill: #333;
+                .col-icon {
+                    padding: 10px 4px 10px 8px;
                 }
 
-                &:hover>svg {
-                    opacity: unset;
+                .icon-contact-type {
+                    cursor: unset;
+
+                    >svg {
+                        fill: #333;
+                    }
+
+                    &:hover>svg {
+                        opacity: unset;
+                    }
+                }
+
+                .contact-wrapper {
+                    width: 100px;
+                    padding: var(--spacing-cell);
+
+                    .contact-name {
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+
+                    .contact-note {
+                        color: #999;
+                    }
                 }
             }
+        }
 
-            .contact-wrapper {
-                width: 100px;
-                padding: var(--spacing-cell);
+        .follower-wrapper {
+            display: flex;
+            flex-direction: column;
 
-                .contact-name {
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                }
-
-                .contact-note {
-                    color: #999;
-                }
+            >.follower-grid {
+                height: 380px;
             }
         }
     }