@asaleh37/ui-base 25.9.30 → 25.10.22-1

package/package.json

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

package/src/components/index.ts

@@ -1,4 +1,4 @@
-import { DataGridPremium } from "@mui/x-data-grid-premium";
+import { DataGridPremium, GridActionsCellItem } from "@mui/x-data-grid-premium";
 export * from "./BaseApp";
 export * from "@mui/material";
 export * from "@mui/lab";
@@ -7,4 +7,4 @@ export { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 export type { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
 export * from "./templates";
 export * from "@mui/x-tree-view/models";
-export { DataGridPremium } ;
+export { DataGridPremium };

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

@@ -101,6 +101,7 @@ export type TemplateGridColDef = GridColDef & {
   dataQueryId?: number;
   storeUrl?: string;
   storeLoadParam?: any;
+  comboboxGroupField?: string;
 };
 
 export type TemplateGridAttachmentProps = {
@@ -207,6 +208,7 @@ export type RecordFieldProps = {
     | "custom";
   lookupType?: string;
   comboboxValueDataType?: "number" | "string";
+  comboboxGroupField?: string;
   commonStoreKey?: string;
   dataQueryId?: number;
   storeUrl?: string;

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

@@ -132,6 +132,7 @@ export const constructGridColumnsFromFields: (
     } 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
@@ -144,8 +145,11 @@ export const constructGridColumnsFromFields: (
         searchable: tableField?.gridProps?.searchable,
         valueField: tableField?.optionValueField || "value",
         displayField: tableField?.optionDisplayField || "display",
-        options: tableField?.options || [],
-
+        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

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

@@ -10,6 +10,7 @@ interface ComboBoxProps {
   label: string;
   disabled?: boolean;
   required?: boolean;
+  groupField?: string;
 
   commonStoreKey?: string;
   dataQueryId?: number;
@@ -126,6 +127,13 @@ const ComboBox: React.FC<ComboBoxProps> = (props) => {
           />
         ),
       }}
+      groupBy={
+        props?.groupField
+          ? (option: any) => {
+              return option[props.groupField] ? option[props.groupField] : "";
+            }
+          : undefined
+      }
       renderInput={(params) => {
         return (
           <TextField

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

@@ -83,13 +83,6 @@ const TemplateForm: React.FC<TemplateFormProps> = (
       );
       if (retrievedRecord) {
         formManager.reset({ ...retrievedRecord });
-        if (props?.formValuesChangeCallBk) {
-          props?.formValuesChangeCallBk(
-            { ...retrievedRecord },
-            formActions,
-            formManager
-          );
-        }
         for (const field of fields) {
           if (
             field?.fieldType === "combobox" &&
@@ -111,6 +104,9 @@ const TemplateForm: React.FC<TemplateFormProps> = (
             }
           }
         }
+        if (props?.formValuesChangeCallBk) {
+          props?.formValuesChangeCallBk(formValues, formActions, formManager);
+        }
       }
     } else {
       formManager.reset({});

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

@@ -77,13 +77,14 @@ export const generateDateTimeColumn: any = (colDef: TemplateGridColDef) => {
 
 type ComboBoxColumnProps = TemplateGridColDef & {
   lookupType?: string;
-  options: Array<any>;
+  options?: Array<any>;
   displayField: string;
   valueField: string;
 };
 export const generateComboColumn: (
   props: ComboBoxColumnProps
 ) => TemplateGridColDef = (colDef: ComboBoxColumnProps) => {
+  debugger;
   const column: TemplateGridColDef = {
     ...colDef,
     type: "custom",
@@ -93,34 +94,38 @@ export const generateComboColumn: (
       }
       return value;
     },
-    // renderCell: (parameters: any) => {
-    //   let record = null;
-    //   try {
-    //     record = parameters.colDef.options.find(
-    //       (item: any) => item[parameters.colDef.valueField] == parameters.value
-    //     );
-    //   } catch (e) {}
-    //   return (
-    //     <div>
-    //       {record != null
-    //         ? record[parameters.colDef.displayField]
-    //         : parameters.value}
-    //     </div>
-    //   );
-    // },
-
+    renderCell: (parameters: any) => {
+      let record = null;
+      try {
+        record = parameters.colDef.options.find(
+          (item: any) => item[parameters.colDef.valueField] == parameters.value
+        );
+      } catch (e) {}
+      return (
+        <div>
+          {record != null
+            ? record[parameters.colDef.displayField]
+            : parameters.value}
+        </div>
+      );
+    },
+    commonStoreKey: colDef?.commonStoreKey,
+    dataQueryId: colDef?.dataQueryId,
+    storeUrl: colDef?.storeUrl,
+    storeLoadParam: colDef?.storeLoadParam,
     renderEditCell: (params: any) => {
       return (
         <ComboBox
           {...params}
           sx={{ width: "100%" }}
           options={params?.colDef?.options}
-          commonStoreKey={params?.colDef?.commonStoreKey}
-          dataQueryId={params?.colDef?.dataQueryId}
-          storeUrl={params?.colDef?.storeUrl}
-          storeLoadParam={params?.colDef?.storeLoadParam}
+          // commonStoreKey={params?.colDef?.commonStoreKey}
+          // dataQueryId={params?.colDef?.dataQueryId}
+          // storeUrl={params?.colDef?.storeUrl}
+          // storeLoadParam={params?.colDef?.storeLoadParam}
           valueField={params?.colDef?.valueField}
           displayField={params?.colDef?.displayField}
+          groupField={params?.colDef?.comboboxGroupField}
           onChangeCallBack={(v: any, selectedRecord: any) => {
             if (v === null) {
               params.api.setEditCellValue({

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

@@ -81,6 +81,8 @@ const PIN_FIXED_COLUMNS = ["__check__", "actions"];
 
 const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
   const { t } = useTranslation();
+  const { handleGetRequest } = useAxios();
+  const stores = useSelector((state: any) => state.commonStores.stores);
   const AppLayout = useSelector((state: any) => state.AppLayout);
   const [selectedRecord, setSelectedRecord] = useState<any>({});
   const [attachmentPanelEnabledForRecord, setAttachmentPanelEnabledForRecord] =
@@ -101,11 +103,11 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
   const { Window: WorkFlowWindow, setWindowState: setWorkFlowWindowState } =
     useWindow({
       windowTitle: t(props.gridTitle) + " Approvals",
-      windowIcon: "stamp",      
+      windowIcon: "stamp",
       height: "fit-content",
       minHeight: 500,
       width: "fit-content",
-      // width:1100,      
+      // width:1100,
       onCloseCallBack: () => {
         props?.apiActions?.reloadData(props.gridLoadParametersValues);
       },
@@ -188,6 +190,33 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
   const [recordToDelete, setRecordToDelete] = useState<any>(null);
   const [recordToEdit, setRecordToEdit] = useState<any>(null);
   const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});
+  const loadComboboxData: (
+    storeUrl: any,
+    storeLoadParam: any,
+    dataQueryId: any
+  ) => Promise<Array<any>> = async (storeUrl, storeLoadParam, dataQueryId) => {
+    let comboboxData: Array<any> = [];
+    if (storeUrl) {
+      await handleGetRequest({
+        endPointURI: storeUrl,
+        showMask: false,
+        parameters: storeLoadParam,
+        successCallBkFn: (response) => {
+          comboboxData = response.data;
+        },
+      });
+    } else if (dataQueryId) {
+      await handleGetRequest({
+        endPointURI: "api/v1/dev/query/result",
+        showMask: false,
+        parameters: { queryId: dataQueryId, ...storeLoadParam },
+        successCallBkFn: (response) => {
+          comboboxData = response.data;
+        },
+      });
+    }
+    return comboboxData;
+  };
   const adjustGridColumns = async () => {
     let gridColumns = constructGridColumnsFromFields(
       fields,
@@ -203,6 +232,20 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
         gridColumn.options = await getLookupOptions(gridColumn.lookupType);
         gridColumn.valueField = "lookupValue";
       }
+      if (gridColumn.type === "custom") {
+        debugger;
+        if (gridColumn?.options) {
+          continue;
+        } else if (gridColumn?.commonStoreKey) {
+          gridColumn.options = stores[gridColumn.commonStoreKey]?.data || [];
+        } else {
+          gridColumn.options = await loadComboboxData(
+            gridColumn?.storeUrl,
+            gridColumn?.storeLoadParam,
+            gridColumn?.dataQueryId
+          );
+        }
+      }
     }
     setGeneratedColumns(gridColumns);
   };
@@ -929,7 +972,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
         <></>
       )}
       {props?.workFlowDocumentCode ? (
-        <WorkFlowWindow >
+        <WorkFlowWindow>
           <WorkflowDocumentPanel
             workFlowDocumentCode={props.workFlowDocumentCode}
             refDocumentId={selectedRecord[props?.keyColumnName || "id"]}

package/src/main.tsx

@@ -11,8 +11,8 @@ createRoot(document.getElementById("root")!).render(
       themeMode: "dark",
       backgroundImageNameInPublicFolder: "bg.jpg",
     }}
-    appVersion="0.0"
-    authenticationMethod="AZURE"
+    appVersion="25.10.22"
+    authenticationMethod="APP"
     azureConfiguration={{
       frontEndClientId: "c3bbbdbd-f392-4459-b3dd-2351cb07f924",
       tenantId: "9f136fef-4529-475f-98e6-d271eb04eb00",