257 lines
10 KiB
JavaScript
257 lines
10 KiB
JavaScript
import { Grid, Dropdown, createElement, createCheckbox, Popup, showAlert } from "../../ui";
|
|
import { isEmail, nullOrEmpty, r } from "../../utility";
|
|
|
|
class Contact {
|
|
#option;
|
|
#refs;
|
|
|
|
constructor(option = {}) {
|
|
this.#option = option;
|
|
}
|
|
|
|
async show(parent = document.body) {
|
|
const tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0)) + 3;
|
|
|
|
const c = this.#option.contact;
|
|
const contactName = createElement('input', input => {
|
|
input.type = 'text';
|
|
input.className = 'ui-input';
|
|
input.tabIndex = tabIndex + 1;
|
|
input.maxLength = 200;
|
|
input.autocomplete = 'off';
|
|
});
|
|
const preferences = new Dropdown({ tabIndex: 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.className = 'ui-input';
|
|
input.tabIndex = tabIndex + 3;
|
|
input.maxLength = 100;
|
|
input.autocomplete = 'off';
|
|
});
|
|
const contactMobile = createElement('input', input => {
|
|
input.type = 'tel';
|
|
input.className = 'ui-input';
|
|
input.tabIndex = tabIndex + 4;
|
|
input.maxLength = 50;
|
|
input.autocomplete = 'off';
|
|
});
|
|
const checkOpt = createCheckbox({ tabIndex: tabIndex + 5 });
|
|
const contactNotes = createElement('textarea', txt => {
|
|
txt.className = 'ui-text';
|
|
txt.tabIndex = tabIndex + 6;
|
|
txt.maxLength = 2000;
|
|
txt.style.height = '100px';
|
|
});
|
|
const buttons = [];
|
|
if (this.#option.company) {
|
|
buttons.push({
|
|
text: c == null ? r('addContactRecord', 'Add Contact Record') : r('editContactRecord', 'Edit Contact Record'),
|
|
// tabIndex: tabIndex + 7,
|
|
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, 'customerrecord');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
buttons.push(
|
|
{
|
|
text: r('workOrderOnly', 'Work Order Only'),
|
|
// tabIndex: tabIndex + 8,
|
|
trigger: () => {
|
|
const item = this.prepare();
|
|
if (item == null) {
|
|
return false;
|
|
}
|
|
//item.Id = -1;
|
|
item.SaveToCustomer = 0;
|
|
if (typeof this.#option.onSave === 'function') {
|
|
return this.#option.onSave.call(this, item, 'workorder');
|
|
}
|
|
}
|
|
},
|
|
{
|
|
text: r('cancel', 'Cancel'),
|
|
// tabIndex: tabIndex + 9
|
|
}
|
|
);
|
|
const popup = new Popup({
|
|
onMasking: this.#option.onMasking,
|
|
title: c == null ? r('addContact', 'Add Contact') : r('editContact', 'Edit Contact'),
|
|
content: 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
|
|
)
|
|
),
|
|
buttons
|
|
})
|
|
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;
|
|
} else {
|
|
preferences.select('0');
|
|
}
|
|
this.#refs = {
|
|
contactName,
|
|
preferences,
|
|
contactEmail,
|
|
contactMobile,
|
|
checkOpt,
|
|
contactNotes
|
|
};
|
|
const result = await popup.show(parent);
|
|
setTimeout(() => contactName.focus());
|
|
return result;
|
|
}
|
|
|
|
prepare() {
|
|
const name = this.#refs.contactName.value;
|
|
const pref = this.#refs.preferences.selected.value;
|
|
const email = this.#refs.contactEmail.value;
|
|
const phone = this.#refs.contactMobile.value;
|
|
const opt = this.#refs.checkOpt.querySelector('input').checked;
|
|
const notes = this.#refs.contactNotes.value;
|
|
const title = this.#option.contact == null ? r('addContact', 'Add Contact') : r('editContact', 'Edit Contact');
|
|
if (nullOrEmpty(name)) {
|
|
showAlert(title, r('contactNameRequired', 'Contact Name cannot be empty.'), 'warn')
|
|
.then(() => this.#refs.contactName.focus());
|
|
return null;
|
|
}
|
|
if ((pref == 0 || pref == 2) && nullOrEmpty(phone)) {
|
|
showAlert(title, r('contactPhoneRequired', 'Mobile cannot be empty.'), 'warn')
|
|
.then(() => this.#refs.contactMobile.focus());
|
|
return null;
|
|
}
|
|
if (pref == 1 && nullOrEmpty(email)) {
|
|
showAlert(title, r('contactEmailRequired', 'Email cannot be empty.'), 'warn')
|
|
.then(() => this.#refs.contactEmail.focus());
|
|
return null;
|
|
}
|
|
if (!nullOrEmpty(email) && !isEmail(email)) {
|
|
showAlert(title, r('contactEmailInvalid', 'The email address is invalid.'), 'warn')
|
|
.then(() => this.#refs.contactEmail.focus());
|
|
return null;
|
|
}
|
|
|
|
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.OldName = contact.Name;
|
|
contact.OldMobilePhone = contact.MobilePhone;
|
|
contact.Name = name;
|
|
contact.ContactPreference = pref;
|
|
contact.Email = email;
|
|
contact.MobilePhone = phone;
|
|
contact.OptOut = opt;
|
|
contact.Notes = notes;
|
|
return contact;
|
|
}
|
|
}
|
|
|
|
class CustomerRecordContact {
|
|
#option;
|
|
#grid;
|
|
|
|
constructor(option = {}) {
|
|
this.#option = option;
|
|
}
|
|
|
|
async show(title, parent = document.body) {
|
|
// const tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0)) + 3;
|
|
|
|
const gridContainer = createElement('div', 'selcontact-grid');
|
|
const popup = new Popup({
|
|
onMasking: this.#option.onMasking,
|
|
title,
|
|
content: createElement('div', 'selcontact-wrapper',
|
|
gridContainer
|
|
),
|
|
buttons: [
|
|
{
|
|
text: r('ok', 'OK'),
|
|
key: 'ok',
|
|
trigger: () => {
|
|
if (typeof this.#option.onOk === 'function') {
|
|
return this.#option.onOk.call(this, this.#grid.source.filter(f => f.selected));
|
|
}
|
|
}
|
|
},
|
|
{ text: r('cancel', 'Cancel'), key: 'cancel' }
|
|
]
|
|
});
|
|
const result = await popup.show(parent);
|
|
// grid
|
|
const grid = new Grid(gridContainer);
|
|
grid.columns = [
|
|
{
|
|
key: 'selected',
|
|
type: Grid.ColumnTypes.Checkbox,
|
|
width: 40,
|
|
// enabled: item => !nullOrEmpty(item.ID)
|
|
},
|
|
{ key: 'Name', caption: r("P_CR_CONTACTNAME", "Contact Name"), width: 100 },
|
|
{ key: 'Email', caption: r("P_CR_CONTACTEMAIL", "Contact Email"), css: { 'width': 180, 'text-align': 'left' } },
|
|
{ key: 'MobilePhoneDisplayText', caption: r("P_CR_CONTACTMOBILE", "Contact Mobile"), width: 130 },
|
|
{ key: 'ContactPreferenceStr', caption: r("P_CR_CONTACTPREFERENCES", "Contact Preferences"), width: 100 },
|
|
{ key: 'OptOut', caption: r("P_CR_OPTOUT", "Opt Out"), type: Grid.ColumnTypes.Checkbox, width: 70, enabled: false, align: 'center' },
|
|
{ key: 'Notes', caption: r("P_CR_NOTES", "Notes"), width: 120 }
|
|
];
|
|
grid.init();
|
|
grid.source = this.#option.contacts.sort(function (a, b) { return ((b.Text || b.Email) ? 1 : 0) - ((a.Text || a.Email) ? 1 : 0) });
|
|
this.#grid = grid;
|
|
return result;
|
|
}
|
|
|
|
set source(contacts) {
|
|
this.#option.contacts = contacts;
|
|
const grid = this.#grid;
|
|
if (grid != null) {
|
|
this.#grid.source = contacts;
|
|
}
|
|
}
|
|
}
|
|
|
|
export { Contact, CustomerRecordContact }; |