PoC: Crud skill test 02 product category

admin/package.json

@@ -54,7 +54,8 @@
         "react-final-form": "^6.5.9",
         "react-intl": "^7.1.14",
         "react-router": "^5.3.4",
-        "react-router-dom": "^5.3.4"
+        "react-router-dom": "^5.3.4",
+        "use-debounce": "^10.0.6"
     },
     "devDependencies": {
         "@comet/admin-generator": "8.18.0",

admin/src/common/MasterMenu.tsx

@@ -1,4 +1,4 @@
-import { Assets, Dashboard, PageTree, Snips, Tag, Wrench } from "@comet/admin-icons";
+import { Assets, Dashboard, Domain, PageTree, Snips, Tag, Wrench } from "@comet/admin-icons";
 import {
     ContentScopeIndicator,
     createRedirectsPage,
@@ -14,6 +14,7 @@ import { DashboardPage } from "@src/dashboard/DashboardPage";
 import { Link } from "@src/documents/links/Link";
 import { Page } from "@src/documents/pages/Page";
 import { EditFooterPage } from "@src/footers/EditFooterPage";
+import { ProductCategoriesPage } from "@src/products/ProductCategoriesPage";
 import { ProductsPage } from "@src/products/ProductsPage";
 import { FormattedMessage } from "react-intl";
 
@@ -61,6 +62,16 @@ export const masterMenuData: MasterMenuData = [
         },
         requiredPermission: "products",
     },
+    {
+        type: "route",
+        primary: <FormattedMessage id="menu.productCategories" defaultMessage="Product Categories" />,
+        icon: <Domain />,
+        route: {
+            path: "/product-categories",
+            component: ProductCategoriesPage,
+        },
+        requiredPermission: "productCategories",
+    },
     {
         type: "route",
         primary: <FormattedMessage id="menu.dam" defaultMessage="Assets" />,

admin/src/products/ProductCategoriesPage.tsx

@@ -0,0 +1,53 @@
+import {
+    SaveBoundary,
+    Stack,
+    StackMainContent,
+    StackPage,
+    StackSwitch,
+    StackToolbar,
+    ToolbarAutomaticTitleItem,
+    ToolbarBackButton,
+} from "@comet/admin";
+import { ContentScopeIndicator } from "@comet/cms-admin";
+import { type FunctionComponent } from "react";
+import { FormattedMessage } from "react-intl";
+
+import { ProductCategoriesDataGrid } from "./components/productCategoriesDataGrid/ProductCategoriesDataGrid";
+import { ProductCategoryForm } from "./components/productCategoryForm/ProductCategoryForm";
+import { ProductCategoryToolbar } from "./components/productCategoryToolbar/ProductCategoryToolbar";
+
+export const ProductCategoriesPage: FunctionComponent = () => {
+    return (
+        <Stack topLevelTitle={<FormattedMessage id="productCategories.title" defaultMessage="Product Categories" />}>
+            <StackSwitch>
+                <StackPage name="grid">
+                    <StackToolbar scopeIndicator={<ContentScopeIndicator />}>
+                        <ToolbarBackButton />
+                        <ToolbarAutomaticTitleItem />
+                    </StackToolbar>
+                    <StackMainContent fullHeight>
+                        <ProductCategoriesDataGrid />
+                    </StackMainContent>
+                </StackPage>
+                <StackPage name="add">
+                    <SaveBoundary>
+                        <ProductCategoryToolbar />
+                        <StackMainContent>
+                            <ProductCategoryForm />
+                        </StackMainContent>
+                    </SaveBoundary>
+                </StackPage>
+                <StackPage name="edit">
+                    {(id) => (
+                        <SaveBoundary>
+                            <ProductCategoryToolbar id={id} />
+                            <StackMainContent>
+                                <ProductCategoryForm id={id} />
+                            </StackMainContent>
+                        </SaveBoundary>
+                    )}
+                </StackPage>
+            </StackSwitch>
+        </Stack>
+    );
+};

admin/src/products/components/productCategoriesDataGrid/ProductCategoriesDataGrid.gql.ts

@@ -0,0 +1,55 @@
+import { gql } from "@apollo/client";
+
+const productCategoriesFragment = gql`
+    fragment ProductCategoriesGridItem on ProductCategory {
+        id
+        name
+        slug
+        position
+        parentCategory {
+            id
+            name
+        }
+    }
+`;
+
+export const productCategoriesQuery = gql`
+    query ProductCategoriesGrid(
+        $scope: ProductCategoryScopeInput!
+        $offset: Int!
+        $limit: Int!
+        $sort: [ProductCategorySort!]!
+        $search: String
+        $filter: ProductCategoryFilter
+    ) {
+        productCategories(scope: $scope, offset: $offset, limit: $limit, sort: $sort, search: $search, filter: $filter) {
+            nodes {
+                ...ProductCategoriesGridItem
+            }
+            totalCount
+        }
+    }
+    ${productCategoriesFragment}
+`;
+
+export const deleteProductCategoryMutation = gql`
+    mutation DeleteProductCategory($id: ID!) {
+        deleteProductCategory(id: $id)
+    }
+`;
+
+export const updateProductCategoryPositionMutation = gql`
+    mutation UpdateProductCategoryPosition($id: ID!, $input: ProductCategoryUpdateInput!) {
+        updateProductCategory(id: $id, input: $input) {
+            productCategory {
+                id
+                position
+                updatedAt
+            }
+            errors {
+                code
+                field
+            }
+        }
+    }
+`;

admin/src/products/components/productCategoriesDataGrid/ProductCategoriesDataGrid.tsx

@@ -0,0 +1,147 @@
+import { useApolloClient, useQuery } from "@apollo/client";
+import {
+    CrudContextMenu,
+    type GridColDef,
+    StackLink,
+    useBufferedRowCount,
+    useDataGridRemote,
+    usePersistentColumnState,
+    useStackSwitchApi,
+} from "@comet/admin";
+import { Edit as EditIcon } from "@comet/admin-icons";
+import { useContentScope } from "@comet/cms-admin";
+import { IconButton } from "@mui/material";
+import { DataGridPro, type GridRowOrderChangeParams, type GridSlotsComponent } from "@mui/x-data-grid-pro";
+import { useMemo } from "react";
+import { useIntl } from "react-intl";
+
+import { deleteProductCategoryMutation, productCategoriesQuery, updateProductCategoryPositionMutation } from "./ProductCategoriesDataGrid.gql";
+import {
+    type GQLDeleteProductCategoryMutation,
+    type GQLDeleteProductCategoryMutationVariables,
+    type GQLProductCategoriesGridItemFragment,
+    type GQLProductCategoriesGridQuery,
+    type GQLProductCategoriesGridQueryVariables,
+    type GQLUpdateProductCategoryPositionMutation,
+    type GQLUpdateProductCategoryPositionMutationVariables,
+} from "./ProductCategoriesDataGrid.gql.generated";
+import { ProductCategoriesDataGridToolbar } from "./toolbar/ProductCategoriesDataGridToolbar";
+
+export function ProductCategoriesDataGrid() {
+    const client = useApolloClient();
+    const intl = useIntl();
+    const { scope } = useContentScope();
+    const dataGridProps = {
+        ...useDataGridRemote({
+            queryParamsPrefix: "productCategories",
+        }),
+        ...usePersistentColumnState("ProductCategoriesDataGrid"),
+    };
+    const stackSwitchApi = useStackSwitchApi();
+
+    const handleRowClick = (params: { row: { id: string } }) => {
+        stackSwitchApi.activatePage("edit", params.row.id);
+    };
+
+    const handleRowOrderChange = async ({ row: { id }, targetIndex }: GridRowOrderChangeParams) => {
+        await client.mutate<GQLUpdateProductCategoryPositionMutation, GQLUpdateProductCategoryPositionMutationVariables>({
+            mutation: updateProductCategoryPositionMutation,
+            variables: { id, input: { position: targetIndex + 1 } },
+            awaitRefetchQueries: true,
+            refetchQueries: [productCategoriesQuery],
+        });
+    };
+
+    const columns: GridColDef<GQLProductCategoriesGridItemFragment>[] = useMemo(
+        () => [
+            {
+                field: "name",
+                headerName: intl.formatMessage({ id: "productCategory.name", defaultMessage: "Name" }),
+                filterable: false,
+                sortable: false,
+                flex: 1,
+                minWidth: 150,
+            },
+            {
+                field: "slug",
+                headerName: intl.formatMessage({ id: "productCategory.slug", defaultMessage: "Slug" }),
+                filterable: false,
+                sortable: false,
+                width: 200,
+            },
+            {
+                field: "parentCategory",
+                headerName: intl.formatMessage({ id: "productCategory.parentCategory", defaultMessage: "Parent Category" }),
+                filterable: false,
+                sortable: false,
+                flex: 1,
+                minWidth: 150,
+                valueGetter: (_value: unknown, row: GQLProductCategoriesGridItemFragment) => row.parentCategory?.name,
+            },
+            {
+                field: "actions",
+                headerName: "",
+                sortable: false,
+                filterable: false,
+                type: "actions",
+                align: "right",
+                pinned: "right",
+                width: 84,
+                renderCell: (params) => {
+                    return (
+                        <>
+                            <IconButton color="primary" component={StackLink} pageName="edit" payload={params.row.id}>
+                                <EditIcon />
+                            </IconButton>
+                            <CrudContextMenu
+                                onDelete={async () => {
+                                    await client.mutate<GQLDeleteProductCategoryMutation, GQLDeleteProductCategoryMutationVariables>({
+                                        mutation: deleteProductCategoryMutation,
+                                        variables: { id: params.row.id },
+                                    });
+                                }}
+                                refetchQueries={[productCategoriesQuery]}
+                            />
+                        </>
+                    );
+                },
+            },
+        ],
+        [intl, client],
+    );
+
+    const { data, loading, error } = useQuery<GQLProductCategoriesGridQuery, GQLProductCategoriesGridQueryVariables>(productCategoriesQuery, {
+        variables: {
+            scope,
+            sort: [{ field: "position", direction: "ASC" as const }],
+            offset: 0,
+            limit: 100,
+        },
+    });
+
+    const rowCount = useBufferedRowCount(data?.productCategories.totalCount);
+    if (error) throw error;
+
+    const rows =
+        data?.productCategories.nodes.map((node) => ({
+            ...node,
+            __reorder__: node.name,
+        })) ?? [];
+
+    return (
+        <DataGridPro
+            {...dataGridProps}
+            rows={rows}
+            rowCount={rowCount}
+            columns={columns}
+            loading={loading}
+            slots={{
+                toolbar: ProductCategoriesDataGridToolbar as GridSlotsComponent["toolbar"],
+            }}
+            rowReordering
+            onRowOrderChange={handleRowOrderChange}
+            hideFooterPagination
+            onRowClick={handleRowClick}
+        />
+    );
+}

admin/src/products/components/productCategoriesDataGrid/toolbar/ProductCategoriesDataGridToolbar.tsx

@@ -0,0 +1,14 @@
+import { Button, DataGridToolbar, FillSpace, StackLink } from "@comet/admin";
+import { Add as AddIcon } from "@comet/admin-icons";
+import { FormattedMessage } from "react-intl";
+
+export function ProductCategoriesDataGridToolbar() {
+    return (
+        <DataGridToolbar>
+            <FillSpace />
+            <Button responsive startIcon={<AddIcon />} component={StackLink} pageName="add" payload="add">
+                <FormattedMessage id="productCategory.productCategoriesGrid.newEntry" defaultMessage="New Category" />
+            </Button>
+        </DataGridToolbar>
+    );
+}

admin/src/products/components/productCategoryAsyncAutocompleteField/ProductCategoryAsyncAutocompleteField.gql.ts

@@ -0,0 +1,19 @@
+import { gql } from "@apollo/client";
+
+const productCategoryAsyncAutocompleteFieldFragment = gql`
+    fragment ProductCategoryAsyncAutocompleteFieldProductCategory on ProductCategory {
+        id
+        name
+    }
+`;
+
+export const productCategoryAsyncAutocompleteFieldQuery = gql`
+    query ProductCategoryAsyncAutocompleteField($scope: ProductCategoryScopeInput!, $search: String, $filter: ProductCategoryFilter) {
+        productCategories(scope: $scope, search: $search, filter: $filter) {
+            nodes {
+                ...ProductCategoryAsyncAutocompleteFieldProductCategory
+            }
+        }
+    }
+    ${productCategoryAsyncAutocompleteFieldFragment}
+`;

admin/src/products/components/productCategoryAsyncAutocompleteField/ProductCategoryAsyncAutocompleteField.tsx

@@ -0,0 +1,60 @@
+import { useApolloClient } from "@apollo/client";
+import { AsyncAutocompleteField, type AsyncAutocompleteFieldProps } from "@comet/admin";
+import { useContentScope } from "@comet/cms-admin";
+import { type FunctionComponent } from "react";
+
+import { productCategoryAsyncAutocompleteFieldQuery } from "./ProductCategoryAsyncAutocompleteField.gql";
+import {
+    type GQLProductCategoryAsyncAutocompleteFieldProductCategoryFragment,
+    type GQLProductCategoryAsyncAutocompleteFieldQuery,
+    type GQLProductCategoryAsyncAutocompleteFieldQueryVariables,
+} from "./ProductCategoryAsyncAutocompleteField.gql.generated";
+
+type ProductCategoryAsyncAutocompleteFieldOption = GQLProductCategoryAsyncAutocompleteFieldProductCategoryFragment;
+
+type ProductCategoryAsyncAutocompleteFieldProps = Omit<
+    AsyncAutocompleteFieldProps<ProductCategoryAsyncAutocompleteFieldOption, false, true, false>,
+    "loadOptions"
+> & {
+    excludeId?: string;
+};
+
+export const ProductCategoryAsyncAutocompleteField: FunctionComponent<ProductCategoryAsyncAutocompleteFieldProps> = ({
+    name,
+    excludeId,
+    clearable = true,
+    disabled = false,
+    variant = "horizontal",
+    fullWidth = true,
+    ...restProps
+}) => {
+    const client = useApolloClient();
+    const { scope } = useContentScope();
+
+    return (
+        <AsyncAutocompleteField
+            name={name}
+            clearable={disabled ? false : clearable}
+            disabled={disabled}
+            variant={variant}
+            fullWidth={fullWidth}
+            getOptionLabel={(option) => option.name}
+            isOptionEqualToValue={(option, value) => option.id === value.id}
+            {...restProps}
+            loadOptions={async (search) => {
+                const { data } = await client.query<
+                    GQLProductCategoryAsyncAutocompleteFieldQuery,
+                    GQLProductCategoryAsyncAutocompleteFieldQueryVariables
+                >({
+                    query: productCategoryAsyncAutocompleteFieldQuery,
+                    variables: {
+                        scope,
+                        search,
+                        filter: excludeId ? { id: { notEqual: excludeId } } : undefined,
+                    },
+                });
+                return data.productCategories.nodes;
+            }}
+        />
+    );
+};