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

sync from work

Browse Source
This commit is contained in:
Tsanie Lily 2023-04-14 17:40:15 +08:00
parent d702197a3f
commit af78bf0381
13 changed files with 566 additions and 319 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -21,7 +21,7 @@
<li data-page="lib/ui/checkbox.html">checkbox</li> <li data-page="lib/ui/checkbox.html">checkbox</li>
<li data-page="lib/ui/tooltip.html">tooltip</li> <li data-page="lib/ui/tooltip.html">tooltip</li>
<li data-page="lib/ui/dropdown.html">dropdown</li> <li data-page="lib/ui/dropdown.html">dropdown</li>
<li data-page="lib/ui/grid.html">grid</li> <li data-page="lib/ui/grid/grid.html">grid</li>
<li data-page="lib/ui/popup.html">popup</li> <li data-page="lib/ui/popup.html">popup</li>
</ol> </ol>
</li> </li>

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

@ -56,7 +56,7 @@ class Contact {
} }
item.SaveToCustomer = 1; item.SaveToCustomer = 1;
if (typeof this.#option.onSave === 'function') { 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) { if (item == null) {
return false; return false;
} }
item.Id = -1;
item.SaveToCustomer = 0; item.SaveToCustomer = 0;
if (typeof this.#option.onSave === 'function') { 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; let contact = this.#option.contact;
if (contact == null) { if (contact == null) {
contact = {}; contact = {};
} else if (contact.OptOut !== opt) {
if (opt !== false || contact.OptOut_BC === false) {
contact.selected = !opt;
}
} }
contact.Name = name; contact.Name = name;
contact.ContactPreference = pref; contact.ContactPreference = pref;

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

@ -165,10 +165,19 @@ class CustomerCommunication {
if (this.#container == null) { if (this.#container == null) {
return; return;
} }
this.#container.querySelector('.button-edit-contacts').style.display = flag === true ? 'none' : ''; const link = this.#container.querySelector('.check-status-link');
this.#container.querySelector('.button-edit-followers').style.display = flag === true ? 'none' : ''; if (flag === true) {
this.#enter.disabled = flag === true; link.classList.add('disabled');
this.#container.querySelector('.button-send-message').style.display = flag === true ? 'none' : ''; } 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() { create() {
const option = this.#option; const option = this.#option;
const readonly = option.readonly;
// functions // functions
const checkAutoUpdate = createCheckbox({ const checkAutoUpdate = createCheckbox({
className: 'check-auto-update', className: 'check-auto-update',
@ -273,8 +283,12 @@ class CustomerCommunication {
r('autoUpdateDisabled', 'Auto Updates Disabled')); r('autoUpdateDisabled', 'Auto Updates Disabled'));
} }
}); });
if (option.autoUpdatesVisible === false) {
checkAutoUpdate.style.display = 'none';
}
const checkLink = createCheckbox({ const checkLink = createCheckbox({
className: 'check-status-link', className: 'check-status-link',
enabled: !readonly,
checked: option.statusLink, checked: option.statusLink,
checkedNode: createIcon('fa-regular', 'link'), checkedNode: createIcon('fa-regular', 'link'),
uncheckedNode: createIcon('fa-regular', 'unlink'), uncheckedNode: createIcon('fa-regular', 'unlink'),
@ -284,6 +298,9 @@ class CustomerCommunication {
r('statusLinkExcluded', 'Status Link Excluded')); r('statusLinkExcluded', 'Status Link Excluded'));
} }
}); });
if (option.statusLinkVisible === false) {
checkLink.style.display = 'none';
}
const container = createBox( const container = createBox(
createElement('div', null, createElement('div', null,
createElement('div', div => div.innerText = r('messages', 'Customer Communication')), createElement('div', div => div.innerText = r('messages', 'Customer Communication')),
@ -302,6 +319,62 @@ class CustomerCommunication {
] ]
); );
// contacts // 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 readonly = option.readonly;
const recordReadonly = option.recordReadonly; const recordReadonly = option.recordReadonly;
const contacts = createElement('div'); const contacts = createElement('div');
@ -357,7 +430,7 @@ class CustomerCommunication {
button.addEventListener('click', () => { button.addEventListener('click', () => {
const add = new Contact({ const add = new Contact({
company: !nullOrEmpty(this.#data.companyCode), company: !nullOrEmpty(this.#data.companyCode),
onSave: (item) => { onSave: item => {
const exists = this.#gridContact.source.some(s => s.Name === item.Name && s.MobilePhone === item.MobilePhone); const exists = this.#gridContact.source.some(s => s.Name === item.Name && s.MobilePhone === item.MobilePhone);
if (exists) { if (exists) {
showAlert(r('addContact', 'Add Contact'), r('contactUniqueRequired', 'Contact name and contact mobile must be a unique combination.'), 'warn'); 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); const result = option.onSave(item, true);
if (typeof result?.then === 'function') { if (typeof result?.then === 'function') {
return result.then(r => { return result.then(r => {
this.#gridContact.source = r.filter(c => c.Id >= 0); this.#gridContact.source = r.filter(c => c.Id >= 0).map(c => {
this.#gridWo.source = r.filter(c => c.Id < 0); 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; return r;
}); });
} }
@ -456,7 +545,7 @@ class CustomerCommunication {
const edit = new Contact({ const edit = new Contact({
contact: this, contact: this,
company: !nullOrEmpty(This.#data.companyCode), company: !nullOrEmpty(This.#data.companyCode),
onSave: item => { onSave: (item, _op) => {
const exists = const exists =
This.#gridContact.source.some(s => s !== this && s.Name === item.Name && s.MobilePhone === item.MobilePhone) || 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); 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); const result = option.onSave(item);
if (typeof result?.then === 'function') { if (typeof result?.then === 'function') {
return result.then(r => { return result.then(r => {
This.#gridContact.source = r.filter(c => c.Id >= 0); This.#gridContact.source = r.filter(c => c.Id >= 0).map(c => {
This.#gridWo.source = r.filter(c => c.Id < 0); 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; return r;
}); });
} }
@ -504,7 +609,10 @@ class CustomerCommunication {
showConfirm( showConfirm(
r('remoteContact', 'Remove Contact'), r('remoteContact', 'Remove Contact'),
createElement('div', null, 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 => { createElement('div', div => {
div.style.display = 'flex'; div.style.display = 'flex';
div.style.justifyContent = 'center'; div.style.justifyContent = 'center';
@ -525,7 +633,8 @@ class CustomerCommunication {
[ [
{ key: 'ok', text: r('ok', 'OK') }, { key: 'ok', text: r('ok', 'OK') },
{ key: 'cancel', text: r('cancel', 'Cancel') } { key: 'cancel', text: r('cancel', 'Cancel') }
]).then(result => { ]
).then(result => {
if (result?.key === 'ok') { if (result?.key === 'ok') {
const isRecord = result.popup.container.querySelector('.radio-customer-record>input').checked; const isRecord = result.popup.container.querySelector('.radio-customer-record>input').checked;
if (typeof option.onDelete === 'function') { if (typeof option.onDelete === 'function') {
@ -627,8 +736,12 @@ class CustomerCommunication {
) )
) )
); );
this.#contacts = contacts; return contacts;
// followers }
#createFollowers(container, option) {
const readonly = option.readonly;
const recordReadonly = option.recordReadonly;
const followers = createElement('div'); const followers = createElement('div');
const buttonEditFollower = createElement('button', button => { const buttonEditFollower = createElement('button', button => {
button.className = 'roundbtn button-edit-followers'; button.className = 'roundbtn button-edit-followers';
@ -681,7 +794,7 @@ class CustomerCommunication {
} }
}); });
add.show(container); add.show(container);
}) });
} }
}); });
setTooltip(button, r('addFollower', 'Add Follower')) setTooltip(button, r('addFollower', 'Add Follower'))
@ -701,6 +814,12 @@ class CustomerCommunication {
) )
); );
pop.show(container).then(() => { pop.show(container).then(() => {
const buttonCol = {
type: Grid.ColumnTypes.Icon,
width: 40,
align: 'center',
iconType: 'fa-light'
};
const grid = new Grid(); const grid = new Grid();
grid.height = 0; grid.height = 0;
grid.allowHtml = true; grid.allowHtml = true;
@ -710,27 +829,119 @@ class CustomerCommunication {
key: 'type', key: 'type',
type: Grid.ColumnTypes.Icon, type: Grid.ColumnTypes.Icon,
width: 50, 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', className: 'icon-contact-type',
iconType: 'fa-light' iconType: 'fa-light'
}, },
{ key: 'Name', width: 160 }, { key: 'Name', width: 160 },
{ key: 'Email', width: 180 }, { key: 'Email', width: 180 },
{ key: 'MobilePhone', width: 130 }, { 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', key: 'delete',
type: Grid.ColumnTypes.Icon, ...buttonCol,
width: 40,
align: 'center',
iconType: 'fa-light',
text: 'times', text: 'times',
tooltip: r('delete', 'Delete'), tooltip: r('delete', 'Delete'),
events: { events: {
onclick: function () { onclick: function () {
showConfirm( showConfirm(
r('deleteFollower', 'Delete Follower'), r('deleteFollower', 'Delete Follower'),
r('promptDeleteFollower', 'Do you want to delete this follower?')) r('promptDeleteFollower', 'Do you want to delete this follower?')
.then(result => { ).then(result => {
if (result?.key === 'yes') { if (result?.key === 'yes') {
if (typeof option.onDeleteFollower === 'function') { if (typeof option.onDeleteFollower === 'function') {
option.onDeleteFollower(result.key, this); option.onDeleteFollower(result.key, this);
@ -775,52 +986,7 @@ class CustomerCommunication {
) )
) )
); );
this.#followers = followers; return 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;
} }
load(data, contacts, followers) { load(data, contacts, followers) {

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

@ -58,7 +58,7 @@ class Follower {
caption: r('email', 'Email'), caption: r('email', 'Email'),
type: Grid.ColumnTypes.Checkbox, type: Grid.ColumnTypes.Checkbox,
width: 70, width: 70,
enabled: item => !nullOrEmpty(item.ID) // enabled: item => !nullOrEmpty(item.ID)
} }
]; ];
grid.init(); grid.init();

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

@ -63,7 +63,7 @@ class InternalComment {
createElement('button', button => { createElement('button', button => {
button.className = 'roundbtn button-send-message'; button.className = 'roundbtn button-send-message';
button.style.backgroundColor = 'rgb(19, 150, 204)'; button.style.backgroundColor = 'rgb(19, 150, 204)';
if (readonly === true) { if (readonly === true || this.#option.noMessage === true) {
button.style.display = 'none'; button.style.display = 'none';
} }
button.appendChild(createIcon('fa-solid', 'paper-plane')); button.appendChild(createIcon('fa-solid', 'paper-plane'));

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

@ -1,5 +1,13 @@
@import '../../../css/variables/definition.scss'; @import '../../../css/variables/definition.scss';
.popup-mask .wrapper-edit-method {
width: 100%;
.checkbox-wrapper {
padding: 0 28px;
}
}
.comm { .comm {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -207,6 +215,12 @@
padding: 10px 10px 0; padding: 10px 10px 0;
border: none; border: none;
height: 70px; height: 70px;
resize: none;
&:focus,
&:focus-visible {
outline: none;
}
} }
>div { >div {

2
lib/ui.js
View File

@ -4,7 +4,7 @@ import { createIcon, resolveIcon } from "./ui/icon";
import { createCheckbox, createRadiobox, resolveCheckbox } from "./ui/checkbox"; import { createCheckbox, createRadiobox, resolveCheckbox } from "./ui/checkbox";
import { setTooltip, resolveTooltip } from "./ui/tooltip"; import { setTooltip, resolveTooltip } from "./ui/tooltip";
import Dropdown from "./ui/dropdown"; import Dropdown from "./ui/dropdown";
import Grid from "./ui/grid"; import Grid from "./ui/grid/grid";
import Popup from "./ui/popup"; import Popup from "./ui/popup";
import { createPopup, showAlert, showConfirm } from "./ui/popup"; import { createPopup, showAlert, showConfirm } from "./ui/popup";

7
lib/ui/checkbox.js
View File

@ -63,6 +63,9 @@ function createCheckbox(opts = {}) {
if (opts.className) { if (opts.className) {
container.classList.add(opts.className); container.classList.add(opts.className);
} }
if (opts.enabled === false) {
container.classList.add('disabled');
}
if (opts.checkedNode != null && opts.uncheckedNode != null) { if (opts.checkedNode != null && opts.uncheckedNode != null) {
container.classList.add('checkbox-image'); container.classList.add('checkbox-image');
let height = opts.imageHeight; let height = opts.imageHeight;
@ -120,7 +123,11 @@ function resolveCheckbox(container = document.body, legacy) {
} else { } else {
text = label.innerText; text = label.innerText;
} }
if (chk.disabled) {
label.className = 'checkbox-wrapper disabled';
} else {
label.className = 'checkbox-wrapper'; label.className = 'checkbox-wrapper';
}
label.replaceChildren(); label.replaceChildren();
fillCheckbox(label, 'fa-regular', text); fillCheckbox(label, 'fa-regular', text);
label.insertBefore(chk, label.firstChild); label.insertBefore(chk, label.firstChild);

229
lib/ui/grid/column.js Normal file
View File

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

2
lib/ui/grid.d.ts → lib/ui/grid/grid.d.ts vendored
View File

@ -1,4 +1,4 @@
import { DropdownOptions } from "./dropdown"; import { DropdownOptions } from "../dropdown";
interface GridItem { interface GridItem {
value: any; value: any;

0
lib/ui/grid.html → lib/ui/grid/grid.html
View File

215
lib/ui/grid.js → lib/ui/grid/grid.js
View File

@ -1,11 +1,9 @@
import { global, isPositive, isMobile, throttle, truncate } from "../utility"; import { global, isPositive, isMobile, throttle, truncate } from "../../utility";
import { nullOrEmpty } from "../utility/strings"; import { r } from "../../utility/lgres";
import { r } from "../utility/lgres"; import { createElement } from "../../functions";
import { createElement } from "../functions"; import { createIcon } from "../icon";
import { createIcon } from "./icon"; import { createCheckbox } from "../checkbox";
import { createCheckbox } from "./checkbox"; import { GridColumn, GridInputColumn, GridTextColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn } from "./column";
import { setTooltip } from "./tooltip";
import Dropdown from "./dropdown";
const ColumnChangedType = { const ColumnChangedType = {
Reorder: 'reorder', Reorder: 'reorder',
@ -41,203 +39,6 @@ function indexOfParent(target) {
return Array.prototype.indexOf.call(target.parentElement.children, 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 = { const ColumnTypes = {
0: GridColumn, 0: GridColumn,
1: GridInputColumn, 1: GridInputColumn,
@ -882,7 +683,7 @@ class Grid {
const type = isCheckbox ? GridCheckboxColumn : this.#colTypes[col.key] ?? GridColumn; const type = isCheckbox ? GridCheckboxColumn : this.#colTypes[col.key] ?? GridColumn;
let element; let element;
if (!isCheckbox && selectChanged && typeof type.createEdit === 'function') { 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] }); val = type.getValue({ target: cell.children[0] });
this.#onRowChanged(null, startIndex + i, col, val, true); this.#onRowChanged(null, startIndex + i, col, val, true);
} }
@ -938,7 +739,7 @@ class Grid {
} }
} }
}); });
if (vals.__editing) { if (vals.__editing != null) {
delete vals.__editing; delete vals.__editing;
} }
}); });

43
lib/ui/popup.js
View File

@ -1,6 +1,6 @@
import "../../css/popup.scss"; import "../../css/popup.scss";
import { createElement } from "../functions"; import { createElement } from "../functions";
import { r } from "../utility"; import { r, nullOrEmpty } from "../utility";
import { createIcon } from "./icon"; import { createIcon } from "./icon";
class Popup { class Popup {
@ -63,7 +63,11 @@ class Popup {
if (typeof b.trigger === 'function') { if (typeof b.trigger === 'function') {
const result = b.trigger(this); const result = b.trigger(this);
if (typeof result?.then === 'function') { if (typeof result?.then === 'function') {
result.then(r => r !== false && close()).catch(() => { }); result.then(r => {
if (r !== false) {
close();
}
}).catch(() => { });
} else if (result !== false) { } else if (result !== false) {
close(); 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) { 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({ const popup = new Popup({
title, title,
content: createElement('div', 'message-wrapper', content: wrapper,
createIcon('fa-solid', iconTypes[iconType] ?? 'question-circle'),
createElement('span', null, content)
),
buttons: buttons?.map(b => { buttons: buttons?.map(b => {
return { return {
text: b.text, trigger: p => resolve({ 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, key: b.key,
popup: p popup: p
}) };
resolve(result);
}
return result;
}
}; };
}) ?? }) ??
[ [