Final cleanup on initial WIP implementation of quick-filters, getting ready to go into actual story now

src/qqq/components/forms/DynamicSelect.tsx

@@ -51,6 +51,7 @@ interface Props
    bulkEditSwitchChangeHandler?: any;
    otherValues?: Map<string, any>;
    variant: "standard" | "outlined";
+   initiallyOpen: boolean;
 }
 
 DynamicSelect.defaultProps = {
@@ -66,6 +67,7 @@ DynamicSelect.defaultProps = {
    bulkEditMode: false,
    otherValues: new Map<string, any>(),
    variant: "outlined",
+   initiallyOpen: false,
    bulkEditSwitchChangeHandler: () =>
    {
    },
@@ -73,12 +75,13 @@ DynamicSelect.defaultProps = {
 
 const qController = Client.getInstance();
 
-function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabel, inForm, initialValue, initialDisplayValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues, variant}: Props)
+function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabel, inForm, initialValue, initialDisplayValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues, variant, initiallyOpen}: Props)
 {
-   const [open, setOpen] = useState(false);
+   const [open, setOpen] = useState(initiallyOpen);
    const [options, setOptions] = useState<readonly QPossibleValue[]>([]);
    const [searchTerm, setSearchTerm] = useState(null);
    const [firstRender, setFirstRender] = useState(true);
+   const [otherValuesWhenResultsWereLoaded, setOtherValuesWhenResultsWereLoaded] = useState(JSON.stringify(Object.fromEntries((otherValues))))
    const {inputBorderColor} = colors;
 
    ////////////////////////////////////////////////////////////////////////////////////////////////
@@ -113,7 +116,14 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       {
          // console.log("First render, so not searching...");
          setFirstRender(false);
-         return;
+
+         /*
+         if(!initiallyOpen)
+         {
+            console.log("returning because not initially open?");
+            return;
+         }
+         */
       }
       // console.log("Use effect for searchTerm - searching!");
 
@@ -146,6 +156,24 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       };
    }, [ searchTerm ]);
 
+   // todo - finish... call it in onOpen?
+   const reloadIfOtherValuesAreChanged = () =>
+   {
+      if(JSON.stringify(Object.fromEntries(otherValues)) != otherValuesWhenResultsWereLoaded)
+      {
+         (async () =>
+         {
+            setLoading(true);
+            setOptions([]);
+            console.log("Refreshing possible values...");
+            const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, fieldName, searchTerm ?? "", null, otherValues);
+            setLoading(false);
+            setOptions([ ...results ]);
+            setOtherValuesWhenResultsWereLoaded(JSON.stringify(Object.fromEntries(otherValues)));
+         })();
+      }
+   }
+
    const inputChanged = (event: React.SyntheticEvent, value: string, reason: string) =>
    {
       // console.log(`input changed.  Reason: ${reason}, setting search term to ${value}`);

src/qqq/components/query/QuickFilter.tsx

@@ -291,7 +291,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    let startIcon = <Badge badgeContent={criteriaIsValid && !tooComplex ? 1 : 0} color="warning" variant="dot" onMouseOver={startIconMouseOver} onMouseOut={startIconMouseOut} onClick={resetCriteria}><Icon>{startIconName}</Icon></Badge>
    if(criteriaIsValid)
    {
-      startIcon = <Tooltip title={"Remove this condition"} enterDelay={tooltipEnterDelay}>{startIcon}</Tooltip>
+      startIcon = <Tooltip title={"Remove this condition from your filter"} enterDelay={tooltipEnterDelay}>{startIcon}</Tooltip>
    }
 
    let buttonContent = <span>{tableForField?.name != tableMetaData.name ? `${tableForField.label}: ` : ""}{fieldMetaData.label}</span>

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

@@ -2153,10 +2153,14 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
 
                <Box display="flex" alignItems="center" flexWrap="wrap" position="relative" top={"-0.5rem"} left={"0.5rem"} minHeight="2.5rem">
                   <Tooltip enterDelay={1000} title={
-                     <Box textAlign="left">
+                     <Box textAlign="left" width="200px">
-                        Fields that are frequently used for filter conditions can be added here for quick access.<br /><br />
+                        Fields that you frequently use for filter conditions can be added here for quick access.<br /><br />
-                        Use the <Icon fontSize="medium" sx={{position: "relative", top: "0.5rem"}}>add_circle_outline</Icon> button to add a field.<br /><br />
+                        Use the
-                        To remove a field, click it and then use the <Icon fontSize="medium" sx={{position: "relative", top: "0.5rem"}}>highlight_off</Icon> button.
+                        <Icon fontSize="medium" sx={{position: "relative", top: "0.25rem", fontSize: "1rem", mx: "0.25rem"}}>add_circle_outline</Icon>
+                        button to add a Quick Filter field.<br /><br />
+                        To remove a Quick Filter field, click the field name, and then use the
+                        <Icon fontSize="medium" sx={{position: "relative", top: "0.25rem", fontSize: "1rem", mx: "0.25rem"}}>highlight_off</Icon>
+                        button.
                      </Box>} placement="left">
                      <Typography variant="h6" sx={{cursor: "default"}}>Quick Filter:</Typography>
                   </Tooltip>