diff --git a/package.json b/package.json index 33467e2..1054a16 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "flatpickr": "4.6.9", "formik": "2.2.9", "html-react-parser": "1.4.8", + "http-proxy-middleware": "2.0.6", "react": "17.0.2", "react-chartjs-2": "3.0.4", "react-cookie": "4.1.1", diff --git a/src/qqq/pages/entity-list/index.tsx b/src/qqq/pages/entity-list/index.tsx index 7751d28..aacba74 100644 --- a/src/qqq/pages/entity-list/index.tsx +++ b/src/qqq/pages/entity-list/index.tsx @@ -22,7 +22,7 @@ import Icon from "@mui/material/Icon"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; import Link from "@mui/material/Link"; -import {Alert} from "@mui/material"; +import {Alert, tableFooterClasses} from "@mui/material"; import { DataGridPro, GridCallbackDetails, @@ -40,7 +40,9 @@ import { GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExport, + GridToolbarExportContainer, GridToolbarFilterButton, + GridExportMenuItemProps, } from "@mui/x-data-grid-pro"; // Material Dashboard 2 PRO React TS components @@ -99,6 +101,7 @@ function EntityList({table}: Props): JSX.Element const [buttonText, setButtonText] = useState(""); const [tableState, setTableState] = useState(""); + const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData); const [, setFiltersMenu] = useState(null); const [actionsMenu, setActionsMenu] = useState(null); const [tableProcesses, setTableProcesses] = useState([] as QProcessMetaData[]); @@ -192,11 +195,12 @@ function EntityList({table}: Props): JSX.Element { (async () => { - const tableMetaData = await QClient.loadTableMetaData(tableName); + const newTableMetaData = await QClient.loadTableMetaData(tableName); + setTableMetaData(newTableMetaData); if (columnSortModel.length === 0) { columnSortModel.push({ - field: tableMetaData.primaryKeyField, + field: newTableMetaData.primaryKeyField, sort: "desc", }); setColumnSortModel(columnSortModel); @@ -206,8 +210,8 @@ function EntityList({table}: Props): JSX.Element const count = await QClient.count(tableName, qFilter); setTotalRecords(count); - setButtonText(`new ${tableMetaData.label}`); - setTableLabel(tableMetaData.label); + setButtonText(`new ${newTableMetaData.label}`); + setTableLabel(newTableMetaData.label); const columns = [] as GridColDef[]; @@ -236,10 +240,10 @@ function EntityList({table}: Props): JSX.Element rows.push(Object.fromEntries(record.values.entries())); }); - const sortedKeys = [...tableMetaData.fields.keys()].sort(); + const sortedKeys = [...newTableMetaData.fields.keys()].sort(); sortedKeys.forEach((key) => { - const field = tableMetaData.fields.get(key); + const field = newTableMetaData.fields.get(key); let columnType = "string"; switch (field.type) @@ -268,7 +272,7 @@ function EntityList({table}: Props): JSX.Element width: 200, }; - if (key === tableMetaData.primaryKeyField) + if (key === newTableMetaData.primaryKeyField) { column.width = 75; columns.splice(0, 0, column); @@ -369,6 +373,83 @@ function EntityList({table}: Props): JSX.Element })(); } + interface QExportMenuItemProps extends GridExportMenuItemProps<{}> + { + format: string; + } + + function ExportMenuItem(props: QExportMenuItemProps) + { + const {format, hideMenu} = props; + + return ( + + { + /////////////////////////////////////////////////////////////////////////////// + // build the list of visible fields. note, not doing them in-order (in case // + // the user did drag & drop), because column order model isn't right yet // + // so just doing them to match columns (which were pKey, then sorted) // + /////////////////////////////////////////////////////////////////////////////// + const visibleFields: string[] = []; + columns.forEach((gridColumn) => + { + const fieldName = gridColumn.field; + // @ts-ignore + if (columnVisibilityModel[fieldName] !== false) + { + visibleFields.push(fieldName); + } + }); + + /////////////////////// + // zero-pad function // + /////////////////////// + const zp = (value: number): string => (value < 10 ? `0${value}` : `${value}`); + + ////////////////////////////////////// + // construct the url for the export // + ////////////////////////////////////// + const d = new Date(); + const dateString = `${d.getFullYear()}-${zp(d.getMonth())}-${zp(d.getDate())} ${zp(d.getHours())}${zp(d.getMinutes())}`; + const filename = `${tableMetaData.label} Export ${dateString}.${format}`; + const url = `/data/${tableMetaData.name}/export/${filename}?filter=${encodeURIComponent(JSON.stringify(buildQFilter()))}&fields=${visibleFields.join(",")}`; + + ////////////////////////////////////////////////////////////////////////////////////// + // open a window (tab) with a little page that says the file is being generated. // + // then have that page load the url for the export. // + // If there's an error, it'll appear in that window. else, the file will download. // + ////////////////////////////////////////////////////////////////////////////////////// + const exportWindow = window.open("", "_blank"); + exportWindow.document.write(` + + + ${filename} + + + Generating file ${filename} with ${totalRecords.toLocaleString()} records... + `); + + /////////////////////////////////////////// + // Hide the export menu after the export // + /////////////////////////////////////////// + hideMenu?.(); + }} + > + Export + {` ${format.toUpperCase()}`} + + ); + } + function CustomToolbar() { return ( @@ -376,7 +457,10 @@ function EntityList({table}: Props): JSX.Element - + + + +
{ selectFullFilterState === "checked" && ( diff --git a/src/setupProxy.js b/src/setupProxy.js new file mode 100644 index 0000000..a129a43 --- /dev/null +++ b/src/setupProxy.js @@ -0,0 +1,39 @@ +/* + * 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 . + */ + +///////////////////////////////////////////////////////////////////////////////////// +// this file "magically" works with http-proxy-middleware. // +// Most API calls to the qqq backend (e.g., through QController) do NOT go through // +// the React Router. However, exports do (presumably because they are full- // +// page style requests, not ajax/fetches), so they need specific proxy config. // +///////////////////////////////////////////////////////////////////////////////////// +const {createProxyMiddleware} = require("http-proxy-middleware"); + +module.exports = function (app) +{ + app.use( + "/data/*/export/*", + createProxyMiddleware({ + target: "http://localhost:8000", + changeOrigin: true, + }), + ); +};