@asaleh37/ui-base 25.8.26 → 25.8.31-1

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

@@ -3,17 +3,13 @@ import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/Te
 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";
 
-type ValidationCritria = {
-  isVisible: boolean;
-  isMandatory: boolean;
-};
-
 export type WidgetType =
   | "LineChart"
   | "ColumnChart"
@@ -22,109 +18,81 @@ export type WidgetType =
   | "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
+const adjustFormAfterValueChange: FormValueChangeCallBk = (
+  formValues,
+  formActions,
+  formManager,
+  fieldName,
+  newValue
 ) => {
-  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);
+  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(field);
-        formManager.setValue(field, null);
+        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 {
-    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);
   }
 };
 
@@ -219,19 +187,10 @@ const WidgetGrid: React.FC = () => {
         fieldName: "widgetType",
         required: true,
         fieldType: "combobox",
+        comboboxValueDataType: "string",
         options: SystemWidgetTypes,
         optionDisplayField: "name",
         optionValueField: "name",
-        formProps: {
-          onValueChangeCallBack(
-            value,
-            formManager,
-            formActions,
-            selectedRecord
-          ) {
-            adjustFormAccordingToWidgetType(value, formActions, formManager);
-          },
-        },
       },
     },
     {
@@ -347,7 +306,7 @@ const WidgetGrid: React.FC = () => {
             props: {
               fieldLabel: "WIDGET_HORIZONTAL_AXIS_FIELD",
               fieldName: "horizontalAxisField",
-              required: false,
+              required: true,
               fieldType: "text",
             },
           },
@@ -357,21 +316,21 @@ const WidgetGrid: React.FC = () => {
             props: {
               fieldLabel: "WIDGET_HORIZONTAL_AXIS_LABEL",
               fieldName: "horizontalAxisLabel",
-              required: false,
+              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_SERIES_KEYS",
+          //     fieldName: "seriesKeys",
+          //     required: false,
+          //     fieldType: "text",
+          //   },
+          // },
 
           {
             type: "field",
@@ -379,20 +338,20 @@ const WidgetGrid: React.FC = () => {
             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,
+              required: true,
               fieldType: "text",
             },
           },
+          // {
+          //   type: "field",
+          //   mode: "props",
+          //   props: {
+          //     fieldLabel: "WIDGET_VERTICAL_AXIS_LABEL",
+          //     fieldName: "verticalAxisLabel",
+          //     required: false,
+          //     fieldType: "text",
+          //   },
+          // },
         ],
       },
     },
@@ -413,17 +372,7 @@ const WidgetGrid: React.FC = () => {
       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
-        );
-      }}
+      // formProps={{ formValuesChangeCallBk: adjustFormAfterValueChange }}
     />
   );
 };

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

@@ -155,7 +155,8 @@ const WorkflowDocumentGrid: React.FC = () => {
       type: "field",
       mode: "props",
       props: {
-        fieldLabel: "Report To be Attached For The Document ( will be passed a parameter called doc_id)",
+        fieldLabel:
+          "Report To be Attached For The Document ( will be passed a parameter called doc_id)",
         fieldName: "documentReportId",
         required: false,
         fieldType: "combobox",
@@ -231,21 +232,6 @@ const WorkflowDocumentGrid: React.FC = () => {
               fieldName: "useSystemCon",
               required: false,
               fieldType: "checkbox",
-              formProps: {
-                onValueChangeCallBack(
-                  value,
-                  formManager,
-                  formActions,
-                  selectedRecord
-                ) {
-                  if (value) {
-                    formActions.hideField("documentConId");
-                    formManager.setValue("documentConId", null);
-                  } else {
-                    formActions.showField("documentConId");
-                  }
-                },
-              },
             },
           },
           {
@@ -326,13 +312,6 @@ const WorkflowDocumentGrid: React.FC = () => {
       </WorkflowActionWindow>
       <TemplateGrid
         apiActions={apiActions}
-        formLoadCallBk={(formActions, formManager, record) => {
-          if (record.useSystemCon === true) {
-            formActions.hideField("documentConId");
-          } else {
-            formActions.showField("documentConId");
-          }
-        }}
         data={data}
         setData={setData}
         rowActions={[

package/src/components/templates/DataEntryTemplates/DataEntryTypes.ts

@@ -10,6 +10,7 @@ import {
 import { UseFormReturn } from "react-hook-form";
 import { SxProps, TextFieldProps } from "@mui/material";
 import { ApiActions } from "../../../hooks/useApiActions";
+import { z } from "zod";
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> &
   Partial<Pick<T, K>>;
 
@@ -18,6 +19,7 @@ export type RecordAction = {
   label?: string;
   icon: IconProp;
   isConfirmationRequired?: boolean;
+  isIdRequired?: Boolean;
   confirmationMessage?: string;
   authority?: string;
   getActionIconStyleForRecord?: (record: any) => object;
@@ -131,11 +133,20 @@ export type TemplateGridProps = {
   setRowSelectionModel?: any;
   setSelectedRecord?: any;
   setSelectedRecordIds?: any;
-  formLoadCallBk?: (
-    formActions: FormActionProps,
-    formManager: UseFormReturn,
-    record: any
-  ) => void;
+  formProps?: {
+    formValuesChangeCallBk?: FormValueChangeCallBk;
+  };
+  validationSchema?: z.ZodObject<
+    any,
+    "strip",
+    z.ZodTypeAny,
+    {
+      [x: string]: any;
+    },
+    {
+      [x: string]: any;
+    }
+  >;
   editMode:
     | { editMode: "none" }
     | {
@@ -160,6 +171,7 @@ export type TemplateGridProps = {
           formRoute: string;
         };
       };
+
   muiProps?: MakeOptional<DataGridPremiumProps, "rows" | "columns">;
 };
 
@@ -204,14 +216,9 @@ export type RecordFieldProps = {
   gridProps?: TemplateGridColumnProps;
   formProps?: {
     fieldSize?: FormElementSize;
+    fieldLabelFn?: (record: any) => string;
     fieldHeight?: number;
     style?: SxProps;
-    onValueChangeCallBack?: (
-      value: any,
-      formManager: UseFormReturn,
-      formActions?: FormActionProps,
-      selectedRecord?: any
-    ) => void;
   };
 };
 
@@ -228,6 +235,15 @@ export type FormElementGroupProps = {
   disabledFields?: string[];
 };
 
+export type FormValueChangeCallBk = (
+  formValues: any,
+  formActions: FormActionProps,
+  formManager: UseFormReturn,
+  fieldName?: string,
+  newValue?: any,
+  selectedRecord?: any
+) => void;
+
 export type FormElementFieldProps = {
   fieldInfo: RecordFieldProps;
   formManager?: UseFormReturn;
@@ -235,6 +251,8 @@ export type FormElementFieldProps = {
   formActions?: any;
   hiddenFields?: string[];
   disabledFields?: string[];
+  formValuesChangeCallBk?: FormValueChangeCallBk;
+  
 };
 
 export type FormElementNodeProps = {
@@ -281,11 +299,7 @@ export type TemplateFormProps = {
   apiActions: ApiActions;
   preSaveValidation?: (record: any) => boolean | Promise<boolean>;
   formSavedSuccessfullyCallBk?: (response: any) => void;
-  formLoadCallBk?: (
-    formActions: FormActionProps,
-    formManager: UseFormReturn,
-    record: any
-  ) => void;
+  formValuesChangeCallBk?: FormValueChangeCallBk;
   formCloseCallBk?: () => void;
   saveButtonSpecs?: {
     label?: string;
@@ -315,6 +329,17 @@ export type TemplateFormProps = {
       | "info"
       | "warning";
   };
+  validationSchema?: z.ZodObject<
+    any,
+    "strip",
+    z.ZodTypeAny,
+    {
+      [x: string]: any;
+    },
+    {
+      [x: string]: any;
+    }
+  >;
 };
 
 export type TemplateGridTopBarProps = GridToolbarProps &

package/src/components/templates/DataEntryTemplates/DataEntryUtil.ts

@@ -66,8 +66,10 @@ export const constructGridColumnsFromFields: (
         align: "center",
         hidden: tableField?.hidden,
         searchable: tableField?.gridProps?.searchable,
-        flex: tableField?.gridProps?.muiProps?.width ? undefined : 1,
-        minWidth: 200,
+        flex: tableField?.gridProps?.muiProps?.flex || 1,
+        minWidth: tableField?.gridProps?.muiProps?.width
+          ? tableField?.gridProps?.muiProps?.width
+          : 200,
       };
 
       columns.push(column);
@@ -84,8 +86,10 @@ export const constructGridColumnsFromFields: (
         align: "center",
         hidden: tableField?.hidden,
         searchable: tableField?.gridProps?.searchable,
-        flex: tableField?.gridProps?.muiProps?.width ? undefined : 1,
-        minWidth: 200,
+        flex: tableField?.gridProps?.muiProps?.flex || 1,
+        minWidth: tableField?.gridProps?.muiProps?.width
+          ? tableField?.gridProps?.muiProps?.width
+          : 200,
       });
       columns.push(column);
     } else if (tableField?.fieldType === "datetime") {
@@ -101,8 +105,10 @@ export const constructGridColumnsFromFields: (
         align: "center",
         hidden: tableField?.hidden,
         searchable: tableField?.gridProps?.searchable,
-        flex: tableField?.gridProps?.muiProps?.width ? undefined : 1,
-        minWidth: 200,
+        flex: tableField?.gridProps?.muiProps?.flex || 1,
+        minWidth: tableField?.gridProps?.muiProps?.width
+          ? tableField?.gridProps?.muiProps?.width
+          : 200,
       });
       columns.push(column);
     } else if (tableField?.fieldType === "checkbox") {
@@ -139,8 +145,10 @@ export const constructGridColumnsFromFields: (
         valueField: tableField?.optionValueField || "value",
         displayField: tableField?.optionDisplayField || "display",
         options: tableField?.options || [],
-        flex: tableField?.gridProps?.muiProps?.width ? undefined : 1,
-        minWidth: 200,
+        flex: tableField?.gridProps?.muiProps?.flex || 1,
+        minWidth: tableField?.gridProps?.muiProps?.width
+          ? tableField?.gridProps?.muiProps?.width
+          : 200,
       });
       columns.push(column);
     } else if (tableField?.fieldType === "lookup") {
@@ -160,8 +168,10 @@ export const constructGridColumnsFromFields: (
         valueField: tableField?.optionValueField || "value",
         displayField: tableField?.optionDisplayField || "display",
         options: tableField?.options || [],
-        flex: tableField?.gridProps?.muiProps?.width ? undefined : 1,
-        minWidth: 200,
+        flex: tableField?.gridProps?.muiProps?.flex || 1,
+        minWidth: tableField?.gridProps?.muiProps?.width
+          ? tableField?.gridProps?.muiProps?.width
+          : 200,
       });
       columns.push(column);
     } else {