SPRINT-18: removed all non working or bad demo stuff from ui, removed console.logs, deleted some non qqq stuff

src/qqq/components/DashboardWidgets.tsx

@@ -104,7 +104,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
          {
             widgetData[i] = await qController.widget(widgetMetaDataList[i].name, getQueryParams(null));
             setWidgetCounter(widgetCounter + 1);
-            console.log(`widget data: ${JSON.stringify(widgetData[i])}`)
             forceUpdate();
          })();
       }

src/qqq/components/Navbar/index.tsx

@@ -19,23 +19,25 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {Popper} from "@mui/material";
 import AppBar from "@mui/material/AppBar";
+import Autocomplete from "@mui/material/Autocomplete";
+import Badge from "@mui/material/Badge";
+import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import IconButton from "@mui/material/IconButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
+import TextField from "@mui/material/TextField";
 import Toolbar from "@mui/material/Toolbar";
-import React, {useState, useEffect} from "react";
+import React, {useEffect, useState} from "react";
 import {useLocation, useNavigate} from "react-router-dom";
-import {useMaterialUIController, setTransparentNavbar, setMiniSidenav, setOpenConfigurator,} from "context";
-import {navbar, navbarContainer, navbarRow, navbarIconButton, navbarDesktopMenu, navbarMobileMenu,} from "qqq/components/Navbar/styles";
+import {boolean} from "yup";
+import {setTransparentNavbar, useMaterialUIController,} from "context";
+import {navbar, navbarContainer, navbarIconButton, navbarRow,} from "qqq/components/Navbar/styles";
 import QBreadcrumbs, {routeToLabel} from "qqq/components/QBreadcrumbs";
-import MDBadge from "qqq/components/Temporary/MDBadge";
-import MDBox from "qqq/components/Temporary/MDBox";
-import MDInput from "qqq/components/Temporary/MDInput";
 import NotificationItem from "qqq/components/Temporary/NotificationItem";
-import HistoryUtils, {QHistoryEntry} from "qqq/utils/HistoryUtils";
+import HistoryUtils from "qqq/utils/HistoryUtils";
 
 // Declaring prop types for Navbar
 interface Props
@@ -45,15 +47,21 @@ interface Props
    isMini?: boolean;
 }
 
+interface HistoryEntry {
+   id: number;
+   path: string;
+   label: string;
+   iconName?: string;
+}
+
 function Navbar({absolute, light, isMini}: Props): JSX.Element
 {
    const [navbarType, setNavbarType] = useState<"fixed" | "absolute" | "relative" | "static" | "sticky">();
    const [controller, dispatch] = useMaterialUIController();
-   const {
-      miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode,
-   } = controller;
+   const {transparentNavbar, fixedNavbar, darkMode,} = controller;
    const [openMenu, setOpenMenu] = useState<any>(false);
-   const [openHistory, setOpenHistory] = useState<any>(false);
+   const [history, setHistory] = useState<any>([] as HistoryEntry[]);
+   const [autocompleteValue, setAutocompleteValue] = useState<any>(null);
    const route = useLocation().pathname.split("/").slice(1);
    const navigate = useNavigate();
 
@@ -84,59 +92,84 @@ function Navbar({absolute, light, isMini}: Props): JSX.Element
       // Call the handleTransparentNavbar function to set the state with the initial value.
       handleTransparentNavbar();
 
+      buildHistoryEntries();
+
+      const history = HistoryUtils.get();
+      setHistory([ {label: "The Godfather", id: 1}, {label: "Pulp Fiction", id: 2}]);
+      const options = [] as any;
+      history.entries.reverse().forEach((entry, index) =>
+         options.push({label: `${entry.label} index`, id: index, key: index, path: entry.path, iconName: entry.iconName})
+      )
+      setHistory(options);
+
       // Remove event listener on cleanup
       return () => window.removeEventListener("scroll", handleTransparentNavbar);
    }, [dispatch, fixedNavbar]);
 
-   const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
-   const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
+   const goToHistory = (path: string) =>
+   {
+      navigate(path);
+   }
+
+   function buildHistoryEntries()
+   {
+      const history = HistoryUtils.get();
+      const options = [] as any;
+      history.entries.reverse().forEach((entry, index) =>
+         options.push({label: entry.label, id: index, key: index, path: entry.path, iconName: entry.iconName})
+      )
+      setHistory(options);
+   }
+
    const handleOpenMenu = (event: any) => setOpenMenu(event.currentTarget);
    const handleCloseMenu = () => setOpenMenu(false);
 
-   const handleHistory = (event: any) =>
+   const handleAutocompleteOnChange = (event: any, value: any, reason: any, details: any) =>
    {
-      setOpenHistory(event.currentTarget);
+      if(value)
+      {
+         goToHistory(value.path);
+      }
+      setAutocompleteValue(null);
    }
 
-   const handleCloseHistory = () =>
+   const CustomPopper = function (props: any)
    {
-      setOpenHistory(false);
-   }
-
-   const goToHistory = (entry: QHistoryEntry) =>
-   {
-      navigate(entry.path);
-      handleCloseHistory();
+      return (<Popper
+         {...props}
+         style={{whiteSpace: "nowrap", width: "auto"}}
+         placement="bottom-end"
+      />)
    }
 
    const renderHistory = () =>
    {
-      const history = HistoryUtils.get();
-
       return (
-         <Menu
-            anchorEl={openHistory}
-            anchorReference={null}
-            anchorOrigin={{
-               vertical: "bottom",
-               horizontal: "left",
-            }}
-            open={Boolean(openHistory)}
-            onClose={handleCloseHistory}
-            sx={{mt: 1, "& ul": {maxWidth: "500px"}}}
-         >
-            <MenuItem sx={{px: "8px"}} disabled><h3 style={{color: "black"}}>Recently Viewed Records</h3></MenuItem>
-            {history.entries.reverse().map((entry) =>
-               (
-                  <MenuItem sx={{px: "8px", whiteSpace: "normal"}} key={entry.path} onClick={() => goToHistory(entry)}>
-                     <ListItemIcon sx={{minWidth: "24px !important"}}><Icon>{entry.iconName}</Icon></ListItemIcon>
-                     {entry.label}
-                  </MenuItem>
-               )
+         <Autocomplete
+            disablePortal
+            id="recently-viewed-combo-box"
+            size="small"
+            value={autocompleteValue}
+            options={history}
+            autoHighlight
+            blurOnSelect
+            style={{width: "200px"}}
+            onOpen={buildHistoryEntries}
+            onChange={handleAutocompleteOnChange}
+            PopperComponent={CustomPopper}
+            isOptionEqualToValue={(option, value) => option.id === value.id}
+            renderInput={(params) => <TextField {...params} label="Recently Viewed Records" />}
+            renderOption={(props, option: HistoryEntry) => (
+               <Box {...props} component="li" key={option.id} sx={{width: "auto"}}>
+                  <Box sx={{width: "auto", px: "8px", whiteSpace: "overflow"}} key={option.id}>
+                     <ListItemIcon sx={{minWidth: "24px !important"}}><Icon>{option.iconName}</Icon></ListItemIcon>
+                     {option.label}
+                  </Box>
+               </Box>
             )}
-         </Menu>
+         />
       );
-   };
+   }
 
 
    // Render the notifications menu
@@ -192,63 +225,28 @@ function Navbar({absolute, light, isMini}: Props): JSX.Element
          })}
       >
          <Toolbar sx={navbarContainer}>
-            <MDBox color="inherit" mb={{xs: 1, md: 0}} sx={(theme) => navbarRow(theme, {isMini})}>
+            <Box color="inherit" mb={{xs: 1, md: 0}} sx={(theme) => navbarRow(theme, {isMini})}>
                <QBreadcrumbs icon="home" title={breadcrumbTitle} route={route} light={light} />
-               <IconButton sx={navbarDesktopMenu} onClick={handleMiniSidenav} size="small" disableRipple>
-                  <Icon fontSize="medium" sx={iconsStyle}>
-                     {miniSidenav ? "menu_open" : "menu"}
-                  </Icon>
-               </IconButton>
-            </MDBox>
+            </Box>
             {isMini ? null : (
-               <MDBox sx={(theme) => navbarRow(theme, {isMini})}>
-                  <MDBox pr={1}>
-                     <MDInput label="Search here" />
-                  </MDBox>
-                  <MDBox color={light ? "white" : "inherit"}>
-                     <IconButton
-                        size="small"
-                        disableRipple
-                        color="inherit"
-                        sx={navbarMobileMenu}
-                        onClick={handleMiniSidenav}
-                     >
-                        <Icon sx={iconsStyle} fontSize="medium">
-                           {miniSidenav ? "menu_open" : "menu"}
-                        </Icon>
-                     </IconButton>
-                     <IconButton
-                        size="small"
-                        disableRipple
-                        color="inherit"
-                        sx={navbarIconButton}
-                        onClick={handleHistory}
-                     >
-                        <Icon sx={iconsStyle}>history</Icon>
-                     </IconButton>
+               <Box sx={(theme) => navbarRow(theme, {isMini})}>
+                  <Box pr={1}>
                      {renderHistory()}
-                     <IconButton
-                        size="small"
-                        disableRipple
-                        color="inherit"
-                        sx={navbarIconButton}
-                        onClick={handleConfiguratorOpen}
-                     >
-                        <Icon sx={iconsStyle}>settings</Icon>
-                     </IconButton>
+                  </Box>
+                  <Box color={light ? "white" : "inherit"}>
                      <IconButton
                         size="small"
                         color="inherit"
                         sx={navbarIconButton}
                         onClick={handleOpenMenu}
                      >
-                        <MDBadge badgeContent={0} color="error" size="xs" circular>
+                        <Badge badgeContent={0} color="error" variant="dot">
                            <Icon sx={iconsStyle}>notifications</Icon>
-                        </MDBadge>
+                        </Badge>
                      </IconButton>
                      {renderMenu()}
-                  </MDBox>
-               </MDBox>
+                  </Box>
+               </Box>
             )}
          </Toolbar>
       </AppBar>

src/qqq/components/QDynamicSelect/QDynamicSelect.tsx

@@ -66,7 +66,8 @@ function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue,
    const [ options, setOptions ] = useState<readonly QPossibleValue[]>([]);
    const [ searchTerm, setSearchTerm ] = useState(null);
    const [ firstRender, setFirstRender ] = useState(true);
-   const [defaultValue, _] = useState(initialValue && initialDisplayValue ? {id: initialValue, label: initialDisplayValue} : null);
+   // @ts-ignore
+   const [defaultValue, _] = useState(initialValue && initialDisplayValue ? [{id: initialValue, label: initialDisplayValue}] : null);
    // const loading = open && options.length === 0;
    const [loading, setLoading] = useState(false);
    const [ switchChecked, setSwitchChecked ] = useState(false);
@@ -224,7 +225,7 @@ function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue,
             setOpen(false);
          }}
          isOptionEqualToValue={(option, value) => option.id === value.id}
-         getOptionLabel={(option) => option.label}
+         getOptionLabel={(option) => (option as QPossibleValue).label}
          options={options}
          loading={loading}
          onInputChange={inputChanged}

src/qqq/components/Sidenav/index.tsx

@@ -253,7 +253,8 @@ function Sidenav({color, icon, logo, companyName, routes, ...rest}: Props): JSX.
                      icon={icon}
                      active={key === collapseName}
                      open={openCollapse === key}
-                     onClick={() => (openCollapse === key ? setOpenCollapse(false) : setOpenCollapse(key))}
+                     noCollapse={noCollapse}
+                     onClick={() => (! noCollapse ? (openCollapse === key ? setOpenCollapse(false) : setOpenCollapse(key)) : null) }
                   >
                      {collapse ? renderCollapse(collapse) : null}
                   </SidenavCollapse>

src/qqq/components/Temporary/DataTable/index.tsx

@@ -207,9 +207,9 @@ function DataTable({
                         disableClearable
                         value={pageSize.toString()}
                         options={entries}
-                        onChange={(event, newValue) =>
+                        onChange={(event, newValues) =>
                         {
-                           setEntriesPerPage(parseInt(newValue, 10));
+                           setEntriesPerPage(parseInt(newValues[0], 10));
                         }}
                         size="small"
                         sx={{width: "5rem"}}

src/qqq/components/Temporary/MDAvatar/MDAvatarRoot.tsx

@@ -1,96 +0,0 @@
-/*
- * 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 Avatar from "@mui/material/Avatar";
-import {styled, Theme} from "@mui/material/styles";
-
-export default styled(Avatar)(({theme, ownerState}: { theme?: Theme | any; ownerState: any }) =>
-{
-   const {palette, functions, typography, boxShadows} = theme;
-   const {shadow, bgColor, size} = ownerState;
-
-   const {gradients, transparent, white} = palette;
-   const {pxToRem, linearGradient} = functions;
-   const {size: fontSize, fontWeightRegular} = typography;
-
-   // backgroundImage value
-   const backgroundValue =
-    bgColor === "transparent"
-       ? transparent.main
-       : linearGradient(gradients[bgColor].main, gradients[bgColor].state);
-
-   // size value
-   let sizeValue;
-
-   switch (size)
-   {
-      case "xs":
-         sizeValue = {
-            width: pxToRem(24),
-            height: pxToRem(24),
-            fontSize: fontSize.xs,
-         };
-         break;
-      case "sm":
-         sizeValue = {
-            width: pxToRem(36),
-            height: pxToRem(36),
-            fontSize: fontSize.sm,
-         };
-         break;
-      case "lg":
-         sizeValue = {
-            width: pxToRem(58),
-            height: pxToRem(58),
-            fontSize: fontSize.sm,
-         };
-         break;
-      case "xl":
-         sizeValue = {
-            width: pxToRem(74),
-            height: pxToRem(74),
-            fontSize: fontSize.md,
-         };
-         break;
-      case "xxl":
-         sizeValue = {
-            width: pxToRem(110),
-            height: pxToRem(110),
-            fontSize: fontSize.md,
-         };
-         break;
-      default: {
-         sizeValue = {
-            width: pxToRem(48),
-            height: pxToRem(48),
-            fontSize: fontSize.md,
-         };
-      }
-   }
-
-   return {
-      background: backgroundValue,
-      color: white.main,
-      fontWeight: fontWeightRegular,
-      boxShadow: boxShadows[shadow],
-      ...sizeValue,
-   };
-});

src/qqq/components/Temporary/MDAvatar/index.tsx

@@ -1,54 +0,0 @@
-/*
- * 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 {AvatarProps} from "@mui/material";
-import {FC, forwardRef} from "react";
-import MDAvatarRoot from "qqq/components/Temporary/MDAvatar/MDAvatarRoot";
-
-// declare props types for MDAvatar
-interface Props extends AvatarProps {
-  bgColor?:
-    | "transparent"
-    | "primary"
-    | "secondary"
-    | "info"
-    | "success"
-    | "warning"
-    | "error"
-    | "light"
-    | "dark";
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-  shadow?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "inset";
-  [key: string]: any;
-}
-
-const MDAvatar: FC<Props> = forwardRef(({bgColor, size, shadow, ...rest}, ref) => (
-   <MDAvatarRoot ref={ref} ownerState={{shadow, bgColor, size}} {...rest} />
-));
-
-// Declaring default props for MDAvatar
-MDAvatar.defaultProps = {
-   bgColor: "transparent",
-   size: "md",
-   shadow: "none",
-};
-
-export default MDAvatar;