sync form work
This commit is contained in:
164
lib/app/communications/contact.js
Normal file
164
lib/app/communications/contact.js
Normal file
@ -0,0 +1,164 @@
|
||||
import { createElement } from "../../functions";
|
||||
import { createCheckbox } from "../../ui/checkbox";
|
||||
import Dropdown from "../../ui/dropdown";
|
||||
import { createPopup, showAlert } from "../../ui/popup";
|
||||
import { isEmail, nullOrEmpty, r } from "../../utility";
|
||||
|
||||
class Contact {
|
||||
#option;
|
||||
#refs;
|
||||
|
||||
constructor(option = {}) {
|
||||
this.#option = option;
|
||||
}
|
||||
|
||||
async show(parent = document.body) {
|
||||
const c = this.#option.contact;
|
||||
const contactName = createElement('input', input => {
|
||||
input.type = 'text';
|
||||
input.tabIndex = 1;
|
||||
input.maxLength = 200;
|
||||
input.autocomplete = 'off';
|
||||
});
|
||||
const preferences = new Dropdown({ tabindex: 2 });
|
||||
preferences.source = [
|
||||
{ value: '0', text: r('text', 'Text') },
|
||||
{ value: '1', text: r('email', 'Email') },
|
||||
{ value: '2', text: r('phone', 'Phone') }
|
||||
];
|
||||
const contactEmail = createElement('input', input => {
|
||||
input.type = 'email';
|
||||
input.tabIndex = 3;
|
||||
input.maxLength = 100;
|
||||
input.autocomplete = 'off';
|
||||
});
|
||||
const contactMobile = createElement('input', input => {
|
||||
input.type = 'tel';
|
||||
input.tabIndex = 4;
|
||||
input.maxLength = 50;
|
||||
input.autocomplete = 'off';
|
||||
});
|
||||
const checkOpt = createCheckbox({
|
||||
customerAttributes: {
|
||||
tabindex: 5
|
||||
}
|
||||
});
|
||||
const contactNotes = createElement('textarea', txt => {
|
||||
txt.tabIndex = 6;
|
||||
txt.maxLength = 2000;
|
||||
txt.style.height = '100px';
|
||||
});
|
||||
const popup = createPopup(
|
||||
c == null ? r('addContact', 'Add Contact') : r('editContact', 'Edit Contact'),
|
||||
createElement('div', wrapper => {
|
||||
wrapper.className = 'setting-wrapper';
|
||||
wrapper.style.width = '500px';
|
||||
},
|
||||
createElement('div', 'setting-item',
|
||||
createElement('span', 'setting-label setting-required', r('contactNameColon', 'Contact Name:')),
|
||||
contactName
|
||||
),
|
||||
createElement('div', 'setting-item',
|
||||
createElement('span', 'setting-label', r('contactPreferencesColon', 'Contact Preferences:')),
|
||||
preferences.create()
|
||||
),
|
||||
createElement('div', 'setting-item',
|
||||
createElement('span', 'setting-label', r('contactEmailColon', 'Email Address:')),
|
||||
contactEmail
|
||||
),
|
||||
createElement('div', 'setting-item',
|
||||
createElement('span', 'setting-label', r('contactMobileColon', 'Mobile:')),
|
||||
contactMobile
|
||||
),
|
||||
createElement('div', 'setting-item',
|
||||
createElement('span', 'setting-label', r('contactOptColon', 'Opt Out:')),
|
||||
checkOpt
|
||||
),
|
||||
createElement('div', 'setting-item',
|
||||
createElement('span', 'setting-label', r('contactNotesColon', 'Notes:')),
|
||||
contactNotes
|
||||
)
|
||||
),
|
||||
{
|
||||
text: c == null ? r('addContactRecord', 'Add Contact Record') : r('editContactRecord', 'Edit Contact Record'),
|
||||
trigger: () => {
|
||||
const item = this.prepare();
|
||||
if (item == null) {
|
||||
return false;
|
||||
}
|
||||
item.SaveToCustomer = 1;
|
||||
if (typeof this.#option.onSave === 'function') {
|
||||
return this.#option.onSave.call(this, item, c == null);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: r('workOrderOnly', 'Work Order Only'),
|
||||
trigger: () => {
|
||||
const item = this.prepare();
|
||||
if (item == null) {
|
||||
return false;
|
||||
}
|
||||
item.SaveToCustomer = 0;
|
||||
if (typeof this.#option.onSave === 'function') {
|
||||
return this.#option.onSave.call(this, item, c == null);
|
||||
}
|
||||
}
|
||||
},
|
||||
{ text: r('cancel', 'Cancel') }
|
||||
)
|
||||
if (c != null) {
|
||||
contactName.value = c.Name;
|
||||
preferences.select(String(c.ContactPreference));
|
||||
contactEmail.value = c.Email;
|
||||
contactMobile.value = c.MobilePhone;
|
||||
checkOpt.querySelector('input').checked = c.OptOut;
|
||||
contactNotes.value = c.Notes;
|
||||
}
|
||||
this.#refs = {
|
||||
contactName,
|
||||
preferences,
|
||||
contactEmail,
|
||||
contactMobile,
|
||||
checkOpt,
|
||||
contactNotes
|
||||
};
|
||||
const result = await popup.show(parent);
|
||||
setTimeout(() => contactName.focus());
|
||||
return result;
|
||||
}
|
||||
|
||||
prepare() {
|
||||
const item = {
|
||||
'Id': this.#option.contact?.Id,
|
||||
'Name': this.#refs.contactName.value,
|
||||
'ContactPreference': this.#refs.preferences.selected.value,
|
||||
'Email': this.#refs.contactEmail.value,
|
||||
'MobilePhone': this.#refs.contactMobile.value,
|
||||
'OptOut': this.#refs.checkOpt.querySelector('input').checked,
|
||||
'Notes': this.#refs.contactNotes.value
|
||||
};
|
||||
const title = this.#option.contact == null ? r('addContact', 'Add Contact') : r('editContact', 'Edit Contact');
|
||||
if (nullOrEmpty(item.Name)) {
|
||||
showAlert(title, r('contactNameRequired', 'Contact Name cannot be empty.'), 'warn')
|
||||
.then(() => this.#refs.contactName.focus());
|
||||
return null;
|
||||
}
|
||||
if (nullOrEmpty(item.Email) && nullOrEmpty(item.MobilePhone)) {
|
||||
showAlert(title, r('contactEmailPhoneRequired', 'Email and Mobile Phone cannot both be empty.'), 'warn')
|
||||
.then(() => nullOrEmpty(item.Email) ?
|
||||
this.#refs.contactEmail.focus() :
|
||||
this.#refs.contactMobile.focus());
|
||||
return null;
|
||||
}
|
||||
if (!nullOrEmpty(item.Email) && !isEmail(item.Email)) {
|
||||
showAlert(title, r('contactEmailInvalid', 'The email address is invalid.'), 'warn')
|
||||
.then(() => this.#refs.contactEmail.focus());
|
||||
return null;
|
||||
}
|
||||
|
||||
return item;
|
||||
}
|
||||
}
|
||||
|
||||
export default Contact;
|
||||
@ -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;
|
||||
});
|
||||
});
|
||||
})
|
||||
)
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
:root {
|
||||
--title-color: #fff;
|
||||
--title-bg-color: rgb(68, 114, 196);
|
||||
}
|
||||
@import '../../../css/variables/definition.scss';
|
||||
|
||||
.comm {
|
||||
display: flex;
|
||||
@ -318,4 +315,34 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-mask .grid {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
>.grid-body .grid-body-content>.grid-row>td {
|
||||
vertical-align: top;
|
||||
|
||||
.icon-contact-type {
|
||||
cursor: unset;
|
||||
|
||||
>svg {
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
&:hover>svg {
|
||||
opacity: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.contact-note {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user