CE-1115 Add sort indication to report setup; make recordQuery, when being used for report setup, not write local storage;

src/qqq/components/query/BasicAndAdvancedQueryControls.tsx

@@ -85,6 +85,26 @@ interface BasicAndAdvancedQueryControlsProps
 
 let debounceTimeout: string | number | NodeJS.Timeout;
 
+
+/*******************************************************************************
+ ** function to generate an element that says how a filter is sorted.
+ *******************************************************************************/
+export function getCurrentSortIndicator(queryFilter: QQueryFilter, tableMetaData: QTableMetaData, toggleSortDirection: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void)
+{
+   if (queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0)
+   {
+      const orderBy = queryFilter.orderBys[0];
+      const orderByFieldName = orderBy.fieldName;
+      const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, orderByFieldName);
+      const fieldLabel = fieldTable.name == tableMetaData.name ? field.label : `${fieldTable.label}: ${field.label}`;
+      return <>Sort: {fieldLabel} <Icon onClick={toggleSortDirection} sx={{ml: "0.5rem"}}>{orderBy.isAscending ? "arrow_upward" : "arrow_downward"}</Icon></>;
+   }
+   else
+   {
+      return <>Sort...</>;
+   }
+}
+
 /*******************************************************************************
  ** Component to provide the basic & advanced query-filter controls for the
  ** RecordQueryOrig screen.
@@ -558,15 +578,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    /////////////////////////////////
    // set up the sort menu button //
    /////////////////////////////////
-   let sortButtonContents = <>Sort...</>;
+   let sortButtonContents = getCurrentSortIndicator(queryFilter, tableMetaData, toggleSortDirection);
-   if (queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0)
-   {
-      const orderBy = queryFilter.orderBys[0];
-      const orderByFieldName = orderBy.fieldName;
-      const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, orderByFieldName);
-      const fieldLabel = fieldTable.name == tableMetaData.name ? field.label : `${fieldTable.label}: ${field.label}`;
-      sortButtonContents = <>Sort: {fieldLabel} <Icon onClick={toggleSortDirection} sx={{ml: "0.5rem"}}>{orderBy.isAscending ? "arrow_upward" : "arrow_downward"}</Icon></>;
-   }
 
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // this is being used as a version of like forcing that we get re-rendered if the query filter changes... //

src/qqq/components/widgets/misc/ReportSetupWidget.tsx

@@ -34,6 +34,7 @@ import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
 import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import AdvancedQueryPreview from "qqq/components/query/AdvancedQueryPreview";
+import {getCurrentSortIndicator} from "qqq/components/query/BasicAndAdvancedQueryControls";
 import Widget, {HeaderLinkButtonComponent} from "qqq/components/widgets/Widget";
 import QQueryColumns, {Column} from "qqq/models/query/QQueryColumns";
 import RecordQuery from "qqq/pages/records/query/RecordQuery";
@@ -101,9 +102,11 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
    // load values from record //
    /////////////////////////////
    let queryFilter = recordValues["queryFilterJson"] && JSON.parse(recordValues["queryFilterJson"]) as QQueryFilter;
+   let usingDefaultEmptyFilter = false;
    if(!queryFilter)
    {
       queryFilter = new QQueryFilter();
+      usingDefaultEmptyFilter = true;
    }
 
    let columns: QQueryColumns = null;
@@ -285,7 +288,10 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
             <Alert severity="error" sx={{mt: 1.5, mb: 0.5}} onClose={() => setAlertContent(null)}>{alertContent}</Alert>
          </Collapse>
          <Box pt="0.5rem">
-            <h5>Query Filter</h5>
+            <Box display="flex" justifyContent="space-between" alignItems="center">
+               <h5>Query Filter</h5>
+               <Box fontSize="0.75rem" fontWeight="700">{mayShowQueryPreview() && getCurrentSortIndicator(frontendQueryFilter, tableMetaData, null)}</Box>
+            </Box>
             {
                mayShowQueryPreview() &&
                <AdvancedQueryPreview tableMetaData={tableMetaData} queryFilter={frontendQueryFilter} isEditable={false} isQueryTooComplex={frontendQueryFilter.subFilters?.length > 0} removeCriteriaByIndexCallback={null} />
@@ -347,7 +353,7 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
                               table={tableMetaData}
                               usage="reportSetup"
                               isModal={true}
-                              initialQueryFilter={frontendQueryFilter}
+                              initialQueryFilter={usingDefaultEmptyFilter ? null : frontendQueryFilter}
                               initialColumns={columns}
                            />
                         }

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

@@ -141,6 +141,34 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
    const [firstRender, setFirstRender] = useState(true);
    const [isFirstRenderAfterChangingTables, setIsFirstRenderAfterChangingTables] = useState(false);
 
+   const [loadedFilterFromInitialFilterParam, setLoadedFilterFromInitialFilterParam] = useState(false);
+
+   const mayWriteLocalStorage = usage == "queryScreen";
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function localStorageSet(key: string, value: string)
+   {
+      if(mayWriteLocalStorage)
+      {
+         localStorage.setItem(key, value);
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function localStorageRemove(key: string)
+   {
+      if(mayWriteLocalStorage)
+      {
+         localStorage.removeItem(key);
+      }
+   }
+
    useImperativeHandle(ref, () =>
    {
       return {
@@ -232,13 +260,14 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
    {
       /////////////////////////////////////////////////////////////////////////
       // allow a caller to send in an initial filter & set of columns.       //
-      // only to be used on "first render"                                   //
+      // only to be used on "first render".                                  //
       // JSON.parse(JSON.stringify()) to do deep clone and keep object clean //
       // unclear why not needed on initialColumns...                         //
       /////////////////////////////////////////////////////////////////////////
       if (initialQueryFilter)
       {
          defaultView.queryFilter = JSON.parse(JSON.stringify(initialQueryFilter));
+         setLoadedFilterFromInitialFilterParam(true);
       }
 
       if (initialColumns)
@@ -720,7 +749,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
          {
             FilterUtils.stripAwayIncompleteCriteria(viewForLocalStorage.queryFilter)
          }
-         localStorage.setItem(viewLocalStorageKey, JSON.stringify(viewForLocalStorage));
+         localStorageSet(viewLocalStorageKey, JSON.stringify(viewForLocalStorage));
       }
       catch(e)
       {
@@ -1108,7 +1137,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
       if (state && state.density && state.density.value !== density)
       {
          setDensity(state.density.value);
-         localStorage.setItem(densityLocalStorageKey, JSON.stringify(state.density.value));
+         localStorageSet(densityLocalStorageKey, JSON.stringify(state.density.value));
       }
    };
 
@@ -1605,7 +1634,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
       ////////////////////////////////////////////////////////////////
       // todo can/should/does this move into the view's "identity"? //
       ////////////////////////////////////////////////////////////////
-      localStorage.setItem(currentSavedViewLocalStorageKey, `${savedViewRecord.values.get("id")}`);
+      localStorageSet(currentSavedViewLocalStorageKey, `${savedViewRecord.values.get("id")}`);
    };
 
 
@@ -1615,7 +1644,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
    const doClearCurrentSavedView = () =>
    {
       setCurrentSavedView(null);
-      localStorage.removeItem(currentSavedViewLocalStorageKey);
+      localStorageRemove(currentSavedViewLocalStorageKey);
    };
 
 
@@ -1662,7 +1691,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
          // wipe away the saved view //
          //////////////////////////////
          setCurrentSavedView(null);
-         localStorage.removeItem(currentSavedViewLocalStorageKey);
+         localStorageRemove(currentSavedViewLocalStorageKey);
 
          ///////////////////////////////////////////////
          // activate a new default view for the table //
@@ -2484,7 +2513,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
             // if the last time we were on this table, a currentSavedView was written to local storage - //
             // then navigate back to that view's URL - unless - it looks like we're on a process!        //
             ///////////////////////////////////////////////////////////////////////////////////////////////
-            if (localStorage.getItem(currentSavedViewLocalStorageKey) && !urlLooksLikeProcess())
+            if (localStorage.getItem(currentSavedViewLocalStorageKey) && !urlLooksLikeProcess() && !loadedFilterFromInitialFilterParam)
             {
                const currentSavedViewId = Number.parseInt(localStorage.getItem(currentSavedViewLocalStorageKey));
                console.log(`returning to previously active saved view ${currentSavedViewId}`);