From ee2c1c88f109dea7e4e08f46aaed23bb456cf9b7 Mon Sep 17 00:00:00 2001
From: Tsanie Lily <tsorgy@gmail.com>
Date: Wed, 12 Apr 2023 14:45:51 +0800
Subject: [PATCH] add vite external plugin
---
css/dropdown.scss | 4 +-
css/variables/definition.scss | 4 +-
lib/app.js | 7 +-
lib/app/communications/contact.js | 5 +-
lib/app/communications/customer.js | 124 ++++++++++++++---------------
lib/app/communications/follower.js | 26 ++++--
lib/app/communications/internal.js | 9 +--
lib/app/communications/lib.js | 2 +-
lib/app/communications/style.scss | 5 ++
lib/ui.js | 11 ++-
lib/ui/popup.js | 2 +-
package-lock.json | 96 +++++++++++++++++++++-
package.json | 3 +-
vite.build.js | 9 ++-
14 files changed, 210 insertions(+), 97 deletions(-)
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,