QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 05:10:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

SPRINT-12: added pagination to top of entity list table, fix for record not found view enttity, store rowsperpage in local storage per table

Browse Source
This commit is contained in:
Tim Chamberlain
2022-10-06 19:17:31 -05:00
parent c87871860e
commit 0182db5f02
3 changed files with 128 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/qqq/pages/entity-list/index.tsx
View File

@ -34,28 +34,7 @@ import Icon from "@mui/material/Icon";
import LinearProgress from "@mui/material/LinearProgress";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import {
DataGridPro, getGridDateOperators, getGridNumericOperators, getGridStringOperators,
GridCallbackDetails,
GridColDef,
GridColumnOrderChangeParams,
GridColumnVisibilityModel,
GridExportMenuItemProps,
GridFilterItem,
GridFilterModel,
GridRowId,
GridRowParams,
GridRowsProp,
GridSelectionModel,
GridSortItem,
GridSortModel,
GridToolbarColumnsButton,
GridToolbarContainer,
GridToolbarDensitySelector,
GridToolbarExportContainer,
GridToolbarFilterButton,
MuiEvent
} from "@mui/x-data-grid-pro";
import {DataGridPro, getGridDateOperators, getGridNumericOperators, getGridStringOperators, GridCallbackDetails, GridColDef, GridColumnOrderChangeParams, GridColumnVisibilityModel, GridExportMenuItemProps, GridFilterItem, GridFilterModel, GridRowId, GridRowParams, GridRowsProp, GridSelectionModel, GridSortItem, GridSortModel, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, GridToolbarFilterButton, MuiEvent} from "@mui/x-data-grid-pro";
import {GridFilterOperator} from "@mui/x-data-grid/models/gridFilterOperator";
import React, {useCallback, useContext, useEffect, useReducer, useRef, useState} from "react";
import {Link, useNavigate, useParams, useSearchParams} from "react-router-dom";
@ -74,6 +53,7 @@ import QValueUtils from "qqq/utils/QValueUtils";
const COLUMN_VISIBILITY_LOCAL_STORAGE_KEY_ROOT = "qqq.columnVisibility";
const COLUMN_SORT_LOCAL_STORAGE_KEY_ROOT = "qqq.columnSort";
const FILTER_LOCAL_STORAGE_KEY_ROOT = "qqq.filter";
const ROWS_PER_PAGE_LOCAL_STORAGE_KEY_ROOT = "qqq.rowsPerPage";
interface Props
{
@ -140,10 +120,12 @@ function EntityList({table}: Props): JSX.Element
// look for defaults in the local storage //
////////////////////////////////////////////
const sortLocalStorageKey = `${COLUMN_SORT_LOCAL_STORAGE_KEY_ROOT}.${tableName}`;
const rowsPerPageLocalStorageKey = `${ROWS_PER_PAGE_LOCAL_STORAGE_KEY_ROOT}.${tableName}`;
const columnVisibilityLocalStorageKey = `${COLUMN_VISIBILITY_LOCAL_STORAGE_KEY_ROOT}.${tableName}`;
const filterLocalStorageKey = `${FILTER_LOCAL_STORAGE_KEY_ROOT}.${tableName}`;
let defaultSort = [] as GridSortItem[];
let defaultVisibility = {};
let defaultRowsPerPage = 10;
if (localStorage.getItem(sortLocalStorageKey))
{
@ -153,10 +135,15 @@ function EntityList({table}: Props): JSX.Element
{
defaultVisibility = JSON.parse(localStorage.getItem(columnVisibilityLocalStorageKey));
}
if (localStorage.getItem(rowsPerPageLocalStorageKey))
{
defaultRowsPerPage = JSON.parse(localStorage.getItem(rowsPerPageLocalStorageKey));
}
const [filterModel, setFilterModel] = useState({items: []} as GridFilterModel);
const [columnSortModel, setColumnSortModel] = useState(defaultSort);
const [columnVisibilityModel, setColumnVisibilityModel] = useState(defaultVisibility);
const [rowsPerPage, setRowsPerPage] = useState(defaultRowsPerPage);
///////////////////////////////////////////////////////////////////////////////////////////////
// for some reason, if we set the filterModel to what is in local storage, an onChange event //
@ -174,7 +161,6 @@ function EntityList({table}: Props): JSX.Element
const [tableProcesses, setTableProcesses] = useState([] as QProcessMetaData[]);
const [pageNumber, setPageNumber] = useState(0);
const [totalRecords, setTotalRecords] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [selectedIds, setSelectedIds] = useState([] as string[]);
const [selectFullFilterState, setSelectFullFilterState] = useState("n/a" as "n/a" | "checked" | "filter");
const [columns, setColumns] = useState([] as GridColDef[]);
@ -356,7 +342,7 @@ function EntityList({table}: Props): JSX.Element
const getCustomGridBooleanOperators = (): GridFilterOperator[] =>
{
return [booleanTrueOperator, booleanFalseOperator, booleanEmptyOperator, booleanNotEmptyOperator];
}
};
///////////////////////////
// display query results //
@ -557,6 +543,7 @@ function EntityList({table}: Props): JSX.Element
const handleRowsPerPageChange = (size: number) =>
{
setRowsPerPage(size);
localStorage.setItem(rowsPerPageLocalStorageKey, JSON.stringify(size));
};
const navigate = useNavigate();
@ -901,6 +888,9 @@ function EntityList({table}: Props): JSX.Element
)
}
</div>
<div className="pagination">
<CustomPagination />
</div>
</GridToolbarContainer>
);
}

193
src/qqq/pages/entity-view/components/ViewContents/index.tsx
View File

@ -19,6 +19,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
@ -80,8 +81,9 @@ function ViewContents({id, table}: Props): JSX.Element
const [tableProcesses, setTableProcesses] = useState([] as QProcessMetaData[]);
const [actionsMenu, setActionsMenu] = useState(null);
const [tableWidgets, setTableWidgets] = useState([] as QWidgetMetaData[]);
const [notFoundMessage, setNotFoundMessage] = useState(null);
const [searchParams] = useSearchParams();
const {pageHeader, setPageHeader} = useContext(QContext);
const {setPageHeader} = useContext(QContext);
const [, forceUpdate] = useReducer((x) => x + 1, 0);
const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget);
@ -126,8 +128,24 @@ function ViewContents({id, table}: Props): JSX.Element
/////////////////////
// load the record //
/////////////////////
const record = await qController.get(tableName, id);
setRecord(record);
let record: QRecord;
try
{
record = await qController.get(tableName, id);
setRecord(record);
}
catch (e)
{
if (e instanceof QException)
{
if ((e as QException).status === "404")
{
setNotFoundMessage(`${tableMetaData.label} ${id} could not be found.`);
return;
}
}
}
setPageHeader(record.recordLabel);
///////////////////////////
@ -254,96 +272,99 @@ function ViewContents({id, table}: Props): JSX.Element
);
return (
notFoundMessage
?
<MDBox>{notFoundMessage}</MDBox>
:
<MDBox pb={3}>
{
(searchParams.get("createSuccess") || searchParams.get("updateSuccess")) ? (
<MDAlert color="success" dismissible>
{tableMetaData?.label}
{" "}
successfully
{" "}
{searchParams.get("createSuccess") ? "created" : "updated"}
<MDBox pb={3}>
{
(searchParams.get("createSuccess") || searchParams.get("updateSuccess")) ? (
<MDAlert color="success" dismissible>
{tableMetaData?.label}
{" "}
successfully
{" "}
{searchParams.get("createSuccess") ? "created" : "updated"}
</MDAlert>
) : ("")
}
</MDAlert>
) : ("")
}
<Grid container spacing={3}>
<Grid item xs={12} lg={3}>
<QRecordSidebar tableSections={tableSections} widgetMetaDataList={tableWidgets} />
</Grid>
<Grid item xs={12} lg={9}>
<Grid container spacing={3}>
<Grid item xs={12} mb={3}>
<Card id={t1SectionName}>
<MDBox display="flex" p={3} pb={1}>
<MDBox mr={1.5}>
<Avatar sx={{bgcolor: colors.info.main}}>
<Icon>
{tableMetaData?.iconName}
</Icon>
</Avatar>
</MDBox>
<MDBox display="flex" justifyContent="space-between" width="100%" alignItems="center">
<MDTypography variant="h5">
{tableMetaData && record ? `Viewing ${tableMetaData?.label}: ${record?.recordLabel}` : ""}
</MDTypography>
<QActionsMenuButton isOpen={actionsMenu} onClickHandler={openActionsMenu} />
{renderActionsMenu}
</MDBox>
</MDBox>
{t1SectionElement ? (<MDBox p={3} pt={0}>{t1SectionElement}</MDBox>) : null}
</Card>
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} lg={3}>
<QRecordSidebar tableSections={tableSections} widgetMetaDataList={tableWidgets} />
</Grid>
{tableMetaData && tableMetaData.widgets && record && (
<DashboardWidgets widgetMetaDataList={tableWidgets} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} />
)}
{nonT1TableSections.length > 0 ? nonT1TableSections.map(({
iconName, label, name, fieldNames, tier,
}: any) => (
<MDBox mb={3} key={name}>
<Card key={name} id={name} sx={{overflow: "visible"}}>
<MDTypography variant="h5" p={3} pb={1}>
{label}
</MDTypography>
<MDBox p={3} pt={0} flexDirection="column">{sectionFieldElements.get(name)}</MDBox>
</Card>
</MDBox>
)) : null}
<MDBox component="form" p={3}>
<Grid container justifyContent="flex-end" spacing={3}>
<QDeleteButton onClickHandler={handleClickDeleteButton} />
<QEditButton />
<Grid item xs={12} lg={9}>
<Grid container spacing={3}>
<Grid item xs={12} mb={3}>
<Card id={t1SectionName}>
<MDBox display="flex" p={3} pb={1}>
<MDBox mr={1.5}>
<Avatar sx={{bgcolor: colors.info.main}}>
<Icon>
{tableMetaData?.iconName}
</Icon>
</Avatar>
</MDBox>
<MDBox display="flex" justifyContent="space-between" width="100%" alignItems="center">
<MDTypography variant="h5">
{tableMetaData && record ? `Viewing ${tableMetaData?.label}: ${record?.recordLabel}` : ""}
</MDTypography>
<QActionsMenuButton isOpen={actionsMenu} onClickHandler={openActionsMenu} />
{renderActionsMenu}
</MDBox>
</MDBox>
{t1SectionElement ? (<MDBox p={3} pt={0}>{t1SectionElement}</MDBox>) : null}
</Card>
</Grid>
</Grid>
</MDBox>
{tableMetaData && tableMetaData.widgets && record && (
<DashboardWidgets widgetMetaDataList={tableWidgets} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} />
)}
{nonT1TableSections.length > 0 ? nonT1TableSections.map(({
iconName, label, name, fieldNames, tier,
}: any) => (
<MDBox mb={3} key={name}>
<Card key={name} id={name} sx={{overflow: "visible"}}>
<MDTypography variant="h5" p={3} pb={1}>
{label}
</MDTypography>
<MDBox p={3} pt={0} flexDirection="column">{sectionFieldElements.get(name)}</MDBox>
</Card>
</MDBox>
)) : null}
<MDBox component="form" p={3}>
<Grid container justifyContent="flex-end" spacing={3}>
<QDeleteButton onClickHandler={handleClickDeleteButton} />
<QEditButton />
</Grid>
</MDBox>
</Grid>
</Grid>
</Grid>
{/* Delete confirmation Dialog */}
<Dialog
open={deleteConfirmationOpen}
onClose={handleDeleteConfirmClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">Confirm Deletion</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Are you sure you want to delete this record?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleDeleteConfirmClose}>No</Button>
<Button onClick={handleDelete} autoFocus>
Yes
</Button>
</DialogActions>
</Dialog>
</MDBox>
{/* Delete confirmation Dialog */}
<Dialog
open={deleteConfirmationOpen}
onClose={handleDeleteConfirmClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">Confirm Deletion</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Are you sure you want to delete this record?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleDeleteConfirmClose}>No</Button>
<Button onClick={handleDelete} autoFocus>
Yes
</Button>
</DialogActions>
</Dialog>
</MDBox>
);
}