Supported nested fields

.changeset/happy-fans-pump.md

@@ -0,0 +1,5 @@
+---
+"@comet/cms-admin": minor
+---
+
+Add future Admin Generator that works with configuration files

demo/admin/package.json

@@ -3,7 +3,7 @@
     "version": "1.0.0",
     "private": true,
     "scripts": {
-        "admin-generator": "rimraf 'src/*/generated' && comet-admin-generator generate crud-generator-config.ts",
+        "admin-generator": "rimraf 'src/*/generated' && comet-admin-generator generate crud-generator-config.ts && comet-admin-generator future-generate",
         "build": "run-s intl:compile && run-p gql:types generate-block-types && cross-env BABEL_ENV=production webpack --config ./webpack.config.ts --env production --mode production --progress",
         "generate-block-types": "comet generate-block-types --inputs",
         "generate-block-types:watch": "chokidar -s \"**/block-meta.json\" -c \"npm run generate-block-types\"",

demo/admin/src/common/MasterMenu.tsx

@@ -20,6 +20,7 @@ import { Page } from "@src/pages/Page";
 import { categoryToUrlParam, pageTreeCategories, urlParamToCategory } from "@src/pageTree/pageTreeCategories";
 import { PredefinedPage } from "@src/predefinedPage/PredefinedPage";
 import ProductCategoriesPage from "@src/products/categories/ProductCategoriesPage";
+import { ProductsPage as FutureProductsPage } from "@src/products/future/ProductsPage";
 import { ProductsPage } from "@src/products/generated/ProductsPage";
 import ProductsHandmadePage from "@src/products/ProductsPage";
 import ProductTagsPage from "@src/products/tags/ProductTagsPage";
@@ -164,6 +165,13 @@ export const masterMenuData: MasterMenuData = [
         primary: <FormattedMessage id="menu.products" defaultMessage="Products" />,
         icon: <Snips />,
         submenu: [
+            {
+                primary: <FormattedMessage id="menu.productsFuture" defaultMessage="Products Future" />,
+                route: {
+                    path: "/products-future",
+                    component: FutureProductsPage,
+                },
+            },
             {
                 primary: <FormattedMessage id="menu.products" defaultMessage="Products" />,
                 route: {

demo/admin/src/products/future/ProductForm.cometGen.ts

@@ -0,0 +1,56 @@
+import { future_FormConfig as FormConfig } from "@comet/cms-admin";
+import { GQLProduct } from "@src/graphql.generated";
+
+export const ProductForm: FormConfig<GQLProduct> = {
+    type: "form",
+    gqlType: "Product",
+    fragmentName: "ProductFormDetails", // configurable as it must be unique across project
+    fields: [
+        {
+            type: "text",
+            name: "title",
+            label: "Titel", // default is generated from name (camelCaseToHumanReadable)
+            required: true, // default is inferred from gql schema
+        },
+        { type: "text", name: "packageDimensions.height", label: "Height" },
+        { type: "text", name: "slug" },
+        { type: "text", name: "description", label: "Description", multiline: true },
+        { type: "staticSelect", name: "type", label: "Type" /*, values: from gql schema (TODO overridable)*/ },
+        //TODO { type: "asyncSelect", name: "category", label: "Category" /*, endpoint: from gql schema (overridable)*/ },
+        { type: "number", name: "price" },
+        { type: "boolean", name: "inStock" },
+        { type: "date", name: "availableSince" },
+        { type: "block", name: "image", label: "Image", block: { name: "PixelImageBlock", import: "@comet/cms-admin" } },
+    ],
+};
+
+/*
+TODO
+export const tabsConfig: TabsConfig = {
+    type: "tabs",
+    tabs: [{ name: "form", content: formConfig }],
+};
+
+//alternative syntax for the above
+export const tabsConfig2: TabsConfig = {
+    type: "tabs",
+    tabs: [
+        {
+            name: "form",
+            content: {
+                type: "form",
+                gqlType: "Product",
+                fields: [
+                    { type: "text", name: "title", label: "Titel" },
+                    { type: "text", name: "slug", label: "Slug" },
+                    { type: "text", name: "description", label: "Description", multiline: true },
+                    { type: "staticSelect", name: "type", label: "Type" / *, values: from gql schema (overridable)* / },
+                    { type: "asyncSelect", name: "type", label: "Type" / *, endpoint: from gql schema (overridable)* / },
+                    { type: "block", name: "image", label: "Image", block: PixelImageBlock },
+                ],
+            } satisfies FormConfig<GQLProduct>,
+        },
+    ],
+};
+
+*/

demo/admin/src/products/future/ProductsGrid.cometGen.ts

@@ -0,0 +1,16 @@
+import { future_GridConfig as GridConfig } from "@comet/cms-admin";
+import { GQLProduct } from "@src/graphql.generated";
+
+export const ProductsGrid: GridConfig<GQLProduct> = {
+    type: "grid",
+    gqlType: "Product",
+    fragmentName: "ProductsGridFuture", // configurable as it must be unique across project
+    columns: [
+        { type: "text", name: "title", headerName: "Titel", width: 150 },
+        { type: "text", name: "description", headerName: "Description", width: 150 },
+        { type: "number", name: "price", headerName: "Price", width: 150 },
+        { type: "staticSelect", name: "type" /*, values: from gql schema (TODO overridable)*/ },
+        { type: "date", name: "availableSince" },
+        { type: "dateTime", name: "createdAt" },
+    ],
+};

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

@@ -0,0 +1,25 @@
+import { Stack, StackPage, StackSwitch } from "@comet/admin";
+import * as React from "react";
+import { useIntl } from "react-intl";
+
+import { ProductForm } from "./generated/ProductForm";
+import { ProductsGrid } from "./generated/ProductsGrid";
+
+export function ProductsPage(): React.ReactElement {
+    const intl = useIntl();
+    return (
+        <Stack topLevelTitle={intl.formatMessage({ id: "products.products", defaultMessage: "Products" })}>
+            <StackSwitch>
+                <StackPage name="grid">
+                    <ProductsGrid />
+                </StackPage>
+                <StackPage name="edit" title={intl.formatMessage({ id: "products.editProduct", defaultMessage: "Edit Product" })}>
+                    {(selectedId) => <ProductForm id={selectedId} />}
+                </StackPage>
+                <StackPage name="add" title={intl.formatMessage({ id: "products.addProduct", defaultMessage: "Add Product" })}>
+                    <ProductForm />
+                </StackPage>
+            </StackSwitch>
+        </Stack>
+    );
+}

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

@@ -0,0 +1,49 @@
+// This file has been generated by comet admin-generator.
+// You may choose to use this file as scaffold by moving this file out of generated folder and removing this comment.
+import { gql } from "@apollo/client";
+
+export const productFormFragment = gql`
+    fragment ProductFormDetails on Product {
+        title
+        packageDimensions {
+            height
+        }
+        slug
+        description
+        type
+        price
+        inStock
+        availableSince
+        image
+    }
+`;
+export const productQuery = gql`
+    query Product($id: ID!) {
+        product(id: $id) {
+            id
+            updatedAt
+            ...ProductFormDetails
+        }
+    }
+    ${productFormFragment}
+`;
+export const createProductMutation = gql`
+    mutation CreateProduct($input: ProductInput!) {
+        createProduct(input: $input) {
+            id
+            updatedAt
+            ...ProductFormDetails
+        }
+    }
+    ${productFormFragment}
+`;
+export const updateProductMutation = gql`
+    mutation UpdateProduct($id: ID!, $input: ProductUpdateInput!, $lastUpdatedAt: DateTime) {
+        updateProduct(id: $id, input: $input, lastUpdatedAt: $lastUpdatedAt) {
+            id
+            updatedAt
+            ...ProductFormDetails
+        }
+    }
+    ${productFormFragment}
+`;