From 7bb0248a2d52903c32a09677649ed84e070b5271 Mon Sep 17 00:00:00 2001
From: Mathieu Ancelin <mathieu.ancelin@gmail.com>
Date: Fri, 15 Mar 2024 11:24:46 +0100
Subject: [PATCH] Add the ability to get updates of the form state in table

---
 otoroshi/javascript/src/components/inputs/Form.js  | 4 ++++
 otoroshi/javascript/src/components/inputs/Table.js | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/otoroshi/javascript/src/components/inputs/Form.js b/otoroshi/javascript/src/components/inputs/Form.js
index 1783d477c..61c5a77c8 100644
--- a/otoroshi/javascript/src/components/inputs/Form.js
+++ b/otoroshi/javascript/src/components/inputs/Form.js
@@ -42,9 +42,13 @@ export class Form extends Component {
   };
 
   changeValue = (name, value) => {
+    const oldValue = cloneDeep(this.theValue());
     const newValue = cloneDeep(this.theValue());
     deepSet(newValue, name, value);
     this.props.onChange(newValue);
+    if (this.props.onStateChange) {
+      this.props.onStateChange(newValue, oldValue, this.props.onChange)
+    }
     //if (name.indexOf('.') > -1) {
     //  const [key1, key2] = name.split('.');
     //  const newValue = {
diff --git a/otoroshi/javascript/src/components/inputs/Table.js b/otoroshi/javascript/src/components/inputs/Table.js
index f9c767212..75e270611 100644
--- a/otoroshi/javascript/src/components/inputs/Table.js
+++ b/otoroshi/javascript/src/components/inputs/Table.js
@@ -675,6 +675,7 @@ export class Table extends Component {
                   style={{ paddingTop: '30px', ...this.props.style }}
                 >
                   {React.createElement(this.props.formComponent, {
+                    onStateChange: this.props.onStateChange,
                     showAdvancedForm: true,
                     //this.state.showAdvancedForm, // advanced view in creation mode
                     onChange: (currentItem) => {
@@ -734,6 +735,7 @@ export class Table extends Component {
                 />
               ) : (
                 <Form
+                  onStateChange={this.props.onStateChange}
                   value={this.state.currentItem}
                   onChange={(currentItem) => this.setState({ currentItem })}
                   flow={this.props.formFlow}
@@ -772,6 +774,7 @@ export class Table extends Component {
                 : null,
               <form className="form-horizontal" style={{ paddingTop: '30px', ...this.props.style }}>
                 {React.createElement(this.props.formComponent, {
+                  onStateChange: this.props.onStateChange,
                   onChange: (currentItem) => {
                     this.setState({ currentItem });
 
@@ -810,6 +813,7 @@ export class Table extends Component {
                 />
               ) : (
                 <Form
+                  onStateChange={this.props.onStateChange}
                   value={this.state.currentItem}
                   onChange={(currentItem) => this.setState({ currentItem })}
                   flow={this.props.formFlow}