@asaleh37/ui-base 1.0.8 → 1.1.0

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

@@ -0,0 +1,237 @@
+import {
+  Accordion,
+  AccordionActions,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Button,
+  Grid,
+  TextField,
+} from "@mui/material";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect } from "react";
+import Datefield from "./Datefield";
+import DatetimeField from "./DatetimeField";
+import CheckBox from "./CheckBox";
+import ComboBox from "./ComboBox";
+import * as z from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+export interface FilterProp {
+  type: "text" | "number" | "date" | "datetime" | "boolean" | "droplist";
+  label?: string;
+  field: string;
+  defaultValue?: any;
+  options?: any;
+  displayField?: any;
+  valueField?: any;
+  mandatory?: boolean;
+}
+
+export interface FilterPanelProp {
+  filters: Array<FilterProp>;
+  filterValueState: any;
+  setFilterValueState: any;
+  submitAction: any;
+  actionButtonLabel?: string;
+  actionButtonIcon?: any;
+}
+
+const FiltersPanel: React.FC<FilterPanelProp> = (props) => {
+  const validationObject: any = {};
+  const initialValues: any = {};
+  const submitAction = () => {
+    if (props.submitAction !== undefined && props.submitAction != null) {
+      props.submitAction();
+    }
+  };
+  for (let filter of props.filters) {
+    initialValues[filter.field] = filter.defaultValue;
+    let x = null;
+    if (filter.mandatory === true) {
+      x = z
+        .string({ message: "This field is required" })
+        .min(1, { message: "This field is required" });
+    } else {
+      x = z.string().optional;
+    }
+    validationObject[filter.field] = x;
+  }
+  const schema = z.object(validationObject);
+  type FormData = z.infer<typeof schema>;
+  const handleFieldChange = (fieldName, fieldValue) => {
+    setValue(fieldName, fieldValue);
+    if (props.setFilterValueState) {
+      props.setFilterValueState((oldState) => {
+        let newState = structuredClone(oldState);
+        newState[fieldName] = fieldValue;
+        return newState;
+      });
+    }
+  };
+  const {
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+  });
+  const formValues = watch();
+  return (
+    <Accordion
+      sx={{ width: "100%", marginBottom: 2 }}
+      disableGutters
+      square
+      defaultExpanded={true}
+    >
+      <AccordionSummary expandIcon={<FontAwesomeIcon icon="caret-down" />}>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <FontAwesomeIcon
+            icon="magnifying-glass"
+            style={{ marginLeft: 4, marginRight: 4 }}
+          />
+          Filters
+        </Box>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Grid container spacing={2}>
+          {props.filters !== undefined &&
+            props.filters != null &&
+            props.filters.map((filter, index) => {
+              if (filter.type === "text" || filter.type === "number") {
+                return (
+                  <Grid item>
+                    <TextField
+                      sx={{ width: 300 }}
+                      type={filter.type}
+                      label={filter?.label || ""}
+                      helperText={<>{errors[filter.field]?.message || ""}</>}
+                      // value={props.filterValueState[filter.field]}
+                      // onChange={(e: any) => {
+                      //   handleFieldChange(filter.field, e.target.value);
+                      // }}
+                      value={props?.filterValueState[filter.field]}
+                      onChange={(e: any) => {
+                        handleFieldChange(filter.field, e.target.value);
+                      }}
+                    />
+                  </Grid>
+                );
+              } else if (filter.type === "date") {
+                return (
+                  <Grid item>
+                    <Datefield
+                      sx={{ width: 300 }}
+                      label={filter?.label || ""}
+                      // value={props.filterValueState[filter.field]}
+                      // onChangeCallBack={(v: any) => {
+                      //   handleFieldChange(filter.field, v);
+                      // }}
+                      helperText={<>{errors[filter.field]?.message || ""}</>}
+                      // value={formValues[filter.field]}
+                      value={props?.filterValueState[filter.field]}
+                      onChangeCallBack={(v: any) => {
+                        handleFieldChange(filter.field, v);
+                      }}
+                    />
+                  </Grid>
+                );
+              } else if (filter.type === "datetime") {
+                return (
+                  <Grid item>
+                    <DatetimeField
+                      sx={{ width: 300 }}
+                      label={filter?.label || ""}
+                      // value={props.filterValueState[filter.field]}
+                      // onChangeCallBack={(v: any) => {
+                      //   handleFieldChange(filter.field, v);
+                      // }}
+                      helperText={<>{errors[filter.field]?.message || ""}</>}
+                      // value={formValues[filter.field]}
+                      value={props?.filterValueState[filter.field]}
+                      onChangeCallBack={(v: any) => {
+                        handleFieldChange(filter.field, v);
+                      }}
+                    />
+                  </Grid>
+                );
+              } else if (filter.type === "boolean") {
+                return (
+                  <Grid item>
+                    <CheckBox
+                      sx={{ width: 300 }}
+                      label={filter?.label || ""}
+                      // value={props.filterValueState[filter.field]}
+                      // onChangeCallBack={(v: any) => {
+                      //   handleFieldChange(filter.field, v);
+                      // }}
+                      // value={formValues[filter.field]}
+                      value={props?.filterValueState[filter.field]}
+                      onChangeCallBack={(v: any) => {
+                        handleFieldChange(filter.field, v);
+                      }}
+                    />
+                  </Grid>
+                );
+              } else if (filter.type === "droplist") {
+                return (
+                  <Grid item>
+                    <ComboBox
+                      sx={{ width: 300 }}
+                      label={filter?.label || ""}
+                      options={filter.options}
+                      displayField={filter.displayField}
+                      valueField={filter.valueField}
+                      // value={props.filterValueState[filter.field]}
+                      // onChangeCallBack={(v: any) => {
+                      //   handleFieldChange(filter.field, v);
+                      // }}
+                      errorMessage={errors[filter.field]?.message}
+                      // value={formValues[filter.field]}
+                      value={props?.filterValueState[filter.field]}
+                      onChangeCallBack={(v: any) => {
+                        handleFieldChange(filter.field, v);
+                      }}
+                    />
+                  </Grid>
+                );
+              } else {
+                return <></>;
+              }
+            })}
+        </Grid>
+      </AccordionDetails>
+      <AccordionActions>
+        <Button
+          variant="contained"
+          onClick={handleSubmit(
+            (values) => {
+              submitAction();
+            },
+            (errors) => {
+              console.log("errors", errors);
+            }
+          )}
+          startIcon={
+            <FontAwesomeIcon
+              icon={props?.actionButtonIcon || "magnifying-glass"}
+            />
+          }
+        >
+          {props?.actionButtonLabel || "Search"}
+        </Button>
+      </AccordionActions>
+    </Accordion>
+  );
+};
+
+export default FiltersPanel;

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

@@ -0,0 +1,9 @@
+import { TextField, TextFieldProps } from "@mui/material";
+
+const TemplateTextField: React.FC<Omit<TextFieldProps, "outlined">> = (
+  props
+) => {
+  return <TextField {...props} slotProps={{ inputLabel: { shrink: true } }} />;
+};
+
+export default TemplateTextField;

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

@@ -0,0 +1,256 @@
+import { Box } from "@mui/system";
+import React, { useEffect, useState } from "react";
+import * as z from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useParams } from "react-router-dom";
+import { Button, Grid2 } from "@mui/material";
+import { toast } from "react-toastify";
+import FormElementGroup from "./FormElementGroup";
+import FormElementField from "./FormElementField";
+import FormAction from "./FormAction";
+import { constructValidationSchema, getAllFields } from "../DataEntryUtil";
+import {
+  FormElementProps,
+  RecordAction,
+  TemplateFormProps,
+} from "../DataEntryTypes";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const TemplateForm: React.FC<TemplateFormProps> = (
+  props: TemplateFormProps
+) => {
+  const fields = getAllFields(props.elements);
+  const [hiddenFields, setHiddenFields] = useState<string[]>([]);
+  const [disabledFields, setDisabledFields] = useState<string[]>([]);
+  const formSchema = z.object(constructValidationSchema(fields));
+  type FormData = z.infer<typeof formSchema>;
+  const formManager = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+  });
+  const formValues = formManager.watch();
+  const pathParameters = useParams();
+  const formRouteRecordIdParamName: any = props?.formRouteRecordIdParamName;
+
+  const loadRecord = async () => {
+    let idToLoad = null;
+    if (props?.recordIdToEdit) {
+      idToLoad = props.recordIdToEdit;
+    } else if (
+      formRouteRecordIdParamName &&
+      pathParameters[formRouteRecordIdParamName]
+    ) {
+      idToLoad = pathParameters[formRouteRecordIdParamName];
+    }
+    if (idToLoad) {
+      const retrievedRecord: any = await props.apiActions.loadRecordById(
+        idToLoad
+      );
+      if (retrievedRecord) {
+        formManager.reset({ ...retrievedRecord });
+      }
+    }
+  };
+
+  const saveRecord = async (record: any) => {
+    if (props?.preSaveValidation && !props.preSaveValidation(record)) {
+      return;
+    }
+    if (record) {
+      const savedRecord: any = await props.apiActions.saveRecord(record);
+      if (savedRecord) {
+        formManager.reset({ ...savedRecord });
+        if (props?.formSavedSuccessfullyCallBk) {
+          props.formSavedSuccessfullyCallBk(savedRecord);
+        }
+        if (props?.formCloseCallBk) {
+          props.formCloseCallBk();
+        }
+      }
+    }
+  };
+
+  const formActions = {
+    setFieldValue: (fieldName: string, fieldValue: any) => {
+      formManager.setValue(fieldName, fieldValue);
+    },
+    hideField: (fieldName: string) => {
+      setHiddenFields((oldValues) => {
+        const newValues = [...oldValues, fieldName];
+        return newValues;
+      });
+    },
+    showField: (fieldName: string) => {
+      setHiddenFields((oldValues) => {
+        const newValues = oldValues.filter((x) => x !== fieldName);
+        return newValues;
+      });
+    },
+    disableField: (fieldName: string) => {
+      setDisabledFields((oldValues) => {
+        const newValues = [...oldValues, fieldName];
+        return newValues;
+      });
+    },
+    enableField: (fieldName: string) => {
+      setDisabledFields((oldValues) => {
+        const newValues = oldValues.filter((x) => x !== fieldName);
+        return newValues;
+      });
+    },
+  };
+
+  useEffect(() => {
+    loadRecord();
+  }, [props?.recordIdToEdit]);
+
+  return (
+    <>
+      <Box
+        sx={{
+          display: "flex",
+          flex: 1,
+          width: "100%",
+          height: "fit-content",
+          flexDirection: "column",
+          alignItems: "center",
+          overflow: "auto",
+        }}
+      >
+        <Grid2 sx={{ width: "100%" }} container>
+          {props.elements.map((formElement: FormElementProps) => {
+            if (formElement.type === "group") {
+              return (
+                <FormElementGroup
+                  {...formElement.props}
+                  formManager={formManager}
+                  formValues={formValues}
+                  formActions={formActions}
+                  hiddenFields={hiddenFields}
+                  disabledFields={disabledFields}
+                />
+              );
+            } else if (
+              formElement.type === "field" &&
+              formElement.mode === "props"
+            ) {
+              return (
+                <FormElementField
+                  fieldInfo={formElement.props}
+                  formManager={formManager}
+                  formValues={formValues}
+                  formActions={formActions}
+                  hiddenFields={hiddenFields}
+                  disabledFields={disabledFields}
+                />
+              );
+            } else if (
+              formElement.type === "field" &&
+              formElement.mode === "node"
+            ) {
+              return (
+                <Grid2
+                  size={
+                    formElement?.props?.formProps?.fieldSize || {
+                      lg: 3,
+                      md: 6,
+                      xs: 12,
+                    }
+                  }
+                  sx={{ padding: 1, width: "100%" }}
+                >
+                  <formElement.node
+                    formManager={formManager}
+                    formValues={formValues}
+                  />
+                </Grid2>
+              );
+            }
+          })}
+        </Grid2>
+      </Box>
+
+      <Box
+        sx={{
+          display: "flex",
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "flex-start",
+        }}
+      >
+        {props?.actions ? (
+          props.actions.map((action: RecordAction) => {
+            if (action?.formActionProps?.enabled === true) {
+              return <FormAction {...action} record={formValues} />;
+            } else {
+              return <></>;
+            }
+          })
+        ) : (
+          <></>
+        )}
+        <div style={{ flex: 1 }}></div>
+        <Button
+          variant={
+            props?.saveButtonSpecs?.actionButtonVariant
+              ? props.saveButtonSpecs.actionButtonVariant
+              : "contained"
+          }
+          sx={{ m: 1 }}
+          startIcon={
+            props?.saveButtonSpecs?.icon ? (
+              <FontAwesomeIcon icon={props.saveButtonSpecs.icon} />
+            ) : null
+          }
+          color={
+            props?.saveButtonSpecs?.actionButtonColor
+              ? props.saveButtonSpecs.actionButtonColor
+              : "primary"
+          }
+          onClick={formManager.handleSubmit(
+            (values) => {
+              console.log("form values", values);
+              saveRecord(values);
+            },
+            (errors) => {
+              toast.error(
+                "Form Data is not valid, make sure you have all field with valid data"
+              );
+              console.log("form validation error", errors);
+            }
+          )}
+        >
+          {props?.saveButtonSpecs?.label || "save"}
+        </Button>
+        <Button
+          variant={
+            props?.cancelButtonSpecs?.actionButtonVariant
+              ? props.cancelButtonSpecs.actionButtonVariant
+              : "contained"
+          }
+          startIcon={
+            props?.cancelButtonSpecs?.icon ? (
+              <FontAwesomeIcon icon={props.cancelButtonSpecs.icon} />
+            ) : null
+          }
+          color={
+            props?.cancelButtonSpecs?.actionButtonColor
+              ? props.cancelButtonSpecs.actionButtonColor
+              : "error"
+          }
+          sx={{ m: 1 }}
+          onClick={() => {
+            if (props?.formCloseCallBk) {
+              props.formCloseCallBk();
+            }
+            formManager.reset({});
+          }}
+        >
+          {props?.cancelButtonSpecs?.label || "cancel"}
+        </Button>
+      </Box>
+    </>
+  );
+};
+
+export default TemplateForm;

package/src/components/templates/DataEntryTemplates/TemplateDataGrid/DataGridColumnsUtil.tsx

@@ -0,0 +1,188 @@
+import moment from "moment";
+import { TemplateGridColDef } from "../DataEntryTypes";
+import Datefield from "../TemplateDataForm/FormFields/Datefield";
+import { DATE_FORMAT, DATE_TIME_FORMAT } from "../../../../util/constants";
+import DatetimeField from "../TemplateDataForm/FormFields/DatetimeField";
+import ComboBox from "../TemplateDataForm/FormFields/ComboBox";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import CheckBox from "../TemplateDataForm/FormFields/CheckBox";
+
+export const generateDateColumn: any = (colDef: TemplateGridColDef) => {
+  const column: TemplateGridColDef = {
+    ...colDef,
+    type: "string",
+    renderEditCell: (params: any) => {
+      return (
+        <Datefield
+          sx={{ width: "100%" }}
+          label=""
+          value={params.value}
+          onChangeCallBack={(v: any) => {
+            params.api.setEditCellValue({
+              id: params.id,
+              field: params.field,
+              value: v,
+            });
+          }}
+        />
+      );
+    },
+    valueParser: (value: any, row: any, column: any) => {
+      let v = null;
+      if (value !== null) {
+        v = moment(value).format(DATE_FORMAT);
+      }
+      return v;
+    },
+    valueFormatter: (value: any, row: any, column: any) => {
+      return row[column.field];
+    },
+  };
+  return column;
+};
+
+export const generateDateTimeColumn: any = (colDef: TemplateGridColDef) => {
+  const column: TemplateGridColDef = {
+    ...colDef,
+    type: "string",
+    renderEditCell: (params: any) => {
+      return (
+        <DatetimeField
+          sx={{ width: "100%" }}
+          label=""
+          value={params.value}
+          onChangeCallBack={(v: any) => {
+            params.api.setEditCellValue({
+              id: params.id,
+              field: params.field,
+              value: v,
+            });
+          }}
+        />
+      );
+    },
+    valueParser: (value: any, row: any, column: any) => {
+      let v = null;
+      if (value !== null) {
+        v = moment(value).format(DATE_TIME_FORMAT);
+      }
+      return v;
+    },
+    valueFormatter: (value: any, row: any, column: any) => {
+      return row[column.field];
+    },
+  };
+  return column;
+};
+
+type ComboBoxColumnProps = TemplateGridColDef & {
+  options: Array<any>;
+  displayField: string;
+  valueField: string;
+};
+export const generateComboColumn: (
+  props: ComboBoxColumnProps
+) => TemplateGridColDef = (colDef: ComboBoxColumnProps) => {
+  const column: TemplateGridColDef = {
+    ...colDef,
+    type: "custom",
+    valueGetter: (value) => {
+      if (value) {
+        return value + "";
+      }
+      return value;
+    },
+    renderCell: (parameters: any) => {
+      let record = null;
+      try {
+        record = parameters.colDef.options.find(
+          (item: any) => item[parameters.colDef.valueField] == parameters.value
+        );
+      } catch (e) {}
+      return (
+        <div>
+          {record != null
+            ? record[parameters.colDef.displayField]
+            : parameters.value}
+        </div>
+      );
+    },
+
+    renderEditCell: (params: any) => {
+      return (
+        <ComboBox
+          {...params}
+          sx={{ width: "100%" }}
+          options={colDef.options}
+          valueField={colDef.valueField}
+          displayField={colDef.displayField}
+          onChangeCallBack={(v: any, selectedRecord: any) => {
+            if (v === null) {
+              params.api.setEditCellValue({
+                id: params.id,
+                field: params.field,
+                value: null,
+              });
+            }
+            params.api.setEditCellValue({
+              id: params.id,
+              field: params.field,
+              value: v + "",
+            });
+          }}
+        />
+      );
+    },
+  };
+  return column;
+};
+
+type CheckBoxColumnProps = TemplateGridColDef & {
+  checkedValue?: string;
+  unCheckedValue?: string;
+};
+
+export const generateCheckBoxColumn: (
+  props: CheckBoxColumnProps
+) => TemplateGridColDef = (colDef: CheckBoxColumnProps) => {
+  return {
+    ...colDef,
+    type: "custom",
+    valueGetter: (value) => {
+      if (value == null || value == undefined) {
+        return null;
+      } else {
+        return value + "";
+      }
+    },
+    renderCell: (parameters: any) => {
+      const value = parameters?.value;
+      if (
+        value === colDef.checkedValue ||
+        value === "true" ||
+        value === 1 ||
+        value === true
+      ) {
+        return <FontAwesomeIcon icon="check" color="green" />;
+      } else {
+        return <FontAwesomeIcon icon="xmark" color="red" />;
+      }
+    },
+    renderEditCell: (params: any) => {
+      return (
+        <CheckBox
+          {...params}
+          checkedValue={colDef?.checkedValue || "true"}
+          unCheckedValue={colDef?.unCheckedValue || "false"}
+          onChangeCallBack={(v: any) => {
+            params.api.setEditCellValue({
+              id: params.id,
+              field: params.field,
+              value: v + "",
+            });
+          }}
+        />
+      );
+    },
+  };
+};