@asaleh37/ui-base 25.8.26-1 → 25.8.30

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/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

@@ -32,4 +32,11 @@ export const findNavigationItemById = (
 
 export const NavigationItems: TreeViewBaseItem<ExtendedTreeItemProps>[] = [
   ...AdministrationItems,
+  {
+    icon: "user",
+    label: "Example Grid",
+    id: "example",
+    action: "NAVIGATION",
+    actionPayload: { path: "example" },
+  },
 ];

package/src/routes/index.ts

@@ -1,5 +1,9 @@
 import Home from "../components/common/Home";
+import ExampleGrid from "../examples/ExampleGrid";
 import { ADMINISTRATION_ROUTES } from "./administration";
 import { SystemRoute } from "./types";
 
-export const SYSTEM_ROUTES: Array<SystemRoute> = [...ADMINISTRATION_ROUTES];
+export const SYSTEM_ROUTES: Array<SystemRoute> = [
+  ...ADMINISTRATION_ROUTES,
+  { path: "example", component: ExampleGrid },
+];

package/src/util/AppUtils.ts

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