@asaleh37/ui-base 1.0.8 → 1.1.0

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

@@ -0,0 +1,60 @@
+import { Button } from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { RecordAction } from "../DataEntryTypes";
+import useSession from "../../../../hooks/UseSession";
+import { useConfirmationWindow } from "../../../../hooks/UseConfirmationWindow";
+
+const FormAction: React.FC<RecordAction> = (action: RecordAction) => {
+  const session = useSession();
+  const { ConfirmationWindow, setOpen: setConfirmationWindowState } =
+    useConfirmationWindow({
+      body: action?.confirmationMessage || "",
+      title: "Confirmation",
+      onConfirmationCallBk: () => {
+        action?.actionFn(action?.record);
+      },
+    });
+  if (
+    action?.authority === undefined ||
+    action?.authority === null ||
+    session.isUserAuthorized(action.authority)
+  ) {
+    return (
+      <>
+        <ConfirmationWindow />
+        <Button
+          variant={action?.formActionProps?.actionButtonVariant}
+          color={action?.formActionProps?.actionButtonColor}
+          onClick={() => {
+            if (action?.actionFn) {
+              if (action?.preActionValidation) {
+                if (!action.preActionValidation(action.record)) {
+                  return;
+                }
+              }
+              if (action?.isConfirmationRequired === true) {
+                setConfirmationWindowState(true);
+              } else {
+                action?.actionFn(action.record);
+              }
+            }
+          }}
+        >
+          {action?.icon ? (
+            <FontAwesomeIcon
+              icon={action.icon}
+              style={{ marginRight: 5, marginLeft: 5 }}
+            />
+          ) : (
+            <></>
+          )}
+          <div>{action?.label}</div>
+        </Button>
+      </>
+    );
+  } else {
+    return <></>;
+  }
+};
+
+export default FormAction;

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

@@ -0,0 +1,194 @@
+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";
+
+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 (props?.hidden === undefined || !props?.hidden) &&
+      !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
+            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={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()}
+          />
+        ) : (
+          <>Unknown field type</>
+        )}
+      </Grid2>
+    ) : (
+      <></>
+    );
+  } else {
+    return <></>;
+  }
+};
+
+export default FormElementField;

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

@@ -0,0 +1,98 @@
+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";
+
+const FormElementGroup: React.FC<FormElementGroupProps> = (
+  props: FormElementGroupProps
+) => {
+  return (
+    <>
+      <Grid2 container sx={props?.style} alignItems="flex-start">
+        {props?.label ? (
+          <Grid2
+            size={12}
+            sx={{ padding: 1, fontWeight: "bold", display: "flex" }}
+          >
+            {props?.icon ? (
+              <>
+                <FontAwesomeIcon
+                  icon={props.icon}
+                  style={{ marginRight: 5, marginLeft: 5 }}
+                />
+                <div>{props.label}</div>
+              </>
+            ) : (
+              <>{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

@@ -0,0 +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;

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

@@ -0,0 +1,94 @@
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../../redux/store";
+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: RootState) => 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

@@ -0,0 +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;

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

@@ -0,0 +1,64 @@
+import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+import moment from "moment";
+import { useTranslation } from "react-i18next";
+import { DATE_TIME_FORMAT } from "../../../../../util/constants";
+
+interface DatetimeFieldProps {
+  value: string | null;
+  label: string;
+  disabled?: boolean;
+  required?: boolean;
+  format?: string;
+  sx?: any;
+  errorMessage?: any;
+  onChangeCallBack: Function;
+  [x: string | number | symbol]: unknown;
+}
+
+const DatetimeField: React.FC<DatetimeFieldProps> = (props) => {
+  const { t } = useTranslation();
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+      <DateTimePicker
+        value={
+          props.value != null && props.value !== undefined && props.value !== ""
+            ? moment(props.value, props?.format || DATE_TIME_FORMAT)
+            : null
+        }
+        label={t(props.label)}
+        sx={props.sx}
+        format={props?.format || DATE_TIME_FORMAT}
+        disabled={props.disabled}
+        onChange={(momentValue) => {
+          let v = null;
+          if (momentValue != null && momentValue.isValid()) {
+            v = momentValue.format(props?.format || DATE_TIME_FORMAT);
+          }
+          if (
+            props.onChangeCallBack !== undefined &&
+            props.onChangeCallBack != null
+          ) {
+            props.onChangeCallBack(v);
+          }
+        }}
+        slotProps={{
+          textField: {
+            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 DatetimeField;