tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adjustment

Browse Source
This commit is contained in:
Chen Lily
2023-07-27 10:03:53 +08:00
parent 3e9ee59178
commit 29209a3a00
17 changed files with 456 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
lib/app/communications/customer.js
View File

@ -1,6 +1,6 @@
import { Grid, GridColumn, createElement, setTooltip, createIcon, createCheckbox, createRadiobox, showAlert, showConfirm, Popup, createPicture, createAudio, createVideo, createPdf, createSmilefile, createVcard, createVideofile, createFile } from "../../ui";
import { Grid, GridColumn, createElement, setTooltip, createIcon, createCheckbox, createRadiobox, showAlert, showConfirm, Popup } from "../../ui";
import { r, nullOrEmpty, formatUrl, isEmail, isPhone } from "../../utility";
import { createBox } from "./lib";
import { createBox, appendMedia, fileSupported, insertFile } from "./lib";
import { Contact, CustomerRecordContact } from "./contact";
import Follower from "./follower";
@ -35,6 +35,8 @@ class CustomerCommunication {
#followers;
#buttonFollower;
#enter;
#fileControl;
#file;
#message;
#data = {};
#gridContact;
@ -118,6 +120,38 @@ class CustomerCommunication {
}
}
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);
}
}
}
get customerName() { return this.#container.querySelector('.customer-name>.ui-input')?.value }
set customerName(name) {
const element = this.#container.querySelector('.customer-name>.ui-input');
@ -400,10 +434,20 @@ class CustomerCommunication {
// enter.disabled = true;
// }
enter.addEventListener('input', () => {
const val = this.#enter.value;
const val = this.text;
const s = String(nullOrEmpty(val) ? 0 : val.length) + '/' + String(option.maxLength);
this.#container.querySelector('.message-bar .prompt-count').innerText = s;
});
enter.addEventListener('paste', e => {
if (option.customerNameVisible === true) {
return;
}
const file = e.clipboardData.files[0];
if (file != null) {
e.preventDefault();
this.file = insertFile(container, file);
}
});
this.#enter = enter;
container.appendChild(
createElement('div', div => {
@ -411,6 +455,28 @@ class CustomerCommunication {
if (readonly === true) {
div.style.display = 'none';
}
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);
}
}
});
},
enter,
createElement('div', div => div.style.textAlign = 'right',
@ -426,6 +492,41 @@ class CustomerCommunication {
input.className = 'ui-input';
})
),
createElement('div', selector => {
selector.className = 'file-selector';
if (option.customerNameVisible === true) {
selector.style.display = 'none';
}
},
createElement('div', div => {
div.className = 'selector-link';
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]);
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';
@ -436,7 +537,7 @@ class CustomerCommunication {
button.appendChild(createIcon('fa-solid', 'paper-plane'));
setTooltip(button, r('sendMessage', 'Send Message'));
button.addEventListener('click', () => {
const val = this.#enter.value;
const val = this.text;
if (nullOrEmpty(val?.trim())) {
const p = showAlert(r('error', 'Error'), r('messageRequired', 'Please input the message.'), 'warn');
if (typeof option.onMasking === 'function') {
@ -446,7 +547,7 @@ class CustomerCommunication {
return;
}
if (typeof option.onAddMessage === 'function') {
option.onAddMessage(this.#enter.value);
option.onAddMessage(this.text, this.file);
}
})
})
@ -1063,43 +1164,20 @@ class CustomerCommunication {
}
}));
const content = createElement('div', 'item-content');
const emoji = s => s.replace(/(=[A-Fa-f0-9]{2}){4}/, s => decodeURIComponent(s.replaceAll('=', '%')));
const mmsParts = createElement('div', div => div.style.display = 'none');
content.appendChild(createElement('span', span => {
if (/https?:\/\//i.test(comm.Message)) {
span.innerHTML = formatUrl(comm.Message);
span.innerHTML = emoji(formatUrl(comm.Message));
} else {
span.innerText = comm.Message;
span.innerText = emoji(comm.Message);
}
span.appendChild(mmsParts);
}));
if (comm.IsMMS && comm.MMSParts?.length > 0) {
mmsParts.style.display = '';
for (let kv of comm.MMSParts) {
switch (kv.Key) {
case 'application/pdf':
content.appendChild(createPdf(kv.Value));
break;
case 'application/smil':
content.appendChild(createSmilefile(kv.Value));
break;
case 'audio/amr':
content.appendChild(createAudio(kv.Key));
break;
case 'image/gif':
case 'image/jpeg':
case 'image/png':
content.appendChild(createPicture(kv.Value));
break;
case 'text/x-vcard':
content.appendChild(createVcard(kv.Value));
break;
case 'video/3gpp':
content.appendChild(createVideofile(kv.Value));
break;
case 'video/mp4':
content.appendChild(createVideo(kv.Value));
break;
default:
content.appendChild(createFile(kv.Value));
break;
}
appendMedia(mmsParts, kv.Key, kv.Value);
}
}
if (comm.IsReply) {