@asaleh37/ui-base 25.12.122 → 25.12.123

package/src/hooks/UseWindow.tsx

@@ -1,111 +1,111 @@
-import { useEffect, useState } from "react";
-import {
-  AppBar,
-  Box,
-  IconButton,
-  Modal,
-  Paper,
-  Toolbar,
-  Typography,
-} from "@mui/material";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { useSelector } from "react-redux";
-
-export interface TemplateWindowProp {
-  height?: any;
-  width?: any;
-  minWidth?: any;
-  minHeight?: any;
-  windowIcon?: IconProp;
-  windowTitle?: string;
-  onCloseCallBack?: any;
-}
-
-interface WindowProps {
-  children?: React.ReactNode;
-}
-
-export const useWindow = (props: TemplateWindowProp) => {
-  const [windowState, setWindowState] = useState(false);
-  const appDirection = useSelector(
-    (state: any) => state.AppLayout.appDirection
-  );
-  const Window: React.FC<WindowProps> = (windowProps: WindowProps) => {
-    return (
-      <Modal
-        open={windowState}
-        sx={{ zIndex: (theme) => theme.zIndex.drawer }}
-        onClose={() => {
-          if (!windowState && props?.onCloseCallBack) {
-            props.onCloseCallBack();
-          }
-        }}
-      >
-        <Box
-          dir={appDirection}
-          sx={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            maxHeight: "90%",
-            transform: "translate(-50%, -50%)",
-            height: props?.height || "80%",
-            width: props?.width || "90%",
-            minWidth: props.minWidth || 400,
-            minHeight: props.minHeight || 200,
-            overflow: "hidden",
-            bgcolor: "modalBackground.main",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "flex-start",
-          }}
-        >
-          <AppBar position="static">
-            <Toolbar variant="dense">
-              <FontAwesomeIcon
-                icon={props?.windowIcon || "window-maximize"}
-                style={{ marginRight: 5 }}
-              />
-              <Typography variant="h6" color="inherit" component="div">
-                {props?.windowTitle || "window"}
-              </Typography>
-              <div style={{ flexGrow: 1 }}></div>
-              <IconButton
-                onClick={() => {
-                  setWindowState(false);
-                  if (
-                    props.onCloseCallBack != undefined &&
-                    props.onCloseCallBack != null
-                  ) {
-                    props.onCloseCallBack();
-                  }
-                }}
-                color="secondary"
-              >
-                <FontAwesomeIcon icon="xmark-square" />
-              </IconButton>
-            </Toolbar>
-          </AppBar>
-          <Paper
-            sx={{
-              // flexGrow: 1,
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              width: "100%",
-              height: "100%",
-              padding: 1,
-              // justifyContent: "center",
-              overflow: "hidden",
-            }}
-          >
-            {windowProps?.children}
-          </Paper>
-        </Box>
-      </Modal>
-    );
-  };
-  return { windowState, setWindowState, Window };
-};
+import { useEffect, useState } from "react";
+import {
+  AppBar,
+  Box,
+  IconButton,
+  Modal,
+  Paper,
+  Toolbar,
+  Typography,
+} from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { useSelector } from "react-redux";
+
+export interface TemplateWindowProp {
+  height?: any;
+  width?: any;
+  minWidth?: any;
+  minHeight?: any;
+  windowIcon?: IconProp;
+  windowTitle?: string;
+  onCloseCallBack?: any;
+}
+
+interface WindowProps {
+  children?: React.ReactNode;
+}
+
+export const useWindow = (props: TemplateWindowProp) => {
+  const [windowState, setWindowState] = useState(false);
+  const appDirection = useSelector(
+    (state: any) => state.AppLayout.appDirection
+  );
+  const Window: React.FC<WindowProps> = (windowProps: WindowProps) => {
+    return (
+      <Modal
+        open={windowState}
+        sx={{ zIndex: (theme) => theme.zIndex.drawer }}
+        onClose={() => {
+          if (!windowState && props?.onCloseCallBack) {
+            props.onCloseCallBack();
+          }
+        }}
+      >
+        <Box
+          dir={appDirection}
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            maxHeight: "90%",
+            transform: "translate(-50%, -50%)",
+            height: props?.height || "80%",
+            width: props?.width || "90%",
+            minWidth: props.minWidth || 400,
+            minHeight: props.minHeight || 200,
+            overflow: "hidden",
+            bgcolor: "modalBackground.main",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "flex-start",
+          }}
+        >
+          <AppBar position="static">
+            <Toolbar variant="dense">
+              <FontAwesomeIcon
+                icon={props?.windowIcon || "window-maximize"}
+                style={{ marginRight: 5 }}
+              />
+              <Typography variant="h6" color="inherit" component="div">
+                {props?.windowTitle || "window"}
+              </Typography>
+              <div style={{ flexGrow: 1 }}></div>
+              <IconButton
+                onClick={() => {
+                  setWindowState(false);
+                  if (
+                    props.onCloseCallBack != undefined &&
+                    props.onCloseCallBack != null
+                  ) {
+                    props.onCloseCallBack();
+                  }
+                }}
+                color="secondary"
+              >
+                <FontAwesomeIcon icon="xmark-square" />
+              </IconButton>
+            </Toolbar>
+          </AppBar>
+          <Paper
+            sx={{
+              // flexGrow: 1,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              width: "100%",
+              height: "100%",
+              padding: 1,
+              // justifyContent: "center",
+              overflow: "hidden",
+            }}
+          >
+            {windowProps?.children}
+          </Paper>
+        </Box>
+      </Modal>
+    );
+  };
+  return { windowState, setWindowState, Window };
+};

package/src/hooks/index.ts

@@ -1,22 +1,22 @@
-import { useRef } from "react";
-import { useTranslation } from "react-i18next";
-import { useForm } from "react-hook-form";
-import { useParams } from "react-router-dom";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useNavigate } from "react-router-dom";
-import * as z from "zod";
-import { useDispatch, useSelector } from "react-redux";
-export { default as useAxios } from "./useAxios";
-export { useConfirmationWindow } from "./UseConfirmationWindow";
-export { default as useLoadingMask } from "./useLoadingMask";
-export { useIsMobile } from "./UseMobile";
-export { default as useSession } from "./UseSession";
-export { useWindow } from "./UseWindow";
-export { default as useApiActions } from "./useApiActions";
-export { default as useCommonStore } from "./useCommonStore";
-export { useDispatch };
-export { useSelector };
-export { useParams };
-export { useForm, zodResolver, z };
-export { useTranslation };
-export { useNavigate };
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useForm } from "react-hook-form";
+import { useParams } from "react-router-dom";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate } from "react-router-dom";
+import * as z from "zod";
+import { useDispatch, useSelector } from "react-redux";
+export { default as useAxios } from "./useAxios";
+export { useConfirmationWindow } from "./UseConfirmationWindow";
+export { default as useLoadingMask } from "./useLoadingMask";
+export { useIsMobile } from "./UseMobile";
+export { default as useSession } from "./UseSession";
+export { useWindow } from "./UseWindow";
+export { default as useApiActions } from "./useApiActions";
+export { default as useCommonStore } from "./useCommonStore";
+export { useDispatch };
+export { useSelector };
+export { useParams };
+export { useForm, zodResolver, z };
+export { useTranslation };
+export { useNavigate };

package/src/hooks/useCommonStore.tsx

@@ -1,29 +1,29 @@
-import { useDispatch, useSelector } from "react-redux";
-import { StoreMetaData } from "../types";
-import useAxios from "./useAxios";
-import { setStoreData } from "../redux/features/common/CommonStoreSlice";
-
-const useCommonStore = (storeKey: string) => {
-  const dispatch = useDispatch();
-  const { handleGetRequest } = useAxios();
-  const store: StoreMetaData = useSelector(
-    (state: any) => state?.commonStores?.stores[storeKey]
-  );
-  const reload = async () => {
-    if (store && store?.url) {
-      await handleGetRequest({
-        endPointURI: store.url,
-        showMask: true,
-        successCallBkFn: (response: any) => {
-          dispatch(setStoreData({ storeKey, data: response.data }));
-        },
-        failureCallBkFn: () => {
-          dispatch(setStoreData({ storeKey, data: [] }));
-        },
-      });
-    }
-  };
-  return { reload, data: store?.data, store };
-};
-
-export default useCommonStore;
+import { useDispatch, useSelector } from "react-redux";
+import { StoreMetaData } from "../types";
+import useAxios from "./useAxios";
+import { setStoreData } from "../redux/features/common/CommonStoreSlice";
+
+const useCommonStore = (storeKey: string) => {
+  const dispatch = useDispatch();
+  const { handleGetRequest } = useAxios();
+  const store: StoreMetaData = useSelector(
+    (state: any) => state?.commonStores?.stores[storeKey]
+  );
+  const reload = async () => {
+    if (store && store?.url) {
+      await handleGetRequest({
+        endPointURI: store.url,
+        showMask: true,
+        successCallBkFn: (response: any) => {
+          dispatch(setStoreData({ storeKey, data: response.data }));
+        },
+        failureCallBkFn: () => {
+          dispatch(setStoreData({ storeKey, data: [] }));
+        },
+      });
+    }
+  };
+  return { reload, data: store?.data, store };
+};
+
+export default useCommonStore;

package/src/hooks/useParameterPanel.tsx

@@ -1,159 +1,159 @@
-import { useEffect, useState } from "react";
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Box,
-  FontAwesomeIcon,
-  FormElementProps,
-  TemplateForm,
-  Typography,
-} from "../components";
-import { useTranslation } from "react-i18next";
-
-export type EntityParameter = {
-  parameterCode: string;
-  parameterLabel: string;
-  parameterValueFormat?: string;
-  parameterValueField?: string;
-  parameterDisplayField?: string;
-  parameterDataset?: Array<any>;
-  parameterDataQueryId?: number;
-  hidden?: boolean;
-  mandatory?: boolean;
-  defaultValue?: any;
-  parameterType:
-    | "text"
-    | "number"
-    | "date"
-    | "datetime"
-    | "combobox"
-    | "checkbox"
-    | "html"
-    | "lookup";
-};
-
-export const getFormElementsFromParameters = (
-  parameters: Array<EntityParameter>,
-  parameterValues: any
-) => {
-  const formElements: Array<FormElementProps> = [];
-  for (const parameter of parameters) {
-    const formElement: FormElementProps = {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: parameter?.parameterLabel,
-        fieldName: parameter?.parameterCode,
-        fieldType: parameter?.parameterType,
-        hidden: parameter?.hidden,
-        formProps: { fieldSize: { lg: 4, md: 6, sm: 12 } },
-        required: parameter?.mandatory,
-        defaultValue:
-          parameterValues[parameter?.parameterCode] || parameter?.defaultValue,
-      },
-    };
-    formElements.push(formElement);
-  }
-  return formElements;
-};
-
-interface UseParameterPanelProps {
-  parameters: Array<EntityParameter>;
-  initialParameterValues?: any;
-}
-
-export const useParameterPanel = (props: UseParameterPanelProps) => {
-  const [parametersValues, setParametersValues] = useState<any>({
-    ...props?.initialParameterValues,
-  });
-  const panelElements = getFormElementsFromParameters(
-    props.parameters,
-    parametersValues
-  );
-
-  const ParameterPanel: React.FC<{
-    searchBtnClickCallBk: (params: any) => Promise<void>;
-  }> = ({ searchBtnClickCallBk }) => {
-    const { t } = useTranslation();
-    return (
-      <Accordion defaultExpanded sx={{ width: "100%" }}>
-        <AccordionSummary
-          expandIcon={
-            <FontAwesomeIcon
-              icon={{ prefix: "far", iconName: "square-caret-down" }}
-            />
-          }
-        >
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <FontAwesomeIcon
-              style={{ marginLeft: 5, marginRight: 5 }}
-              icon="search"
-            />
-            <Typography component="span">Filters</Typography>
-          </Box>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Box>
-            <TemplateForm
-              saveButtonSpecs={{
-                label: t("Filter"),
-                icon: "search",
-                actionButtonVariant: "outlined",
-                actionButtonColor: "success",
-              }}
-              cancelButtonSpecs={{
-                label: t("RESET_BTN_LABEL"),
-                icon: "eraser",
-                hidden: true,
-                actionButtonVariant: "outlined",
-                actionButtonColor: "error",
-              }}
-              actions={[
-                {
-                  label: t("RESET_BTN_LABEL"),
-                  icon: "eraser",
-                  isIdRequired: false,
-                  formActionProps: { enabled: true },
-                  actionFn: async (data, recordIdsToProcessActionOn) => {
-                    setParametersValues({});
-                  },
-                },
-              ]}
-              apiActions={{
-                deleteRecordById: async () => {
-                  return true;
-                },
-                saveRecord: async (params) => {
-                  if (params != undefined) {
-                    setParametersValues(params);
-                  } else {
-                    setParametersValues({});
-                  }
-                  if (searchBtnClickCallBk) {
-                    await searchBtnClickCallBk(params);
-                  }
-                },
-                reloadData: async () => {},
-                loadRecordById: async () => {},
-              }}
-              elements={panelElements}
-            />
-          </Box>
-        </AccordionDetails>
-      </Accordion>
-    );
-  };
-  return {
-    ParameterPanel,
-    parametersValues,
-    setParametersValues,
-    panelElements,
-  };
-};
+import { useEffect, useState } from "react";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  FontAwesomeIcon,
+  FormElementProps,
+  TemplateForm,
+  Typography,
+} from "../components";
+import { useTranslation } from "react-i18next";
+
+export type EntityParameter = {
+  parameterCode: string;
+  parameterLabel: string;
+  parameterValueFormat?: string;
+  parameterValueField?: string;
+  parameterDisplayField?: string;
+  parameterDataset?: Array<any>;
+  parameterDataQueryId?: number;
+  hidden?: boolean;
+  mandatory?: boolean;
+  defaultValue?: any;
+  parameterType:
+    | "text"
+    | "number"
+    | "date"
+    | "datetime"
+    | "combobox"
+    | "checkbox"
+    | "html"
+    | "lookup";
+};
+
+export const getFormElementsFromParameters = (
+  parameters: Array<EntityParameter>,
+  parameterValues: any
+) => {
+  const formElements: Array<FormElementProps> = [];
+  for (const parameter of parameters) {
+    const formElement: FormElementProps = {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: parameter?.parameterLabel,
+        fieldName: parameter?.parameterCode,
+        fieldType: parameter?.parameterType,
+        hidden: parameter?.hidden,
+        formProps: { fieldSize: { lg: 4, md: 6, sm: 12 } },
+        required: parameter?.mandatory,
+        defaultValue:
+          parameterValues[parameter?.parameterCode] || parameter?.defaultValue,
+      },
+    };
+    formElements.push(formElement);
+  }
+  return formElements;
+};
+
+interface UseParameterPanelProps {
+  parameters: Array<EntityParameter>;
+  initialParameterValues?: any;
+}
+
+export const useParameterPanel = (props: UseParameterPanelProps) => {
+  const [parametersValues, setParametersValues] = useState<any>({
+    ...props?.initialParameterValues,
+  });
+  const panelElements = getFormElementsFromParameters(
+    props.parameters,
+    parametersValues
+  );
+
+  const ParameterPanel: React.FC<{
+    searchBtnClickCallBk: (params: any) => Promise<void>;
+  }> = ({ searchBtnClickCallBk }) => {
+    const { t } = useTranslation();
+    return (
+      <Accordion defaultExpanded sx={{ width: "100%" }}>
+        <AccordionSummary
+          expandIcon={
+            <FontAwesomeIcon
+              icon={{ prefix: "far", iconName: "square-caret-down" }}
+            />
+          }
+        >
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <FontAwesomeIcon
+              style={{ marginLeft: 5, marginRight: 5 }}
+              icon="search"
+            />
+            <Typography component="span">Filters</Typography>
+          </Box>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box>
+            <TemplateForm
+              saveButtonSpecs={{
+                label: t("Filter"),
+                icon: "search",
+                actionButtonVariant: "outlined",
+                actionButtonColor: "success",
+              }}
+              cancelButtonSpecs={{
+                label: t("RESET_BTN_LABEL"),
+                icon: "eraser",
+                hidden: true,
+                actionButtonVariant: "outlined",
+                actionButtonColor: "error",
+              }}
+              actions={[
+                {
+                  label: t("RESET_BTN_LABEL"),
+                  icon: "eraser",
+                  isIdRequired: false,
+                  formActionProps: { enabled: true },
+                  actionFn: async (data, recordIdsToProcessActionOn) => {
+                    setParametersValues({});
+                  },
+                },
+              ]}
+              apiActions={{
+                deleteRecordById: async () => {
+                  return true;
+                },
+                saveRecord: async (params) => {
+                  if (params != undefined) {
+                    setParametersValues(params);
+                  } else {
+                    setParametersValues({});
+                  }
+                  if (searchBtnClickCallBk) {
+                    await searchBtnClickCallBk(params);
+                  }
+                },
+                reloadData: async () => {},
+                loadRecordById: async () => {},
+              }}
+              elements={panelElements}
+            />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+    );
+  };
+  return {
+    ParameterPanel,
+    parametersValues,
+    setParametersValues,
+    panelElements,
+  };
+};