@asaleh37/ui-base 25.8.26-1 → 25.8.30

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

@@ -22,6 +22,14 @@ const FormElementField: React.FC<FormElementFieldProps> = (
     if (!(props && formManager && formValues && fieldName && fieldType)) {
       return <></>;
     }
+
+    const getFieldLabel = () => {
+      if (element?.fieldInfo?.formProps?.fieldLabelFn) {
+        return element.fieldInfo.formProps.fieldLabelFn(formValues);
+      } else if (element?.fieldInfo?.fieldLabel) {
+        return element?.fieldInfo?.fieldLabel;
+      }
+    };
     return !element.hiddenFields.includes(fieldName) ? (
       <Grid2
         size={
@@ -46,12 +54,12 @@ const FormElementField: React.FC<FormElementFieldProps> = (
                 ? true
                 : false
             }
-            hidden={
-              props?.hidden || element.hiddenFields.includes(fieldName)
-                ? true
-                : false
-            }
-            label={props?.fieldLabel}
+            // hidden={
+            //   props?.hidden || element.hiddenFields.includes(fieldName)
+            //     ? true
+            //     : false
+            // }
+            label={getFieldLabel()}
             value={formValues[fieldName]}
             onChange={(event) => {
               let newValue = null;
@@ -63,11 +71,13 @@ const FormElementField: React.FC<FormElementFieldProps> = (
                 }
               }
               formManager.setValue(fieldName, newValue);
-              if (props?.formProps?.onValueChangeCallBack) {
-                props?.formProps?.onValueChangeCallBack(
-                  newValue,
+              if (element?.formValuesChangeCallBk) {
+                element?.formValuesChangeCallBk(
+                  formValues,
+                  formActions,
                   formManager,
-                  formActions
+                  fieldName,
+                  newValue
                 );
               }
             }}
@@ -94,19 +104,21 @@ const FormElementField: React.FC<FormElementFieldProps> = (
                 ? true
                 : false
             }
-            hidden={
-              props?.hidden || element.hiddenFields.includes(fieldName)
-                ? true
-                : false
-            }
-            label={props?.fieldLabel}
+            // hidden={
+            //   props?.hidden || element.hiddenFields.includes(fieldName)
+            //     ? true
+            //     : false
+            // }
+            label={getFieldLabel()}
             onChangeCallBack={(v: any) => {
               formManager.setValue(fieldName, v);
-              if (props?.formProps?.onValueChangeCallBack) {
-                props?.formProps?.onValueChangeCallBack(
-                  v,
+              if (element?.formValuesChangeCallBk) {
+                element?.formValuesChangeCallBk(
+                  formValues,
+                  formActions,
                   formManager,
-                  formActions
+                  fieldName,
+                  v
                 );
               }
             }}
@@ -125,22 +137,24 @@ const FormElementField: React.FC<FormElementFieldProps> = (
                 ? true
                 : false
             }
-            label={props?.fieldLabel}
+            label={getFieldLabel()}
             onChangeCallBack={(v: any) => {
               formManager.setValue(fieldName, v);
-              if (props?.formProps?.onValueChangeCallBack) {
-                props?.formProps?.onValueChangeCallBack(
-                  v,
+              if (element?.formValuesChangeCallBk) {
+                element?.formValuesChangeCallBk(
+                  formValues,
+                  formActions,
                   formManager,
-                  formActions
+                  fieldName,
+                  v
                 );
               }
             }}
-            hidden={
-              props?.hidden || element.hiddenFields.includes(fieldName)
-                ? true
-                : false
-            }
+            // hidden={
+            //   props?.hidden || element.hiddenFields.includes(fieldName)
+            //     ? true
+            //     : false
+            // }
             value={formValues[fieldName]}
             error={formManager.formState.errors[fieldName] != undefined}
             errorMessage={formManager?.formState?.errors[
@@ -149,22 +163,24 @@ const FormElementField: React.FC<FormElementFieldProps> = (
           />
         ) : props?.fieldType === "checkbox" ? (
           <CheckBox
-            label={props?.fieldLabel}
+            label={getFieldLabel()}
             onChangeCallBack={(v: any) => {
               formManager.setValue(fieldName, v);
-              if (props?.formProps?.onValueChangeCallBack) {
-                props?.formProps?.onValueChangeCallBack(
-                  v,
+              if (element?.formValuesChangeCallBk) {
+                element?.formValuesChangeCallBk(
+                  formValues,
+                  formActions,
                   formManager,
-                  formActions
+                  fieldName,
+                  v
                 );
               }
             }}
-            hidden={
-              props?.hidden || element.hiddenFields.includes(fieldName)
-                ? true
-                : false
-            }
+            // hidden={
+            //   props?.hidden || element.hiddenFields.includes(fieldName)
+            //     ? true
+            //     : false
+            // }
             value={formValues[fieldName]}
             checkedValue={props?.checkedValue || true}
             unCheckedValue={props?.unCheckedValue || false}
@@ -178,28 +194,30 @@ const FormElementField: React.FC<FormElementFieldProps> = (
         ) : props?.fieldType === "combobox" ? (
           <ComboBox
             sx={props?.formProps?.style || { width: "100%" }}
-            label={props?.fieldLabel}
+            label={getFieldLabel()}
             disabled={
               props?.disabled || element.disabledFields.includes(fieldName)
                 ? true
                 : false
             }
-            hidden={
-              props?.hidden || element.hiddenFields.includes(fieldName)
-                ? true
-                : false
-            }
+            // hidden={
+            //   props?.hidden || element.hiddenFields.includes(fieldName)
+            //     ? true
+            //     : false
+            // }
             onChangeCallBack={(v: any, selectedRecord: any) => {
               let newValue = null;
               if (v) {
                 newValue = v;
               }
               formManager.setValue(fieldName, newValue);
-              if (props?.formProps?.onValueChangeCallBack) {
-                props?.formProps?.onValueChangeCallBack(
-                  newValue,
-                  formManager,
+              if (element?.formValuesChangeCallBk) {
+                element?.formValuesChangeCallBk(
+                  formValues,
                   formActions,
+                  formManager,
+                  fieldName,
+                  v,
                   selectedRecord
                 );
               }
@@ -215,28 +233,30 @@ const FormElementField: React.FC<FormElementFieldProps> = (
         ) : props?.fieldType === "lookup" ? (
           <SystemLookupCombobox
             sx={props?.formProps?.style || { width: "100%" }}
-            label={props?.fieldLabel}
+            label={getFieldLabel()}
             disabled={
               props?.disabled || element.disabledFields.includes(fieldName)
                 ? true
                 : false
             }
-            hidden={
-              props?.hidden || element.hiddenFields.includes(fieldName)
-                ? true
-                : false
-            }
+            // hidden={
+            //   props?.hidden || element.hiddenFields.includes(fieldName)
+            //     ? true
+            //     : false
+            // }
             onChangeCallBack={(v: any, selectedRecord: any) => {
               let newValue = null;
               if (v) {
                 newValue = v;
               }
               formManager.setValue(fieldName, newValue);
-              if (props?.formProps?.onValueChangeCallBack) {
-                props?.formProps?.onValueChangeCallBack(
-                  newValue,
-                  formManager,
+              if (element?.formValuesChangeCallBk) {
+                element?.formValuesChangeCallBk(
+                  formValues,
                   formActions,
+                  formManager,
+                  fieldName,
+                  v,
                   selectedRecord
                 );
               }

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/Datefield.tsx

@@ -31,7 +31,7 @@ const Datefield: React.FC<DatefieldProps> = (props) => {
             ? moment(props.value, props?.format || DATE_FORMAT)
             : null
         }
-        sx={props.sx}
+        sx={{ ...props.sx, display: props?.hidden ? "none" : undefined }}
         label={t(props.label)}
         format={props?.format || DATE_FORMAT}
         disabled={props.disabled}

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/DatetimeField.tsx

@@ -33,7 +33,7 @@ const DatetimeField: React.FC<DatetimeFieldProps> = (props) => {
             : null
         }
         label={t(props.label)}
-        sx={props.sx}
+        sx={{ ...props.sx, display: props?.hidden ? "none" : undefined }}
         format={props?.format || DATE_TIME_FORMAT}
         disabled={props.disabled}
         onChange={(momentValue) => {

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

@@ -66,7 +66,12 @@ const TemplateForm: React.FC<TemplateFormProps> = (
     }
   }
   const [disabledFields, setDisabledFields] = useState<string[]>([]);
-  const formSchema = z.object(constructValidationSchema(fields));
+  let formSchema = null;
+  if (props?.validationSchema) {
+    formSchema = props.validationSchema;
+  } else {
+    formSchema = z.object(constructValidationSchema(fields));
+  }
   type FormData = z.infer<typeof formSchema>;
   const formManager = useForm<FormData>({
     resolver: zodResolver(formSchema),
@@ -92,8 +97,12 @@ const TemplateForm: React.FC<TemplateFormProps> = (
       );
       if (retrievedRecord) {
         formManager.reset({ ...retrievedRecord });
-        if (props?.formLoadCallBk) {
-          props?.formLoadCallBk(formActions, formManager, retrievedRecord);
+        if (props?.formValuesChangeCallBk) {
+          props?.formValuesChangeCallBk(
+            { ...retrievedRecord },
+            formActions,
+            formManager
+          );
         }
         for (const field of fields) {
           if (
@@ -183,7 +192,6 @@ const TemplateForm: React.FC<TemplateFormProps> = (
       setAttachmentPanelEnabledForRecord(true);
     }
   }, [formValues]);
-
   return (
     <>
       {props?.attachment ? (
@@ -253,6 +261,7 @@ const TemplateForm: React.FC<TemplateFormProps> = (
                   formActions={formActions}
                   hiddenFields={hiddenFields}
                   disabledFields={disabledFields}
+                  formValuesChangeCallBk={props.formValuesChangeCallBk}
                 />
               );
             } else if (
@@ -317,78 +326,87 @@ const TemplateForm: React.FC<TemplateFormProps> = (
           ) : null
         ) : null}
         {props?.actions ? (
-          formValues[props?.keyColumnName || "id"] ? (
-            props.actions.map((action: RecordAction) => {
+          props.actions.map((action: RecordAction) => {
+            if (action?.isIdRequired === false) {
+              return <FormAction {...action} record={formValues} />;
+            } else if (formValues[props?.keyColumnName || "id"]) {
               if (action?.formActionProps?.enabled === true) {
                 return <FormAction {...action} record={formValues} />;
               } else {
                 return <></>;
               }
-            })
-          ) : (
-            <></>
-          )
+            }
+          })
         ) : (
           <></>
         )}
         <div style={{ flex: 1 }}></div>
-        <Button
-          variant={
-            props?.saveButtonSpecs?.actionButtonVariant
-              ? props.saveButtonSpecs.actionButtonVariant
-              : "contained"
-          }
-          sx={{ m: 1 }}
-          startIcon={
-            props?.saveButtonSpecs?.icon ? (
-              <FontAwesomeIcon icon={props.saveButtonSpecs.icon} />
-            ) : null
-          }
-          color={
-            props?.saveButtonSpecs?.actionButtonColor
-              ? props.saveButtonSpecs.actionButtonColor
-              : "primary"
-          }
-          onClick={formManager.handleSubmit(
-            (values) => {
-              saveRecord(values);
-            },
-            (errors) => {
-              toast.error(
-                "Form Data is not valid, make sure you have all field with valid data"
-              );
-              console.log("form validation error", errors);
+        {props?.saveButtonSpecs?.hidden ? (
+          <></>
+        ) : (
+          <Button
+            variant={
+              props?.saveButtonSpecs?.actionButtonVariant
+                ? props.saveButtonSpecs.actionButtonVariant
+                : "contained"
             }
-          )}
-        >
-          {t(props?.saveButtonSpecs?.label || "SAVE_BTN_LABEL")}
-        </Button>
-        <Button
-          variant={
-            props?.cancelButtonSpecs?.actionButtonVariant
-              ? props.cancelButtonSpecs.actionButtonVariant
-              : "contained"
-          }
-          startIcon={
-            props?.cancelButtonSpecs?.icon ? (
-              <FontAwesomeIcon icon={props.cancelButtonSpecs.icon} />
-            ) : null
-          }
-          color={
-            props?.cancelButtonSpecs?.actionButtonColor
-              ? props.cancelButtonSpecs.actionButtonColor
-              : "error"
-          }
-          sx={{ m: 1 }}
-          onClick={() => {
-            if (props?.formCloseCallBk) {
-              props.formCloseCallBk();
+            sx={{ m: 1 }}
+            startIcon={
+              props?.saveButtonSpecs?.icon ? (
+                <FontAwesomeIcon icon={props.saveButtonSpecs.icon} />
+              ) : null
             }
-            formManager.reset(initialValues);
-          }}
-        >
-          {t(props?.cancelButtonSpecs?.label || "CANCEL_BTN_LABEL")}
-        </Button>
+            color={
+              props?.saveButtonSpecs?.actionButtonColor
+                ? props.saveButtonSpecs.actionButtonColor
+                : "primary"
+            }
+            onClick={formManager.handleSubmit(
+              (values) => {
+                saveRecord(values);
+              },
+              (errors) => {
+                toast.error(
+                  "Form Data is not valid, make sure you have all field with valid data"
+                );
+                console.log("form validation error", errors);
+              }
+            )}
+          >
+            {t(props?.saveButtonSpecs?.label || "SAVE_BTN_LABEL")}
+          </Button>
+        )}
+
+        {props?.cancelButtonSpecs?.hidden ? (
+          <></>
+        ) : (
+          <Button
+            variant={
+              props?.cancelButtonSpecs?.actionButtonVariant
+                ? props.cancelButtonSpecs.actionButtonVariant
+                : "contained"
+            }
+            startIcon={
+              props?.cancelButtonSpecs?.icon ? (
+                <FontAwesomeIcon icon={props.cancelButtonSpecs.icon} />
+              ) : null
+            }
+            color={
+              props?.cancelButtonSpecs?.actionButtonColor
+                ? props.cancelButtonSpecs.actionButtonColor
+                : "error"
+            }
+            sx={{ m: 1 }}
+            onClick={() => {
+              if (props?.formCloseCallBk) {
+                props.formCloseCallBk();
+              }
+              formManager.reset(initialValues);
+            }}
+          >
+            {t(props?.cancelButtonSpecs?.label || "CANCEL_BTN_LABEL")}
+          </Button>
+        )}
       </Box>
     </>
   );

package/src/components/templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid.tsx

@@ -213,7 +213,13 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
     keyColumnName = props?.keyColumnName;
   }
   const setData = props.setData;
-  const validationSchema = z.object(constructValidationSchema(fields));
+  let validationSchema = null;
+  if (props?.validationSchema) {
+    validationSchema = props.validationSchema;
+  } else {
+    validationSchema = z.object(constructValidationSchema(fields));
+  }
+
   let isEditAllowed = true;
   if (props?.editAction?.authority) {
     isEditAllowed = session.isUserAuthorized(props.editAction.authority);
@@ -760,8 +766,6 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
   const adjustedColumns: Array<TemplateGridColDef> = React.useMemo(() => {
     const baseCols = structuredColumns.map((col) => ({
       ...col,
-      minWidth: col?.width || 200,
-      flex: 1,
     }));
 
     // Reorder based on saved columnOrder
@@ -791,7 +795,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
             <TemplateForm
               keyColumnName={props.keyColumnName}
               attachment={props.attachment}
-              formLoadCallBk={props.formLoadCallBk}
+              formValuesChangeCallBk={props?.formProps?.formValuesChangeCallBk}
               recordIdToEdit={
                 recordToEdit ? recordToEdit[keyColumnName] : undefined
               }
@@ -930,7 +934,6 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
             workFlowDocumentCode={props.workFlowDocumentCode}
             refDocumentId={selectedRecord[props?.keyColumnName || "id"]}
             postActionCallBk={() => {
-              debugger;
               setWorkFlowWindowState(false);
               props.apiActions.reloadData(props.gridLoadParametersValues);
             }}