@asaleh37/ui-base 25.6.1 → 25.6.2-0.2

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

@@ -1,248 +1,248 @@
-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?.width ? undefined : 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: tableField?.gridProps?.muiProps?.width ? undefined : 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: tableField?.gridProps?.muiProps?.width ? undefined : 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: tableField?.gridProps?.muiProps?.width ? undefined : 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: tableField?.gridProps?.muiProps?.width ? undefined : 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 };
+};

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormAction.tsx

@@ -1,60 +1,60 @@
-import { Button } from "@mui/material";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { RecordAction } from "../DataEntryTypes";
-import useSession from "../../../../hooks/UseSession";
-import { useConfirmationWindow } from "../../../../hooks/UseConfirmationWindow";
-
-const FormAction: React.FC<RecordAction> = (action: RecordAction) => {
-  const session = useSession();
-  const { ConfirmationWindow, setOpen: setConfirmationWindowState } =
-    useConfirmationWindow({
-      body: action?.confirmationMessage || "",
-      title: "Confirmation",
-      onConfirmationCallBk: () => {
-        action?.actionFn(action?.record);
-      },
-    });
-  if (
-    action?.authority === undefined ||
-    action?.authority === null ||
-    session.isUserAuthorized(action.authority)
-  ) {
-    return (
-      <>
-        <ConfirmationWindow />
-        <Button
-          variant={action?.formActionProps?.actionButtonVariant}
-          color={action?.formActionProps?.actionButtonColor}
-          onClick={() => {
-            if (action?.actionFn) {
-              if (action?.preActionValidation) {
-                if (!action.preActionValidation(action.record)) {
-                  return;
-                }
-              }
-              if (action?.isConfirmationRequired === true) {
-                setConfirmationWindowState(true);
-              } else {
-                action?.actionFn(action.record);
-              }
-            }
-          }}
-        >
-          {action?.icon ? (
-            <FontAwesomeIcon
-              icon={action.icon}
-              style={{ marginRight: 5, marginLeft: 5 }}
-            />
-          ) : (
-            <></>
-          )}
-          <div>{action?.label}</div>
-        </Button>
-      </>
-    );
-  } else {
-    return <></>;
-  }
-};
-
-export default FormAction;
+import { Button } from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { RecordAction } from "../DataEntryTypes";
+import useSession from "../../../../hooks/UseSession";
+import { useConfirmationWindow } from "../../../../hooks/UseConfirmationWindow";
+
+const FormAction: React.FC<RecordAction> = (action: RecordAction) => {
+  const session = useSession();
+  const { ConfirmationWindow, setOpen: setConfirmationWindowState } =
+    useConfirmationWindow({
+      body: action?.confirmationMessage || "",
+      title: "Confirmation",
+      onConfirmationCallBk: () => {
+        action?.actionFn(action?.record);
+      },
+    });
+  if (
+    action?.authority === undefined ||
+    action?.authority === null ||
+    session.isUserAuthorized(action.authority)
+  ) {
+    return (
+      <>
+        <ConfirmationWindow />
+        <Button
+          variant={action?.formActionProps?.actionButtonVariant}
+          color={action?.formActionProps?.actionButtonColor}
+          onClick={() => {
+            if (action?.actionFn) {
+              if (action?.preActionValidation) {
+                if (!action.preActionValidation(action.record)) {
+                  return;
+                }
+              }
+              if (action?.isConfirmationRequired === true) {
+                setConfirmationWindowState(true);
+              } else {
+                action?.actionFn(action.record);
+              }
+            }
+          }}
+        >
+          {action?.icon ? (
+            <FontAwesomeIcon
+              icon={action.icon}
+              style={{ marginRight: 5, marginLeft: 5 }}
+            />
+          ) : (
+            <></>
+          )}
+          <div>{action?.label}</div>
+        </Button>
+      </>
+    );
+  } else {
+    return <></>;
+  }
+};
+
+export default FormAction;