feat(admin): replace ticket dialogs with in-page views
Ticket handling on users.php?page=aksrt_tickets no longer uses dialogs. The list, the workspace (?id=N) and the assisted create form (?view=new) are server-rendered page views that carry the list filters and page for going back. Writes still go through the ticket REST routes; on success the page reloads with a native notice, and unsent drafts in other forms survive the reload via sessionStorage. Uncertain or conflicting writes lock every form and only offer a reload. Remove dead code: UsersMenusTicketsDialogs, the aksrt_ticket_view AJAX read and its nonce, dialog CSS/JS (backdrop, scroll lock, focus return, read races) and the dialog runtime test. Fix the create link carrying an unclamped page number on out-of-range list pages. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Fable 5 committed
1 parent
48e54dc115
commit
d86a85e6a6
13 files changed
+720
-1264
No files matched your search
@@ -1,4 +1,4 @@
|
||||
/* 工单运营页：列表保持紧凑，工作区在原生 dialog 内展开。复用 NativeUi 令牌。 */
|
||||
/* 工单运营页：列表、处理工作区（?id=）与代客提交（?view=new）均为页内视图。复用 NativeUi 令牌。 */
|
||||
.aksrt-tickets-admin__toolbar { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
|
||||
.aksrt-tickets-admin__toolbar .subsubsub { margin: 0; padding: 0; box-shadow: none; }
|
||||
.aksrt-tickets-admin__table { min-width: 1000px; table-layout: fixed; }
|
||||
@@ -9,7 +9,7 @@
|
||||
.aksrt-tickets-admin__table .column-admin { width: 10%; }
|
||||
.aksrt-tickets-admin__table .column-time { width: 18%; }
|
||||
.aksrt-tickets-admin__table .column-actions { width: 10%; }
|
||||
.aksrt-tickets-admin__table .row-title { text-align: left; font-size: 14px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
|
||||
.aksrt-tickets-admin__table .row-title { display: inline; font-size: 14px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
|
||||
.aksrt-tickets-admin__sub { margin-top: 4px; color: var(--an-text-2); font-size: 12px; overflow-wrap: anywhere; }
|
||||
.aksrt-native .aksrt-tickets-admin__row.is-awaiting td:first-child { box-shadow: inset 3px 0 0 var(--an-primary); }
|
||||
.aksrt-ticket-hint { color: var(--an-muted); font-size: 12px; font-weight: 400; }
|
||||
@@ -22,60 +22,27 @@
|
||||
.aksrt-ticket-user img { flex: none; border-radius: 50%; }
|
||||
.aksrt-ticket-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* 原生 top layer：固定头部/操作区，仅正文滚动。 */
|
||||
html.aksrt-ticket-modal-open { overflow: hidden; scrollbar-gutter: stable; }
|
||||
.aksrt-ticket-dialog {
|
||||
box-sizing: border-box;
|
||||
width: min(1200px, calc(100vw - 48px));
|
||||
max-width: none;
|
||||
max-height: calc(100dvh - 48px);
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
color: var(--an-text);
|
||||
background: var(--an-card);
|
||||
border: 0;
|
||||
border-radius: var(--an-radius);
|
||||
box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 12px 32px rgba(15, 23, 42, .12), 0 32px 80px rgba(15, 23, 42, .16);
|
||||
overflow: hidden;
|
||||
font: inherit;
|
||||
}
|
||||
.aksrt-ticket-dialog:not([open]) { display: none; }
|
||||
.aksrt-ticket-dialog[open] { animation: aksrt-ticket-dialog-in .18s ease-out; }
|
||||
.aksrt-ticket-dialog[open]::backdrop { animation: aksrt-ticket-fade-in .18s ease-out; }
|
||||
@keyframes aksrt-ticket-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.99); } }
|
||||
@keyframes aksrt-ticket-fade-in { from { opacity: 0; } }
|
||||
.aksrt-ticket-dialog--create { width: min(720px, calc(100vw - 48px)); }
|
||||
.aksrt-ticket-dialog::backdrop { background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); }
|
||||
.aksrt-ticket-dialog__frame { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); margin: 0; }
|
||||
.aksrt-ticket-dialog__head { display: flex; flex: none; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 24px; border-bottom: 1px solid var(--an-border-soft); }
|
||||
.aksrt-ticket-dialog__head > div { min-width: 0; }
|
||||
.aksrt-ticket-dialog__head h2 { margin: 0; color: var(--an-text); font-size: 18px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
|
||||
.aksrt-ticket-dialog__head h2:focus { outline: 0; }
|
||||
.aksrt-ticket-dialog__head p { margin: 4px 0 0; color: var(--an-muted); font-size: 12px; overflow-wrap: anywhere; }
|
||||
.aksrt-ticket-dialog__close { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -2px -6px 0 0; padding: 0; color: var(--an-muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; transition: background .15s, color .15s; }
|
||||
.aksrt-ticket-dialog__close:hover { color: var(--an-text); background: var(--an-bg-soft); }
|
||||
.aksrt-ticket-dialog__body { min-height: 0; padding: 20px 24px; overflow-y: auto; overscroll-behavior: contain; }
|
||||
.aksrt-ticket-dialog--detail .aksrt-ticket-dialog__body { min-height: 160px; padding: 16px; background: var(--an-bg-soft); }
|
||||
.aksrt-ticket-dialog--detail .aksrt-ticket-dialog__body[aria-busy="true"]:empty { background: var(--an-bg-soft) linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent) -200px 0 / 200px 100% no-repeat; animation: aksrt-ticket-shimmer 1.2s linear infinite; }
|
||||
@keyframes aksrt-ticket-shimmer { to { background-position: calc(100% + 200px) 0; } }
|
||||
.aksrt-ticket-dialog__foot { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 24px; background: var(--an-card); border-top: 1px solid var(--an-border-soft); }
|
||||
.aksrt-ticket-dialog__foot > .aksrt-ticket-hint { margin-right: auto; }
|
||||
.aksrt-ticket-dialog [hidden] { display: none !important; }
|
||||
.aksrt-ticket-dialog textarea { box-sizing: border-box; width: 100%; min-height: 64px; resize: vertical; line-height: 1.65; }
|
||||
.aksrt-ticket-dialog :is(input, select, textarea, button, a, summary):focus-visible,
|
||||
/* 工作区与创建页共用：页头、提交反馈与表单控件。 */
|
||||
.aksrt-tickets-admin__detail-header .aksrt-native-header__title { overflow-wrap: anywhere; }
|
||||
.aksrt-tickets-admin__detail-header .aksrt-native-header__desc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
|
||||
.aksrt-tickets-admin [hidden] { display: none !important; }
|
||||
.aksrt-tickets-admin textarea { box-sizing: border-box; width: 100%; min-height: 64px; resize: vertical; line-height: 1.65; }
|
||||
.aksrt-tickets-admin :is(input, select, textarea, button, a, summary):focus-visible,
|
||||
.aksrt-ticket-conversation__scroll:focus-visible { outline: 2px solid var(--an-primary); outline-offset: 2px; box-shadow: none; }
|
||||
.aksrt-ticket-dialog button:disabled { cursor: default; opacity: .6; }
|
||||
.aksrt-ticket-feedback { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px; color: #176b3d; background: var(--an-primary-soft); border-bottom: 1px solid color-mix(in srgb, var(--an-primary) 18%, transparent); font-size: 13px; }
|
||||
.aksrt-tickets-admin button:disabled { cursor: default; opacity: .6; }
|
||||
.aksrt-ticket-feedback { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 10px 16px; color: #176b3d; background: var(--an-primary-soft); border: 1px solid color-mix(in srgb, var(--an-primary) 18%, transparent); border-radius: var(--an-radius-sm); font-size: 13px; }
|
||||
.aksrt-ticket-feedback p { margin: 0; }
|
||||
.aksrt-ticket-feedback.is-error { color: #a61b36; background: #fdf0f2; border-bottom-color: #f6d3da; }
|
||||
.aksrt-ticket-feedback.is-error { color: #a61b36; background: #fdf0f2; border-color: #f6d3da; }
|
||||
.aksrt-ticket-feedback .button { flex: none; }
|
||||
.aksrt-tickets-admin__create { max-width: 880px; }
|
||||
.aksrt-tickets-admin__create .aksrt-native-form-foot .aksrt-ticket-hint { margin-left: auto; }
|
||||
|
||||
/* 处理工作区：会话与回复在左，处理信息与内部备注在右。 */
|
||||
.aksrt-ticket-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
|
||||
.aksrt-ticket-detail__main,
|
||||
.aksrt-ticket-detail__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
|
||||
/* 侧栏不超过弹窗正文可视高度（变量由脚本按正文尺寸写入，减去上下内边距），超出时栏内滚动。 */
|
||||
.aksrt-ticket-detail__side { position: sticky; top: 0; max-height: calc(var(--aksrt-ticket-panel-height, calc(100dvh - 160px)) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
|
||||
/* 侧栏在页面滚动时吸顶（让出 WP 管理工具栏），超出视口高度时栏内滚动。 */
|
||||
.aksrt-ticket-detail__side { position: sticky; top: 48px; max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
|
||||
.aksrt-ticket-conversation,
|
||||
.aksrt-ticket-composer--reply,
|
||||
.aksrt-ticket-detail__card { background: var(--an-card); border: 1px solid var(--an-border); border-radius: var(--an-radius); }
|
||||
@@ -86,7 +53,7 @@ html.aksrt-ticket-modal-open { overflow: hidden; scrollbar-gutter: stable; }
|
||||
.aksrt-ticket-conversation > .aksrt-ticket-section-head { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--an-border-soft); }
|
||||
|
||||
/* 会话时间线：用户在左、客服在右、系统事件居中。 */
|
||||
.aksrt-ticket-conversation__scroll { max-height: 52vh; padding: 20px 16px; overflow-y: auto; overscroll-behavior: contain; }
|
||||
.aksrt-ticket-conversation__scroll { max-height: 60vh; padding: 20px 16px; overflow-y: auto; overscroll-behavior: contain; }
|
||||
.aksrt-ticket-detail__thread { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; }
|
||||
.aksrt-ticket-detail__message { display: flex; align-items: flex-start; gap: 10px; max-width: 86%; margin: 0; }
|
||||
.aksrt-ticket-detail__message.is-admin { flex-direction: row-reverse; align-self: flex-end; }
|
||||
@@ -123,7 +90,7 @@ html.aksrt-ticket-modal-open { overflow: hidden; scrollbar-gutter: stable; }
|
||||
.aksrt-ticket-composer__box:focus-within { border-color: var(--an-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--an-primary) 18%, transparent); }
|
||||
.aksrt-native .aksrt-ticket-composer__box textarea { display: block; padding: 10px 12px; background: transparent; border: 0; border-radius: var(--an-radius-sm) var(--an-radius-sm) 0 0; box-shadow: none; }
|
||||
.aksrt-native .aksrt-ticket-composer__box textarea:focus,
|
||||
.aksrt-ticket-dialog .aksrt-ticket-composer__box textarea:focus-visible { outline: 0; box-shadow: none; }
|
||||
.aksrt-tickets-admin .aksrt-ticket-composer__box textarea:focus-visible { outline: 0; box-shadow: none; }
|
||||
.aksrt-ticket-composer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-top: 1px solid var(--an-border-soft); }
|
||||
.aksrt-ticket-composer__bar select { max-width: min(240px, 100%); min-height: 30px; font-size: 12px; }
|
||||
.aksrt-ticket-counter { margin-left: auto; color: var(--an-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
|
||||
@@ -170,22 +137,13 @@ html.aksrt-ticket-modal-open { overflow: hidden; scrollbar-gutter: stable; }
|
||||
.aksrt-ticket-detail__side { position: static; max-height: none; overflow: visible; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.aksrt-ticket-dialog,
|
||||
.aksrt-ticket-dialog--create { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 10px; }
|
||||
.aksrt-ticket-dialog__frame { max-height: calc(100dvh - 16px); }
|
||||
.aksrt-ticket-dialog__head,
|
||||
.aksrt-ticket-dialog__body,
|
||||
.aksrt-ticket-dialog__foot,
|
||||
.aksrt-ticket-feedback { padding: 12px 14px; }
|
||||
.aksrt-ticket-dialog--detail .aksrt-ticket-dialog__body { padding: 10px; }
|
||||
.aksrt-ticket-dialog__head h2 { font-size: 16px; }
|
||||
.aksrt-ticket-dialog__foot > .aksrt-ticket-hint { flex-basis: 100%; }
|
||||
.aksrt-ticket-conversation__scroll { max-height: 44vh; padding: 14px 12px; }
|
||||
.aksrt-ticket-conversation__scroll { max-height: 50vh; padding: 14px 12px; }
|
||||
.aksrt-ticket-detail__message { max-width: 100%; }
|
||||
.aksrt-ticket-detail__avatar { width: 28px; height: 28px; }
|
||||
.aksrt-ticket-composer__bar select { flex-basis: 100%; max-width: 100%; }
|
||||
.aksrt-ticket-feedback { align-items: flex-start; flex-direction: column; }
|
||||
.aksrt-tickets-admin__create .aksrt-native-form-foot .aksrt-ticket-hint { flex-basis: 100%; margin-left: 0; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.aksrt-tickets-admin *, .aksrt-tickets-admin *::before, .aksrt-tickets-admin *::backdrop { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
|
||||
.aksrt-tickets-admin *, .aksrt-tickets-admin *::before { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
|
||||
}
|
||||
+110
-270
@@ -1,33 +1,20 @@
|
||||
/** 工单后台：按需加载弹窗，写操作只使用工单 REST 接口。 */
|
||||
/** 工单后台：列表 / 处理工作区 / 代客提交均为页内视图；写操作只使用工单 REST 接口，成功后整页跳转刷新。 */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var root = document.querySelector('.aksrt-tickets-admin');
|
||||
var config = window.AKSRTAdminTickets;
|
||||
var createDialog = document.getElementById('aksrt-ticket-create-dialog');
|
||||
var detailDialog = document.getElementById('aksrt-ticket-detail-dialog');
|
||||
if (!root || !config || !createDialog || !detailDialog || typeof detailDialog.showModal !== 'function') return;
|
||||
if (!root || !config) return;
|
||||
|
||||
var strings = config.strings;
|
||||
var panel = detailDialog.querySelector('[data-aksrt-ticket-panel]');
|
||||
var list = root.querySelector('[data-aksrt-ticket-list]');
|
||||
var detailTitle = document.getElementById('aksrt-ticket-detail-title');
|
||||
var initialTitle = detailTitle.textContent;
|
||||
var feedbackBox = root.querySelector('[data-aksrt-ticket-feedback]');
|
||||
var detail = root.querySelector('[data-aksrt-ticket-detail]');
|
||||
var ticketId = detail ? parseInt(detail.dataset.aksrtTicketDetail, 10) : 0;
|
||||
var draftKey = 'aksrt-ticket-drafts-' + ticketId;
|
||||
var baselines = new WeakMap();
|
||||
var active = null;
|
||||
var opener = null;
|
||||
var ticketId = 0;
|
||||
var saving = false;
|
||||
var loading = false;
|
||||
var stale = false;
|
||||
var retryPage = false;
|
||||
var savedMessage = '';
|
||||
var savedDrafts = {};
|
||||
var disabledControls = [];
|
||||
var readController = null;
|
||||
var generation = 0;
|
||||
var pointerOutside = false;
|
||||
var feedbackTimer = 0;
|
||||
var leaving = false;
|
||||
|
||||
function values(form) {
|
||||
var result = {};
|
||||
@@ -37,14 +24,18 @@
|
||||
return result;
|
||||
}
|
||||
|
||||
function forms() {
|
||||
return Array.prototype.slice.call(root.querySelectorAll('[data-aksrt-ticket-form]'));
|
||||
}
|
||||
|
||||
/** 各表单相对初始值的改动；except 为正在提交的表单。 */
|
||||
function drafts(except) {
|
||||
var result = {};
|
||||
if (!active) return result;
|
||||
active.querySelectorAll('[data-aksrt-ticket-form]').forEach(function (form) {
|
||||
forms().forEach(function (form) {
|
||||
if (form === except) return;
|
||||
var base = baselines.get(form) || {};
|
||||
var changed = {};
|
||||
var current = values(form);
|
||||
var changed = {};
|
||||
Object.keys(current).forEach(function (key) {
|
||||
if (current[key] !== base[key]) changed[key] = current[key];
|
||||
});
|
||||
@@ -53,10 +44,6 @@
|
||||
return result;
|
||||
}
|
||||
|
||||
function dirty() {
|
||||
return Object.keys(drafts()).length > 0 || Object.keys(savedDrafts).length > 0;
|
||||
}
|
||||
|
||||
function counter(field) {
|
||||
var output = root.querySelector('[data-aksrt-ticket-counter="' + field.id + '"]');
|
||||
if (!output) return;
|
||||
@@ -75,97 +62,64 @@
|
||||
if (!select) return;
|
||||
var option = select.options[select.selectedIndex];
|
||||
var closed = !!option && option.dataset.closed === '1';
|
||||
var warning = form.querySelector('[data-aksrt-ticket-close-warning]');
|
||||
var confirm = form.querySelector('[data-aksrt-ticket-close-confirm]');
|
||||
warning.hidden = !closed;
|
||||
form.querySelector('[data-aksrt-ticket-close-warning]').hidden = !closed;
|
||||
confirm.required = closed;
|
||||
if (!closed) confirm.checked = false;
|
||||
}
|
||||
|
||||
function setupForms(container, restore) {
|
||||
container.querySelectorAll('[data-aksrt-ticket-form]').forEach(function (form) {
|
||||
baselines.set(form, values(form));
|
||||
var changes = (restore || {})[form.dataset.aksrtTicketForm] || {};
|
||||
form.querySelectorAll('[name]').forEach(function (field) {
|
||||
if (Object.prototype.hasOwnProperty.call(changes, field.name)) field.value = changes[field.name];
|
||||
validateText(field);
|
||||
});
|
||||
syncStatus(form);
|
||||
});
|
||||
container.querySelectorAll('[data-aksrt-ticket-editor]').forEach(counter);
|
||||
function feedback(message, error, reload) {
|
||||
if (!feedbackBox) return;
|
||||
feedbackBox.hidden = !message;
|
||||
feedbackBox.classList.toggle('is-error', !!error);
|
||||
feedbackBox.querySelector('p').textContent = message || '';
|
||||
feedbackBox.querySelector('[data-aksrt-ticket-reload]').hidden = !reload;
|
||||
}
|
||||
|
||||
/** 成功与可忽略的错误提示自动消失；加载/保存中与需重试的提示保留到状态变化。 */
|
||||
function feedback(dialog, message, error, retry) {
|
||||
var box = dialog.querySelector('[data-aksrt-ticket-feedback]');
|
||||
clearTimeout(feedbackTimer);
|
||||
box.hidden = !message;
|
||||
box.classList.toggle('is-error', !!error);
|
||||
box.querySelector('p').textContent = message || '';
|
||||
box.querySelector('[data-aksrt-ticket-retry]').hidden = !retry;
|
||||
if (!message || retry || message === strings.loading || message === strings.saving) return;
|
||||
feedbackTimer = setTimeout(function () { box.hidden = true; }, error ? 6000 : 3000);
|
||||
}
|
||||
|
||||
function busy(value) {
|
||||
function busy(form, value) {
|
||||
saving = value;
|
||||
if (!active) return;
|
||||
active.setAttribute('aria-busy', String(value));
|
||||
if (value) {
|
||||
disabledControls = [];
|
||||
active.querySelectorAll('input, select, textarea, button').forEach(function (control) {
|
||||
disabledControls.push([control, control.disabled]);
|
||||
form.setAttribute('aria-busy', String(value));
|
||||
form.querySelectorAll('input, select, textarea, button').forEach(function (control) {
|
||||
if (value) {
|
||||
control.dataset.aksrtWasDisabled = control.disabled ? '1' : '';
|
||||
control.disabled = true;
|
||||
});
|
||||
} else {
|
||||
disabledControls.forEach(function (entry) { entry[0].disabled = entry[1]; });
|
||||
disabledControls = [];
|
||||
}
|
||||
} else {
|
||||
control.disabled = control.dataset.aksrtWasDisabled === '1';
|
||||
delete control.dataset.aksrtWasDisabled;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function lockStaleForms() {
|
||||
if (!stale || !active) return;
|
||||
active.querySelectorAll('form input, form select, form textarea, form button[type="submit"]').forEach(function (control) {
|
||||
/** 工单已被删除、权限失效或状态冲突时，锁定所有写入口，只留「重新加载」。 */
|
||||
function lockForms() {
|
||||
root.querySelectorAll('[data-aksrt-ticket-form] :is(input, select, textarea, button), [data-aksrt-ticket-assign]').forEach(function (control) {
|
||||
control.disabled = true;
|
||||
});
|
||||
active.querySelectorAll('[data-aksrt-ticket-assign]').forEach(function (button) { button.disabled = true; });
|
||||
}
|
||||
|
||||
/** 会话已在底部或无需滚动时隐藏「查看最新记录」，避免点击无反应。 */
|
||||
function syncLatest() {
|
||||
var conversation = panel.querySelector('.aksrt-ticket-conversation__scroll');
|
||||
var button = panel.querySelector('[data-aksrt-ticket-latest]');
|
||||
var conversation = root.querySelector('.aksrt-ticket-conversation__scroll');
|
||||
var button = root.querySelector('[data-aksrt-ticket-latest]');
|
||||
if (!conversation || !button) return;
|
||||
button.hidden = conversation.scrollHeight - conversation.clientHeight - conversation.scrollTop <= 8;
|
||||
}
|
||||
|
||||
/** 会话内滚到底部；手动触发时同时让弹窗正文露出会话底部。 */
|
||||
function showLatest(manual) {
|
||||
var conversation = panel.querySelector('.aksrt-ticket-conversation__scroll');
|
||||
var conversation = root.querySelector('.aksrt-ticket-conversation__scroll');
|
||||
if (!conversation) return;
|
||||
conversation.scrollTop = conversation.scrollHeight;
|
||||
if (manual) {
|
||||
var gap = conversation.getBoundingClientRect().bottom - panel.getBoundingClientRect().bottom;
|
||||
if (gap > 0) panel.scrollTop += gap;
|
||||
conversation.focus({ preventScroll: true });
|
||||
}
|
||||
if (manual) conversation.focus({ preventScroll: true });
|
||||
syncLatest();
|
||||
}
|
||||
|
||||
function updateUrl(id, page) {
|
||||
var url = new URL(window.location.href);
|
||||
if (id) url.searchParams.set('id', String(id));
|
||||
else url.searchParams.delete('id');
|
||||
if (page) {
|
||||
if (page > 1) url.searchParams.set('paged', String(page));
|
||||
else url.searchParams.delete('paged');
|
||||
}
|
||||
url.hash = '';
|
||||
window.history.replaceState(window.history.state, '', url.toString());
|
||||
}
|
||||
|
||||
async function request(url, options) {
|
||||
var response = await fetch(url, Object.assign({ credentials: 'same-origin' }, options));
|
||||
async function request(url, body, signal) {
|
||||
var response = await fetch(url, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': config.restNonce },
|
||||
body: body,
|
||||
signal: signal,
|
||||
});
|
||||
var result = await response.json();
|
||||
if (!response.ok || !result || result.success !== true) {
|
||||
var error = new Error(result && (result.message || (result.data && result.data.message)) || strings.saveFailed);
|
||||
@@ -176,114 +130,69 @@
|
||||
return result.data;
|
||||
}
|
||||
|
||||
function readUrl(id, refresh) {
|
||||
var url = new URL(config.ajaxUrl, window.location.href);
|
||||
var current = new URL(window.location.href);
|
||||
['status', 'ticket_type_id', 's', 'paged'].forEach(function (key) {
|
||||
if (current.searchParams.has(key)) url.searchParams.set(key, current.searchParams.get(key));
|
||||
});
|
||||
url.searchParams.set('action', 'aksrt_ticket_view');
|
||||
url.searchParams.set('nonce', config.readNonce);
|
||||
/** 成功后跳回工作区并带结果码；未提交的其它表单草稿暂存到 sessionStorage，加载后恢复。 */
|
||||
function go(id, kind, remaining) {
|
||||
var url = new URL(window.location.href);
|
||||
url.searchParams.delete('view');
|
||||
url.searchParams.set('id', String(id));
|
||||
if (refresh) url.searchParams.set('refresh_list', '1');
|
||||
return url.toString();
|
||||
}
|
||||
|
||||
async function loadDetail(id, refresh, message, restore) {
|
||||
if (readController) readController.abort();
|
||||
var current = ++generation;
|
||||
var controller = new AbortController();
|
||||
readController = controller;
|
||||
var timer = setTimeout(function () { controller.abort(); }, 30000);
|
||||
loading = true;
|
||||
panel.setAttribute('aria-busy', 'true');
|
||||
feedback(detailDialog, strings.loading, false, false);
|
||||
url.searchParams.set('aksrt_ticket_msg', kind);
|
||||
url.hash = '';
|
||||
try {
|
||||
var data = await request(readUrl(id, refresh), { signal: controller.signal, cache: 'no-store' });
|
||||
if (current !== generation || active !== detailDialog) return;
|
||||
panel.innerHTML = data.panel;
|
||||
detailTitle.textContent = data.title;
|
||||
if (typeof data.list === 'string') list.innerHTML = data.list;
|
||||
updateUrl(id, data.page);
|
||||
setupForms(panel, restore);
|
||||
showLatest(false);
|
||||
var notes = panel.querySelector('.aksrt-ticket-detail__notes');
|
||||
if (notes) notes.scrollTop = notes.scrollHeight;
|
||||
stale = false;
|
||||
savedDrafts = {};
|
||||
savedMessage = '';
|
||||
feedback(detailDialog, message, false, false);
|
||||
if (message) detailTitle.focus();
|
||||
} catch (error) {
|
||||
if (current !== generation || active !== detailDialog) return;
|
||||
stale = true;
|
||||
retryPage = [401, 403, 404].indexOf(error.status) !== -1;
|
||||
if (error.status === 404) updateUrl(0);
|
||||
savedDrafts = restore || {};
|
||||
savedMessage = message || '';
|
||||
feedback(detailDialog, message ? strings.refreshFailed : (error.confirmed ? error.message : strings.loadFailed), true, true);
|
||||
} finally {
|
||||
clearTimeout(timer);
|
||||
if (current === generation) {
|
||||
loading = false;
|
||||
panel.removeAttribute('aria-busy');
|
||||
readController = null;
|
||||
lockStaleForms();
|
||||
}
|
||||
if (Object.keys(remaining).length) window.sessionStorage.setItem('aksrt-ticket-drafts-' + id, JSON.stringify(remaining));
|
||||
} catch (e) { /* 存储不可用时放弃草稿恢复 */ }
|
||||
leaving = true;
|
||||
window.location.assign(url.toString());
|
||||
}
|
||||
|
||||
function restoreDrafts() {
|
||||
var saved = {};
|
||||
try {
|
||||
saved = JSON.parse(window.sessionStorage.getItem(draftKey) || '{}') || {};
|
||||
window.sessionStorage.removeItem(draftKey);
|
||||
} catch (e) { saved = {}; }
|
||||
return saved;
|
||||
}
|
||||
|
||||
function setup() {
|
||||
var restore = ticketId ? restoreDrafts() : {};
|
||||
forms().forEach(function (form) {
|
||||
baselines.set(form, values(form));
|
||||
var changes = restore[form.dataset.aksrtTicketForm] || {};
|
||||
form.querySelectorAll('[name]').forEach(function (field) {
|
||||
if (Object.prototype.hasOwnProperty.call(changes, field.name)) field.value = changes[field.name];
|
||||
validateText(field);
|
||||
});
|
||||
syncStatus(form);
|
||||
});
|
||||
root.querySelectorAll('[data-aksrt-ticket-editor]').forEach(counter);
|
||||
showLatest(false);
|
||||
var notes = root.querySelector('.aksrt-ticket-detail__notes');
|
||||
if (notes) notes.scrollTop = notes.scrollHeight;
|
||||
// 结果码只用于本次渲染通知，刷新页面不应重复显示。
|
||||
var url = new URL(window.location.href);
|
||||
if (url.searchParams.has('aksrt_ticket_msg')) {
|
||||
url.searchParams.delete('aksrt_ticket_msg');
|
||||
window.history.replaceState(window.history.state, '', url.toString());
|
||||
}
|
||||
}
|
||||
|
||||
function show(dialog, source) {
|
||||
active = dialog;
|
||||
opener = source || null;
|
||||
pointerOutside = false;
|
||||
stale = false;
|
||||
retryPage = false;
|
||||
feedback(dialog, '', false, false);
|
||||
dialog.showModal();
|
||||
document.documentElement.classList.add('aksrt-ticket-modal-open');
|
||||
}
|
||||
|
||||
function openDetail(id, source, refresh, message) {
|
||||
ticketId = id;
|
||||
detailTitle.textContent = initialTitle;
|
||||
show(detailDialog, source);
|
||||
updateUrl(id);
|
||||
return loadDetail(id, !!refresh, message || '', {});
|
||||
}
|
||||
|
||||
function close() {
|
||||
if (!active || saving) return;
|
||||
if (dirty() && !window.confirm(strings.discard)) return;
|
||||
active.close();
|
||||
}
|
||||
|
||||
root.addEventListener('click', function (event) {
|
||||
var create = event.target.closest('[data-aksrt-dialog-open="aksrt-ticket-create-dialog"]');
|
||||
var view = event.target.closest('[data-aksrt-ticket-view]');
|
||||
if (create || view) {
|
||||
event.preventDefault();
|
||||
if (active) return;
|
||||
if (create) show(createDialog, create);
|
||||
else openDetail(parseInt(view.dataset.aksrtTicketView, 10), view);
|
||||
if (event.target.closest('[data-aksrt-ticket-reload]')) {
|
||||
leaving = true;
|
||||
window.location.reload();
|
||||
return;
|
||||
}
|
||||
if (!active || saving) return;
|
||||
var retry = event.target.closest('[data-aksrt-ticket-retry]');
|
||||
if (retry) {
|
||||
if (retryPage) { window.location.reload(); return; }
|
||||
if (!loading) loadDetail(ticketId, true, savedMessage, Object.assign({}, savedDrafts, drafts()));
|
||||
return;
|
||||
}
|
||||
if (stale || loading) return;
|
||||
if (saving || stale) return;
|
||||
var assign = event.target.closest('[data-aksrt-ticket-assign]');
|
||||
if (assign) {
|
||||
var statusForm = assign.closest('section').querySelector('form');
|
||||
var statusForm = root.querySelector('[data-aksrt-ticket-form="status"]');
|
||||
if (!statusForm) return;
|
||||
statusForm.querySelector('[name="admin_id"]').value = String(config.currentUser);
|
||||
var statusSelect = statusForm.querySelector('[name="status"]');
|
||||
if (statusSelect.value === 'pending') statusSelect.value = 'handling';
|
||||
syncStatus(statusForm);
|
||||
statusForm.querySelector('[type="submit"]').focus();
|
||||
return;
|
||||
}
|
||||
if (event.target.closest('[data-aksrt-ticket-latest]')) showLatest(true);
|
||||
});
|
||||
@@ -308,7 +217,7 @@
|
||||
var insert = (before && !/\n$/.test(before) ? '\n' : '') + select.value;
|
||||
var next = before + insert + field.value.slice(end);
|
||||
if (next.length > field.maxLength) {
|
||||
feedback(active, strings.tooLong, true, false);
|
||||
feedback(strings.tooLong, true, false);
|
||||
} else {
|
||||
field.value = next;
|
||||
field.focus();
|
||||
@@ -323,7 +232,7 @@
|
||||
var form = event.target.closest('[data-aksrt-ticket-form]');
|
||||
if (!form) return;
|
||||
event.preventDefault();
|
||||
if (saving || loading || stale || !active) return;
|
||||
if (saving || stale) return;
|
||||
form.querySelectorAll('input, textarea').forEach(validateText);
|
||||
if (!form.reportValidity()) return;
|
||||
var kind = form.dataset.aksrtTicketForm;
|
||||
@@ -331,100 +240,31 @@
|
||||
var remaining = drafts(form);
|
||||
var controller = new AbortController();
|
||||
var timer = setTimeout(function () { controller.abort(); }, 30000);
|
||||
busy(true);
|
||||
feedback(active, strings.saving, false, false);
|
||||
busy(form, true);
|
||||
feedback(strings.saving, false, false);
|
||||
try {
|
||||
var data = await request(form.action, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': config.restNonce },
|
||||
body: body,
|
||||
signal: controller.signal,
|
||||
});
|
||||
clearTimeout(timer);
|
||||
var data = await request(form.action, body, controller.signal);
|
||||
baselines.set(form, values(form));
|
||||
if (kind === 'create') {
|
||||
var source = opener;
|
||||
busy(false);
|
||||
await new Promise(function (resolve) {
|
||||
createDialog.addEventListener('close', resolve, { once: true });
|
||||
createDialog.close();
|
||||
});
|
||||
await openDetail(data.id, source, true, strings.created);
|
||||
} else {
|
||||
if (kind !== 'status') form.reset();
|
||||
baselines.set(form, values(form));
|
||||
await loadDetail(ticketId, true, strings[kind], remaining);
|
||||
}
|
||||
go(kind === 'create' ? data.id : ticketId, kind === 'create' ? 'created' : kind, remaining);
|
||||
} catch (error) {
|
||||
var reload = !error.confirmed || [401, 403, 404].indexOf(error.status) !== -1;
|
||||
stale = reload || error.status === 409;
|
||||
retryPage = reload || (kind === 'create' && stale);
|
||||
if (error.status === 404) updateUrl(0);
|
||||
feedback(active, error.confirmed ? error.message : strings.uncertain, true, stale);
|
||||
busy(form, false);
|
||||
// 结果未确认或工单已不可写：只能重新加载核对，不允许原样再提交。
|
||||
stale = !error.confirmed || [401, 403, 404, 409].indexOf(error.status) !== -1;
|
||||
feedback(error.confirmed ? error.message : strings.uncertain, true, stale);
|
||||
if (stale) lockForms();
|
||||
} finally {
|
||||
clearTimeout(timer);
|
||||
busy(false);
|
||||
lockStaleForms();
|
||||
}
|
||||
});
|
||||
|
||||
[createDialog, detailDialog].forEach(function (dialog) {
|
||||
function outside(event) {
|
||||
var rect = dialog.getBoundingClientRect();
|
||||
return event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom;
|
||||
}
|
||||
dialog.addEventListener('pointerdown', function (event) { pointerOutside = event.target === dialog && outside(event); });
|
||||
dialog.addEventListener('pointercancel', function () { pointerOutside = false; });
|
||||
dialog.addEventListener('click', function (event) {
|
||||
if (event.target.closest('[data-aksrt-dialog-close]') || (pointerOutside && event.target === dialog && outside(event))) {
|
||||
event.preventDefault();
|
||||
close();
|
||||
}
|
||||
pointerOutside = false;
|
||||
});
|
||||
dialog.addEventListener('cancel', function (event) { event.preventDefault(); close(); });
|
||||
dialog.addEventListener('close', function () {
|
||||
var previous = opener;
|
||||
var previousId = ticketId;
|
||||
if (readController) readController.abort();
|
||||
generation += 1;
|
||||
readController = null;
|
||||
loading = false;
|
||||
stale = false;
|
||||
savedDrafts = {};
|
||||
savedMessage = '';
|
||||
if (dialog === detailDialog) {
|
||||
panel.replaceChildren();
|
||||
updateUrl(0);
|
||||
} else {
|
||||
var form = dialog.querySelector('form');
|
||||
if (form) form.reset();
|
||||
setupForms(dialog);
|
||||
}
|
||||
active = null;
|
||||
opener = null;
|
||||
ticketId = 0;
|
||||
document.documentElement.classList.remove('aksrt-ticket-modal-open');
|
||||
if (!previous || !previous.isConnected) previous = root.querySelector('[data-aksrt-ticket-view="' + previousId + '"]') || root.querySelector('[data-aksrt-dialog-open]');
|
||||
if (previous) previous.focus();
|
||||
});
|
||||
});
|
||||
|
||||
// scroll 不冒泡，用捕获监听会话容器。
|
||||
panel.addEventListener('scroll', syncLatest, true);
|
||||
// 把正文可视高度写给 CSS，用于限制右侧栏高度。
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
new ResizeObserver(function () {
|
||||
panel.style.setProperty('--aksrt-ticket-panel-height', panel.clientHeight + 'px');
|
||||
}).observe(panel);
|
||||
}
|
||||
var conversation = root.querySelector('.aksrt-ticket-conversation__scroll');
|
||||
if (conversation) conversation.addEventListener('scroll', syncLatest);
|
||||
|
||||
window.addEventListener('beforeunload', function (event) {
|
||||
if (!saving && !dirty()) return;
|
||||
if (leaving || (!saving && !Object.keys(drafts()).length)) return;
|
||||
event.preventDefault();
|
||||
event.returnValue = '';
|
||||
});
|
||||
setupForms(createDialog);
|
||||
var initialId = parseInt(new URL(window.location.href).searchParams.get('id'), 10);
|
||||
if (initialId > 0) openDetail(initialId, root.querySelector('[data-aksrt-ticket-view="' + initialId + '"]'));
|
||||
|
||||
setup();
|
||||
})();
|
||||
@@ -42,7 +42,6 @@ class UsersMenus {
|
||||
add_action('admin_post_aksrt_users_update_report', [$this, 'handle_update_report']);
|
||||
add_action('admin_post_aksrt_users_process_appeal', [$this, 'handle_process_appeal']);
|
||||
add_action('admin_post_aksrt_users_mutate_vip', [$this, 'handle_mutate_vip']);
|
||||
add_action('wp_ajax_aksrt_ticket_view', [$this, 'ajax_ticket_view']);
|
||||
add_action('admin_enqueue_scripts', [$this, 'enqueue_ticket_assets']);
|
||||
add_action('admin_enqueue_scripts', [$this, 'enqueue_message_assets']);
|
||||
add_action('admin_enqueue_scripts', [$this, 'enqueue_invite_assets']);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<?php
|
||||
/**
|
||||
* 工单管理：原生列表与按需加载的处理弹窗。
|
||||
* 写操作统一使用 TicketRestAdmin；此处只负责后台页面与只读片段。
|
||||
* 工单管理：列表、处理工作区（?id=）与代客提交（?view=new）三个页内视图。
|
||||
* 写操作统一使用 TicketRestAdmin；此处只负责服务端渲染。
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
@@ -17,7 +17,7 @@ trait UsersMenusTicketsCenter {
|
||||
|
||||
use UsersMenusTicketsList;
|
||||
use UsersMenusTicketsDetail;
|
||||
use UsersMenusTicketsDialogs;
|
||||
use UsersMenusTicketsCreate;
|
||||
|
||||
private const TICKET_PAGE_SLUG = 'aksrt_tickets';
|
||||
private const TICKET_PER_PAGE = 20;
|
||||
@@ -38,82 +38,33 @@ trait UsersMenusTicketsCenter {
|
||||
wp_enqueue_style('aksrt-admin-tickets', AKSRT_URI . $css, [NativeUi::STYLE_HANDLE], (string) filemtime(AKSRT_DIR . $css));
|
||||
wp_enqueue_script('aksrt-admin-tickets', AKSRT_URI . $js, [], (string) filemtime(AKSRT_DIR . $js), true);
|
||||
wp_localize_script('aksrt-admin-tickets', 'AKSRTAdminTickets', [
|
||||
'ajaxUrl' => admin_url('admin-ajax.php'),
|
||||
'readNonce' => wp_create_nonce('aksrt_ticket_view'),
|
||||
'restNonce' => wp_create_nonce('wp_rest'),
|
||||
'currentUser' => get_current_user_id(),
|
||||
'strings' => [
|
||||
'loading' => __('正在加载工单…', 'aksrt'),
|
||||
'saving' => __('正在保存…', 'aksrt'),
|
||||
'loadFailed' => __('加载失败，请重试；若登录已过期，请重新登录。', 'aksrt'),
|
||||
'saveFailed' => __('保存失败，请检查填写内容后重试。', 'aksrt'),
|
||||
'uncertain' => __('连接中断，提交结果尚未确认。请先重新加载工单核对，避免重复提交。', 'aksrt'),
|
||||
'refreshFailed' => __('操作已保存，但页面刷新失败。请重新加载查看最新记录，不要重复提交。', 'aksrt'),
|
||||
'discard' => __('有尚未保存的内容。关闭后将丢弃，是否继续？', 'aksrt'),
|
||||
'uncertain' => __('连接中断，提交结果尚未确认。请先重新加载核对，避免重复提交。', 'aksrt'),
|
||||
'required' => __('请填写内容，不能只包含空格。', 'aksrt'),
|
||||
'tooLong' => __('插入后将超过字数限制，请先精简回复内容。', 'aksrt'),
|
||||
'created' => __('工单已创建，用户将收到通知。', 'aksrt'),
|
||||
'reply' => __('回复已发送，用户将收到通知。', 'aksrt'),
|
||||
'status' => __('工单信息已保存。', 'aksrt'),
|
||||
'note' => __('内部备注已添加，仅管理员可见。', 'aksrt'),
|
||||
],
|
||||
]);
|
||||
}
|
||||
|
||||
public function render_tickets_page(): void {
|
||||
$this->ensure_cap();
|
||||
NativeUi::page_open('aksrt-tickets-admin');
|
||||
NativeUi::header(
|
||||
__('工单管理', 'aksrt'),
|
||||
__('查看用户问题、跟进沟通并记录处理结果。', 'aksrt'),
|
||||
'dashicons-tickets-alt',
|
||||
[
|
||||
[
|
||||
'label' => __('代客提交工单', 'aksrt'),
|
||||
'dialog' => 'aksrt-ticket-create-dialog',
|
||||
'primary' => true,
|
||||
'icon' => 'dashicons-plus-alt2',
|
||||
],
|
||||
[
|
||||
'label' => __('工单配置', 'aksrt'),
|
||||
'url' => admin_url('admin.php?page=aksrt-settings#/users/ticket'),
|
||||
'icon' => 'dashicons-admin-generic',
|
||||
],
|
||||
]
|
||||
);
|
||||
echo '<div data-aksrt-ticket-list>';
|
||||
$this->render_ticket_list($this->ticket_filters($_GET), max(1, absint($_GET['paged'] ?? 1)));
|
||||
echo '</div>';
|
||||
$this->render_ticket_dialogs();
|
||||
echo '<noscript><p class="aksrt-native-callout">' . esc_html__('请启用 JavaScript 后创建工单或打开工单处理弹窗。', 'aksrt') . '</p></noscript>';
|
||||
NativeUi::page_close();
|
||||
}
|
||||
|
||||
/** 只读 AJAX：详情按 ID 查询，不受当前列表筛选和分页影响。 */
|
||||
public function ajax_ticket_view(): void {
|
||||
if (!current_user_can(self::CAPABILITY) || !check_ajax_referer('aksrt_ticket_view', 'nonce', false)) {
|
||||
wp_send_json_error(['message' => __('权限不足或登录已过期，请刷新页面后重试。', 'aksrt')], 403);
|
||||
}
|
||||
$filters = $this->ticket_filters($_GET);
|
||||
$paged = max(1, absint($_GET['paged'] ?? 1));
|
||||
$id = absint($_GET['id'] ?? 0);
|
||||
$refresh_list = !empty($_GET['refresh_list']);
|
||||
if ($id <= 0 && !$refresh_list) {
|
||||
wp_send_json_error(['message' => __('请选择工单。', 'aksrt')], 400);
|
||||
}
|
||||
$data = [];
|
||||
$view = isset($_GET['view']) && is_scalar($_GET['view']) ? sanitize_key((string) wp_unslash($_GET['view'])) : '';
|
||||
NativeUi::page_open('aksrt-tickets-admin');
|
||||
if ($id > 0) {
|
||||
$ticket = TicketRepository::get_instance()->find($id);
|
||||
if ($ticket === null) {
|
||||
wp_send_json_error(['message' => __('工单不存在或已被删除。', 'aksrt')], 404);
|
||||
}
|
||||
$data['panel'] = $this->render_ticket_detail_panel($ticket);
|
||||
$data['title'] = (string) $ticket['title'];
|
||||
$this->render_ticket_detail_page($id, $this->ticket_context($filters, $paged));
|
||||
} elseif ($view === 'new') {
|
||||
$this->render_ticket_create_page($this->ticket_context($filters, $paged));
|
||||
} else {
|
||||
$this->render_ticket_list_page($filters, $paged);
|
||||
}
|
||||
if ($refresh_list) {
|
||||
ob_start();
|
||||
$data['page'] = $this->render_ticket_list($this->ticket_filters($_GET), max(1, absint($_GET['paged'] ?? 1)));
|
||||
$data['list'] = (string) ob_get_clean();
|
||||
}
|
||||
wp_send_json_success($data);
|
||||
NativeUi::page_close();
|
||||
}
|
||||
|
||||
private function ticket_filters(array $request): array {
|
||||
@@ -125,10 +76,35 @@ trait UsersMenusTicketsCenter {
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表上下文（非空筛选 + 页码），随详情/创建链接传递，返回列表时原样恢复。 */
|
||||
private function ticket_context(array $filters, int $paged): array {
|
||||
return array_filter($filters + ['paged' => $paged > 1 ? $paged : 0], static fn($value): bool => $value !== '' && $value !== 0);
|
||||
}
|
||||
|
||||
private function ticket_page_url(array $extra = []): string {
|
||||
return add_query_arg(array_merge(['page' => self::TICKET_PAGE_SLUG], $extra), admin_url('users.php'));
|
||||
}
|
||||
|
||||
/** 写操作成功后脚本跳转回工作区并带上结果码，这里转成原生通知。 */
|
||||
private function render_ticket_notice(): void {
|
||||
$code = isset($_GET['aksrt_ticket_msg']) && is_scalar($_GET['aksrt_ticket_msg']) ? sanitize_key((string) wp_unslash($_GET['aksrt_ticket_msg'])) : '';
|
||||
$map = [
|
||||
'created' => __('工单已创建，用户将收到通知。', 'aksrt'),
|
||||
'reply' => __('回复已发送，用户将收到通知。', 'aksrt'),
|
||||
'status' => __('工单信息已保存。', 'aksrt'),
|
||||
'note' => __('内部备注已添加，仅管理员可见。', 'aksrt'),
|
||||
];
|
||||
if (isset($map[$code])) {
|
||||
echo '<div class="notice notice-success is-dismissible"><p>' . esc_html($map[$code]) . '</p></div>';
|
||||
}
|
||||
}
|
||||
|
||||
/** 提交中与失败提示；失败且结果不确定时显示「重新加载」。 */
|
||||
private function ticket_feedback(): string {
|
||||
return '<div class="aksrt-ticket-feedback" hidden data-aksrt-ticket-feedback><p role="status" aria-live="polite" aria-atomic="true"></p>'
|
||||
. '<button type="button" class="button" data-aksrt-ticket-reload hidden>' . esc_html__('重新加载', 'aksrt') . '</button></div>';
|
||||
}
|
||||
|
||||
/** 所有表单只提交到现有 REST 写路由，不保留 admin_post 分支。 */
|
||||
private function ticket_form_open(string $action, int $id, string $class = ''): string {
|
||||
$path = $action === 'create' ? '' : '/' . $id . '/' . ($action === 'note' ? 'notes' : $action);
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
<?php
|
||||
/** 代客提交工单（?view=new）：独立页内表单，创建成功后跳转到新工单的工作区。@package AKSRT */
|
||||
|
||||
namespace AKSRT\Admin\Native;
|
||||
|
||||
use AKSRT\Ticket\TicketSettings;
|
||||
use AKSRT\Ticket\TicketTypeService;
|
||||
|
||||
defined('ABSPATH') || exit;
|
||||
|
||||
trait UsersMenusTicketsCreate {
|
||||
|
||||
private function render_ticket_create_page(array $context): void {
|
||||
$back = $this->ticket_page_url($context);
|
||||
NativeUi::header(
|
||||
__('代客提交工单', 'aksrt'),
|
||||
__('为指定用户创建工单，创建后由你跟进，用户会收到通知。', 'aksrt'),
|
||||
'dashicons-plus-alt2',
|
||||
[['label' => __('返回工单列表', 'aksrt'), 'url' => $back, 'icon' => 'dashicons-arrow-left-alt']]
|
||||
);
|
||||
$types = TicketTypeService::all();
|
||||
NativeUi::card_open('', '', false, 'aksrt-tickets-admin__create');
|
||||
if ($types === []) {
|
||||
echo NativeUi::empty_state(__('尚未配置工单部门', 'aksrt'), __('请先添加部门，再为用户创建工单。', 'aksrt')); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
echo '<p><a class="button" href="' . esc_url(admin_url('admin.php?page=aksrt-settings#/users/ticket')) . '">' . esc_html__('前往工单配置', 'aksrt') . '</a></p>';
|
||||
NativeUi::card_close();
|
||||
return;
|
||||
}
|
||||
echo $this->ticket_feedback(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
echo $this->ticket_form_open('create', 0, 'aksrt-tickets-admin__create-form'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
echo '<div class="aksrt-native-form-grid">';
|
||||
echo '<label class="aksrt-native-field"><span class="aksrt-native-field__label">' . esc_html__('用户 ID', 'aksrt') . '</span><input type="number" name="user_id" min="1" step="1" required placeholder="' . esc_attr__('填写工单归属用户的 ID', 'aksrt') . '"></label>';
|
||||
echo '<label class="aksrt-native-field"><span class="aksrt-native-field__label">' . esc_html__('工单部门', 'aksrt') . '</span><select name="ticket_type_id" required><option value="">' . esc_html__('请选择部门', 'aksrt') . '</option>';
|
||||
foreach ($types as $type) {
|
||||
echo '<option value="' . (int) $type['id'] . '">' . esc_html((string) $type['name']) . '</option>';
|
||||
}
|
||||
echo '</select></label>';
|
||||
echo '<label class="aksrt-native-field is-wide"><span class="aksrt-native-field__label">' . esc_html__('工单标题', 'aksrt') . '</span><input type="text" name="title" maxlength="' . TicketSettings::title_max() . '" required placeholder="' . esc_attr__('简要说明用户遇到的问题', 'aksrt') . '"></label>';
|
||||
if (TicketSettings::order_link_enabled()) {
|
||||
echo '<label class="aksrt-native-field is-wide"><span class="aksrt-native-field__label">' . esc_html__('关联订单（可选）', 'aksrt') . '</span><input type="text" name="order_number" placeholder="' . esc_attr__('填写订单号', 'aksrt') . '"></label>';
|
||||
}
|
||||
echo '<label class="aksrt-native-field is-wide"><span class="aksrt-native-field__label">' . esc_html__('问题描述', 'aksrt') . '</span><textarea id="aksrt-ticket-create-content" name="content" rows="8" maxlength="' . TicketSettings::content_max() . '" required data-aksrt-ticket-editor aria-describedby="aksrt-ticket-create-count" placeholder="' . esc_attr__('描述问题、发生时间和已尝试的处理方式', 'aksrt') . '"></textarea>';
|
||||
echo '<span id="aksrt-ticket-create-count" class="aksrt-ticket-counter" data-aksrt-ticket-counter="aksrt-ticket-create-content">0 / ' . TicketSettings::content_max() . '</span></label></div>';
|
||||
echo '<div class="aksrt-native-form-foot"><button type="submit" class="button button-primary">' . esc_html__('创建工单并通知用户', 'aksrt') . '</button>';
|
||||
echo '<a class="button" href="' . esc_url($back) . '">' . esc_html__('取消', 'aksrt') . '</a>';
|
||||
echo '<span class="aksrt-ticket-hint">' . esc_html__('新工单状态为「已回复」', 'aksrt') . '</span></div></form>';
|
||||
NativeUi::card_close();
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<?php
|
||||
/** 工单处理弹窗：左侧会话与回复输入，右侧处理信息与内部备注。@package AKSRT */
|
||||
/** 工单处理工作区（?id=）：左侧会话与回复输入，右侧处理信息与内部备注。@package AKSRT */
|
||||
|
||||
namespace AKSRT\Admin\Native;
|
||||
|
||||
@@ -14,6 +14,24 @@ defined('ABSPATH') || exit;
|
||||
|
||||
trait UsersMenusTicketsDetail {
|
||||
|
||||
/** 详情按 ID 查询，不受列表筛选影响；$context 只用于「返回工单列表」。 */
|
||||
private function render_ticket_detail_page(int $id, array $context): void {
|
||||
$back = NativeUi::button_link(__('返回工单列表', 'aksrt'), $this->ticket_page_url($context), false, 'dashicons-arrow-left-alt');
|
||||
$ticket = TicketRepository::get_instance()->find($id);
|
||||
echo '<div class="aksrt-native-header aksrt-tickets-admin__detail-header"><div class="aksrt-native-header__main"><h1 class="aksrt-native-header__title">';
|
||||
if ($ticket === null) {
|
||||
echo esc_html__('工单详情', 'aksrt') . '</h1></div><div class="aksrt-native-header__actions">' . $back . '</div></div><hr class="wp-header-end">'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
echo NativeUi::empty_state(__('工单不存在', 'aksrt'), __('工单可能已被删除，或链接有误。', 'aksrt'), 'dashicons-search'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
return;
|
||||
}
|
||||
echo '<span class="aksrt-native-header__icon dashicons dashicons-tickets-alt" aria-hidden="true"></span>' . esc_html((string) $ticket['title']) . '</h1>';
|
||||
echo '<p class="aksrt-native-header__desc"><span>' . esc_html((string) $ticket['ticket_num']) . '</span> ' . $this->ticket_status_badge($ticket) . $this->ticket_urge_badge($ticket) . '</p>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
echo '</div><div class="aksrt-native-header__actions">' . $back . '</div></div><hr class="wp-header-end">'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
$this->render_ticket_notice();
|
||||
echo $this->ticket_feedback(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
echo $this->render_ticket_detail_panel($ticket); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
}
|
||||
|
||||
private function render_ticket_detail_panel(array $ticket): string {
|
||||
$id = (int) $ticket['id'];
|
||||
$html = '<div class="aksrt-ticket-detail" data-aksrt-ticket-detail="' . $id . '"><div class="aksrt-ticket-detail__main">';
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
<?php
|
||||
/** 工单创建与处理弹窗外壳。@package AKSRT */
|
||||
|
||||
namespace AKSRT\Admin\Native;
|
||||
|
||||
use AKSRT\Ticket\TicketSettings;
|
||||
use AKSRT\Ticket\TicketTypeService;
|
||||
|
||||
defined('ABSPATH') || exit;
|
||||
|
||||
trait UsersMenusTicketsDialogs {
|
||||
|
||||
private function render_ticket_dialogs(): void {
|
||||
echo '<dialog id="aksrt-ticket-create-dialog" class="aksrt-ticket-dialog aksrt-ticket-dialog--create" aria-labelledby="aksrt-ticket-create-title" aria-describedby="aksrt-ticket-create-description">';
|
||||
$types = TicketTypeService::all();
|
||||
echo $types === [] ? '<div class="aksrt-ticket-dialog__frame">' : $this->ticket_form_open('create', 0, 'aksrt-ticket-dialog__frame'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
echo $this->ticket_dialog_header('create', __('代客提交工单', 'aksrt'), __('为指定用户创建工单，创建后由你跟进，用户会收到通知。', 'aksrt')); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
echo $this->ticket_dialog_feedback(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
echo '<div class="aksrt-ticket-dialog__body">';
|
||||
if ($types === []) {
|
||||
echo NativeUi::empty_state(__('尚未配置工单部门', 'aksrt'), __('请先添加部门，再为用户创建工单。', 'aksrt')); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
echo '<a class="button" href="' . esc_url(admin_url('admin.php?page=aksrt-settings#/users/ticket')) . '">' . esc_html__('前往工单配置', 'aksrt') . '</a>';
|
||||
} else {
|
||||
echo '<div class="aksrt-native-form-grid">';
|
||||
echo '<label class="aksrt-native-field"><span class="aksrt-native-field__label">' . esc_html__('用户 ID', 'aksrt') . '</span><input type="number" name="user_id" min="1" step="1" required placeholder="' . esc_attr__('填写工单归属用户的 ID', 'aksrt') . '"></label>';
|
||||
echo '<label class="aksrt-native-field"><span class="aksrt-native-field__label">' . esc_html__('工单部门', 'aksrt') . '</span><select name="ticket_type_id" required><option value="">' . esc_html__('请选择部门', 'aksrt') . '</option>';
|
||||
foreach ($types as $type) {
|
||||
echo '<option value="' . (int) $type['id'] . '">' . esc_html((string) $type['name']) . '</option>';
|
||||
}
|
||||
echo '</select></label>';
|
||||
echo '<label class="aksrt-native-field is-wide"><span class="aksrt-native-field__label">' . esc_html__('工单标题', 'aksrt') . '</span><input type="text" name="title" maxlength="' . TicketSettings::title_max() . '" required placeholder="' . esc_attr__('简要说明用户遇到的问题', 'aksrt') . '"></label>';
|
||||
if (TicketSettings::order_link_enabled()) {
|
||||
echo '<label class="aksrt-native-field is-wide"><span class="aksrt-native-field__label">' . esc_html__('关联订单（可选）', 'aksrt') . '</span><input type="text" name="order_number" placeholder="' . esc_attr__('填写订单号', 'aksrt') . '"></label>';
|
||||
}
|
||||
echo '<label class="aksrt-native-field is-wide"><span class="aksrt-native-field__label">' . esc_html__('问题描述', 'aksrt') . '</span><textarea id="aksrt-ticket-create-content" name="content" rows="7" maxlength="' . TicketSettings::content_max() . '" required data-aksrt-ticket-editor aria-describedby="aksrt-ticket-create-count" placeholder="' . esc_attr__('描述问题、发生时间和已尝试的处理方式', 'aksrt') . '"></textarea>';
|
||||
echo '<span id="aksrt-ticket-create-count" class="aksrt-ticket-counter" data-aksrt-ticket-counter="aksrt-ticket-create-content">0 / ' . TicketSettings::content_max() . '</span></label></div>';
|
||||
}
|
||||
echo '</div><footer class="aksrt-ticket-dialog__foot"><span class="aksrt-ticket-hint">' . esc_html__('新工单状态为「已回复」', 'aksrt') . '</span><button type="button" class="button" data-aksrt-dialog-close>' . esc_html__('取消', 'aksrt') . '</button>';
|
||||
if ($types !== []) {
|
||||
echo '<button type="submit" class="button button-primary">' . esc_html__('创建工单并通知用户', 'aksrt') . '</button>';
|
||||
}
|
||||
echo '</footer>' . ($types === [] ? '</div>' : '</form>') . '</dialog>';
|
||||
|
||||
echo '<dialog id="aksrt-ticket-detail-dialog" class="aksrt-ticket-dialog aksrt-ticket-dialog--detail" aria-labelledby="aksrt-ticket-detail-title"><div class="aksrt-ticket-dialog__frame">';
|
||||
echo $this->ticket_dialog_header('detail', __('工单详情', 'aksrt')); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
echo $this->ticket_dialog_feedback(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
echo '<div class="aksrt-ticket-dialog__body" data-aksrt-ticket-panel></div></div></dialog>';
|
||||
}
|
||||
|
||||
private function ticket_dialog_header(string $key, string $title, string $description = ''): string {
|
||||
return '<header class="aksrt-ticket-dialog__head"><div><h2 id="aksrt-ticket-' . esc_attr($key) . '-title" tabindex="-1" autofocus>' . esc_html($title) . '</h2>'
|
||||
. ($description !== '' ? '<p id="aksrt-ticket-' . esc_attr($key) . '-description">' . esc_html($description) . '</p>' : '') . '</div>'
|
||||
. '<button type="button" class="aksrt-ticket-dialog__close" data-aksrt-dialog-close aria-label="' . esc_attr__('关闭弹窗', 'aksrt') . '"><span class="dashicons dashicons-no-alt" aria-hidden="true"></span></button></header>';
|
||||
}
|
||||
|
||||
private function ticket_dialog_feedback(): string {
|
||||
return '<div class="aksrt-ticket-feedback" hidden data-aksrt-ticket-feedback><p role="status" aria-live="polite" aria-atomic="true"></p>'
|
||||
. '<button type="button" class="button" data-aksrt-ticket-retry hidden>' . esc_html__('重新加载', 'aksrt') . '</button></div>';
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<?php
|
||||
/** 工单筛选与列表；详情统一在弹窗内按需加载。@package AKSRT */
|
||||
/** 工单筛选与列表；标题与操作直接链接到处理工作区（?id=）。@package AKSRT */
|
||||
|
||||
namespace AKSRT\Admin\Native;
|
||||
|
||||
@@ -11,8 +11,32 @@ defined('ABSPATH') || exit;
|
||||
|
||||
trait UsersMenusTicketsList {
|
||||
|
||||
/** 返回实际页码，避免处理最后一条工单后停在空的末页。 */
|
||||
private function render_ticket_list(array $filters, int $paged): int {
|
||||
private function render_ticket_list_page(array $filters, int $paged): void {
|
||||
// 先查询并夹取页码，页头「代客提交」链接才能带上实际页码。
|
||||
[$result, $paged] = $this->ticket_list_result($filters, $paged);
|
||||
NativeUi::header(
|
||||
__('工单管理', 'aksrt'),
|
||||
__('查看用户问题、跟进沟通并记录处理结果。', 'aksrt'),
|
||||
'dashicons-tickets-alt',
|
||||
[
|
||||
[
|
||||
'label' => __('代客提交工单', 'aksrt'),
|
||||
'url' => $this->ticket_page_url(['view' => 'new'] + $this->ticket_context($filters, $paged)),
|
||||
'primary' => true,
|
||||
'icon' => 'dashicons-plus-alt2',
|
||||
],
|
||||
[
|
||||
'label' => __('工单配置', 'aksrt'),
|
||||
'url' => admin_url('admin.php?page=aksrt-settings#/users/ticket'),
|
||||
'icon' => 'dashicons-admin-generic',
|
||||
],
|
||||
]
|
||||
);
|
||||
$this->render_ticket_list($filters, $paged, $result);
|
||||
}
|
||||
|
||||
/** 越界页码夹到末页，避免处理最后一条工单后停在空页。返回 [查询结果, 实际页码]。 */
|
||||
private function ticket_list_result(array $filters, int $paged): array {
|
||||
$repo = TicketRepository::get_instance();
|
||||
$args = [
|
||||
'status' => $filters['status'] === '' ? [] : [$filters['status']],
|
||||
@@ -28,6 +52,10 @@ trait UsersMenusTicketsList {
|
||||
$args['offset'] = ($paged - 1) * self::TICKET_PER_PAGE;
|
||||
$result = $repo->paginate($args, true);
|
||||
}
|
||||
return [$result, $paged];
|
||||
}
|
||||
|
||||
private function render_ticket_list(array $filters, int $paged, array $result): void {
|
||||
NativeUi::card_open('', '', true, 'aksrt-tickets-admin__list-card');
|
||||
$this->render_ticket_toolbar($filters);
|
||||
echo '<div class="aksrt-native-table-wrap"><table class="widefat striped aksrt-tickets-admin__table">';
|
||||
@@ -50,14 +78,14 @@ trait UsersMenusTicketsList {
|
||||
? __('请调整筛选条件，或使用标题右侧的「代客提交工单」。', 'aksrt')
|
||||
: __('暂无未关闭工单。可切换状态查看历史记录，或代用户创建工单。', 'aksrt'));
|
||||
}
|
||||
$context = $this->ticket_context($filters, $paged);
|
||||
foreach ($result['items'] as $ticket) {
|
||||
$this->render_ticket_center_row($ticket);
|
||||
$this->render_ticket_center_row($ticket, $context);
|
||||
}
|
||||
echo '</tbody></table>';
|
||||
NativeUi::table_wrap_close();
|
||||
AdminListPagination::render(self::TICKET_PAGE_SLUG, $result['total'], $paged, self::TICKET_PER_PAGE, $filters, 'users.php');
|
||||
NativeUi::card_close();
|
||||
return $paged;
|
||||
}
|
||||
|
||||
private function render_ticket_toolbar(array $filters): void {
|
||||
@@ -108,13 +136,13 @@ trait UsersMenusTicketsList {
|
||||
echo '</form>';
|
||||
}
|
||||
|
||||
private function render_ticket_center_row(array $ticket): void {
|
||||
private function render_ticket_center_row(array $ticket, array $context): void {
|
||||
$id = (int) $ticket['id'];
|
||||
$url = esc_url($this->ticket_page_url(['id' => $id] + $context));
|
||||
$last = (string) $ticket['last_reply_time'] !== '' ? (string) $ticket['last_reply_time'] : (string) $ticket['post_time'];
|
||||
$awaiting = in_array((string) $ticket['status'], [TicketStatusService::KEY_PENDING, TicketStatusService::KEY_USER_REPLIED], true);
|
||||
$hook = ' data-aksrt-ticket-view="' . $id . '" aria-haspopup="dialog" aria-controls="aksrt-ticket-detail-dialog"';
|
||||
echo '<tr class="aksrt-tickets-admin__row' . ($awaiting ? ' is-awaiting' : '') . '">';
|
||||
echo '<td class="column-title"><button type="button" class="button-link row-title"' . $hook . '>' . esc_html((string) $ticket['title']) . '</button>' . $this->ticket_urge_badge($ticket); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
echo '<td class="column-title"><a class="row-title" href="' . $url . '">' . esc_html((string) $ticket['title']) . '</a>' . $this->ticket_urge_badge($ticket); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
echo '<div class="aksrt-tickets-admin__sub">' . esc_html((string) $ticket['ticket_num']) . '</div>';
|
||||
if ((string) $ticket['order_number'] !== '') {
|
||||
echo '<div class="aksrt-tickets-admin__sub">' . esc_html__('订单：', 'aksrt') . esc_html((string) $ticket['order_number']) . '</div>';
|
||||
@@ -124,7 +152,7 @@ trait UsersMenusTicketsList {
|
||||
echo '<td class="column-user">' . $this->ticket_user_chip((int) $ticket['user_id'], (string) $ticket['user_name']) . '</td>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
echo '<td class="column-admin">' . ((int) $ticket['admin_id'] > 0 ? esc_html((string) $ticket['admin_name']) : '<span class="aksrt-ticket-hint">' . esc_html__('未指派', 'aksrt') . '</span>') . '</td>';
|
||||
echo '<td class="column-time"><time>' . esc_html($last) . '</time><div class="aksrt-tickets-admin__sub">' . esc_html(sprintf(__('提交于 %s', 'aksrt'), (string) $ticket['post_time'])) . '</div></td>';
|
||||
echo '<td class="column-actions"><button type="button" class="button' . ($awaiting ? ' button-primary' : '') . '"' . $hook . '>' . esc_html(!empty($ticket['is_closed']) ? __('查看记录', 'aksrt') : __('处理工单', 'aksrt')) . '</button></td></tr>';
|
||||
echo '<td class="column-actions"><a class="button' . ($awaiting ? ' button-primary' : '') . '" href="' . $url . '">' . esc_html(!empty($ticket['is_closed']) ? __('查看记录', 'aksrt') : __('处理工单', 'aksrt')) . '</a></td></tr>';
|
||||
}
|
||||
|
||||
private function ticket_status_badge(array $ticket): string {
|
||||
|
||||
@@ -1,686 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const assert = require('node:assert/strict');
|
||||
const fs = require('node:fs');
|
||||
const path = require('node:path');
|
||||
const test = require('node:test');
|
||||
const vm = require('node:vm');
|
||||
|
||||
const rootDir = path.resolve(__dirname, '../..');
|
||||
const scriptPath = path.join(rootDir, 'assets', 'js', 'admin-tickets.js');
|
||||
const strings = {
|
||||
loading: 'Loading', saving: 'Saving', loadFailed: 'Load failed', saveFailed: 'Save failed',
|
||||
uncertain: 'Unknown result; reload to verify', refreshFailed: 'Saved, but refresh failed',
|
||||
discard: 'Discard changes?', required: 'Required', tooLong: 'Too long', created: 'Created',
|
||||
reply: 'Reply sent', status: 'Status saved', note: 'Note added',
|
||||
};
|
||||
|
||||
function makeRuntime({ href = 'https://site.test/wp-admin/users.php?page=aksrt_tickets', views = [41] } = {}) {
|
||||
const ids = new Map();
|
||||
const fetchCalls = [];
|
||||
const document = { activeElement: null };
|
||||
|
||||
class Element {
|
||||
constructor(tagName = 'div', attrs = {}) {
|
||||
this.tagName = tagName.toUpperCase();
|
||||
this.attrs = { ...attrs };
|
||||
this.dataset = {};
|
||||
Object.entries(attrs).forEach(([name, value]) => {
|
||||
const match = name.match(/^data-(.+)$/);
|
||||
if (match) this.dataset[match[1].replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())] = String(value);
|
||||
});
|
||||
this.children = [];
|
||||
this.parentElement = null;
|
||||
this.listeners = new Map();
|
||||
this.disabled = false;
|
||||
this.hidden = Object.hasOwn(attrs, 'hidden');
|
||||
this.required = Object.hasOwn(attrs, 'required');
|
||||
this.checked = Object.hasOwn(attrs, 'checked');
|
||||
this.isConnected = true;
|
||||
this.open = false;
|
||||
this.validity = '';
|
||||
this.selectionStart = 0;
|
||||
this.selectionEnd = 0;
|
||||
this.scrollTop = 0;
|
||||
this.scrollHeight = 0;
|
||||
this._value = String(attrs.value ?? '');
|
||||
this.defaultValue = this._value;
|
||||
this.maxLength = attrs.maxlength === undefined ? -1 : Number(attrs.maxlength);
|
||||
this.type = attrs.type || '';
|
||||
this.name = attrs.name || '';
|
||||
this.id = attrs.id || '';
|
||||
this.action = attrs.action || '';
|
||||
this.textContent = attrs.textContent || '';
|
||||
this._innerHTML = '';
|
||||
this.classNames = new Set(String(attrs.class || '').split(/\s+/).filter(Boolean));
|
||||
this.classList = {
|
||||
add: (name) => this.classNames.add(name),
|
||||
remove: (name) => this.classNames.delete(name),
|
||||
contains: (name) => this.classNames.has(name),
|
||||
toggle: (name, force) => {
|
||||
const enabled = force === undefined ? !this.classNames.has(name) : Boolean(force);
|
||||
if (enabled) this.classNames.add(name); else this.classNames.delete(name);
|
||||
return enabled;
|
||||
},
|
||||
};
|
||||
this.isPanel = false;
|
||||
if (this.id) ids.set(this.id, this);
|
||||
}
|
||||
|
||||
get value() {
|
||||
if (this.tagName === 'SELECT' && this.options && this.selectedIndex >= 0) {
|
||||
return this.options[this.selectedIndex]?.value ?? '';
|
||||
}
|
||||
return this._value;
|
||||
}
|
||||
|
||||
set value(value) {
|
||||
this._value = String(value ?? '');
|
||||
if (this.tagName === 'SELECT' && this.options) {
|
||||
this.selectedIndex = this.options.findIndex((option) => option.value === this._value);
|
||||
}
|
||||
}
|
||||
|
||||
get innerHTML() { return this._innerHTML; }
|
||||
|
||||
set innerHTML(value) {
|
||||
this._innerHTML = String(value);
|
||||
this.children = [];
|
||||
if (this.isPanel && this._innerHTML) buildDetailPanel(this, this._innerHTML);
|
||||
}
|
||||
|
||||
appendChild(child) {
|
||||
child.parentElement = this;
|
||||
child.form = this.tagName === 'FORM' ? this : (this.form || null);
|
||||
this.children.push(child);
|
||||
child.children.forEach((nested) => { nested.form = child.tagName === 'FORM' ? child : child.form; });
|
||||
return child;
|
||||
}
|
||||
|
||||
addEventListener(type, callback, options = {}) {
|
||||
const entries = this.listeners.get(type) || [];
|
||||
entries.push({ callback, once: Boolean(options && options.once) });
|
||||
this.listeners.set(type, entries);
|
||||
}
|
||||
|
||||
fire(type, values = {}) {
|
||||
const event = {
|
||||
target: this,
|
||||
defaultPrevented: false,
|
||||
preventDefault() { this.defaultPrevented = true; },
|
||||
...values,
|
||||
};
|
||||
const entries = [...(this.listeners.get(type) || [])];
|
||||
entries.forEach(({ callback, once }) => {
|
||||
callback(event);
|
||||
if (once) {
|
||||
const current = this.listeners.get(type) || [];
|
||||
this.listeners.set(type, current.filter((entry) => entry.callback !== callback));
|
||||
}
|
||||
});
|
||||
return event;
|
||||
}
|
||||
|
||||
querySelector(selector) { return this.querySelectorAll(selector)[0] || null; }
|
||||
|
||||
querySelectorAll(selector) {
|
||||
const selectors = selector.split(',').map((part) => part.trim()).filter(Boolean);
|
||||
const found = [];
|
||||
const visit = (node) => {
|
||||
node.children.forEach((child) => {
|
||||
if (selectors.some((part) => matchesSelector(child, part))) found.push(child);
|
||||
visit(child);
|
||||
});
|
||||
};
|
||||
visit(this);
|
||||
return found;
|
||||
}
|
||||
|
||||
closest(selector) {
|
||||
for (let node = this; node; node = node.parentElement) {
|
||||
if (selector.split(',').some((part) => matchesSelector(node, part.trim()))) return node;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
matches(selector) { return selector.split(',').some((part) => matchesSelector(this, part.trim())); }
|
||||
focus() { document.activeElement = this; }
|
||||
setCustomValidity(message) { this.validity = message; }
|
||||
setSelectionRange(start, end) { this.selectionStart = start; this.selectionEnd = end; }
|
||||
getAttribute(name) { return this.attrs[name] === undefined ? null : String(this.attrs[name]); }
|
||||
setAttribute(name, value) { this.attrs[name] = String(value); }
|
||||
removeAttribute(name) { delete this.attrs[name]; }
|
||||
replaceChildren() { this.children = []; this._innerHTML = ''; }
|
||||
getBoundingClientRect() { return { left: 100, top: 100, right: 500, bottom: 500 }; }
|
||||
}
|
||||
|
||||
function matchesSelector(element, selector) {
|
||||
const parts = selector.trim().split(/\s+/);
|
||||
if (!matchesSimple(element, parts[parts.length - 1])) return false;
|
||||
let ancestor = element.parentElement;
|
||||
for (let index = parts.length - 2; index >= 0; index -= 1) {
|
||||
while (ancestor && !matchesSimple(ancestor, parts[index])) ancestor = ancestor.parentElement;
|
||||
if (!ancestor) return false;
|
||||
ancestor = ancestor.parentElement;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function matchesSimple(element, selector) {
|
||||
const tag = selector.match(/^[a-zA-Z][\w-]*/)?.[0];
|
||||
if (tag && element.tagName !== tag.toUpperCase()) return false;
|
||||
const id = selector.match(/#([\w-]+)/)?.[1];
|
||||
if (id && element.id !== id) return false;
|
||||
for (const [, name, doubleValue, singleValue, bareValue] of selector.matchAll(/\[([^\]=]+)(?:=(?:"([^"]*)"|'([^']*)'|([^\]]+)))?\]/g)) {
|
||||
if (!Object.hasOwn(element.attrs, name)) return false;
|
||||
const expected = doubleValue ?? singleValue ?? bareValue;
|
||||
if (expected !== undefined && String(element.attrs[name]) !== expected) return false;
|
||||
}
|
||||
for (const [, className] of selector.matchAll(/\.([\w-]+)/g)) {
|
||||
if (!element.classList.contains(className)) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function el(tag, attrs = {}, parent = null) {
|
||||
const item = new Element(tag, attrs);
|
||||
if (parent) parent.appendChild(item);
|
||||
return item;
|
||||
}
|
||||
|
||||
function field(tag, name, value, parent, extra = {}) {
|
||||
const attrs = { value, ...extra };
|
||||
if (name) attrs.name = name;
|
||||
const item = el(tag, attrs, parent);
|
||||
item.defaultValue = String(value ?? '');
|
||||
item.type = attrs.type || (tag === 'textarea' ? 'textarea' : 'text');
|
||||
item.form = parent.tagName === 'FORM' ? parent : parent.form;
|
||||
return item;
|
||||
}
|
||||
|
||||
function selectField(name, choices, selected, parent, extra = {}) {
|
||||
const attrs = { ...extra };
|
||||
if (name) attrs.name = name;
|
||||
const select = el('select', attrs, parent);
|
||||
select.options = choices.map(([value, label, attrs = {}]) => {
|
||||
const option = el('option', { value, textContent: label, ...attrs }, select);
|
||||
option.value = String(value);
|
||||
option.defaultSelected = String(value) === String(selected);
|
||||
return option;
|
||||
});
|
||||
select.defaultValue = String(selected);
|
||||
select.value = selected;
|
||||
select.form = parent.tagName === 'FORM' ? parent : parent.form;
|
||||
return select;
|
||||
}
|
||||
|
||||
function configureForm(form) {
|
||||
form.reset = () => {
|
||||
form.querySelectorAll('input, select, textarea').forEach((control) => {
|
||||
if (control.tagName === 'SELECT') {
|
||||
const selected = control.options.find((option) => option.defaultSelected) || control.options[0];
|
||||
control.value = selected ? selected.value : '';
|
||||
} else {
|
||||
control.value = control.defaultValue;
|
||||
if (control.type === 'checkbox') control.checked = control.defaultChecked || false;
|
||||
}
|
||||
control.validity = '';
|
||||
});
|
||||
};
|
||||
form.reportValidity = () => form.querySelectorAll('input, select, textarea').every((control) => {
|
||||
if (control.validity) return false;
|
||||
if (!control.required) return true;
|
||||
if (control.type === 'checkbox') return control.checked;
|
||||
return String(control.value).trim() !== '';
|
||||
});
|
||||
}
|
||||
|
||||
function feedbackBox(parent) {
|
||||
const box = el('div', { 'data-aksrt-ticket-feedback': '', hidden: '' }, parent);
|
||||
el('p', {}, box);
|
||||
el('button', { type: 'button', 'data-aksrt-ticket-retry': '', hidden: '' }, box);
|
||||
return box;
|
||||
}
|
||||
|
||||
const root = el('main', { class: 'aksrt-tickets-admin' });
|
||||
const list = el('div', { 'data-aksrt-ticket-list': '' }, root);
|
||||
const createOpener = el('button', { 'data-aksrt-dialog-open': 'aksrt-ticket-create-dialog' }, root);
|
||||
const viewsById = new Map();
|
||||
views.forEach((id) => {
|
||||
const button = el('button', { 'data-aksrt-ticket-view': String(id) }, root);
|
||||
viewsById.set(String(id), button);
|
||||
});
|
||||
|
||||
const createDialog = el('dialog', { id: 'aksrt-ticket-create-dialog' }, root);
|
||||
const createFrame = el('div', {}, createDialog);
|
||||
el('h2', { id: 'aksrt-ticket-create-title', autofocus: '' }, createFrame);
|
||||
feedbackBox(createDialog);
|
||||
const createForm = el('form', { action: 'https://site.test/wp-json/aksrt/v1/admin/tickets', 'data-aksrt-ticket-form': 'create' }, createFrame);
|
||||
field('input', 'user_id', '', createForm, { type: 'number', required: '' });
|
||||
selectField('ticket_type_id', [['', 'Choose'], ['3', 'Support']], '3', createForm, { required: '' });
|
||||
field('input', 'title', '', createForm, { type: 'text', required: '', maxlength: '120' });
|
||||
field('textarea', 'content', '', createForm, { required: '', maxlength: '500', id: 'aksrt-ticket-create-content' });
|
||||
el('span', { 'data-aksrt-ticket-counter': 'aksrt-ticket-create-content' }, createForm);
|
||||
el('button', { type: 'button', 'data-aksrt-dialog-close': '' }, createFrame);
|
||||
el('button', { type: 'submit' }, createForm);
|
||||
configureForm(createForm);
|
||||
|
||||
const detailDialog = el('dialog', { id: 'aksrt-ticket-detail-dialog' }, root);
|
||||
const detailFrame = el('div', {}, detailDialog);
|
||||
const detailTitle = el('h2', { id: 'aksrt-ticket-detail-title', autofocus: '' }, detailFrame);
|
||||
detailTitle.textContent = 'Ticket detail';
|
||||
feedbackBox(detailDialog);
|
||||
const panel = el('div', { 'data-aksrt-ticket-panel': '' }, detailFrame);
|
||||
panel.isPanel = true;
|
||||
el('button', { type: 'button', 'data-aksrt-dialog-close': '' }, detailFrame);
|
||||
|
||||
[createDialog, detailDialog].forEach((dialog) => {
|
||||
dialog.showModal = () => {
|
||||
dialog.open = true;
|
||||
dialog.querySelector('[autofocus]')?.focus();
|
||||
};
|
||||
dialog.close = () => {
|
||||
if (!dialog.open) return;
|
||||
dialog.open = false;
|
||||
setTimeout(() => dialog.fire('close'), 0);
|
||||
};
|
||||
});
|
||||
|
||||
function buildDetailPanel(host, marker) {
|
||||
const [, idText, initialStatus = 'pending'] = marker.match(/ticket:(\d+)(?::([\w-]+))?/) || [];
|
||||
const id = Number(idText || 1);
|
||||
const detail = el('section', { 'data-aksrt-ticket-detail': String(id) }, host);
|
||||
const conversation = el('section', { class: 'aksrt-ticket-conversation' }, detail);
|
||||
el('button', { type: 'button', 'data-aksrt-ticket-latest': '' }, conversation);
|
||||
const scroll = el('div', { class: 'aksrt-ticket-conversation__scroll' }, conversation);
|
||||
scroll.scrollHeight = 100;
|
||||
const replyForm = el('form', { action: `https://site.test/wp-json/aksrt/v1/admin/tickets/${id}/reply`, 'data-aksrt-ticket-form': 'reply' }, detail);
|
||||
const replyFieldId = `aksrt-ticket-reply-${id}`;
|
||||
const reply = field('textarea', 'content', '', replyForm, { id: replyFieldId, required: '', maxlength: '24', 'data-aksrt-ticket-editor': '' });
|
||||
reply.selectionStart = reply.selectionEnd = 0;
|
||||
el('span', { 'data-aksrt-ticket-counter': replyFieldId }, replyForm);
|
||||
const prereply = selectField('', [['', 'Choose reply'], ['short', 'Short'], ['01234567890123456789012345', 'Too long']], '', replyForm, { id: `${replyFieldId}-pre`, 'data-aksrt-ticket-prereply': replyFieldId });
|
||||
prereply.dataset.aksrtTicketPrereply = replyFieldId;
|
||||
el('button', { type: 'submit' }, replyForm);
|
||||
configureForm(replyForm);
|
||||
|
||||
const statusSection = el('section', {}, detail);
|
||||
el('button', { type: 'button', 'data-aksrt-ticket-assign': '' }, statusSection);
|
||||
const statusForm = el('form', { action: `https://site.test/wp-json/aksrt/v1/admin/tickets/${id}/status`, 'data-aksrt-ticket-form': 'status' }, statusSection);
|
||||
selectField('status', [
|
||||
['pending', 'Pending'], ['handling', 'Handling'], ['closed', 'Closed', { 'data-closed': '1' }],
|
||||
], initialStatus, statusForm, { 'data-aksrt-ticket-status': '' });
|
||||
selectField('ticket_type_id', [['3', 'Support'], ['6', 'Billing']], '3', statusForm, { required: '' });
|
||||
selectField('admin_id', [['0', 'Unassigned'], ['7', 'Admin'], ['44', 'Current']], '7', statusForm);
|
||||
const warning = el('div', { 'data-aksrt-ticket-close-warning': '', hidden: '' }, statusForm);
|
||||
const confirm = field('input', '', '', warning, { type: 'checkbox', 'data-aksrt-ticket-close-confirm': '' });
|
||||
confirm.type = 'checkbox';
|
||||
confirm.checked = false;
|
||||
confirm.defaultChecked = false;
|
||||
el('button', { type: 'submit' }, statusForm);
|
||||
configureForm(statusForm);
|
||||
|
||||
const noteForm = el('form', { action: `https://site.test/wp-json/aksrt/v1/admin/tickets/${id}/notes`, 'data-aksrt-ticket-form': 'note' }, detail);
|
||||
field('textarea', 'content', '', noteForm, { id: `aksrt-ticket-note-${id}`, required: '', maxlength: '24', 'data-aksrt-ticket-editor': '' });
|
||||
el('span', { 'data-aksrt-ticket-counter': `aksrt-ticket-note-${id}` }, noteForm);
|
||||
el('button', { type: 'submit' }, noteForm);
|
||||
configureForm(noteForm);
|
||||
}
|
||||
|
||||
const documentElement = el('html');
|
||||
document.querySelector = (selector) => selector === '.aksrt-tickets-admin' ? root : null;
|
||||
document.getElementById = (id) => ids.get(id) || null;
|
||||
document.documentElement = documentElement;
|
||||
|
||||
const window = new Element('window');
|
||||
window.AKSRTAdminTickets = {
|
||||
ajaxUrl: 'https://site.test/wp-admin/admin-ajax.php',
|
||||
readNonce: 'read-nonce', restNonce: 'rest-nonce', currentUser: 44, strings,
|
||||
};
|
||||
window.location = {
|
||||
href,
|
||||
reloadCount: 0,
|
||||
reload() { this.reloadCount += 1; },
|
||||
};
|
||||
window.history = {
|
||||
state: null,
|
||||
replaceState(_state, _title, nextUrl) { window.location.href = nextUrl; },
|
||||
};
|
||||
window.confirmAnswer = false;
|
||||
window.confirmCalls = [];
|
||||
window.confirm = (message) => {
|
||||
window.confirmCalls.push(message);
|
||||
return window.confirmAnswer;
|
||||
};
|
||||
|
||||
const fetch = (url, options) => new Promise((resolve, reject) => {
|
||||
fetchCalls.push({ url: String(url), options, resolve, reject });
|
||||
});
|
||||
vm.runInNewContext(fs.readFileSync(scriptPath, 'utf8'), {
|
||||
document, window, fetch, URL, AbortController, setTimeout, clearTimeout,
|
||||
}, { filename: scriptPath });
|
||||
|
||||
return { document, window, root, list, createDialog, detailDialog, createForm, createOpener, detailTitle, panel, viewsById, fetchCalls };
|
||||
}
|
||||
|
||||
function response(data, status = 200) {
|
||||
return { ok: status >= 200 && status < 300, status, json: async () => data };
|
||||
}
|
||||
|
||||
function resolveFetch(runtime, index, data, status = 200) {
|
||||
runtime.fetchCalls[index].resolve(response(data, status));
|
||||
}
|
||||
|
||||
function rejectFetch(runtime, index, error = new Error('network disconnected')) {
|
||||
runtime.fetchCalls[index].reject(error);
|
||||
}
|
||||
|
||||
function tick() { return new Promise((resolve) => setTimeout(resolve, 5)); }
|
||||
|
||||
function fireSubmit(runtime, form) {
|
||||
return runtime.root.fire('submit', { target: form });
|
||||
}
|
||||
|
||||
function formsIn(runtime) {
|
||||
return {
|
||||
reply: runtime.panel.querySelector('[data-aksrt-ticket-form="reply"]'),
|
||||
status: runtime.panel.querySelector('[data-aksrt-ticket-form="status"]'),
|
||||
note: runtime.panel.querySelector('[data-aksrt-ticket-form="note"]'),
|
||||
};
|
||||
}
|
||||
|
||||
function loadDetail(runtime, id = 41, status = 'pending') {
|
||||
const opener = runtime.viewsById.get(String(id));
|
||||
assert.ok(opener, `missing opener for ${id}`);
|
||||
runtime.root.fire('click', { target: opener });
|
||||
assert.equal(runtime.fetchCalls.length, 1);
|
||||
resolveFetch(runtime, 0, { success: true, data: { panel: `ticket:${id}:${status}`, title: `Ticket ${id}`, page: 1 } });
|
||||
return tick();
|
||||
}
|
||||
|
||||
function setField(form, selector, value) {
|
||||
const field = form.querySelector(selector);
|
||||
assert.ok(field, `missing field ${selector}`);
|
||||
field.value = value;
|
||||
return field;
|
||||
}
|
||||
|
||||
function submitBody(call) { return JSON.parse(call.options.body); }
|
||||
|
||||
test('create modal opens with scroll lock, cancels dirty close, resets, and returns focus', async () => {
|
||||
const runtime = makeRuntime();
|
||||
runtime.root.fire('click', { target: runtime.createOpener });
|
||||
assert.equal(runtime.createDialog.open, true);
|
||||
assert.equal(runtime.document.documentElement.classList.contains('aksrt-ticket-modal-open'), true);
|
||||
assert.equal(runtime.document.activeElement.id, 'aksrt-ticket-create-title');
|
||||
|
||||
const title = runtime.createForm.querySelector('[name="title"]');
|
||||
title.value = 'Unsaved title';
|
||||
runtime.root.fire('input', { target: title });
|
||||
const closeButton = runtime.createDialog.querySelector('[data-aksrt-dialog-close]');
|
||||
runtime.createDialog.fire('click', { target: closeButton });
|
||||
assert.equal(runtime.createDialog.open, true);
|
||||
assert.deepEqual(runtime.window.confirmCalls, [strings.discard]);
|
||||
|
||||
runtime.window.confirmAnswer = true;
|
||||
runtime.createDialog.fire('click', { target: closeButton });
|
||||
assert.equal(runtime.createDialog.open, false);
|
||||
await tick();
|
||||
assert.equal(runtime.document.documentElement.classList.contains('aksrt-ticket-modal-open'), false);
|
||||
assert.equal(runtime.document.activeElement, runtime.createOpener);
|
||||
assert.equal(title.value, '');
|
||||
});
|
||||
|
||||
test('detail load ignores a response that arrives after cancellation', async () => {
|
||||
const runtime = makeRuntime();
|
||||
runtime.root.fire('click', { target: runtime.viewsById.get('41') });
|
||||
const pending = runtime.fetchCalls[0];
|
||||
assert.match(pending.url, /id=41/);
|
||||
const cancelled = runtime.detailDialog.fire('cancel');
|
||||
assert.equal(cancelled.defaultPrevented, true);
|
||||
await tick();
|
||||
assert.equal(runtime.detailDialog.open, false);
|
||||
assert.equal(pending.options.signal.aborted, true);
|
||||
|
||||
resolveFetch(runtime, 0, { success: true, data: { panel: 'ticket:41', title: 'Late title', page: 1 } });
|
||||
await tick();
|
||||
assert.equal(runtime.panel.querySelector('[data-aksrt-ticket-form]'), null);
|
||||
assert.equal(runtime.detailTitle.textContent, 'Ticket detail');
|
||||
assert.equal(new URL(runtime.window.location.href).searchParams.has('id'), false);
|
||||
});
|
||||
|
||||
test('deep link loads an ID even when it is absent from the current list', async () => {
|
||||
const runtime = makeRuntime({
|
||||
views: [41],
|
||||
href: 'https://site.test/wp-admin/users.php?page=aksrt_tickets&id=987&status=pending&ticket_type_id=6&s=network&paged=3',
|
||||
});
|
||||
assert.equal(runtime.detailDialog.open, true);
|
||||
assert.equal(runtime.viewsById.has('987'), false);
|
||||
assert.equal(runtime.fetchCalls.length, 1);
|
||||
const read = new URL(runtime.fetchCalls[0].url);
|
||||
assert.equal(read.searchParams.get('action'), 'aksrt_ticket_view');
|
||||
assert.equal(read.searchParams.get('nonce'), 'read-nonce');
|
||||
assert.equal(read.searchParams.get('id'), '987');
|
||||
assert.equal(read.searchParams.get('status'), 'pending');
|
||||
assert.equal(read.searchParams.get('ticket_type_id'), '6');
|
||||
assert.equal(read.searchParams.get('s'), 'network');
|
||||
assert.equal(read.searchParams.get('paged'), '3');
|
||||
resolveFetch(runtime, 0, { success: true, data: { panel: 'ticket:987', title: 'Ticket 987', page: 3 } });
|
||||
await tick();
|
||||
assert.equal(runtime.panel.querySelector('[data-aksrt-ticket-detail="987"]') !== null, true);
|
||||
});
|
||||
|
||||
test('create POST uses the REST nonce, locks duplicates, and keeps inputs after a confirmed error', async () => {
|
||||
const runtime = makeRuntime();
|
||||
runtime.root.fire('click', { target: runtime.createOpener });
|
||||
setField(runtime.createForm, '[name="user_id"]', '19');
|
||||
setField(runtime.createForm, '[name="title"]', 'Broken keyboard');
|
||||
setField(runtime.createForm, '[name="content"]', 'The key sticks');
|
||||
|
||||
fireSubmit(runtime, runtime.createForm);
|
||||
assert.equal(runtime.fetchCalls.length, 1);
|
||||
const call = runtime.fetchCalls[0];
|
||||
assert.equal(call.options.method, 'POST');
|
||||
assert.equal(call.options.headers['X-WP-Nonce'], 'rest-nonce');
|
||||
assert.deepEqual(submitBody(call), { user_id: '19', ticket_type_id: '3', title: 'Broken keyboard', content: 'The key sticks' });
|
||||
assert.equal(runtime.createForm.querySelector('[name="title"]').disabled, true);
|
||||
fireSubmit(runtime, runtime.createForm);
|
||||
assert.equal(runtime.fetchCalls.length, 1);
|
||||
|
||||
resolveFetch(runtime, 0, { success: false, message: 'Invalid user' }, 400);
|
||||
await tick();
|
||||
assert.equal(runtime.createForm.querySelector('[name="title"]').disabled, false);
|
||||
assert.equal(runtime.createForm.querySelector('[name="title"]').value, 'Broken keyboard');
|
||||
assert.equal(runtime.createDialog.querySelector('[data-aksrt-ticket-feedback] p').textContent, 'Invalid user');
|
||||
assert.equal(runtime.createDialog.querySelector('[data-aksrt-ticket-retry]').hidden, true);
|
||||
});
|
||||
|
||||
test('successful create waits for its asynchronous close event before opening the new detail', async () => {
|
||||
const runtime = makeRuntime();
|
||||
runtime.root.fire('click', { target: runtime.createOpener });
|
||||
setField(runtime.createForm, '[name="user_id"]', '19');
|
||||
setField(runtime.createForm, '[name="title"]', 'New issue');
|
||||
setField(runtime.createForm, '[name="content"]', 'Details');
|
||||
fireSubmit(runtime, runtime.createForm);
|
||||
resolveFetch(runtime, 0, { success: true, data: { id: 303 } });
|
||||
await tick();
|
||||
assert.equal(runtime.createDialog.open, false);
|
||||
assert.equal(runtime.fetchCalls.length, 2);
|
||||
assert.equal(runtime.detailDialog.open, true);
|
||||
assert.equal(runtime.document.documentElement.classList.contains('aksrt-ticket-modal-open'), true);
|
||||
resolveFetch(runtime, 1, { success: true, data: { panel: 'ticket:303', title: 'New issue', list: 'updated rows', page: 1 } });
|
||||
await tick();
|
||||
assert.equal(runtime.panel.querySelector('[data-aksrt-ticket-detail="303"]') !== null, true);
|
||||
assert.equal(runtime.list.innerHTML, 'updated rows');
|
||||
assert.equal(runtime.detailDialog.open, true);
|
||||
assert.equal(runtime.document.documentElement.classList.contains('aksrt-ticket-modal-open'), true);
|
||||
});
|
||||
|
||||
test('reply, status, and note saves refresh detail and list while restoring other drafts', async (t) => {
|
||||
for (const kind of ['reply', 'status', 'note']) {
|
||||
await t.test(`${kind} save`, async () => {
|
||||
const runtime = makeRuntime();
|
||||
await loadDetail(runtime);
|
||||
let forms = formsIn(runtime);
|
||||
setField(forms.reply, '[name="content"]', 'Draft reply');
|
||||
setField(forms.status, '[name="status"]', 'handling');
|
||||
setField(forms.status, '[name="ticket_type_id"]', '6');
|
||||
setField(forms.status, '[name="admin_id"]', '44');
|
||||
setField(forms.note, '[name="content"]', 'Draft note');
|
||||
runtime.root.fire('change', { target: forms.status.querySelector('[name="status"]') });
|
||||
|
||||
fireSubmit(runtime, forms[kind]);
|
||||
assert.equal(runtime.fetchCalls.length, 2);
|
||||
const post = runtime.fetchCalls[1];
|
||||
assert.equal(post.options.method, 'POST');
|
||||
assert.equal(post.options.headers['X-WP-Nonce'], 'rest-nonce');
|
||||
const body = submitBody(post);
|
||||
if (kind === 'status') assert.deepEqual(body, { status: 'handling', ticket_type_id: '6', admin_id: '44' });
|
||||
else assert.deepEqual(body, { content: kind === 'reply' ? 'Draft reply' : 'Draft note' });
|
||||
|
||||
resolveFetch(runtime, 1, { success: true, data: { saved: true } });
|
||||
await tick();
|
||||
assert.equal(runtime.fetchCalls.length, 3);
|
||||
const statusAfterSave = kind === 'status' ? 'handling' : 'pending';
|
||||
resolveFetch(runtime, 2, {
|
||||
success: true,
|
||||
data: { panel: `ticket:41:${statusAfterSave}`, title: 'Ticket 41', list: `rows-after-${kind}`, page: 1 },
|
||||
});
|
||||
await tick();
|
||||
|
||||
forms = formsIn(runtime);
|
||||
assert.equal(runtime.list.innerHTML, `rows-after-${kind}`);
|
||||
if (kind !== 'reply') assert.equal(forms.reply.querySelector('[name="content"]').value, 'Draft reply');
|
||||
if (kind !== 'status') {
|
||||
assert.equal(forms.status.querySelector('[name="status"]').value, 'handling');
|
||||
assert.equal(forms.status.querySelector('[name="ticket_type_id"]').value, '6');
|
||||
assert.equal(forms.status.querySelector('[name="admin_id"]').value, '44');
|
||||
}
|
||||
if (kind !== 'note') assert.equal(forms.note.querySelector('[name="content"]').value, 'Draft note');
|
||||
if (kind === 'reply') assert.equal(forms.reply.querySelector('[name="content"]').value, '');
|
||||
assert.equal(runtime.detailDialog.querySelector('[data-aksrt-ticket-feedback] p').textContent, strings[kind]);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
test('closing requires checkbox confirmation, and “assign to me” selects the current handler', async () => {
|
||||
const runtime = makeRuntime();
|
||||
await loadDetail(runtime);
|
||||
const forms = formsIn(runtime);
|
||||
const statusForm = forms.status;
|
||||
const status = statusForm.querySelector('[name="status"]');
|
||||
const confirm = statusForm.querySelector('[data-aksrt-ticket-close-confirm]');
|
||||
status.value = 'closed';
|
||||
runtime.root.fire('change', { target: status });
|
||||
assert.equal(statusForm.querySelector('[data-aksrt-ticket-close-warning]').hidden, false);
|
||||
assert.equal(confirm.required, true);
|
||||
assert.equal(confirm.checked, false);
|
||||
const blocked = fireSubmit(runtime, statusForm);
|
||||
assert.equal(blocked.defaultPrevented, true);
|
||||
assert.equal(runtime.fetchCalls.length, 1);
|
||||
confirm.checked = true;
|
||||
assert.equal(statusForm.reportValidity(), true);
|
||||
|
||||
status.value = 'pending';
|
||||
runtime.root.fire('change', { target: status });
|
||||
status.value = 'pending';
|
||||
const assign = runtime.panel.querySelector('[data-aksrt-ticket-assign]');
|
||||
runtime.root.fire('click', { target: assign });
|
||||
assert.equal(statusForm.querySelector('[name="admin_id"]').value, '44');
|
||||
assert.equal(status.value, 'handling');
|
||||
assert.equal(runtime.document.activeElement, statusForm.querySelector('[type="submit"]'));
|
||||
});
|
||||
|
||||
test('an overlong prereply is rejected without changing the editor', async () => {
|
||||
const runtime = makeRuntime();
|
||||
await loadDetail(runtime);
|
||||
const reply = formsIn(runtime).reply;
|
||||
const editor = reply.querySelector('textarea');
|
||||
editor.value = 'Existing text';
|
||||
editor.selectionStart = 4;
|
||||
editor.selectionEnd = 4;
|
||||
const preset = reply.querySelector('[data-aksrt-ticket-prereply]');
|
||||
preset.value = '01234567890123456789012345';
|
||||
runtime.root.fire('change', { target: preset });
|
||||
assert.equal(editor.value, 'Existing text');
|
||||
assert.equal(preset.value, '');
|
||||
assert.equal(runtime.detailDialog.querySelector('[data-aksrt-ticket-feedback] p').textContent, strings.tooLong);
|
||||
});
|
||||
|
||||
test('a saved write followed by a failed refresh retries only the read', async () => {
|
||||
const runtime = makeRuntime();
|
||||
await loadDetail(runtime);
|
||||
const forms = formsIn(runtime);
|
||||
setField(forms.reply, '[name="content"]', 'Send once');
|
||||
setField(forms.note, '[name="content"]', 'Keep this draft');
|
||||
fireSubmit(runtime, forms.reply);
|
||||
resolveFetch(runtime, 1, { success: true, data: { reply_id: 2 } });
|
||||
await tick();
|
||||
assert.equal(runtime.fetchCalls.length, 3);
|
||||
assert.equal(runtime.fetchCalls[2].options.method, undefined);
|
||||
resolveFetch(runtime, 2, { success: false, message: 'Read temporarily failed' }, 500);
|
||||
await tick();
|
||||
assert.equal(runtime.detailDialog.querySelector('[data-aksrt-ticket-feedback] p').textContent, strings.refreshFailed);
|
||||
assert.equal(runtime.fetchCalls.filter((call) => call.options.method === 'POST').length, 1);
|
||||
|
||||
const retry = runtime.detailDialog.querySelector('[data-aksrt-ticket-retry]');
|
||||
assert.equal(retry.hidden, false);
|
||||
runtime.root.fire('click', { target: retry });
|
||||
assert.equal(runtime.fetchCalls.length, 4);
|
||||
assert.equal(runtime.fetchCalls[3].options.method, undefined);
|
||||
resolveFetch(runtime, 3, { success: true, data: { panel: 'ticket:41', title: 'Ticket 41', list: 'fresh rows', page: 1 } });
|
||||
await tick();
|
||||
assert.equal(runtime.fetchCalls.filter((call) => call.options.method === 'POST').length, 1);
|
||||
assert.equal(formsIn(runtime).note.querySelector('[name="content"]').value, 'Keep this draft');
|
||||
});
|
||||
|
||||
test('an unknown write result requires a full refresh check and is not retried automatically', async () => {
|
||||
const runtime = makeRuntime();
|
||||
await loadDetail(runtime);
|
||||
const replyForm = formsIn(runtime).reply;
|
||||
setField(replyForm, '[name="content"]', 'May have been sent');
|
||||
fireSubmit(runtime, replyForm);
|
||||
rejectFetch(runtime, 1);
|
||||
await tick();
|
||||
|
||||
assert.equal(runtime.detailDialog.querySelector('[data-aksrt-ticket-feedback] p').textContent, strings.uncertain);
|
||||
assert.equal(runtime.detailDialog.querySelector('[data-aksrt-ticket-retry]').hidden, false);
|
||||
assert.equal(runtime.fetchCalls.filter((call) => call.options.method === 'POST').length, 1);
|
||||
runtime.root.fire('click', { target: runtime.detailDialog.querySelector('[data-aksrt-ticket-retry]') });
|
||||
assert.equal(runtime.window.location.reloadCount, 1);
|
||||
assert.equal(runtime.fetchCalls.filter((call) => call.options.method === 'POST').length, 1);
|
||||
});
|
||||
|
||||
test('deleted or inaccessible tickets lock stale forms and route retries to reload', async (t) => {
|
||||
const read = makeRuntime();
|
||||
read.root.fire('click', { target: read.viewsById.get('41') });
|
||||
resolveFetch(read, 0, { success: false, message: 'Ticket missing' }, 404);
|
||||
await tick();
|
||||
assert.equal(new URL(read.window.location.href).searchParams.has('id'), false);
|
||||
const readRetry = read.detailDialog.querySelector('[data-aksrt-ticket-retry]');
|
||||
assert.equal(readRetry.hidden, false);
|
||||
read.root.fire('click', { target: readRetry });
|
||||
assert.equal(read.window.location.reloadCount, 1);
|
||||
|
||||
for (const status of [404, 403]) {
|
||||
await t.test(`write ${status}`, async () => {
|
||||
const runtime = makeRuntime();
|
||||
await loadDetail(runtime);
|
||||
const reply = formsIn(runtime).reply;
|
||||
setField(reply, '[name="content"]', 'Reply once');
|
||||
fireSubmit(runtime, reply);
|
||||
resolveFetch(runtime, 1, { success: false, message: 'Ticket unavailable' }, status);
|
||||
await tick();
|
||||
assert.equal(reply.querySelector('textarea').disabled, true);
|
||||
assert.equal(runtime.fetchCalls.filter((call) => call.options.method === 'POST').length, 1);
|
||||
const retry = runtime.detailDialog.querySelector('[data-aksrt-ticket-retry]');
|
||||
assert.equal(retry.hidden, false);
|
||||
if (status === 404) assert.equal(new URL(runtime.window.location.href).searchParams.has('id'), false);
|
||||
fireSubmit(runtime, reply);
|
||||
assert.equal(runtime.fetchCalls.length, 2);
|
||||
runtime.root.fire('click', { target: retry });
|
||||
assert.equal(runtime.window.location.reloadCount, 1);
|
||||
assert.equal(runtime.fetchCalls.length, 2);
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -3,8 +3,6 @@
|
||||
namespace {
|
||||
define('ABSPATH', __DIR__);
|
||||
define('ARRAY_A', 'ARRAY_A');
|
||||
$GLOBALS['allowed'] = true;
|
||||
$GLOBALS['valid_nonce'] = true;
|
||||
function __($text, $domain = '') { return $text; }
|
||||
function esc_html($text) { return htmlspecialchars((string) $text, ENT_QUOTES, 'UTF-8'); }
|
||||
function esc_attr($text) { return esc_html($text); }
|
||||
@@ -25,19 +23,12 @@ namespace {
|
||||
function get_users($args) { return [(object) ['ID' => 7, 'display_name' => 'Operator'], (object) ['ID' => 8, 'display_name' => 'Second']]; }
|
||||
function get_edit_user_link($id) { return admin_url('user-edit.php?user_id=' . $id); }
|
||||
function aksrt_get_avatar_url($id, $size) { return 'https://example.test/avatar/' . $id; }
|
||||
function current_user_can($cap) { return $GLOBALS['allowed']; }
|
||||
function check_ajax_referer($action, $key, $die) { return $action === 'aksrt_ticket_view' && $key === 'nonce' && $GLOBALS['valid_nonce']; }
|
||||
function add_query_arg($args, $url, $base = null) {
|
||||
if (!is_array($args)) { $args = [$args => $url]; $url = $base; }
|
||||
$parts = parse_url($url);
|
||||
parse_str($parts['query'] ?? '', $query);
|
||||
return $parts['scheme'] . '://' . $parts['host'] . ($parts['path'] ?? '') . '?' . http_build_query(array_merge($query, $args));
|
||||
}
|
||||
class JsonReply extends \Exception {
|
||||
public function __construct(public array $payload, public int $status) { parent::__construct(); }
|
||||
}
|
||||
function wp_send_json_success($data) { throw new JsonReply(['success' => true, 'data' => $data], 200); }
|
||||
function wp_send_json_error($data, $status) { throw new JsonReply(['success' => false, 'data' => $data], $status); }
|
||||
}
|
||||
namespace AKSRT\Ticket {
|
||||
class TicketSettings {
|
||||
@@ -108,7 +99,7 @@ namespace AKSRT\Core {
|
||||
}
|
||||
namespace {
|
||||
$root = dirname(__DIR__, 2);
|
||||
foreach (['NativeUi', 'AdminListPagination', 'UsersMenusTicketsList', 'UsersMenusTicketsDialogs', 'UsersMenusTicketsDetail', 'UsersMenusTicketsCenter'] as $file) {
|
||||
foreach (['NativeUi', 'AdminListPagination', 'UsersMenusTicketsList', 'UsersMenusTicketsCreate', 'UsersMenusTicketsDetail', 'UsersMenusTicketsCenter'] as $file) {
|
||||
require $root . '/src/Admin/Native/' . $file . '.php';
|
||||
}
|
||||
require $root . '/src/Ticket/TicketQuery.php';
|
||||
@@ -129,38 +120,31 @@ namespace {
|
||||
public function prepare($sql, $params) { $this->sql = $sql; $this->params = $params; return $sql; }
|
||||
public function get_results($sql, $format) { return [['status' => 'closed', 'total' => 2]]; }
|
||||
}
|
||||
$page = new TicketPage();
|
||||
$_GET = ['status' => 'handling', 'ticket_type_id' => 1, 's' => 'needle', 'paged' => 99, 'id' => 99];
|
||||
ob_start();
|
||||
$page->render_tickets_page();
|
||||
$html = ob_get_clean();
|
||||
$initial = ['queries' => \AKSRT\Ticket\TicketRepository::$queries, 'counts' => \AKSRT\Ticket\TicketRepository::$counts, 'detail_reads' => \AKSRT\Ticket\TicketRepository::$reads, 'reply_reads' => \AKSRT\Ticket\TicketRepository::$replies_read];
|
||||
function view($page, array $args) {
|
||||
$_GET = $args;
|
||||
try { $page->ajax_ticket_view(); } catch (JsonReply $reply) { return ['status' => $reply->status] + $reply->payload; }
|
||||
throw new \RuntimeException('Expected JSON response');
|
||||
function render_page(TicketPage $page, array $get): string {
|
||||
$_GET = $get;
|
||||
ob_start();
|
||||
$page->render_tickets_page();
|
||||
return (string) ob_get_clean();
|
||||
}
|
||||
$closed = view($page, ['id' => 99, 'status' => 'pending', 's' => 'not in list', 'refresh_list' => 1, 'paged' => 99]);
|
||||
$open = view($page, ['id' => 21]);
|
||||
$missing = view($page, ['id' => 404]);
|
||||
$GLOBALS['allowed'] = false;
|
||||
$denied = view($page, ['id' => 21]);
|
||||
$GLOBALS['allowed'] = true;
|
||||
$GLOBALS['valid_nonce'] = false;
|
||||
$nonce = view($page, ['id' => 21]);
|
||||
$GLOBALS['valid_nonce'] = true;
|
||||
$repo = \AKSRT\Ticket\TicketRepository::class;
|
||||
$page = new TicketPage();
|
||||
$list = render_page($page, ['status' => 'handling', 'ticket_type_id' => 1, 's' => 'needle', 'paged' => 99]);
|
||||
$initial = ['queries' => $repo::$queries, 'counts' => $repo::$counts, 'detail_reads' => $repo::$reads, 'reply_reads' => $repo::$replies_read];
|
||||
$list_queries = count($repo::$queries);
|
||||
$open = render_page($page, ['id' => 21, 'status' => 'pending', 's' => 'not in list', 'paged' => 3, 'aksrt_ticket_msg' => 'reply']);
|
||||
$closed = render_page($page, ['id' => 99]);
|
||||
$missing = render_page($page, ['id' => 404]);
|
||||
$detail_list_queries = count($repo::$queries) - $list_queries;
|
||||
$create = render_page($page, ['view' => 'new', 'status' => 'pending', 'paged' => 2]);
|
||||
$bogus_notice = render_page($page, ['id' => 21, 'aksrt_ticket_msg' => '<script>']);
|
||||
\AKSRT\Ticket\TicketTypeService::$empty = true;
|
||||
ob_start();
|
||||
$page->render_tickets_page();
|
||||
$no_types = ob_get_clean();
|
||||
$no_types = render_page($page, ['view' => 'new']);
|
||||
\AKSRT\Ticket\TicketTypeService::$empty = false;
|
||||
\AKSRT\Ticket\TicketSettings::$orders = false;
|
||||
ob_start();
|
||||
$page->render_tickets_page();
|
||||
$no_orders = ob_get_clean();
|
||||
$no_orders = render_page($page, ['view' => 'new']);
|
||||
$GLOBALS['wpdb'] = new FakeDb();
|
||||
$query = new QueryProbe();
|
||||
$where = $query->where([]);
|
||||
$statistic = $query->counts(['status' => ['pending', 'handling', 'closed', 'archived'], 'ticket_type_id' => 1, 'keywords' => 'needle']);
|
||||
echo json_encode(compact('html', 'initial', 'closed', 'open', 'missing', 'denied', 'nonce', 'no_types', 'no_orders', 'where', 'statistic') + ['count_sql' => $GLOBALS['wpdb']->sql, 'count_params' => $GLOBALS['wpdb']->params], JSON_THROW_ON_ERROR | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
|
||||
echo json_encode(compact('list', 'initial', 'open', 'closed', 'missing', 'detail_list_queries', 'create', 'bogus_notice', 'no_types', 'no_orders', 'where', 'statistic') + ['count_sql' => $GLOBALS['wpdb']->sql, 'count_params' => $GLOBALS['wpdb']->params], JSON_THROW_ON_ERROR | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
|
||||
}
|
||||
@@ -13,82 +13,94 @@ function rendered() {
|
||||
return fixture;
|
||||
}
|
||||
|
||||
test('page renders header creation action and one of each dialog, without eagerly reading conversations', () => {
|
||||
const { html, initial } = rendered();
|
||||
assert.equal((html.match(/<dialog /g) || []).length, 2);
|
||||
assert.match(html, /aksrt-native-header__actions[^]*data-aksrt-dialog-open="aksrt-ticket-create-dialog"/);
|
||||
assert.match(html, /aria-controls="aksrt-ticket-detail-dialog"/);
|
||||
assert.doesNotMatch(html, /aksrt-ticket-detail-description/);
|
||||
assert.match(html, /id="aksrt-ticket-create-description"/);
|
||||
assert.doesNotMatch(html, /<details|detail-row|data-aksrt-ticket-detail="/);
|
||||
test('list view links to page views and renders no dialogs or eager conversations', () => {
|
||||
const { list, initial } = rendered();
|
||||
assert.doesNotMatch(list, /<dialog|data-aksrt-dialog-open|aria-haspopup="dialog"/);
|
||||
assert.match(list, /aksrt-native-header__actions[^]*href="[^"]*page=aksrt_tickets&view=new&status=handling&ticket_type_id=1&s=needle&paged=2"/);
|
||||
assert.match(list, /<a class="row-title" href="[^"]*page=aksrt_tickets&id=21&status=handling&ticket_type_id=1&s=needle&paged=2"/);
|
||||
assert.doesNotMatch(list, /data-aksrt-ticket-detail=|data-aksrt-ticket-form=/);
|
||||
assert.equal(initial.detail_reads, 0);
|
||||
assert.equal(initial.reply_reads, 0);
|
||||
assert.equal(initial.queries.at(-1).offset, 20);
|
||||
assert.equal(initial.queries.at(-1).limit, 20);
|
||||
assert.deepEqual(initial.counts[0], { status: ['pending', 'handling', 'closed', 'archived'], ticket_type_id: 1, keywords: 'needle' });
|
||||
assert.match(html, /status=closed&ticket_type_id=1&s=needle/);
|
||||
assert.match(list, /status=closed&ticket_type_id=1&s=needle/);
|
||||
});
|
||||
|
||||
test('detail is independently loaded even for a closed ticket outside current filters', () => {
|
||||
const { closed, open } = rendered();
|
||||
assert.equal(closed.status, 200);
|
||||
assert.equal(closed.data.page, 2);
|
||||
assert.match(closed.data.panel, /data-aksrt-ticket-detail="99"/);
|
||||
assert.match(closed.data.panel, /aksrt-ticket-detail__closed/);
|
||||
assert.match(closed.data.panel, /data-aksrt-ticket-form="note"/);
|
||||
assert.doesNotMatch(closed.data.panel, /data-aksrt-ticket-form="(?:reply|status)"/);
|
||||
assert.match(closed.data.list, /data-aksrt-ticket-view="21"/);
|
||||
for (const action of ['reply', 'status', 'note']) assert.ok(open.data.panel.includes(`data-aksrt-ticket-form="${action}"`));
|
||||
assert.match(open.data.panel, /action="https:\/\/example.test\/wp-json\/aksrt\/v1\/admin\/tickets\/21\/notes"/);
|
||||
assert.match(open.data.panel, /data-aksrt-ticket-close-confirm/);
|
||||
assert.match(open.data.panel, /value="closed" data-closed="1"/);
|
||||
assert.equal(open.data.description, undefined);
|
||||
assert.match(open.data.panel, /<dt>工单号<\/dt><dd>TK-00021<\/dd>/);
|
||||
test('workspace loads by ID independent of list filters and keeps the list context for going back', () => {
|
||||
const { open, closed, detail_list_queries: listQueries } = rendered();
|
||||
assert.equal(listQueries, 0, 'workspace must not query the list');
|
||||
assert.match(open, /<h1 class="aksrt-native-header__title">[^]*Question <svg onload=alert\(1\)><\/h1>/);
|
||||
assert.match(open, /href="[^"]*page=aksrt_tickets&status=pending&s=not\+in\+list&paged=3"[^>]*>[^]*返回工单列表/);
|
||||
assert.match(open, /data-aksrt-ticket-detail="21"/);
|
||||
for (const action of ['reply', 'status', 'note']) assert.ok(open.includes(`data-aksrt-ticket-form="${action}"`));
|
||||
assert.match(open, /action="https:\/\/example.test\/wp-json\/aksrt\/v1\/admin\/tickets\/21\/notes"/);
|
||||
assert.match(open, /data-aksrt-ticket-close-confirm/);
|
||||
assert.match(open, /value="closed" data-closed="1"/);
|
||||
assert.match(open, /<dt>工单号<\/dt><dd>TK-00021<\/dd>/);
|
||||
assert.match(open, /data-aksrt-ticket-feedback/);
|
||||
assert.match(closed, /data-aksrt-ticket-detail="99"/);
|
||||
assert.match(closed, /aksrt-ticket-detail__closed/);
|
||||
assert.match(closed, /data-aksrt-ticket-form="note"/);
|
||||
assert.doesNotMatch(closed, /data-aksrt-ticket-form="(?:reply|status)"/);
|
||||
for (const html of [open, closed]) assert.doesNotMatch(html, /<dialog|data-aksrt-dialog-close/);
|
||||
});
|
||||
|
||||
test('result codes render as one native notice and unknown codes are ignored', () => {
|
||||
const { open, closed, bogus_notice: bogus } = rendered();
|
||||
assert.match(open, /<div class="notice notice-success is-dismissible"><p>回复已发送，用户将收到通知。<\/p><\/div>/);
|
||||
assert.doesNotMatch(closed, /notice-success/);
|
||||
assert.doesNotMatch(bogus, /class="notice\b/);
|
||||
assert.doesNotMatch(bogus, /<script>/);
|
||||
});
|
||||
|
||||
test('ticket information owns the only status editor and closed tickets stay read-only', () => {
|
||||
const { open, closed } = rendered();
|
||||
const sidebarCards = panel => {
|
||||
const sidebar = panel.match(/<aside\b[^>]*>([\s\S]*?)<\/aside>/)?.[1] || '';
|
||||
const sidebarCards = html => {
|
||||
const sidebar = html.match(/<aside\b[^>]*>([\s\S]*?)<\/aside>/)?.[1] || '';
|
||||
return [...sidebar.matchAll(/<section class="aksrt-ticket-detail__card(?: [^"]+)?">([\s\S]*?)<\/section>/g)].map(match => match[1]);
|
||||
};
|
||||
const cards = sidebarCards(open.data.panel);
|
||||
const cards = sidebarCards(open);
|
||||
assert.equal(cards.length, 2, 'only ticket information and internal notes remain');
|
||||
const info = cards[0];
|
||||
assert.match(info, /<h3>工单信息<\/h3>/);
|
||||
assert.match(info, /data-aksrt-ticket-form="status"/);
|
||||
assert.match(info, /data-aksrt-ticket-assign/);
|
||||
assert.match(info, /保存工单信息/);
|
||||
assert.doesNotMatch(open.data.panel, /<h3[^>]*>处理工单<\/h3>/);
|
||||
assert.doesNotMatch(info, /aksrt-ticket-badge/);
|
||||
for (const [name, label] of [['status', '状态'], ['ticket_type_id', '部门'], ['admin_id', '跟进人']]) {
|
||||
const id = `aksrt-ticket-${name}-21`;
|
||||
assert.ok(info.includes(`<label for="${id}">${label}</label>`));
|
||||
assert.ok(info.includes(`<select id="${id}" name="${name}"`));
|
||||
assert.equal((open.data.panel.match(new RegExp(`name="${name}"`, 'g')) || []).length, 1);
|
||||
assert.equal((open.match(new RegExp(`name="${name}"`, 'g')) || []).length, 1);
|
||||
}
|
||||
assert.match(cards[1], /内部备注/);
|
||||
const closedInfo = sidebarCards(closed.data.panel)[0];
|
||||
const closedInfo = sidebarCards(closed)[0];
|
||||
assert.match(closedInfo, /<h3>工单信息<\/h3>/);
|
||||
assert.match(closedInfo, /aksrt-ticket-badge/);
|
||||
assert.doesNotMatch(closedInfo, /<form|<select|data-aksrt-ticket-assign|保存工单信息/);
|
||||
});
|
||||
|
||||
test('read handler enforces capability, nonce and record existence', () => {
|
||||
const { missing, denied, nonce } = rendered();
|
||||
assert.equal(missing.status, 404);
|
||||
assert.equal(denied.status, 403);
|
||||
assert.equal(nonce.status, 403);
|
||||
for (const result of [missing, denied, nonce]) {
|
||||
assert.equal(result.success, false);
|
||||
assert.equal(result.data.panel, undefined);
|
||||
assert.equal(result.data.list, undefined);
|
||||
}
|
||||
test('missing ticket renders an empty state with a way back and no forms', () => {
|
||||
const { missing } = rendered();
|
||||
assert.match(missing, /工单不存在/);
|
||||
assert.match(missing, /返回工单列表/);
|
||||
assert.doesNotMatch(missing, /data-aksrt-ticket-form|data-aksrt-ticket-detail/);
|
||||
});
|
||||
|
||||
test('create page is a full-page form that posts to REST and returns to the list context', () => {
|
||||
const { create } = rendered();
|
||||
assert.doesNotMatch(create, /<dialog|data-aksrt-dialog/);
|
||||
assert.match(create, /<form method="post" action="https:\/\/example.test\/wp-json\/aksrt\/v1\/admin\/tickets" class="aksrt-tickets-admin__create-form" data-aksrt-ticket-form="create">/);
|
||||
for (const name of ['user_id', 'ticket_type_id', 'title', 'order_number', 'content']) assert.ok(create.includes(`name="${name}"`), name);
|
||||
assert.match(create, /data-aksrt-ticket-feedback/);
|
||||
const back = /href="[^"]*page=aksrt_tickets&status=pending&paged=2"/g;
|
||||
assert.equal((create.match(back) || []).length, 2, 'header back link and cancel both keep the list context');
|
||||
});
|
||||
|
||||
test('real rendering escapes user content, quotes and metadata', () => {
|
||||
const { html, open } = rendered();
|
||||
const all = html + open.data.panel;
|
||||
const { list, open } = rendered();
|
||||
const all = list + open;
|
||||
assert.match(all, /Question <svg onload=alert\(1\)>/);
|
||||
assert.match(all, /Description <script>alert\(1\)<\/script>/);
|
||||
assert.match(all, /Secret <script>alert\(1\)<\/script>/);
|
||||
@@ -103,6 +115,7 @@ test('missing departments and disabled order links have explicit creation states
|
||||
assert.match(noTypes, /尚未配置工单部门/);
|
||||
assert.doesNotMatch(noTypes, /data-aksrt-ticket-form="create"/);
|
||||
assert.match(noTypes, /前往工单配置/);
|
||||
assert.match(noOrders, /data-aksrt-ticket-form="create"/);
|
||||
assert.doesNotMatch(noOrders, /name="order_number"/);
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,344 @@
|
||||
'use strict';
|
||||
|
||||
const assert = require('node:assert/strict');
|
||||
const fs = require('node:fs');
|
||||
const path = require('node:path');
|
||||
const test = require('node:test');
|
||||
const vm = require('node:vm');
|
||||
|
||||
const scriptPath = path.resolve(__dirname, '../../assets/js/admin-tickets.js');
|
||||
const strings = { saving: 'Saving', saveFailed: 'Save failed', uncertain: 'Unknown result', required: 'Required', tooLong: 'Too long' };
|
||||
const REST = 'https://site.test/wp-json/aksrt/v1/admin/tickets';
|
||||
|
||||
function makeRuntime({ href = 'https://site.test/wp-admin/users.php?page=aksrt_tickets&id=41', page = 'detail', storage = {} } = {}) {
|
||||
const ids = new Map();
|
||||
const document = { activeElement: null };
|
||||
|
||||
class Element {
|
||||
constructor(tag, attrs = {}) {
|
||||
this.tagName = tag.toUpperCase();
|
||||
this.attrs = { ...attrs };
|
||||
this.dataset = {};
|
||||
for (const [name, value] of Object.entries(attrs)) {
|
||||
const match = name.match(/^data-(.+)$/);
|
||||
if (match) this.dataset[match[1].replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = String(value);
|
||||
}
|
||||
this.children = [];
|
||||
this.parentElement = null;
|
||||
this.listeners = {};
|
||||
this.id = attrs.id || '';
|
||||
this.name = attrs.name || '';
|
||||
this.type = attrs.type || (this.tagName === 'TEXTAREA' ? 'textarea' : '');
|
||||
this.action = attrs.action || '';
|
||||
this.required = Object.hasOwn(attrs, 'required');
|
||||
this.hidden = Object.hasOwn(attrs, 'hidden');
|
||||
this.maxLength = attrs.maxlength === undefined ? -1 : Number(attrs.maxlength);
|
||||
this.disabled = false;
|
||||
this.checked = false;
|
||||
this.validity = '';
|
||||
this.textContent = '';
|
||||
this.selectionStart = 0;
|
||||
this.selectionEnd = 0;
|
||||
this.scrollTop = 0;
|
||||
this.scrollHeight = 100;
|
||||
this.clientHeight = 40;
|
||||
this._value = String(attrs.value ?? '');
|
||||
this.selectedIndex = 0;
|
||||
const classes = new Set(String(attrs.class || '').split(/\s+/).filter(Boolean));
|
||||
this.classList = {
|
||||
contains: (name) => classes.has(name),
|
||||
toggle: (name, on) => { if (on) classes.add(name); else classes.delete(name); },
|
||||
};
|
||||
if (this.id) ids.set(this.id, this);
|
||||
}
|
||||
get options() { return this.children.filter((child) => child.tagName === 'OPTION'); }
|
||||
get value() { return this.tagName === 'SELECT' ? this.options[this.selectedIndex]?.value ?? '' : this._value; }
|
||||
set value(value) {
|
||||
this._value = String(value);
|
||||
if (this.tagName === 'SELECT') this.selectedIndex = this.options.findIndex((option) => option.value === this._value);
|
||||
}
|
||||
get form() { return this.closest('form'); }
|
||||
append(child) { child.parentElement = this; this.children.push(child); return child; }
|
||||
addEventListener(type, callback) { (this.listeners[type] ||= []).push(callback); }
|
||||
fire(type, values = {}) {
|
||||
const event = { target: this, defaultPrevented: false, preventDefault() { this.defaultPrevented = true; }, ...values };
|
||||
(this.listeners[type] || []).forEach((callback) => callback(event));
|
||||
return event;
|
||||
}
|
||||
querySelectorAll(selector) {
|
||||
const parts = expandIs(selector).split(',').map((part) => part.trim()).filter(Boolean);
|
||||
const found = new Set();
|
||||
const visit = (node) => node.children.forEach((child) => {
|
||||
if (parts.some((part) => matches(child, part))) found.add(child);
|
||||
visit(child);
|
||||
});
|
||||
visit(this);
|
||||
return [...found];
|
||||
}
|
||||
querySelector(selector) { return this.querySelectorAll(selector)[0] || null; }
|
||||
closest(selector) {
|
||||
for (let node = this; node; node = node.parentElement) if (node.matches(selector)) return node;
|
||||
return null;
|
||||
}
|
||||
matches(selector) { return expandIs(selector).split(',').some((part) => matches(this, part.trim())); }
|
||||
getAttribute(name) { return this.attrs[name] ?? null; }
|
||||
setAttribute(name, value) { this.attrs[name] = String(value); }
|
||||
focus() { document.activeElement = this; }
|
||||
setCustomValidity(message) { this.validity = message; }
|
||||
setSelectionRange(start, end) { this.selectionStart = start; this.selectionEnd = end; }
|
||||
reportValidity() {
|
||||
return this.querySelectorAll('input, select, textarea').every((control) => {
|
||||
if (control.validity) return false;
|
||||
if (!control.required) return true;
|
||||
return control.type === 'checkbox' ? control.checked : control.value.trim() !== '';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 把 `A :is(x, y), B` 展开成 `A x, B, A y, B`；结果去重。
|
||||
function expandIs(selector) {
|
||||
const match = selector.match(/^(.*?):is\(([^)]*)\)(.*)$/);
|
||||
return match ? match[2].split(',').map((part) => match[1] + part.trim() + match[3]).join(', ') : selector;
|
||||
}
|
||||
|
||||
function matches(element, selector) {
|
||||
const parts = selector.split(/\s+/);
|
||||
if (!matchesSimple(element, parts.pop())) return false;
|
||||
let ancestor = element.parentElement;
|
||||
while (parts.length) {
|
||||
const part = parts.pop();
|
||||
while (ancestor && !matchesSimple(ancestor, part)) ancestor = ancestor.parentElement;
|
||||
if (!ancestor) return false;
|
||||
ancestor = ancestor.parentElement;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function matchesSimple(element, selector) {
|
||||
const tag = selector.match(/^[a-z][\w-]*/i)?.[0];
|
||||
if (tag && element.tagName !== tag.toUpperCase()) return false;
|
||||
for (const [, className] of selector.matchAll(/\.([\w-]+)/g)) if (!element.classList.contains(className)) return false;
|
||||
for (const [, name, expected] of selector.matchAll(/\[([^\]=]+)(?:="([^"]*)")?\]/g)) {
|
||||
if (!Object.hasOwn(element.attrs, name)) return false;
|
||||
if (expected !== undefined && String(element.attrs[name]) !== expected) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
const el = (tag, attrs, parent) => parent.append(new Element(tag, attrs));
|
||||
const select = (parent, attrs, choices, selected = '') => {
|
||||
const node = el('select', attrs, parent);
|
||||
choices.forEach(([value, extra = {}]) => el('option', { value, ...extra }, node));
|
||||
node.value = selected;
|
||||
return node;
|
||||
};
|
||||
|
||||
const root = new Element('div', { class: 'aksrt-tickets-admin' });
|
||||
const feedback = el('div', { 'data-aksrt-ticket-feedback': '', hidden: '' }, root);
|
||||
el('p', {}, feedback);
|
||||
el('button', { type: 'button', 'data-aksrt-ticket-reload': '', hidden: '' }, feedback);
|
||||
const nodes = { root, feedback };
|
||||
|
||||
if (page === 'detail') {
|
||||
const detail = el('div', { 'data-aksrt-ticket-detail': '41' }, root);
|
||||
nodes.latest = el('button', { type: 'button', 'data-aksrt-ticket-latest': '', hidden: '' }, detail);
|
||||
nodes.conversation = el('div', { class: 'aksrt-ticket-conversation__scroll' }, detail);
|
||||
const reply = nodes.reply = el('form', { action: `${REST}/41/reply`, 'data-aksrt-ticket-form': 'reply' }, detail);
|
||||
nodes.replyText = el('textarea', { id: 'aksrt-ticket-reply-41', name: 'content', required: '', maxlength: '24', 'data-aksrt-ticket-editor': '' }, reply);
|
||||
nodes.replyCount = el('span', { 'data-aksrt-ticket-counter': 'aksrt-ticket-reply-41' }, reply);
|
||||
nodes.prereply = select(reply, { 'data-aksrt-ticket-prereply': 'aksrt-ticket-reply-41' }, [[''], ['short'], ['01234567890123456789012345']]);
|
||||
el('button', { type: 'submit' }, reply);
|
||||
const section = el('section', {}, detail);
|
||||
nodes.assign = el('button', { type: 'button', 'data-aksrt-ticket-assign': '' }, section);
|
||||
const status = nodes.status = el('form', { action: `${REST}/41/status`, 'data-aksrt-ticket-form': 'status' }, section);
|
||||
nodes.statusSelect = select(status, { name: 'status', 'data-aksrt-ticket-status': '' }, [['pending', { 'data-closed': '0' }], ['handling', { 'data-closed': '0' }], ['closed', { 'data-closed': '1' }]], 'pending');
|
||||
select(status, { name: 'ticket_type_id', required: '' }, [['3'], ['6']], '3');
|
||||
nodes.admin = select(status, { name: 'admin_id' }, [['0'], ['7'], ['44']], '7');
|
||||
nodes.warning = el('div', { 'data-aksrt-ticket-close-warning': '', hidden: '' }, status);
|
||||
nodes.confirm = el('input', { type: 'checkbox', 'data-aksrt-ticket-close-confirm': '' }, nodes.warning);
|
||||
nodes.statusSubmit = el('button', { type: 'submit' }, status);
|
||||
const note = nodes.note = el('form', { action: `${REST}/41/notes`, 'data-aksrt-ticket-form': 'note' }, detail);
|
||||
nodes.noteText = el('textarea', { id: 'aksrt-ticket-note-41', name: 'content', required: '', maxlength: '24', 'data-aksrt-ticket-editor': '' }, note);
|
||||
el('button', { type: 'submit' }, note);
|
||||
} else {
|
||||
const create = nodes.create = el('form', { action: REST, 'data-aksrt-ticket-form': 'create' }, root);
|
||||
el('input', { type: 'number', name: 'user_id', required: '' }, create);
|
||||
select(create, { name: 'ticket_type_id', required: '' }, [[''], ['3']], '');
|
||||
el('input', { type: 'text', name: 'title', required: '' }, create);
|
||||
el('textarea', { id: 'aksrt-ticket-create-content', name: 'content', required: '', maxlength: '500', 'data-aksrt-ticket-editor': '' }, create);
|
||||
el('button', { type: 'submit' }, create);
|
||||
}
|
||||
|
||||
document.querySelector = (selector) => (selector === '.aksrt-tickets-admin' ? root : null);
|
||||
document.getElementById = (id) => ids.get(id) || null;
|
||||
|
||||
const store = new Map(Object.entries(storage));
|
||||
const window = new Element('window');
|
||||
Object.assign(window, {
|
||||
AKSRTAdminTickets: { restNonce: 'rest-nonce', currentUser: 44, strings },
|
||||
location: { href, assigned: null, reloads: 0, assign(url) { this.assigned = url; }, reload() { this.reloads += 1; } },
|
||||
history: { state: null, replaceState(_state, _title, url) { window.location.href = url; } },
|
||||
sessionStorage: { getItem: (key) => store.get(key) ?? null, setItem: (key, value) => store.set(key, String(value)), removeItem: (key) => store.delete(key) },
|
||||
});
|
||||
|
||||
const fetchCalls = [];
|
||||
const fetch = (url, options) => new Promise((resolve, reject) => fetchCalls.push({ url, options, resolve, reject }));
|
||||
vm.runInNewContext(fs.readFileSync(scriptPath, 'utf8'), { document, window, fetch, URL, AbortController, setTimeout, clearTimeout }, { filename: scriptPath });
|
||||
return { ...nodes, document, window, store, fetchCalls };
|
||||
}
|
||||
|
||||
const reply = (data, status = 200) => ({ ok: status >= 200 && status < 300, status, json: async () => data });
|
||||
const tick = () => new Promise((resolve) => setTimeout(resolve, 5));
|
||||
const type = (rt, field, value) => { field.value = value; rt.root.fire('input', { target: field }); };
|
||||
const submit = (rt, form) => rt.root.fire('submit', { target: form });
|
||||
const unload = (rt) => rt.window.fire('beforeunload', { returnValue: undefined });
|
||||
|
||||
test('a successful reply posts JSON to REST, then reloads the workspace with a result code and stashes other drafts', async () => {
|
||||
const rt = makeRuntime({ href: 'https://site.test/wp-admin/users.php?page=aksrt_tickets&id=41&status=pending&paged=3' });
|
||||
type(rt, rt.noteText, 'pending note');
|
||||
type(rt, rt.replyText, 'hello');
|
||||
const event = submit(rt, rt.reply);
|
||||
assert.equal(event.defaultPrevented, true);
|
||||
assert.equal(rt.fetchCalls.length, 1);
|
||||
const call = rt.fetchCalls[0];
|
||||
assert.equal(call.url, `${REST}/41/reply`);
|
||||
assert.equal(call.options.method, 'POST');
|
||||
assert.equal(call.options.headers['X-WP-Nonce'], 'rest-nonce');
|
||||
assert.deepEqual(JSON.parse(call.options.body), { content: 'hello' });
|
||||
assert.equal(rt.replyText.disabled, true, 'form locked while saving');
|
||||
submit(rt, rt.reply);
|
||||
assert.equal(rt.fetchCalls.length, 1, 'duplicate submit ignored');
|
||||
|
||||
call.resolve(reply({ success: true, data: { reply_id: 9 } }));
|
||||
await tick();
|
||||
const next = new URL(rt.window.location.assigned);
|
||||
assert.equal(next.searchParams.get('id'), '41');
|
||||
assert.equal(next.searchParams.get('aksrt_ticket_msg'), 'reply');
|
||||
assert.equal(next.searchParams.get('status'), 'pending');
|
||||
assert.equal(next.searchParams.get('paged'), '3');
|
||||
assert.deepEqual(JSON.parse(rt.store.get('aksrt-ticket-drafts-41')), { note: { content: 'pending note' } });
|
||||
assert.equal(unload(rt).defaultPrevented, false, 'navigation after save is not blocked');
|
||||
});
|
||||
|
||||
test('after the reload, stashed drafts are restored once and the result code is stripped from the URL', () => {
|
||||
const rt = makeRuntime({
|
||||
href: 'https://site.test/wp-admin/users.php?page=aksrt_tickets&id=41&aksrt_ticket_msg=reply',
|
||||
storage: { 'aksrt-ticket-drafts-41': JSON.stringify({ note: { content: 'keep me' } }) },
|
||||
});
|
||||
assert.equal(rt.noteText.value, 'keep me');
|
||||
assert.equal(rt.store.has('aksrt-ticket-drafts-41'), false);
|
||||
assert.equal(new URL(rt.window.location.href).searchParams.has('aksrt_ticket_msg'), false);
|
||||
assert.equal(new URL(rt.window.location.href).searchParams.get('id'), '41');
|
||||
assert.equal(unload(rt).defaultPrevented, true, 'a restored draft still counts as unsaved');
|
||||
});
|
||||
|
||||
test('create posts to the collection route and opens the new ticket workspace with the list context kept', async () => {
|
||||
const rt = makeRuntime({ page: 'create', href: 'https://site.test/wp-admin/users.php?page=aksrt_tickets&view=new&status=pending&paged=2' });
|
||||
const form = rt.create;
|
||||
form.querySelector('[name="user_id"]').value = '12';
|
||||
form.querySelector('[name="ticket_type_id"]').value = '3';
|
||||
type(rt, form.querySelector('[name="title"]'), 'Login fails');
|
||||
type(rt, form.querySelector('[name="content"]'), 'Details');
|
||||
submit(rt, form);
|
||||
assert.equal(rt.fetchCalls[0].url, REST);
|
||||
assert.deepEqual(JSON.parse(rt.fetchCalls[0].options.body), { user_id: '12', ticket_type_id: '3', title: 'Login fails', content: 'Details' });
|
||||
rt.fetchCalls[0].resolve(reply({ success: true, data: { id: 77 } }));
|
||||
await tick();
|
||||
const next = new URL(rt.window.location.assigned);
|
||||
assert.equal(next.searchParams.has('view'), false);
|
||||
assert.equal(next.searchParams.get('id'), '77');
|
||||
assert.equal(next.searchParams.get('aksrt_ticket_msg'), 'created');
|
||||
assert.equal(next.searchParams.get('status'), 'pending');
|
||||
assert.equal(next.searchParams.get('paged'), '2');
|
||||
});
|
||||
|
||||
test('whitespace-only content is rejected before any request', () => {
|
||||
const rt = makeRuntime();
|
||||
type(rt, rt.replyText, ' ');
|
||||
submit(rt, rt.reply);
|
||||
assert.equal(rt.fetchCalls.length, 0);
|
||||
assert.equal(rt.replyText.validity, strings.required);
|
||||
});
|
||||
|
||||
test('a confirmed validation error keeps the form editable and shows the server message without a reload button', async () => {
|
||||
const rt = makeRuntime();
|
||||
type(rt, rt.replyText, 'hello');
|
||||
submit(rt, rt.reply);
|
||||
rt.fetchCalls[0].resolve(reply({ code: 'aksrt_ticket_reply_content', message: 'Bad content', data: { status: 400 } }, 400));
|
||||
await tick();
|
||||
assert.equal(rt.window.location.assigned, null);
|
||||
assert.equal(rt.feedback.hidden, false);
|
||||
assert.equal(rt.feedback.querySelector('p').textContent, 'Bad content');
|
||||
assert.equal(rt.feedback.querySelector('[data-aksrt-ticket-reload]').hidden, true);
|
||||
assert.equal(rt.replyText.disabled, false);
|
||||
assert.equal(rt.replyText.value, 'hello');
|
||||
submit(rt, rt.reply);
|
||||
assert.equal(rt.fetchCalls.length, 2, 'retry allowed after a confirmed failure');
|
||||
});
|
||||
|
||||
for (const [label, settle] of [
|
||||
['an unknown network result', (call) => call.reject(new TypeError('network'))],
|
||||
['a 409 state conflict', (call) => call.resolve(reply({ code: 'aksrt_ticket_closed', message: 'Closed', data: { status: 409 } }, 409))],
|
||||
['a 404 missing ticket', (call) => call.resolve(reply({ code: 'aksrt_ticket_missing', message: 'Missing', data: { status: 404 } }, 404))],
|
||||
]) {
|
||||
test(`${label} locks every write form and only offers a page reload`, async () => {
|
||||
const rt = makeRuntime();
|
||||
type(rt, rt.replyText, 'hello');
|
||||
submit(rt, rt.reply);
|
||||
settle(rt.fetchCalls[0]);
|
||||
await tick();
|
||||
const reload = rt.feedback.querySelector('[data-aksrt-ticket-reload]');
|
||||
assert.equal(reload.hidden, false);
|
||||
for (const control of [rt.replyText, rt.noteText, rt.statusSelect, rt.statusSubmit, rt.assign]) assert.equal(control.disabled, true);
|
||||
submit(rt, rt.note);
|
||||
assert.equal(rt.fetchCalls.length, 1, 'no write after the result became uncertain');
|
||||
rt.root.fire('click', { target: reload });
|
||||
assert.equal(rt.window.location.reloads, 1);
|
||||
assert.equal(unload(rt).defaultPrevented, false, 'the explicit reload is not blocked');
|
||||
});
|
||||
}
|
||||
|
||||
test('closing requires the confirmation checkbox', async () => {
|
||||
const rt = makeRuntime();
|
||||
rt.statusSelect.value = 'handling';
|
||||
rt.root.fire('change', { target: rt.statusSelect });
|
||||
assert.equal(rt.warning.hidden, true);
|
||||
rt.statusSelect.value = 'closed';
|
||||
rt.root.fire('change', { target: rt.statusSelect });
|
||||
assert.equal(rt.warning.hidden, false);
|
||||
assert.equal(rt.confirm.required, true);
|
||||
submit(rt, rt.status);
|
||||
assert.equal(rt.fetchCalls.length, 0);
|
||||
rt.confirm.checked = true;
|
||||
submit(rt, rt.status);
|
||||
assert.deepEqual(JSON.parse(rt.fetchCalls[0].options.body), { status: 'closed', ticket_type_id: '3', admin_id: '7' });
|
||||
});
|
||||
|
||||
test('“assign to me” selects the current admin, moves pending to handling and focuses save', () => {
|
||||
const rt = makeRuntime();
|
||||
rt.root.fire('click', { target: rt.assign });
|
||||
assert.equal(rt.admin.value, '44');
|
||||
assert.equal(rt.statusSelect.value, 'handling');
|
||||
assert.equal(rt.document.activeElement, rt.statusSubmit);
|
||||
assert.equal(rt.fetchCalls.length, 0, 'assigning only fills the form');
|
||||
});
|
||||
|
||||
test('an overlong prereply is rejected without changing the editor; a fitting one is inserted', () => {
|
||||
const rt = makeRuntime();
|
||||
rt.prereply.value = '01234567890123456789012345';
|
||||
rt.root.fire('change', { target: rt.prereply });
|
||||
assert.equal(rt.replyText.value, '');
|
||||
assert.equal(rt.feedback.querySelector('p').textContent, strings.tooLong);
|
||||
assert.equal(rt.prereply.value, '');
|
||||
rt.prereply.value = 'short';
|
||||
rt.root.fire('change', { target: rt.prereply });
|
||||
assert.equal(rt.replyText.value, 'short');
|
||||
assert.equal(rt.replyCount.textContent, '5 / 24');
|
||||
});
|
||||
|
||||
test('leaving with unsaved input is guarded; a clean page leaves freely', () => {
|
||||
const rt = makeRuntime();
|
||||
assert.equal(unload(rt).defaultPrevented, false);
|
||||
type(rt, rt.replyText, 'draft');
|
||||
assert.equal(unload(rt).defaultPrevented, true);
|
||||
});
|
||||
@@ -10,39 +10,39 @@ const read = file => fs.readFileSync(path.join(root, file), 'utf8');
|
||||
const center = read('src/Admin/Native/UsersMenusTicketsCenter.php');
|
||||
const list = read('src/Admin/Native/UsersMenusTicketsList.php');
|
||||
const detail = read('src/Admin/Native/UsersMenusTicketsDetail.php');
|
||||
const dialogs = read('src/Admin/Native/UsersMenusTicketsDialogs.php');
|
||||
const create = read('src/Admin/Native/UsersMenusTicketsCreate.php');
|
||||
const menus = read('src/Admin/Native/UsersMenus.php');
|
||||
const js = read('assets/js/admin-tickets.js');
|
||||
const css = read('assets/css/admin/tickets.css');
|
||||
|
||||
test('ticket native page registers only a protected read action; writes reuse REST', () => {
|
||||
test('ticket native page registers no AJAX read; writes reuse REST', () => {
|
||||
assert.match(menus, /use UsersMenusTicketsCenter;/);
|
||||
assert.match(menus, /'users.php',[\s\S]*?'aksrt_tickets'/);
|
||||
assert.match(menus, /add_action\('wp_ajax_aksrt_ticket_view', \[\$this, 'ajax_ticket_view'\]\)/);
|
||||
assert.match(center, /current_user_can\(self::CAPABILITY\)/);
|
||||
assert.match(center, /check_ajax_referer\('aksrt_ticket_view', 'nonce', false\)/);
|
||||
assert.doesNotMatch(menus + center, /wp_ajax_aksrt_ticket_view|ajax_ticket_view|aksrt_ticket_view/);
|
||||
assert.match(center, /wp_create_nonce\('wp_rest'\)/);
|
||||
assert.match(center, /rest_url\('aksrt\/v1\/admin\/tickets' \./);
|
||||
assert.match(js, /'X-WP-Nonce': config.restNonce/);
|
||||
assert.doesNotMatch(menus, /admin_post_aksrt_ticket_update/);
|
||||
assert.doesNotMatch(center, /function (handle_ticket_update|ticket_action_\w+|ticket_redirect|render_ticket_notices)/);
|
||||
assert.doesNotMatch(center, /function (handle_ticket_update|ticket_action_\w+|ticket_redirect)/);
|
||||
assert.match(menus, /count_pending_tickets\(\)/);
|
||||
assert.match(menus, /TicketSettings::enabled\(\)/);
|
||||
});
|
||||
|
||||
test('create is a primary header dialog action, not an inline or collapsed form', () => {
|
||||
assert.match(center, /'label' => __\('代客提交工单', 'aksrt'\),\s*'dialog' => 'aksrt-ticket-create-dialog',\s*'primary' => true/);
|
||||
assert.match(center, /use UsersMenusTicketsDialogs;/);
|
||||
assert.match(dialogs, /<dialog id="aksrt-ticket-create-dialog"/);
|
||||
assert.match(dialogs, /<dialog id="aksrt-ticket-detail-dialog"/);
|
||||
assert.doesNotMatch(list, /ticket_form_open\('create'|<details|render_ticket_detail_panel/);
|
||||
assert.doesNotMatch(detail, /admin-post\.php|wp_nonce_field/);
|
||||
assert.match(dialogs, /aria-labelledby="aksrt-ticket-create-title"/);
|
||||
assert.match(js, /typeof detailDialog.showModal/);
|
||||
test('list, workspace and create are page views, never dialogs', () => {
|
||||
assert.match(center, /use UsersMenusTicketsCreate;/);
|
||||
assert.doesNotMatch(center, /UsersMenusTicketsDialogs/);
|
||||
assert.ok(!fs.existsSync(path.join(root, 'src/Admin/Native/UsersMenusTicketsDialogs.php')));
|
||||
assert.match(center, /render_ticket_detail_page\(\$id,/);
|
||||
assert.match(center, /\$view === 'new'/);
|
||||
assert.match(list, /'url' => \$this->ticket_page_url\(\['view' => 'new'\]/);
|
||||
assert.match(list, /ticket_page_url\(\['id' => \$id\] \+ \$context\)/);
|
||||
assert.match(create, /ticket_form_open\('create', 0,/);
|
||||
assert.doesNotMatch(center + list + detail + create + js + css, /<dialog|showModal|data-aksrt-dialog|aksrt-ticket-dialog|aksrt-ticket-modal-open/);
|
||||
});
|
||||
|
||||
test('detail lookup is independent of the filtered list; paging clamps and preserves filters', () => {
|
||||
assert.match(center, /TicketRepository::get_instance\(\)->find\(\$id\)/);
|
||||
assert.match(center, /wp_send_json_error\(\['message' => __\('工单不存在或已被删除。', 'aksrt'\)\], 404\)/);
|
||||
assert.match(detail, /TicketRepository::get_instance\(\)->find\(\$id\)/);
|
||||
assert.match(detail, /工单不存在/);
|
||||
assert.match(list, /AdminListPagination::render\(/);
|
||||
assert.match(list, /'limit' => self::TICKET_PER_PAGE/);
|
||||
assert.match(center, /private const TICKET_PER_PAGE = 20;/);
|
||||
@@ -50,9 +50,7 @@ test('detail lookup is independent of the filtered list; paging clamps and prese
|
||||
assert.match(list, /array_merge\(\$filters, \['status' => \$key\]\)/);
|
||||
assert.match(list, /'keywords' => \$filters\['s'\]/);
|
||||
assert.match(list, /'status' => array_column\(\$statuses, 'status_key'\)/);
|
||||
assert.match(js, /\['status', 'ticket_type_id', 's', 'paged'\]/);
|
||||
assert.match(js, /searchParams.get\('id'\)/);
|
||||
assert.doesNotMatch(list + js, /aria-expanded|detail-row|scrollIntoView/);
|
||||
assert.match(center, /function ticket_context\(/);
|
||||
});
|
||||
|
||||
test('conversation, private notes and final-state confirmation remain distinct', () => {
|
||||
@@ -69,27 +67,22 @@ test('conversation, private notes and final-state confirmation remain distinct',
|
||||
assert.match(detail, /仅管理员可见，不会发送给用户/);
|
||||
});
|
||||
|
||||
test('dialog safety includes dirty guards, focus return, cancel race protection and retry without POST', () => {
|
||||
assert.match(js, /window.confirm\(strings.discard\)/);
|
||||
test('page safety: unsaved-change guard, drafts survive the post-save reload, uncertain writes lock forms', () => {
|
||||
assert.match(js, /window.addEventListener\('beforeunload'/);
|
||||
assert.match(js, /current !== generation/);
|
||||
assert.match(js, /readController.abort\(\)/);
|
||||
assert.match(js, /previous.focus\(\)/);
|
||||
assert.match(js, /if \(saving \|\| loading \|\| stale/);
|
||||
assert.match(js, /sessionStorage/);
|
||||
assert.match(js, /aksrt_ticket_msg/);
|
||||
assert.match(js, /next.length > field.maxLength/);
|
||||
assert.match(js, /savedDrafts = restore \|\| \{\}/);
|
||||
assert.match(js, /strings.refreshFailed/);
|
||||
assert.match(js, /strings.uncertain/);
|
||||
const css = read('assets/css/admin/tickets.css');
|
||||
assert.match(css, /\.aksrt-ticket-dialog:not\(\[open\]\)/);
|
||||
assert.match(js, /\[401, 403, 404, 409\]/);
|
||||
assert.match(js, /lockForms\(\)/);
|
||||
assert.match(css, /:focus-visible/);
|
||||
assert.match(css, /@media \(prefers-reduced-motion: reduce\)/);
|
||||
assert.match(css, /@media \(max-width: 600px\)/);
|
||||
assert.doesNotMatch(css, /detail-row|row\.is-open/);
|
||||
assert.doesNotMatch(css, /detail-row|row\.is-open|::backdrop/);
|
||||
});
|
||||
|
||||
test('configuration remains in the SPA; native ops has no old config tabs', () => {
|
||||
assert.match(center, /admin_url\('admin\.php\?page=aksrt-settings#\/users\/ticket'\)/);
|
||||
assert.match(list, /admin_url\('admin\.php\?page=aksrt-settings#\/users\/ticket'\)/);
|
||||
assert.doesNotMatch(center + list + detail, /nav-tab-wrapper|ticket_tab|UsersMenusTicketsConfig/);
|
||||
assert.ok(!fs.existsSync(path.join(root, 'src/Admin/Native/UsersMenusTicketsConfig.php')));
|
||||
assert.ok(read('assets/admin/src/router/index.js').includes("{ path: '/users/tickets', title: '工单管理', nativeAdminPath: 'users.php?page=aksrt_tickets' }"));
|
||||
@@ -109,6 +102,6 @@ test('frontend hooks remain aligned with their independent REST consumer', () =>
|
||||
}
|
||||
assert.match(frontend, /runCaptcha\('ticket_create'\)/);
|
||||
assert.match(frontend, /runCaptcha\('ticket_reply'\)/);
|
||||
const css = read('assets/css/routes/tickets.css');
|
||||
for (const hook of ['.aksrt-tickets-page', '.aksrt-ticket-badge', '.aksrt-ticket-detail', '--aksrt-ticket-color']) assert.ok(css.includes(hook));
|
||||
const routeCss = read('assets/css/routes/tickets.css');
|
||||
for (const hook of ['.aksrt-tickets-page', '.aksrt-ticket-badge', '.aksrt-ticket-detail', '--aksrt-ticket-color']) assert.ok(routeCss.includes(hook));
|
||||
});
|
||||
Reference in new issue
Block a user