tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add vite external plugin

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-12 14:45:51 +08:00
parent 9754bd8fbe
commit ee2c1c88f1
14 changed files with 210 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
lib/app.js
View File

@ -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
}

5
lib/app/communications/contact.js
View File

@ -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 {

124
lib/app/communications/customer.js
View File

@ -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'
},

26
lib/app/communications/follower.js
View File

@ -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;
}
}

9
lib/app/communications/internal.js
View File

@ -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 {

2
lib/app/communications/lib.js
View File

@ -1,4 +1,4 @@
import { createElement } from "../../functions";
import { createElement } from "../../ui";
function createBox(title, functions) {
const container = createElement('div', 'comm');

5
lib/app/communications/style.scss
View File

@ -359,6 +359,11 @@
.follower-wrapper {
display: flex;
flex-direction: column;
width: 600px;
>.follower-search {
margin-bottom: 6px;
}
>.follower-grid {
height: 380px;

11
lib/ui.js
View File

@ -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
}

2
lib/ui/popup.js
View File

@ -89,7 +89,7 @@ class Popup {
return new Promise(resolve => {
setTimeout(() => {
mask.style.opacity = 1
resolve();
resolve(mask);
}, 0);
});
}