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

Add field adornments

Browse Source
This commit is contained in:
darin.kelkhoff
2022-09-23 17:09:12 -05:00
parent 67e65de66b
commit d1841b038f
3 changed files with 110 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,6 +19,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
@ -33,7 +34,27 @@ 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, GridCallbackDetails, GridColDef, GridColumnOrderChangeParams, GridColumnVisibilityModel, GridFilterModel, GridRowId, GridRowParams, GridRowsProp, GridSelectionModel, GridSortItem, GridSortModel, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, GridToolbarFilterButton, GridExportMenuItemProps, MuiEvent} from "@mui/x-data-grid-pro";
import {
DataGridPro,
GridCallbackDetails,
GridColDef,
GridColumnOrderChangeParams,
GridColumnVisibilityModel,
GridExportMenuItemProps,
GridFilterModel,
GridRowId,
GridRowParams,
GridRowsProp,
GridSelectionModel,
GridSortItem,
GridSortModel,
GridToolbarColumnsButton,
GridToolbarContainer,
GridToolbarDensitySelector,
GridToolbarExportContainer,
GridToolbarFilterButton,
MuiEvent
} from "@mui/x-data-grid-pro";
import React, {useCallback, useEffect, useReducer, useRef, useState} from "react";
import {Link, useNavigate, useParams, useSearchParams} from "react-router-dom";
import DashboardLayout from "qqq/components/DashboardLayout";
@ -324,12 +345,18 @@ function EntityList({table}: Props): JSX.Element
const fields = [...tableMetaData.fields.values()];
const rows = [] as any[];
const columnsToRender = {} as any;
results.forEach((record: QRecord) =>
{
const row: any = {};
fields.forEach((field) =>
{
row[field.name] = QValueUtils.getDisplayValue(field, record);
const value = QValueUtils.getDisplayValue(field, record)
if(typeof value !== "string")
{
columnsToRender[field.name] = true;
}
row[field.name] = value;
});
rows.push(row);
@ -386,6 +413,39 @@ function EntityList({table}: Props): JSX.Element
}
}
if(field.hasAdornment(AdornmentType.SIZE))
{
const sizeAdornment = field.getAdornment(AdornmentType.SIZE)
const width = sizeAdornment.getValue("width")
switch(width)
{
case "small":
{
columnWidth = 100;
break;
}
case "medium":
{
columnWidth = 200;
break;
}
case "large":
{
columnWidth = 400;
break;
}
case "xlarge":
{
columnWidth = 600;
break;
}
default:
{
console.log("Unrecognized size.width adornment value: " + width)
}
}
}
const column = {
field: field.name,
type: columnType,
@ -394,6 +454,13 @@ function EntityList({table}: Props): JSX.Element
renderCell: null as any,
};
if(columnsToRender[field.name])
{
column.renderCell = (cellValues: any) => (
(cellValues.value)
);
}
if (key === tableMetaData.primaryKeyField)
{
columns.splice(0, 0, column);
@ -705,7 +772,7 @@ function EntityList({table}: Props): JSX.Element
{
if(count === 0)
{
return ("No rows");
return (loading ? "Counting records..." : "No rows");
}
return (`Showing ${from.toLocaleString()} to ${to.toLocaleString()} of ${count !== -1 ? `${count.toLocaleString()} records` : `more than ${to.toLocaleString()} records`}`);
}
@ -720,7 +787,7 @@ function EntityList({table}: Props): JSX.Element
return (
<TablePagination
component="div"
count={totalRecords}
count={totalRecords === null ? 0 : totalRecords}
page={pageNumber}
rowsPerPageOptions={[10, 25, 50, 100, 250]}
rowsPerPage={rowsPerPage}
@ -895,7 +962,7 @@ function EntityList({table}: Props): JSX.Element
rows={rows}
columns={columns}
rowBuffer={10}
rowCount={totalRecords}
rowCount={totalRecords === null ? 0 : totalRecords}
onPageSizeChange={handleRowsPerPageChange}
onRowClick={handleRowClick}
density="standard"

41
src/qqq/utils/QValueUtils.tsx
View File

@ -19,11 +19,14 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import "datejs";
import {Chip, Icon} from "@mui/material";
import React, {Fragment} from "react";
import {Link} from "react-router-dom";
/*******************************************************************************
** Utility class for working with QQQ Values
@ -31,7 +34,38 @@ import React, {Fragment} from "react";
*******************************************************************************/
class QValueUtils
{
public static getDisplayValue(field: QFieldMetaData, record: QRecord): string
public static getDisplayValue(field: QFieldMetaData, record: QRecord): string | JSX.Element
{
const displayValue = record.displayValues ? record.displayValues.get(field.name) : undefined;
const rawValue = record.values ? record.values.get(field.name) : undefined;
if (field.hasAdornment(AdornmentType.LINK))
{
const adornment = field.getAdornment(AdornmentType.LINK);
return (<a target={adornment.getValue("target") ?? "_self"} href={rawValue} onClick={(e) =>
{
e.stopPropagation();
}}>{rawValue}</a>)
}
if (field.hasAdornment(AdornmentType.CHIP))
{
if(!displayValue)
{
return (<span/>);
}
const adornment = field.getAdornment(AdornmentType.CHIP);
const color = adornment.getValue("color." + rawValue) ?? "default"
const iconName = adornment.getValue("icon." + rawValue) ?? null;
const iconElement = iconName ? <Icon>{iconName}</Icon> : null;
return (<Chip label={displayValue} color={color} icon={iconElement} size="small" variant="outlined" sx={{fontWeight: 500}} />);
}
return (QValueUtils._getDisplayValueString(field, record));
}
private static _getDisplayValueString(field: QFieldMetaData, record: QRecord): string
{
const displayValue = record.displayValues ? record.displayValues.get(field.name) : undefined;
const rawValue = record.values ? record.values.get(field.name) : undefined;
@ -68,7 +102,7 @@ class QValueUtils
{
try
{
if(n !== null && n !== undefined)
if (n !== null && n !== undefined)
{
return (n.toLocaleString());
}
@ -77,14 +111,13 @@ class QValueUtils
return ("");
}
}
catch(e)
catch (e)
{
return (String(n));
}
}
public static breakTextIntoLines(value: string): JSX.Element
{
return (