119 lines
4.9 KiB
JavaScript
119 lines
4.9 KiB
JavaScript
import { createElement, setTooltip, createIcon } from "../../ui";
|
|
import { r, nullOrEmpty, escapeHtml } from "../../utility";
|
|
import { createBox } from "./lib";
|
|
|
|
class InternalComment {
|
|
#container;
|
|
#option;
|
|
#enter;
|
|
#message;
|
|
|
|
constructor(opt) {
|
|
this.#option = opt ?? {};
|
|
}
|
|
|
|
get text() { return this.#enter?.value }
|
|
set text(s) {
|
|
const element = this.#enter;
|
|
if (element != null) {
|
|
element.value = s
|
|
s = String(nullOrEmpty(s) ? 0 : val.length) + '/3000';
|
|
this.#container.querySelector('.message-bar .prompt-count').innerText = s;
|
|
}
|
|
}
|
|
|
|
create() {
|
|
const container = createBox(
|
|
createElement('div', null,
|
|
createElement('div', div => div.innerText = r('internalComments', 'Internal Comments'))
|
|
), []
|
|
);
|
|
// enter box
|
|
const enter = createElement('textarea');
|
|
enter.placeholder = r('typeComment', 'Enter Comment Here');
|
|
enter.maxLength = 3000;
|
|
enter.addEventListener('input', () => {
|
|
const val = this.#enter.value;
|
|
const s = String(nullOrEmpty(val) ? 0 : val.length) + '/3000';
|
|
this.#container.querySelector('.message-bar .prompt-count').innerText = s;
|
|
});
|
|
this.#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)';
|
|
button.appendChild(createIcon('fa-solid', 'paper-plane'));
|
|
setTooltip(button, r('sendMessage', 'Send Message'));
|
|
button.addEventListener('click', () => {
|
|
if (typeof this.#option.onAddMessage === 'function') {
|
|
this.#option.onAddMessage(this.#enter.value);
|
|
}
|
|
})
|
|
}),
|
|
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)';
|
|
button.appendChild(createIcon('fa-solid', 'comment-alt-lines'));
|
|
setTooltip(button, r('postNote', 'Post Note'));
|
|
button.addEventListener('click', () => {
|
|
if (typeof this.#option.onAddComment === 'function') {
|
|
this.#option.onAddComment(this.#enter.value);
|
|
}
|
|
})
|
|
})
|
|
)
|
|
)
|
|
);
|
|
|
|
const message = createElement('div', 'list-bar');
|
|
this.#message = message;
|
|
container.appendChild(message);
|
|
return this.#container = container;
|
|
}
|
|
|
|
load(data) {
|
|
const children = [];
|
|
if (data?.length > 0) {
|
|
for (let comment of data) {
|
|
const div = createElement('div', 'item-div');
|
|
// if (sendto !== '') {
|
|
// sendto = r('sendToColon', 'Send To :') + `\n${sendto}`;
|
|
// }
|
|
div.appendChild(createElement('div', div => {
|
|
div.className = 'item-poster';
|
|
div.innerText = comment.UserName;
|
|
}));
|
|
const content = createElement('div', 'item-content');
|
|
content.appendChild(createElement('span', span => span.innerText = escapeHtml(comment.Comment)));
|
|
if (comment.FollowUp?.length > 0) {
|
|
div.classList.add('item-sent');
|
|
const sendto = r('sendToColon', 'Send To :') + '\r\n' + comment.FollowUp.split(';').join('\r\n');
|
|
content.appendChild(createElement('div', div => {
|
|
div.className = 'item-status';
|
|
div.innerText = r('sent', 'Sent');
|
|
setTooltip(div, sendto);
|
|
}));
|
|
}
|
|
div.append(
|
|
content,
|
|
createElement('div', div => {
|
|
div.className = 'item-time';
|
|
div.innerText = comment.SubmitDateStr;
|
|
})
|
|
);
|
|
children.push(div);
|
|
}
|
|
children[0].style.marginTop = '0';
|
|
}
|
|
this.#message.replaceChildren(...children);
|
|
this.#message.scrollTop = this.#message.scrollHeight
|
|
// setTimeout(() => this.#message.scrollTop = this.#message.scrollHeight, 0);
|
|
}
|
|
}
|
|
|
|
export default InternalComment; |