@asaleh37/ui-base 26.2.16 → 27.5.26

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/useInterval.tsx

@@ -1,23 +1,23 @@
-import { useEffect, useRef } from "react";
-
-export default function useInterval(
-  callback: () => void,
-  delay: number | null
-) {
-  const savedCallback = useRef<() => void>(callback);
-
-  // Remember the latest callback
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  // Set up the interval
-  useEffect(() => {
-    if (delay === null) return;
-
-    const tick = () => savedCallback.current?.();
-
-    const id = setInterval(tick, delay);
-    return () => clearInterval(id);
-  }, [delay]);
-}
+import { useEffect, useRef } from "react";
+
+export default function useInterval(
+  callback: () => void,
+  delay: number | null
+) {
+  const savedCallback = useRef<() => void>(callback);
+
+  // Remember the latest callback
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval
+  useEffect(() => {
+    if (delay === null) return;
+
+    const tick = () => savedCallback.current?.();
+
+    const id = setInterval(tick, delay);
+    return () => clearInterval(id);
+  }, [delay]);
+}

package/src/hooks/useLoadingMask.tsx

@@ -1,16 +1,16 @@
-import { useDispatch } from "react-redux";
-import { hideLoadingMask, showLoadingMask } from "../redux/features/common/LoadingMaskSlice";
-
-
-const useLoadingMask = () => {
-  const dispatch = useDispatch();
-  const show = (message?: string) => {
-    dispatch(showLoadingMask(message));
-  };
-  const hide = () => {
-    dispatch(hideLoadingMask());
-  };
-  return { show, hide };
-};
-
-export default useLoadingMask;
+import { useDispatch } from "react-redux";
+import { hideLoadingMask, showLoadingMask } from "../redux/features/common/LoadingMaskSlice";
+
+
+const useLoadingMask = () => {
+  const dispatch = useDispatch();
+  const show = (message?: string) => {
+    dispatch(showLoadingMask(message));
+  };
+  const hide = () => {
+    dispatch(hideLoadingMask());
+  };
+  return { show, hide };
+};
+
+export default useLoadingMask;

package/src/hooks/useLookupGridColumn.tsx

@@ -1,35 +1,35 @@
-import { useSelector } from "react-redux";
-import { TemplateGridColDef } from "../components";
-import useAxios from "./useAxios";
-
-const useLookupGridColumn = () => {
-  const { handleGetRequest } = useAxios();
-  const AppLayout = useSelector((state: any) => state.AppLayout);
-  const getLookupOptions = async (lookupType: string) => {
-    let options = [];
-    await handleGetRequest({
-      endPointURI: "api/v1/public/system/lookup",
-      showMask: true,
-      parameters: { lookupType },
-      successCallBkFn: (response: any) => {
-        options = response.data;
-      },
-    });
-    return options;
-  };
-  const generateLookupGridColumn = async (props: TemplateGridColDef) => {
-    let options = await getLookupOptions(props.lookupType);
-    return {
-      ...props,
-      options,
-      displayField:
-        AppLayout.appDirection === "ltr"
-          ? "lookupEnDisplay"
-          : "lookupArDisplay",
-      valueField: "lookupValue",
-    };
-  };
-  return { generateLookupGridColumn, getLookupOptions };
-};
-
-export default useLookupGridColumn;
+import { useSelector } from "react-redux";
+import { TemplateGridColDef } from "../components";
+import useAxios from "./useAxios";
+
+const useLookupGridColumn = () => {
+  const { handleGetRequest } = useAxios();
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const getLookupOptions = async (lookupType: string) => {
+    let options = [];
+    await handleGetRequest({
+      endPointURI: "api/v1/public/system/lookup",
+      showMask: true,
+      parameters: { lookupType },
+      successCallBkFn: (response: any) => {
+        options = response.data;
+      },
+    });
+    return options;
+  };
+  const generateLookupGridColumn = async (props: TemplateGridColDef) => {
+    let options = await getLookupOptions(props.lookupType);
+    return {
+      ...props,
+      options,
+      displayField:
+        AppLayout.appDirection === "ltr"
+          ? "lookupEnDisplay"
+          : "lookupArDisplay",
+      valueField: "lookupValue",
+    };
+  };
+  return { generateLookupGridColumn, getLookupOptions };
+};
+
+export default useLookupGridColumn;

package/src/hooks/useParameterPanel.tsx

@@ -1,171 +1,171 @@
-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,
-        options: parameter?.parameterDataset
-          ? JSON.parse(parameter.parameterDataset)
-          : undefined,
-        optionDisplayField: parameter?.parameterDisplayField,
-        optionValueField: parameter?.parameterValueField,
-        commonStoreKey: parameter?.commonStoreKey,
-        comboboxGroupField: parameter?.groupField,
-        comboboxValueDataType: parameter?.comboboxValueDataType,
-        lookupType: parameter?.lookupType,
-        storeUrl: parameter?.comboboxStoreURl,
-        dataQueryId: parameter?.parameterDataQueryId,
-        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,
+        options: parameter?.parameterDataset
+          ? JSON.parse(parameter.parameterDataset)
+          : undefined,
+        optionDisplayField: parameter?.parameterDisplayField,
+        optionValueField: parameter?.parameterValueField,
+        commonStoreKey: parameter?.commonStoreKey,
+        comboboxGroupField: parameter?.groupField,
+        comboboxValueDataType: parameter?.comboboxValueDataType,
+        lookupType: parameter?.lookupType,
+        storeUrl: parameter?.comboboxStoreURl,
+        dataQueryId: parameter?.parameterDataQueryId,
+        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,
+  };
+};

package/src/index.ts

@@ -1,4 +1,4 @@
-export * from "./components";
-export * from "./hooks";
-export * from "./util";
-export * from "./types";
+export * from "./components";
+export * from "./hooks";
+export * from "./util";
+export * from "./types";

package/src/layout/DrawerHeader.tsx

@@ -1,10 +1,10 @@
-import { styled } from "@mui/material";
-
-export const DrawerHeader = styled("div")(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",  
-  // padding: theme.spacing(0, 1),
-  // necessary for content to be below app bar
-  ...theme.mixins.toolbar,
-  justifyContent: "flex-end",
-}));
+import { styled } from "@mui/material";
+
+export const DrawerHeader = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",  
+  // padding: theme.spacing(0, 1),
+  // necessary for content to be below app bar
+  ...theme.mixins.toolbar,
+  justifyContent: "flex-end",
+}));