feat: improve form handling and toolbar integration in One2many compo…

…nents gisce/webclient#1646 - Added formRef to improve form submission handling in the FormActionBar and useFormToolbarButtons hooks. - Refactored One2manyForm to support forwarding refs, enabling better integration with form functionalities. - Updated One2manyInput and One2manyInputInfinite to utilize formRef for improved form management. - Enhanced One2manyTopBar to integrate formRef and streamline toolbar button actions. These changes improve the overall user experience and maintainability of the One2many components.
gisce · Jan 22, 2025 · 4d82eac · 4d82eac
1 parent 0081027
commit 4d82eac
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 55 deletions.
diff --git a/src/actionbar/FormActionBar.tsx b/src/actionbar/FormActionBar.tsx
@@ -82,6 +82,7 @@ function FormActionBarComponent({ toolbar }: { toolbar: any }) {
     useFormToolbarButtons({
       toolbar,
       mustDisableButtons,
+      formRef,
     });
 
   const tryAction = useCallback(

diff --git a/src/hooks/useFormToolbarButtons.ts b/src/hooks/useFormToolbarButtons.ts
@@ -1,6 +1,5 @@
-import { useCallback, useContext } from "react";
+import { useCallback, useContext, RefObject } from "react";
 import { useLocale } from "@gisce/react-formiga-components";
-import { useActionViewContext } from "@/context/ActionViewContext";
 import {
   ContentRootContext,
   ContentRootContextType,
@@ -13,6 +12,7 @@ import {
 interface UseFormToolbarButtonsProps {
   toolbar: any;
   mustDisableButtons?: boolean;
+  formRef: RefObject<any>;
 }
 
 interface SaveDocumentResult {
@@ -23,6 +23,7 @@ interface SaveDocumentResult {
 export const useFormToolbarButtons = ({
   toolbar,
   mustDisableButtons = false,
+  formRef,
 }: UseFormToolbarButtonsProps) => {
   const { t } = useLocale();
   const contentRootContext = useContext(
@@ -32,18 +33,21 @@ export const useFormToolbarButtons = ({
     TabManagerContext,
   ) as TabManagerContextType;
 
-  const { formRef, onFormSave } = useActionViewContext();
   const { processAction } = contentRootContext || {};
   const { openRelate } = tabManagerContext || {};
 
+  const onFormSave = useCallback(async () => {
+    return await formRef.current?.submitForm();
+  }, [formRef]);
+
   const runAction = useCallback(
     (actionData: any) => {
       processAction?.({
         actionData,
-        values: (formRef.current as any).getValues(),
-        fields: (formRef.current as any).getFields(),
-        context: (formRef.current as any).getContext(),
-        onRefreshParentValues: () => (formRef.current as any).fetchValues(),
+        values: formRef.current?.getValues(),
+        fields: formRef.current?.getFields(),
+        context: formRef.current?.getContext(),
+        onRefreshParentValues: () => formRef.current?.fetchValues(),
       });
     },
     [formRef, processAction],
@@ -97,8 +101,8 @@ export const useFormToolbarButtons = ({
         if (result.succeed) {
           openRelate({
             relateData: relate,
-            values: (formRef.current as any).getValues(),
-            fields: (formRef.current as any).getFields(),
+            values: formRef.current?.getValues(),
+            fields: formRef.current?.getFields(),
             action_id: relate.id,
             action_type: relate.type,
           });

diff --git a/src/widgets/base/one2many/One2manyForm.tsx b/src/widgets/base/one2many/One2manyForm.tsx
@@ -4,7 +4,7 @@ import {
   One2manyContext,
   One2manyContextType,
 } from "@/context/One2manyContext";
-import { useContext } from "react";
+import { useContext, forwardRef } from "react";
 import { One2manyItem } from "./One2manyInput";
 import { filterDuplicateItems } from "@/helpers/one2manyHelper";
 import { useLocale } from "@gisce/react-formiga-components";
@@ -18,51 +18,58 @@ export type One2manyFormProps = {
   onChange: (items: One2manyItem[]) => void;
 };
 
-export const One2manyForm = ({
-  formView,
-  items,
-  context,
-  relation,
-  readOnly,
-  onChange,
-}: One2manyFormProps) => {
-  const { itemIndex } = useContext(One2manyContext) as One2manyContextType;
+export const One2manyForm = forwardRef(
+  (
+    {
+      formView,
+      items,
+      context,
+      relation,
+      readOnly,
+      onChange,
+    }: One2manyFormProps,
+    ref,
+  ) => {
+    const { itemIndex } = useContext(One2manyContext) as One2manyContextType;
+    const { t } = useLocale();
 
-  const { t } = useLocale();
+    if (items.length === 0) {
+      return t("noCurrentEntries");
+    }
 
-  if (items.length === 0) {
-    return t("noCurrentEntries");
-  }
+    return (
+      <Form
+        ref={ref}
+        formView={formView}
+        values={items[itemIndex]?.values}
+        parentContext={context}
+        model={relation}
+        id={items[itemIndex]?.id}
+        submitMode={"values"}
+        onFieldsChange={(values: any) => {
+          const currentItemId = items[itemIndex]?.id;
 
-  return (
-    <Form
-      formView={formView}
-      values={items[itemIndex]?.values}
-      parentContext={context}
-      model={relation}
-      id={items[itemIndex]?.id}
-      submitMode={"values"}
-      onFieldsChange={(values: any) => {
-        const currentItemId = items[itemIndex]?.id;
+          const updatedItems = items.map((item) => {
+            if (item.id === currentItemId) {
+              return {
+                ...item,
+                operation:
+                  item.operation === "original"
+                    ? "pendingUpdate"
+                    : item.operation,
+                values: { ...values, id: currentItemId },
+                treeValues: { ...values, id: currentItemId },
+              };
+            }
+            return item;
+          });
 
-        const updatedItems = items.map((item) => {
-          if (item.id === currentItemId) {
-            return {
-              ...item,
-              operation:
-                item.operation === "original"
-                  ? "pendingUpdate"
-                  : item.operation,
-              values: { ...values, id: currentItemId },
-              treeValues: { ...values, id: currentItemId },
-            };
-          }
-          return item;
-        });
+          onChange(filterDuplicateItems(updatedItems));
+        }}
+        readOnly={readOnly}
+      />
+    );
+  },
+);
 
-        onChange(filterDuplicateItems(updatedItems));
-      }}
-      readOnly={readOnly}
-    />
-  );
-};
+One2manyForm.displayName = "One2manyForm";
diff --git a/src/widgets/base/one2many/One2manyInput.tsx b/src/widgets/base/one2many/One2manyInput.tsx
@@ -107,6 +107,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
   const [sorter, setSorter] = useState<any>();
   const originalSortItemIds = useRef<number[]>();
   const [colorsForResults, setColorsForResults] = useState<any>(undefined);
+  const formRef = useRef<any>();
 
   const {
     readOnly,
@@ -573,6 +574,7 @@ const One2manyInput: React.FC<One2manyInputProps> = (
 
       return (
         <Form
+          ref={formRef}
           formView={views.get("form")}
           values={itemsToShow[itemIndex]?.values}
           parentContext={{ ...getContext?.(), ...context }}
@@ -694,6 +696,8 @@ const One2manyInput: React.FC<One2manyInputProps> = (
         showCreateButton={views.get("form")?.fields !== undefined}
         showToggleButton={views.size > 1}
         toolbar={views.get(currentView)?.toolbar}
+        context={{ ...getContext?.(), ...context }}
+        formRef={formRef}
       />
       {content()}
       <FormModal

diff --git a/src/widgets/base/one2many/One2manyInputInfinite.tsx b/src/widgets/base/one2many/One2manyInputInfinite.tsx
@@ -72,6 +72,7 @@ export const One2manyInput: React.FC<One2manyInputInfiniteProps> = (
     getContext,
     fetchValues: fetchParentFormValues,
   } = formContext || {};
+  const formRef = useRef<any>();
 
   const showToggleButton = views.size > 1;
   const showCreateButton = views.get("form")?.fields !== undefined;
@@ -265,6 +266,8 @@ export const One2manyInput: React.FC<One2manyInputInfiniteProps> = (
         showCreateButton={showCreateButton}
         showToggleButton={showToggleButton}
         toolbar={views.get(currentView)?.toolbar}
+        context={{ ...getContext?.(), ...context }}
+        formRef={formRef}
       />
       {currentView === "tree" && (
         <One2manyTree
@@ -293,6 +296,7 @@ export const One2manyInput: React.FC<One2manyInputInfiniteProps> = (
       )}
       {currentView === "form" && (
         <One2manyForm
+          ref={formRef}
           items={items}
           formView={views.get("form")}
           context={context}

diff --git a/src/widgets/base/one2many/One2manyTopBar.tsx b/src/widgets/base/one2many/One2manyTopBar.tsx
@@ -1,6 +1,6 @@
-import { memo } from "react";
+import { memo, RefObject } from "react";
 import ButtonWithTooltip from "@/common/ButtonWithTooltip";
-import { useLocale } from "@gisce/react-formiga-components";
+import { useLocale, DropdownButton } from "@gisce/react-formiga-components";
 import {
   FileAddOutlined,
   DeleteOutlined,
@@ -9,9 +9,14 @@ import {
   AlignLeftOutlined,
   SearchOutlined,
   ApiOutlined,
+  ThunderboltOutlined,
+  PrinterOutlined,
+  EnterOutlined,
 } from "@ant-design/icons";
 import { ViewType } from "@/types";
 import { theme, Badge } from "antd";
+import { useFormToolbarButtons } from "@/hooks/useFormToolbarButtons";
+import { useTreeToolbarButtons } from "@/hooks/useTreeToolbarButtons";
 const { useToken } = theme;
 
 type One2manyTopBarProps = {
@@ -32,6 +37,8 @@ type One2manyTopBarProps = {
   showToggleButton: boolean;
   showCreateButton: boolean;
   toolbar?: any;
+  context?: any;
+  formRef: RefObject<any>;
 };
 
 function One2manyTopBarComponent(props: One2manyTopBarProps) {
@@ -51,11 +58,30 @@ function One2manyTopBarComponent(props: One2manyTopBarProps) {
     selectedRowKeys,
     showCreateButton,
     showToggleButton,
+    toolbar,
+    context,
+    formRef,
   } = props;
 
   const { token } = useToken();
   const { t } = useLocale();
 
+  const { actionButtonProps, printButtonProps, relateButtonProps } =
+    useFormToolbarButtons({
+      toolbar,
+      mustDisableButtons: readOnly,
+      formRef,
+    });
+
+  const {
+    actionButtonProps: treeActionButtonProps,
+    printButtonProps: treePrintButtonProps,
+  } = useTreeToolbarButtons({
+    toolbar,
+    disabled: readOnly,
+    parentContext: context,
+  });
+
   return (
     <div className="flex mb-2">
       <Title title={titleString} token={token} />
@@ -106,6 +132,29 @@ function One2manyTopBarComponent(props: One2manyTopBarProps) {
             onClick={onToggleViewMode}
           />
         )}
+        {toolbar && (
+          <>
+            <Separator />
+            <DropdownButton
+              icon={<ThunderboltOutlined />}
+              {...(mode === "form" ? actionButtonProps : treeActionButtonProps)}
+            />
+            <Separator />
+            <DropdownButton
+              icon={<PrinterOutlined />}
+              {...(mode === "form" ? printButtonProps : treePrintButtonProps)}
+            />
+            {mode === "form" && (
+              <>
+                <Separator />
+                <DropdownButton
+                  icon={<EnterOutlined />}
+                  {...relateButtonProps}
+                />
+              </>
+            )}
+          </>
+        )}
       </div>
     </div>
   );