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

feature: drag support in sort panel.

Browse Source
This commit is contained in:
Chen Lily
2024-05-13 16:46:55 +08:00
parent f676ec76db
commit a946012a33
14 changed files with 777 additions and 566 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
lib/app/communications/comments.js
View File

@ -1,6 +1,6 @@
import { createElement, setTooltip, createIcon } from "../../ui";
import { r as lang, nullOrEmpty, escapeHtml, escapeEmoji } from "../../utility";
import { createBox, appendMedia } from "./lib";
import { createBox, appendMedia, createHideMessageTitleButton, createHideMessageCommentTail } from "./lib";
let r = lang;
@ -25,7 +25,9 @@ export default class CustomerRecordComment {
}
}
get messageHidden() { return this._var.option.showCommentHidden }
/**
* @param {boolean} flag
*/
set messageHidden(flag) {
const el = this._var.container.querySelector('.msgadminsetting');
if (el == null) {
@ -62,34 +64,14 @@ export default class CustomerRecordComment {
}
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
createHideMessageTitleButton(this, 'showCommentHidden')
)
),
[
@ -154,11 +136,18 @@ export default class CustomerRecordComment {
return this._var.container = container;
}
load(data, func) {
load(data, func, hisFunc, keep) {
const children = [];
if (data?.length > 0) {
const lastVisible = this._var.option.showCommentHidden;
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';
}
}
// if (sendto !== '') {
// sendto = r('P_CU_SENDTO_COLON', 'Sent To :') + `\n${sendto}`;
// }
@ -177,37 +166,19 @@ export default class CustomerRecordComment {
}
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;
})
)
createHideMessageCommentTail(
this, 'showCommentHidden',
comment, 'SubmitLocalDateStr',
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);
this._var.message.scrollTop = this._var.message.scrollHeight
// setTimeout(() => this._var.message.scrollTop = this._var.message.scrollHeight, 0);
setTimeout(() => this._var.message.scrollTop = keep ? this._var.lastTop : this._var.message.scrollHeight, 0);
}
}

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

@ -1,6 +1,6 @@
import { Grid, GridColumn, createElement, setTooltip, createIcon, createCheckbox, createRadiobox, showAlert, showConfirm, Popup } from "../../ui";
import { r as lang, nullOrEmpty, formatUrl, escapeEmoji, isEmail, isPhone } from "../../utility";
import { createBox, appendMedia, fileSupported, insertFile, getMessageSendTo, getMessageStatus, updateCustomerName } from "./lib";
import { createBox, appendMedia, fileSupported, insertFile, getMessageSendTo, getMessageStatus, updateCustomerName, createHideMessageTitleButton, createHideMessageCommentTail } from "./lib";
import { Contact, CustomerRecordContact } from "./contact";
import Follower from "./follower";
@ -69,7 +69,9 @@ export default class CustomerCommunication {
element.dispatchEvent(new Event('change'));
}
get messageHidden() { return this._var.option.showMessageHidden }
/**
* @param {boolean} flag
*/
set messageHidden(flag) {
const el = this._var.container.querySelector('.msgadminsetting');
if (el == null) {
@ -425,24 +427,6 @@ export default class CustomerCommunication {
if (option.statusLinkVisible === false) {
checkLink.style.display = 'none';
}
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.showMessageHidden) {
this.classList.remove('iconnotview');
this.classList.add('iconview');
option.showMessageHidden = true;
container.querySelectorAll('.msgsetting').forEach(x => x.style.display = '');
} else {
this.classList.remove('iconview');
this.classList.add('iconnotview');
option.showMessageHidden = false;
container.querySelectorAll('.msgsetting').forEach(x => x.style.display = 'none');
}
});
}
const container = createBox(
createElement('div', null,
@ -450,7 +434,7 @@ export default class CustomerCommunication {
div.className = 'title-module';
div.innerText = option.title ?? r('P_WO_CUSTOMERCOMMUNICATION', 'Customer Communication');
},
spanv
createHideMessageTitleButton(this, 'showMessageHidden')
),
createElement('div', div => {
div.className = 'title-company';
@ -1179,7 +1163,7 @@ export default class CustomerCommunication {
return followers;
}
load(data, contacts, followers, func) {
load(data, contacts, followers, func, hisFunc, keep) {
const children = [];
if (data?.length > 0) {
contacts ??= this._var.data.contacts;
@ -1192,45 +1176,52 @@ export default class CustomerCommunication {
this._var.contactsUpdated = true;
}
}
for (let comm of data) {
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';
}
}
let name;
if (comm.IsReply && contacts?.length > 0) {
const c = isEmail(comm.Sender) ?
contacts.find(c => c.Email === comm.Sender) :
contacts.find(c => c.MobilePhone === comm.Sender);
if (comment.IsReply && contacts?.length > 0) {
const c = isEmail(comment.Sender) ?
contacts.find(c => c.Email === comment.Sender) :
contacts.find(c => c.MobilePhone === comment.Sender);
name = c?.Name;
}
name ??= comm.IsReply && String(comm.FormatSender) !== '' ? comm.FormatSender : comm.Sender;
const sendto = getMessageSendTo(comm, contacts, followers, r)
name ??= comment.IsReply && String(comment.FormatSender) !== '' ? comment.FormatSender : comment.Sender;
const sendto = getMessageSendTo(comment, contacts, followers, r)
div.appendChild(createElement('div', div => {
div.className = 'item-poster';
div.innerText = name;
if (!comm.IsReply && sendto?.length > 0) {
if (!comment.IsReply && 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 (/https?:\/\//i.test(comm.Message)) {
span.innerHTML = formatUrl(escapeEmoji(comm.Message));
if (/https?:\/\//i.test(comment.Message)) {
span.innerHTML = formatUrl(escapeEmoji(comment.Message));
} else {
span.innerText = escapeEmoji(comm.Message);
span.innerText = escapeEmoji(comment.Message);
}
span.appendChild(mmsParts);
}));
if (comm.MMSParts?.length > 0) {
if (comment.MMSParts?.length > 0) {
mmsParts.style.display = '';
for (let kv of comm.MMSParts) {
for (let kv of comment.MMSParts) {
appendMedia(mmsParts, kv.Key, kv.Value);
}
}
if (comm.IsReply) {
if (comment.IsReply) {
div.classList.add('item-other');
} else {
div.classList.add('item-self');
const [status, text, color, tips] = getMessageStatus(comm, r, this._var);
const [status, text, color, tips] = getMessageStatus(comment, r, this._var);
if (status !== -100) {
if (color != null) {
content.style.backgroundColor = color;
@ -1247,37 +1238,19 @@ export default class CustomerCommunication {
}
div.append(
content,
createElement('div', div => {
div.className = 'item-time';
},
createElement('span', span => {
span.className = 'msgsetting sbutton ' + (comm.Hidden ? 'iconnotview' : 'iconview');
span.style.padding = '0px 0px 0px 5px';
span.style.fontSize = '12px';
span.style.display = this._var.option.showMessageHidden ? '' : 'none';
span.addEventListener('click', function () {
if (this.classList.contains('iconview')) {
func(comm.Id, true);
this.classList.remove('iconview');
this.classList.add('iconnotview');
} else {
func(comm.Id, false);
this.classList.remove('iconnotview');
this.classList.add('iconview');
}
});
}),
createElement('span', span => {
span.innerText = comm.TimeStr;
})
)
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);
this._var.message.scrollTop = this._var.message.scrollHeight
// setTimeout(() => this._var.message.scrollTop = this._var.message.scrollHeight, 0);
setTimeout(() => this._var.message.scrollTop = keep ? this._var.lastTop : this._var.message.scrollHeight, 0);
}
}

70
lib/app/communications/internal.js
View File

@ -1,7 +1,7 @@
import { createElement, setTooltip, createIcon } from "../../ui";
import { r as lang, nullOrEmpty, escapeHtml, escapeEmoji } from "../../utility";
import { createBox, appendMedia } from "./lib";
import { fileSupported, insertFile, getMessageSendTo, getMessageStatus, updateCustomerName } from "./lib";
import { fileSupported, insertFile, getMessageSendTo, getMessageStatus, updateCustomerName, createHideMessageTitleButton, createHideMessageCommentTail } from "./lib";
let r = lang;
@ -32,7 +32,9 @@ export default class InternalComment {
}
}
get messageHidden() { return this._var.option.showCommentHidden }
/**
* @param {boolean} flag
*/
set messageHidden(flag) {
const el = this._var.container.querySelector('.msgadminsetting');
if (el == null) {
@ -123,26 +125,7 @@ export default class InternalComment {
div.className = 'title-module';
div.innerText = r('P_WO_INTERNALCOMMENTS', 'Internal Comments');
},
createElement('span', span => {
if (option.userIsAdmin) {
span.className = 'msgadminsetting sbutton iconnotview';
span.style.padding = '0px 0px 0px 5px';
span.addEventListener('click', function () {
if (!option.showMessageHidden) {
this.classList.remove('iconnotview');
this.classList.add('iconview');
option.showMessageHidden = true;
container.querySelectorAll('.msgsetting').forEach(x => x.style.display = '');
}
else {
this.classList.remove('iconview');
this.classList.add('iconnotview');
option.showMessageHidden = false;
container.querySelectorAll('.msgsetting').forEach(x => x.style.display = 'none');
}
});
}
})
createHideMessageTitleButton(this, 'showMessageHidden')
)
), []
);
@ -278,7 +261,7 @@ export default class InternalComment {
return this._var.container = container;
}
load(data, func) {
load(data, func, hisFunc, keep) {
const children = [];
if (data?.length > 0) {
this._var.comments = data;
@ -289,8 +272,15 @@ export default class InternalComment {
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';
@ -333,37 +323,19 @@ export default class InternalComment {
}
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.showMessageHidden ? '' : '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.TimeStr;
})
)
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);
this._var.message.scrollTop = this._var.message.scrollHeight
// setTimeout(() => this._var.message.scrollTop = this._var.message.scrollHeight, 0);
setTimeout(() => this._var.message.scrollTop = keep ? this._var.lastTop : this._var.message.scrollHeight, 0);
}
}

95
lib/app/communications/lib.js
View File

@ -420,4 +420,99 @@ export function updateCustomerName(messages, contacts) {
}
}
}
}
export function createHideMessageTitleButton(This, optionName) {
const option = This._var.option;
return createElement('span', span => {
if (option.userIsAdmin) {
if (option[optionName]) {
span.className = 'msgadminsetting sbutton iconview';
} else {
span.className = 'msgadminsetting sbutton iconnotview';
}
span.style.padding = '0px 0px 0px 5px';
setTooltip(span, option?.getText('P_WO_MESSAGEHISTORY_MANAGE', 'Manage Messages'));
span.addEventListener('click', function () {
const container = This._var.container;
if (!option[optionName]) {
this.classList.remove('iconnotview');
this.classList.add('iconview');
option[optionName] = true;
container.querySelectorAll('.msgsetting').forEach(x => x.style.display = '');
container.querySelectorAll('.msgHistory').forEach(h => h.style.display = h.getAttribute('ModifyCount') > 0 ? '' : 'none');
container.querySelectorAll('.hidden-content').forEach(c => c.style.display = '');
} else {
this.classList.remove('iconview');
this.classList.add('iconnotview');
option[optionName] = false;
container.querySelectorAll('.msgsetting').forEach(x => x.style.display = 'none');
container.querySelectorAll('.msgHistory').forEach(h => h.style.display = 'none');
container.querySelectorAll('.hidden-content').forEach(c => c.style.display = 'none');
}
});
}
});
}
export function createHideMessageCommentTail(This, optionName, comment, commentTime, func, hisFunc) {
const option = This._var.option;
const showTooltip = option?.getText('P_WO_MESSAGEHISTORY_VISIBLE', 'Visible');
const notShowTooltip = option?.getText('P_WO_MESSAGEHISTORY_NOTVISIBLE', 'Not Visible');
return createElement('div', div => {
div.className = 'item-time';
div.style.display = 'flex';
div.style.alignItems = 'center';
},
createElement('span', span => {
span.className = 'msgsetting sbutton ' + (comment.Hidden ? 'iconnotview' : 'iconview');
span.style.padding = '0';
span.style.fontSize = '12px';
setTooltip(span, comment.Hidden ? notShowTooltip : showTooltip);
span.style.display = option[optionName] ? '' : 'none';
span.addEventListener('click', function () {
if (this.classList.contains('iconview')) {
func(comment.Id, true);
this.classList.remove('iconview');
this.classList.add('iconnotview');
setTooltip(this, notShowTooltip);
} else {
func(comment.Id, false);
this.classList.remove('iconnotview');
this.classList.add('iconview');
setTooltip(this, showTooltip);
}
if (isNaN(comment.ModifyCount)) {
comment.ModifyCount = 1;
} else {
comment.ModifyCount += 1;
}
const x = This._var.container.querySelector('.history-span-' + comment.Id);
if (x != null) {
x.setAttribute('ModifyCount', comment.ModifyCount);
x.style.display = (option[optionName] && comment.ModifyCount > 0) ? '' : 'none';
}
});
}),
createElement('span', span => {
span.className = 'msgHistory history-span-' + comment.Id;
span.setAttribute('ModifyCount', comment.ModifyCount ?? 0);
span.style.display = (option[optionName] && comment.ModifyCount > 0) ? '' : 'none';
setTooltip(span, option?.getText('P_WO_MESSAGEHISTORY_HEADER', 'Hidden History'));
const icon = createIcon('fa-light', 'wave-sine');
icon.style.height = '12px';
icon.style.width = '12px';
icon.style.margin = '0 5px 0 0';
icon.style.cursor = 'pointer';
icon.style.border = '1px solid';
icon.style.borderRadius = '6px';
icon.style.borderColor = '#000';
icon.style.display = 'block';
span.appendChild(icon);
span.addEventListener('click', () => hisFunc(comment.Id));
}),
createElement('span', span => {
span.innerText = comment[commentTime];
})
);
}