@asaleh37/ui-base 1.2.29 → 25.1.9

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

@@ -1,248 +1,297 @@
-import { GridRowSelectionModel } from "@mui/x-data-grid-premium";
-import {
-  FormElementProps,
-  RecordFieldProps,
-  TemplateGridColDef,
-} from "./DataEntryTypes";
-import {
-  generateCheckBoxColumn,
-  generateComboColumn,
-  generateDateColumn,
-  generateDateTimeColumn,
-} from "./TemplateDataGrid/DataGridColumnsUtil";
-import * as z from "zod";
-import { TFunction } from "i18next";
-
-export const getElementFields: (
-  element: FormElementProps
-) => Array<RecordFieldProps> = (element: FormElementProps) => {
-  const fields: Array<RecordFieldProps> = [];
-  if (element.type === "field" && element.mode === "props" && element?.props) {
-    fields.push(element.props);
-  } else if (
-    element.type === "group" &&
-    element?.props &&
-    element?.props?.elements
-  ) {
-    for (const childElement of element.props.elements) {
-      fields.push(...getElementFields(childElement));
-    }
-  }
-  return fields;
-};
-
-export const getAllFields: (
-  elements: Array<FormElementProps>
-) => Array<RecordFieldProps> = (elements: Array<FormElementProps>) => {
-  const fields: Array<RecordFieldProps> = [];
-  for (const element of elements) {
-    fields.push(...getElementFields(element));
-  }
-  return fields;
-};
-
-export const constructGridColumnsFromFields: (
-  fields: Array<RecordFieldProps>,
-  isDefaultEditable: boolean,
-  t: TFunction<"translation", undefined>
-) => Array<TemplateGridColDef> = (fields, isDefaultEditable, t) => {
-  const columns: Array<TemplateGridColDef> = [];
-
-  for (const tableField of fields) {
-    if (
-      tableField?.fieldType === "text" ||
-      tableField?.fieldType === "number"
-    ) {
-      const column: TemplateGridColDef = {
-        ...tableField?.gridProps?.muiProps,
-        editable:
-          tableField?.gridProps?.muiProps?.editable != undefined
-            ? tableField?.gridProps?.muiProps?.editable
-            : isDefaultEditable,
-        type: tableField?.fieldType == "number" ? "number" : "string",
-        field: tableField?.fieldName,
-        headerName: t(tableField?.fieldLabel || tableField?.fieldName),
-        headerAlign: "center",
-        align: "center",
-        hidden: tableField?.hidden,
-        searchable: tableField?.gridProps?.searchable,
-        flex: 1,
-        minWidth: 200,
-      };
-
-      columns.push(column);
-    } else if (tableField?.fieldType === "date") {
-      const column: TemplateGridColDef = generateDateColumn({
-        ...tableField?.gridProps?.muiProps,
-        editable:
-          tableField?.gridProps?.muiProps?.editable != undefined
-            ? tableField?.gridProps?.muiProps?.editable
-            : isDefaultEditable,
-        field: tableField?.fieldName,
-        headerName: t(tableField?.fieldLabel || tableField?.fieldName),
-        headerAlign: "center",
-        align: "center",
-        hidden: tableField?.hidden,
-        searchable: tableField?.gridProps?.searchable,
-        flex: 1,
-        minWidth: 200,
-      });
-      columns.push(column);
-    } else if (tableField?.fieldType === "datetime") {
-      const column: TemplateGridColDef = generateDateTimeColumn({
-        ...tableField?.gridProps?.muiProps,
-        editable:
-          tableField?.gridProps?.muiProps?.editable != undefined
-            ? tableField?.gridProps?.muiProps?.editable
-            : isDefaultEditable,
-        field: tableField?.fieldName,
-        headerName: t(tableField?.fieldLabel || tableField?.fieldName),
-        headerAlign: "center",
-        align: "center",
-        hidden: tableField?.hidden,
-        searchable: tableField?.gridProps?.searchable,
-        flex: 1,
-        minWidth: 200,
-      });
-      columns.push(column);
-    } else if (tableField?.fieldType === "checkbox") {
-      const column = generateCheckBoxColumn({
-        ...tableField?.gridProps?.muiProps,
-        editable:
-          tableField?.gridProps?.muiProps?.editable != undefined
-            ? tableField?.gridProps?.muiProps?.editable
-            : isDefaultEditable,
-        field: tableField?.fieldName,
-        headerName: t(tableField?.fieldLabel || tableField?.fieldName),
-        headerAlign: "center",
-        align: "center",
-        hidden: tableField?.hidden,
-        searchable: tableField?.gridProps?.searchable,
-        checkedValue: tableField?.checkedValue,
-        unCheckedValue: tableField?.unCheckedValue,
-        width: 150,
-      });
-      columns.push(column);
-    } else if (tableField?.fieldType === "combobox") {
-      const column: TemplateGridColDef = generateComboColumn({
-        ...tableField?.gridProps?.muiProps,
-        editable:
-          tableField?.gridProps?.muiProps?.editable != undefined
-            ? tableField?.gridProps?.muiProps?.editable
-            : isDefaultEditable,
-        field: tableField?.fieldName,
-        headerName: t(tableField?.fieldLabel || tableField?.fieldName),
-        headerAlign: "center",
-        align: "center",
-        hidden: tableField?.hidden,
-        searchable: tableField?.gridProps?.searchable,
-        valueField: tableField?.optionValueField || "value",
-        displayField: tableField?.optionDisplayField || "display",
-        options: tableField?.options || [],
-        flex: 1,
-        minWidth: 200,
-      });
-      columns.push(column);
-    } else if (tableField?.fieldType === "lookup") {
-      const column: TemplateGridColDef = generateComboColumn({
-        ...tableField?.gridProps?.muiProps,
-        editable:
-          tableField?.gridProps?.muiProps?.editable != undefined
-            ? tableField?.gridProps?.muiProps?.editable
-            : isDefaultEditable,
-        lookupType: tableField?.lookupType,
-        field: tableField?.fieldName,
-        headerName: t(tableField?.fieldLabel || tableField?.fieldName),
-        headerAlign: "center",
-        align: "center",
-        hidden: tableField?.hidden,
-        searchable: tableField?.gridProps?.searchable,
-        valueField: tableField?.optionValueField || "value",
-        displayField: tableField?.optionDisplayField || "display",
-        options: tableField?.options || [],
-        flex: 1,
-        minWidth: 200,
-      });
-      columns.push(column);
-    } else {
-      const column: TemplateGridColDef = {
-        field: tableField.fieldName,
-        ...tableField?.gridProps?.muiProps,
-      };
-      columns.push(column);
-    }
-  }
-  return columns;
-};
-
-export const constructValidationSchema = (fields: Array<RecordFieldProps>) => {
-  const validationSchemaObj: any = {};
-  for (const field of fields) {
-    if (field?.fieldName) {
-      const fieldName = field.fieldName;
-      if (field.fieldType === "number") {
-        if (field?.required === true) {
-          validationSchemaObj[fieldName] = z.number({
-            required_error: "This field is required",
-            invalid_type_error: "This field must be a number",
-          });
-        } else {
-          validationSchemaObj[fieldName] = z.number().optional().nullable();
-        }
-      } else if (field.fieldType === "checkbox") {
-        if (field?.required === true) {
-          validationSchemaObj[fieldName] = z.boolean({
-            required_error: "This field is required",
-          });
-        } else {
-          validationSchemaObj[fieldName] = z.boolean().optional().nullable();
-        }
-      } else {
-        if (field?.required === true) {
-          validationSchemaObj[fieldName] = z
-            .string({ message: "This field is required" })
-            .min(1, "This field is required");
-        } else {
-          validationSchemaObj[fieldName] = z.string().optional().nullable();
-        }
-      }
-    }
-  }
-  return validationSchemaObj;
-};
-
-export type GridSelection = {
-  selectedRecords: Array<any>;
-  selectedRecordIds: Array<any>;
-};
-
-export const getGridSelection: (
-  rowSelectionModel: GridRowSelectionModel,
-  data: Array<any>,
-  keyColumnName: string
-) => GridSelection = (
-  rowSelectionModel: GridRowSelectionModel,
-  data: Array<any>,
-  keyColumnName: string
-) => {
-  const sRecords = [];
-  const sRecordIds = [];
-  if (
-    rowSelectionModel.type === "exclude" &&
-    rowSelectionModel.ids.size === 0
-  ) {
-    for (const record of data) {
-      sRecords.push(record);
-      sRecordIds.push(record[keyColumnName]);
-    }
-  } else {
-    if (rowSelectionModel?.ids) {
-      for (const selectedId of rowSelectionModel.ids) {
-        const record = data.find((x) => x[keyColumnName] === selectedId);
-        sRecords.push(record);
-        sRecordIds.push(selectedId);
-      }
-    }
-  }
-  return { selectedRecords: sRecords, selectedRecordIds: sRecordIds };
-};
+import { GridRowSelectionModel } from "@mui/x-data-grid-premium";
+import {
+  FormElementProps,
+  RecordFieldProps,
+  TemplateGridColDef,
+} from "./DataEntryTypes";
+import {
+  generateCheckBoxColumn,
+  generateComboColumn,
+  generateDateColumn,
+  generateDateTimeColumn,
+} from "./TemplateDataGrid/DataGridColumnsUtil";
+import * as z from "zod";
+import { TFunction } from "i18next";
+
+export const getElementFields: (
+  element: FormElementProps
+) => Array<RecordFieldProps> = (element: FormElementProps) => {
+  const fields: Array<RecordFieldProps> = [];
+  if (element.type === "field" && element.mode === "props" && element?.props) {
+    fields.push(element.props);
+  } else if (
+    element.type === "group" &&
+    element?.props &&
+    element?.props?.elements
+  ) {
+    for (const childElement of element.props.elements) {
+      fields.push(...getElementFields(childElement));
+    }
+  }
+  return fields;
+};
+
+export const getAllFields: (
+  elements: Array<FormElementProps>
+) => Array<RecordFieldProps> = (elements: Array<FormElementProps>) => {
+  const fields: Array<RecordFieldProps> = [];
+  for (const element of elements) {
+    fields.push(...getElementFields(element));
+  }
+  return fields;
+};
+
+export const constructGridColumnsFromFields: (
+  fields: Array<RecordFieldProps>,
+  isDefaultEditable: boolean,
+  t: TFunction<"translation", undefined>
+) => Array<TemplateGridColDef> = (fields, isDefaultEditable, t) => {
+  const columns: Array<TemplateGridColDef> = [];
+
+  for (const tableField of fields) {
+    if (
+      tableField?.fieldType === "text" ||
+      tableField?.fieldType === "number"
+    ) {
+      const column: TemplateGridColDef = {
+        ...tableField?.gridProps?.muiProps,
+        editable:
+          tableField?.gridProps?.muiProps?.editable != undefined
+            ? tableField?.gridProps?.muiProps?.editable
+            : isDefaultEditable,
+        type: tableField?.fieldType == "number" ? "number" : "string",
+        field: tableField?.fieldName,
+        headerName: t(tableField?.fieldLabel || tableField?.fieldName),
+        headerAlign: "center",
+        align: "center",
+        hidden: tableField?.hidden,
+        searchable: tableField?.gridProps?.searchable,
+        flex: tableField?.gridProps?.muiProps?.flex || 1,
+        minWidth: tableField?.gridProps?.muiProps?.width
+          ? tableField?.gridProps?.muiProps?.width
+          : 200,
+      };
+
+      columns.push(column);
+    } else if (tableField?.fieldType === "date") {
+      const column: TemplateGridColDef = generateDateColumn({
+        ...tableField?.gridProps?.muiProps,
+        editable:
+          tableField?.gridProps?.muiProps?.editable != undefined
+            ? tableField?.gridProps?.muiProps?.editable
+            : isDefaultEditable,
+        field: tableField?.fieldName,
+        headerName: t(tableField?.fieldLabel || tableField?.fieldName),
+        headerAlign: "center",
+        align: "center",
+        hidden: tableField?.hidden,
+        searchable: tableField?.gridProps?.searchable,
+        flex: tableField?.gridProps?.muiProps?.flex || 1,
+        minWidth: tableField?.gridProps?.muiProps?.width
+          ? tableField?.gridProps?.muiProps?.width
+          : 200,
+      });
+      columns.push(column);
+    } else if (tableField?.fieldType === "datetime") {
+      const column: TemplateGridColDef = generateDateTimeColumn({
+        ...tableField?.gridProps?.muiProps,
+        editable:
+          tableField?.gridProps?.muiProps?.editable != undefined
+            ? tableField?.gridProps?.muiProps?.editable
+            : isDefaultEditable,
+        field: tableField?.fieldName,
+        headerName: t(tableField?.fieldLabel || tableField?.fieldName),
+        headerAlign: "center",
+        align: "center",
+        hidden: tableField?.hidden,
+        searchable: tableField?.gridProps?.searchable,
+        flex: tableField?.gridProps?.muiProps?.flex || 1,
+        minWidth: tableField?.gridProps?.muiProps?.width
+          ? tableField?.gridProps?.muiProps?.width
+          : 200,
+      });
+      columns.push(column);
+    } else if (tableField?.fieldType === "checkbox") {
+      const column = generateCheckBoxColumn({
+        ...tableField?.gridProps?.muiProps,
+        editable:
+          tableField?.gridProps?.muiProps?.editable != undefined
+            ? tableField?.gridProps?.muiProps?.editable
+            : isDefaultEditable,
+        field: tableField?.fieldName,
+        headerName: t(tableField?.fieldLabel || tableField?.fieldName),
+        headerAlign: "center",
+        align: "center",
+        hidden: tableField?.hidden,
+        searchable: tableField?.gridProps?.searchable,
+        checkedValue: tableField?.checkedValue,
+        unCheckedValue: tableField?.unCheckedValue,
+        width: 150,
+      });
+      columns.push(column);
+    } else if (tableField?.fieldType === "combobox") {
+      const column: TemplateGridColDef = generateComboColumn({
+        ...tableField?.gridProps?.muiProps,
+        comboboxGroupField: tableField?.comboboxGroupField,
+        editable:
+          tableField?.gridProps?.muiProps?.editable != undefined
+            ? tableField?.gridProps?.muiProps?.editable
+            : isDefaultEditable,
+        field: tableField?.fieldName,
+        headerName: t(tableField?.fieldLabel || tableField?.fieldName),
+        headerAlign: "center",
+        align: "center",
+        hidden: tableField?.hidden,
+        searchable: tableField?.gridProps?.searchable,
+        valueField: tableField?.optionValueField || "value",
+        displayField: tableField?.optionDisplayField || "display",
+        options: tableField?.options,
+        commonStoreKey: tableField?.commonStoreKey,
+        dataQueryId: tableField?.dataQueryId,
+        storeUrl: tableField?.storeUrl,
+        storeLoadParam: tableField?.storeLoadParam,
+        flex: tableField?.gridProps?.muiProps?.flex || 1,
+        minWidth: tableField?.gridProps?.muiProps?.width
+          ? tableField?.gridProps?.muiProps?.width
+          : 200,
+      });
+      columns.push(column);
+    } else if (tableField?.fieldType === "lookup") {
+      const column: TemplateGridColDef = generateComboColumn({
+        ...tableField?.gridProps?.muiProps,
+        editable:
+          tableField?.gridProps?.muiProps?.editable != undefined
+            ? tableField?.gridProps?.muiProps?.editable
+            : isDefaultEditable,
+        lookupType: tableField?.lookupType,
+        field: tableField?.fieldName,
+        headerName: t(tableField?.fieldLabel || tableField?.fieldName),
+        headerAlign: "center",
+        align: "center",
+        commonStoreKey: tableField?.commonStoreKey,
+        dataQueryId: tableField?.dataQueryId,
+        storeUrl: tableField?.storeUrl,
+        storeLoadParam: tableField?.storeLoadParam,
+        hidden: tableField?.hidden,
+        searchable: tableField?.gridProps?.searchable,
+        valueField: tableField?.optionValueField || "value",
+        displayField: tableField?.optionDisplayField || "display",
+        options: tableField?.options || [],
+        flex: tableField?.gridProps?.muiProps?.flex || 1,
+        minWidth: tableField?.gridProps?.muiProps?.width
+          ? tableField?.gridProps?.muiProps?.width
+          : 200,
+      });
+      columns.push(column);
+    } else {
+      const column: TemplateGridColDef = {
+        field: tableField.fieldName,
+        ...tableField?.gridProps?.muiProps,
+      };
+      columns.push(column);
+    }
+  }
+  return columns;
+};
+
+export const constructValidationSchema = (fields: Array<RecordFieldProps>) => {
+  const validationSchemaObj: any = {};
+  for (const field of fields) {
+    if (field?.fieldName) {
+      const fieldName = field.fieldName;
+      if (field.fieldType === "number") {
+        if (field?.required === true) {
+          validationSchemaObj[fieldName] = z.number({
+            required_error: "This field is required",
+            invalid_type_error: "This field must be a number",
+          });
+        } else {
+          validationSchemaObj[fieldName] = z.number().optional().nullable();
+        }
+      } else if (field.fieldType === "checkbox") {
+        if (field?.required === true) {
+          validationSchemaObj[fieldName] = z.boolean({
+            required_error: "This field is required",
+          });
+        } else {
+          validationSchemaObj[fieldName] = z.boolean().optional().nullable();
+        }
+      } else if (field.fieldType === "combobox") {
+        if (field?.comboboxValueDataType) {
+          if (field?.comboboxValueDataType === "number") {
+            if (field?.required === true) {
+              validationSchemaObj[fieldName] = z.number({
+                required_error: "This field is required",
+                invalid_type_error: "This field must be a number",
+              });
+            } else {
+              validationSchemaObj[fieldName] = z.number().optional().nullable();
+            }
+          } else if (field?.comboboxValueDataType === "string") {
+            if (field?.required === true) {
+              validationSchemaObj[fieldName] = z
+                .string({ message: "This field is required" })
+                .min(1, "This field is required");
+            } else {
+              validationSchemaObj[fieldName] = z.string().optional().nullable();
+            }
+          }
+        } else {
+          if (field?.required === true) {
+            validationSchemaObj[fieldName] = z.number({
+              required_error: "This field is required",
+              invalid_type_error: "This field must be a number",
+            });
+          } else {
+            validationSchemaObj[fieldName] = z.number().optional().nullable();
+          }
+        }
+      } else {
+        if (field?.required === true) {
+          validationSchemaObj[fieldName] = z
+            .string({ message: "This field is required" })
+            .min(1, "This field is required");
+        } else {
+          validationSchemaObj[fieldName] = z.string().optional().nullable();
+        }
+      }
+    }
+  }
+  return validationSchemaObj;
+};
+
+export type GridSelection = {
+  selectedRecords: Array<any>;
+  selectedRecordIds: Array<any>;
+};
+
+export const getGridSelection: (
+  rowSelectionModel: GridRowSelectionModel,
+  data: Array<any>,
+  keyColumnName: string
+) => GridSelection = (
+  rowSelectionModel: GridRowSelectionModel,
+  data: Array<any>,
+  keyColumnName: string
+) => {
+  const sRecords = [];
+  const sRecordIds = [];
+  if (
+    rowSelectionModel.type === "exclude" &&
+    rowSelectionModel.ids.size === 0
+  ) {
+    for (const record of data) {
+      sRecords.push(record);
+      sRecordIds.push(record[keyColumnName]);
+    }
+  } else {
+    if (rowSelectionModel?.ids) {
+      for (const selectedId of rowSelectionModel.ids) {
+        const record = data.find((x) => x[keyColumnName] === selectedId);
+        sRecords.push(record);
+        sRecordIds.push(selectedId);
+      }
+    }
+  }
+  return { selectedRecords: sRecords, selectedRecordIds: sRecordIds };
+};