@asaleh37/ui-base 25.9.5 → 25.9.6-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asaleh37/ui-base",
-  "version": "25.9.5",
+  "version": "25.9.6-2",
   "description": "",
   "license": "ISC",
   "author": "Ahmed Saleh Mohamed",

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

@@ -35,7 +35,7 @@ const WorkflowDocumentGrid: React.FC = () => {
   const { t } = useTranslation();
   const [data, setData] = useState([]);
   const apiActions = useApiActions({
-    findAll: "api/v1/dev/workflowdocument/all",
+    commonStoreKey:'SystemWorkflows',
     deleteById: "api/v1/dev/workflowdocument",
     save: "api/v1/dev/workflowdocument",
     findById: "api/v1/dev/workflowdocument",

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

@@ -202,6 +202,10 @@ export type RecordFieldProps = {
     | "custom";
   lookupType?: string;
   comboboxValueDataType?: "number" | "string";
+  commonStoreKey?: string;
+  dataQueryId?: number;
+  storeUrl?: string;
+  storeLoadParam?: any;
   required?: boolean;
   disabled?: boolean;
   hidden?: boolean;
@@ -252,7 +256,6 @@ export type FormElementFieldProps = {
   hiddenFields?: string[];
   disabledFields?: string[];
   formValuesChangeCallBk?: FormValueChangeCallBk;
-  
 };
 
 export type FormElementNodeProps = {

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

@@ -49,16 +49,7 @@ const FormElementField: React.FC<FormElementFieldProps> = (
             {...props.muiTextFieldProps}
             fullWidth
             type={fieldType}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
-            // hidden={
-            //   props?.hidden || element.hiddenFields.includes(fieldName)
-            //     ? true
-            //     : false
-            // }
+            disabled={element.disabledFields.includes(fieldName)}
             label={getFieldLabel()}
             value={formValues[fieldName]}
             onChange={(event) => {
@@ -89,6 +80,9 @@ const FormElementField: React.FC<FormElementFieldProps> = (
                 height: "100% !important", // forces full height usage
               },
               ...props?.formProps?.style,
+              display: element.hiddenFields.includes(fieldName)
+                ? "none"
+                : undefined,
             }}
             error={formManager.formState.errors[fieldName] != undefined}
             helperText={formManager?.formState?.errors[
@@ -99,16 +93,8 @@ const FormElementField: React.FC<FormElementFieldProps> = (
           <Datefield
             format={props?.dateFormat || DATE_FORMAT}
             sx={props?.formProps?.style || { width: "100%" }}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
-            // hidden={
-            //   props?.hidden || element.hiddenFields.includes(fieldName)
-            //     ? true
-            //     : false
-            // }
+            disabled={element.disabledFields.includes(fieldName)}
+            hidden={element.hiddenFields.includes(fieldName)}
             label={getFieldLabel()}
             onChangeCallBack={(v: any) => {
               formManager.setValue(fieldName, v);
@@ -132,11 +118,8 @@ const FormElementField: React.FC<FormElementFieldProps> = (
           <DatetimeField
             format={props?.dateFormat || DATE_TIME_FORMAT}
             sx={props?.formProps?.style || { width: "100%" }}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
+            disabled={element.disabledFields.includes(fieldName)}
+            hidden={element.hiddenFields.includes(fieldName)}
             label={getFieldLabel()}
             onChangeCallBack={(v: any) => {
               formManager.setValue(fieldName, v);
@@ -150,11 +133,6 @@ const FormElementField: React.FC<FormElementFieldProps> = (
                 );
               }
             }}
-            // hidden={
-            //   props?.hidden || element.hiddenFields.includes(fieldName)
-            //     ? true
-            //     : false
-            // }
             value={formValues[fieldName]}
             error={formManager.formState.errors[fieldName] != undefined}
             errorMessage={formManager?.formState?.errors[
@@ -176,35 +154,23 @@ const FormElementField: React.FC<FormElementFieldProps> = (
                 );
               }
             }}
-            // hidden={
-            //   props?.hidden || element.hiddenFields.includes(fieldName)
-            //     ? true
-            //     : false
-            // }
             value={formValues[fieldName]}
             checkedValue={props?.checkedValue || true}
             unCheckedValue={props?.unCheckedValue || false}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
+            disabled={element.disabledFields.includes(fieldName)}
+            hidden={element.hiddenFields.includes(fieldName)}
             sx={props?.formProps?.style}
           />
         ) : props?.fieldType === "combobox" ? (
           <ComboBox
             sx={props?.formProps?.style || { width: "100%" }}
             label={getFieldLabel()}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
-            // hidden={
-            //   props?.hidden || element.hiddenFields.includes(fieldName)
-            //     ? true
-            //     : false
-            // }
+            commonStoreKey={props?.commonStoreKey}
+            dataQueryId={props?.dataQueryId}
+            storeUrl={props?.storeUrl}
+            storeLoadParam={props?.storeLoadParam}
+            disabled={element.disabledFields.includes(fieldName)}
+            hidden={element.hiddenFields.includes(fieldName)}
             onChangeCallBack={(v: any, selectedRecord: any) => {
               let newValue = null;
               if (v) {
@@ -234,16 +200,8 @@ const FormElementField: React.FC<FormElementFieldProps> = (
           <SystemLookupCombobox
             sx={props?.formProps?.style || { width: "100%" }}
             label={getFieldLabel()}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
-            // hidden={
-            //   props?.hidden || element.hiddenFields.includes(fieldName)
-            //     ? true
-            //     : false
-            // }
+            disabled={element.disabledFields.includes(fieldName)}
+            hidden={element.hiddenFields.includes(fieldName)}
             onChangeCallBack={(v: any, selectedRecord: any) => {
               let newValue = null;
               if (v) {

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

@@ -1,6 +1,8 @@
 import { useSelector } from "react-redux";
 import { Autocomplete, Popper, TextField } from "@mui/material";
 import { useTranslation } from "react-i18next";
+import { useEffect, useState } from "react";
+import { useAxios } from "../../../../../hooks";
 
 interface ComboBoxProps {
   value: any;
@@ -8,7 +10,13 @@ interface ComboBoxProps {
   label: string;
   disabled?: boolean;
   required?: boolean;
-  options: Array<any>;
+
+  commonStoreKey?: string;
+  dataQueryId?: number;
+  storeUrl?: string;
+  storeLoadParam?: any;
+
+  options?: Array<any>;
   errorMessage?: any;
   hidden?: boolean;
   displayField: string;
@@ -18,6 +26,53 @@ interface ComboBoxProps {
 
 const ComboBox: React.FC<ComboBoxProps> = (props) => {
   const AppLayoutState = useSelector((state: any) => state.AppLayout);
+  const [comboboxData, setComboboxData] = useState<Array<any>>(
+    props?.options || []
+  );
+  const commonStoreData = useSelector(
+    (state: any) => state?.commonStores?.stores[props?.commonStoreKey]?.data
+  );
+  const { handleGetRequest } = useAxios();
+  const loadComboboxData = async () => {
+    if (props?.storeUrl) {
+      await handleGetRequest({
+        endPointURI: props.storeUrl,
+        showMask: false,
+        parameters: props?.storeLoadParam,
+        successCallBkFn: (response) => {
+          setComboboxData(response.data);
+        },
+        failureCallBkFn: () => {
+          setComboboxData([]);
+        },
+      });
+    } else if (props?.dataQueryId) {
+      await handleGetRequest({
+        endPointURI: "api/v1/dev/query/result",
+        showMask: false,
+        parameters: { queryId: props.dataQueryId, ...props?.storeLoadParam },
+        successCallBkFn: (response) => {
+          setComboboxData(response.data);
+        },
+        failureCallBkFn: () => {
+          setComboboxData([]);
+        },
+      });
+    }
+  };
+  useEffect(() => {
+    if (props?.commonStoreKey) {
+      setComboboxData(commonStoreData);
+    } else {
+      loadComboboxData();
+    }
+  }, [
+    props?.storeUrl,
+    props?.storeLoadParam,
+    props?.dataQueryId,
+    props?.commonStoreKey,
+  ]);
+
   const { t } = useTranslation();
   const getValue = (v: string) => {
     for (let option of props.options) {
@@ -31,7 +86,7 @@ const ComboBox: React.FC<ComboBoxProps> = (props) => {
     <Autocomplete
       sx={props.sx}
       value={getValue(props.value)}
-      options={props.options}
+      options={comboboxData}
       disabled={props.disabled}
       hidden={props?.hidden || false}
       onChange={(event, newValue) => {

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

@@ -8,6 +8,7 @@ const TemplateTextField: React.FC<Omit<TextFieldProps, "outlined">> = (
   return (
     <TextField
       {...props}
+      hidden={true}
       slotProps={{ inputLabel: { shrink: true, sx: { fontWeight: "bold" } } }}
       label={<>{props?.label ? t(props.label) : ""}</>}
       helperText={props?.helperText ? t(props.helperText) : undefined}

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

@@ -33,28 +33,14 @@ const TemplateForm: React.FC<TemplateFormProps> = (
       minHeight: 500,
       minWidth: 400,
     });
-  const { Window: WorkflowWindow, setWindowState: setWorkflowWindowState } =
-    useWindow({
-      windowTitle: "Approvals",
-      windowIcon: "stamp",
-      width: "fit-content",
-      height: "fit-content",
-      minHeight: 500,
-      minWidth: 400,
-    });
+
   const [attachmentPanelEnabledForRecord, setAttachmentPanelEnabledForRecord] =
     useState<boolean>(true);
   const { t } = useTranslation();
   const fields = getAllFields(props.elements);
-  const initiallyHiddenFields = [];
-  for (const field of fields) {
-    if (field?.hidden) {
-      initiallyHiddenFields.push(field.fieldName);
-    }
-  }
-  const [hiddenFields, setHiddenFields] = useState<string[]>(
-    initiallyHiddenFields
-  );
+
+  const [disabledFields, setDisabledFields] = useState<string[]>([]);
+  const [hiddenFields, setHiddenFields] = useState<string[]>([]);
   const initialValues: any = {};
   for (const element of props.elements) {
     if (
@@ -65,7 +51,7 @@ const TemplateForm: React.FC<TemplateFormProps> = (
       initialValues[element.props.fieldName] = element.props.defaultValue;
     }
   }
-  const [disabledFields, setDisabledFields] = useState<string[]>([]);
+
   let formSchema = null;
   if (props?.validationSchema) {
     formSchema = props.validationSchema;
@@ -149,6 +135,19 @@ const TemplateForm: React.FC<TemplateFormProps> = (
     }
   };
 
+  const { Window: WorkflowWindow, setWindowState: setWorkflowWindowState } =
+    useWindow({
+      windowTitle: "Approvals",
+      windowIcon: "stamp",
+      height: "fit-content",
+      minHeight: 500,
+      width: "fit-content",
+      // width: 1100,
+      onCloseCallBack: async () => {
+        await loadRecord();
+      },
+    });
+
   const formActions = {
     setFieldValue: (fieldName: string, fieldValue: any) => {
       formManager.setValue(fieldName, fieldValue);
@@ -179,6 +178,20 @@ const TemplateForm: React.FC<TemplateFormProps> = (
     },
   };
 
+  useEffect(() => {
+    const initiallyHiddenFields = [];
+    const initiallyDisabledFields = [];
+    for (const field of fields) {
+      if (field?.hidden) {
+        initiallyHiddenFields.push(field.fieldName);
+      }
+      if (field?.disabled) {
+        initiallyDisabledFields.push(field.fieldName);
+      }
+    }
+    setHiddenFields(initiallyHiddenFields);
+    setDisabledFields(initiallyDisabledFields);
+  }, [props.elements]);
   useEffect(() => {
     loadRecord();
   }, [props?.recordIdToEdit]);

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

@@ -114,9 +114,13 @@ export const generateComboColumn: (
         <ComboBox
           {...params}
           sx={{ width: "100%" }}
-          options={params.colDef.options}
-          valueField={params.colDef.valueField}
-          displayField={params.colDef.displayField}
+          options={params?.colDef?.options}
+          commonStoreKey={params?.colDef?.commonStoreKey}
+          dataQueryId={params?.colDef?.dataQueryId}
+          storeUrl={params?.colDef?.storeUrl}
+          storeLoadParam={params?.colDef?.storeLoadParam}
+          valueField={params?.colDef?.valueField}
+          displayField={params?.colDef?.displayField}
           onChangeCallBack={(v: any, selectedRecord: any) => {
             if (v === null) {
               params.api.setEditCellValue({

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

@@ -101,11 +101,11 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
   const { Window: WorkFlowWindow, setWindowState: setWorkFlowWindowState } =
     useWindow({
       windowTitle: t(props.gridTitle) + " Approvals",
-      windowIcon: "stamp",
-      width: "fit-content",
+      windowIcon: "stamp",      
       height: "fit-content",
       minHeight: 500,
-      minWidth: "80%",
+      width: "fit-content",
+      // width:1100,      
       onCloseCallBack: () => {
         props?.apiActions?.reloadData(props.gridLoadParametersValues);
       },
@@ -929,7 +929,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
         <></>
       )}
       {props?.workFlowDocumentCode ? (
-        <WorkFlowWindow>
+        <WorkFlowWindow >
           <WorkflowDocumentPanel
             workFlowDocumentCode={props.workFlowDocumentCode}
             refDocumentId={selectedRecord[props?.keyColumnName || "id"]}

package/src/components/templates/attachment/AttachmentPanel.tsx

@@ -93,8 +93,7 @@ const AttachmentPanel: React.FC<AttachmentPanelProps> = (props) => {
     if (!files) {
       toast.error("You must add files to upload");
       return;
-    }
-    debugger;
+    }    
     for (const file of files) {
       if (file.type.startsWith("image/")) {
         const MAX_SIZE_KB = 600;
@@ -176,6 +175,7 @@ const AttachmentPanel: React.FC<AttachmentPanelProps> = (props) => {
         display: "flex",
         flexDirection: "column",
         width: "100%",
+        minHeight:400,
         alignItems: "center",
         justifyContent: "flex-start",
         overflow: "hidden",

package/src/components/templates/workflow/WorkflowDocumentPanel.tsx

@@ -347,7 +347,7 @@ const WorkflowDocumentPanel: React.FC<WorkflowDocumentPanelProps> = (props) => {
       <Box
         sx={{
           flex: 1,
-          width: "100%",
+          width: "100%",          
           overflow: "hidden",
           display: "flex",
           // flexDirection: "column",
@@ -358,7 +358,7 @@ const WorkflowDocumentPanel: React.FC<WorkflowDocumentPanelProps> = (props) => {
             sx={{
               padding: 2,
               display: "flex",
-              flex: 1,
+              // flex: 1,
               margin: 1,
               flexDirection: "column",
               alignItems: "center",
@@ -562,8 +562,8 @@ const WorkflowDocumentPanel: React.FC<WorkflowDocumentPanelProps> = (props) => {
           <Paper
             sx={{
               display: "flex",
-              flexDirection: "column",
-              flexGrow: 1,
+              flexDirection: "column",              
+              width:600,
               padding: 2,
               margin: 1,
               alignItems: "center",

package/src/components/templates/workflow/WorkflowDocumentTimeLine.tsx

@@ -20,7 +20,8 @@ const WorkflowDocumentTimeLine: React.FC<WorkflowDocumentTimeLineProp> = (
       sx={{
         display: "flex",
         flexDirection: "column",
-        flexGrow: 1,
+        // flexGrow: 1,
+        width: 600,
         padding: 1,
         margin: 1,
         alignItems: "center",

package/src/redux/features/administration/AdministrationStoresMetaData.ts

@@ -25,6 +25,11 @@ export const ADMINISTRATION_STORES: CommonStores = {
     url: "",
     data: [{ value: "Excel" }, { value: "Jasper" }, { value: "Blueprint" }],
   },
+  SystemWorkflows: {
+    autoLoad: true,
+    url: "api/v1/dev/workflowdocument/all",
+    data: [],
+  },
   SystemWidgetTypes: {
     autoLoad: false,
     url: "",