diff --git a/index.html b/index.html
index 9559e81..f9aab1a 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
checkbox
tooltip
dropdown
- grid
+ grid
popup
diff --git a/lib/app/communications/contact.js b/lib/app/communications/contact.js
index 1ec6d82..1a57c2a 100644
--- a/lib/app/communications/contact.js
+++ b/lib/app/communications/contact.js
@@ -56,7 +56,7 @@ class Contact {
}
item.SaveToCustomer = 1;
if (typeof this.#option.onSave === 'function') {
- return this.#option.onSave.call(this, item, c == null);
+ return this.#option.onSave.call(this, item, 'customerrecord');
}
}
});
@@ -69,9 +69,10 @@ class Contact {
if (item == null) {
return false;
}
+ item.Id = -1;
item.SaveToCustomer = 0;
if (typeof this.#option.onSave === 'function') {
- return this.#option.onSave.call(this, item, c == null);
+ return this.#option.onSave.call(this, item, 'workorder');
}
}
},
@@ -162,6 +163,10 @@ class Contact {
let contact = this.#option.contact;
if (contact == null) {
contact = {};
+ } else if (contact.OptOut !== opt) {
+ if (opt !== false || contact.OptOut_BC === false) {
+ contact.selected = !opt;
+ }
}
contact.Name = name;
contact.ContactPreference = pref;
diff --git a/lib/app/communications/customer.js b/lib/app/communications/customer.js
index b3ed7e4..5393582 100644
--- a/lib/app/communications/customer.js
+++ b/lib/app/communications/customer.js
@@ -165,10 +165,19 @@ class CustomerCommunication {
if (this.#container == null) {
return;
}
- this.#container.querySelector('.button-edit-contacts').style.display = flag === true ? 'none' : '';
- this.#container.querySelector('.button-edit-followers').style.display = flag === true ? 'none' : '';
- this.#enter.disabled = flag === true;
- this.#container.querySelector('.button-send-message').style.display = flag === true ? 'none' : '';
+ const link = this.#container.querySelector('.check-status-link');
+ if (flag === true) {
+ link.classList.add('disabled');
+ } else {
+ link.classList.remove('disabled');
+ }
+ link.querySelector('input').disabled = flag;
+ const display = flag === true ? 'none' : '';
+ this.#container.querySelector('.button-edit-contacts').style.display = display;
+ this.#container.querySelector('.button-edit-followers').style.display = display;
+ // this.#enter.disabled = flag === true;
+ this.#container.querySelector('.message-bar').style.display = display;
+ // this.#container.querySelector('.button-send-message').style.display = display;
}
/**
@@ -261,6 +270,7 @@ class CustomerCommunication {
create() {
const option = this.#option;
+ const readonly = option.readonly;
// functions
const checkAutoUpdate = createCheckbox({
className: 'check-auto-update',
@@ -273,8 +283,12 @@ class CustomerCommunication {
r('autoUpdateDisabled', 'Auto Updates Disabled'));
}
});
+ if (option.autoUpdatesVisible === false) {
+ checkAutoUpdate.style.display = 'none';
+ }
const checkLink = createCheckbox({
className: 'check-status-link',
+ enabled: !readonly,
checked: option.statusLink,
checkedNode: createIcon('fa-regular', 'link'),
uncheckedNode: createIcon('fa-regular', 'unlink'),
@@ -284,6 +298,9 @@ class CustomerCommunication {
r('statusLinkExcluded', 'Status Link Excluded'));
}
});
+ if (option.statusLinkVisible === false) {
+ checkLink.style.display = 'none';
+ }
const container = createBox(
createElement('div', null,
createElement('div', div => div.innerText = r('messages', 'Customer Communication')),
@@ -302,6 +319,62 @@ class CustomerCommunication {
]
);
// contacts
+ this.#contacts = this.#createContacts(container, option);
+ // followers
+ this.#followers = this.#createFollowers(container, option);
+ // enter box
+ const enter = createElement('textarea');
+ enter.placeholder = r('typeMessage', 'Enter Message Here');
+ enter.maxLength = 3000;
+ // if (readonly === true) {
+ // enter.disabled = true;
+ // }
+ enter.addEventListener('input', () => {
+ const val = this.#enter.value;
+ const s = String(nullOrEmpty(val) ? 0 : val.length) + '/3000';
+ this.#container.querySelector('.message-bar .prompt-count').innerText = s;
+ });
+ this.#enter = enter;
+ container.appendChild(
+ createElement('div', div => {
+ div.className = 'message-bar';
+ if (readonly === true) {
+ div.style.display = 'none';
+ }
+ },
+ enter,
+ createElement('div', div => div.style.textAlign = 'right',
+ createElement('div', 'prompt-count'),
+ createElement('button', button => {
+ button.className = 'roundbtn button-send-message';
+ button.style.backgroundColor = 'rgb(19, 150, 204)';
+ // if (readonly === true) {
+ // button.style.display = 'none';
+ // }
+ button.appendChild(createIcon('fa-solid', 'paper-plane'));
+ setTooltip(button, r('sendMessage', 'Send Message'));
+ button.addEventListener('click', () => {
+ const val = this.#enter.value;
+ if (nullOrEmpty(val?.trim())) {
+ showAlert(r('error', 'Error'), r('messageRequired', 'Please input the message.'), 'warn');
+ return;
+ }
+ if (typeof this.#option.onAddMessage === 'function') {
+ this.#option.onAddMessage(this.#enter.value);
+ }
+ })
+ })
+ )
+ )
+ );
+
+ const message = createElement('div', 'list-bar');
+ this.#message = message;
+ container.appendChild(message);
+ return this.#container = container;
+ }
+
+ #createContacts(container, option) {
const readonly = option.readonly;
const recordReadonly = option.recordReadonly;
const contacts = createElement('div');
@@ -357,7 +430,7 @@ class CustomerCommunication {
button.addEventListener('click', () => {
const add = new Contact({
company: !nullOrEmpty(this.#data.companyCode),
- onSave: (item) => {
+ 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');
@@ -367,8 +440,24 @@ class CustomerCommunication {
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);
+ this.#gridContact.source = r.filter(c => c.Id >= 0).map(c => {
+ if (c.OptOut || c.OptOut_BC) {
+ return c;
+ }
+ if (typeof c.selected === 'undefined') {
+ c.selected = true;
+ }
+ return c;
+ });
+ this.#gridWo.source = r.filter(c => c.Id < 0).map(c => {
+ if (c.OptOut || c.OptOut_BC) {
+ return c;
+ }
+ if (typeof c.selected === 'undefined') {
+ c.selected = true;
+ }
+ return c;
+ });
return r;
});
}
@@ -456,7 +545,7 @@ class CustomerCommunication {
const edit = new Contact({
contact: this,
company: !nullOrEmpty(This.#data.companyCode),
- onSave: item => {
+ onSave: (item, _op) => {
const exists =
This.#gridContact.source.some(s => s !== this && s.Name === item.Name && s.MobilePhone === item.MobilePhone) ||
This.#gridWo.source.some(s => s !== this && s.Name === item.Name && s.MobilePhone === item.MobilePhone);
@@ -468,8 +557,24 @@ class CustomerCommunication {
const result = option.onSave(item);
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);
+ This.#gridContact.source = r.filter(c => c.Id >= 0).map(c => {
+ if (c.OptOut || c.OptOut_BC) {
+ return c;
+ }
+ if (typeof c.selected === 'undefined') {
+ c.selected = true;
+ }
+ return c;
+ });
+ This.#gridWo.source = r.filter(c => c.Id < 0).map(c => {
+ if (c.OptOut || c.OptOut_BC) {
+ return c;
+ }
+ if (typeof c.selected === 'undefined') {
+ c.selected = true;
+ }
+ return c;
+ });
return r;
});
}
@@ -504,7 +609,10 @@ class CustomerCommunication {
showConfirm(
r('remoteContact', 'Remove Contact'),
createElement('div', null,
- createElement('div', div => div.innerText = r('removeFrom', 'Remove {name} from').replace('{name}', this.Name)),
+ createElement('div', div => {
+ div.style.paddingLeft = '16px';
+ div.innerText = r('removeFrom', 'Remove {name} from').replace('{name}', this.Name);
+ }),
createElement('div', div => {
div.style.display = 'flex';
div.style.justifyContent = 'center';
@@ -525,21 +633,22 @@ class CustomerCommunication {
[
{ key: 'ok', text: r('ok', 'OK') },
{ key: 'cancel', text: r('cancel', 'Cancel') }
- ]).then(result => {
- if (result?.key === 'ok') {
- const isRecord = result.popup.container.querySelector('.radio-customer-record>input').checked;
- if (typeof option.onDelete === 'function') {
- option.onDelete(result.key, this, isRecord);
- }
- const index = grid.source.indexOf(this);
- if (index >= 0) {
- const source = grid.source;
- source.splice(index, 1);
- grid.extraRows = source.filter(c => !nullOrEmpty(c.Notes)).length;
- grid.source = source;
- }
+ ]
+ ).then(result => {
+ if (result?.key === 'ok') {
+ const isRecord = result.popup.container.querySelector('.radio-customer-record>input').checked;
+ if (typeof option.onDelete === 'function') {
+ option.onDelete(result.key, this, isRecord);
}
- });
+ const index = grid.source.indexOf(this);
+ if (index >= 0) {
+ const source = grid.source;
+ source.splice(index, 1);
+ grid.extraRows = source.filter(c => !nullOrEmpty(c.Notes)).length;
+ grid.source = source;
+ }
+ }
+ });
}
}
}
@@ -627,8 +736,12 @@ class CustomerCommunication {
)
)
);
- this.#contacts = contacts;
- // followers
+ return contacts;
+ }
+
+ #createFollowers(container, option) {
+ const readonly = option.readonly;
+ const recordReadonly = option.recordReadonly;
const followers = createElement('div');
const buttonEditFollower = createElement('button', button => {
button.className = 'roundbtn button-edit-followers';
@@ -681,7 +794,7 @@ class CustomerCommunication {
}
});
add.show(container);
- })
+ });
}
});
setTooltip(button, r('addFollower', 'Add Follower'))
@@ -701,6 +814,12 @@ class CustomerCommunication {
)
);
pop.show(container).then(() => {
+ const buttonCol = {
+ type: Grid.ColumnTypes.Icon,
+ width: 40,
+ align: 'center',
+ iconType: 'fa-light'
+ };
const grid = new Grid();
grid.height = 0;
grid.allowHtml = true;
@@ -710,40 +829,132 @@ class CustomerCommunication {
key: 'type',
type: Grid.ColumnTypes.Icon,
width: 50,
- filter: c => c.SendText ? 'comment-lines' : 'envelope',
+ filter: c => c.SendText && c.SendEmail ? 'at' : (c.SendText ? 'comment-lines' : 'envelope'),
className: 'icon-contact-type',
iconType: 'fa-light'
},
{ key: 'Name', width: 160 },
{ key: 'Email', width: 180 },
{ key: 'MobilePhone', width: 130 },
+ {
+ key: 'edit',
+ ...buttonCol,
+ text: 'edit',
+ tooltip: r('edit', 'Edit'),
+ events: {
+ onclick: function () {
+ if (typeof option.onInitFollower === 'function') {
+ option.onInitFollower().then(data => {
+ if (typeof data === 'string') {
+ showAlert(r('customerRecord', 'Customer Record'), data, 'warn');
+ return;
+ }
+ const contact = data.find(d => d.IID === this.UserIID);
+ showConfirm(
+ r('editContactMethod', 'Edit Contact Method'),
+ createElement('div', 'wrapper-edit-method',
+ createElement('div', div => {
+ div.style.display = 'flex';
+ div.style.justifyContent = 'center';
+ div.style.marginTop = '20px';
+ },
+ createCheckbox({
+ label: r('text', 'Text'),
+ checked: this.SendText && !nullOrEmpty(contact?.Mobile),
+ enabled: !nullOrEmpty(contact?.Mobile),
+ className: 'check-method-text'
+ }),
+ createCheckbox({
+ label: r('email', 'Email'),
+ checked: this.SendEmail,
+ className: 'check-method-email'
+ })
+ )
+ ),
+ [
+ {
+ key: 'ok',
+ text: r('ok', 'OK'),
+ trigger: (popup, button) => {
+ const text = popup.container.querySelector('.check-method-text>input').checked;
+ const email = popup.container.querySelector('.check-method-email>input').checked;
+
+ if (!text && !email) {
+ return showConfirm(r('editContactMethod', 'Edit Contact Method'), r('promptRemoveFollower', 'Contact method is required. If you continue, user will be removed as a follower.'), [
+ { key: 'update', text: r('updateContactMethod', 'Update Contact Method') },
+ { key: 'remove', text: r('removeFollower', 'Remove Follower') }
+ ], 'question').then(result => {
+ if (result?.key === 'remove') {
+ return {
+ key: result.key,
+ popup
+ };
+ }
+ return false;
+ });
+ }
+ return {
+ key: button.key,
+ popup
+ };
+ }
+ },
+ { key: 'cancel', text: r('cancel', 'Cancel') }
+ ],
+ null
+ ).then(result => {
+ const key = result?.key;
+ if (key === 'remove') {
+ if (typeof option.onDeleteFollower === 'function') {
+ option.onDeleteFollower(result.key, this);
+ }
+ const index = grid.source.indexOf(this);
+ if (index >= 0) {
+ const source = grid.source;
+ source.splice(index, 1);
+ grid.extraRows = source.filter(c => !nullOrEmpty(c.Notes)).length;
+ grid.source = source;
+ }
+ } else if (key === 'ok') {
+ const text = result.popup.container.querySelector('.check-method-text>input').checked;
+ const email = result.popup.container.querySelector('.check-method-email>input').checked;
+ if (typeof option.onChangeFollower === 'function') {
+ option.onChangeFollower(result.key, this, text, email);
+ }
+ this.SendText = text;
+ this.SendEmail = email;
+ grid.refresh();
+ }
+ });
+ });
+ }
+ }
+ }
+ },
{
key: 'delete',
- type: Grid.ColumnTypes.Icon,
- width: 40,
- align: 'center',
- iconType: 'fa-light',
+ ...buttonCol,
text: 'times',
tooltip: r('delete', 'Delete'),
events: {
onclick: function () {
showConfirm(
r('deleteFollower', 'Delete Follower'),
- r('promptDeleteFollower', 'Do you want to delete this follower?'))
- .then(result => {
- if (result?.key === 'yes') {
- if (typeof option.onDeleteFollower === 'function') {
- option.onDeleteFollower(result.key, this);
- }
- const index = grid.source.indexOf(this);
- if (index >= 0) {
- const source = grid.source;
- source.splice(index, 1);
- grid.extraRows = source.filter(c => !nullOrEmpty(c.Notes)).length;
- grid.source = source;
- }
+ r('promptDeleteFollower', 'Do you want to delete this follower?')
+ ).then(result => {
+ if (result?.key === 'yes') {
+ if (typeof option.onDeleteFollower === 'function') {
+ option.onDeleteFollower(result.key, this);
}
- });
+ const index = grid.source.indexOf(this);
+ if (index >= 0) {
+ const source = grid.source;
+ source.splice(index, 1);
+ grid.extraRows = source.filter(c => !nullOrEmpty(c.Notes)).length;
+ grid.source = source;
+ }
+ }
+ });
}
}
}
@@ -775,52 +986,7 @@ class CustomerCommunication {
)
)
);
- this.#followers = followers;
- // enter box
- const enter = createElement('textarea');
- enter.placeholder = r('typeMessage', 'Enter Message Here');
- enter.maxLength = 3000;
- if (readonly === true) {
- enter.disabled = true;
- }
- enter.addEventListener('input', () => {
- const val = this.#enter.value;
- const s = String(nullOrEmpty(val) ? 0 : val.length) + '/3000';
- this.#container.querySelector('.message-bar .prompt-count').innerText = s;
- });
- this.#enter = enter;
- container.appendChild(
- createElement('div', 'message-bar',
- enter,
- createElement('div', div => div.style.textAlign = 'right',
- createElement('div', 'prompt-count'),
- createElement('button', button => {
- button.className = 'roundbtn button-send-message';
- button.style.backgroundColor = 'rgb(19, 150, 204)';
- if (readonly === true) {
- button.style.display = 'none';
- }
- button.appendChild(createIcon('fa-solid', 'paper-plane'));
- setTooltip(button, r('sendMessage', 'Send Message'));
- button.addEventListener('click', () => {
- const val = this.#enter.value;
- if (nullOrEmpty(val?.trim())) {
- showAlert(r('error', 'Error'), r('messageRequired', 'Please input the message.'), 'warn');
- return;
- }
- if (typeof this.#option.onAddMessage === 'function') {
- this.#option.onAddMessage(this.#enter.value);
- }
- })
- })
- )
- )
- );
-
- const message = createElement('div', 'list-bar');
- this.#message = message;
- container.appendChild(message);
- return this.#container = container;
+ return followers;
}
load(data, contacts, followers) {
diff --git a/lib/app/communications/follower.js b/lib/app/communications/follower.js
index 0c0eabf..fbcba0d 100644
--- a/lib/app/communications/follower.js
+++ b/lib/app/communications/follower.js
@@ -58,7 +58,7 @@ class Follower {
caption: r('email', 'Email'),
type: Grid.ColumnTypes.Checkbox,
width: 70,
- enabled: item => !nullOrEmpty(item.ID)
+ // enabled: item => !nullOrEmpty(item.ID)
}
];
grid.init();
diff --git a/lib/app/communications/internal.js b/lib/app/communications/internal.js
index 09667de..8ce1ada 100644
--- a/lib/app/communications/internal.js
+++ b/lib/app/communications/internal.js
@@ -63,7 +63,7 @@ class InternalComment {
createElement('button', button => {
button.className = 'roundbtn button-send-message';
button.style.backgroundColor = 'rgb(19, 150, 204)';
- if (readonly === true) {
+ if (readonly === true || this.#option.noMessage === true) {
button.style.display = 'none';
}
button.appendChild(createIcon('fa-solid', 'paper-plane'));
diff --git a/lib/app/communications/style.scss b/lib/app/communications/style.scss
index 36bea08..f676e1e 100644
--- a/lib/app/communications/style.scss
+++ b/lib/app/communications/style.scss
@@ -1,5 +1,13 @@
@import '../../../css/variables/definition.scss';
+.popup-mask .wrapper-edit-method {
+ width: 100%;
+
+ .checkbox-wrapper {
+ padding: 0 28px;
+ }
+}
+
.comm {
display: flex;
flex-direction: column;
@@ -207,6 +215,12 @@
padding: 10px 10px 0;
border: none;
height: 70px;
+ resize: none;
+
+ &:focus,
+ &:focus-visible {
+ outline: none;
+ }
}
>div {
diff --git a/lib/ui.js b/lib/ui.js
index 584c1da..f30d5ae 100644
--- a/lib/ui.js
+++ b/lib/ui.js
@@ -4,7 +4,7 @@ import { createIcon, resolveIcon } from "./ui/icon";
import { createCheckbox, createRadiobox, resolveCheckbox } from "./ui/checkbox";
import { setTooltip, resolveTooltip } from "./ui/tooltip";
import Dropdown from "./ui/dropdown";
-import Grid from "./ui/grid";
+import Grid from "./ui/grid/grid";
import Popup from "./ui/popup";
import { createPopup, showAlert, showConfirm } from "./ui/popup";
diff --git a/lib/ui/checkbox.js b/lib/ui/checkbox.js
index 01f544e..13b9dba 100644
--- a/lib/ui/checkbox.js
+++ b/lib/ui/checkbox.js
@@ -63,6 +63,9 @@ function createCheckbox(opts = {}) {
if (opts.className) {
container.classList.add(opts.className);
}
+ if (opts.enabled === false) {
+ container.classList.add('disabled');
+ }
if (opts.checkedNode != null && opts.uncheckedNode != null) {
container.classList.add('checkbox-image');
let height = opts.imageHeight;
@@ -120,7 +123,11 @@ function resolveCheckbox(container = document.body, legacy) {
} else {
text = label.innerText;
}
- label.className = 'checkbox-wrapper';
+ if (chk.disabled) {
+ label.className = 'checkbox-wrapper disabled';
+ } else {
+ label.className = 'checkbox-wrapper';
+ }
label.replaceChildren();
fillCheckbox(label, 'fa-regular', text);
label.insertBefore(chk, label.firstChild);
diff --git a/lib/ui/grid/column.js b/lib/ui/grid/column.js
new file mode 100644
index 0000000..e9f5ac1
--- /dev/null
+++ b/lib/ui/grid/column.js
@@ -0,0 +1,229 @@
+import { global } from "../../utility";
+import { nullOrEmpty } from "../../utility/strings";
+import { createElement } from "../../functions";
+import { createIcon } from "../icon";
+import { createCheckbox } from "../checkbox";
+import { setTooltip } from "../tooltip";
+import Dropdown from "../dropdown";
+
+class GridColumn {
+ static create() { return createElement('span') }
+
+ static setValue(element, val) { element.innerText = val }
+
+ static setStyle(element, style) {
+ for (let css of Object.entries(style)) {
+ element.style.setProperty(css[0], css[1]);
+ }
+ }
+}
+
+class GridInputColumn extends GridColumn {
+ static get editing() { return true };
+
+ static createEdit(trigger, col, _parent, vals) {
+ const input = createElement('input');
+ input.setAttribute('type', 'text');
+ if (typeof trigger === 'function') {
+ input.addEventListener('change', trigger);
+ }
+ input.addEventListener('input', () => {
+ if (vals.__editing == null) {
+ vals.__editing = {
+ [col.key]: true
+ }
+ } else {
+ vals.__editing[col.key] = true;
+ }
+ });
+ return input;
+ }
+
+ static setValue(element, val) {
+ if (element.tagName !== 'INPUT') {
+ super.setValue(element, val);
+ } else {
+ element.value = val;
+ }
+ }
+
+ static getValue(e) { return e.target.value }
+
+ static setEnabled(element, enabled) { element.disabled = enabled === false }
+}
+
+class GridTextColumn extends GridInputColumn {
+ static createEdit(trigger, col, _parent, vals) {
+ const input = createElement('textarea');
+ if (typeof trigger === 'function') {
+ input.addEventListener('change', trigger);
+ }
+ input.addEventListener('input', () => {
+ if (vals.__editing == null) {
+ vals.__editing = {
+ [col.key]: true
+ }
+ } else {
+ vals.__editing[col.key] = true;
+ }
+ });
+ return input;
+ }
+
+ static setValue(element, val, _item, _col, grid) {
+ if (element.tagName !== 'TEXTAREA') {
+ super.setValue(element, val);
+ } else {
+ element.value = val;
+ if (val != null) {
+ const lines = String(val).split('\n').length;
+ element.style.height = `${lines * grid.lineHeight + 12}px`;
+ }
+ }
+ }
+}
+
+const SymbolDropdown = Symbol.for('ui-dropdown');
+
+class GridDropdownColumn extends GridColumn {
+ static createEdit(trigger, col, parent) {
+ const drop = new Dropdown({ ...col.dropOptions, parent });
+ drop.onselected = trigger;
+ return drop.create();
+ }
+
+ static #getDrop(element) {
+ const dropGlobal = global[SymbolDropdown];
+ if (dropGlobal == null) {
+ return null;
+ }
+ const dropId = element.dataset.dropId;
+ const drop = dropGlobal[dropId];
+ if (drop == null) {
+ return null;
+ }
+ return drop;
+ }
+
+ static #getSource(item, col) {
+ let source = col.source;
+ if (typeof source === 'function') {
+ source = source(item);
+ }
+ return source;
+ }
+
+ static #setValue(source, element, val) {
+ const data = source?.find(v => v.value === val);
+ if (data != null) {
+ val = data.text;
+ }
+ super.setValue(element, val);
+ }
+
+ static setValue(element, val, item, col) {
+ if (element.tagName !== 'DIV') {
+ let source = this.#getSource(item, col);
+ if (source instanceof Promise) {
+ source.then(s => this.#setValue(s, element, val));
+ } else {
+ this.#setValue(source, element, val);
+ }
+ return;
+ }
+ const drop = this.#getDrop(element);
+ if (drop == null) {
+ return;
+ }
+ if (drop.source == null || drop.source.length === 0) {
+ let source = this.#getSource(item, col);
+ if (source instanceof Promise) {
+ source.then(s => {
+ drop.source = s;
+ drop.select(val, true);
+ })
+ return;
+ } else if (source != null) {
+ drop.source = source;
+ }
+ }
+ drop.select(val, true);
+ }
+
+ static getValue(e) {
+ return e.value;
+ }
+
+ static setEnabled(element, enabled) {
+ const drop = this.#getDrop(element);
+ if (drop == null) {
+ return;
+ }
+ drop.disabled = enabled === false;
+ }
+}
+
+class GridCheckboxColumn extends GridColumn {
+ static createEdit(trigger) {
+ const check = createCheckbox({
+ onchange: typeof trigger === 'function' ? trigger : null
+ });
+ return check;
+ }
+
+ static setValue(element, val) { element.querySelector('input').checked = val }
+
+ static getValue(e) { return e.target.checked }
+
+ static setEnabled(element, enabled) { element.querySelector('input').disabled = enabled === false }
+}
+
+class GridIconColumn extends GridColumn {
+ static create() { return createElement('span', 'col-icon') }
+
+ static setValue(element, val, item, col, grid) {
+ let className = col.className;
+ if (typeof className === 'function') {
+ className = className.call(col, item);
+ }
+ if (className == null) {
+ element.className = 'col-icon';
+ } else {
+ element.className = `col-icon ${className}`;
+ }
+ let type = col.iconType;
+ if (typeof type === 'function') {
+ type = type.call(col, item);
+ }
+ type ??= 'fa-regular';
+ if (element.dataset.type !== type || element.dataset.icon !== val) {
+ const icon = createIcon(type, val);
+ // const layer = element.children[0];
+ element.replaceChildren(icon);
+ !nullOrEmpty(col.tooltip) && setTooltip(element, col.tooltip, false, grid.element);
+ element.dataset.type = type;
+ element.dataset.icon = val;
+ }
+ }
+
+ static setEnabled(element, enabled) {
+ if (enabled === false) {
+ element.classList.add('disabled');
+ } else {
+ element.classList.remove('disabled');
+ }
+ const tooltip = element.querySelector('.tooltip-wrapper');
+ if (tooltip != null) {
+ tooltip.style.display = enabled === false ? 'none' : '';
+ }
+ }
+}
+
+export {
+ GridColumn,
+ GridInputColumn,
+ GridTextColumn,
+ GridDropdownColumn,
+ GridCheckboxColumn,
+ GridIconColumn
+}
\ No newline at end of file
diff --git a/lib/ui/grid.d.ts b/lib/ui/grid/grid.d.ts
similarity index 98%
rename from lib/ui/grid.d.ts
rename to lib/ui/grid/grid.d.ts
index 65b2319..a5edad8 100644
--- a/lib/ui/grid.d.ts
+++ b/lib/ui/grid/grid.d.ts
@@ -1,4 +1,4 @@
-import { DropdownOptions } from "./dropdown";
+import { DropdownOptions } from "../dropdown";
interface GridItem {
value: any;
diff --git a/lib/ui/grid.html b/lib/ui/grid/grid.html
similarity index 100%
rename from lib/ui/grid.html
rename to lib/ui/grid/grid.html
diff --git a/lib/ui/grid.js b/lib/ui/grid/grid.js
similarity index 88%
rename from lib/ui/grid.js
rename to lib/ui/grid/grid.js
index f34db13..82bdc55 100644
--- a/lib/ui/grid.js
+++ b/lib/ui/grid/grid.js
@@ -1,11 +1,9 @@
-import { global, isPositive, isMobile, throttle, truncate } from "../utility";
-import { nullOrEmpty } from "../utility/strings";
-import { r } from "../utility/lgres";
-import { createElement } from "../functions";
-import { createIcon } from "./icon";
-import { createCheckbox } from "./checkbox";
-import { setTooltip } from "./tooltip";
-import Dropdown from "./dropdown";
+import { global, isPositive, isMobile, throttle, truncate } from "../../utility";
+import { r } from "../../utility/lgres";
+import { createElement } from "../../functions";
+import { createIcon } from "../icon";
+import { createCheckbox } from "../checkbox";
+import { GridColumn, GridInputColumn, GridTextColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn } from "./column";
const ColumnChangedType = {
Reorder: 'reorder',
@@ -41,203 +39,6 @@ function indexOfParent(target) {
return Array.prototype.indexOf.call(target.parentElement.children, target);
}
-class GridColumn {
- static create() { return createElement('span') }
-
- static setValue(element, val) { element.innerText = val }
-
- static setStyle(element, style) {
- for (let css of Object.entries(style)) {
- element.style.setProperty(css[0], css[1]);
- }
- }
-}
-
-class GridInputColumn extends GridColumn {
- static get editing() { return true };
-
- static createEdit(trigger, _col, _parent, vals) {
- const input = createElement('input');
- input.setAttribute('type', 'text');
- if (typeof trigger === 'function') {
- input.addEventListener('change', trigger);
- }
- input.addEventListener('input', () => vals.__editing = true);
- return input;
- }
-
- static setValue(element, val) {
- if (element.tagName !== 'INPUT') {
- super.setValue(element, val);
- } else {
- element.value = val;
- }
- }
-
- static getValue(e) { return e.target.value }
-
- static setEnabled(element, enabled) { element.disabled = enabled === false }
-}
-
-class GridTextColumn extends GridInputColumn {
- static createEdit(trigger, _col, _parent, vals) {
- const input = createElement('textarea');
- if (typeof trigger === 'function') {
- input.addEventListener('change', trigger);
- }
- input.addEventListener('input', () => vals.__editing = true);
- return input;
- }
-
- static setValue(element, val, _item, _col, grid) {
- if (element.tagName !== 'TEXTAREA') {
- super.setValue(element, val);
- } else {
- element.value = val;
- if (val != null) {
- const lines = String(val).split('\n').length;
- element.style.height = `${lines * grid.lineHeight + 12}px`;
- }
- }
- }
-}
-
-const SymbolDropdown = Symbol.for('ui-dropdown');
-
-class GridDropdownColumn extends GridColumn {
- static createEdit(trigger, col, parent) {
- const drop = new Dropdown({ ...col.dropOptions, parent });
- drop.onselected = trigger;
- return drop.create();
- }
-
- static #getDrop(element) {
- const dropGlobal = global[SymbolDropdown];
- if (dropGlobal == null) {
- return null;
- }
- const dropId = element.dataset.dropId;
- const drop = dropGlobal[dropId];
- if (drop == null) {
- return null;
- }
- return drop;
- }
-
- static #getSource(item, col) {
- let source = col.source;
- if (typeof source === 'function') {
- source = source(item);
- }
- return source;
- }
-
- static #setValue(source, element, val) {
- const data = source?.find(v => v.value === val);
- if (data != null) {
- val = data.text;
- }
- super.setValue(element, val);
- }
-
- static setValue(element, val, item, col) {
- if (element.tagName !== 'DIV') {
- let source = this.#getSource(item, col);
- if (source instanceof Promise) {
- source.then(s => this.#setValue(s, element, val));
- } else {
- this.#setValue(source, element, val);
- }
- return;
- }
- const drop = this.#getDrop(element);
- if (drop == null) {
- return;
- }
- if (drop.source == null || drop.source.length === 0) {
- let source = this.#getSource(item, col);
- if (source instanceof Promise) {
- source.then(s => {
- drop.source = s;
- drop.select(val, true);
- })
- return;
- } else if (source != null) {
- drop.source = source;
- }
- }
- drop.select(val, true);
- }
-
- static getValue(e) {
- return e.value;
- }
-
- static setEnabled(element, enabled) {
- const drop = this.#getDrop(element);
- if (drop == null) {
- return;
- }
- drop.disabled = enabled === false;
- }
-}
-
-class GridCheckboxColumn extends GridColumn {
- static createEdit(trigger) {
- const check = createCheckbox({
- onchange: typeof trigger === 'function' ? trigger : null
- });
- return check;
- }
-
- static setValue(element, val) { element.querySelector('input').checked = val }
-
- static getValue(e) { return e.target.checked }
-
- static setEnabled(element, enabled) { element.querySelector('input').disabled = enabled === false }
-}
-
-class GridIconColumn extends GridColumn {
- static create() { return createElement('span', 'col-icon') }
-
- static setValue(element, val, item, col, grid) {
- let className = col.className;
- if (typeof className === 'function') {
- className = className.call(col, item);
- }
- if (className == null) {
- element.className = 'col-icon';
- } else {
- element.className = `col-icon ${className}`;
- }
- let type = col.iconType;
- if (typeof type === 'function') {
- type = type.call(col, item);
- }
- type ??= 'fa-regular';
- if (element.dataset.type !== type || element.dataset.icon !== val) {
- const icon = createIcon(type, val);
- // const layer = element.children[0];
- element.replaceChildren(icon);
- !nullOrEmpty(col.tooltip) && setTooltip(element, col.tooltip, false, grid.element);
- element.dataset.type = type;
- element.dataset.icon = val;
- }
- }
-
- static setEnabled(element, enabled) {
- if (enabled === false) {
- element.classList.add('disabled');
- } else {
- element.classList.remove('disabled');
- }
- const tooltip = element.querySelector('.tooltip-wrapper');
- if (tooltip != null) {
- tooltip.style.display = enabled === false ? 'none' : '';
- }
- }
-}
-
const ColumnTypes = {
0: GridColumn,
1: GridInputColumn,
@@ -882,7 +683,7 @@ class Grid {
const type = isCheckbox ? GridCheckboxColumn : this.#colTypes[col.key] ?? GridColumn;
let element;
if (!isCheckbox && selectChanged && typeof type.createEdit === 'function') {
- if (vals.__editing && type.editing) {
+ if (vals.__editing?.[col.key] && type.editing) {
val = type.getValue({ target: cell.children[0] });
this.#onRowChanged(null, startIndex + i, col, val, true);
}
@@ -938,7 +739,7 @@ class Grid {
}
}
});
- if (vals.__editing) {
+ if (vals.__editing != null) {
delete vals.__editing;
}
});
diff --git a/lib/ui/popup.js b/lib/ui/popup.js
index 0a46bb6..fd098b8 100644
--- a/lib/ui/popup.js
+++ b/lib/ui/popup.js
@@ -1,6 +1,6 @@
import "../../css/popup.scss";
import { createElement } from "../functions";
-import { r } from "../utility";
+import { r, nullOrEmpty } from "../utility";
import { createIcon } from "./icon";
class Popup {
@@ -63,7 +63,11 @@ class Popup {
if (typeof b.trigger === 'function') {
const result = b.trigger(this);
if (typeof result?.then === 'function') {
- result.then(r => r !== false && close()).catch(() => { });
+ result.then(r => {
+ if (r !== false) {
+ close();
+ }
+ }).catch(() => { });
} else if (result !== false) {
close();
}
@@ -147,19 +151,40 @@ export function showAlert(title, message, iconType = 'info', parent = document.b
}
export function showConfirm(title, content, buttons, iconType = 'question', parent = document.body) {
- return new Promise(resolve => {
+ return new Promise((resolve, reject) => {
+ const wrapper = createElement('div', 'message-wrapper');
+ if (!nullOrEmpty(iconType)) {
+ wrapper.appendChild(createIcon('fa-solid', iconTypes[iconType] ?? 'question-circle'));
+ }
+ wrapper.appendChild(content instanceof HTMLElement ?
+ content :
+ createElement('span', span => span.innerText = content));
const popup = new Popup({
title,
- content: createElement('div', 'message-wrapper',
- createIcon('fa-solid', iconTypes[iconType] ?? 'question-circle'),
- createElement('span', null, content)
- ),
+ content: wrapper,
buttons: buttons?.map(b => {
return {
- text: b.text, trigger: p => resolve({
- key: b.key,
- popup: p
- })
+ text: b.text,
+ trigger: p => {
+ let result;
+ if (typeof b.trigger === 'function') {
+ result = b.trigger(p, b);
+ if (typeof result?.then === 'function') {
+ return result.then(r => {
+ r !== false && resolve(r);
+ return r;
+ });
+ }
+ result !== false && resolve(result);
+ } else {
+ result = {
+ key: b.key,
+ popup: p
+ };
+ resolve(result);
+ }
+ return result;
+ }
};
}) ??
[