@asaleh37/ui-base 25.8.1-4 → 25.8.1-6

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormElementField.tsx

@@ -1,231 +1,231 @@
-import { Grid2 } from "@mui/material";
-import TemplateTextField from "./FormFields/TemplateTextField";
-import Datefield from "./FormFields/Datefield";
-import DatetimeField from "./FormFields/DatetimeField";
-import ComboBox from "./FormFields/ComboBox";
-import CheckBox from "./FormFields/CheckBox";
-import { DATE_FORMAT, DATE_TIME_FORMAT } from "../../../../util/constants";
-import { isNumeric } from "../../../../util/AppUtils";
-import { FormElementFieldProps } from "../DataEntryTypes";
-import SystemLookupCombobox from "./FormFields/SystemLookupCombobox";
-
-const FormElementField: React.FC<FormElementFieldProps> = (
-  element: FormElementFieldProps
-) => {
-  if (element?.fieldInfo) {
-    const props = element.fieldInfo;
-    const formManager = element?.formManager || null;
-    const formActions = element?.formActions || null;
-    const formValues = element?.formValues || null;
-    const fieldName: any = element?.fieldInfo?.fieldName || null;
-    const fieldType = element?.fieldInfo?.fieldType || null;
-    if (!(props && formManager && formValues && fieldName && fieldType)) {
-      return <></>;
-    }
-    return !element.hiddenFields.includes(fieldName) ? (
-      <Grid2
-        size={
-          props?.formProps?.fieldSize || {
-            lg: 12,
-            md: 12,
-            sm: 12,
-          }
-        }
-        sx={{
-          padding: 1,
-          width: "100%",
-        }}
-      >
-        {fieldType === "text" || fieldType === "number" ? (
-          <TemplateTextField
-            {...props.muiTextFieldProps}
-            fullWidth
-            type={fieldType}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
-            hidden={props?.hidden || false}
-            label={props?.fieldLabel}
-            value={formValues[fieldName]}
-            onChange={(event) => {
-              let newValue = null;
-              if (event.target.value != "") {
-                if (fieldType === "number" && isNumeric(event.target.value)) {
-                  newValue = Number(event.target.value);
-                } else {
-                  newValue = event.target.value;
-                }
-              }
-              formManager.setValue(fieldName, newValue);
-              if (props?.formProps?.onValueChangeCallBack) {
-                props?.formProps?.onValueChangeCallBack(
-                  newValue,
-                  formManager,
-                  formActions
-                );
-              }
-            }}
-            sx={{
-              "& .MuiInputBase-root": {
-                height: `${props?.formProps?.fieldHeight}px` || undefined,
-              },
-              "& .MuiInputBase-input": {
-                height: "100% !important", // forces full height usage
-              },
-              ...props?.formProps?.style,
-            }}
-            error={formManager.formState.errors[fieldName] != undefined}
-            helperText={formManager?.formState?.errors[
-              fieldName
-            ]?.message?.toString()}
-          />
-        ) : props?.fieldType === "date" ? (
-          <Datefield
-            format={props?.dateFormat || DATE_FORMAT}
-            sx={props?.formProps?.style || { width: "100%" }}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
-            label={props?.fieldLabel}
-            onChangeCallBack={(v: any) => {
-              formManager.setValue(fieldName, v);
-              if (props?.formProps?.onValueChangeCallBack) {
-                props?.formProps?.onValueChangeCallBack(
-                  v,
-                  formManager,
-                  formActions
-                );
-              }
-            }}
-            value={formValues[fieldName]}
-            error={formManager.formState.errors[fieldName] != undefined}
-            errorMessage={formManager?.formState?.errors[
-              fieldName
-            ]?.message?.toString()}
-          />
-        ) : props?.fieldType === "datetime" ? (
-          <DatetimeField
-            format={props?.dateFormat || DATE_TIME_FORMAT}
-            sx={props?.formProps?.style || { width: "100%" }}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
-            label={props?.fieldLabel}
-            onChangeCallBack={(v: any) => {
-              formManager.setValue(fieldName, v);
-              if (props?.formProps?.onValueChangeCallBack) {
-                props?.formProps?.onValueChangeCallBack(
-                  v,
-                  formManager,
-                  formActions
-                );
-              }
-            }}
-            value={formValues[fieldName]}
-            error={formManager.formState.errors[fieldName] != undefined}
-            errorMessage={formManager?.formState?.errors[
-              fieldName
-            ]?.message?.toString()}
-          />
-        ) : props?.fieldType === "checkbox" ? (
-          <CheckBox
-            label={props?.fieldLabel}
-            onChangeCallBack={(v: any) => {
-              formManager.setValue(fieldName, v);
-              if (props?.formProps?.onValueChangeCallBack) {
-                props?.formProps?.onValueChangeCallBack(
-                  v,
-                  formManager,
-                  formActions
-                );
-              }
-            }}
-            value={formValues[fieldName]}
-            checkedValue={props?.checkedValue || true}
-            unCheckedValue={props?.unCheckedValue || false}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
-            sx={props?.formProps?.style}
-          />
-        ) : props?.fieldType === "combobox" ? (
-          <ComboBox
-            sx={props?.formProps?.style || { width: "100%" }}
-            label={props?.fieldLabel}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
-            onChangeCallBack={(v: any, selectedRecord: any) => {
-              let newValue = null;
-              if (v) {
-                newValue = v + "";
-              }
-              formManager.setValue(fieldName, newValue);
-              if (props?.formProps?.onValueChangeCallBack) {
-                props?.formProps?.onValueChangeCallBack(
-                  newValue,
-                  formManager,
-                  formActions,
-                  selectedRecord
-                );
-              }
-            }}
-            options={props?.options || []}
-            displayField={props?.optionDisplayField || ""}
-            valueField={props?.optionValueField || ""}
-            value={formValues[fieldName]}
-            errorMessage={formManager?.formState?.errors[
-              fieldName
-            ]?.message?.toString()}
-          />
-        ) : props?.fieldType === "lookup" ? (
-          <SystemLookupCombobox
-            sx={props?.formProps?.style || { width: "100%" }}
-            label={props?.fieldLabel}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
-            onChangeCallBack={(v: any, selectedRecord: any) => {
-              let newValue = null;
-              if (v) {
-                newValue = v + "";
-              }
-              formManager.setValue(fieldName, newValue);
-              if (props?.formProps?.onValueChangeCallBack) {
-                props?.formProps?.onValueChangeCallBack(
-                  newValue,
-                  formManager,
-                  formActions,
-                  selectedRecord
-                );
-              }
-            }}
-            lookupType={props.lookupType}
-            value={formValues[fieldName]}
-            errorMessage={formManager?.formState?.errors[
-              fieldName
-            ]?.message?.toString()}
-          />
-        ) : null}
-      </Grid2>
-    ) : (
-      <></>
-    );
-  } else {
-    return <></>;
-  }
-};
-
-export default FormElementField;
+import { Grid2 } from "@mui/material";
+import TemplateTextField from "./FormFields/TemplateTextField";
+import Datefield from "./FormFields/Datefield";
+import DatetimeField from "./FormFields/DatetimeField";
+import ComboBox from "./FormFields/ComboBox";
+import CheckBox from "./FormFields/CheckBox";
+import { DATE_FORMAT, DATE_TIME_FORMAT } from "../../../../util/constants";
+import { isNumeric } from "../../../../util/AppUtils";
+import { FormElementFieldProps } from "../DataEntryTypes";
+import SystemLookupCombobox from "./FormFields/SystemLookupCombobox";
+
+const FormElementField: React.FC<FormElementFieldProps> = (
+  element: FormElementFieldProps
+) => {
+  if (element?.fieldInfo) {
+    const props = element.fieldInfo;
+    const formManager = element?.formManager || null;
+    const formActions = element?.formActions || null;
+    const formValues = element?.formValues || null;
+    const fieldName: any = element?.fieldInfo?.fieldName || null;
+    const fieldType = element?.fieldInfo?.fieldType || null;
+    if (!(props && formManager && formValues && fieldName && fieldType)) {
+      return <></>;
+    }
+    return !element.hiddenFields.includes(fieldName) ? (
+      <Grid2
+        size={
+          props?.formProps?.fieldSize || {
+            lg: 12,
+            md: 12,
+            sm: 12,
+          }
+        }
+        sx={{
+          padding: 1,
+          width: "100%",
+        }}
+      >
+        {fieldType === "text" || fieldType === "number" ? (
+          <TemplateTextField
+            {...props.muiTextFieldProps}
+            fullWidth
+            type={fieldType}
+            disabled={
+              props?.disabled || element.disabledFields.includes(fieldName)
+                ? true
+                : false
+            }
+            hidden={props?.hidden || false}
+            label={props?.fieldLabel}
+            value={formValues[fieldName]}
+            onChange={(event) => {
+              let newValue = null;
+              if (event.target.value != "") {
+                if (fieldType === "number" && isNumeric(event.target.value)) {
+                  newValue = Number(event.target.value);
+                } else {
+                  newValue = event.target.value;
+                }
+              }
+              formManager.setValue(fieldName, newValue);
+              if (props?.formProps?.onValueChangeCallBack) {
+                props?.formProps?.onValueChangeCallBack(
+                  newValue,
+                  formManager,
+                  formActions
+                );
+              }
+            }}
+            sx={{
+              "& .MuiInputBase-root": {
+                height: `${props?.formProps?.fieldHeight}px` || undefined,
+              },
+              "& .MuiInputBase-input": {
+                height: "100% !important", // forces full height usage
+              },
+              ...props?.formProps?.style,
+            }}
+            error={formManager.formState.errors[fieldName] != undefined}
+            helperText={formManager?.formState?.errors[
+              fieldName
+            ]?.message?.toString()}
+          />
+        ) : props?.fieldType === "date" ? (
+          <Datefield
+            format={props?.dateFormat || DATE_FORMAT}
+            sx={props?.formProps?.style || { width: "100%" }}
+            disabled={
+              props?.disabled || element.disabledFields.includes(fieldName)
+                ? true
+                : false
+            }
+            label={props?.fieldLabel}
+            onChangeCallBack={(v: any) => {
+              formManager.setValue(fieldName, v);
+              if (props?.formProps?.onValueChangeCallBack) {
+                props?.formProps?.onValueChangeCallBack(
+                  v,
+                  formManager,
+                  formActions
+                );
+              }
+            }}
+            value={formValues[fieldName]}
+            error={formManager.formState.errors[fieldName] != undefined}
+            errorMessage={formManager?.formState?.errors[
+              fieldName
+            ]?.message?.toString()}
+          />
+        ) : props?.fieldType === "datetime" ? (
+          <DatetimeField
+            format={props?.dateFormat || DATE_TIME_FORMAT}
+            sx={props?.formProps?.style || { width: "100%" }}
+            disabled={
+              props?.disabled || element.disabledFields.includes(fieldName)
+                ? true
+                : false
+            }
+            label={props?.fieldLabel}
+            onChangeCallBack={(v: any) => {
+              formManager.setValue(fieldName, v);
+              if (props?.formProps?.onValueChangeCallBack) {
+                props?.formProps?.onValueChangeCallBack(
+                  v,
+                  formManager,
+                  formActions
+                );
+              }
+            }}
+            value={formValues[fieldName]}
+            error={formManager.formState.errors[fieldName] != undefined}
+            errorMessage={formManager?.formState?.errors[
+              fieldName
+            ]?.message?.toString()}
+          />
+        ) : props?.fieldType === "checkbox" ? (
+          <CheckBox
+            label={props?.fieldLabel}
+            onChangeCallBack={(v: any) => {
+              formManager.setValue(fieldName, v);
+              if (props?.formProps?.onValueChangeCallBack) {
+                props?.formProps?.onValueChangeCallBack(
+                  v,
+                  formManager,
+                  formActions
+                );
+              }
+            }}
+            value={formValues[fieldName]}
+            checkedValue={props?.checkedValue || true}
+            unCheckedValue={props?.unCheckedValue || false}
+            disabled={
+              props?.disabled || element.disabledFields.includes(fieldName)
+                ? true
+                : false
+            }
+            sx={props?.formProps?.style}
+          />
+        ) : props?.fieldType === "combobox" ? (
+          <ComboBox
+            sx={props?.formProps?.style || { width: "100%" }}
+            label={props?.fieldLabel}
+            disabled={
+              props?.disabled || element.disabledFields.includes(fieldName)
+                ? true
+                : false
+            }
+            onChangeCallBack={(v: any, selectedRecord: any) => {
+              let newValue = null;
+              if (v) {
+                newValue = v + "";
+              }
+              formManager.setValue(fieldName, newValue);
+              if (props?.formProps?.onValueChangeCallBack) {
+                props?.formProps?.onValueChangeCallBack(
+                  newValue,
+                  formManager,
+                  formActions,
+                  selectedRecord
+                );
+              }
+            }}
+            options={props?.options || []}
+            displayField={props?.optionDisplayField || ""}
+            valueField={props?.optionValueField || ""}
+            value={formValues[fieldName]}
+            errorMessage={formManager?.formState?.errors[
+              fieldName
+            ]?.message?.toString()}
+          />
+        ) : props?.fieldType === "lookup" ? (
+          <SystemLookupCombobox
+            sx={props?.formProps?.style || { width: "100%" }}
+            label={props?.fieldLabel}
+            disabled={
+              props?.disabled || element.disabledFields.includes(fieldName)
+                ? true
+                : false
+            }
+            onChangeCallBack={(v: any, selectedRecord: any) => {
+              let newValue = null;
+              if (v) {
+                newValue = v + "";
+              }
+              formManager.setValue(fieldName, newValue);
+              if (props?.formProps?.onValueChangeCallBack) {
+                props?.formProps?.onValueChangeCallBack(
+                  newValue,
+                  formManager,
+                  formActions,
+                  selectedRecord
+                );
+              }
+            }}
+            lookupType={props.lookupType}
+            value={formValues[fieldName]}
+            errorMessage={formManager?.formState?.errors[
+              fieldName
+            ]?.message?.toString()}
+          />
+        ) : null}
+      </Grid2>
+    ) : (
+      <></>
+    );
+  } else {
+    return <></>;
+  }
+};
+
+export default FormElementField;