IO-3624 Finalize admin config UX and validation polish
This commit is contained in:
Dave
@@ -4,17 +4,200 @@ import AlertComponent from "../alert/alert.component";
|
||||
import "./form-fields-changed.styles.scss";
|
||||
import Prompt from "../../utils/prompt";
|
||||
|
||||
export default function FormsFieldChanged({ form, skipPrompt }) {
|
||||
export default function FormsFieldChanged({ form, skipPrompt, onErrorNavigate, onReset, onDirtyChange }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const normalizeNamePath = (namePath) => (Array.isArray(namePath) ? namePath.filter((part) => part !== undefined) : [namePath]);
|
||||
|
||||
const getFieldIdCandidates = (namePath) => {
|
||||
const normalizedNamePath = normalizeNamePath(namePath).map((part) => String(part));
|
||||
const underscoreId = normalizedNamePath.join("_");
|
||||
const dashId = normalizedNamePath.join("-");
|
||||
const dotName = normalizedNamePath.join(".");
|
||||
|
||||
return [underscoreId, dashId, dotName].filter(Boolean);
|
||||
};
|
||||
|
||||
const clearFormMeta = () => {
|
||||
const fieldMeta = form.getFieldsError().map(({ name }) => ({
|
||||
name,
|
||||
touched: false,
|
||||
validating: false,
|
||||
errors: [],
|
||||
warnings: []
|
||||
}));
|
||||
|
||||
if (fieldMeta.length > 0) {
|
||||
form.setFields(fieldMeta);
|
||||
}
|
||||
|
||||
onDirtyChange?.(false);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
form.resetFields();
|
||||
if (onReset) {
|
||||
onReset();
|
||||
} else {
|
||||
form.resetFields();
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
clearFormMeta();
|
||||
});
|
||||
};
|
||||
|
||||
const getFieldDomNode = (namePath) => {
|
||||
const fieldInstance = form.getFieldInstance?.(namePath);
|
||||
const fieldIdCandidates = getFieldIdCandidates(namePath);
|
||||
const domCandidates = [
|
||||
fieldInstance?.nativeElement,
|
||||
fieldInstance?.input,
|
||||
fieldInstance?.resizableTextArea?.textArea,
|
||||
fieldInstance
|
||||
];
|
||||
|
||||
fieldIdCandidates.forEach((fieldId) => {
|
||||
const escapedFieldId = CSS.escape(fieldId);
|
||||
const directNode = document.getElementById(fieldId) || document.querySelector(`#${escapedFieldId}`);
|
||||
const labelNode = document.querySelector(`label[for="${escapedFieldId}"]`);
|
||||
const namedNode = document.querySelector(`[name="${escapedFieldId}"]`);
|
||||
const formItemNode =
|
||||
directNode?.closest?.(".ant-form-item") ||
|
||||
labelNode?.closest?.(".ant-form-item") ||
|
||||
namedNode?.closest?.(".ant-form-item");
|
||||
|
||||
domCandidates.push(directNode);
|
||||
domCandidates.push(namedNode);
|
||||
domCandidates.push(formItemNode);
|
||||
domCandidates.push(formItemNode?.querySelector?.("input, textarea, select, .ant-select-selector"));
|
||||
});
|
||||
|
||||
return domCandidates.find((candidate) => candidate instanceof HTMLElement) ?? null;
|
||||
};
|
||||
|
||||
const waitForAnimationFrames = (frameCount = 1) =>
|
||||
new Promise((resolve) => {
|
||||
let remainingFrames = frameCount;
|
||||
const nextFrame = () => {
|
||||
if (remainingFrames <= 0) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
remainingFrames -= 1;
|
||||
window.requestAnimationFrame(nextFrame);
|
||||
};
|
||||
window.requestAnimationFrame(nextFrame);
|
||||
});
|
||||
|
||||
const getFieldOwningTabMeta = (namePath) => {
|
||||
const fieldDomNode = getFieldDomNode(namePath);
|
||||
const owningTabPane = fieldDomNode?.closest?.(".ant-tabs-tabpane");
|
||||
const paneId = owningTabPane?.getAttribute?.("id") || null;
|
||||
const owningTabButton = paneId
|
||||
? document.querySelector(`[role="tab"][aria-controls="${paneId.replace(/"/g, '\\"')}"]`)
|
||||
: null;
|
||||
const tabLabel = owningTabButton?.textContent?.trim() || null;
|
||||
|
||||
return {
|
||||
owningTabPane,
|
||||
owningTabButton,
|
||||
tabLabel
|
||||
};
|
||||
};
|
||||
|
||||
const openFieldOwningTab = async (namePath) => {
|
||||
const { owningTabPane, owningTabButton } = getFieldOwningTabMeta(namePath);
|
||||
if (!owningTabPane || owningTabPane.classList.contains("ant-tabs-tabpane-active")) return false;
|
||||
|
||||
if (!(owningTabButton instanceof HTMLElement)) return false;
|
||||
|
||||
owningTabButton.click();
|
||||
|
||||
for (let index = 0; index < 24; index += 1) {
|
||||
await waitForAnimationFrames();
|
||||
if (owningTabPane.classList.contains("ant-tabs-tabpane-active")) return true;
|
||||
}
|
||||
|
||||
return owningTabPane.classList.contains("ant-tabs-tabpane-active");
|
||||
};
|
||||
|
||||
const scrollToErrorField = (namePath) => {
|
||||
const normalizedNamePath = normalizeNamePath(namePath);
|
||||
if (!normalizedNamePath.length) return;
|
||||
|
||||
try {
|
||||
form.scrollToField(normalizedNamePath, {
|
||||
behavior: "smooth",
|
||||
block: "center",
|
||||
focus: true
|
||||
});
|
||||
window.requestAnimationFrame(() => {
|
||||
const fallbackNode = getFieldDomNode(normalizedNamePath);
|
||||
fallbackNode?.focus?.();
|
||||
});
|
||||
return;
|
||||
} catch {
|
||||
const fallbackTarget = document.getElementById(normalizedNamePath[0]?.toString?.() ?? "");
|
||||
fallbackTarget?.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "center"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleErrorClick = async (namePath) => {
|
||||
const normalizedNamePath = normalizeNamePath(namePath);
|
||||
if (!normalizedNamePath.length) return;
|
||||
|
||||
const switchedTab = await openFieldOwningTab(normalizedNamePath);
|
||||
if (!switchedTab) {
|
||||
const navigationDelayMs = onErrorNavigate?.(normalizedNamePath) ?? 0;
|
||||
if (navigationDelayMs > 0) {
|
||||
window.setTimeout(() => {
|
||||
window.requestAnimationFrame(() => {
|
||||
scrollToErrorField(normalizedNamePath);
|
||||
});
|
||||
}, navigationDelayMs);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
await waitForAnimationFrames(switchedTab ? 2 : 1);
|
||||
scrollToErrorField(normalizedNamePath);
|
||||
};
|
||||
//if (!form.isFieldsTouched()) return <></>;
|
||||
return (
|
||||
<Form.Item className="form-fields-changed" shouldUpdate style={{ margin: 0, padding: 0, minHeight: "unset" }}>
|
||||
{() => {
|
||||
const errors = form.getFieldsError().filter((e) => e.errors.length > 0);
|
||||
const errors = form
|
||||
.getFieldsError()
|
||||
.filter((fieldError) => fieldError.errors.length > 0)
|
||||
.flatMap((fieldError) => {
|
||||
const tabMeta = getFieldOwningTabMeta(fieldError.name);
|
||||
|
||||
return fieldError.errors.map((errorMessage, errorIndex) => ({
|
||||
key: `${(fieldError.name || []).join(".")}-${errorIndex}-${errorMessage}`,
|
||||
message: errorMessage,
|
||||
namePath: fieldError.name,
|
||||
tabLabel: tabMeta.tabLabel
|
||||
}));
|
||||
});
|
||||
|
||||
const groupedErrors = errors.reduce((groups, error) => {
|
||||
const groupKey = error.tabLabel || "__ungrouped__";
|
||||
if (!groups[groupKey]) {
|
||||
groups[groupKey] = {
|
||||
key: groupKey,
|
||||
label: error.tabLabel,
|
||||
errors: []
|
||||
};
|
||||
}
|
||||
groups[groupKey].errors.push(error);
|
||||
return groups;
|
||||
}, {});
|
||||
const errorGroups = Object.values(groupedErrors);
|
||||
const hasTabbedErrorGroups = errorGroups.some((group) => Boolean(group.label));
|
||||
|
||||
if (form.isFieldsTouched())
|
||||
return (
|
||||
<Space orientation="vertical" style={{ width: "100%", marginBottom: 10 }}>
|
||||
@@ -39,10 +222,35 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
|
||||
{errors.length > 0 && (
|
||||
<AlertComponent
|
||||
type="error"
|
||||
message={t("general.labels.validationerror")}
|
||||
title={t("general.labels.validationerror")}
|
||||
description={
|
||||
<div>
|
||||
<ul>{errors.map((e, idx) => e.errors.map((e2, idx2) => <li key={`${idx}${idx2}`}>{e2}</li>))}</ul>
|
||||
<div className="form-fields-changed__error-groups">
|
||||
{errorGroups.map((group) => (
|
||||
<div key={group.key} className="form-fields-changed__error-group">
|
||||
{hasTabbedErrorGroups && group.label ? (
|
||||
<div className="form-fields-changed__error-group-title">{group.label}</div>
|
||||
) : null}
|
||||
<ul className="form-fields-changed__error-list">
|
||||
{group.errors.map((error) => (
|
||||
<li key={error.key}>
|
||||
{Array.isArray(error.namePath) && error.namePath.length > 0 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="form-fields-changed__error-link"
|
||||
onClick={() => {
|
||||
handleErrorClick(error.namePath);
|
||||
}}
|
||||
>
|
||||
{error.message}
|
||||
</button>
|
||||
) : (
|
||||
error.message
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
showIcon
|
||||
|
||||
@@ -4,4 +4,47 @@
|
||||
min-height: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__error-list {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
&__error-groups {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
&__error-group {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
&__error-group-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__error-link {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
line-height: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
|
||||
&:hover {
|
||||
color: color-mix(in srgb, var(--ant-color-error) 82%, var(--ant-color-text));
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid color-mix(in srgb, var(--ant-color-error) 32%, transparent);
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user