@asaleh37/ui-base 25.6.19-6 → 25.6.21

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

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

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;