Starting support for timeframe=custom

src/qqq/components/widgets/Widget.tsx

@@ -130,6 +130,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
    const navigate = useNavigate();
    const [dropdownData, setDropdownData] = useState([]);
    const [counter, setCounter] = useState(0);
+   const [fullScreenWidgetClassName, setFullScreenWidgetClassName] = useState("");
 
    function openEditForm(table: QTableMetaData, id: any = null, defaultValues: any, disabledFields: any)
    {
@@ -175,6 +176,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
          return (
             <Box my={2} sx={{float: "right"}}>
                <DropdownMenu
+                  name={dropdownName}
                   defaultValue={defaultValue}
                   sx={{width: 200, marginLeft: "15px"}}
                   label={`Select ${dropdown.label}`}
@@ -283,6 +285,18 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
       }
    }, [counter]);
 
+   const toggleFullScreenWidget = () =>
+   {
+      if(fullScreenWidgetClassName)
+      {
+         setFullScreenWidgetClassName("");
+      }
+      else
+      {
+         setFullScreenWidgetClassName("fullScreenWidget");
+      }
+   }
+
    const hasPermission = props.widgetData?.hasPermission === undefined || props.widgetData?.hasPermission === true;
    const widgetContent =
       <Box sx={{width: "100%", height: "100%", minHeight: props.widgetMetaData?.minHeight ? props.widgetMetaData?.minHeight : "initial"}}>
@@ -336,17 +350,22 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                   // first look for a label in the widget data, which would override that in the metadata //
                   //////////////////////////////////////////////////////////////////////////////////////////
                   hasPermission && props.widgetData?.label? (
-                     <Typography sx={{position: "relative", top: -4}} variant="h6" fontWeight="medium" pl={2} display="inline">
+                     <Typography sx={{position: "relative", top: -4}} variant="h6" fontWeight="medium" pl={2} display="inline-block">
                         {props.widgetData.label}
                      </Typography>
                   ) : (
                      hasPermission && props.widgetMetaData?.label && (
-                        <Typography sx={{position: "relative", top: -4}} variant="h6" fontWeight="medium" pl={3} display="inline">
+                        <Typography sx={{position: "relative", top: -4}} variant="h6" fontWeight="medium" pl={3} display="inline-block">
                            {props.widgetMetaData.label}
                         </Typography>
                      )
                   )
                }
+               {/*
+               <Button onClick={() => toggleFullScreenWidget()}>
+                  {fullScreenWidgetClassName ? "-" : "+"}
+               </Button>
+               */}
                {
                   hasPermission && (
                      props.labelAdditionalComponentsLeft.map((component, i) =>
@@ -384,7 +403,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
          }
       </Box>;
 
-   return props.widgetMetaData?.isCard ? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%"}}>{widgetContent}</Card> : widgetContent;
+   return props.widgetMetaData?.isCard ? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%"}} className={fullScreenWidgetClassName}>{widgetContent}</Card> : widgetContent;
 }
 
 export default Widget;

src/qqq/components/widgets/components/DropdownMenu.tsx

@@ -19,10 +19,14 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Theme} from "@mui/material";
+import {Collapse, Theme} from "@mui/material";
 import Autocomplete from "@mui/material/Autocomplete";
+import Box from "@mui/material/Box";
 import TextField from "@mui/material/TextField";
 import {SxProps} from "@mui/system";
+import {Field, Form, Formik, useFormik} from "formik";
+import React, {useState} from "react";
+import MDInput from "qqq/components/legacy/MDInput";
 
 
 export interface DropdownOption
@@ -36,6 +40,7 @@ export interface DropdownOption
 /////////////////////////
 interface Props
 {
+   name: string;
    defaultValue?: any;
    label?: string;
    dropdownOptions?: DropdownOption[];
@@ -43,23 +48,98 @@ interface Props
    sx?: SxProps<Theme>;
 }
 
-function DropdownMenu({defaultValue, label, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
+function parseCustomTimeValuesFromDefaultValue(defaultValue: any): any
 {
+   const customTimeValues: { [key: string]: string } = {};
+   if(defaultValue && defaultValue.id)
+   {
+      var parts = defaultValue.id.split(",");
+      if(parts.length >= 2)
+      {
+         customTimeValues["startDate"] = parts[1];
+      }
+      if(parts.length >= 3)
+      {
+         customTimeValues["endDate"] = parts[2];
+      }
+   }
+
+   return (customTimeValues);
+}
+
+function DropdownMenu({name, defaultValue, label, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
+{
+   const [customTimesVisible, setCustomTimesVisible] = useState(defaultValue && defaultValue.id && defaultValue.id.startsWith("custom,"));
+   const [customTimeValues, setCustomTimeValues] = useState(parseCustomTimeValuesFromDefaultValue(defaultValue) as any);
+
    const handleOnChange = (event: any, newValue: any, reason: string) =>
+   {
+      const isTimeframeCustom = name == "timeframe" && newValue && newValue.id == "custom"
+      setCustomTimesVisible(isTimeframeCustom);
+
+      if(isTimeframeCustom)
+      {
+         callOnChangeCallbackIfCustomTimeframeHasDateValues();
+      }
+      else
       {
          onChangeCallback(label, newValue);
       }
+   };
+
+   const callOnChangeCallbackIfCustomTimeframeHasDateValues = () =>
+   {
+      if(customTimeValues["startDate"] && customTimeValues["endDate"])
+      {
+         onChangeCallback(label, {id: `custom,${customTimeValues["startDate"]},${customTimeValues["endDate"]}`, label: "Custom"});
+      }
+   }
+
+   let customTimes = <></>;
+   if (name == "timeframe")
+   {
+      const handleSubmit = async (values: any, actions: any) =>
+      {
+      };
+
+      const dateChanged = (fieldName: string, event: any) =>
+      {
+         console.log(event.target.value);
+         customTimeValues[fieldName] = event.target.value;
+         console.log(customTimeValues);
+
+         callOnChangeCallbackIfCustomTimeframeHasDateValues();
+      };
+
+      customTimes = <Box sx={{display: "inline-block", position: "relative", top: "-7px"}}>
+         <Collapse orientation="horizontal" in={customTimesVisible}>
+            <Formik initialValues={customTimeValues} onSubmit={handleSubmit}>
+               {({
+                  values,
+                  errors,
+                  touched,
+                  isSubmitting,
+               }) => (
+                  <Form id="timeframe-form" autoComplete="off">
+                     <Field name="startDate" type="datetime-local" as={MDInput} variant="standard" label="Custom Timeframe Start" InputLabelProps={{shrink: true}} InputProps={{size: "small"}} sx={{ml: 1}} onChange={(event: any) => dateChanged("startDate", event)} />
+                     <Field name="endDate" type="datetime-local" as={MDInput} variant="standard" label="Custom Timeframe End" InputLabelProps={{shrink: true}} InputProps={{size: "small"}} sx={{ml: 1}} onChange={(event: any) => dateChanged("endDate", event)} />
+                  </Form>
+               )}
+            </Formik>
+         </Collapse>
+      </Box>;
+   }
 
    return (
       dropdownOptions ? (
-         <span style={{whiteSpace: "nowrap"}}>
+         <span style={{whiteSpace: "nowrap", display: "flex"}}>
             <Autocomplete
                defaultValue={defaultValue}
                size="small"
                disablePortal
                id={`${label}-combo-box`}
                options={dropdownOptions}
-               sx={{...sx, cursor: "pointer"}}
+               sx={{...sx, cursor: "pointer", display: "inline-block"}}
                onChange={handleOnChange}
                isOptionEqualToValue={(option, value) => option.id === value.id}
                renderInput={(params: any) => <TextField {...params} label={label} />}
@@ -67,9 +147,10 @@ function DropdownMenu({defaultValue, label, dropdownOptions, onChangeCallback, s
                   <li {...props} style={{whiteSpace: "normal"}}>{option.label}</li>
                )}
             />
+            {customTimes}
          </span>
       ) : null
-   )
+   );
 }
 
 export default DropdownMenu;