feat(admin): dock ticket reply composer in conversation and move notes to a dialog
Put the reply composer at the bottom of the conversation card so the timeline and composer form one viewport-height panel; the send button is visible on load and Ctrl/Cmd+Enter submits. Internal notes now open in a dialog instead of expanding inline, so the sidebar no longer grows. Remove the shared ticket_composer helper and the inline note expansion CSS; both dialogs share ticket_dialog_head. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
54cc5301c3
commit
b9000e1b93
8 files changed
+178
-73
No files matched your search
+55
-14
@@ -1,4 +1,4 @@
|
||||
/** 工单后台:列表与处理工作区为页内视图,代客提交为列表页上的原生 dialog;写操作只使用工单 REST 接口,成功后整页跳转刷新。 */
|
||||
/** 工单后台:列表与处理工作区为页内视图;代客提交与内部备注为原生 dialog。写操作只使用工单 REST 接口,成功后整页跳转刷新。 */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
@@ -7,9 +7,13 @@
|
||||
if (!root || !config) return;
|
||||
|
||||
var strings = config.strings;
|
||||
var dialog = document.getElementById('aksrt-ticket-create-dialog');
|
||||
var dialogs = Array.prototype.slice.call(root.querySelectorAll('dialog.aksrt-ticket-dialog'));
|
||||
var opener = null;
|
||||
var feedbackBox = root.querySelector('[data-aksrt-ticket-feedback]');
|
||||
// 页面级提示(工作区顶部);弹窗内的表单使用弹窗自己的提示框。
|
||||
var pageFeedback = Array.prototype.slice.call(root.querySelectorAll('[data-aksrt-ticket-feedback]')).filter(function (box) {
|
||||
return !box.closest('dialog');
|
||||
})[0] || null;
|
||||
var feedbackBox = pageFeedback;
|
||||
var detail = root.querySelector('[data-aksrt-ticket-detail]');
|
||||
var ticketId = detail ? parseInt(detail.dataset.aksrtTicketDetail, 10) : 0;
|
||||
var draftKey = 'aksrt-ticket-drafts-' + ticketId;
|
||||
@@ -177,17 +181,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
/** 关闭代客提交弹窗:保存中不可关;有未保存输入时先确认。不响应遮罩点击,避免误关丢失输入。 */
|
||||
function closeDialog() {
|
||||
/** 表单所在弹窗的提示框优先,否则用页面级提示框。 */
|
||||
function feedbackFor(node) {
|
||||
var host = node && node.closest('dialog');
|
||||
return (host && host.querySelector('[data-aksrt-ticket-feedback]')) || pageFeedback;
|
||||
}
|
||||
|
||||
/** 只比较弹窗内表单的改动,弹窗外的回复草稿不影响关闭确认。 */
|
||||
function dialogDirty(dialog) {
|
||||
var form = dialog.querySelector('[data-aksrt-ticket-form]');
|
||||
if (!form) return false;
|
||||
var base = baselines.get(form) || {};
|
||||
var current = values(form);
|
||||
return Object.keys(current).some(function (key) { return current[key] !== base[key]; });
|
||||
}
|
||||
|
||||
/** 关闭弹窗:保存中不可关;有未保存输入时先确认。不响应遮罩点击,避免误关丢失输入。 */
|
||||
function closeDialog(dialog) {
|
||||
if (saving || !dialog.open) return;
|
||||
if (!stale && Object.keys(drafts()).length && !window.confirm(strings.discard)) return;
|
||||
if (!stale && dialogDirty(dialog) && !window.confirm(strings.discard)) return;
|
||||
dialog.close();
|
||||
}
|
||||
|
||||
if (dialog) {
|
||||
dialogs.forEach(function (dialog) {
|
||||
dialog.addEventListener('cancel', function (event) {
|
||||
event.preventDefault();
|
||||
closeDialog();
|
||||
closeDialog(dialog);
|
||||
});
|
||||
dialog.addEventListener('close', function () {
|
||||
var form = dialog.querySelector('[data-aksrt-ticket-form]');
|
||||
@@ -196,11 +215,14 @@
|
||||
baselines.set(form, values(form));
|
||||
form.querySelectorAll('[name]').forEach(validateText);
|
||||
form.querySelectorAll('[data-aksrt-ticket-editor]').forEach(counter);
|
||||
feedbackBox = feedbackFor(dialog);
|
||||
feedback('', false, false);
|
||||
}
|
||||
feedbackBox = pageFeedback;
|
||||
if (opener && opener.isConnected) opener.focus();
|
||||
opener = null;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
root.addEventListener('click', function (event) {
|
||||
if (event.target.closest('[data-aksrt-ticket-reload]')) {
|
||||
@@ -208,17 +230,22 @@
|
||||
window.location.reload();
|
||||
return;
|
||||
}
|
||||
if (dialog && event.target.closest('[data-aksrt-dialog-close]')) {
|
||||
closeDialog();
|
||||
var closer = event.target.closest('[data-aksrt-dialog-close]');
|
||||
if (closer && closer.closest('dialog')) {
|
||||
closeDialog(closer.closest('dialog'));
|
||||
return;
|
||||
}
|
||||
var open = dialog && event.target.closest('[data-aksrt-dialog-open="' + dialog.id + '"]');
|
||||
if (open) {
|
||||
var open = event.target.closest('[data-aksrt-dialog-open]');
|
||||
var target = open && document.getElementById(open.dataset.aksrtDialogOpen);
|
||||
if (target && dialogs.indexOf(target) !== -1) {
|
||||
if (saving) return;
|
||||
opener = open;
|
||||
feedbackBox = feedbackFor(target);
|
||||
// 结果未确认时保留「重新加载」提示,重新打开也不能再提交。
|
||||
if (!stale) feedback('', false, false);
|
||||
dialog.showModal();
|
||||
target.showModal();
|
||||
var focus = target.querySelector('[autofocus]') || target.querySelector('h2');
|
||||
if (focus) focus.focus();
|
||||
return;
|
||||
}
|
||||
if (saving || stale) return;
|
||||
@@ -241,6 +268,18 @@
|
||||
if (event.target.matches('[data-aksrt-ticket-editor]')) counter(event.target);
|
||||
});
|
||||
|
||||
// 回复框 Ctrl/⌘ + Enter 直接发送;输入法组字中不触发。
|
||||
root.addEventListener('keydown', function (event) {
|
||||
if (event.key !== 'Enter' || !(event.ctrlKey || event.metaKey) || event.isComposing) return;
|
||||
if (!event.target.matches('[data-aksrt-ticket-send-shortcut]')) return;
|
||||
var form = event.target.form;
|
||||
if (!form) return;
|
||||
event.preventDefault();
|
||||
// 走 submit 事件,保证与点击「发送回复」经过同一套校验与防重。
|
||||
if (typeof form.requestSubmit === 'function') form.requestSubmit();
|
||||
else form.querySelector('[type="submit"]').click();
|
||||
});
|
||||
|
||||
root.addEventListener('change', function (event) {
|
||||
var select = event.target;
|
||||
if (select.matches('[data-aksrt-ticket-status]')) {
|
||||
@@ -256,6 +295,7 @@
|
||||
var insert = (before && !/\n$/.test(before) ? '\n' : '') + select.value;
|
||||
var next = before + insert + field.value.slice(end);
|
||||
if (next.length > field.maxLength) {
|
||||
feedbackBox = feedbackFor(field);
|
||||
feedback(strings.tooLong, true, false);
|
||||
} else {
|
||||
field.value = next;
|
||||
@@ -279,6 +319,7 @@
|
||||
var remaining = drafts(form);
|
||||
var controller = new AbortController();
|
||||
var timer = setTimeout(function () { controller.abort(); }, 30000);
|
||||
feedbackBox = feedbackFor(form);
|
||||
busy(form, true);
|
||||
feedback(strings.saving, false, false);
|
||||
try {
|
||||
|
||||
Reference in new issue
Block a user