@asaleh37/ui-base 1.2.29 → 25.1.9

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

@@ -1,237 +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;
+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/SystemLookupCombobox.tsx

@@ -1,55 +1,56 @@
-import { useEffect, useState } from "react";
-import { useAxios, useSession } from "../../../../../hooks";
-import ComboBox from "./ComboBox";
-import { useSelector } from "react-redux";
-
-type SystemLookupListProps = {
-  lookupType: string;
-  value: any;
-  onChangeCallBack: Function;
-  label: string;
-  disabled?: boolean;
-  required?: boolean;
-  errorMessage?: any;
-  sx?: any;
-};
-
-const SystemLookupCombobox: React.FC<SystemLookupListProps> = (props) => {
-  const AppLayout = useSelector((state: any) => state.AppLayout);
-  const session = useSession();
-  const [options, setOptions] = useState<Array<any>>([]);
-  const { handleGetRequest } = useAxios();
-
-  const loadLookupOptions = async () => {
-    await handleGetRequest({
-      endPointURI: "api/v1/public/system/lookup",
-      showMask: true,
-      parameters: { lookupType: props.lookupType },
-      successCallBkFn: (response: any) => {
-        setOptions(response.data);
-      },
-      failureCallBkFn: () => {
-        setOptions([]);
-      },
-    });
-  };
-
-  useEffect(() => {
-    if (props.lookupType) {
-      loadLookupOptions();
-    }
-  }, [props.lookupType, session.UserSession]);
-
-  return (
-    <ComboBox
-      {...props}
-      options={options}
-      displayField={
-        AppLayout.appDirection === "ltr" ? "lookupEnDisplay" : "lookupArDisplay"
-      }
-      valueField="lookupValue"
-    />
-  );
-};
-
-export default SystemLookupCombobox;
+import { useEffect, useState } from "react";
+import { useAxios, useSession } from "../../../../../hooks";
+import ComboBox from "./ComboBox";
+import { useSelector } from "react-redux";
+
+type SystemLookupListProps = {
+  lookupType: string;
+  value: any;
+  onChangeCallBack: Function;
+  label: string;
+  disabled?: boolean;
+  required?: boolean;
+  hidden?: boolean;
+  errorMessage?: any;
+  sx?: any;
+};
+
+const SystemLookupCombobox: React.FC<SystemLookupListProps> = (props) => {
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const session = useSession();
+  const [options, setOptions] = useState<Array<any>>([]);
+  const { handleGetRequest } = useAxios();
+
+  const loadLookupOptions = async () => {
+    await handleGetRequest({
+      endPointURI: "api/v1/public/system/lookup",
+      showMask: true,
+      parameters: { lookupType: props.lookupType },
+      successCallBkFn: (response: any) => {
+        setOptions(response.data);
+      },
+      failureCallBkFn: () => {
+        setOptions([]);
+      },
+    });
+  };
+
+  useEffect(() => {
+    if (props.lookupType) {
+      loadLookupOptions();
+    }
+  }, [props.lookupType, session.UserSession]);
+
+  return (
+    <ComboBox
+      {...props}
+      options={options}
+      displayField={
+        AppLayout.appDirection === "ltr" ? "lookupEnDisplay" : "lookupArDisplay"
+      }
+      valueField="lookupValue"
+    />
+  );
+};
+
+export default SystemLookupCombobox;

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

@@ -1,17 +1,20 @@
-import { TextField, TextFieldProps } from "@mui/material";
-import { useTranslation } from "react-i18next";
-
-const TemplateTextField: React.FC<Omit<TextFieldProps, "outlined">> = (
-  props
-) => {
-  const { t } = useTranslation();
-  return (
-    <TextField
-      {...props}
-      slotProps={{ inputLabel: { shrink: true } }}
-      label={<>{props?.label ? t(props.label) : ""}</>}
-    />
-  );
-};
-
-export default TemplateTextField;
+import { TextField, TextFieldProps } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+const TemplateTextField: React.FC<Omit<TextFieldProps, "outlined">> = (
+  props
+) => {
+  const { t } = useTranslation();
+  return (
+    <TextField
+      {...props}
+      hidden={true}
+      slotProps={{ inputLabel: { shrink: true, sx: { fontWeight: "bold" } } }}
+      label={<>{props?.label ? t(props.label) : ""}</>}
+      error={props?.error}
+      helperText={props?.helperText ? t(props.helperText) : undefined}
+    />
+  );
+};
+
+export default TemplateTextField;