@asaleh37/ui-base 1.2.2 → 1.2.4

package/src/components/administration/dev/ReportParametersForm.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+import TransferList from "../../templates/TransferList";
+import { Box, Button } from "@mui/material";
+import { toast } from "react-toastify";
+import { useAxios } from "../../../hooks";
+
+type ReportParametersFormProps = {
+  selectedRecord: any;
+  closeModalFn: () => void;
+};
+
+const ReportParametersForm: React.FC<ReportParametersFormProps> = (
+  props
+) => {
+  const [selectedOptions, setSelectedOptions] = useState([]);
+  const [availableOptions, setAvailableOptions] = useState([]);
+  const { handlePostRequest, handleGetRequest } = useAxios();
+
+  const getOptions = async () => {
+    await handleGetRequest({
+      endPointURI: "api/v1/dev/report/parameters",
+      showMask: true,
+      parameters: {
+        reportId: props.selectedRecord.id,
+      },
+      successCallBkFn: (response: any) => {
+        setSelectedOptions(response.data.selectedOptions);
+        setAvailableOptions(response.data.availableOptions);
+      },
+    });
+  };
+
+  useEffect(() => {
+    if (props.selectedRecord) {
+      getOptions();
+    }
+  }, [props.selectedRecord]);
+  const saveOptions = async () => {
+    await handlePostRequest({
+      endPointURI: "api/v1/dev/report/parameters",
+      showMask: true,
+      parameters: { reportId: props.selectedRecord.id },
+      data: selectedOptions,
+      successCallBkFn: () => {
+        toast.success("Your request has been proccesed successfully");
+        if (props.closeModalFn) {
+          props.closeModalFn();
+        }
+      },
+    });
+  };
+  return (
+    <>
+      <TransferList
+        displayField="parameterCode"
+        options={availableOptions}
+        valueField="id"
+        selectedOptions={selectedOptions}
+        setSelection={setSelectedOptions}
+      />
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          width: "100%",
+        }}
+      >
+        <Button
+          variant="contained"
+          onClick={saveOptions}
+          sx={{ marginRight: 1, marginLeft: 1 }}
+        >
+          Save
+        </Button>
+        <Button variant="contained" color="error" onClick={props.closeModalFn}>
+          Cancel
+        </Button>
+      </Box>
+    </>
+  );
+};
+
+export default ReportParametersForm;

package/src/components/administration/dev/WidgetGrid.tsx

@@ -0,0 +1,431 @@
+import { useState } from "react";
+import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+import {
+  FormActionProps,
+  FormElementProps,
+} from "../../templates/DataEntryTemplates/DataEntryTypes";
+import { useTranslation } from "react-i18next";
+import { useApiActions } from "../../../hooks";
+import { useSelector } from "react-redux";
+import { UseFormReturn } from "react-hook-form";
+
+type ValidationCritria = {
+  isVisible: boolean;
+  isMandatory: boolean;
+};
+
+export type WidgetType =
+  | "LineChart"
+  | "ColumnChart"
+  | "PieChart"
+  | "Card"
+  | "CircularProgress"
+  | "LinearProgress";
+
+type WidgetValidationOptions = {
+  height: ValidationCritria;
+  width: ValidationCritria;
+  horizontalAxisField: ValidationCritria;
+  horizontalAxisLabel: ValidationCritria;
+  seriesKeys: ValidationCritria;
+  verticalAxisField: ValidationCritria;
+  verticalAxisLabel: ValidationCritria;
+};
+
+type validationObjectType = {
+  [key in WidgetType]: WidgetValidationOptions;
+};
+
+const validationObject: validationObjectType = {
+  LineChart: {
+    height: { isMandatory: true, isVisible: true },
+    width: { isMandatory: true, isVisible: true },
+    horizontalAxisField: { isMandatory: true, isVisible: true },
+    horizontalAxisLabel: { isMandatory: true, isVisible: true },
+    seriesKeys: { isMandatory: false, isVisible: false },
+    verticalAxisField: { isMandatory: true, isVisible: true },
+    verticalAxisLabel: { isMandatory: true, isVisible: true },
+  },
+  ColumnChart: {
+    height: { isMandatory: true, isVisible: true },
+    width: { isMandatory: true, isVisible: true },
+    horizontalAxisField: { isMandatory: true, isVisible: true },
+    horizontalAxisLabel: { isMandatory: true, isVisible: true },
+    seriesKeys: { isMandatory: false, isVisible: false },
+    verticalAxisField: { isMandatory: true, isVisible: true },
+    verticalAxisLabel: { isMandatory: true, isVisible: true },
+  },
+  PieChart: {
+    height: { isMandatory: true, isVisible: true },
+    width: { isMandatory: true, isVisible: true },
+    horizontalAxisField: { isMandatory: true, isVisible: true },
+    horizontalAxisLabel: { isMandatory: false, isVisible: false },
+    seriesKeys: { isMandatory: false, isVisible: false },
+    verticalAxisField: { isMandatory: true, isVisible: true },
+    verticalAxisLabel: { isMandatory: false, isVisible: false },
+  },
+  Card: {
+    height: { isMandatory: true, isVisible: true },
+    width: { isMandatory: true, isVisible: true },
+    horizontalAxisField: { isMandatory: true, isVisible: true },
+    horizontalAxisLabel: { isMandatory: false, isVisible: false },
+    seriesKeys: { isMandatory: false, isVisible: false },
+    verticalAxisField: { isMandatory: true, isVisible: true },
+    verticalAxisLabel: { isMandatory: false, isVisible: false },
+  },
+  CircularProgress: {
+    height: { isMandatory: false, isVisible: false },
+    width: { isMandatory: false, isVisible: false },
+    horizontalAxisField: { isMandatory: false, isVisible: false },
+    horizontalAxisLabel: { isMandatory: false, isVisible: false },
+    seriesKeys: { isMandatory: false, isVisible: false },
+    verticalAxisField: { isMandatory: false, isVisible: false },
+    verticalAxisLabel: { isMandatory: false, isVisible: false },
+  },
+  LinearProgress: {
+    height: { isMandatory: false, isVisible: false },
+    width: { isMandatory: false, isVisible: false },
+    horizontalAxisField: { isMandatory: false, isVisible: false },
+    horizontalAxisLabel: { isMandatory: false, isVisible: false },
+    seriesKeys: { isMandatory: false, isVisible: false },
+    verticalAxisField: { isMandatory: false, isVisible: false },
+    verticalAxisLabel: { isMandatory: false, isVisible: false },
+  },
+};
+
+const adjustFormAccordingToWidgetType = (
+  value: any,
+  formActions: FormActionProps,
+  formManager: UseFormReturn
+) => {
+  if (value && validationObject[value]) {
+    const validationObjects: WidgetValidationOptions = validationObject[value];
+    const fields = Object.keys(validationObjects);
+    for (const field of fields) {
+      const validationCritria: ValidationCritria = validationObjects[field];
+      if (validationCritria.isVisible) {
+        formActions.showField(field);
+      } else {
+        formActions.hideField(field);
+        formManager.setValue(field, null);
+      }
+    }
+  } else {
+    formActions.hideField("height");
+    formManager.setValue("height", null);
+    formActions.hideField("width");
+    formManager.setValue("width", null);
+    formActions.hideField("horizontalAxisField");
+    formManager.setValue("horizontalAxisField", null);
+    formActions.hideField("horizontalAxisLabel");
+    formManager.setValue("horizontalAxisLabel", null);
+    formActions.hideField("seriesKeys");
+    formManager.setValue("seriesKeys", null);
+    formActions.hideField("verticalAxisField");
+    formManager.setValue("verticalAxisField", null);
+    formActions.hideField("verticalAxisLabel");
+    formManager.setValue("verticalAxisLabel", null);
+  }
+};
+
+const WidgetGrid: React.FC = () => {
+  const { t } = useTranslation();
+  const SystemDataQueries = useSelector(
+    (state: any) => state.commonStores.stores.SystemDataQueries.data
+  );
+  const SystemWidgetTypes = useSelector(
+    (state: any) => state.commonStores.stores.SystemWidgetTypes.data
+  );
+  const [data, setData] = useState([]);
+  const apiActions = useApiActions({
+    commonStoreKey: "SystemWidgets",
+    deleteById: "api/v1/dev/widget",
+    save: "api/v1/dev/widget",
+    findById: "api/v1/dev/widget",
+    setData: setData,
+  });
+
+  const formElements: Array<FormElementProps> = [
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "id",
+        fieldName: "id",
+        fieldType: "number",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "createTime",
+        fieldName: "createTime",
+        fieldType: "datetime",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "createdBy",
+        fieldName: "createdBy",
+        fieldType: "text",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "lastUpdateBy",
+        fieldName: "lastUpdateBy",
+        fieldType: "text",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "lastUpdateTime",
+        fieldName: "lastUpdateTime",
+        fieldType: "datetime",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "WIDGET_WIDGET_TYPE",
+        fieldName: "widgetType",
+        required: true,
+        fieldType: "combobox",
+        options: SystemWidgetTypes,
+        optionDisplayField: "name",
+        optionValueField: "name",
+        formProps: {
+          onValueChangeCallBack(
+            value,
+            formManager,
+            formActions,
+            selectedRecord
+          ) {
+            adjustFormAccordingToWidgetType(value, formActions, formManager);
+          },
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Query",
+        fieldName: "dataQueryId",
+        required: true,
+        fieldType: "combobox",
+        options: SystemDataQueries,
+        optionDisplayField: "queryName",
+        optionValueField: "id",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "WIDGET_WIDGET_NAME",
+        fieldName: "widgetName",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "WIDGET_ICON",
+        fieldName: "icon",
+        required: false,
+        fieldType: "text",
+      },
+    },
+
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "WIDGET_TITLE",
+        fieldName: "title",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "WIDGET_WIDGET_DESCRIPTION",
+        fieldName: "widgetDescription",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "WIDGET_HEIGHT",
+        fieldName: "height",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "WIDGET_WIDTH",
+        fieldName: "width",
+        required: false,
+        fieldType: "combobox",
+        options: [
+          { value: 1 },
+          { value: 2 },
+          { value: 3 },
+          { value: 4 },
+          { value: 5 },
+          { value: 6 },
+          { value: 7 },
+          { value: 8 },
+          { value: 9 },
+          { value: 10 },
+          { value: 11 },
+          { value: 12 },
+        ],
+        optionDisplayField: "value",
+        optionValueField: "value",
+      },
+    },
+
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "WIDGET_ENABLED",
+        fieldName: "enabled",
+        required: false,
+        fieldType: "checkbox",
+      },
+    },
+    {
+      type: "group",
+      props: {
+        style: { padding: 1, border: "1px solid black", width: "100%" },
+        label: "Data Specs",
+        elements: [
+          {
+            type: "field",
+            mode: "props",
+            props: {
+              fieldLabel: "WIDGET_HORIZONTAL_AXIS_FIELD",
+              fieldName: "horizontalAxisField",
+              required: false,
+              fieldType: "text",
+            },
+          },
+          {
+            type: "field",
+            mode: "props",
+            props: {
+              fieldLabel: "WIDGET_HORIZONTAL_AXIS_LABEL",
+              fieldName: "horizontalAxisLabel",
+              required: false,
+              fieldType: "text",
+            },
+          },
+
+          {
+            type: "field",
+            mode: "props",
+            props: {
+              fieldLabel: "WIDGET_SERIES_KEYS",
+              fieldName: "seriesKeys",
+              required: false,
+              fieldType: "text",
+            },
+          },
+
+          {
+            type: "field",
+            mode: "props",
+            props: {
+              fieldLabel: "WIDGET_VERTICAL_AXIS_FIELD",
+              fieldName: "verticalAxisField",
+              required: false,
+              fieldType: "text",
+            },
+          },
+          {
+            type: "field",
+            mode: "props",
+            props: {
+              fieldLabel: "WIDGET_VERTICAL_AXIS_LABEL",
+              fieldName: "verticalAxisLabel",
+              required: false,
+              fieldType: "text",
+            },
+          },
+        ],
+      },
+    },
+  ];
+
+  return (
+    <TemplateGrid
+      apiActions={apiActions}
+      data={data}
+      setData={setData}
+      editMode={{
+        editMode: "modal",
+        specs: { modalIcon: "chart-pie", modalTitle: "Widget" },
+      }}
+      formElements={formElements}
+      keyColumnName={"id"}
+      gridTitle={t("WIDGET_PLURAL")}
+      girdIcon="chart-pie"
+      editAction={{ isEnabled: true, authority: "WIDGET_EDIT" }}
+      deleteAction={{ isEnabled: true, authority: "WIDGET_DELETE" }}
+      formLoadCallBk={(
+        formActions: FormActionProps,
+        formManager: UseFormReturn,
+        record: any
+      ) => {
+        adjustFormAccordingToWidgetType(
+          record.widgetType,
+          formActions,
+          formManager
+        );
+      }}
+    />
+  );
+};
+
+export default WidgetGrid;