@asaleh37/ui-base 1.2.29 → 25.1.9

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

@@ -1,431 +1,380 @@
-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;
+import { useState } from "react";
+import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+import {
+  FormActionProps,
+  FormElementProps,
+  FormValueChangeCallBk,
+} from "../../templates/DataEntryTemplates/DataEntryTypes";
+import { useTranslation } from "react-i18next";
+import { useApiActions } from "../../../hooks";
+import { useSelector } from "react-redux";
+import { UseFormReturn } from "react-hook-form";
+
+export type WidgetType =
+  | "LineChart"
+  | "ColumnChart"
+  | "PieChart"
+  | "Card"
+  | "CircularProgress"
+  | "LinearProgress";
+
+const adjustFormAfterValueChange: FormValueChangeCallBk = (
+  formValues,
+  formActions,
+  formManager,
+  fieldName,
+  newValue
+) => {
+  if (fieldName) {
+    if (fieldName === "widgetType") {
+      if (newValue === "LineChart") {
+        formActions.showField("height");
+        formActions.showField("width");
+        formActions.showField("horizontalAxisField");
+        formActions.showField("horizontalAxisLabel");
+        formActions.showField("seriesKeys");
+        formActions.showField("verticalAxisField");
+        formActions.showField("verticalAxisLabel");
+      } else if (newValue === "ColumnChart") {
+        formActions.showField("height");
+        formActions.showField("width");
+        formActions.showField("horizontalAxisField");
+        formActions.showField("horizontalAxisLabel");
+        formActions.hideField("seriesKeys");
+        formActions.showField("verticalAxisField");
+        formActions.showField("verticalAxisLabel");
+      } else if (newValue === "PieChart") {
+        formActions.showField("height");
+        formActions.showField("width");
+        formActions.showField("horizontalAxisField");
+        formActions.hideField("horizontalAxisLabel");
+        formActions.hideField("seriesKeys");
+        formActions.showField("verticalAxisField");
+        formActions.hideField("verticalAxisLabel");
+      } else if (newValue === "Card") {
+        formActions.showField("height");
+        formActions.showField("width");
+        formActions.showField("horizontalAxisField");
+        formActions.hideField("horizontalAxisLabel");
+        formActions.hideField("seriesKeys");
+        formActions.showField("verticalAxisField");
+        formActions.hideField("verticalAxisLabel");
+      } else if (newValue === "CircularProgress") {
+        formActions.hideField("height");
+        formActions.hideField("width");
+        formActions.hideField("horizontalAxisField");
+        formActions.hideField("horizontalAxisLabel");
+        formActions.hideField("seriesKeys");
+        formActions.hideField("verticalAxisField");
+        formActions.hideField("verticalAxisLabel");
+      } else if (newValue === "LinearProgress") {
+        formActions.hideField("height");
+        formActions.hideField("width");
+        formActions.hideField("horizontalAxisField");
+        formActions.hideField("horizontalAxisLabel");
+        formActions.hideField("seriesKeys");
+        formActions.hideField("verticalAxisField");
+        formActions.hideField("verticalAxisLabel");
+      } 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);
+      }
+    }
+  } else {
+  }
+};
+
+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",
+        comboboxValueDataType: "string",
+        options: SystemWidgetTypes,
+        optionDisplayField: "name",
+        optionValueField: "name",
+      },
+    },
+    {
+      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: true,
+              fieldType: "text",
+            },
+          },
+          {
+            type: "field",
+            mode: "props",
+            props: {
+              fieldLabel: "WIDGET_HORIZONTAL_AXIS_LABEL",
+              fieldName: "horizontalAxisLabel",
+              required: true,
+              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: true,
+              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" }}
+      // formProps={{ formValuesChangeCallBk: adjustFormAfterValueChange }}
+    />
+  );
+};
+
+export default WidgetGrid;