Skip to content

Commit

Permalink
Rough implementation of "group" type for combination column
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesricky
jamesricky committed Dec 13, 2024
1 parent 47d40ae commit b13e54d
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 103 deletions.
22 changes: 9 additions & 13 deletions demo/admin/src/products/future/ProductsGrid.cometGen.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,42 +24,38 @@ export const ProductsGrid: GridConfig<GQLProduct> = {
minWidth: 200,
primaryText: "title",
secondaryText: {
// TODO: Change this to use the "group" type instead of "formattedMessage", once implemented (SVK-368)
type: "formattedMessage",
message: "{price} • {type} • {category} • {inStock}",
valueFields: {
price: {
type: "group",
fields: [
{
type: "number",
field: "price",
currency: "EUR",
emptyValue: "No price",
emptyValue: "Price unknown",
},
type: {
{
type: "staticSelect",
field: "type",
values: typeValues,
emptyValue: "No type",
},
category: {
{
type: "text",
field: "category.title",
emptyValue: "No category",
},
inStock: {
{
type: "staticSelect",
field: "inStock",
values: [
{ value: true, label: "In stock" },
{ value: false, label: "Out of stock" },
],
},
},
],
},
visible: "down('md')",
sortBy: ["title", "price", "type", "category", "inStock"],
disableExport: true, // TODO: Implement `valueFormatter` for type "combination"
},
{ type: "text", name: "title", headerName: "Titel", minWidth: 200, maxWidth: 250, visible: "up('md')" },
{ type: "text", name: "title", headerName: "Title", minWidth: 200, maxWidth: 250, visible: "up('md')" },
{ type: "text", name: "description", headerName: "Description" },
// TODO: Allow setting options for `intl.formatNumber` through `valueFormatter` (type "number")
{ type: "number", name: "price", headerName: "Price", maxWidth: 150, headerInfoTooltip: "Price in EUR", visible: "up('md')" },
Expand Down
14 changes: 6 additions & 8 deletions demo/admin/src/products/future/generated/CombinationFieldsTestProductsGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export function ProductsGrid({ toolbarAction, rowAction, actionsColumnWidth = 52
filterable: false,
sortable: false,
renderCell: ({ row }) => {
return <GridCellContent primaryText={row.title ?? "-"} secondaryText={row.category?.title ?? "-"} />;
return <GridCellContent primaryText={row.title ?? ""} secondaryText={row.category?.title ?? ""} />;
},
flex: 1,
minWidth: 150,
Expand All @@ -121,9 +121,7 @@ export function ProductsGrid({ toolbarAction, rowAction, actionsColumnWidth = 52
Shirt: <FormattedMessage id="product.staticSelectType.primaryText.Shirt" defaultMessage="Shirt" />,
Tie: <FormattedMessage id="product.staticSelectType.primaryText.Tie" defaultMessage="Tie" />,
};
return (
<GridCellContent primaryText={row.type == null ? "-" : typeLabels[`${row.type}`] ?? row.type} secondaryText={row.type ?? "-"} />
);
return <GridCellContent primaryText={row.type == null ? "" : typeLabels[`${row.type}`] ?? row.type} secondaryText={row.type ?? ""} />;
},
flex: 1,
minWidth: 150,
Expand Down Expand Up @@ -192,7 +190,7 @@ export function ProductsGrid({ toolbarAction, rowAction, actionsColumnWidth = 52
}
secondaryText={
typeof row.price === "undefined" || row.price === null ? (
"-"
""
) : (
<FormattedNumber value={row.price} minimumFractionDigits={4} maximumFractionDigits={4} />
)
Expand All @@ -213,14 +211,14 @@ export function ProductsGrid({ toolbarAction, rowAction, actionsColumnWidth = 52
<GridCellContent
primaryText={
typeof row.price === "undefined" || row.price === null ? (
"-"
""
) : (
<FormattedNumber value={row.price} style="unit" unit="kilogram" />
)
}
secondaryText={
typeof row.price === "undefined" || row.price === null ? (
"-"
""
) : (
<FormattedNumber
value={row.price}
Expand Down Expand Up @@ -250,7 +248,7 @@ export function ProductsGrid({ toolbarAction, rowAction, actionsColumnWidth = 52
<FormattedMessage
id="product.combinedAndNestedValues.primaryText"
defaultMessage={`This product is named "{title}" and is a "{type}"`}
values={{ title: row.title ?? "-", type: row.type ?? "-" }}
values={{ title: row.title ?? "", type: row.type ?? "" }}
/>
}
secondaryText={
Expand Down
62 changes: 18 additions & 44 deletions demo/admin/src/products/future/generated/ProductsGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import { CircularProgress, useTheme } from "@mui/material";
import { DataGridPro, GridColumnHeaderTitle, GridRenderCellParams, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
import { GQLProductFilter } from "@src/graphql.generated";
import * as React from "react";
import { FormattedMessage, FormattedNumber, useIntl } from "react-intl";
import { FormattedMessage, useIntl } from "react-intl";

import { ProductsGridPreviewAction } from "../../ProductsGridPreviewAction";
import { ManufacturerFilterOperators } from "../ManufacturerFilter";
Expand Down Expand Up @@ -146,50 +146,24 @@ export function ProductsGrid({ filter, toolbarAction, rowAction, actionsColumnWi
filterable: false,
sortable: false,
renderCell: ({ row }) => {
const typeLabels: Record<string, React.ReactNode> = {
Cap: <FormattedMessage id="product.overview.secondaryText.type.Cap" defaultMessage="great Cap" />,
Shirt: <FormattedMessage id="product.overview.secondaryText.type.Shirt" defaultMessage="Shirt" />,
Tie: <FormattedMessage id="product.overview.secondaryText.type.Tie" defaultMessage="Tie" />,
const typeLabels: Record<string, string> = {
Cap: intl.formatMessage({ id: "product.overview.secondaryText.type.Cap", defaultMessage: `great Cap` }),
Shirt: intl.formatMessage({ id: "product.overview.secondaryText.type.Shirt", defaultMessage: `Shirt` }),
Tie: intl.formatMessage({ id: "product.overview.secondaryText.type.Tie", defaultMessage: `Tie` }),
};
const inStockLabels: Record<string, React.ReactNode> = {
true: <FormattedMessage id="product.overview.secondaryText.inStock.true" defaultMessage="In stock" />,
false: <FormattedMessage id="product.overview.secondaryText.inStock.false" defaultMessage="Out of stock" />,
const inStockLabels: Record<string, string> = {
true: intl.formatMessage({ id: "product.overview.secondaryText.inStock.true", defaultMessage: `In stock` }),
false: intl.formatMessage({ id: "product.overview.secondaryText.inStock.false", defaultMessage: `Out of stock` }),
};
return (
<GridCellContent
primaryText={row.title ?? "-"}
secondaryText={
<FormattedMessage
id="product.overview.secondaryText"
defaultMessage="{price} • {type} • {category} • {inStock}"
values={{
price:
typeof row.price === "undefined" || row.price === null ? (
<FormattedMessage id="product.overview.secondaryText.price.empty" defaultMessage="No price" />
) : (
<FormattedNumber
value={row.price}
minimumFractionDigits={2}
maximumFractionDigits={2}
style="currency"
currency="EUR"
/>
),
type:
row.type == null ? (
<FormattedMessage id="product.overview.secondaryText.type.empty" defaultMessage="No type" />
) : (
typeLabels[`${row.type}`] ?? row.type
),
category: row.category?.title ?? (
<FormattedMessage id="product.overview.secondaryText.category.empty" defaultMessage="No category" />
),
inStock: row.inStock == null ? "-" : inStockLabels[`${row.inStock}`] ?? row.inStock,
}}
/>
}
/>
);
const groupValues: string[] = [
typeof row.price === "undefined" || row.price === null
? intl.formatMessage({ id: "product.overview.secondaryText.price.empty", defaultMessage: `Price unknown` })
: intl.formatNumber(row.price, { minimumFractionDigits: 2, maximumFractionDigits: 2, style: "currency", currency: "EUR" }),
row.type == null ? "" : typeLabels[`${row.type}`] ?? row.type,
row.category?.title ?? "",
row.inStock == null ? "" : inStockLabels[`${row.inStock}`] ?? row.inStock,
];
return <GridCellContent primaryText={row.title ?? ""} secondaryText={groupValues.filter(Boolean).join(" • ")} />;
},
flex: 1,
visible: theme.breakpoints.down("md"),
Expand All @@ -199,7 +173,7 @@ export function ProductsGrid({ filter, toolbarAction, rowAction, actionsColumnWi
},
{
field: "title",
headerName: intl.formatMessage({ id: "product.title", defaultMessage: "Titel" }),
headerName: intl.formatMessage({ id: "product.title", defaultMessage: "Title" }),
flex: 1,
visible: theme.breakpoints.up("md"),
minWidth: 200,
Expand Down
Loading

0 comments on commit b13e54d

Please sign in to comment.