Add select-grid, assign-grid and assigned-grid

demo/admin/src/products/categories/AssignProductsGrid.tsx

@@ -0,0 +1,86 @@
+import { gql, useApolloClient, useQuery } from "@apollo/client";
+import { Savable } from "@comet/admin";
+import { CircularProgress } from "@mui/material";
+import {
+    GQLGetProductIdsForProductCategoryQuery,
+    GQLGetProductIdsForProductCategoryQueryVariables,
+    GQLSetProductCategoryMutation,
+    GQLSetProductCategoryMutationVariables,
+} from "@src/products/categories/AssignProductsGrid.generated";
+import { ProductsSelectGrid } from "@src/products/categories/ProductsSelectGrid";
+import isEqual from "lodash.isequal";
+import React, { useEffect, useMemo, useState } from "react";
+import { FormattedMessage } from "react-intl";
+
+const setProductCategoryMutation = gql`
+    mutation SetProductCategory($id: ID!, $input: [ID!]!) {
+        updateProductCategory(id: $id, input: { products: $input }) {
+            id
+        }
+    }
+`;
+
+const getProductIdsForProductCategory = gql`
+    query GetProductIdsForProductCategory($id: ID!) {
+        products(filter: { category: { equal: $id } }) {
+            nodes {
+                id
+            }
+        }
+    }
+`;
+
+interface FormProps {
+    productCategoryId: string;
+}
+
+export function AssignProductsGrid({ productCategoryId }: FormProps): React.ReactElement {
+    const client = useApolloClient();
+
+    const { data, error, loading } = useQuery<GQLGetProductIdsForProductCategoryQuery, GQLGetProductIdsForProductCategoryQueryVariables>(
+        getProductIdsForProductCategory,
+        {
+            variables: { id: productCategoryId },
+        },
+    );
+
+    const initialValues = useMemo(() => {
+        return data?.products.nodes ? data.products.nodes.map((product) => product.id) : [];
+    }, [data]);
+    const [values, setValues] = useState<string[]>(initialValues);
+    useEffect(() => {
+        setValues(initialValues);
+    }, [initialValues]);
+
+    if (error) return <FormattedMessage id="common.error" defaultMessage="An error has occured. Please try again at later" />;
+    if (loading) return <CircularProgress />;
+
+    return (
+        <>
+            <Savable
+                doSave={async () => {
+                    await client.mutate<GQLSetProductCategoryMutation, GQLSetProductCategoryMutationVariables>({
+                        mutation: setProductCategoryMutation,
+                        variables: { id: productCategoryId, input: values },
+                        update: (cache, result) => cache.evict({ fieldName: "products" }),
+                    });
+                    return true;
+                }}
+                hasChanges={!isEqual(initialValues.sort(), values.sort())}
+                doReset={() => {
+                    setValues(initialValues);
+                }}
+            />
+            <ProductsSelectGrid
+                dataGridProps={{
+                    checkboxSelection: true,
+                    keepNonExistentRowsSelected: true,
+                    selectionModel: values,
+                    onSelectionModelChange: (newSelectionModel) => {
+                        setValues(newSelectionModel.map((rowId) => String(rowId)));
+                    },
+                }}
+            />
+        </>
+    );
+}

demo/admin/src/products/categories/AssignedProductsGrid.tsx

@@ -0,0 +1,57 @@
+import { CancelButton, SaveBoundary, SaveBoundarySaveButton } from "@comet/admin";
+import { Add as AddIcon } from "@comet/admin-icons";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import { AssignProductsGrid } from "@src/products/categories/AssignProductsGrid";
+import { ProductsGrid } from "@src/products/ProductsGrid";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+type Props = {
+    productCategoryId: string;
+};
+
+export function AssignedProductsGrid({ productCategoryId }: Props): React.ReactElement {
+    const [isOpen, setIsOpen] = React.useState(false);
+
+    const handleCloseDialog = () => {
+        setIsOpen(false);
+    };
+    return (
+        <>
+            <ProductsGrid
+                hideCrudContextMenu={true}
+                toolbarAction={
+                    <Button startIcon={<AddIcon />} onClick={() => setIsOpen(true)} variant="contained" color="primary">
+                        <FormattedMessage id="products.editProductCategory.assignProducts" defaultMessage="Assign Products" />
+                    </Button>
+                }
+                filter={{ category: { equal: productCategoryId } }}
+            />
+            <SaveBoundary
+                onAfterSave={() => {
+                    setIsOpen(false);
+                }}
+            >
+                <Dialog open={isOpen} onClose={handleCloseDialog} fullWidth maxWidth="xl">
+                    <DialogTitle>
+                        <FormattedMessage id="products.editProductCategory.assignProducts" defaultMessage="Assign Products" />
+                    </DialogTitle>
+                    <DialogContent
+                        sx={{
+                            height: "70vh",
+                            padding: 0,
+                            paddingTop: "0 !important" /* is connected to title-style */,
+                        }}
+                    >
+                        <AssignProductsGrid productCategoryId={productCategoryId} />
+                    </DialogContent>
+                    <DialogActions>
+                        {/* TODO Missing close-dialog-unsaved-changes-check */}
+                        <CancelButton onClick={handleCloseDialog} />
+                        <SaveBoundarySaveButton disabled={false} />
+                    </DialogActions>
+                </Dialog>
+            </SaveBoundary>
+        </>
+    );
+}

demo/admin/src/products/categories/ProductCategoriesPage.tsx

@@ -1,5 +1,5 @@
 import {
-    MainContent,
+    MainContent, RouterTab, RouterTabs,
     SaveBoundary,
     SaveBoundarySaveButton,
     Stack,
@@ -17,6 +17,8 @@ import { useIntl } from "react-intl";
 
 import ProductCategoriesTable from "./ProductCategoriesTable";
 import ProductCategoryForm from "./ProductCategoryForm";
+import { AssignedProductsGrid } from "@src/products/categories/AssignedProductsGrid";
+import { Box } from "@mui/material";
 
 const FormToolbar = () => (
     <StackToolbar scopeIndicator={<ContentScopeIndicator global />}>
@@ -45,7 +47,27 @@ const ProductCategoriesPage: React.FC = () => {
                     {(selectedId) => (
                         <SaveBoundary>
                             <FormToolbar />
-                            <ProductCategoryForm id={selectedId} />
+                            <RouterTabs>
+                                <RouterTab
+                                    forceRender={true}
+                                    path=""
+                                    label={intl.formatMessage({ id: "products.editProductCategory.formTab", defaultMessage: "Product category" })}
+                                >
+                                    <ProductCategoryForm id={selectedId} />
+                                </RouterTab>
+                                <RouterTab
+                                    forceRender={true}
+                                    path="/assigned-products"
+                                    label={intl.formatMessage({
+                                        id: "products.editProductCategory.assignedProducts",
+                                        defaultMessage: "Assigned Products",
+                                    })}
+                                >
+                                    <Box sx={{ height: "100vh" }}>
+                                        <AssignedProductsGrid productCategoryId={selectedId} />
+                                    </Box>
+                                </RouterTab>
+                            </RouterTabs>
                         </SaveBoundary>
                     )}
                 </StackPage>