@asaleh37/ui-base 25.11.6 → 25.12.121

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

@@ -1,238 +1,238 @@
-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 <></>;
-    }
-
-    const getFieldLabel = () => {
-      if (element?.fieldInfo?.formProps?.fieldLabelFn) {
-        return element.fieldInfo.formProps.fieldLabelFn(formValues);
-      } else if (element?.fieldInfo?.fieldLabel) {
-        return element?.fieldInfo?.fieldLabel;
-      }
-    };
-    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={element.disabledFields.includes(fieldName)}
-            label={getFieldLabel()}
-            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 (element?.formValuesChangeCallBk) {
-                element?.formValuesChangeCallBk(
-                  formValues,
-                  formActions,
-                  formManager,
-                  fieldName,
-                  newValue
-                );
-              }
-            }}
-            sx={{
-              "& .MuiInputBase-root": {
-                height: `${props?.formProps?.fieldHeight}px` || undefined,
-              },
-              "& .MuiInputBase-input": {
-                height: "100% !important", // forces full height usage
-              },
-              ...props?.formProps?.style,
-              display: element.hiddenFields.includes(fieldName)
-                ? "none"
-                : undefined,
-            }}
-            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={element.disabledFields.includes(fieldName)}
-            hidden={element.hiddenFields.includes(fieldName)}
-            label={getFieldLabel()}
-            onChangeCallBack={(v: any) => {
-              formManager.setValue(fieldName, v);
-              if (element?.formValuesChangeCallBk) {
-                element?.formValuesChangeCallBk(
-                  formValues,
-                  formActions,
-                  formManager,
-                  fieldName,
-                  v
-                );
-              }
-            }}
-            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={element.disabledFields.includes(fieldName)}
-            hidden={element.hiddenFields.includes(fieldName)}
-            label={getFieldLabel()}
-            onChangeCallBack={(v: any) => {
-              formManager.setValue(fieldName, v);
-              if (element?.formValuesChangeCallBk) {
-                element?.formValuesChangeCallBk(
-                  formValues,
-                  formActions,
-                  formManager,
-                  fieldName,
-                  v
-                );
-              }
-            }}
-            value={formValues[fieldName]}
-            error={formManager.formState.errors[fieldName] != undefined}
-            errorMessage={formManager?.formState?.errors[
-              fieldName
-            ]?.message?.toString()}
-          />
-        ) : props?.fieldType === "checkbox" ? (
-          <CheckBox
-            label={getFieldLabel()}
-            onChangeCallBack={(v: any) => {
-              formManager.setValue(fieldName, v);
-              if (element?.formValuesChangeCallBk) {
-                element?.formValuesChangeCallBk(
-                  formValues,
-                  formActions,
-                  formManager,
-                  fieldName,
-                  v
-                );
-              }
-            }}
-            value={formValues[fieldName]}
-            checkedValue={props?.checkedValue || true}
-            unCheckedValue={props?.unCheckedValue || false}
-            disabled={element.disabledFields.includes(fieldName)}
-            hidden={element.hiddenFields.includes(fieldName)}
-            sx={props?.formProps?.style}
-          />
-        ) : props?.fieldType === "combobox" ? (
-          <ComboBox
-            sx={props?.formProps?.style || { width: "100%" }}
-            label={getFieldLabel()}
-            commonStoreKey={props?.commonStoreKey}
-            dataQueryId={props?.dataQueryId}
-            storeUrl={props?.storeUrl}
-            storeLoadParam={props?.storeLoadParam}
-            disabled={element.disabledFields.includes(fieldName)}
-            hidden={element.hiddenFields.includes(fieldName)}
-            onChangeCallBack={(v: any, selectedRecord: any) => {
-              let newValue = null;
-              if (v) {
-                newValue = v;
-              }
-              formManager.setValue(fieldName, newValue);
-              if (element?.formValuesChangeCallBk) {
-                element?.formValuesChangeCallBk(
-                  formValues,
-                  formActions,
-                  formManager,
-                  fieldName,
-                  v,
-                  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={getFieldLabel()}
-            disabled={element.disabledFields.includes(fieldName)}
-            hidden={element.hiddenFields.includes(fieldName)}
-            onChangeCallBack={(v: any, selectedRecord: any) => {
-              let newValue = null;
-              if (v) {
-                newValue = v;
-              }
-              formManager.setValue(fieldName, newValue);
-              if (element?.formValuesChangeCallBk) {
-                element?.formValuesChangeCallBk(
-                  formValues,
-                  formActions,
-                  formManager,
-                  fieldName,
-                  v,
-                  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 <></>;
+    }
+
+    const getFieldLabel = () => {
+      if (element?.fieldInfo?.formProps?.fieldLabelFn) {
+        return element.fieldInfo.formProps.fieldLabelFn(formValues);
+      } else if (element?.fieldInfo?.fieldLabel) {
+        return element?.fieldInfo?.fieldLabel;
+      }
+    };
+    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={element.disabledFields.includes(fieldName)}
+            label={getFieldLabel()}
+            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 (element?.formValuesChangeCallBk) {
+                element?.formValuesChangeCallBk(
+                  formValues,
+                  formActions,
+                  formManager,
+                  fieldName,
+                  newValue
+                );
+              }
+            }}
+            sx={{
+              "& .MuiInputBase-root": {
+                height: `${props?.formProps?.fieldHeight}px` || undefined,
+              },
+              "& .MuiInputBase-input": {
+                height: "100% !important", // forces full height usage
+              },
+              ...props?.formProps?.style,
+              display: element.hiddenFields.includes(fieldName)
+                ? "none"
+                : undefined,
+            }}
+            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={element.disabledFields.includes(fieldName)}
+            hidden={element.hiddenFields.includes(fieldName)}
+            label={getFieldLabel()}
+            onChangeCallBack={(v: any) => {
+              formManager.setValue(fieldName, v);
+              if (element?.formValuesChangeCallBk) {
+                element?.formValuesChangeCallBk(
+                  formValues,
+                  formActions,
+                  formManager,
+                  fieldName,
+                  v
+                );
+              }
+            }}
+            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={element.disabledFields.includes(fieldName)}
+            hidden={element.hiddenFields.includes(fieldName)}
+            label={getFieldLabel()}
+            onChangeCallBack={(v: any) => {
+              formManager.setValue(fieldName, v);
+              if (element?.formValuesChangeCallBk) {
+                element?.formValuesChangeCallBk(
+                  formValues,
+                  formActions,
+                  formManager,
+                  fieldName,
+                  v
+                );
+              }
+            }}
+            value={formValues[fieldName]}
+            error={formManager.formState.errors[fieldName] != undefined}
+            errorMessage={formManager?.formState?.errors[
+              fieldName
+            ]?.message?.toString()}
+          />
+        ) : props?.fieldType === "checkbox" ? (
+          <CheckBox
+            label={getFieldLabel()}
+            onChangeCallBack={(v: any) => {
+              formManager.setValue(fieldName, v);
+              if (element?.formValuesChangeCallBk) {
+                element?.formValuesChangeCallBk(
+                  formValues,
+                  formActions,
+                  formManager,
+                  fieldName,
+                  v
+                );
+              }
+            }}
+            value={formValues[fieldName]}
+            checkedValue={props?.checkedValue || true}
+            unCheckedValue={props?.unCheckedValue || false}
+            disabled={element.disabledFields.includes(fieldName)}
+            hidden={element.hiddenFields.includes(fieldName)}
+            sx={props?.formProps?.style}
+          />
+        ) : props?.fieldType === "combobox" ? (
+          <ComboBox
+            sx={props?.formProps?.style || { width: "100%" }}
+            label={getFieldLabel()}
+            commonStoreKey={props?.commonStoreKey}
+            dataQueryId={props?.dataQueryId}
+            storeUrl={props?.storeUrl}
+            storeLoadParam={props?.storeLoadParam}
+            disabled={element.disabledFields.includes(fieldName)}
+            hidden={element.hiddenFields.includes(fieldName)}
+            onChangeCallBack={(v: any, selectedRecord: any) => {
+              let newValue = null;
+              if (v) {
+                newValue = v;
+              }
+              formManager.setValue(fieldName, newValue);
+              if (element?.formValuesChangeCallBk) {
+                element?.formValuesChangeCallBk(
+                  formValues,
+                  formActions,
+                  formManager,
+                  fieldName,
+                  v,
+                  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={getFieldLabel()}
+            disabled={element.disabledFields.includes(fieldName)}
+            hidden={element.hiddenFields.includes(fieldName)}
+            onChangeCallBack={(v: any, selectedRecord: any) => {
+              let newValue = null;
+              if (v) {
+                newValue = v;
+              }
+              formManager.setValue(fieldName, newValue);
+              if (element?.formValuesChangeCallBk) {
+                element?.formValuesChangeCallBk(
+                  formValues,
+                  formActions,
+                  formManager,
+                  fieldName,
+                  v,
+                  selectedRecord
+                );
+              }
+            }}
+            lookupType={props.lookupType}
+            value={formValues[fieldName]}
+            errorMessage={formManager?.formState?.errors[
+              fieldName
+            ]?.message?.toString()}
+          />
+        ) : null}
+      </Grid2>
+    ) : (
+      <></>
+    );
+  } else {
+    return <></>;
+  }
+};
+
+export default FormElementField;