diff --git a/css/dropdown.scss b/css/dropdown.scss index ad9569d..c9d67b0 100644 --- a/css/dropdown.scss +++ b/css/dropdown.scss @@ -244,7 +244,7 @@ $listMaxHeight: 210px; @include scrollbar(); &.filtered>li:first-child { - background-color: var(--hover-color); + background-color: var(--hover-bg-color); } >li { @@ -260,7 +260,7 @@ $listMaxHeight: 210px; &:hover, &.selected { - background-color: var(--hover-color); + background-color: var(--hover-bg-color); } >.checkbox-wrapper { diff --git a/css/variables/definition.scss b/css/variables/definition.scss index c688c95..0ce9b0c 100644 --- a/css/variables/definition.scss +++ b/css/variables/definition.scss @@ -16,12 +16,12 @@ --title-color: #fff; --title-bg-color: rgb(68, 114, 196); --border-color: #d9d9d9; - --focus-color: #b9b9b9; + --focus-color: #666; --disabled-bg-color: #e9e9e9; --disabled-color: #aaa; --box-color: #999898; --disabled-box-color: #d9d9d9; - --hover-color: #eee; + --hover-bg-color: #eee; --link-color: #1890ff; --primary-color: rgb(123, 28, 33); --loading-bg-color: hsla(0, 0%, 100%, .4); diff --git a/lib/app.js b/lib/app.js index 45877af..cb0b66b 100644 --- a/lib/app.js +++ b/lib/app.js @@ -1,11 +1,8 @@ +import "./app/communications/style.scss"; import CustomerCommunication from "./app/communications/customer"; import InternalComment from "./app/communications/internal"; -import Popup, { showAlert, showConfirm } from "./ui/popup"; export { CustomerCommunication, - InternalComment, - Popup, - showAlert, - showConfirm + InternalComment } \ No newline at end of file diff --git a/lib/app/communications/contact.js b/lib/app/communications/contact.js index e1bfb20..4977dfe 100644 --- a/lib/app/communications/contact.js +++ b/lib/app/communications/contact.js @@ -1,7 +1,4 @@ -import { createElement } from "../../functions"; -import { createCheckbox } from "../../ui/checkbox"; -import Dropdown from "../../ui/dropdown"; -import { createPopup, showAlert } from "../../ui/popup"; +import { Dropdown, createElement, createCheckbox, createPopup, showAlert } from "../../ui"; import { isEmail, nullOrEmpty, r } from "../../utility"; class Contact { diff --git a/lib/app/communications/customer.js b/lib/app/communications/customer.js index 3cf3cfd..8ad5947 100644 --- a/lib/app/communications/customer.js +++ b/lib/app/communications/customer.js @@ -1,14 +1,6 @@ -import "./style.scss"; -import { createElement } from "../../functions"; -import { r } from "../../utility/lgres"; -import { nullOrEmpty } from "../../utility/strings"; -import { formatUrl, isEmail, isPhone } from "../../utility"; -import { setTooltip } from "../../ui/tooltip"; -import { createIcon } from "../../ui/icon"; -import { createCheckbox, createRadiobox } from "../../ui/checkbox"; +import { Grid, createElement, setTooltip, createIcon, createCheckbox, createRadiobox, createPopup, showAlert, showConfirm } from "../../ui"; +import { r, nullOrEmpty, formatUrl, isEmail, isPhone } from "../../utility"; import { createBox } from "./lib"; -import { createPopup, showAlert, showConfirm } from "../../ui/popup"; -import Grid from "../../ui/grid"; import Contact from "./contact"; import Follower from "./follower"; @@ -107,28 +99,6 @@ class CustomerCommunication { } } - #createContactItem(c) { - if (c.OptOut || c.OptOut_BC || c.selected === false) { - return null; - } - const mp = String(c.MobilePhone).trim(); - const email = String(c.Email).trim(); - const pref = String(c.ContactPreference); - if (pref === '0' && !isPhone(mp) || - pref === '1' && !isEmail(email)) { - return null; - } - const to = pref === '0' ? mp : email; - return createElement('div', 'contact-item', - createIcon('fa-light', pref === '0' ? 'comment-lines' : 'envelope'), - setTooltip(createElement('span', span => { - span.dataset.to = to; - span.dataset.name = c.Name; - span.innerText = to; - }), to, true) - ); - } - get contacts() { return [...this.#contacts.children].map(el => { const span = el.querySelector('span'); @@ -139,10 +109,26 @@ class CustomerCommunication { this.#contacts.replaceChildren(); if (contacts?.length > 0) { for (let c of contacts) { - const item = this.#createContactItem(c); - if (item != null) { - this.#contacts.appendChild(item); + if (c.OptOut || c.OptOut_BC || c.selected === false) { + continue; } + const mp = String(c.MobilePhone).trim(); + const email = String(c.Email).trim(); + const pref = String(c.ContactPreference); + if (pref === '0' && !isPhone(mp) || + pref === '1' && !isEmail(email)) { + continue; + } + const to = pref === '0' ? mp : email; + const item = createElement('div', 'contact-item', + createIcon('fa-light', pref === '0' ? 'comment-lines' : 'envelope'), + setTooltip(createElement('span', span => { + span.dataset.to = to; + span.dataset.name = c.Name; + span.innerText = to; + }), to, true) + ); + this.#contacts.appendChild(item); } this.#message.scrollTop = this.#message.scrollHeight } @@ -175,7 +161,7 @@ class CustomerCommunication { get followers() { return [...this.#followers.children].map(el => { const span = el.querySelector('span'); - return { 'Key': span.dataset.to, 'Value': span.dataset.name }; + return { 'Email': span.dataset.email, 'MobilePhone': span.dataset.mp, 'Value': span.dataset.name }; }); } set followers(followers) { @@ -184,10 +170,32 @@ class CustomerCommunication { if (followers?.length > 0) { this.#container.querySelector('.follower-bar').style.display = ''; for (let f of followers) { - const item = this.#createContactItem(f); - if (item != null) { - this.#followers.appendChild(item); + if (f.OptOut) { + continue; } + const mp = String(f.MobilePhone).trim(); + const email = String(f.Email).trim(); + const tips = []; + if (f.SendEmail) { + tips.push(r('emailColon', 'Email:') + ` ${email}`); + } + if (f.SendText) { + tips.push(r('phoneColon', 'Mobile Phone:' + ` ${mp}`)); + } + const item = createElement('div', 'contact-item', + createIcon('fa-light', f.SendText ? 'comment-lines' : 'envelope'), + setTooltip(createElement('span', span => { + if (f.SendEmail) { + span.dataset.email = email; + } + if (f.SendText) { + span.dataset.mp = mp; + } + span.dataset.name = f.Name; + span.innerText = f.SendText ? mp : email; + }), tips.join('\n'), true) + ); + this.#followers.appendChild(item); } } else { this.#container.querySelector('.follower-bar').style.display = 'none'; @@ -585,28 +593,6 @@ class CustomerCommunication { height: '16px' })); button.addEventListener('click', () => { - /*const add = new Contact({ - onSave: (item) => { - const exists = this.#gridContact.source.some(s => s.Name === item.Name && s.MobilePhone === item.MobilePhone); - if (exists) { - showAlert(r('addContact', 'Add Contact'), r('contactUniqueRequired', 'Contact name and contact mobile must be a unique combination.'), 'warn'); - return false; - } - if (typeof option.onSave === 'function') { - const result = option.onSave(item, true); - if (typeof result?.then === 'function') { - return result.then(r => { - this.#gridContact.source = r.filter(c => c.Id >= 0); - this.#gridWo.source = r.filter(c => c.Id < 0); - return r; - }); - } - return false; - } - } - }); - add.show(container); - */ if (typeof this.#option.onInitFollower === 'function') { this.#option.onInitFollower().then(data => { if (typeof data === 'string') { @@ -614,7 +600,19 @@ class CustomerCommunication { return; } const add = new Follower({ - followers: data + followers: data, + onOk: list => { + if (typeof this.#option.onAddFollower === 'function') { + const result = this.#option.onAddFollower(list); + if (typeof result?.then === 'function') { + return result.then(r => { + this.#gridFollower.source = r; + return r; + }); + } + return false; + } + } }); add.show(container); }) @@ -646,7 +644,7 @@ class CustomerCommunication { key: 'type', type: Grid.ColumnTypes.Icon, width: 50, - filter: c => String(c.ContactPreference) === '0' ? 'comment-lines' : 'envelope', + filter: c => c.SendText ? 'comment-lines' : 'envelope', className: 'icon-contact-type', iconType: 'fa-light' }, diff --git a/lib/app/communications/follower.js b/lib/app/communications/follower.js index 2cbea9c..299950f 100644 --- a/lib/app/communications/follower.js +++ b/lib/app/communications/follower.js @@ -1,10 +1,9 @@ -import { createElement } from "../../functions"; -import Grid from "../../ui/grid"; -import { createPopup } from "../../ui/popup"; -import { nullOrEmpty, r } from "../../utility"; +import { Grid, createElement, createPopup } from "../../ui"; +import { nullOrEmpty, r, contains } from "../../utility"; class Follower { #option; + #grid; constructor(option = {}) { this.#option = option; @@ -19,15 +18,29 @@ class Follower { createElement('input', search => { search.className = 'ui-input follower-search'; search.addEventListener('input', () => { - + const key = search.value; + if (nullOrEmpty(key)) { + this.#grid.source = this.#option.followers; + } else { + this.#grid.source = this.#option.followers.filter(f => contains(f.DisplayName, key, true)); + } }); }), gridContainer ), - { text: r('ok', 'OK'), key: 'ok' }, + { + text: r('ok', 'OK'), + key: 'ok', + trigger: () => { + if (typeof this.#option.onOk === 'function') { + return this.#option.onOk.call(this, this.#grid.source.filter(f => f.Email || f.Text)); + } + } + }, { text: r('cancel', 'Cancel'), key: 'cancel' } ); const result = await popup.show(parent); + result.querySelector('.follower-search').focus(); // grid const grid = new Grid(gridContainer); grid.columns = [ @@ -50,6 +63,7 @@ class Follower { ]; grid.init(); grid.source = this.#option.followers; + this.#grid = grid; return result; } } diff --git a/lib/app/communications/internal.js b/lib/app/communications/internal.js index 940bcda..6f6ac17 100644 --- a/lib/app/communications/internal.js +++ b/lib/app/communications/internal.js @@ -1,10 +1,5 @@ -import "./style.scss"; -import { createElement } from "../../functions"; -import { r } from "../../utility/lgres"; -import { nullOrEmpty } from "../../utility/strings"; -import { escapeHtml } from "../../utility"; -import { setTooltip } from "../../ui/tooltip"; -import { createIcon } from "../../ui/icon"; +import { createElement, setTooltip, createIcon } from "../../ui"; +import { r, nullOrEmpty, escapeHtml } from "../../utility"; import { createBox } from "./lib"; class InternalComment { diff --git a/lib/app/communications/lib.js b/lib/app/communications/lib.js index 95467b1..8696905 100644 --- a/lib/app/communications/lib.js +++ b/lib/app/communications/lib.js @@ -1,4 +1,4 @@ -import { createElement } from "../../functions"; +import { createElement } from "../../ui"; function createBox(title, functions) { const container = createElement('div', 'comm'); diff --git a/lib/app/communications/style.scss b/lib/app/communications/style.scss index 099c4cb..9030361 100644 --- a/lib/app/communications/style.scss +++ b/lib/app/communications/style.scss @@ -359,6 +359,11 @@ .follower-wrapper { display: flex; flex-direction: column; + width: 600px; + + >.follower-search { + margin-bottom: 6px; + } >.follower-grid { height: 380px; diff --git a/lib/ui.js b/lib/ui.js index 7b13823..584c1da 100644 --- a/lib/ui.js +++ b/lib/ui.js @@ -1,18 +1,21 @@ import "../css/ui.scss"; +import { createElement } from "./functions"; import { createIcon, resolveIcon } from "./ui/icon"; -import { createCheckbox, resolveCheckbox } from "./ui/checkbox"; +import { createCheckbox, createRadiobox, resolveCheckbox } from "./ui/checkbox"; import { setTooltip, resolveTooltip } from "./ui/tooltip"; import Dropdown from "./ui/dropdown"; import Grid from "./ui/grid"; import Popup from "./ui/popup"; -import { createPopup } from "./ui/popup"; +import { createPopup, showAlert, showConfirm } from "./ui/popup"; export { + createElement, // icon createIcon, resolveIcon, // checkbox createCheckbox, + createRadiobox, resolveCheckbox, // tooltip setTooltip, @@ -23,5 +26,7 @@ export { Grid, // popup Popup, - createPopup + createPopup, + showAlert, + showConfirm } diff --git a/lib/ui/popup.js b/lib/ui/popup.js index 092cf5b..0a46bb6 100644 --- a/lib/ui/popup.js +++ b/lib/ui/popup.js @@ -89,7 +89,7 @@ class Popup { return new Promise(resolve => { setTimeout(() => { mask.style.opacity = 1 - resolve(); + resolve(mask); }, 0); }); } diff --git a/package-lock.json b/package-lock.json index 05bb2bc..f0dcc19 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "devDependencies": { "postcss-preset-env": "^8.2.0", "sass": "^1.60.0", - "vite": "^4.0.4" + "vite": "^4.0.4", + "vite-plugin-externals": "^0.6.2" } }, "node_modules/@csstools/cascade-layer-name-parser": { @@ -947,6 +948,18 @@ "node": ">=12" } }, + "node_modules/acorn": { + "version": "8.8.2", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", + "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==", + "dev": true, + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -1173,6 +1186,12 @@ "integrity": "sha512-gM7TdwuG3amns/1rlgxMbeeyNoBFPa+4Uu0c7FeROWh4qWmvSOnvcslKmWy51ggLKZ2n/F/4i2HJ+PVNxH9uCQ==", "dev": true }, + "node_modules/es-module-lexer": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.4.1.tgz", + "integrity": "sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA==", + "dev": true + }, "node_modules/esbuild": { "version": "0.17.14", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.14.tgz", @@ -1244,6 +1263,20 @@ "url": "https://www.patreon.com/infusion" } }, + "node_modules/fs-extra": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", + "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", @@ -1276,6 +1309,12 @@ "node": ">= 6" } }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", + "dev": true + }, "node_modules/has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -1348,6 +1387,27 @@ "node": ">=0.12.0" } }, + "node_modules/jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "dev": true, + "dependencies": { + "universalify": "^2.0.0" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/magic-string": { + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz", + "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==", + "dev": true, + "dependencies": { + "sourcemap-codec": "^1.4.8" + } + }, "node_modules/nanoid": { "version": "3.3.6", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", @@ -2065,6 +2125,13 @@ "node": ">=0.10.0" } }, + "node_modules/sourcemap-codec": { + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", + "deprecated": "Please use @jridgewell/sourcemap-codec instead", + "dev": true + }, "node_modules/supports-preserve-symlinks-flag": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", @@ -2089,6 +2156,15 @@ "node": ">=8.0" } }, + "node_modules/universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "dev": true, + "engines": { + "node": ">= 10.0.0" + } + }, "node_modules/update-browserslist-db": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz", @@ -2169,6 +2245,24 @@ "optional": true } } + }, + "node_modules/vite-plugin-externals": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/vite-plugin-externals/-/vite-plugin-externals-0.6.2.tgz", + "integrity": "sha512-R5oVY8xDJjLXLTs2XDYzvYbc/RTZuIwOx2xcFbYf+/VXB6eJuatDgt8jzQ7kZ+IrgwQhe6tU8U2fTyy72C25CQ==", + "dev": true, + "dependencies": { + "acorn": "^8.4.0", + "es-module-lexer": "^0.4.1", + "fs-extra": "^10.0.0", + "magic-string": "^0.25.7" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "vite": ">=2.0.0" + } } } } diff --git a/package.json b/package.json index b90d2ec..1e09066 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "devDependencies": { "postcss-preset-env": "^8.2.0", "sass": "^1.60.0", - "vite": "^4.0.4" + "vite": "^4.0.4", + "vite-plugin-externals": "^0.6.2" } } diff --git a/vite.build.js b/vite.build.js index e957bd9..bfdba58 100644 --- a/vite.build.js +++ b/vite.build.js @@ -1,5 +1,6 @@ import { build } from "vite"; import postcssPresetEnv from "postcss-preset-env"; +import { viteExternalsPlugin } from "vite-plugin-externals"; const libraries = [ { @@ -47,7 +48,13 @@ const libraries = [ sourcemap: true, outDir: '../../../../IronIntel/Contractor2.0/Contractor/Site/js/lib', emptyOutDir: false - } + }, + plugins: [ + viteExternalsPlugin({ + '../../ui': 'lib-ui', + '../../utility': 'lib-utility' + }) + ] }, { clearScreen: false,