380 lines
16 KiB
JavaScript
380 lines
16 KiB
JavaScript
import AddWorkOrder from "../../element/addWorkorder";
|
|
import { createElement, setTooltip, createIcon, requestAnimationFrame } from "../../ui";
|
|
import { r as lang, nullOrEmpty, escapeHtml, escapeEmoji } from "../../utility";
|
|
import { createBox, appendMedia } from "./lib";
|
|
import { fileSupported, insertFile, getMessageSendTo, getMessageStatus, updateCustomerName, createHideMessageTitleButton, createHideMessageCommentTail } from "./lib";
|
|
|
|
let r = lang;
|
|
|
|
export default class InternalComment {
|
|
_var = {};
|
|
// _var.container;
|
|
// _var.option;
|
|
// _var.enter;
|
|
// _var.fileControl;
|
|
// _var.file;
|
|
// _var.message;
|
|
|
|
constructor(opt) {
|
|
this._var.option = opt ?? {};
|
|
const getText = opt?.getText;
|
|
if (typeof getText === 'function') {
|
|
r = getText;
|
|
} else if (typeof GetTextByKey === 'function') {
|
|
r = GetTextByKey;
|
|
}
|
|
}
|
|
|
|
get text() { return this._var.enter?.value }
|
|
set text(s) {
|
|
const element = this._var.enter;
|
|
if (element != null) {
|
|
element.value = s
|
|
s = String(nullOrEmpty(s) ? 0 : val.length) + '/' + String(this._var.option.maxLength);
|
|
this._var.container.querySelector('.message-bar .prompt-count').innerText = s;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {boolean} flag
|
|
*/
|
|
set messageHidden(flag) {
|
|
const el = this._var.container.querySelector('.msgadminsetting');
|
|
if (el == null) {
|
|
return;
|
|
}
|
|
this._var.option.showMessageHidden = flag;
|
|
// TODO: 是否与参数 flag 无关
|
|
el.classList.remove('iconview');
|
|
el.classList.add('iconnotview');
|
|
}
|
|
|
|
/**
|
|
* @param {any} contacts
|
|
*/
|
|
set contacts(contacts) {
|
|
this._var.contacts = contacts;
|
|
if (this._var.contactsUpdated !== true && contacts?.length > 0) {
|
|
const comments = this._var.comments;
|
|
if (comments?.length > 0) {
|
|
updateCustomerName(this._var.comments, contacts);
|
|
this._var.contactsUpdated = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {boolean} flag
|
|
*/
|
|
set loading(flag) {
|
|
if (this._var.container == null) {
|
|
return;
|
|
}
|
|
this._var.enter.disabled = flag;
|
|
this._var.container.querySelector('.button-send-message').disabled = flag;
|
|
this._var.container.querySelector('.button-post-note').disabled = flag;
|
|
}
|
|
|
|
get file() { return this._var.file || this._var.fileControl?.files?.[0] }
|
|
set file(f) {
|
|
this._var.fileControl?.remove();
|
|
const label = this._var.container.querySelector('.file-selector>.selector-name');
|
|
if (f == null) {
|
|
this._var.fileControl = null;
|
|
this._var.file = null;
|
|
if (label != null) {
|
|
label.style.display = 'none';
|
|
label.innerText = '';
|
|
label.querySelector('.ui-tooltip-wrapper')?.remove();
|
|
}
|
|
} else {
|
|
if (f instanceof HTMLInputElement) {
|
|
this._var.fileControl = f;
|
|
this._var.file = f.files[0];
|
|
const link = this._var.container.querySelector('.file-selector>.selector-link');
|
|
if (link != null) {
|
|
link.appendChild(f);
|
|
}
|
|
} else {
|
|
this._var.fileControl = null;
|
|
this._var.file = f;
|
|
}
|
|
if (label != null) {
|
|
label.style.display = '';
|
|
label.innerText = f.name;
|
|
setTooltip(label, f.name);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {boolean} flag
|
|
*/
|
|
set readonly(flag) {
|
|
this._var.option.readonly = flag;
|
|
if (this._var.container == null) {
|
|
return;
|
|
}
|
|
this._var.enter.disabled = flag === true;
|
|
this._var.container.querySelector('.button-call-log').style.display = flag === true ? 'none' : '';
|
|
this._var.container.querySelector('.button-send-message').style.display = flag === true ? 'none' : '';
|
|
this._var.container.querySelector('.button-post-note').style.display = flag === true ? 'none' : '';
|
|
}
|
|
|
|
/**
|
|
* @param {boolean} flag
|
|
*/
|
|
set noCallLog(flag) {
|
|
this._var.option.noCallLog = flag;
|
|
if (this._var.container == null) {
|
|
return;
|
|
}
|
|
this._var.container.querySelector('.button-call-log').style.display = flag === true ? 'none' : '';
|
|
}
|
|
|
|
create() {
|
|
const option = this._var.option;
|
|
const container = createBox(
|
|
createElement('div', null,
|
|
createElement('div', div => {
|
|
div.className = 'title-module';
|
|
div.innerText = r('P_WO_INTERNALCOMMENTS', 'Internal Comments');
|
|
},
|
|
createHideMessageTitleButton(this, 'showMessageHidden')
|
|
)
|
|
), []
|
|
);
|
|
const readonly = option.readonly;
|
|
// enter box
|
|
const enter = createElement('textarea', 'ui-text');
|
|
enter.placeholder = r('P_CU_ENTERCOMMENTHERE', 'Enter Comment Here');
|
|
enter.maxLength = option.maxLength ??= 3000;
|
|
enter.addEventListener('input', () => {
|
|
const val = this.text;
|
|
const s = String(nullOrEmpty(val) ? 0 : val.length) + '/' + String(option.maxLength);
|
|
this._var.container.querySelector('.message-bar .prompt-count').innerText = s;
|
|
});
|
|
if (readonly === true) {
|
|
enter.disabled = true;
|
|
}
|
|
enter.addEventListener('paste', e => {
|
|
const file = e.clipboardData.files[0];
|
|
if (file != null) {
|
|
e.preventDefault();
|
|
this.file = insertFile(container, file, r);
|
|
}
|
|
});
|
|
this._var.enter = enter;
|
|
container.appendChild(
|
|
createElement('div', div => {
|
|
div.className = 'message-bar';
|
|
div.addEventListener('dragover', e => {
|
|
if (option.readonly !== true) {
|
|
const item = e.dataTransfer.items[0];
|
|
if (item?.kind === 'file') {
|
|
e.preventDefault();
|
|
if (item.type.length > 0 && fileSupported.indexOf(item.type) < 0) {
|
|
e.dataTransfer.dropEffect = 'none';
|
|
} else {
|
|
e.dataTransfer.dropEffect = 'link';
|
|
}
|
|
}
|
|
}
|
|
});
|
|
div.addEventListener('drop', e => {
|
|
if (option.readonly !== true) {
|
|
const file = e.dataTransfer.files[0];
|
|
if (file != null) {
|
|
e.preventDefault();
|
|
this.file = insertFile(container, file, r);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
enter,
|
|
createElement('div', div => div.style.textAlign = 'right',
|
|
createElement('div', 'customer-left',
|
|
createElement('div', 'file-selector',
|
|
createElement('div', div => {
|
|
div.className = 'selector-link';
|
|
// div.style.display = 'none';
|
|
div.addEventListener('click', () => {
|
|
this._var.fileControl?.remove();
|
|
const file = createElement('input', input => {
|
|
input.type = 'file';
|
|
input.accept = fileSupported.join(',');
|
|
input.addEventListener('change', () => {
|
|
const file = insertFile(container, input.files?.[0], r);
|
|
if (file != null) {
|
|
this.file = file;
|
|
}
|
|
});
|
|
});
|
|
div.appendChild(this._var.fileControl = file);
|
|
file.dispatchEvent(new MouseEvent('click'));
|
|
});
|
|
},
|
|
createIcon('fa-regular', 'link')
|
|
),
|
|
createElement('span', span => {
|
|
span.className = 'selector-name';
|
|
span.style.display = 'none';
|
|
}),
|
|
createElement('layer', layer => {
|
|
layer.appendChild(createIcon('fa-regular', 'times'));
|
|
layer.addEventListener('click', () => this.file = null);
|
|
})
|
|
)
|
|
),
|
|
createElement('div', 'prompt-count'),
|
|
createElement('button', button => {
|
|
button.className = 'roundbtn button-call-log';
|
|
button.style.backgroundImage = 'url(' + AddWorkOrder.IconWorkOrder + ')';
|
|
button.style.backgroundSize = '80% 80%';
|
|
button.style.backgroundPosition = 'center';
|
|
button.style.backgroundRepeat = 'no-repeat';
|
|
button.style.verticalAlign = 'top';//firefox图片需要设置verticalAlign
|
|
if (readonly === true || option.noCallLog === true) {
|
|
button.style.display = 'none';
|
|
}
|
|
setTooltip(button, r('P_WO_CALLLOG', 'Call Log'));
|
|
button.addEventListener('click', () => {
|
|
if (typeof option.onAddCallLog === 'function') {
|
|
this.loading = true;
|
|
option.onAddCallLog();
|
|
}
|
|
})
|
|
}),
|
|
createElement('button', button => {
|
|
button.className = 'roundbtn button-send-message';
|
|
button.style.backgroundColor = 'rgb(19, 150, 204)';
|
|
if (readonly === true || option.noMessage === true) {
|
|
button.style.display = 'none';
|
|
}
|
|
button.appendChild(createIcon('fa-solid', 'paper-plane'));
|
|
setTooltip(button, r('P_M3_SENDMESSAGE', 'Send Message'));
|
|
button.addEventListener('click', () => {
|
|
const val = this.text;
|
|
if (nullOrEmpty(val?.trim())) {
|
|
return;
|
|
}
|
|
if (typeof option.onAddMessage === 'function') {
|
|
this.loading = true;
|
|
option.onAddMessage(this.text);
|
|
}
|
|
})
|
|
}),
|
|
createElement('button', button => {
|
|
button.className = 'roundbtn button-post-note';
|
|
button.style.border = '1px solid rgb(19, 150, 204)';
|
|
button.style.fill = 'rgb(19, 150, 204)';
|
|
if (readonly === true) {
|
|
button.style.display = 'none';
|
|
}
|
|
button.appendChild(createIcon('fa-solid', 'comment-alt-lines'));
|
|
setTooltip(button, r('P_CU_POSTNOTE', 'Post Note'));
|
|
button.addEventListener('click', () => {
|
|
const val = this.text;
|
|
if (nullOrEmpty(val?.trim())) {
|
|
return;
|
|
}
|
|
if (typeof option.onAddComment === 'function') {
|
|
this.loading = true;
|
|
option.onAddComment(this.text, this.file);
|
|
}
|
|
})
|
|
})
|
|
)
|
|
)
|
|
);
|
|
|
|
const message = createElement('div', 'list-bar');
|
|
this._var.message = message;
|
|
container.appendChild(message);
|
|
return this._var.container = container;
|
|
}
|
|
|
|
load(data, func, hisFunc, keep) {
|
|
const children = [];
|
|
if (data?.length > 0) {
|
|
this._var.comments = data;
|
|
if (this._var.contactsUpdated !== true) {
|
|
const contacts = this._var.contacts;
|
|
if (contacts?.length > 0) {
|
|
updateCustomerName(data, contacts);
|
|
this._var.contactsUpdated = true;
|
|
}
|
|
}
|
|
const lastVisible = this._var.option.showMessageHidden;
|
|
for (let comment of data) {
|
|
const div = createElement('div', 'item-div');
|
|
if (comment.Hidden) {
|
|
div.classList.add('hidden-content');
|
|
if (!lastVisible) {
|
|
div.style.display = 'none';
|
|
}
|
|
}
|
|
const sendto = getMessageSendTo(comment, null, null, r)
|
|
div.appendChild(createElement('div', div => {
|
|
div.className = 'item-poster';
|
|
div.innerText = comment.Sender;
|
|
if (sendto?.length > 0) {
|
|
setTooltip(div, sendto);
|
|
}
|
|
}));
|
|
const content = createElement('div', 'item-content');
|
|
const mmsParts = createElement('div', div => div.style.display = 'none');
|
|
content.appendChild(createElement('span', span => {
|
|
if (comment.MessageType === 2) {
|
|
span.innerHTML = comment.Message;
|
|
} else {
|
|
span.innerHTML = escapeHtml(escapeEmoji(comment.Message));
|
|
}
|
|
}, mmsParts));
|
|
if (comment.MMSParts?.length > 0) {
|
|
mmsParts.style.display = '';
|
|
for (let kv of comment.MMSParts) {
|
|
appendMedia(mmsParts, kv.Key, kv.Value);
|
|
}
|
|
}
|
|
// if (comment.FollowUp?.length > 0) {
|
|
// div.classList.add('item-sent');
|
|
// const sendto = r('P_CU_SENDTO_COLON', 'Sent To :') + '\r\n' + comment.FollowUp.split(';').join('\r\n');
|
|
// content.appendChild(createElement('div', div => {
|
|
// div.className = 'item-status';
|
|
// div.innerText = r('P_WO_SENT', 'Sent');
|
|
// setTooltip(div, sendto);
|
|
// }));
|
|
// }
|
|
const [status, text, color, tips] = getMessageStatus(comment, r, this._var);
|
|
if (status !== -100) {
|
|
if (color != null) {
|
|
content.style.backgroundColor = color;
|
|
}
|
|
const divstatus = createElement('div', div => {
|
|
div.className = 'item-status';
|
|
div.innerText = text;
|
|
if (tips != null) {
|
|
setTooltip(div, tips);
|
|
}
|
|
});
|
|
content.appendChild(divstatus);
|
|
}
|
|
div.append(
|
|
content,
|
|
createHideMessageCommentTail(
|
|
this, 'showMessageHidden',
|
|
comment, 'TimeStr',
|
|
func, hisFunc)
|
|
);
|
|
children.push(div);
|
|
}
|
|
children[0].style.marginTop = '0';
|
|
}
|
|
if (this._var.message.children.length > 0) {
|
|
this._var.lastTop = this._var.message.scrollTop;
|
|
}
|
|
this._var.message.replaceChildren(...children);
|
|
requestAnimationFrame(() => this._var.message.scrollTop = keep ? this._var.lastTop : this._var.message.scrollHeight);
|
|
}
|
|
} |