diff --git a/package-lock.json b/package-lock.json index fa0456c..a53a27f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "@fullcalendar/interaction": "5.10.0", "@fullcalendar/react": "5.10.0", "@fullcalendar/timegrid": "5.10.0", - "@kingsrook/qqq-frontend-core": "file:.yalc/@kingsrook/qqq-frontend-core", + "@kingsrook/qqq-frontend-core": "1.0.21", "@mui/icons-material": "5.4.1", "@mui/material": "5.4.1", "@mui/styled-engine": "5.4.1", @@ -49,6 +49,7 @@ "react-dom": "17.0.2", "react-flatpickr": "3.10.7", "react-github-btn": "1.2.1", + "react-google-drive-picker": "^1.2.0", "react-html-parser": "2.0.2", "react-images-viewer": "1.7.1", "react-quill": "1.3.5", @@ -82,14 +83,6 @@ "typescript": "^4.7.3" } }, - ".yalc/@kingsrook/qqq-frontend-core": { - "version": "1.0.16", - "license": "ISC", - "dependencies": { - "axios": "0.27.2", - "form-data": "4.0.0" - } - }, "node_modules/@ampproject/remapping": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", @@ -3159,8 +3152,14 @@ } }, "node_modules/@kingsrook/qqq-frontend-core": { - "resolved": ".yalc/@kingsrook/qqq-frontend-core", - "link": true + "version": "1.0.21", + "resolved": "https://npm.pkg.github.com/download/@Kingsrook/qqq-frontend-core/1.0.21/8a34417ce4da909c9448b7b9c7ff72081df24adc", + "integrity": "sha512-/AIL5GW+RhfGSr2zH8tUZj/bsEgHI02ug3nGLVgGglftlrPWdMykAzIRYtxAMYOsDZKtZM0v6gNEav2WIieaHw==", + "license": "ISC", + "dependencies": { + "axios": "0.27.2", + "form-data": "4.0.0" + } }, "node_modules/@leichtgewicht/ip-codec": { "version": "2.0.4", @@ -15102,6 +15101,15 @@ "github-buttons": "^2.8.0" } }, + "node_modules/react-google-drive-picker": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-google-drive-picker/-/react-google-drive-picker-1.2.0.tgz", + "integrity": "sha512-2CmaPLZP+8WkfT/J1xzNMWS99/SHphUk7wzw4/47uvNK4T+YYL7bYGHdwjJ4WMMCj4F0YCM9rDRc2enXqnP/TA==", + "peerDependencies": { + "react": ">=17.0.0", + "react-dom": ">=17.0.0" + } + }, "node_modules/react-html-parser": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/react-html-parser/-/react-html-parser-2.0.2.tgz", @@ -20576,7 +20584,9 @@ } }, "@kingsrook/qqq-frontend-core": { - "version": "file:.yalc/@kingsrook/qqq-frontend-core", + "version": "1.0.21", + "resolved": "https://npm.pkg.github.com/download/@Kingsrook/qqq-frontend-core/1.0.21/8a34417ce4da909c9448b7b9c7ff72081df24adc", + "integrity": "sha512-/AIL5GW+RhfGSr2zH8tUZj/bsEgHI02ug3nGLVgGglftlrPWdMykAzIRYtxAMYOsDZKtZM0v6gNEav2WIieaHw==", "requires": { "axios": "0.27.2", "form-data": "4.0.0" @@ -29046,6 +29056,11 @@ "github-buttons": "^2.8.0" } }, + "react-google-drive-picker": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-google-drive-picker/-/react-google-drive-picker-1.2.0.tgz", + "integrity": "sha512-2CmaPLZP+8WkfT/J1xzNMWS99/SHphUk7wzw4/47uvNK4T+YYL7bYGHdwjJ4WMMCj4F0YCM9rDRc2enXqnP/TA==" + }, "react-html-parser": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/react-html-parser/-/react-html-parser-2.0.2.tgz", diff --git a/package.json b/package.json index 570c6b6..b4ed569 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "@fullcalendar/interaction": "5.10.0", "@fullcalendar/react": "5.10.0", "@fullcalendar/timegrid": "5.10.0", - "@kingsrook/qqq-frontend-core": "1.0.20", + "@kingsrook/qqq-frontend-core": "1.0.21", "@mui/icons-material": "5.4.1", "@mui/material": "5.4.1", "@mui/styled-engine": "5.4.1", diff --git a/src/qqq/components/DashboardWidgets.tsx b/src/qqq/components/DashboardWidgets.tsx new file mode 100644 index 0000000..8759781 --- /dev/null +++ b/src/qqq/components/DashboardWidgets.tsx @@ -0,0 +1,172 @@ +/* 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 . + */ + +import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance"; +import Grid from "@mui/material/Grid"; +import React, {useEffect, useState} from "react"; +import MDBadgeDot from "qqq/components/Temporary/MDBadgeDot"; +import MDBox from "qqq/components/Temporary/MDBox"; +import BarChart from "qqq/pages/dashboards/Widgets/BarChart"; +import LineChart from "qqq/pages/dashboards/Widgets/LineChart"; +import QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart"; +import TableCard from "qqq/pages/dashboards/Widgets/TableCard"; +import QClient from "qqq/utils/QClient"; + +const qController = QClient.getInstance(); + +interface Props +{ + widgetNameList: string[]; + entityPrimaryKey?: string; +} + +DashboardWidgets.defaultProps = { + widgetNameList: null, + entityPrimaryKey: null +}; + +function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Element +{ + const [qInstance, setQInstance] = useState(null as QInstance); + const [widgets, setWidgets] = useState([] as any[]); + const [widgetNames, setWidgetNames] = useState([] as any[]); + const [widgetCounter, setWidgetCounter] = useState(0); + + useEffect(() => + { + (async () => + { + const newQInstance = await qController.loadMetaData(); + setQInstance(newQInstance); + })(); + }, []); + + useEffect(() => + { + if (!qInstance) + { + return; + } + + for (let i = 0; i < widgetNameList.length; i++) + { + widgets[i] = {}; + (async () => + { + widgets[i] = await qController.widget(widgetNameList[i], `id=${entityPrimaryKey}`); + setWidgetCounter(widgetCounter + 1); + })(); + } + setWidgets(widgets); + }, [qInstance, widgetNames]); + + const widgetCount = widgets ? widgets.length : 0; + + const handleDropdownOnChange = (value: string, index: number) => + { + setTimeout(async () => + { + widgets[index] = await qController.widget(widgetNameList[index]); + }, 1); + }; + + console.log(`primarkey ${entityPrimaryKey}`); + console.log(`widgets: ${JSON.stringify(widgets)}`); + + return ( + widgetCount > 0 ? ( + + + { + widgets.map((widget, i) => ( + + + { + widget.type === "table" && ( + + ) + } + + + )) + } + + + { + widgets.map((widget, i) => ( + + { + widget.type === "quickSightChart" && ( + + + + ) + } + { + widget.type === "barChart" && ( + + + + ) + } + { + widget.type === "lineChart" && ( + + + + { + widget.lineChartData.datasets.map((dataSet: any) => ( + + )) + } + + + + )} + chart={widget.lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }} + /> + + ) + } + + )) + } + + + ) : null + ); +} + +export default DashboardWidgets; diff --git a/src/qqq/components/QRecordSidebar/index.tsx b/src/qqq/components/QRecordSidebar/index.tsx index 23e8cb1..88f1eb7 100644 --- a/src/qqq/components/QRecordSidebar/index.tsx +++ b/src/qqq/components/QRecordSidebar/index.tsx @@ -30,20 +30,46 @@ import MDTypography from "qqq/components/Temporary/MDTypography"; interface Props { tableSections: QTableSection[]; + widgetNames?: string[]; light?: boolean; } -function QRecordSidebar({tableSections, light}: Props): JSX.Element +interface SidebarEntry { + iconName: string; + name: string; + label: string; +} + +function QRecordSidebar({tableSections, widgetNames, light}: Props): JSX.Element +{ + ///////////////////////////////////////////////////////// + // insert widgets after identity (first) table section // + ///////////////////////////////////////////////////////// + const sidebarEntries = [] as SidebarEntry[]; + tableSections.forEach((section, index) => + { + if (index === 1 && widgetNames) + { + widgetNames.forEach((name) => + { + sidebarEntries.push({iconName: "troubleshoot", name: name, label: name}); + }); + } + sidebarEntries.push({iconName: section.iconName, name: section.name, label: section.label}); + }); + + return ( borderRadius.lg, position: "sticky", top: "1%"}}> { - tableSections ? tableSections.map((section: QTableSection, key: number) => ( - + sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => ( + + - {section.iconName} + {entry.iconName} - {section.label} + {entry.label} )) : null diff --git a/src/qqq/components/Temporary/DataTable/index.tsx b/src/qqq/components/Temporary/DataTable/index.tsx index f885159..3a1d64f 100644 --- a/src/qqq/components/Temporary/DataTable/index.tsx +++ b/src/qqq/components/Temporary/DataTable/index.tsx @@ -18,12 +18,15 @@ * along with this program. If not, see . */ +import {tooltipClasses, TooltipProps} from "@mui/material"; import Autocomplete from "@mui/material/Autocomplete"; import Icon from "@mui/material/Icon"; +import {styled} from "@mui/material/styles"; import Table from "@mui/material/Table"; import TableBody from "@mui/material/TableBody"; import TableContainer from "@mui/material/TableContainer"; import TableRow from "@mui/material/TableRow"; +import Tooltip from "@mui/material/Tooltip"; import parse from "html-react-parser"; import {useEffect, useMemo, useState} from "react"; import {useAsyncDebounce, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table"; @@ -62,6 +65,15 @@ interface Props noEndBorder?: boolean; } +const NoMaxWidthTooltip = styled(({className, ...props}: TooltipProps) => ( + +))({ + [`& .${tooltipClasses.tooltip}`]: { + maxWidth: "none", + textAlign: "left" + }, +}); + function DataTable({ entriesPerPage, canSearch, @@ -272,6 +284,18 @@ function DataTable({ ) : ({cell.render("Cell")}) ) } + { + cell.column.type === "htmlAndTooltip" && ( + + + + + {parse(cell.value)} + + + + ) + } { cell.column.type === "html" && ( {parse(cell.value)} diff --git a/src/qqq/pages/app-home/index.tsx b/src/qqq/pages/app-home/index.tsx index 827274d..cb2512f 100644 --- a/src/qqq/pages/app-home/index.tsx +++ b/src/qqq/pages/app-home/index.tsx @@ -31,16 +31,12 @@ import Grid from "@mui/material/Grid"; import React, {useEffect, useState} from "react"; import {Link, useLocation} from "react-router-dom"; import BaseLayout from "qqq/components/BaseLayout"; +import DashboardWidgets from "qqq/components/DashboardWidgets"; import ProcessLinkCard from "qqq/components/ProcessLinkCard"; -import MDBadgeDot from "qqq/components/Temporary/MDBadgeDot"; import MDBox from "qqq/components/Temporary/MDBox"; import MDTypography from "qqq/components/Temporary/MDTypography"; import MiniStatisticsCard from "qqq/components/Temporary/MiniStatisticsCard"; -import BarChart from "qqq/pages/dashboards/Widgets/BarChart"; -import QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart"; -import TableCard from "qqq/pages/dashboards/Widgets/TableCard"; import QClient from "qqq/utils/QClient"; -import LineChart from "../dashboards/Widgets/LineChart"; const qController = QClient.getInstance(); @@ -160,81 +156,12 @@ function AppHome({app}: Props): JSX.Element return ( + {app.widgets && ( + + + + )} - { - widgetCount > 0 ? ( - - - { - widgets.map((chart, i) => ( - - - { - chart.type === "table" && ( - - ) - } - - - )) - } - - - { - widgets.map((chart, i) => ( - - - { - chart.type === "quickSightChart" && ( - - ) - } - { - chart.type === "barChart" && ( - - ) - } - { - chart.type === "lineChart" && ( - - - { - chart.lineChartData.datasets.map((dataSet: any) => ( - - )) - } - - - - )} - chart={chart.lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }} - /> - ) - } - - - )) - } - - - ) : null - } - { app.sections ? ( diff --git a/src/qqq/pages/dashboards/Widgets/TableCard.tsx b/src/qqq/pages/dashboards/Widgets/TableCard.tsx index ec15cb7..1c3eab4 100644 --- a/src/qqq/pages/dashboards/Widgets/TableCard.tsx +++ b/src/qqq/pages/dashboards/Widgets/TableCard.tsx @@ -37,7 +37,10 @@ interface Props { title: string; data: TableDataInput; - dropdownOptions?: string[]; + dropdownOptions?: { + id: string, + name: string + }[]; dropdownOnChange?: (selectedValue: string, widgetIndex: number) => void; widgetIndex?: number; @@ -49,7 +52,8 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex} const openArrowIcon = "arrow_drop_down"; const closeArrowIcon = "arrow_drop_up"; const [dropdown, setDropdown] = useState(null); - const [dropdownValue, setDropdownValue] = useState(""); + const [dropdownValue, setDropdownValue] = useState(""); + const [dropdownLabel, setDropdownLabel] = useState(""); const [dropdownIcon, setDropdownIcon] = useState(openArrowIcon); const openDropdown = ({currentTarget}: any) => @@ -79,8 +83,8 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex} disableAutoFocusItem > { - dropdownOptions.map((option) => - {option} + dropdownOptions.map((optionMap, index: number) => + {optionMap["name"]} ) } @@ -93,7 +97,8 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex} console.log(dropdownOptions); if (dropdownOptions) { - setDropdownValue(dropdownOptions[0]); + setDropdownValue(dropdownOptions[0]["id"]); + setDropdownLabel(dropdownOptions[0]["name"]); } }, [dropdownOptions]); @@ -103,7 +108,7 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex} - + {title} @@ -111,6 +116,13 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex} {dropdownOptions && ( + + Billing Period: + - {dropdownValue} + {dropdownLabel} {renderMenu(dropdown, openDropdown, closeDropdown, dropdownIcon)} diff --git a/src/qqq/pages/entity-view/components/ViewContents/index.tsx b/src/qqq/pages/entity-view/components/ViewContents/index.tsx index f0bc731..9a172bd 100644 --- a/src/qqq/pages/entity-view/components/ViewContents/index.tsx +++ b/src/qqq/pages/entity-view/components/ViewContents/index.tsx @@ -37,6 +37,7 @@ import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; import React, {useReducer, useState} from "react"; import {useLocation, useNavigate, useSearchParams} from "react-router-dom"; +import DashboardWidgets from "qqq/components/DashboardWidgets"; import {QActionsMenuButton, QDeleteButton, QEditButton} from "qqq/components/QButtons"; import QRecordSidebar from "qqq/components/QRecordSidebar"; import colors from "qqq/components/Temporary/colors"; @@ -66,7 +67,6 @@ function ViewContents({id, table}: Props): JSX.Element const tableName = table ? table.name : pathParts[pathParts.length - 2]; const [asyncLoadInited, setAsyncLoadInited] = useState(false); - const [nameValues, setNameValues] = useState([] as JSX.Element[]); const [sectionFieldElements, setSectionFieldElements] = useState(null as Map); const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false); const [tableMetaData, setTableMetaData] = useState(null); @@ -77,6 +77,7 @@ function ViewContents({id, table}: Props): JSX.Element const [nonT1TableSections, setNonT1TableSections] = useState([] as QTableSection[]); const [tableProcesses, setTableProcesses] = useState([] as QProcessMetaData[]); const [actionsMenu, setActionsMenu] = useState(null); + const [widgets, setWidgets] = useState([] as string[]); const [searchParams] = useSearchParams(); const [, forceUpdate] = useReducer((x) => x + 1, 0); @@ -106,6 +107,7 @@ function ViewContents({id, table}: Props): JSX.Element ///////////////////// const record = await qController.get(tableName, id); setRecord(record); + setWidgets(tableMetaData.widgets); ///////////////////////////////////////////////// // define the sections, e.g., for the left-bar // @@ -237,7 +239,7 @@ function ViewContents({id, table}: Props): JSX.Element - + @@ -264,6 +266,9 @@ function ViewContents({id, table}: Props): JSX.Element + {tableMetaData && tableMetaData.widgets && record && ( + + )} {nonT1TableSections.length > 0 ? nonT1TableSections.map(({ iconName, label, name, fieldNames, tier, }: any) => (