SPRINT-16: finished parcel dashboard widgets

src/qqq/pages/dashboards/Widgets/Components/DropdownMenu.tsx

@@ -0,0 +1,70 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {Theme} from "@mui/material";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+import {SxProps} from "@mui/system";
+import React from "react";
+
+
+export interface DropdownOption
+{
+   id: string;
+   label: string;
+}
+
+/////////////////////////
+// inputs and defaults //
+/////////////////////////
+interface Props
+{
+   label?: string;
+   dropdownOptions?: DropdownOption[];
+   onChangeCallback?: (dropdownLabel: string, data: any) => void;
+   sx?: SxProps<Theme>;
+}
+
+function DropdownMenu({label, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
+{
+   const handleOnChange = (event: any, value: any, reason: string) =>
+   {
+      onChangeCallback(label, value);
+   }
+
+   return (
+      dropdownOptions ? (
+         <span style={{whiteSpace: "nowrap"}}>
+            <Autocomplete
+               size="small"
+               disablePortal
+               id={`${label}-combo-box`}
+               options={dropdownOptions}
+               sx={{...sx, cursor: "pointer"}}
+               onChange={handleOnChange}
+               renderInput={(params: any) => <TextField {...params} label={label} />}
+            />
+         </span>
+      ) : null
+   )
+}
+
+export default DropdownMenu;

src/qqq/pages/dashboards/Widgets/ParentWidget.tsx

@@ -0,0 +1,191 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {Box, Typography} from "@mui/material";
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
+import React, {useEffect, useState} from "react";
+import DashboardWidgets from "qqq/components/DashboardWidgets";
+import DropdownMenu from "qqq/pages/dashboards/Widgets/Components/DropdownMenu";
+import QClient from "qqq/utils/QClient";
+
+
+//////////////////////////////////////////////
+// structure of expected parent widget data //
+//////////////////////////////////////////////
+export interface ParentWidgetData
+{
+   dropdownLabelList: string[];
+   dropdownNameList: string[];
+   dropdownDataList: {
+      id: string,
+      label: string
+   }[][];
+   childWidgetNameList: string[];
+}
+
+
+////////////////////////////////////
+// define properties and defaults //
+////////////////////////////////////
+interface Props
+{
+   widgetIndex: number;
+   label: string;
+   data: ParentWidgetData;
+   reloadWidgetCallback?: (widgetIndex: number, params: string) => void;
+}
+
+
+const qController = QClient.getInstance();
+function ParentWidget({widgetIndex, label, data, reloadWidgetCallback}: Props, ): JSX.Element
+{
+   const [childUrlParams, setChildUrlParams] = useState("");
+   const [qInstance, setQInstance] = useState(null as QInstance);
+   const [dropdownData, setDropdownData] = useState([]);
+   const [widgets, setWidgets] = useState([] as any[]);
+   const [counter, setCounter] = useState(0);
+
+   useEffect(() =>
+   {
+      (async () =>
+      {
+         const newQInstance = await qController.loadMetaData();
+         setQInstance(newQInstance);
+      })();
+   }, []);
+
+   useEffect(() =>
+   {
+      if(qInstance && data && data.childWidgetNameList)
+      {
+         let widgetMetaDataList = [] as QWidgetMetaData[];
+         data?.childWidgetNameList.forEach((widgetName: string) =>
+         {
+            widgetMetaDataList.push(qInstance.widgets.get(widgetName));
+         })
+         setWidgets(widgetMetaDataList);
+         console.log(`SETTINGWIDGETS...${widgetMetaDataList.length}`)
+      }
+   }, [qInstance, data]);
+
+   function doit()
+   {
+      reloadWidgetCallback(0, "ok");
+   }
+
+   function handleDataChange(dropdownLabel: string, changedData: any)
+   {
+      if(dropdownData)
+      {
+         ///////////////////////////////////////////
+         // find the index base on selected label //
+         ///////////////////////////////////////////
+         const tableName = dropdownLabel.replace("Select ", "");
+         let index = -1;
+         for (let i = 0; i < data.dropdownLabelList.length; i++)
+         {
+            if (tableName === data.dropdownLabelList[i])
+            {
+               index = i;
+               break;
+            }
+         }
+
+         if (index < 0)
+         {
+            throw(`Could not find table name for label ${tableName}`);
+         }
+
+         dropdownData[index] = (changedData) ? changedData.id : null;
+         setDropdownData(dropdownData);
+         setCounter(counter + 1);
+      }
+   }
+
+   useEffect(() =>
+   {
+      if(dropdownData)
+      {
+         console.log(JSON.stringify(data));
+
+         let params = "";
+         for (let i = 0; i < dropdownData.length; i++)
+         {
+            if (i > 0)
+            {
+               params += "&";
+            }
+            params += `${data.dropdownNameList[i]}=`;
+            if(dropdownData[i])
+            {
+               params += `${dropdownData[i]}`;
+
+            }
+         }
+         console.log(params);
+         reloadWidgetCallback(widgetIndex, params);
+         setChildUrlParams(params)
+      }
+   }, [counter]);
+
+
+   return (
+      <Card className="parentWidgetCard" sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
+
+         <Grid container>
+            <Grid item xs={3}>
+               <Box pt={3} px={3}>
+                  {
+                     label && (
+                        <Typography variant="h5" textTransform="capitalize">
+                           {label}
+                        </Typography>
+                     )
+                  }
+               </Box>
+            </Grid>
+            <Grid item xs={9}>
+               <Box mb={3} p={3}>
+                  {
+                     data?.dropdownDataList?.map((dropdownData: any, index: number) =>
+                        <DropdownMenu
+                           key={`dropdown-${data.dropdownLabelList[index]}-${index}`}
+                           label={`Select ${data.dropdownLabelList[index]}`}
+                           sx={{width: 200, marginLeft: "15px", float: "right"}}
+                           dropdownOptions={dropdownData}
+                           onChangeCallback={handleDataChange}
+                        />
+                     )
+                  }
+               </Box>
+            </Grid>
+         </Grid>
+         <Box pr={3} pl={3}>
+            <DashboardWidgets widgetMetaDataList={widgets} areChildren={true} childUrlParams={childUrlParams}/>
+         </Box>
+      </Card>
+   );
+}
+
+export default ParentWidget;

src/qqq/pages/dashboards/Widgets/TableCard.tsx

@@ -53,13 +53,14 @@ interface Props
       id: string,
       name: string
    }[];
-   dropdownOnChange?: (selectedValue: string, widgetIndex: number) => void;
+   reloadWidgetCallback?: (widgetIndex: number, params: string) => void;
    widgetIndex?: number;
+   isChild?: boolean;
 
    [key: string]: any;
 }
 
-function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOptions, dropdownOnChange, widgetIndex}: Props): JSX.Element
+function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOptions, reloadWidgetCallback, widgetIndex, isChild}: Props): JSX.Element
 {
    const openArrowIcon = "arrow_drop_down";
    const closeArrowIcon = "arrow_drop_up";
@@ -82,7 +83,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
       setDropdown(null);
       setDropdownValue(currentTarget.innerText || dropdownValue);
       setDropdownIcon(openArrowIcon);
-      dropdownOnChange(currentTarget.innerText || dropdownValue, widgetIndex);
+      reloadWidgetCallback(widgetIndex, null);
    };
 
    const renderMenu = (state: any, open: any, close: any, icon: string) => (
@@ -113,6 +114,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
       {
          setDropdownValue(dropdownOptions[0]["id"]);
          setDropdownLabel(dropdownOptions[0]["name"]);
+
       }
    }, [dropdownOptions]);
 
@@ -121,7 +123,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
          <Grid container>
             <Grid item xs={6}>
                <MDBox pt={3} px={3}>
-                  <MDTypography variant="h5" fontWeight="medium">
+                  <MDTypography variant={isChild ? "h5" : "h6"} fontWeight="medium">
                      {title}
                   </MDTypography>
                </MDBox>