Small updates to widgets; ok-ish version of filter query with relative time expressions; initial version of multi-select query for possible-values

src/qqq/pages/apps/Home.tsx

@@ -173,7 +173,7 @@ function AppHome({app}: Props): JSX.Element
    const widgetCount = widgets ? widgets.length : 0;
 
    // eslint-disable-next-line no-nested-ternary
-   const tileSizeLg = (widgetCount === 0 ? 3 : widgetCount === 1 ? 4 : 6);
+   const tileSizeLg = 3;
 
    const handleDropdownOnChange = (value: string, index: number) =>
    {
@@ -207,7 +207,7 @@ function AppHome({app}: Props): JSX.Element
             <Grid container spacing={3}>
                {
                   app.sections ? (
-                     <Grid item xs={12} lg={widgetCount === 0 ? 12 : widgetCount === 1 ? 9 : 6}>
+                     <Grid item xs={12} lg={12}>
                         {app.sections.map((section) => (
                            <Box key={section.name} mb={3}>
                               <Card sx={{overflow: "visible"}}>

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

@@ -731,6 +731,73 @@ function InputPossibleValueSourceSingle(tableName: string, field: QFieldMetaData
 }
 
 
+////////////////////////////////////////////////
+// input element for multiple possible values //
+////////////////////////////////////////////////
+function InputPossibleValueSourceMultiple(tableName: string, field: QFieldMetaData, props: GridFilterInputValueProps)
+{
+   const SUBMIT_FILTER_STROKE_TIME = 500;
+   const {item, applyValue, focusElementRef = null} = props;
+
+   console.log("Item.value?  " + item.value);
+
+   const filterTimeout = useRef<any>();
+   const [ selectedPossibleValues, setSelectedPossibleValues ] = useState(item.value as QPossibleValue[]);
+   const [ applying, setIsApplying ] = useState(false);
+
+   useEffect(() =>
+   {
+      return () =>
+      {
+         clearTimeout(filterTimeout.current);
+      };
+   }, []);
+
+   useEffect(() =>
+   {
+      const itemValue = item.value ?? null;
+   }, [ item.value ]);
+
+   const updateFilterValue = (value: QPossibleValue) =>
+   {
+      clearTimeout(filterTimeout.current);
+
+      setIsApplying(true);
+      filterTimeout.current = setTimeout(() =>
+      {
+         setIsApplying(false);
+         applyValue({...item, value: value});
+      }, SUBMIT_FILTER_STROKE_TIME);
+   };
+
+   const handleChange = (value: QPossibleValue) =>
+   {
+      updateFilterValue(value);
+   };
+
+   return (
+      <Box
+         sx={{
+            display: "inline-flex",
+            flexDirection: "row",
+            alignItems: "end",
+            height: 48,
+         }}
+      >
+         <DynamicSelect
+            tableName={tableName}
+            fieldName={field.name}
+            isMultiple={true}
+            fieldLabel="Value"
+            initialValues={selectedPossibleValues}
+            inForm={false}
+            onChange={handleChange}
+         />
+      </Box>
+   );
+}
+
+
 //////////////////////////////////
 // possible value set operators //
 //////////////////////////////////
@@ -749,6 +816,18 @@ export const buildQGridPvsOperators = (tableName: string, field: QFieldMetaData)
          getApplyFilterFn: () => null,
          InputComponent: (props: GridFilterInputValueProps<GridApiCommunity>) => InputPossibleValueSourceSingle(tableName, field, props)
       },
+      {
+         label: "is any of",
+         value: "isAnyOf",
+         getApplyFilterFn: () => null,
+         InputComponent: (props: GridFilterInputValueProps<GridApiCommunity>) => InputPossibleValueSourceMultiple(tableName, field, props)
+      },
+      {
+         label: "is none of",
+         value: "isNone",
+         getApplyFilterFn: () => null,
+         InputComponent: (props: GridFilterInputValueProps<GridApiCommunity>) => InputPossibleValueSourceMultiple(tableName, field, props)
+      },
       {
          label: "is empty",
          value: "isEmpty",