Skip to content

Commit

Permalink
Add select-grid, assign-grid and assigned-grid
Browse files Browse the repository at this point in the history
  • Loading branch information
Ben-Ho committed Aug 14, 2024
1 parent 239b79d commit 5e31321
Show file tree
Hide file tree
Showing 4 changed files with 394 additions and 1 deletion.
86 changes: 86 additions & 0 deletions demo/admin/src/products/categories/AssignProductsGrid.tsx
Original file line number Diff line number Diff line change
@@ -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)));
},
}}
/>
</>
);
}
57 changes: 57 additions & 0 deletions demo/admin/src/products/categories/AssignedProductsGrid.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
26 changes: 25 additions & 1 deletion demo/admin/src/products/categories/ProductCategoriesPage.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import {
MainContent,
RouterTab,
RouterTabs,
SaveBoundary,
SaveBoundarySaveButton,
Stack,
Expand All @@ -12,6 +14,8 @@ import {
ToolbarFillSpace,
} from "@comet/admin";
import { ContentScopeIndicator } from "@comet/cms-admin";
import { Box } from "@mui/material";
import { AssignedProductsGrid } from "@src/products/categories/AssignedProductsGrid";
import React from "react";
import { useIntl } from "react-intl";

Expand Down Expand Up @@ -45,7 +49,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>
Expand Down
Loading

0 comments on commit 5e31321

Please sign in to comment.