@asaleh37/ui-base 25.8.26 → 25.8.31-1

package/src/hooks/useParameterPanel.tsx

@@ -0,0 +1,168 @@
+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) => {
+  console.log("useParameterPanel", "useParameterPanel called");
+  const [parametersValues, setParametersValues] = useState<any>({
+    ...props?.initialParameterValues,
+  });
+  // const [panelElements, setPanelElements] = useState<Array<FormElementProps>>(
+  //   []
+  // );
+  const panelElements = getFormElementsFromParameters(
+    props.parameters,
+    parametersValues
+  );
+  // useEffect(() => {
+  //   setPanelElements(
+  //     getFormElementsFromParameters(props.parameters, parametersValues)
+  //   );
+  // }, [props.parameters]);
+
+  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(parametersValues);
+                  }
+                },
+                reloadData: async () => {},
+                loadRecordById: async () => {},
+              }}
+              elements={panelElements}
+            />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+    );
+  };
+  return {
+    ParameterPanel,
+    parametersValues,
+    setParametersValues,
+    panelElements,
+  };
+};

package/src/layout/MainContent.tsx

@@ -36,7 +36,7 @@ const MainContent: React.FC = () => {
         stores[storeKey]?.url != "" &&
         stores[storeKey].autoLoad === true
       ) {
-        await handleGetRequest({
+        handleGetRequest({
           endPointURI: stores[storeKey].url,
           showMask: false,
           successCallBkFn: (response) => {
@@ -61,55 +61,52 @@ const MainContent: React.FC = () => {
     <CacheProvider
       value={AppLayoutState.appDirection === "ltr" ? cacheLtr : cacheRtl}
     >
-      {isAutoLoadLoaded ? (
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            // alignItems: "center",
-            justifyContent: "flex-start",
-            flex: 1,
-            overflow: "hidden",
-            padding: 3,
-          }}
-        >
-          <Routes>
-            {AppInfo.enableAdministrationModule
-              ? SYSTEM_ROUTES.map((route: SystemRoute, index) => {
-                  return (
-                    <Route
-                      key={"adm" + index}
-                      path={route.path}
-                      element={
-                        <RouteWrapper
-                          authority={route.authority}
-                          applicationModule={route.applicationModule}
-                        >
-                          <route.component />
-                        </RouteWrapper>
-                      }
-                    />
-                  );
-                })
-              : null}
-            {businessRoutes.map((route: SystemRoute, index) => {
-              return (
-                <Route
-                  key={"bs" + index}
-                  path={route.path}
-                  element={
-                    <RouteWrapper authority={route.authority}>
-                      <route.component />
-                    </RouteWrapper>
-                  }
-                />
-              );
-            })}
-          </Routes>
-        </Box>
-      ) : (
-        <></>
-      )}
+      {/* {isAutoLoadLoaded ? ( */}
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          // alignItems: "center",
+          justifyContent: "flex-start",
+          flex: 1,
+          overflow: "hidden",
+          padding: 3,
+        }}
+      >
+        <Routes>
+          {AppInfo.enableAdministrationModule
+            ? SYSTEM_ROUTES.map((route: SystemRoute, index) => {
+                return (
+                  <Route
+                    key={"adm" + index}
+                    path={route.path}
+                    element={
+                      <RouteWrapper
+                        authority={route.authority}
+                        applicationModule={route.applicationModule}
+                      >
+                        <route.component />
+                      </RouteWrapper>
+                    }
+                  />
+                );
+              })
+            : null}
+          {businessRoutes.map((route: SystemRoute, index) => {
+            return (
+              <Route
+                key={"bs" + index}
+                path={route.path}
+                element={
+                  <RouteWrapper authority={route.authority}>
+                    <route.component />
+                  </RouteWrapper>
+                }
+              />
+            );
+          })}
+        </Routes>
+      </Box>
     </CacheProvider>
   );
 };

package/src/locales/arabic/devLocalsAr.json

@@ -30,8 +30,8 @@
   "BLUE_PRINT_POINT_POINT_CODE": "Point code",
   "BLUE_PRINT_POINT_X": "X",
   "BLUE_PRINT_POINT_Y": "Y",
-  "DASHBOARD_SINGULAR": "dashboard",
-  "DASHBOARD_PLURAL": "dashboards",
+  "DASHBOARD_SINGULAR": "Dashboard",
+  "DASHBOARD_PLURAL": "Dashboards",
   "DASHBOARD_DASHBOARD_CODE": "Dashboard code",
   "DASHBOARD_DASHBOARD_NAME": "Dashboard name",
   "DASHBOARD_DASHBOARD_TITLE": "Dashboard title",

package/src/locales/english/devLocalsEn.json

@@ -30,8 +30,8 @@
   "BLUE_PRINT_POINT_POINT_CODE": "Point code",
   "BLUE_PRINT_POINT_X": "X",
   "BLUE_PRINT_POINT_Y": "Y",
-  "DASHBOARD_SINGULAR": "dashboard",
-  "DASHBOARD_PLURAL": "dashboards",
+  "DASHBOARD_SINGULAR": "Dashboard",
+  "DASHBOARD_PLURAL": "Dashboards",
   "DASHBOARD_DASHBOARD_CODE": "Dashboard code",
   "DASHBOARD_DASHBOARD_NAME": "Dashboard name",
   "DASHBOARD_DASHBOARD_TITLE": "Dashboard title",

package/src/navigationItems/index.tsx

@@ -31,5 +31,5 @@ export const findNavigationItemById = (
 };
 
 export const NavigationItems: TreeViewBaseItem<ExtendedTreeItemProps>[] = [
-  ...AdministrationItems,
+  ...AdministrationItems
 ];

package/src/routes/index.ts

@@ -1,4 +1,4 @@
-import Home from "../components/common/Home";
+
 import { ADMINISTRATION_ROUTES } from "./administration";
 import { SystemRoute } from "./types";
 

package/src/util/AppUtils.ts

@@ -1,3 +1,5 @@
+import { FormElementProps } from "../components";
+
 export function hasDigitsOnly(str: string) {
   return /^\d+$/.test(str);
 }