feat(admin): add routed task evidence details
This commit is contained in:
QiuSW
@@ -0,0 +1,211 @@
|
||||
"use strict";
|
||||
|
||||
const test = require("node:test");
|
||||
const assert = require("node:assert/strict");
|
||||
const fs = require("node:fs");
|
||||
const path = require("node:path");
|
||||
const vm = require("node:vm");
|
||||
|
||||
const source = fs.readFileSync(path.join(__dirname, "tasks.js"), "utf8");
|
||||
|
||||
test("visible button opens the same routed detail and close restores list state", async () => {
|
||||
const harness = createDrawerHarness();
|
||||
|
||||
harness.button.listeners.click();
|
||||
await harness.flush();
|
||||
|
||||
assert.equal(harness.requests.length, 1);
|
||||
assert.equal(harness.requests[0].url, "/tasks/a3c9f507-7473-4fa6-8d71-8786c34c6301");
|
||||
assert.equal(harness.requests[0].options.headers["X-CMBuyer-View"], "drawer");
|
||||
assert.equal(harness.drawer.open, true);
|
||||
assert.equal(harness.closeButton.focused, true);
|
||||
assert.equal(harness.history.pushes.length, 1);
|
||||
assert.equal(harness.history.pushes[0].url, harness.requests[0].url);
|
||||
assert.equal(harness.history.pushes[0].state.focusTarget, "button");
|
||||
|
||||
harness.closeButton.listeners.click();
|
||||
assert.equal(harness.history.backCalls, 1);
|
||||
harness.popstate({state: {cmbuyerList: true}});
|
||||
assert.equal(harness.drawer.open, false);
|
||||
assert.equal(harness.button.focused, true);
|
||||
assert.equal(harness.row.focused, false);
|
||||
assert.equal(harness.scrolls.length, 1);
|
||||
assert.equal(harness.scrolls[0].top, 275);
|
||||
assert.equal(harness.scrolls[0].behavior, "auto");
|
||||
});
|
||||
|
||||
test("button focus target survives back, forward, and back again", async () => {
|
||||
const harness = createDrawerHarness();
|
||||
harness.button.listeners.click();
|
||||
await harness.flush();
|
||||
const drawerState = harness.history.pushes[0].state;
|
||||
|
||||
harness.popstate({state: {cmbuyerList: true}});
|
||||
assert.equal(harness.button.focusCalls, 1);
|
||||
assert.equal(harness.row.focusCalls, 0);
|
||||
|
||||
harness.popstate({state: drawerState});
|
||||
await harness.flush();
|
||||
assert.equal(harness.drawer.open, true);
|
||||
assert.equal(harness.history.pushes.length, 1);
|
||||
|
||||
harness.popstate({state: {cmbuyerList: true}});
|
||||
assert.equal(harness.drawer.open, false);
|
||||
assert.equal(harness.button.focusCalls, 2);
|
||||
assert.equal(harness.row.focusCalls, 0);
|
||||
});
|
||||
|
||||
test("failed forward retry reuses history and closes back to button in one step", async () => {
|
||||
const harness = createDrawerHarness();
|
||||
harness.button.listeners.click();
|
||||
await harness.flush();
|
||||
const drawerState = harness.history.pushes[0].state;
|
||||
harness.popstate({state: {cmbuyerList: true}});
|
||||
|
||||
harness.failNextRequest();
|
||||
harness.popstate({state: drawerState});
|
||||
await harness.flush();
|
||||
const retry = harness.body.children[1].children[0];
|
||||
retry.listeners.click();
|
||||
await harness.flush();
|
||||
|
||||
assert.equal(harness.history.pushes.length, 1);
|
||||
assert.equal(harness.drawer.open, true);
|
||||
harness.closeButton.listeners.click();
|
||||
assert.equal(harness.history.backCalls, 1);
|
||||
harness.popstate({state: {cmbuyerList: true}});
|
||||
assert.equal(harness.drawer.open, false);
|
||||
assert.equal(harness.button.focusCalls, 2);
|
||||
assert.equal(harness.row.focusCalls, 0);
|
||||
});
|
||||
|
||||
test("double click and Enter open rows but nested controls never do", async () => {
|
||||
const harness = createDrawerHarness();
|
||||
const ignored = {closest: () => ({})};
|
||||
const rowTarget = {closest: () => null};
|
||||
|
||||
harness.row.listeners.dblclick({target: ignored});
|
||||
harness.row.listeners.dblclick({target: rowTarget});
|
||||
await harness.flush();
|
||||
assert.equal(harness.requests.length, 1);
|
||||
|
||||
harness.popstate({state: {cmbuyerList: true}});
|
||||
let prevented = false;
|
||||
harness.row.listeners.keydown({key: "Enter", target: harness.row, preventDefault: () => { prevented = true; }});
|
||||
await harness.flush();
|
||||
assert.equal(prevented, true);
|
||||
assert.equal(harness.requests.length, 2);
|
||||
|
||||
harness.row.listeners.keydown({key: "Enter", target: ignored, preventDefault: () => assert.fail("nested control Enter was intercepted")});
|
||||
assert.equal(harness.requests.length, 2);
|
||||
});
|
||||
|
||||
test("browser back and forward close and reopen without duplicating history", async () => {
|
||||
const harness = createDrawerHarness();
|
||||
harness.row.listeners.keydown({key: "Enter", target: harness.row, preventDefault() {}});
|
||||
await harness.flush();
|
||||
assert.equal(harness.history.pushes.length, 1);
|
||||
|
||||
harness.popstate({state: {cmbuyerList: true}});
|
||||
assert.equal(harness.drawer.open, false);
|
||||
harness.popstate({state: {cmbuyerDrawer: true, detailURL: harness.row.dataset.detailUrl}});
|
||||
await harness.flush();
|
||||
|
||||
assert.equal(harness.drawer.open, true);
|
||||
assert.equal(harness.requests.length, 2);
|
||||
assert.equal(harness.history.pushes.length, 1);
|
||||
});
|
||||
|
||||
test("Escape follows browser history and does not mutate list URL", async () => {
|
||||
const harness = createDrawerHarness();
|
||||
harness.button.listeners.click();
|
||||
await harness.flush();
|
||||
let prevented = false;
|
||||
|
||||
harness.drawer.listeners.cancel({preventDefault: () => { prevented = true; }});
|
||||
|
||||
assert.equal(prevented, true);
|
||||
assert.equal(harness.history.backCalls, 1);
|
||||
assert.equal(harness.history.replaces[0].url, "/tasks?status=DRAFT");
|
||||
});
|
||||
|
||||
function createDrawerHarness() {
|
||||
class FakeElement {
|
||||
constructor() {
|
||||
this.listeners = {};
|
||||
this.dataset = {};
|
||||
this.open = false;
|
||||
this.focused = false;
|
||||
this.focusCalls = 0;
|
||||
this.children = [];
|
||||
this._innerHTML = "";
|
||||
}
|
||||
addEventListener(type, listener) { this.listeners[type] = listener; }
|
||||
focus() { this.focused = true; this.focusCalls++; }
|
||||
showModal() { this.open = true; }
|
||||
close() { this.open = false; }
|
||||
replaceChildren(...children) { this.children = children; this._innerHTML = ""; }
|
||||
append(...children) { this.children.push(...children); }
|
||||
setAttribute() {}
|
||||
closest() { return null; }
|
||||
set innerHTML(value) { this._innerHTML = value; }
|
||||
get innerHTML() { return this._innerHTML; }
|
||||
}
|
||||
|
||||
const body = new FakeElement();
|
||||
const closeButton = new FakeElement();
|
||||
const button = new FakeElement();
|
||||
const row = new FakeElement();
|
||||
row.dataset.detailUrl = "/tasks/a3c9f507-7473-4fa6-8d71-8786c34c6301";
|
||||
row.querySelector = (selector) => selector === "[data-open-detail]" ? button : null;
|
||||
const drawer = new FakeElement();
|
||||
drawer.querySelector = (selector) => ({"[data-detail-body]": body, "[data-close-detail]": closeButton})[selector] || null;
|
||||
|
||||
const requests = [];
|
||||
const popstateListeners = [];
|
||||
const scrolls = [];
|
||||
let failNext = false;
|
||||
const history = {
|
||||
state: null,
|
||||
pushes: [],
|
||||
replaces: [],
|
||||
backCalls: 0,
|
||||
pushState(state, _title, url) { this.state = state; this.pushes.push({state, url}); },
|
||||
replaceState(state, _title, url) { this.state = state; this.replaces.push({state, url}); },
|
||||
back() { this.backCalls++; },
|
||||
};
|
||||
const document = {
|
||||
querySelector: (selector) => selector === "[data-start-purchases]" ? null : selector === "[data-detail-drawer]" ? drawer : null,
|
||||
querySelectorAll: (selector) => selector === "[data-task-row]" ? [row] : [],
|
||||
createElement: () => new FakeElement(),
|
||||
contains: (element) => element === row || element === button,
|
||||
};
|
||||
const window = {
|
||||
location: {pathname: "/tasks", search: "?status=DRAFT"},
|
||||
history,
|
||||
scrollY: 275,
|
||||
scrollTo: (value) => scrolls.push(value),
|
||||
addEventListener(type, listener) { if (type === "popstate") popstateListeners.push(listener); },
|
||||
};
|
||||
const context = {
|
||||
AbortController,
|
||||
document,
|
||||
window,
|
||||
fetch: async (url, options) => {
|
||||
requests.push({url, options});
|
||||
if (failNext) {
|
||||
failNext = false;
|
||||
return {ok: false, headers: {get: () => "text/html"}, text: async () => ""};
|
||||
}
|
||||
return {ok: true, headers: {get: () => "text/html; charset=utf-8"}, text: async () => '<article data-task-detail-content>详情</article>'};
|
||||
},
|
||||
};
|
||||
vm.runInNewContext(source, context, {filename: "tasks.js"});
|
||||
|
||||
return {
|
||||
body, button, closeButton, drawer, history, requests, row, scrolls,
|
||||
failNextRequest: () => { failNext = true; },
|
||||
popstate: (event) => { history.state = event.state; popstateListeners.forEach((listener) => listener(event)); },
|
||||
flush: () => new Promise((resolve) => setImmediate(resolve)),
|
||||
};
|
||||
}
|
||||
@@ -58,3 +58,110 @@
|
||||
});
|
||||
refresh();
|
||||
})();
|
||||
|
||||
(() => {
|
||||
"use strict";
|
||||
const drawer = document.querySelector("[data-detail-drawer]");
|
||||
if (!drawer) return;
|
||||
const body = drawer.querySelector("[data-detail-body]");
|
||||
const closeButton = drawer.querySelector("[data-close-detail]");
|
||||
const rows = [...document.querySelectorAll("[data-task-row]")];
|
||||
const initialURL = window.location.pathname + window.location.search;
|
||||
let focusTrigger = null;
|
||||
let scrollPosition = window.scrollY;
|
||||
let activeRequest = null;
|
||||
|
||||
const isInteractive = (target) => Boolean(target && typeof target.closest === "function" && target.closest("a,button,input,select,textarea,label,[contenteditable=true]"));
|
||||
const showDrawer = () => {
|
||||
if (!drawer.open) drawer.showModal();
|
||||
};
|
||||
const restoreList = () => {
|
||||
if (activeRequest) {
|
||||
activeRequest.abort();
|
||||
activeRequest = null;
|
||||
}
|
||||
if (drawer.open) drawer.close();
|
||||
window.scrollTo({top: scrollPosition, behavior: "auto"});
|
||||
if (focusTrigger && document.contains(focusTrigger)) focusTrigger.focus({preventScroll: true});
|
||||
};
|
||||
const showError = (url, row, requestedFocus, pushHistory) => {
|
||||
body.replaceChildren();
|
||||
const message = document.createElement("p");
|
||||
message.className = "drawer-feedback";
|
||||
message.setAttribute("role", "alert");
|
||||
message.textContent = "任务详情加载失败。请重试，或在完整页打开。";
|
||||
const actions = document.createElement("p");
|
||||
const retry = document.createElement("button");
|
||||
retry.className = "button primary";
|
||||
retry.type = "button";
|
||||
retry.textContent = "重试";
|
||||
retry.addEventListener("click", () => loadDetail(url, row, requestedFocus, pushHistory));
|
||||
const fallback = document.createElement("a");
|
||||
fallback.className = "button";
|
||||
fallback.href = url;
|
||||
fallback.textContent = "在完整页打开";
|
||||
actions.className = "actions";
|
||||
actions.append(retry, fallback);
|
||||
body.append(message, actions);
|
||||
};
|
||||
const loadDetail = async (url, row, requestedFocus, pushHistory) => {
|
||||
if (activeRequest) activeRequest.abort();
|
||||
const requestController = new AbortController();
|
||||
activeRequest = requestController;
|
||||
focusTrigger = requestedFocus || focusTrigger;
|
||||
if (pushHistory) scrollPosition = window.scrollY;
|
||||
body.innerHTML = '<p class="drawer-feedback" role="status">正在加载任务详情…</p>';
|
||||
showDrawer();
|
||||
try {
|
||||
const response = await fetch(url, {headers: {"X-CMBuyer-View": "drawer", "Accept": "text/html"}, credentials: "same-origin", signal: requestController.signal});
|
||||
if (!response.ok || !String(response.headers.get("Content-Type") || "").toLowerCase().startsWith("text/html")) throw new Error("detail request rejected");
|
||||
const fragment = await response.text();
|
||||
if (!fragment.includes("data-task-detail-content")) throw new Error("detail fragment missing");
|
||||
body.innerHTML = fragment;
|
||||
if (pushHistory) window.history.pushState({cmbuyerDrawer: true, detailURL: url, focusTarget: requestedFocus === row ? "row" : "button"}, "", url);
|
||||
closeButton.focus();
|
||||
} catch (error) {
|
||||
if (error.name !== "AbortError") showError(url, row, requestedFocus, pushHistory);
|
||||
} finally {
|
||||
if (activeRequest === requestController) activeRequest = null;
|
||||
}
|
||||
};
|
||||
const requestClose = () => {
|
||||
if (window.history.state && window.history.state.cmbuyerDrawer) window.history.back();
|
||||
else restoreList();
|
||||
};
|
||||
|
||||
window.history.replaceState({cmbuyerList: true, listURL: initialURL}, "", initialURL);
|
||||
rows.forEach((row) => {
|
||||
const url = row.dataset.detailUrl;
|
||||
row.addEventListener("dblclick", (event) => {
|
||||
if (!isInteractive(event.target)) loadDetail(url, row, row, true);
|
||||
});
|
||||
row.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Enter" && event.target === row) {
|
||||
event.preventDefault();
|
||||
loadDetail(url, row, row, true);
|
||||
}
|
||||
});
|
||||
const button = row.querySelector("[data-open-detail]");
|
||||
if (button) button.addEventListener("click", () => loadDetail(url, row, button, true));
|
||||
});
|
||||
closeButton.addEventListener("click", requestClose);
|
||||
drawer.addEventListener("cancel", (event) => {
|
||||
event.preventDefault();
|
||||
requestClose();
|
||||
});
|
||||
window.addEventListener("popstate", (event) => {
|
||||
if (event.state && event.state.cmbuyerDrawer) {
|
||||
const row = rows.find((candidate) => candidate.dataset.detailUrl === event.state.detailURL);
|
||||
if (!row) {
|
||||
restoreList();
|
||||
return;
|
||||
}
|
||||
const requestedFocus = event.state.focusTarget === "button" ? row.querySelector("[data-open-detail]") || row : row;
|
||||
loadDetail(event.state.detailURL, row, requestedFocus, false);
|
||||
return;
|
||||
}
|
||||
restoreList();
|
||||
});
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user