280 lines
12 KiB
JavaScript
280 lines
12 KiB
JavaScript
import { createElement, setTooltip, createIcon } from "../../ui";
|
|
import { r as lang, nullOrEmpty, escapeHtml, escapeEmoji } from "../../utility";
|
|
import { createBox, appendMedia } from "./lib";
|
|
// import { fileSupported, insertFile } from "./lib";
|
|
|
|
let r = lang;
|
|
|
|
export default class InternalComment {
|
|
#container;
|
|
#option;
|
|
#enter;
|
|
#fileControl;
|
|
#file;
|
|
#message;
|
|
|
|
constructor(opt) {
|
|
this.#option = opt ?? {};
|
|
const getText = opt?.getText;
|
|
if (typeof getText === 'function') {
|
|
r = getText;
|
|
}
|
|
}
|
|
|
|
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) + '/' + String(this.#option.maxLength);
|
|
this.#container.querySelector('.message-bar .prompt-count').innerText = s;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {boolean} flag
|
|
*/
|
|
set loading(flag) {
|
|
if (this.#container == null) {
|
|
return;
|
|
}
|
|
this.#enter.disabled = flag;
|
|
this.#container.querySelector('.button-send-message').disabled = flag;
|
|
this.#container.querySelector('.button-post-note').disabled = flag;
|
|
}
|
|
|
|
get file() { return this.#file || this.#fileControl?.files?.[0] }
|
|
set file(f) {
|
|
this.#fileControl?.remove();
|
|
const label = this.#container.querySelector('.file-selector>.selector-name');
|
|
if (f == null) {
|
|
this.#fileControl = null;
|
|
this.#file = null;
|
|
if (label != null) {
|
|
label.style.display = 'none';
|
|
label.innerText = '';
|
|
label.querySelector('.ui-tooltip-wrapper')?.remove();
|
|
}
|
|
} else {
|
|
if (f instanceof HTMLInputElement) {
|
|
this.#fileControl = f;
|
|
this.#file = f.files[0];
|
|
const link = this.#container.querySelector('.file-selector>.selector-link');
|
|
if (link != null) {
|
|
link.appendChild(f);
|
|
}
|
|
} else {
|
|
this.#fileControl = null;
|
|
this.#file = f;
|
|
}
|
|
if (label != null) {
|
|
label.style.display = '';
|
|
label.innerText = f.name;
|
|
setTooltip(label, f.name);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {boolean} flag
|
|
*/
|
|
set readonly(flag) {
|
|
this.#option.readonly = flag;
|
|
if (this.#container == null) {
|
|
return;
|
|
}
|
|
this.#enter.disabled = flag === true;
|
|
this.#container.querySelector('.button-send-message').style.display = flag === true ? 'none' : '';
|
|
this.#container.querySelector('.button-post-note').style.display = flag === true ? 'none' : '';
|
|
}
|
|
|
|
create() {
|
|
const container = createBox(
|
|
createElement('div', null,
|
|
createElement('div', div => {
|
|
div.className = 'title-module';
|
|
div.innerText = r('P_WO_INTERNALCOMMENTS', 'Internal Comments');
|
|
})
|
|
), []
|
|
);
|
|
const readonly = this.#option.readonly;
|
|
// enter box
|
|
const enter = createElement('textarea', 'ui-text');
|
|
enter.placeholder = r('P_CU_ENTERCOMMENTHERE', 'Enter Comment Here');
|
|
enter.maxLength = this.#option.maxLength ??= 3000;
|
|
enter.addEventListener('input', () => {
|
|
const val = this.text;
|
|
const s = String(nullOrEmpty(val) ? 0 : val.length) + '/' + String(this.#option.maxLength);
|
|
this.#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.#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', selector => {
|
|
selector.className = 'file-selector';
|
|
if (this.#option.noMessage === true) {
|
|
selector.style.display = 'none';
|
|
}
|
|
},
|
|
createElement('div', div => {
|
|
div.className = 'selector-link';
|
|
div.style.display = 'none';
|
|
// div.addEventListener('click', () => {
|
|
// this.#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.#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-send-message';
|
|
button.style.backgroundColor = 'rgb(19, 150, 204)';
|
|
if (readonly === true || this.#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 this.#option.onAddMessage === 'function') {
|
|
this.loading = true;
|
|
this.#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 this.#option.onAddComment === 'function') {
|
|
this.loading = true;
|
|
this.#option.onAddComment(this.text, this.file);
|
|
}
|
|
})
|
|
})
|
|
)
|
|
)
|
|
);
|
|
|
|
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('P_CU_SENDTO_COLON', 'Send 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 = escapeEmoji(escapeHtml(comment.Comment)), mmsParts));
|
|
if (comment.IsMMS && 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', 'Send 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);
|
|
}));
|
|
}
|
|
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);
|
|
}
|
|
} |