@asaleh37/ui-base 26.2.2 → 26.2.16

package/package.json

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

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

@@ -12,7 +12,7 @@ import { DATE_FORMAT, DATE_TIME_FORMAT } from "../../../util";
 const EntityParameterGrid: React.FC = () => {
   const { t } = useTranslation();
   const SystemParameterTypes = useSelector(
-    (state: any) => state.commonStores.stores.SystemParameterTypes.data
+    (state: any) => state.commonStores.stores.SystemParameterTypes.data,
   );
   const [data, setData] = useState([]);
   const apiActions = useApiActions({
@@ -24,7 +24,7 @@ const EntityParameterGrid: React.FC = () => {
   });
 
   const SystemDataQueries = useSelector(
-    (state: any) => state.commonStores.stores.SystemDataQueries.data
+    (state: any) => state.commonStores.stores.SystemDataQueries.data,
   );
   const adjustFormAccordingFormValues: FormValueChangeCallBk = (
     formValues: any,
@@ -32,7 +32,7 @@ const EntityParameterGrid: React.FC = () => {
     formManager,
     fieldName,
     newValue,
-    selectedRecord
+    selectedRecord,
   ) => {
     if (fieldName) {
       if (fieldName === "parameterType") {
@@ -41,6 +41,7 @@ const EntityParameterGrid: React.FC = () => {
           formActions.showField("parameterDataQueryId");
           formActions.showField("parameterDataset");
           formActions.showField("parameterDisplayField");
+          formActions.showField("comboboxValueDataType");
           formActions.showField("parameterValueField");
           formActions.hideField("parameterValueFormat");
         } else {
@@ -48,6 +49,7 @@ const EntityParameterGrid: React.FC = () => {
           formActions.hideField("parameterDataset");
           formActions.hideField("parameterDisplayField");
           formActions.hideField("parameterValueField");
+          formActions.hideField("comboboxValueDataType");
         }
         if (newValue === "date" || newValue === "datetime") {
           formActions.showField("parameterValueFormat");
@@ -75,14 +77,14 @@ const EntityParameterGrid: React.FC = () => {
           formActions.showField("parameterDataQueryId");
         }
       }
-    } else {      
+    } else {
       if (formValues?.parameterType === "combobox") {
         formManager.setValue("parameterValueFormat", null);
         formActions.showField("parameterDataQueryId");
         formActions.showField("parameterDataset");
         formActions.showField("parameterDisplayField");
         formActions.showField("parameterValueField");
-        formActions.hideField("parameterValueFormat");                                
+        formActions.hideField("parameterValueFormat");
       } else if (formValues?.parameterType === "date") {
         formActions.hideField("parameterDataQueryId");
         formActions.hideField("parameterDataset");
@@ -257,6 +259,19 @@ const EntityParameterGrid: React.FC = () => {
         fieldType: "text",
       },
     },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Value Type",
+        fieldName: "comboboxValueDataType",
+        fieldType: "combobox",
+        options: [{ value: "string" }, { value: "number" }],
+        comboboxValueDataType: "string",
+        optionDisplayField: "value",
+        optionValueField: "value",
+      },
+    },
     {
       type: "field",
       mode: "props",

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

@@ -12,7 +12,10 @@ type MailAttachmentGridProps = {
 
 const MailAttachmentGrid: React.FC<MailAttachmentGridProps> = (props) => {
   const SystemReports = useSelector(
-    (state: any) => state.commonStores.stores.SystemReports.data
+    (state: any) => state.commonStores.stores.SystemReports.data,
+  );
+  const SystemDataQueries = useSelector(
+    (state: any) => state.commonStores.stores.SystemDataQueries.data,
   );
   const { t } = useTranslation();
   const [data, setData] = useState([]);
@@ -99,10 +102,24 @@ const MailAttachmentGrid: React.FC<MailAttachmentGridProps> = (props) => {
         optionDisplayField: "reportName",
         fieldLabel: "REPORT_REPORT_NAME",
         fieldName: "reportId",
-        required: true,
+        required: false,
         fieldType: "combobox",
       },
     },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel:
+          "Attachment Query (List of Attachments Records) from XXCCAD.ATTACHMENT Table ",
+        fieldName: "attachmentQueryId",
+        required: false,
+        fieldType: "combobox",
+        options: SystemDataQueries,
+        optionDisplayField: "queryName",
+        optionValueField: "id",
+      },
+    },
     {
       type: "field",
       mode: "props",

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

@@ -33,7 +33,7 @@ const MailTemplateGrid: React.FC = () => {
   } = useWindow({
     windowTitle: "Mail Attachment",
     windowIcon: "paperclip",
-    width: 500,
+    // width: 500,
   });
   const { t } = useTranslation();
   const [data, setData] = useState([]);

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

@@ -48,7 +48,7 @@ const StyledToolbarButton = styled(ToolbarButton)<{ ownerState: OwnerState }>(
     opacity: ownerState.expanded ? 0 : 1,
     pointerEvents: ownerState.expanded ? "none" : "auto",
     transition: theme.transitions.create(["opacity"]),
-  })
+  }),
 );
 
 const StyledTextField = styled(TextField)<{
@@ -62,7 +62,7 @@ const StyledTextField = styled(TextField)<{
 }));
 
 const TemplateGridTopBar: React.FC<TemplateGridTopBarProps> = (
-  props: TemplateGridTopBarProps
+  props: TemplateGridTopBarProps,
 ) => {
   const { t } = useTranslation();
   const session = useSession();
@@ -76,158 +76,175 @@ const TemplateGridTopBar: React.FC<TemplateGridTopBarProps> = (
       type: "include",
     },
     props?.templateProps?.data || [],
-    props?.templateProps?.keyColumnName || "id"
+    props?.templateProps?.keyColumnName || "id",
   );
   return (
-    <Toolbar>
-      {isCreationEnabled &&
-      isCreationAuthorized &&
-      props?.templateProps?.editMode?.editMode != "none" ? (
-        props?.templateProps?.hideCreateBtn === undefined ||
-        props?.templateProps?.hideCreateBtn === false ? (
-          <Button onClick={props?.handleCreateNewRecord}>
-            <FontAwesomeIcon
-              icon="add"
-              style={{ marginRight: 5, marginLeft: 5 }}
-            />
-            {t("ADD_BTN_LABEL")}
-          </Button>
+    <>
+      <Toolbar>
+        {isCreationEnabled &&
+        isCreationAuthorized &&
+        props?.templateProps?.editMode?.editMode != "none" ? (
+          props?.templateProps?.hideCreateBtn === undefined ||
+          props?.templateProps?.hideCreateBtn === false ? (
+            <Button onClick={props?.handleCreateNewRecord}>
+              <FontAwesomeIcon
+                icon="add"
+                style={{ marginRight: 5, marginLeft: 5 }}
+              />
+              {t("ADD_BTN_LABEL")}
+            </Button>
+          ) : (
+            <></>
+          )
         ) : (
           <></>
-        )
-      ) : (
-        <></>
-      )}
-      {props?.templateProps?.rowActions ? (
-        props.templateProps.rowActions.map((rowAction, index) =>
-          rowAction?.gridActionProps?.multiRecord === true ? (
-            <TemplateGridMultiRecordAction
-              {...rowAction}
-              key={index}
-              reloadData={async () => {
-                props.templateProps.apiActions.reloadData(
-                  props?.templateProps?.gridLoadParametersValues
-                );
-              }}
-              recordIdsToProcessActionOn={gridSelection.selectedRecordIds}
-              recordsToProcessActionOn={gridSelection.selectedRecords}
-            />
-          ) : null
-        )
-      ) : (
-        <></>
-      )}
-      <Box sx={{ flex: 1, mx: 0.5, my: 0.5, padding: 1 }}>
-        {props?.templateProps?.tBar}
-      </Box>
-
-      <Tooltip title="Columns">
-        <ColumnsPanelTrigger render={<ToolbarButton />}>
-          <GridViewColumnIcon fontSize="small" />
-        </ColumnsPanelTrigger>
-      </Tooltip>
+        )}
+        {props?.templateProps?.rowActions ? (
+          props.templateProps.rowActions.map((rowAction, index) =>
+            rowAction?.gridActionProps?.multiRecord === true ? (
+              <TemplateGridMultiRecordAction
+                {...rowAction}
+                key={index}
+                reloadData={async () => {
+                  props.templateProps.apiActions.reloadData(
+                    props?.templateProps?.gridLoadParametersValues,
+                  );
+                }}
+                recordIdsToProcessActionOn={gridSelection.selectedRecordIds}
+                recordsToProcessActionOn={gridSelection.selectedRecords}
+              />
+            ) : null,
+          )
+        ) : (
+          <></>
+        )}
+        <Box
+          sx={{
+            flex: 1,
+          }}
+        ></Box>
 
-      <Tooltip title="Filters">
-        <FilterPanelTrigger
-          render={(props, state) => (
-            <ToolbarButton {...props} color="default">
-              <Badge
-                badgeContent={state.filterCount}
-                color="primary"
-                variant="dot"
-              >
-                <GridFilterListIcon fontSize="small" />
-              </Badge>
-            </ToolbarButton>
-          )}
-        />
-      </Tooltip>
+        <Tooltip title="Columns">
+          <ColumnsPanelTrigger render={<ToolbarButton />}>
+            <GridViewColumnIcon fontSize="small" />
+          </ColumnsPanelTrigger>
+        </Tooltip>
 
-      {props?.templateProps?.gridStateKey ? (
-        <Tooltip title={t("RESET_GRID_STATE")}>
-          <IconButton onClick={props?.clearGridState}>
-            <FontAwesomeIcon icon="eraser" />
-          </IconButton>
+        <Tooltip title="Filters">
+          <FilterPanelTrigger
+            render={(props, state) => (
+              <ToolbarButton {...props} color="default">
+                <Badge
+                  badgeContent={state.filterCount}
+                  color="primary"
+                  variant="dot"
+                >
+                  <GridFilterListIcon fontSize="small" />
+                </Badge>
+              </ToolbarButton>
+            )}
+          />
         </Tooltip>
-      ) : (
-        <></>
-      )}
 
-      <Divider
-        orientation="vertical"
-        variant="middle"
-        flexItem
-        sx={{ mx: 0.5 }}
-      />
+        {props?.templateProps?.gridStateKey ? (
+          <Tooltip title={t("RESET_GRID_STATE")}>
+            <IconButton onClick={props?.clearGridState}>
+              <FontAwesomeIcon icon="eraser" />
+            </IconButton>
+          </Tooltip>
+        ) : (
+          <></>
+        )}
+
+        <Divider
+          orientation="vertical"
+          variant="middle"
+          flexItem
+          sx={{ mx: 0.5 }}
+        />
 
-      <Tooltip title={t("EXPORT_EXECL_LABEL")}>
-        <ExportExcel render={<MenuItem />}>
-          <FontAwesomeIcon icon="file-excel" color="green" />
-        </ExportExcel>
-      </Tooltip>
+        <Tooltip title={t("EXPORT_EXECL_LABEL")}>
+          <ExportExcel render={<MenuItem />}>
+            <FontAwesomeIcon icon="file-excel" color="green" />
+          </ExportExcel>
+        </Tooltip>
 
-      <StyledQuickFilter>
-        <QuickFilterTrigger
-          render={(triggerProps, state) => (
-            <Tooltip title={t("SEARCH_BTN_LABEL")} enterDelay={0}>
-              <StyledToolbarButton
-                {...triggerProps}
+        <StyledQuickFilter>
+          <QuickFilterTrigger
+            render={(triggerProps, state) => (
+              <Tooltip title={t("SEARCH_BTN_LABEL")} enterDelay={0}>
+                <StyledToolbarButton
+                  {...triggerProps}
+                  ownerState={{ expanded: state.expanded }}
+                  color="default"
+                  aria-disabled={state.expanded}
+                >
+                  <FontAwesomeIcon icon="search" />
+                </StyledToolbarButton>
+              </Tooltip>
+            )}
+          />
+          <QuickFilterControl
+            render={({ ref, ...controlProps }, state) => (
+              <StyledTextField
+                {...controlProps}
                 ownerState={{ expanded: state.expanded }}
-                color="default"
-                aria-disabled={state.expanded}
-              >
-                <FontAwesomeIcon icon="search" />
-              </StyledToolbarButton>
-            </Tooltip>
-          )}
-        />
-        <QuickFilterControl
-          render={({ ref, ...controlProps }, state) => (
-            <StyledTextField
-              {...controlProps}
-              ownerState={{ expanded: state.expanded }}
-              inputRef={ref}
-              aria-label="Search"
-              placeholder={`${t("SEARCH_BTN_LABEL")}...`}
-              size="small"
-              slotProps={{
-                input: {
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <FontAwesomeIcon icon="search" />
-                    </InputAdornment>
-                  ),
-                  endAdornment: state.value ? (
-                    <InputAdornment position="end">
-                      <QuickFilterClear
-                        edge="end"
-                        size="small"
-                        aria-label="Clear search"
-                        // material={{ sx: { marginRight: -0.75 } }}
-                      >
-                        <FontAwesomeIcon icon="xmark" />
-                      </QuickFilterClear>
-                    </InputAdornment>
-                  ) : null,
-                  ...controlProps.slotProps?.input,
-                },
-                ...controlProps.slotProps,
-              }}
-            />
-          )}
-        />
-      </StyledQuickFilter>
+                inputRef={ref}
+                aria-label="Search"
+                placeholder={`${t("SEARCH_BTN_LABEL")}...`}
+                size="small"
+                slotProps={{
+                  input: {
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <FontAwesomeIcon icon="search" />
+                      </InputAdornment>
+                    ),
+                    endAdornment: state.value ? (
+                      <InputAdornment position="end">
+                        <QuickFilterClear
+                          edge="end"
+                          size="small"
+                          aria-label="Clear search"
+                          // material={{ sx: { marginRight: -0.75 } }}
+                        >
+                          <FontAwesomeIcon icon="xmark" />
+                        </QuickFilterClear>
+                      </InputAdornment>
+                    ) : null,
+                    ...controlProps.slotProps?.input,
+                  },
+                  ...controlProps.slotProps,
+                }}
+              />
+            )}
+          />
+        </StyledQuickFilter>
+
+        <IconButton
+          onClick={() => {
+            props.templateProps.apiActions.reloadData(
+              props?.templateProps?.gridLoadParametersValues,
+            );
+          }}
+        >
+          <FontAwesomeIcon icon="refresh" />
+        </IconButton>
+      </Toolbar>
 
-      <IconButton
-        onClick={() => {
-          props.templateProps.apiActions.reloadData(
-            props?.templateProps?.gridLoadParametersValues
-          );
-        }}
-      >
-        <FontAwesomeIcon icon="refresh" />
-      </IconButton>
-    </Toolbar>
+      {props?.templateProps?.tBar ? (
+        <Box
+          sx={{
+            display: "flex",
+            padding: 2,
+          }}
+        >
+          {props?.templateProps?.tBar}
+        </Box>
+      ) : (
+        <></>
+      )}
+    </>
   );
 };
 

package/src/components/templates/report/ReportViewer.tsx

@@ -27,7 +27,7 @@ const ReportViewer: React.FC<ReportViewerProps> = (props) => {
   const [errorMessage, setErrorMessage] = useState(null);
   const [excelReportData, setExcelReportData] = useState<Array<any>>([]);
   const [reportViewerState, setReportViewerState] = useState<ReportViewerState>(
-    "WAITING_REPORT_CODE"
+    "WAITING_REPORT_CODE",
   );
   const { handleGetRequest, handlePostRequest, HandleDownloadHTTPPostPDF } =
     useAxios();
@@ -52,7 +52,7 @@ const ReportViewer: React.FC<ReportViewerProps> = (props) => {
       },
       failureCallBkFn: (response) => {
         setErrorMessage(
-          "Failed loading report metadata ... contact your administrator"
+          "Failed loading report metadata ... contact your administrator",
         );
         setReportViewerState("ERROR");
       },
@@ -136,7 +136,7 @@ const ReportViewer: React.FC<ReportViewerProps> = (props) => {
         },
         failureCallBkFn: (response) => {
           setErrorMessage(
-            "Failed To run report ... contact your administrator"
+            "Failed To run report ... contact your administrator",
           );
           setReportViewerState("ERROR");
         },
@@ -160,9 +160,9 @@ const ReportViewer: React.FC<ReportViewerProps> = (props) => {
     <>
       <Box
         sx={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
+          // display: "flex",
+          // alignItems: "center",
+          // justifyContent: "center",
           width: "100%",
         }}
       >
@@ -208,63 +208,52 @@ const ReportViewer: React.FC<ReportViewerProps> = (props) => {
           <></>
         )}
       </Box>
-      <Box
-        sx={{
-          flexGrow: 1,
-          width: "100%",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "flex-start",
-        }}
-      >
-        {reportViewerState === "WAITING_PARAMETER_INPUT" &&
-        reportInfo?.reportType != "Excel" ? (
-          <ParameterPanel searchBtnClickCallBk={runReport} />
-        ) : reportViewerState === "SHOWING_RESULT" ||
-          ((reportViewerState === "WAITING_PARAMETER_INPUT" ||
-            reportViewerState === "WAITING_RESULT") &&
-            reportInfo?.reportType === "Excel") ? (
-          reportInfo?.reportType === "Excel" ? (
-            <ExcelReportViewer
-              reportData={excelReportData}
-              setReportData={setExcelReportData}
-              reloadReport={async () => {
-                runReport(parametersValues);
-              }}
-              gridLoadParameters={panelElements}
-              gridLoadParametersValues={parametersValues}
-              setGridLoadParametersValues={setParametersValues}
-            />
-          ) : (
-            <iframe
-              src={blobUrl}
-              width="100%"
-              height="100%"
-              title="PDF Preview"
-              style={{ border: "1px solid #ccc", marginTop: "20px" }}
-            ></iframe>
-          )
-        ) : reportViewerState === "ERROR" ? (
-          <Box
-            sx={{
-              display: "flex",
-              flex: 1,
-              alignItems: "center",
-              justifyContent: "center",
+      {reportViewerState === "WAITING_PARAMETER_INPUT" &&
+      reportInfo?.reportType != "Excel" ? (
+        <ParameterPanel searchBtnClickCallBk={runReport} />
+      ) : reportViewerState === "SHOWING_RESULT" ||
+        ((reportViewerState === "WAITING_PARAMETER_INPUT" ||
+          reportViewerState === "WAITING_RESULT") &&
+          reportInfo?.reportType === "Excel") ? (
+        reportInfo?.reportType === "Excel" ? (
+          <ExcelReportViewer
+            reportData={excelReportData}
+            setReportData={setExcelReportData}
+            reloadReport={async () => {
+              runReport(parametersValues);
             }}
-          >
-            <FontAwesomeIcon
-              icon="circle-exclamation"
-              color="darkred"
-              style={{ marginRight: 10, marginLeft: 10 }}
-            />
-            {errorMessage}
-          </Box>
+            gridLoadParameters={panelElements}
+            gridLoadParametersValues={parametersValues}
+            setGridLoadParametersValues={setParametersValues}
+          />
         ) : (
-          <></>
-        )}
-      </Box>
+          <iframe
+            src={blobUrl}
+            width="100%"
+            height="100%"
+            title="PDF Preview"
+            style={{ border: "1px solid #ccc", marginTop: "20px" }}
+          ></iframe>
+        )
+      ) : reportViewerState === "ERROR" ? (
+        <Box
+          sx={{
+            display: "flex",
+            flex: 1,
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <FontAwesomeIcon
+            icon="circle-exclamation"
+            color="darkred"
+            style={{ marginRight: 10, marginLeft: 10 }}
+          />
+          {errorMessage}
+        </Box>
+      ) : (
+        <></>
+      )}
     </>
   );
 };

package/src/hooks/useParameterPanel.tsx

@@ -39,7 +39,7 @@ export const getFormElementsFromParameters = (
 ) => {
   const formElements: Array<FormElementProps> = [];
   for (const parameter of parameters) {
-    debugger;
+    
     const formElement: FormElementProps = {
       type: "field",
       mode: "props",

package/src/main.tsx

@@ -14,7 +14,7 @@ createRoot(document.getElementById("root")!).render(
     }}
     appThemeMode="dark"
     allowThemeChange={true}
-    appVersion="25.12.12"
+    appVersion="25.12.16"
     authenticationMethod="APP"
     azureConfiguration={{
       frontEndClientId: "c3bbbdbd-f392-4459-b3dd-2351cb07f924",