scaffold admin generator code and adapt (remove unnecessary code and …

…style grid columns)

demo/admin/src/common/MasterMenu.tsx

@@ -32,7 +32,7 @@ import { ProductsPage } from "@src/products/generated/ProductsPage";
 import { ManufacturersPage as ManufacturersHandmadePage } from "@src/products/ManufacturersPage";
 import ProductsHandmadePage from "@src/products/ProductsPage";
 import ProductTagsPage from "@src/products/tags/ProductTagsPage";
-import { WarningsPage } from "@src/warnings/generated/WarningsPage";
+import { WarningsPage } from "@src/warnings/WarningsPage";
 import { FormattedMessage } from "react-intl";
 import { Redirect, RouteComponentProps } from "react-router-dom";
 

demo/admin/src/warnings/WarningsGrid.tsx

@@ -0,0 +1,152 @@
+import { gql, useQuery } from "@apollo/client";
+import {
+    DataGridToolbar,
+    GridColDef,
+    GridFilterButton,
+    MainContent,
+    muiGridFilterToGql,
+    muiGridSortToGql,
+    ToolbarItem,
+    useBufferedRowCount,
+    useDataGridRemote,
+    usePersistentColumnState,
+} from "@comet/admin";
+import { WarningSolid } from "@comet/admin-icons";
+import { Chip } from "@mui/material";
+import { DataGrid, GridToolbarQuickFilter } from "@mui/x-data-grid";
+import { GQLWarningLevel } from "@src/graphql.generated";
+import * as React from "react";
+import { FormattedDate, FormattedTime, useIntl } from "react-intl";
+
+import { GQLWarningsGridQuery, GQLWarningsGridQueryVariables, GQLWarningsListFragment } from "./WarningsGrid.generated";
+
+const warningsFragment = gql`
+    fragment WarningsList on Warning {
+        id
+        createdAt
+        updatedAt
+        type
+        level
+        state
+    }
+`;
+
+const warningsQuery = gql`
+    query WarningsGrid($offset: Int, $limit: Int, $sort: [WarningSort!], $search: String, $filter: WarningFilter) {
+        warnings(offset: $offset, limit: $limit, sort: $sort, search: $search, filter: $filter) {
+            nodes {
+                ...WarningsList
+            }
+            totalCount
+        }
+    }
+    ${warningsFragment}
+`;
+
+function WarningsGridToolbar() {
+    return (
+        <DataGridToolbar>
+            <ToolbarItem>
+                <GridToolbarQuickFilter />
+            </ToolbarItem>
+            <ToolbarItem>
+                <GridFilterButton />
+            </ToolbarItem>
+        </DataGridToolbar>
+    );
+}
+
+export function WarningsGrid(): React.ReactElement {
+    const intl = useIntl();
+    const dataGridProps = {
+        ...useDataGridRemote({ initialFilter: { items: [{ columnField: "state", operatorValue: "is", value: "open" }] } }),
+        ...usePersistentColumnState("WarningsGrid"),
+    };
+
+    const columns: GridColDef<GQLWarningsListFragment>[] = [
+        {
+            field: "createdAt",
+            headerName: intl.formatMessage({ id: "warning.dateTime", defaultMessage: "Date / Time" }),
+            type: "dateTime",
+            renderCell: (params) => (
+                <>
+                    <FormattedDate value={params.value} /> <FormattedTime value={params.value} />
+                </>
+            ),
+            width: 200,
+        },
+        {
+            field: "level",
+            headerName: intl.formatMessage({ id: "warning.level", defaultMessage: "Level" }),
+            type: "singleSelect",
+            valueOptions: [
+                { value: "critical", label: intl.formatMessage({ id: "warning.level.critical", defaultMessage: "Critical" }) },
+                { value: "high", label: intl.formatMessage({ id: "warning.level.high", defaultMessage: "High" }) },
+                { value: "low", label: intl.formatMessage({ id: "warning.level.low", defaultMessage: "Low" }) },
+            ],
+            width: 150,
+            renderCell: (params) => {
+                const colorMapping: Record<GQLWarningLevel, "error" | "warning" | "default"> = {
+                    critical: "error",
+                    high: "warning",
+                    low: "default",
+                };
+                return (
+                    <Chip
+                        icon={params.value === "critical" ? <WarningSolid /> : undefined}
+                        color={colorMapping[params.value as GQLWarningLevel]}
+                        label={params.value}
+                    />
+                );
+            },
+        },
+        {
+            field: "type",
+            headerName: intl.formatMessage({ id: "warning.type", defaultMessage: "Type" }),
+            width: 150,
+            renderCell: (params) => <Chip label={params.value} />,
+        },
+        {
+            field: "state",
+            headerName: intl.formatMessage({ id: "warning.state", defaultMessage: "State" }),
+            type: "singleSelect",
+            valueOptions: [
+                { value: "open", label: intl.formatMessage({ id: "warning.state.open", defaultMessage: "Open" }) },
+                { value: "resolved", label: intl.formatMessage({ id: "warning.state.resolved", defaultMessage: "Resolved" }) },
+                { value: "ignored", label: intl.formatMessage({ id: "warning.state.ignored", defaultMessage: "Ignored" }) },
+            ],
+            width: 150,
+        },
+    ];
+
+    const { filter: gqlFilter, search: gqlSearch } = muiGridFilterToGql(columns, dataGridProps.filterModel);
+
+    const { data, loading, error } = useQuery<GQLWarningsGridQuery, GQLWarningsGridQueryVariables>(warningsQuery, {
+        variables: {
+            filter: gqlFilter,
+            search: gqlSearch,
+            offset: dataGridProps.page * dataGridProps.pageSize,
+            limit: dataGridProps.pageSize,
+            sort: muiGridSortToGql(dataGridProps.sortModel),
+        },
+    });
+    const rowCount = useBufferedRowCount(data?.warnings.totalCount);
+    if (error) throw error;
+    const rows = data?.warnings.nodes ?? [];
+
+    return (
+        <MainContent fullHeight>
+            <DataGrid
+                {...dataGridProps}
+                disableSelectionOnClick
+                rows={rows}
+                rowCount={rowCount}
+                columns={columns}
+                loading={loading}
+                components={{
+                    Toolbar: WarningsGridToolbar,
+                }}
+            />
+        </MainContent>
+    );
+}

demo/admin/src/warnings/WarningsPage.tsx

@@ -0,0 +1,14 @@
+import { Stack } from "@comet/admin";
+import * as React from "react";
+import { useIntl } from "react-intl";
+
+import { WarningsGrid } from "./WarningsGrid";
+
+export function WarningsPage(): React.ReactElement {
+    const intl = useIntl();
+    return (
+        <Stack topLevelTitle={intl.formatMessage({ id: "warnings.warnings", defaultMessage: "Warnings" })}>
+            <WarningsGrid />
+        </Stack>
+    );
+}