CE-1115 - Update to be used as a modal, and to take a usage prop, e.g., to differentiate between being used as query screen vs. used on report-setup screen

src/qqq/pages/records/query/RecordQuery.tsx

@@ -76,7 +76,7 @@ import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
 import {SavedViewUtils} from "qqq/utils/qqq/SavedViewUtils";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
-import React, {forwardRef, useContext, useEffect, useReducer, useRef, useState} from "react";
+import React, {forwardRef, useContext, useEffect, useImperativeHandle, useReducer, useRef, useState} from "react";
 import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
 
 const CURRENT_SAVED_VIEW_ID_LOCAL_STORAGE_KEY_ROOT = "qqq.currentSavedViewId";
@@ -84,18 +84,16 @@ const DENSITY_LOCAL_STORAGE_KEY_ROOT = "qqq.density";
 const VIEW_LOCAL_STORAGE_KEY_ROOT = "qqq.recordQueryView";
 
 export const TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT = "qqq.tableVariant";
+export type QueryScreenUsage = "queryScreen" | "reportSetup"
 
 interface Props
 {
    table?: QTableMetaData;
    launchProcess?: QProcessMetaData;
+   usage?: QueryScreenUsage;
+   isModal?: boolean;
 }
 
-RecordQuery.defaultProps = {
-   table: null,
-   launchProcess: null
-};
-
 ///////////////////////////////////////////////////////
 // define possible values for our pageState variable //
 ///////////////////////////////////////////////////////
@@ -120,7 +118,7 @@ const getLoadingScreen = () =>
  **
  ** Yuge component.  The best.  Lots of very smart people are saying so.
  *******************************************************************************/
-function RecordQuery({table, launchProcess}: Props): JSX.Element
+const RecordQuery = forwardRef(({table, usage, isModal}: Props, ref) =>
 {
    const tableName = table.name;
    const [searchParams] = useSearchParams();
@@ -136,6 +134,16 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const [firstRender, setFirstRender] = useState(true);
    const [isFirstRenderAfterChangingTables, setIsFirstRenderAfterChangingTables] = useState(false);
 
+   useImperativeHandle(ref, () =>
+   {
+      return {
+         getCurrentView(): RecordQueryView
+         {
+            return view;
+         }
+      }
+   });
+
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // manage "state" being passed from some screens (like delete) into query screen - by grabbing, and then deleting //
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -687,10 +695,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          else if (!searchParams.has("filter"))
          {
             if (localStorage.getItem(currentSavedViewLocalStorageKey))
+            {
+               if(usage == "queryScreen")
                {
                   currentSavedViewId = Number.parseInt(localStorage.getItem(currentSavedViewLocalStorageKey));
                   navigate(`${metaData.getTablePathByName(tableName)}/savedView/${currentSavedViewId}`);
                }
+            }
             else
             {
                doClearCurrentSavedView();
@@ -943,7 +954,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                console.log(`Received error for query ${thisQueryId}`);
                console.log(error);
 
-               var errorMessage;
+               let errorMessage;
                if (error && error.message)
                {
                   errorMessage = error.message;
@@ -2183,6 +2194,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                <GridToolbarDensitySelector nonce={undefined} />
             </div>
 
+            {
+               usage == "queryScreen" &&
                <div style={{zIndex: 10}}>
                   <MenuButton label="Selection" iconName={selectedIds.length == 0 ? "check_box_outline_blank" : "check_box"} disabled={totalRecords == 0} options={selectionMenuOptions} callback={selectionMenuCallback} />
                   <SelectionSubsetDialog isOpen={selectionSubsetSizePromptOpen} initialValue={selectionSubsetSize} closeHandler={(value) =>
@@ -2204,6 +2217,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                      }
                   }} />
                </div>
+            }
 
             <div>
                {
@@ -2302,6 +2316,9 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    if (pageState == "ready")
    {
       const newFilterHash = JSON.stringify(prepQueryFilterForBackend(queryFilter));
+      const filterForBackend = prepQueryFilterForBackend(queryFilter);
+
+      const newFilterHash = JSON.stringify(filterForBackend);
       if (filterHash != newFilterHash)
       {
          setFilterHash(newFilterHash);
@@ -2474,7 +2491,10 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             {
                const currentSavedViewId = Number.parseInt(localStorage.getItem(currentSavedViewLocalStorageKey));
                console.log(`returning to previously active saved view ${currentSavedViewId}`);
+               if(usage == "queryScreen")
+               {
                   navigate(`${metaData.getTablePathByName(tableName)}/savedView/${currentSavedViewId}`);
+               }
                setViewIdInLocation(currentSavedViewId);
 
                /////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -2623,7 +2643,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    let savedViewsComponent = null;
    if (metaData && metaData.processes.has("querySavedView"))
    {
-      savedViewsComponent = (<SavedViews qController={qController} metaData={metaData} tableMetaData={tableMetaData} view={view} viewAsJson={viewAsJson} currentSavedView={currentSavedView} tableDefaultView={tableDefaultView} viewOnChangeCallback={handleSavedViewChange} loadingSavedView={loadingSavedView} />);
+      savedViewsComponent = (<SavedViews qController={qController} metaData={metaData} tableMetaData={tableMetaData} view={view} viewAsJson={viewAsJson} currentSavedView={currentSavedView} tableDefaultView={tableDefaultView} viewOnChangeCallback={handleSavedViewChange} loadingSavedView={loadingSavedView} queryScreenUsage={usage} />);
    }
 
 
@@ -2700,7 +2720,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    };
 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
-   // these numbers help set the height of the grid (so page won't scroll) based on spcae above & below it //
+   // these numbers help set the height of the grid (so page won't scroll) based on space above & below it //
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    let spaceBelowGrid = 40;
    let spaceAboveGrid = 205;
@@ -2714,19 +2734,26 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       spaceAboveGrid += 60;
    }
 
+   if(isModal)
+   {
+      spaceAboveGrid += 130;
+   }
+
    ////////////////////////
    // main screen render //
    ////////////////////////
-   return (
+   const body = (
-      <BaseLayout>
+      <React.Fragment>
          <Box display="flex" justifyContent="space-between">
             <Box>
                <Typography textTransform="capitalize" variant="h3">
                   {pageLoadingState.isLoading() && ""}
                   {pageLoadingState.isLoadingSlow() && "Loading..."}
-                  {pageLoadingState.isNotLoading() && getPageHeader(tableMetaData, visibleJoinTables, tableVariant)}
+                  {pageLoadingState.isNotLoading() && !isModal && getPageHeader(tableMetaData, visibleJoinTables, tableVariant)}
                </Typography>
             </Box>
+            {
+               !isModal &&
                <Box whiteSpace="nowrap">
                   <GotoRecordButton metaData={metaData} tableMetaData={tableMetaData} />
                   <Box display="inline-block" width="150px">
@@ -2748,6 +2775,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                      <QCreateNewButton tablePath={metaData?.getTablePathByName(tableName)} />
                   }
                </Box>
+            }
          </Box>
          <div className="recordQuery">
             {/*
@@ -2801,6 +2829,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                      setQuickFilterFieldNames={doSetQuickFilterFieldNames}
                      gridApiRef={gridApiRef}
                      mode={mode}
+                     queryScreenUsage={usage}
                      setMode={doSetMode}
                      savedViewsComponent={savedViewsComponent}
                      columnMenuComponent={buildColumnMenu()}
@@ -2841,7 +2870,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                         sortingMode="server"
                         filterMode="server"
                         page={pageNumber}
-                        checkboxSelection
+                        checkboxSelection={usage == "queryScreen"}
                         disableSelectionOnClick
                         autoHeight={false}
                         rows={rows}
@@ -2850,7 +2879,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                         rowBuffer={10}
                         rowCount={totalRecords === null || totalRecords === undefined ? 0 : totalRecords}
                         onPageSizeChange={handleRowsPerPageChange}
-                        onRowClick={handleRowClick}
+                        onRowClick={usage == "queryScreen" ? handleRowClick : null}
                         onStateChange={handleStateChange}
                         density={density}
                         loading={loading}
@@ -2908,8 +2937,26 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                </Modal>
             }
          </div>
-      </BaseLayout>
+      </React.Fragment>
    );
-}
+
+   if(isModal)
+   {
+      return body;
+   }
+
+   return (
+      <BaseLayout>{body}</BaseLayout>
+   )
+})
+
+
+RecordQuery.defaultProps = {
+   table: null,
+   usage: "queryScreen",
+   launchProcess: null,
+   isModal: false,
+};
+
 
 export default RecordQuery;