213 lines
8.8 KiB
JavaScript
213 lines
8.8 KiB
JavaScript
import { createElement, setTooltip, createIcon } from "../../ui";
|
|
import { r as lang, nullOrEmpty, escapeHtml, escapeEmoji } from "../../utility";
|
|
import { createBox, appendMedia } from "./lib";
|
|
|
|
let r = lang;
|
|
|
|
export default class CustomerRecordComment {
|
|
_var = {};
|
|
|
|
constructor(opt) {
|
|
this._var.option = opt ?? {};
|
|
const getText = opt?.getText;
|
|
if (typeof getText === 'function') {
|
|
r = getText;
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
get messageHidden() { return this._var.option.showCommentHidden }
|
|
set messageHidden(flag) {
|
|
const el = this._var.container.querySelector('.msgadminsetting');
|
|
if (el == null) {
|
|
return;
|
|
}
|
|
this._var.option.showCommentHidden = flag;
|
|
// TODO: 是否与参数 flag 无关
|
|
el.classList.remove('iconview');
|
|
el.classList.add('iconnotview');
|
|
}
|
|
|
|
/**
|
|
* @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;
|
|
}
|
|
|
|
/**
|
|
* @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-send-message').style.display = flag === true ? 'none' : '';
|
|
this._var.container.querySelector('.message-bar .prompt-count').style.display = flag === true ? 'none' : '';
|
|
}
|
|
|
|
create() {
|
|
const option = this._var.option;
|
|
const readonly = this._var.option.readonly;
|
|
const spanv = createElement('span');
|
|
if (option.userIsAdmin) {
|
|
spanv.className = 'msgadminsetting sbutton iconnotview';
|
|
spanv.style.padding = '0px 0px 0px 5px';
|
|
spanv.addEventListener('click', function () {
|
|
if (!option.showCommentHidden) {
|
|
this.classList.remove('iconnotview');
|
|
this.classList.add('iconview');
|
|
option.showCommentHidden = true;
|
|
container.querySelectorAll('.msgsetting').forEach(x => x.style.display = '');
|
|
} else {
|
|
this.classList.remove('iconview');
|
|
this.classList.add('iconnotview');
|
|
option.showCommentHidden = false;
|
|
container.querySelectorAll('.msgsetting').forEach(x => x.style.display = 'none');
|
|
}
|
|
|
|
});
|
|
}
|
|
const container = createBox(
|
|
createElement('div', null,
|
|
createElement('div', div => {
|
|
div.className = 'title-module';
|
|
div.innerText = r('P_CR_COMMENTS', 'Comments');
|
|
},
|
|
spanv
|
|
)
|
|
),
|
|
[
|
|
createElement('button', button => {
|
|
button.className = 'roundbtn button-close';
|
|
button.style.backgroundColor = 'transparent';
|
|
if (this._var.option.hasClose !== true) {
|
|
button.style.display = 'none';
|
|
return;
|
|
}
|
|
button.appendChild(createIcon('fa-solid', 'times', {
|
|
fill: '#000'
|
|
}));
|
|
button.addEventListener('click', () => {
|
|
if (typeof this._var.option.onClose === 'function') {
|
|
this._var.option.onClose();
|
|
}
|
|
})
|
|
})
|
|
]
|
|
);
|
|
// enter box
|
|
const enter = createElement('textarea', 'ui-text');
|
|
enter.placeholder = r('P_CU_ENTERCOMMENTHERE', 'Enter Comment Here');
|
|
enter.maxLength = this._var.option.maxLength ??= 3000;
|
|
enter.addEventListener('input', () => {
|
|
const val = this.text;
|
|
const s = String(nullOrEmpty(val) ? 0 : val.length) + '/' + String(this._var.option.maxLength);
|
|
this._var.container.querySelector('.message-bar .prompt-count').innerText = s;
|
|
});
|
|
if (readonly === true) {
|
|
enter.disabled = true;
|
|
}
|
|
this._var.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('P_M3_SENDMESSAGE', 'Send Message'));
|
|
setTooltip(button, r('P_CU_POSTNOTE', 'Post Note'));
|
|
button.addEventListener('click', () => {
|
|
if (typeof this._var.option.onAddComment === 'function') {
|
|
this._var.option.onAddComment(this.text);
|
|
}
|
|
})
|
|
})
|
|
)
|
|
)
|
|
);
|
|
|
|
const message = createElement('div', 'list-bar');
|
|
this._var.message = message;
|
|
container.appendChild(message);
|
|
return this._var.container = container;
|
|
}
|
|
|
|
load(data, func) {
|
|
const children = [];
|
|
if (data?.length > 0) {
|
|
for (let comment of data) {
|
|
const div = createElement('div', 'item-div');
|
|
// if (sendto !== '') {
|
|
// sendto = r('P_CU_SENDTO_COLON', 'Sent To :') + `\n${sendto}`;
|
|
// }
|
|
div.appendChild(createElement('div', div => {
|
|
div.className = 'item-poster';
|
|
div.innerText = comment.UserName;
|
|
}));
|
|
const content = createElement('div', 'item-content');
|
|
const mmsParts = createElement('div', div => div.style.display = 'none');
|
|
content.appendChild(createElement('span', span => span.innerHTML = escapeHtml(escapeEmoji(comment.Comment)), mmsParts));
|
|
if (comment.MMSParts?.length > 0) {
|
|
mmsParts.style.display = '';
|
|
for (let kv of comment.MMSParts) {
|
|
appendMedia(mmsParts, kv.Key, kv.Value);
|
|
}
|
|
}
|
|
div.append(
|
|
content,
|
|
createElement('div', div => {
|
|
div.className = 'item-time';
|
|
},
|
|
createElement('span', span => {
|
|
span.className = 'msgsetting sbutton ' + (comment.Hidden ? 'iconnotview' : 'iconview');
|
|
span.style.padding = '0px 0px 0px 5px';
|
|
span.style.fontSize = '12px';
|
|
span.style.display = this._var.option.showCommentHidden ? '' : 'none';
|
|
span.addEventListener('click', function () {
|
|
if (this.classList.contains('iconview')) {
|
|
func(comment.Id, true);
|
|
this.classList.remove('iconview');
|
|
this.classList.add('iconnotview');
|
|
} else {
|
|
func(comment.Id, false);
|
|
this.classList.remove('iconnotview');
|
|
this.classList.add('iconview');
|
|
}
|
|
});
|
|
}),
|
|
createElement('span', span => {
|
|
span.innerText = comment.SubmitLocalDateStr;
|
|
})
|
|
)
|
|
);
|
|
children.push(div);
|
|
}
|
|
children[0].style.marginTop = '0';
|
|
}
|
|
this._var.message.replaceChildren(...children);
|
|
this._var.message.scrollTop = this._var.message.scrollHeight
|
|
// setTimeout(() => this._var.message.scrollTop = this._var.message.scrollHeight, 0);
|
|
}
|
|
} |