From d26aaef44aaba7814ab039eebe06ca355a7ad282 Mon Sep 17 00:00:00 2001 From: Mikhail Date: Thu, 21 May 2026 05:15:43 +0300 Subject: [PATCH] Replace IDE form mode placeholder --- .../src/components/editor/ide-workspace.tsx | 367 ++++++++++++------ 1 file changed, 246 insertions(+), 121 deletions(-) diff --git a/frontend/sfera-web/src/components/editor/ide-workspace.tsx b/frontend/sfera-web/src/components/editor/ide-workspace.tsx index b434bfe..2de47c1 100644 --- a/frontend/sfera-web/src/components/editor/ide-workspace.tsx +++ b/frontend/sfera-web/src/components/editor/ide-workspace.tsx @@ -3036,22 +3036,59 @@ function FormDesignerPanel({ const t = messages[language]; const objectForms = data.selectedObjectUi?.forms.length ? data.selectedObjectUi.forms : data.forms; const [selectedFormId, setSelectedFormId] = useState(objectForms[0]?.form.lineage_id ?? null); + const [titleByForm, setTitleByForm] = useState>({}); + const [layoutByForm, setLayoutByForm] = useState>({}); + const [elementDrafts, setElementDrafts] = useState>({}); + const [newElementName, setNewElementName] = useState(""); + const [newElementKind, setNewElementKind] = useState("input"); useEffect(() => { if (objectForms.length > 0 && !objectForms.some((item) => item.form.lineage_id === selectedFormId)) { setSelectedFormId(objectForms[0].form.lineage_id); } }, [objectForms, selectedFormId]); const form = objectForms.find((item) => item.form.lineage_id === selectedFormId) ?? objectForms[0]; - const elements = form?.elements.slice(0, 8) ?? []; const commands = form?.commands.slice(0, 6) ?? []; - const formTitle = form?.form.name ?? "ФормаДокумента"; - const formObjectCaption = language === "ru" ? `${formTitle} (форма 1С)` : `${formTitle} (1C form)`; - const commandLabels = [t.postAndClose, ...commands.slice(0, 2).map((command) => command.name)]; + const formKey = form?.form.lineage_id ?? "draft"; + const baseElements = useMemo(() => buildIdeFormElements(data, form), [data, form]); + const elements = elementDrafts[formKey] ?? baseElements; + const formTitle = titleByForm[formKey] ?? form?.form.name ?? "ФормаДокумента"; + const formObjectCaption = language === "ru" ? `${formTitle} (форма 1С 8.5)` : `${formTitle} (1C 8.5 form)`; + const layout = layoutByForm[formKey] ?? "auto"; + + useEffect(() => { + if (form && !elementDrafts[form.form.lineage_id]) { + setElementDrafts((current) => ({ ...current, [form.form.lineage_id]: buildIdeFormElements(data, form) })); + } + }, [data, elementDrafts, form]); + + const updateElement = (id: string, patch: Partial) => { + setElementDrafts((current) => ({ + ...current, + [formKey]: (current[formKey] ?? baseElements).map((element) => (element.id === id ? { ...element, ...patch } : element)) + })); + }; + + const addElement = () => { + const name = newElementName.trim(); + if (!name) { + return; + } + const next: IdeFormElementDraft = { + id: `draft.${formKey}.${Date.now()}`, + name, + caption: name, + controlKind: newElementKind, + binding: name, + width: "stretch" + }; + setElementDrafts((current) => ({ ...current, [formKey]: [...(current[formKey] ?? baseElements), next] })); + setNewElementName(""); + }; return ( -
+
{t.forms}
@@ -3086,11 +3123,11 @@ function FormDesignerPanel({
{t.none}
) : ( elements.map((element) => ( -
- +
+
{element.name}
-
{element.kind}
+
{element.controlKind} · {element.binding}
)) @@ -3107,146 +3144,234 @@ function FormDesignerPanel({
-
-
+
+
-
{formObjectCaption}
- +
{formObjectCaption}
+
{data.selectedObjectSchema?.object.qualified_name ?? form?.form.qualified_name ?? data.projectId}
- - -
-
- - -
- {[t.client, t.agent, t.supplier].map((label, index) => ( - - ))} -
- - -
- -
-
- {[t.goods, t.sites, t.compensationTerms, t.agencyAgreements, t.telegram, t.mail].map((tab, index) => ( - - ))} -
-
- -
-
- - - -
- - - -
-
-
- {["", t.nameField, t.code, t.sentToBankCompanyName, t.mergeProject, t.legalEntity, t.result].map((heading) => ( -
{heading}
- ))} -
-
{t.emptyList}
+ )) : {language === "ru" ? "Команды формы не описаны" : "No form commands"}}
-
- {[ - [t.author, t.none], - [t.creationDate, t.none], - [t.editor, t.none], - [t.editDate, t.none] - ].map(([label, value]) => ( - +
+ {elements.map((element) => ( + ))}
-
- {commandLabels.map((command) => ( - + ))} + - ))} - - + +
+
); } +type IdeFormElementDraft = { + id: string; + name: string; + caption: string; + controlKind: "input" | "date" | "checkbox" | "table" | "group" | "text"; + binding: string; + width: "stretch" | "half" | "third"; +}; + +function IdeFormControl({ element, forceHalf }: Readonly<{ element: IdeFormElementDraft; forceHalf: boolean }>) { + const span = element.controlKind === "table" || element.controlKind === "group" ? "col-span-12" : forceHalf || element.width === "half" ? "col-span-6" : element.width === "third" ? "col-span-4" : "col-span-12"; + return ( +
+ + {ideFormControlInput(element)} +
+ ); +} + +function ideFormControlInput(element: IdeFormElementDraft) { + if (element.controlKind === "table") { + return ( +
+
+ {element.binding} + Количество + Сумма +
+
+
+
+ ); + } + if (element.controlKind === "checkbox") { + return ; + } + if (element.controlKind === "group") { + return
{element.binding}
; + } + if (element.controlKind === "text") { + return