fix #2004

MAIF · Oct 2, 2024 · 694f854 · 694f854
1 parent f130118
commit 694f854
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 37 deletions.
diff --git a/otoroshi/javascript/src/components/inputs/NumberInput.js b/otoroshi/javascript/src/components/inputs/NumberInput.js
@@ -5,6 +5,12 @@ export class NumberInput extends Component {
   onChange = (e) => {
     if (e && e.preventDefault) e.preventDefault();
     const value = e.target.value;
+
+    if (("" + value).length === 0) {
+      this.props.onChange(0);
+      return
+    }
+
     let oldValue = this.props.value;
     try {
       if (value.indexOf('.') > -1) {
@@ -49,7 +55,7 @@ export class NumberInput extends Component {
                 className="form-control"
                 id={`input-${this.props.label}`}
                 placeholder={this.props.placeholder}
-                value={this.props.value}
+                defaultValue={this.props.value}
                 onChange={this.onChange}
               />
               {this.props.prefix && (

diff --git a/otoroshi/javascript/src/components/nginputs/inputs.js b/otoroshi/javascript/src/components/nginputs/inputs.js
@@ -141,9 +141,8 @@ export class NgDotsRenderer extends Component {
 
               return (
                 <button
-                  className={`btn btn-radius-25 btn-sm ${
-                    backgroundColorFromOption ? '' : selected ? 'btn-primary' : 'btn-dark'
-                  } me-1 px-3 mb-1`}
+                  className={`btn btn-radius-25 btn-sm ${backgroundColorFromOption ? '' : selected ? 'btn-primary' : 'btn-dark'
+                    } me-1 px-3 mb-1`}
                   type="button"
                   key={rawOption}
                   style={style}
@@ -411,9 +410,13 @@ export class NgNumberRenderer extends Component {
     // avoid to have both value and defaultValue props
     const { defaultValue, unit, ...inputProps } = props;
 
+    const initialValue = this.state.touched ?
+      this.props.value :
+      ((this.props.value !== undefined && this.props.value !== null) ? this.props.value : defaultValue)
+
     return (
       <LabelAndInput {...this.props}>
-        {readOnly && <ReadOnlyField value={this.props.value || defaultValue} />}
+        {readOnly && <ReadOnlyField value={initialValue} />}
         <div style={{ ...(props.style || {}) }}>
           <div
             style={{
@@ -427,8 +430,12 @@ export class NgNumberRenderer extends Component {
                 className="form-control"
                 placeholder={props.placeholder}
                 title={props.help}
-                value={this.state.touched ? this.props.value : this.props.value || defaultValue}
+                defaultValue={initialValue}
                 onChange={(e) => {
+                  if (("" + e.target.value).length === 0) {
+                    this.props.onChange(0);
+                    return
+                  }
                   this.props.onChange(~~e.target.value);
                   if (!this.state.touched) this.setState({ touched: true });
                 }}
@@ -587,10 +594,10 @@ export class NgBoxBooleanRenderer extends Component {
     const Container = this.props.rawDisplay
       ? ({ children }) => children
       : ({ children }) => (
-          <div className={`row mb-${margin} ${className || ''}`}>
-            <div className="col-sm-10 ms-auto">{children}</div>
-          </div>
-        );
+        <div className={`row mb-${margin} ${className || ''}`}>
+          <div className="col-sm-10 ms-auto">{children}</div>
+        </div>
+      );
 
     return (
       <Container>
@@ -671,8 +678,8 @@ export class NgArrayRenderer extends Component {
     form: () => ({
       ...this.generateDefaultValue(current.schema),
     }),
-    object: () => {},
-    json: () => {},
+    object: () => { },
+    json: () => { },
   });
 
   generateDefaultValue = (obj) => {
@@ -865,21 +872,21 @@ export class NgObjectRenderer extends Component {
             itemRenderer={
               ItemRenderer
                 ? (key, value, idx) => (
-                    <ItemRenderer
-                      embedded
-                      flow={this.props.flow}
-                      schema={this.props.schema}
-                      value={value}
-                      key={key}
-                      idx={idx}
-                      onChange={(e) => {
-                        const newObject = this.props.value ? { ...this.props.value } : {};
-                        newObject[key] = e;
-                        this.props.onChange(newObject);
-                      }}
-                      {...props}
-                    />
-                  )
+                  <ItemRenderer
+                    embedded
+                    flow={this.props.flow}
+                    schema={this.props.schema}
+                    value={value}
+                    key={key}
+                    idx={idx}
+                    onChange={(e) => {
+                      const newObject = this.props.value ? { ...this.props.value } : {};
+                      newObject[key] = e;
+                      this.props.onChange(newObject);
+                    }}
+                    {...props}
+                  />
+                )
                 : null
             }
           />

diff --git a/otoroshi/javascript/src/pages/RouteDesigner/BackendNode.js b/otoroshi/javascript/src/pages/RouteDesigner/BackendNode.js
@@ -6,8 +6,6 @@ export class BackendForm extends React.Component {
     // console.log(this.props)
     const { form } = this.props.state;
 
-    console.log(form);
-
     return (
       <div>
         <NgForm

diff --git a/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js b/otoroshi/javascript/src/pages/RouteDesigner/RouteWizard.js
@@ -67,9 +67,8 @@ const RouteChooser = ({ state, onChange }) => (
       ].map(({ kind, title, text }) => (
         <button
           type="button"
-          className={`btn ${
-            state.route.kind === kind ? 'btn-primaryColor' : 'btn-dark'
-          } py-3 wizard-route-chooser`}
+          className={`btn ${state.route.kind === kind ? 'btn-primaryColor' : 'btn-dark'
+            } py-3 wizard-route-chooser`}
           onClick={() => onChange(kind)}
           key={kind}
         >
@@ -192,10 +191,10 @@ const ProcessStep = ({ state, history }) => {
     ]).then(([plugins, oldPlugins, metadataPlugins, template]) => {
       const url = ['mock', 'graphql'].includes(state.route.kind)
         ? {
-            pahtname: '/',
-            hostname: '',
-            protocol: 'https://',
-          }
+          pahtname: '/',
+          hostname: '',
+          protocol: 'https://',
+        }
         : new URL(state.route.url);
       const secured = url.protocol.includes('https');
 
@@ -236,7 +235,7 @@ const ProcessStep = ({ state, history }) => {
               {
                 ...template.backend.targets[0],
                 hostname: url.hostname,
-                port: ~~url.port || (secured ? 443 : 80),
+                port: url.port === 0 ? 0 : (~~url.port || (secured ? 443 : 80)),
                 tls: secured,
                 tls_config: {
                   ...template.backend.targets[0].tls_config,