Skip to content

Commit

Permalink
Admin Generator (Future): Implement option to set tooltips for grid c…
Browse files Browse the repository at this point in the history 
…olumn headers (#2362)
  • Loading branch information
@andrearutrecht
andrearutrecht authored Sep 24, 2024
1 parent bc124d2 commit 566d5be
Show file tree
Hide file tree
Showing 8 changed files with 136 additions and 48 deletions.
18 changes: 7 additions & 11 deletions demo/admin/src/products/ManufacturersGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ import {
usePersistentColumnState,
} from "@comet/admin";
import { Add as AddIcon, Edit, Info } from "@comet/admin-icons";
import { Button, IconButton, Typography } from "@mui/material";
import { DataGridPro, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
import { Button, IconButton } from "@mui/material";
import { DataGridPro, GridColumnHeaderTitle, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
import {
GQLCreateManufacturerMutation,
GQLCreateManufacturerMutationVariables,
Expand Down Expand Up @@ -62,19 +62,15 @@ export function ManufacturersGrid() {
field: "id",
width: 150,
renderHeader: () => (
<div style={{ display: "flex", alignItems: "center" }}>
<Typography fontWeight={400} fontSize={14}>
{intl.formatMessage({ id: "manufacturers.id", defaultMessage: "ID" })}
</Typography>
<>
<GridColumnHeaderTitle label={intl.formatMessage({ id: "manufacturers.id", defaultMessage: "ID" })} columnWidth={150} />
<Tooltip
trigger="click"
trigger="hover"
title={<FormattedMessage id="comet.manufacturers.id.info" defaultMessage="The id of the manufacturer" />}
>
<IconButton>
<Info />
</IconButton>
<Info sx={{ marginLeft: 1 }} />
</Tooltip>
</div>
</>
),
},
{
Expand Down
9 changes: 7 additions & 2 deletions demo/admin/src/products/future/ManufacturersGrid.cometGen.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,13 @@ export const ManufacturersGrid: GridConfig<GQLManufacturer> = {
{ type: "text", name: "name", headerName: "Name" },
{ type: "text", name: "address.street", headerName: "Street" },
{ type: "number", name: "address.streetNumber", headerName: "Street number" },
{ type: "text", name: "address.alternativeAddress.street", headerName: "Alt-Street" },
{ type: "number", name: "address.alternativeAddress.streetNumber", headerName: "Alt-Street number" },
{ type: "text", name: "address.alternativeAddress.street", headerName: "Alt-Street", headerInfoTooltip: "Street of alternative address" },
{
type: "number",
name: "address.alternativeAddress.streetNumber",
headerName: "Alt-Street number",
headerInfoTooltip: "Street number of alternative address",
},
{ type: "text", name: "addressAsEmbeddable.street", headerName: "Street 2" },
{ type: "number", name: "addressAsEmbeddable.streetNumber", headerName: "Street number 2" },
{ type: "text", name: "addressAsEmbeddable.alternativeAddress.street", headerName: "Alt-Street 2" },
Expand Down
2 changes: 1 addition & 1 deletion demo/admin/src/products/future/ProductsGrid.cometGen.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const ProductsGrid: GridConfig<GQLProduct> = {
},
{ type: "text", name: "title", headerName: "Titel", minWidth: 200, maxWidth: 250, visible: "up('md')" },
{ type: "text", name: "description", headerName: "Description", visible: "up('md')" },
{ type: "number", name: "price", headerName: "Price", maxWidth: 150 },
{ type: "number", name: "price", headerName: "Price", maxWidth: 150, headerInfoTooltip: "Price in EUR" },
{ type: "boolean", name: "inStock", headerName: "In stock", width: 90 },
{ type: "staticSelect", name: "type", maxWidth: 150, values: [{ value: "Cap", label: "great Cap" }, "Shirt", "Tie"] },
{ type: "date", name: "availableSince", width: 140 },
Expand Down
48 changes: 44 additions & 4 deletions demo/admin/src/products/future/generated/ManufacturersGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,14 @@ import {
ToolbarActions,
ToolbarFillSpace,
ToolbarItem,
Tooltip,
useBufferedRowCount,
useDataGridRemote,
usePersistentColumnState,
} from "@comet/admin";
import { Add as AddIcon, Edit } from "@comet/admin-icons";
import { Add as AddIcon, Edit, Info } from "@comet/admin-icons";
import { Button, IconButton } from "@mui/material";
import { DataGridPro, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
import { DataGridPro, GridColumnHeaderTitle, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
import * as React from "react";
import { FormattedMessage, useIntl } from "react-intl";

Expand Down Expand Up @@ -137,7 +138,25 @@ export function ManufacturersGrid(): React.ReactElement {
},
{
field: "address_alternativeAddress_street",
headerName: intl.formatMessage({ id: "manufacturer.address.alternativeAddress.street", defaultMessage: "Alt-Street" }),
renderHeader: () => (
<>
<GridColumnHeaderTitle
label={intl.formatMessage({ id: "manufacturer.address.alternativeAddress.street", defaultMessage: "Alt-Street" })}
columnWidth={150}
/>
<Tooltip
trigger="hover"
title={
<FormattedMessage
id="manufacturer.address.alternativeAddress.street.tooltip"
defaultMessage="Street of alternative address"
/>
}
>
<Info sx={{ marginLeft: 1 }} />
</Tooltip>
</>
),
filterable: false,
sortable: false,
valueGetter: ({ row }) => row.address?.alternativeAddress?.street,
Expand All @@ -146,7 +165,28 @@ export function ManufacturersGrid(): React.ReactElement {
},
{
field: "address_alternativeAddress_streetNumber",
headerName: intl.formatMessage({ id: "manufacturer.address.alternativeAddress.streetNumber", defaultMessage: "Alt-Street number" }),
renderHeader: () => (
<>
<GridColumnHeaderTitle
label={intl.formatMessage({
id: "manufacturer.address.alternativeAddress.streetNumber",
defaultMessage: "Alt-Street number",
})}
columnWidth={150}
/>
<Tooltip
trigger="hover"
title={
<FormattedMessage
id="manufacturer.address.alternativeAddress.streetNumber.tooltip"
defaultMessage="Street number of alternative address"
/>
}
>
<Info sx={{ marginLeft: 1 }} />
</Tooltip>
</>
),
type: "number",
filterable: false,
sortable: false,
Expand Down
23 changes: 16 additions & 7 deletions demo/admin/src/products/future/generated/ProductsGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,18 @@ import {
ToolbarActions,
ToolbarFillSpace,
ToolbarItem,
Tooltip,
useBufferedRowCount,
useDataGridRemote,
usePersistentColumnState,
} from "@comet/admin";
import { Info } from "@comet/admin-icons";
import { DamImageBlock } from "@comet/cms-admin";
import { useTheme } from "@mui/material";
import { DataGridPro, GridRenderCellParams, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
import { DataGridPro, GridColumnHeaderTitle, GridRenderCellParams, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
import { GQLProductFilter } from "@src/graphql.generated";
import * as React from "react";
import { useIntl } from "react-intl";
import { FormattedMessage, useIntl } from "react-intl";

import { ProductsGridPreviewAction } from "../../ProductsGridPreviewAction";
import {
Expand Down Expand Up @@ -115,16 +117,16 @@ export function ProductsGrid({ filter, toolbarAction, rowAction }: Props): React
flex: 1,
visible: theme.breakpoints.down("md"),
sortBy: ["title", "description"],
maxWidth: 250,
minWidth: 200,
maxWidth: 250,
},
{
field: "title",
headerName: intl.formatMessage({ id: "product.title", defaultMessage: "Titel" }),
flex: 1,
visible: theme.breakpoints.up("md"),
maxWidth: 250,
minWidth: 200,
maxWidth: 250,
},
{
field: "description",
Expand All @@ -135,11 +137,18 @@ export function ProductsGrid({ filter, toolbarAction, rowAction }: Props): React
},
{
field: "price",
headerName: intl.formatMessage({ id: "product.price", defaultMessage: "Price" }),
renderHeader: () => (
<>
<GridColumnHeaderTitle label={intl.formatMessage({ id: "product.price", defaultMessage: "Price" })} columnWidth={150} />
<Tooltip trigger="hover" title={<FormattedMessage id="product.price.tooltip" defaultMessage="Price in EUR" />}>
<Info sx={{ marginLeft: 1 }} />
</Tooltip>
</>
),
type: "number",
flex: 1,
maxWidth: 150,
minWidth: 150,
maxWidth: 150,
},
{ field: "inStock", headerName: intl.formatMessage({ id: "product.inStock", defaultMessage: "In stock" }), type: "boolean", width: 90 },
{
Expand All @@ -163,8 +172,8 @@ export function ProductsGrid({ filter, toolbarAction, rowAction }: Props): React
return row.type;
},
flex: 1,
maxWidth: 150,
minWidth: 150,
maxWidth: 150,
},
{
field: "availableSince",
Expand Down
73 changes: 55 additions & 18 deletions packages/admin/cms-admin/src/generator/future/generateGrid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -331,6 +331,7 @@ export function generateGrid(
minWidth: column.minWidth,
maxWidth: column.maxWidth,
flex: column.flex,
headerInfoTooltip: column.headerInfoTooltip,
visible: column.visible && `theme.breakpoints.${column.visible}`,
pinned: column.pinned,
};
Expand All @@ -351,6 +352,7 @@ export function generateGrid(
minWidth: column.minWidth,
maxWidth: column.maxWidth,
flex: column.flex,
headerInfoTooltip: column.headerInfoTooltip,
visible: column.visible && `theme.breakpoints.${column.visible}`,
pinned: column.pinned,
sortBy: "sortBy" in column && column.sortBy,
Expand Down Expand Up @@ -396,14 +398,15 @@ export function generateGrid(
ToolbarActions,
ToolbarFillSpace,
ToolbarItem,
Tooltip,
useBufferedRowCount,
useDataGridRemote,
usePersistentColumnState,
} from "@comet/admin";
import { Add as AddIcon, Edit } from "@comet/admin-icons";
import { Add as AddIcon, Edit, Info } from "@comet/admin-icons";
import { BlockPreviewContent } from "@comet/blocks-admin";
import { Alert, Button, Box, IconButton, useTheme } from "@mui/material";
import { DataGridPro, GridRenderCellParams, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
import { Alert, Button, Box, IconButton, Typography, useTheme } from "@mui/material";
import { DataGridPro, GridColumnHeaderTitle, GridRenderCellParams, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
import { useContentScope } from "@src/common/ContentScopeProvider";
import {
GQL${gqlTypePlural}GridQuery,
Expand Down Expand Up @@ -540,11 +543,54 @@ export function generateGrid(
const columns: GridColDef<GQL${fragmentName}Fragment>[] = [
${gridColumnFields
.map((column) => {
const defaultMinWidth = 150;
const defaultColumnFlex = 1;
let minWidth;
let maxWidth;
let tooltipColumnWidth = column.width;
if (typeof column.width === "undefined") {
maxWidth = column.maxWidth;
if (
typeof column.minWidth === "undefined" &&
(typeof column.maxWidth === "undefined" || column.maxWidth >= defaultMinWidth)
) {
minWidth = defaultMinWidth;
tooltipColumnWidth = defaultMinWidth;
} else if (typeof column.minWidth !== "undefined") {
minWidth = column.minWidth;
tooltipColumnWidth = column.minWidth;
}
}
const columnDefinition: TsCodeRecordToStringObject = {
field: `"${column.name.replace(/\./g, "_")}"`, // field-name is used for api-filter, and api nests with underscore
headerName: `intl.formatMessage({ id: "${instanceGqlType}.${column.name}", defaultMessage: "${
column.headerName || camelCaseToHumanReadable(column.name)
}" })`,
renderHeader: column.headerInfoTooltip
? `() => (
<>
<GridColumnHeaderTitle label={intl.formatMessage({ id: "${instanceGqlType}.${
column.name
}", defaultMessage: "${
column.headerName || camelCaseToHumanReadable(column.name)
}"})} columnWidth= {${tooltipColumnWidth}}
/>
<Tooltip
trigger="hover"
title={<FormattedMessage id="${instanceGqlType}.${column.name}.tooltip" defaultMessage="${
column.headerInfoTooltip
}" />}
>
<Info sx={{ marginLeft: 1 }} />
</Tooltip>
</>
)`
: undefined,
headerName: !column.headerInfoTooltip
? `intl.formatMessage({ id: "${instanceGqlType}.${column.name}", defaultMessage: "${
column.headerName || camelCaseToHumanReadable(column.name)
}" })`
: undefined,
type: column.gridType ? `"${column.gridType}"` : undefined,
filterable: !filterFields.includes(column.name) ? `false` : undefined,
sortable: !sortFields.includes(column.name) ? `false` : undefined,
Expand All @@ -562,18 +608,9 @@ export function generateGrid(
}
if (typeof column.width === "undefined") {
const defaultMinWidth = 150;
columnDefinition.flex = 1;
columnDefinition.maxWidth = column.maxWidth;
if (
typeof column.minWidth === "undefined" &&
(typeof column.maxWidth === "undefined" || column.maxWidth >= defaultMinWidth)
) {
columnDefinition.minWidth = defaultMinWidth;
} else if (typeof column.minWidth !== "undefined") {
columnDefinition.minWidth = column.minWidth;
}
columnDefinition.flex = defaultColumnFlex;
columnDefinition.minWidth = minWidth;
columnDefinition.maxWidth = maxWidth;
}
return tsCodeRecordToString(columnDefinition);
Expand Down
4 changes: 2 additions & 2 deletions packages/admin/cms-admin/src/generator/future/generateGrid/combinationColumn.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { GridColDef } from "@comet/admin";
import { FormattedNumber } from "react-intl";

import { DataGridSettings } from "../generator";
import { BaseColumnConfig } from "../generator";

type AbstractField<FieldName extends string> = {
field: FieldName;
Expand Down Expand Up @@ -56,7 +56,7 @@ export type GridCombinationColumnConfig<FieldName extends string> = {
name: string;
primaryText?: TextConfig<FieldName>;
secondaryText?: TextConfig<FieldName>;
} & DataGridSettings &
} & BaseColumnConfig &
Pick<GridColDef, "sortBy">;

const getTextForCellContent = (textConfig: TextConfig<string>, messageIdPrefix: string) => {
Expand Down
7 changes: 4 additions & 3 deletions packages/admin/cms-admin/src/generator/future/generator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,8 @@ export type FormConfig<T extends { __typename?: string }> = {

export type TabsConfig = { type: "tabs"; tabs: { name: string; content: GeneratorConfig }[] };

export type DataGridSettings = Pick<GridColDef, "headerName" | "width" | "minWidth" | "maxWidth" | "flex" | "pinned"> & {
export type BaseColumnConfig = Pick<GridColDef, "headerName" | "width" | "minWidth" | "maxWidth" | "flex" | "pinned"> & {
headerInfoTooltip?: string;
visible?: ColumnVisibleOption;
};

Expand All @@ -92,9 +93,9 @@ export type GridColumnConfig<T> = (
| { type: "dateTime" }
| { type: "staticSelect"; values?: Array<{ value: string; label: string } | string> }
| { type: "block"; block: ImportReference }
) & { name: UsableFields<T> } & DataGridSettings;
) & { name: UsableFields<T> } & BaseColumnConfig;

export type ActionsGridColumnConfig = { type: "actions"; component?: ImportReference } & DataGridSettings;
export type ActionsGridColumnConfig = { type: "actions"; component?: ImportReference } & BaseColumnConfig;

export type GridConfig<T extends { __typename?: string }> = {
type: "grid";
Expand Down

0 comments on commit 566d5be

Please sign in to comment.