@asaleh37/ui-base 25.6.2-0.4 → 25.6.2

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

@@ -1,106 +1,106 @@
-import { Grid2 } from "@mui/material";
-import FormElementField from "./FormElementField";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import FormAction from "./FormAction";
-import {
-  FormElementGroupProps,
-  FormElementProps,
-  RecordAction,
-} from "../DataEntryTypes";
-import { useTranslation } from "react-i18next";
-
-const FormElementGroup: React.FC<FormElementGroupProps> = (
-  props: FormElementGroupProps
-) => {
-  const { t } = useTranslation();
-  return (
-    <>
-      <Grid2 container sx={props?.style} alignItems="flex-start">
-        {props?.label ? (
-          <Grid2
-            size={12}
-            sx={{
-              padding: 1,
-              fontWeight: "bold",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "flex-start",
-            }}
-          >
-            {props?.icon ? (
-              <>
-                <FontAwesomeIcon
-                  icon={props.icon}
-                  style={{ marginRight: 5, marginLeft: 5 }}
-                />
-                <div>{t(props.label)}</div>
-              </>
-            ) : (
-              <>{t(props.label)}</>
-            )}
-          </Grid2>
-        ) : (
-          <></>
-        )}
-        {props?.elements
-          ? props.elements.map((element: FormElementProps) => {
-              if (element.type === "group") {
-                return (
-                  <FormElementGroup
-                    {...element.props}
-                    formManager={props.formManager}
-                    formValues={props.formValues}
-                    formActions={props.formActions}
-                    hiddenFields={props.hiddenFields}
-                    disabledFields={props.disabledFields}
-                  />
-                );
-              } else if (element.type === "field" && element.mode === "props") {
-                return (
-                  <FormElementField
-                    fieldInfo={element.props}
-                    formManager={props.formManager}
-                    formValues={props.formValues}
-                    formActions={props.formActions}
-                    hiddenFields={props.hiddenFields}
-                    disabledFields={props.disabledFields}
-                  />
-                );
-              } else if (element.type === "field" && element.mode === "node") {
-                return (
-                  <Grid2
-                    size={
-                      element?.props?.formProps?.fieldSize || {
-                        lg: 3,
-                        md: 6,
-                        sm: 12,
-                      }
-                    }
-                    sx={{ padding: 1, width: "100%" }}
-                  >
-                    <element.node
-                      formManager={props.formManager}
-                      formValues={props.formValues}
-                      formActions={props.formActions}
-                    />
-                  </Grid2>
-                );
-              }
-            })
-          : null}
-
-        {props?.actions ? (
-          <Grid2 size={{ sm: 12 }} sx={{ padding: 1 }}>
-            {props.actions.map((action: RecordAction) => {
-              return <FormAction {...action} record={props.formValues} />;
-            })}
-          </Grid2>
-        ) : (
-          <></>
-        )}
-      </Grid2>
-    </>
-  );
-};
-
-export default FormElementGroup;
+import { Grid2 } from "@mui/material";
+import FormElementField from "./FormElementField";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import FormAction from "./FormAction";
+import {
+  FormElementGroupProps,
+  FormElementProps,
+  RecordAction,
+} from "../DataEntryTypes";
+import { useTranslation } from "react-i18next";
+
+const FormElementGroup: React.FC<FormElementGroupProps> = (
+  props: FormElementGroupProps
+) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Grid2 container sx={props?.style} alignItems="flex-start">
+        {props?.label ? (
+          <Grid2
+            size={12}
+            sx={{
+              padding: 1,
+              fontWeight: "bold",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-start",
+            }}
+          >
+            {props?.icon ? (
+              <>
+                <FontAwesomeIcon
+                  icon={props.icon}
+                  style={{ marginRight: 5, marginLeft: 5 }}
+                />
+                <div>{t(props.label)}</div>
+              </>
+            ) : (
+              <>{t(props.label)}</>
+            )}
+          </Grid2>
+        ) : (
+          <></>
+        )}
+        {props?.elements
+          ? props.elements.map((element: FormElementProps) => {
+              if (element.type === "group") {
+                return (
+                  <FormElementGroup
+                    {...element.props}
+                    formManager={props.formManager}
+                    formValues={props.formValues}
+                    formActions={props.formActions}
+                    hiddenFields={props.hiddenFields}
+                    disabledFields={props.disabledFields}
+                  />
+                );
+              } else if (element.type === "field" && element.mode === "props") {
+                return (
+                  <FormElementField
+                    fieldInfo={element.props}
+                    formManager={props.formManager}
+                    formValues={props.formValues}
+                    formActions={props.formActions}
+                    hiddenFields={props.hiddenFields}
+                    disabledFields={props.disabledFields}
+                  />
+                );
+              } else if (element.type === "field" && element.mode === "node") {
+                return (
+                  <Grid2
+                    size={
+                      element?.props?.formProps?.fieldSize || {
+                        lg: 3,
+                        md: 6,
+                        sm: 12,
+                      }
+                    }
+                    sx={{ padding: 1, width: "100%" }}
+                  >
+                    <element.node
+                      formManager={props.formManager}
+                      formValues={props.formValues}
+                      formActions={props.formActions}
+                    />
+                  </Grid2>
+                );
+              }
+            })
+          : null}
+
+        {props?.actions ? (
+          <Grid2 size={{ sm: 12 }} sx={{ padding: 1 }}>
+            {props.actions.map((action: RecordAction) => {
+              return <FormAction {...action} record={props.formValues} />;
+            })}
+          </Grid2>
+        ) : (
+          <></>
+        )}
+      </Grid2>
+    </>
+  );
+};
+
+export default FormElementGroup;

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/CheckBox.tsx

@@ -1,64 +1,64 @@
-import { Checkbox, FormControlLabel } from "@mui/material";
-import { useTranslation } from "react-i18next";
-
-interface CheckBoxProps {
-  value: any;
-  disabled?: boolean;
-  required?: boolean;
-  label: string;
-  checkedValue?: any;
-  unCheckedValue?: any;
-  onChangeCallBack: Function;
-  sx?: any;
-}
-
-const CheckBox: React.FC<CheckBoxProps> = (props) => {
-  const { t } = useTranslation();
-  return (
-    <FormControlLabel
-      sx={props.sx}
-      disabled={props.disabled || false}
-      required={props.required || false}
-      control={
-        <Checkbox
-          checked={
-            props?.checkedValue == props.value ||
-            props.value === "true" ||
-            props.value == "1"
-              ? true
-              : false
-          }
-          onChange={(e) => {
-            if (
-              props.onChangeCallBack !== undefined &&
-              props.onChangeCallBack != null
-            ) {
-              if (e.target.checked) {
-                if (
-                  props.checkedValue !== undefined &&
-                  props.checkedValue != null
-                ) {
-                  props.onChangeCallBack(props.checkedValue);
-                } else {
-                  props.onChangeCallBack(true);
-                }
-              } else {
-                if (
-                  props.unCheckedValue !== undefined &&
-                  props.unCheckedValue != null
-                ) {
-                  props.onChangeCallBack(props.unCheckedValue);
-                } else {
-                  props.onChangeCallBack(false);
-                }
-              }
-            }
-          }}
-        />
-      }
-      label={t(props.label)}
-    />
-  );
-};
-
-export default CheckBox;
+import { Checkbox, FormControlLabel } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+interface CheckBoxProps {
+  value: any;
+  disabled?: boolean;
+  required?: boolean;
+  label: string;
+  checkedValue?: any;
+  unCheckedValue?: any;
+  onChangeCallBack: Function;
+  sx?: any;
+}
+
+const CheckBox: React.FC<CheckBoxProps> = (props) => {
+  const { t } = useTranslation();
+  return (
+    <FormControlLabel
+      sx={props.sx}
+      disabled={props.disabled || false}
+      required={props.required || false}
+      control={
+        <Checkbox
+          checked={
+            props?.checkedValue == props.value ||
+            props.value === "true" ||
+            props.value == "1"
+              ? true
+              : false
+          }
+          onChange={(e) => {
+            if (
+              props.onChangeCallBack !== undefined &&
+              props.onChangeCallBack != null
+            ) {
+              if (e.target.checked) {
+                if (
+                  props.checkedValue !== undefined &&
+                  props.checkedValue != null
+                ) {
+                  props.onChangeCallBack(props.checkedValue);
+                } else {
+                  props.onChangeCallBack(true);
+                }
+              } else {
+                if (
+                  props.unCheckedValue !== undefined &&
+                  props.unCheckedValue != null
+                ) {
+                  props.onChangeCallBack(props.unCheckedValue);
+                } else {
+                  props.onChangeCallBack(false);
+                }
+              }
+            }
+          }}
+        />
+      }
+      label={t(props.label)}
+    />
+  );
+};
+
+export default CheckBox;

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/ComboBox.tsx

@@ -1,93 +1,93 @@
-import { useSelector } from "react-redux";
-import { Autocomplete, Popper, TextField } from "@mui/material";
-import { useTranslation } from "react-i18next";
-
-interface ComboBoxProps {
-  value: any;
-  onChangeCallBack: Function;
-  label: string;
-  disabled?: boolean;
-  required?: boolean;
-  options: Array<any>;
-  errorMessage?: any;
-  displayField: string;
-  valueField: string;
-  sx?: any;
-}
-
-const ComboBox: React.FC<ComboBoxProps> = (props) => {
-  const AppLayoutState = useSelector((state: any) => state.AppLayout);
-  const { t } = useTranslation();
-  const getValue = (v: string) => {
-    for (let option of props.options) {
-      if (option[props.valueField] == v) {
-        return option;
-      }
-    }
-    return null;
-  };
-  return (
-    <Autocomplete
-      sx={props.sx}
-      value={getValue(props.value)}
-      options={props.options}
-      disabled={props.disabled}
-      onChange={(event, newValue) => {
-        if (
-          props.onChangeCallBack !== undefined &&
-          props.onChangeCallBack != null
-        ) {
-          if (newValue != null) {
-            let v = newValue[props.valueField];
-            props.onChangeCallBack(v, newValue);
-          } else {
-            props.onChangeCallBack(null, null);
-          }
-        }
-      }}
-      clearOnBlur
-      handleHomeEndKeys
-      getOptionLabel={(option) => {
-        return option != null ? t(option[props.displayField]) : "";
-      }}
-      renderOption={(props1, option) => {
-        return (
-          <li {...props1}>
-            {option != null ? t(option[props.displayField]) : ""}
-          </li>
-        );
-      }}
-      slots={{
-        popper: (props: any) => (
-          <Popper
-            {...props}
-            style={{ ...props.style, direction: AppLayoutState.appDirection }}
-          />
-        ),
-      }}
-      renderInput={(params) => {
-        return (
-          <TextField
-            {...params}
-            required={props.required || false}
-            variant="outlined"
-            InputLabelProps={{ shrink: true }}
-            label={t(props.label)}
-            error={
-              props.errorMessage != null && props.errorMessage !== undefined
-                ? true
-                : false
-            }
-            helperText={
-              props.errorMessage != null && props.errorMessage !== undefined
-                ? t(props.errorMessage)
-                : ""
-            }
-          />
-        );
-      }}
-    />
-  );
-};
-
-export default ComboBox;
+import { useSelector } from "react-redux";
+import { Autocomplete, Popper, TextField } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+interface ComboBoxProps {
+  value: any;
+  onChangeCallBack: Function;
+  label: string;
+  disabled?: boolean;
+  required?: boolean;
+  options: Array<any>;
+  errorMessage?: any;
+  displayField: string;
+  valueField: string;
+  sx?: any;
+}
+
+const ComboBox: React.FC<ComboBoxProps> = (props) => {
+  const AppLayoutState = useSelector((state: any) => state.AppLayout);
+  const { t } = useTranslation();
+  const getValue = (v: string) => {
+    for (let option of props.options) {
+      if (option[props.valueField] == v) {
+        return option;
+      }
+    }
+    return null;
+  };
+  return (
+    <Autocomplete
+      sx={props.sx}
+      value={getValue(props.value)}
+      options={props.options}
+      disabled={props.disabled}
+      onChange={(event, newValue) => {
+        if (
+          props.onChangeCallBack !== undefined &&
+          props.onChangeCallBack != null
+        ) {
+          if (newValue != null) {
+            let v = newValue[props.valueField];
+            props.onChangeCallBack(v, newValue);
+          } else {
+            props.onChangeCallBack(null, null);
+          }
+        }
+      }}
+      clearOnBlur
+      handleHomeEndKeys
+      getOptionLabel={(option) => {
+        return option != null ? t(option[props.displayField]) : "";
+      }}
+      renderOption={(props1, option) => {
+        return (
+          <li {...props1}>
+            {option != null ? t(option[props.displayField]) : ""}
+          </li>
+        );
+      }}
+      slots={{
+        popper: (props: any) => (
+          <Popper
+            {...props}
+            style={{ ...props.style, direction: AppLayoutState.appDirection }}
+          />
+        ),
+      }}
+      renderInput={(params) => {
+        return (
+          <TextField
+            {...params}
+            required={props.required || false}
+            variant="outlined"
+            InputLabelProps={{ shrink: true }}
+            label={t(props.label)}
+            error={
+              props.errorMessage != null && props.errorMessage !== undefined
+                ? true
+                : false
+            }
+            helperText={
+              props.errorMessage != null && props.errorMessage !== undefined
+                ? t(props.errorMessage)
+                : ""
+            }
+          />
+        );
+      }}
+    />
+  );
+};
+
+export default ComboBox;

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/Datefield.tsx

@@ -1,65 +1,65 @@
-import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
-import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
-import moment from "moment";
-import { DATE_FORMAT } from "../../../../../util/constants";
-import { useTranslation } from "react-i18next";
-
-interface DatefieldProps {
-  value: string | null;
-  label: string;
-  disabled?: boolean;
-  required?: boolean;
-  sx?: any;
-  format?: string;
-  errorMessage?: any;
-  onChangeCallBack: Function;
-  [x: string | number | symbol]: unknown;
-}
-
-const Datefield: React.FC<DatefieldProps> = (props) => {
-  const { t } = useTranslation();
-  return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-      <DatePicker
-        value={
-          props.value != null && props.value !== undefined && props.value !== ""
-            ? moment(props.value, props?.format || DATE_FORMAT)
-            : null
-        }
-        sx={props.sx}
-        label={t(props.label)}
-        format={props?.format || DATE_FORMAT}
-        disabled={props.disabled}
-        onChange={(momentValue) => {
-          let v = null;
-          if (momentValue != null && momentValue.isValid()) {
-            v = momentValue.format(props?.format || DATE_FORMAT);
-          }
-          if (
-            props.onChangeCallBack !== undefined &&
-            props.onChangeCallBack != null
-          ) {
-            props.onChangeCallBack(v);
-          }
-        }}
-        slotProps={{
-          textField: {
-            InputLabelProps: { shrink: true },
-            variant: "outlined",
-            required: props.required,
-            error:
-              props.errorMessage !== undefined && props.errorMessage != null,
-            helperText:
-              props.errorMessage !== undefined && props.errorMessage != null ? (
-                <>{t(props.errorMessage)}</>
-              ) : (
-                <></>
-              ),
-          },
-        }}
-      />
-    </LocalizationProvider>
-  );
-};
-
-export default Datefield;
+import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+import moment from "moment";
+import { DATE_FORMAT } from "../../../../../util/constants";
+import { useTranslation } from "react-i18next";
+
+interface DatefieldProps {
+  value: string | null;
+  label: string;
+  disabled?: boolean;
+  required?: boolean;
+  sx?: any;
+  format?: string;
+  errorMessage?: any;
+  onChangeCallBack: Function;
+  [x: string | number | symbol]: unknown;
+}
+
+const Datefield: React.FC<DatefieldProps> = (props) => {
+  const { t } = useTranslation();
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+      <DatePicker
+        value={
+          props.value != null && props.value !== undefined && props.value !== ""
+            ? moment(props.value, props?.format || DATE_FORMAT)
+            : null
+        }
+        sx={props.sx}
+        label={t(props.label)}
+        format={props?.format || DATE_FORMAT}
+        disabled={props.disabled}
+        onChange={(momentValue) => {
+          let v = null;
+          if (momentValue != null && momentValue.isValid()) {
+            v = momentValue.format(props?.format || DATE_FORMAT);
+          }
+          if (
+            props.onChangeCallBack !== undefined &&
+            props.onChangeCallBack != null
+          ) {
+            props.onChangeCallBack(v);
+          }
+        }}
+        slotProps={{
+          textField: {
+            InputLabelProps: { shrink: true },
+            variant: "outlined",
+            required: props.required,
+            error:
+              props.errorMessage !== undefined && props.errorMessage != null,
+            helperText:
+              props.errorMessage !== undefined && props.errorMessage != null ? (
+                <>{t(props.errorMessage)}</>
+              ) : (
+                <></>
+              ),
+          },
+        }}
+      />
+    </LocalizationProvider>
+  );
+};
+
+export default Datefield;