Fix location coordinate editing (#135)

frontend/src/app/common/validation-input.tsx

@@ -1,53 +1,51 @@
-
 import { FC } from "react";
 
 interface ValidationInputProps {
-    className: string,
-    defaultValue: string,
-    id: string,
-    onChange: Function,
-    errMsg: string,
-    type: string,
-    step?: string,
-    maxLength?: number,
-    value?: string,
-  }
-
+  className: string;
+  defaultValue: string;
+  id: string;
+  onChange: Function;
+  errMsg: string;
+  type: string;
+  step?: string;
+  maxLength?: number;
+  value?: string;
+}
 
-  export const ValidationInput: FC<ValidationInputProps> = ({
-    className,
-    defaultValue,
-    id,
-    onChange,
-    errMsg,
-    type,
-    step,
-    maxLength,
-    value
-  }) => {
+export const ValidationInput: FC<ValidationInputProps> = ({
+  className,
+  defaultValue,
+  id,
+  onChange,
+  errMsg,
+  type,
+  step,
+  maxLength,
+  value,
+}) => {
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    onChange(newValue); // Call the parent's onChange function
+  };
 
-    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      const newValue = event.target.value;
-      onChange(newValue); // Call the parent's onChange function
-    };
-
-    const errClass = (errMsg === "" ? "" : "error-message");
-    const calulatedClass = (errMsg === "" ? className : className + " error-border");
-    return (<div>
-        <div>
+  const errClass = errMsg === "" ? "" : "error-message";
+  const calulatedClass =
+    errMsg === "" ? className : className + " error-border";
+  return (
+    <div>
+      <div>
         <input
-                    type={type}
-                    id={id}
-                    className={calulatedClass}
-                    defaultValue={defaultValue}
-                    value={value}
-                    onChange={handleInputChange}
-                    step={step}
-                    maxLength={maxLength}
-                  />
-        </div>
-        <div className={errClass}>
-            {errMsg}
-        </div>
-    </div>)
-  };
+          type={type}
+          id={id}
+          className={calulatedClass}
+          defaultValue={defaultValue}
+          value={value}
+          onChange={handleInputChange}
+          step={step}
+          maxLength={maxLength}
+        />
+      </div>
+      <div className={errClass}>{errMsg}</div>
+    </div>
+  );
+};

frontend/src/app/components/common/comp-input.tsx

@@ -0,0 +1,105 @@
+import { FC } from "react";
+
+type Props = {
+  id: string;
+  type: "input" | "number" | "text";
+  label?: string;
+  inputClass?: string;
+  formClass?: string;
+  containerClass?: string;
+  onChange?: Function;
+  onBlur?: Function;
+  error?: string;
+  value?: string | number;
+  defaultValue?: string | number;
+  disabled?: boolean;
+  onKeyDown?: Function;
+  rows?: number;
+  cols?: number;
+  placeholder?: string;
+  maxLength?: number;
+  step?: number | string;
+};
+
+const noop = () => {};
+
+export const CompInput: FC<Props> = ({
+  id,
+  type,
+  inputClass,
+  formClass,
+  containerClass,
+  label,
+  placeholder,
+  value,
+  defaultValue,
+  error,
+  disabled,
+  rows,
+  cols,
+  step,
+  maxLength,
+  onBlur = noop,
+  onChange = noop,
+  onKeyDown = noop,
+}) => {
+  let Component: any;
+
+  const inputClasses = [];
+
+  if (inputClass) {
+    inputClasses.push(inputClass);
+  }
+
+  if (error) {
+    inputClasses.push("is-invalid");
+    inputClasses.push("error-border");
+  }
+
+  if (formClass === "") {
+    formClass = "form-group";
+  }
+
+  const props = {
+    id: id,
+    value: value,
+   //  defaultValue: defaultValue,
+    className: inputClasses.join(" "),
+    onChange: (event: any) => onChange(event),
+    onBlur: (event: any) => onBlur(event),
+    onKeyDown: (event: any) => onKeyDown(event),
+    disabled: disabled,
+    placeholder: placeholder,
+    maxLength: maxLength,
+  };
+
+  if (type === "text") {
+    Component = <textarea {...props} cols={cols} rows={rows} />;
+  } else {
+    Component = <input {...props} type={type} inputMode="numeric" />;
+  }
+
+  return (
+    <div className={formClass} id="x-coordinate-pair-id">
+      {label && (
+        <label className="text-box" htmlFor={id}>
+          {label}
+        </label>
+      )}
+      <div className={containerClass}>
+        <div>{Component}</div>
+        {error && <div className="error-message">{error}</div>}
+      </div>
+    </div>
+
+    //   <div className={formClass}>
+    //  {label && (
+    //    <label className="text-box" htmlFor={id}>
+    //      {label}
+    //    </label>
+    //  )}
+    //    {Component}
+    //    {error && <div className="error-message">{error}</div>}
+    //  </div>
+  );
+};