sync form work
This commit is contained in:
@ -7,7 +7,30 @@ import { setTooltip } from "../../ui/tooltip";
|
||||
import { createIcon } from "../../ui/icon";
|
||||
import { createCheckbox } from "../../ui/checkbox";
|
||||
import { createBox } from "./lib";
|
||||
import { createPopup } from "../../ui/popup";
|
||||
import { createPopup, showAlert, showConfirm } from "../../ui/popup";
|
||||
import Grid from "../../ui/grid";
|
||||
import Contact from "./contact";
|
||||
|
||||
class NoteCol extends Grid.GridColumn {
|
||||
static create() {
|
||||
const wrapper = createElement('div', div => {
|
||||
div.style.width = '100px';
|
||||
},
|
||||
createElement('div', 'contact-name'),
|
||||
createElement('div', 'contact-note')
|
||||
);
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
static setValue(element, _val, item) {
|
||||
const name = element.querySelector('.contact-name');
|
||||
name.innerText = item.Name;
|
||||
if (name.scrollWidth > name.offsetWidth) {
|
||||
setTooltip(name, item.Name);
|
||||
}
|
||||
element.querySelector('.contact-note').innerText = item.Notes;
|
||||
}
|
||||
}
|
||||
|
||||
class CustomerCommunication {
|
||||
#container;
|
||||
@ -16,6 +39,8 @@ class CustomerCommunication {
|
||||
#followers;
|
||||
#enter;
|
||||
#message;
|
||||
#data = {};
|
||||
#gridContact;
|
||||
|
||||
constructor(opt) {
|
||||
this.#option = opt ?? {};
|
||||
@ -87,13 +112,14 @@ class CustomerCommunication {
|
||||
}
|
||||
const mp = String(c.MobilePhone).trim();
|
||||
const email = String(c.Email).trim();
|
||||
if (c.ContactPreference === '0' && !isPhone(mp) ||
|
||||
c.ContactPreference === '1' && !isEmail(email)) {
|
||||
const pref = String(c.ContactPreference);
|
||||
if (pref === '0' && !isPhone(mp) ||
|
||||
pref === '1' && !isEmail(email)) {
|
||||
return null;
|
||||
}
|
||||
const to = c.ContactPreference === '0' ? mp : email;
|
||||
const to = pref === '0' ? mp : email;
|
||||
return createElement('div', 'contact-item',
|
||||
createIcon('fa-light', c.ContactPreference === '0' ? 'comment-lines' : 'envelope'),
|
||||
createIcon('fa-light', pref === '0' ? 'comment-lines' : 'envelope'),
|
||||
setTooltip(createElement('span', span => {
|
||||
span.dataset.to = to;
|
||||
span.dataset.name = c.Name;
|
||||
@ -156,11 +182,16 @@ class CustomerCommunication {
|
||||
this.#message.scrollTop = this.#message.scrollHeight
|
||||
}
|
||||
|
||||
setData(key, data) {
|
||||
this.#data[key] = data;
|
||||
}
|
||||
|
||||
create() {
|
||||
const option = this.#option;
|
||||
// functions
|
||||
const checkAutoUpdate = createCheckbox({
|
||||
className: 'check-auto-update',
|
||||
checked: this.#option.autoUpdates,
|
||||
checked: option.autoUpdates,
|
||||
checkedNode: createIcon('fa-regular', 'redo-alt'),
|
||||
uncheckedNode: createIcon('fa-regular', 'ban'),
|
||||
onchange: function () {
|
||||
@ -171,7 +202,7 @@ class CustomerCommunication {
|
||||
});
|
||||
const checkLink = createCheckbox({
|
||||
className: 'check-status-link',
|
||||
checked: this.#option.statusLink,
|
||||
checked: option.statusLink,
|
||||
checkedNode: createIcon('fa-regular', 'link'),
|
||||
uncheckedNode: createIcon('fa-regular', 'unlink'),
|
||||
onchange: function () {
|
||||
@ -185,10 +216,10 @@ class CustomerCommunication {
|
||||
createElement('div', div => div.innerText = r('messages', 'Customer Communication')),
|
||||
createElement('div', div => {
|
||||
div.className = 'title-company';
|
||||
if (nullOrEmpty(this.#option.companyName)) {
|
||||
if (nullOrEmpty(option.companyName)) {
|
||||
div.style.display = 'none';
|
||||
} else {
|
||||
div.innerText = this.#option.companyName;
|
||||
div.innerText = option.companyName;
|
||||
}
|
||||
})
|
||||
),
|
||||
@ -198,7 +229,7 @@ class CustomerCommunication {
|
||||
]
|
||||
);
|
||||
// contacts
|
||||
const readonly = this.#option.readonly;
|
||||
const readonly = option.readonly;
|
||||
const contacts = createElement('div');
|
||||
container.append(
|
||||
createElement('div', 'contact-bar',
|
||||
@ -218,30 +249,236 @@ class CustomerCommunication {
|
||||
button.appendChild(createIcon('fa-solid', 'user-edit'));
|
||||
setTooltip(button, r('editContacts', 'Edit Contacts'));
|
||||
button.addEventListener('click', () => {
|
||||
// TODO:
|
||||
const pop = createPopup(
|
||||
createElement('div', div => {
|
||||
div.style.display = 'flex';
|
||||
div.append(
|
||||
createElement('span', span => {
|
||||
span.style.flex = '1 1 auto';
|
||||
span.innerText = r('editContacts', 'Edit Contacts');
|
||||
}),
|
||||
createElement('div', div => {
|
||||
div.className = 'popup-move';
|
||||
div.style.flex = '1 1 auto';
|
||||
},
|
||||
createElement('div', div => div.innerText = r('editContacts', 'Edit Contacts')),
|
||||
createElement('div', div => {
|
||||
div.className = 'title-company';
|
||||
if (nullOrEmpty(option.companyName)) {
|
||||
div.style.display = 'none';
|
||||
} else {
|
||||
div.innerText = option.companyName;
|
||||
}
|
||||
})
|
||||
),
|
||||
createElement('button', button => {
|
||||
button.style.flex = '0 0 auto';
|
||||
button.style.backgroundColor = 'rgb(1, 199, 172)';
|
||||
button.style.marginRight = '10px';
|
||||
button.className = 'roundbtn button-add-contact';
|
||||
button.backgroundColor = 'rgb(1, 199, 172)';
|
||||
button.appendChild(createIcon('fa-regular', 'user'));
|
||||
button.appendChild(createIcon('fa-solid', 'user-plus', {
|
||||
width: '16px',
|
||||
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 (result !== false) {
|
||||
this.#gridContact.reload();
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
});
|
||||
add.show(container);
|
||||
});
|
||||
setTooltip(button, r('addContact', 'Add Contact'))
|
||||
})
|
||||
)
|
||||
}),
|
||||
createElement('div', div => {
|
||||
div.style.height = '300px';
|
||||
div.innerText = 'Contacts from Customer Record';
|
||||
}));
|
||||
container.append(pop);
|
||||
setTimeout(() => pop.style.opacity = 1, 0);
|
||||
createElement('div', null,
|
||||
createElement('div', div => {
|
||||
div.style.fontWeight = 'bold';
|
||||
div.innerText = r('contactFromRecord', 'Contacts from Customer Record');
|
||||
}),
|
||||
createElement('div', div => {
|
||||
div.className = 'contacts-record';
|
||||
div.style.maxHeight = '400px';
|
||||
div.style.width = '660px';
|
||||
}),
|
||||
createElement('div', div => {
|
||||
div.style.fontWeight = 'bold';
|
||||
div.innerText = r('contactFromWorkOrder', 'Contacts not on Customer Record');
|
||||
}),
|
||||
createElement('div', div => {
|
||||
div.className = 'contacts-wo';
|
||||
div.style.maxHeight = '200px';
|
||||
div.style.width = '660px';
|
||||
})
|
||||
)
|
||||
);
|
||||
pop.show(container).then(() => {
|
||||
const selectedCol = {
|
||||
key: 'selected',
|
||||
type: Grid.ColumnTypes.Checkbox,
|
||||
width: 50,
|
||||
enabled: item => !item.OptOut && !item.OptOut_BC
|
||||
};
|
||||
const iconCol = {
|
||||
key: 'type',
|
||||
type: Grid.ColumnTypes.Icon,
|
||||
width: 50,
|
||||
filter: c => String(c.ContactPreference) === '0' ? 'comment-lines' : 'envelope',
|
||||
className: 'icon-contact-type',
|
||||
iconType: 'fa-light'
|
||||
};
|
||||
const nameCol = { key: 'Name', type: NoteCol, width: 160 };
|
||||
const buttonCol = {
|
||||
type: Grid.ColumnTypes.Icon,
|
||||
width: 40,
|
||||
align: 'center',
|
||||
iconType: 'fa-light'
|
||||
};
|
||||
const createEditCol = grid => {
|
||||
return {
|
||||
key: 'edit',
|
||||
...buttonCol,
|
||||
text: 'edit',
|
||||
tooltip: r('edit', 'Edit'),
|
||||
events: {
|
||||
onclick: function () {
|
||||
const edit = new Contact({
|
||||
contact: this,
|
||||
onSave: item => {
|
||||
const exists = grid.source.some(s => s !== this && s.Name === item.Name && s.MobilePhone === item.MobilePhone);
|
||||
if (exists) {
|
||||
showAlert(r('editContact', 'Edit 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);
|
||||
if (result !== false) {
|
||||
grid.refresh();
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
});
|
||||
edit.show(container);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// contacts from customer record
|
||||
const grid = new Grid();
|
||||
grid.height = 0;
|
||||
grid.allowHtml = true;
|
||||
grid.headerVisible = false;
|
||||
grid.columns = [
|
||||
selectedCol,
|
||||
iconCol,
|
||||
nameCol,
|
||||
{ key: 'Email', width: 180 },
|
||||
{ key: 'MobilePhone', width: 130 },
|
||||
createEditCol(grid),
|
||||
{
|
||||
key: 'delete',
|
||||
...buttonCol,
|
||||
text: 'times',
|
||||
tooltip: r('delete', 'Delete'),
|
||||
events: {
|
||||
onclick: function () {
|
||||
showConfirm(r('remoteContact', 'Remove Contact'), r('removeFromCustomer', 'You are removing {name} from customer record.\n\nDo you want to Continue?').replace('{name}', this.Name), [
|
||||
{ key: 'continue', text: r('continue', 'Continue') },
|
||||
{ key: 'cancel', text: r('cancel', 'Cancel') }
|
||||
]).then(result => {
|
||||
if (result === 'continue') {
|
||||
if (typeof option.onDelete === 'function') {
|
||||
option.onDelete(result, this, true);
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
grid.init(pop.container.querySelector('.contacts-record'));
|
||||
const customerRecords = this.#data.contacts.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;
|
||||
});
|
||||
grid.extraRows = customerRecords.filter(c => !nullOrEmpty(c.Notes)).length;
|
||||
grid.source = customerRecords;
|
||||
this.#gridContact = grid;
|
||||
|
||||
// contacts from work order only
|
||||
const gridWo = new Grid();
|
||||
gridWo.height = 0;
|
||||
gridWo.allowHtml = true;
|
||||
gridWo.headerVisible = false;
|
||||
gridWo.columns = [
|
||||
selectedCol,
|
||||
iconCol,
|
||||
nameCol,
|
||||
{ key: 'Email', width: 180 },
|
||||
{ key: 'MobilePhone', width: 130 },
|
||||
createEditCol(gridWo),
|
||||
{
|
||||
key: 'delete',
|
||||
...buttonCol,
|
||||
text: 'times',
|
||||
tooltip: r('delete', 'Delete'),
|
||||
events: {
|
||||
onclick: () => {
|
||||
showConfirm(r('remoteContact', 'Remove Contact'), r('removeFromWorkorder', 'You are removing {name} from work order.\n\nDo you want to Continue?').replace('{name}', this.Name), [
|
||||
{ key: 'continue', text: r('continue', 'Continue') },
|
||||
{ key: 'cancel', text: r('cancel', 'Cancel') }
|
||||
]).then(result => {
|
||||
if (result === 'continue') {
|
||||
if (typeof option.onDelete === 'function') {
|
||||
option.onDelete(result, this);
|
||||
}
|
||||
const index = gridWo.source.indexOf(this);
|
||||
if (index >= 0) {
|
||||
const source = gridWo.source;
|
||||
source.splice(index, 1);
|
||||
gridWo.extraRows = source.filter(c => !nullOrEmpty(c.Notes)).length;
|
||||
gridWo.source = source;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
gridWo.init(pop.container.querySelector('.contacts-wo'));
|
||||
const workOrderOnly = this.#data.contacts.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;
|
||||
});
|
||||
gridWo.extraRows = workOrderOnly.filter(c => !nullOrEmpty(c.Notes)).length;
|
||||
gridWo.source = workOrderOnly;
|
||||
});
|
||||
});
|
||||
})
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user