@asaleh37/ui-base 1.2.29 → 25.1.9

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

@@ -1,106 +1,108 @@
-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}
+                    formValuesChangeCallBk={props?.formValuesChangeCallBk}
+                  />
+                );
+              } 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}
+                    formValuesChangeCallBk={props?.formValuesChangeCallBk}
+                  />
+                );
+              } 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,66 @@
-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;
+  hidden?: 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}
+      hidden={props?.hidden || false}
+      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,164 @@
-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";
+import { useEffect, useState } from "react";
+import { useAxios } from "../../../../../hooks";
+
+interface ComboBoxProps {
+  value: any;
+  onChangeCallBack: Function;
+  label: string;
+  disabled?: boolean;
+  required?: boolean;
+  groupField?: string;
+
+  commonStoreKey?: string;
+  dataQueryId?: number;
+  storeUrl?: string;
+  storeLoadParam?: any;
+
+  options?: Array<any>;
+  errorMessage?: any;
+  hidden?: boolean;
+  displayField: string;
+  valueField: string;
+  sx?: any;
+}
+
+const ComboBox: React.FC<ComboBoxProps> = (props) => {
+  const AppLayoutState = useSelector((state: any) => state.AppLayout);
+  const [comboboxData, setComboboxData] = useState<Array<any>>(
+    props?.options || []
+  );
+  const commonStoreData = useSelector(
+    (state: any) => state?.commonStores?.stores[props?.commonStoreKey]?.data
+  );
+  const { handleGetRequest } = useAxios();
+  const loadComboboxData = async () => {
+    if (props?.storeUrl) {
+      await handleGetRequest({
+        endPointURI: props.storeUrl,
+        showMask: false,
+        parameters: props?.storeLoadParam,
+        successCallBkFn: (response) => {
+          setComboboxData(response.data);
+        },
+        failureCallBkFn: () => {
+          setComboboxData([]);
+        },
+      });
+    } else if (props?.dataQueryId) {
+      await handleGetRequest({
+        endPointURI: "api/v1/dev/query/result",
+        showMask: false,
+        parameters: { queryId: props.dataQueryId, ...props?.storeLoadParam },
+        successCallBkFn: (response) => {
+          setComboboxData(response.data);
+        },
+        failureCallBkFn: () => {
+          setComboboxData([]);
+        },
+      });
+    } else if (props?.options) {
+      setComboboxData(props.options);
+    }
+  };
+  useEffect(() => {
+    if (props?.commonStoreKey) {
+      setComboboxData(commonStoreData);
+    } else {
+      loadComboboxData();
+    }
+  }, [
+    props?.storeUrl,
+    props?.storeLoadParam,
+    props?.dataQueryId,
+    props?.commonStoreKey,
+    props?.options,
+    commonStoreData,
+  ]);
+
+  const { t } = useTranslation();
+  const getValue = (v: string) => {
+    for (let option of comboboxData) {
+      if (option[props.valueField] == v) {
+        return option;
+      }
+    }
+    return null;
+  };
+  return (
+    <Autocomplete
+      sx={props.sx}
+      value={getValue(props.value)}
+      options={comboboxData}
+      disabled={props.disabled}
+      hidden={props?.hidden || false}
+      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 }}
+          />
+        ),
+      }}
+      groupBy={
+        props?.groupField
+          ? (option: any) => {
+              return option[props.groupField] ? option[props.groupField] : "";
+            }
+          : undefined
+      }
+      renderInput={(params) => {
+        return (
+          <TextField
+            {...params}
+            required={props.required || false}
+            variant="outlined"
+            slotProps={{
+              inputLabel: { shrink: true, sx: { fontWeight: "bold" } },
+            }}
+            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;