@webiny/app-headless-cms 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/presentation/fieldTypes/types/layout/TabsLayoutEditor.js

@@ -0,0 +1,441 @@
+import react, { useCallback, useEffect, useRef } from "react";
+import { Accordion, Button, Grid, Heading, IconButton, Input, ScrollArea, Tabs, Text, Textarea } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/edit.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.svg";
+import { ReactComponent as expand_less_svg_ReactComponent } from "@webiny/icons/expand_less.svg";
+import { ReactComponent as expand_more_svg_ReactComponent } from "@webiny/icons/expand_more.svg";
+import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
+import { generateAlphaNumericLowerCaseId } from "@webiny/utils";
+import { useConfirmationDialog, useDialogs } from "@webiny/app-admin";
+import { Bind } from "@webiny/form";
+import { FieldEditor } from "../../../../admin/components/FieldEditor/index.js";
+import { IconPicker } from "../../../../admin/components/IconPicker.js";
+import { useModelFieldEditor } from "../../../../admin/hooks/index.js";
+import { PermissionsEditor } from "../../../../admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.js";
+import { RulesEditor } from "../../../../admin/components/FieldEditor/EditFieldDialog/RulesEditor/RulesEditor.js";
+import { useModelEditor } from "../../../../admin/components/ContentModelEditor/useModelEditor.js";
+const TabsSettings = ()=>/*#__PURE__*/ react.createElement(Grid, {
+        className: "mt-md"
+    }, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "label"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Label"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "description"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Description"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "help"
+    }, /*#__PURE__*/ react.createElement(Textarea, {
+        label: "Help"
+    }))));
+const TabsDialogContent = ({ fieldOptions })=>/*#__PURE__*/ react.createElement(ScrollArea, {
+        className: "max-h-[70vh] flex flex-col"
+    }, /*#__PURE__*/ react.createElement(Tabs, {
+        size: "md",
+        separator: true,
+        tabs: [
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "tabs",
+                trigger: "Tabs",
+                value: "tabs",
+                content: /*#__PURE__*/ react.createElement(TabsSettings, null)
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "permissions",
+                trigger: "Permissions",
+                value: "permissions",
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "mt-md"
+                }, /*#__PURE__*/ react.createElement(PermissionsEditor, null))
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "rules",
+                trigger: "Rules",
+                value: "rules",
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "mt-md"
+                }, /*#__PURE__*/ react.createElement(RulesEditor, {
+                    fieldOptions: fieldOptions
+                }))
+            })
+        ]
+    }));
+const TabSettingsFields = ()=>/*#__PURE__*/ react.createElement(Grid, {
+        className: "mt-md"
+    }, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "label"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Label"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "icon"
+    }, /*#__PURE__*/ react.createElement(IconPicker, {
+        label: "Icon"
+    }))));
+const TabDialogContent = ({ fieldOptions })=>/*#__PURE__*/ react.createElement(Tabs, {
+        size: "md",
+        separator: true,
+        tabs: [
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "tab",
+                trigger: "Tab",
+                value: "tab",
+                content: /*#__PURE__*/ react.createElement(TabSettingsFields, null)
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "permissions",
+                trigger: "Permissions",
+                value: "permissions",
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "mt-md"
+                }, /*#__PURE__*/ react.createElement(PermissionsEditor, null))
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "rules",
+                trigger: "Rules",
+                value: "rules",
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "mt-md"
+                }, /*#__PURE__*/ react.createElement(RulesEditor, {
+                    fieldOptions: fieldOptions
+                }))
+            })
+        ]
+    });
+function createTabParent(tab) {
+    return {
+        id: tab.id,
+        fieldId: `tab:${tab.id}`,
+        type: "tab",
+        label: tab.label,
+        renderer: {
+            name: ""
+        }
+    };
+}
+function resolveTabFields(tab, parentFields) {
+    const fieldIds = new Set();
+    for (const row of tab.layout)for (const cell of row)if ("string" == typeof cell) fieldIds.add(cell);
+    return parentFields.filter((f)=>fieldIds.has(f.id));
+}
+const TabItem = ({ tab, index, totalTabs, field, parentFields, onUpdate, onInsertField, onRemoveField, onUpdateField })=>{
+    const { fieldOptions } = useModelEditor();
+    const dialogs = useDialogs();
+    const { showConfirmation } = useConfirmationDialog({
+        title: "Delete tab",
+        message: `Are you sure you want to delete the tab "${tab.label}"? Fields inside this tab will be removed.`,
+        acceptLabel: "Yes, delete tab"
+    });
+    const isFirst = 0 === index;
+    const isLast = index === totalTabs - 1;
+    const tabFields = resolveTabFields(tab, parentFields);
+    const handleFieldsChange = useCallback(({ fields: newFields, layout: newLayout })=>{
+        const oldFieldIds = new Set(tabFields.map((f)=>f.id));
+        const newFieldIds = new Set(newFields.map((f)=>f.id));
+        for (const f of newFields)if (!oldFieldIds.has(f.id)) onInsertField(f);
+        for (const id of oldFieldIds)if (!newFieldIds.has(id)) onRemoveField(id);
+        const oldFieldMap = new Map(tabFields.map((f)=>[
+                f.id,
+                f
+            ]));
+        for (const f of newFields)if (oldFieldMap.has(f.id) && oldFieldMap.get(f.id) !== f) onUpdateField(f);
+        const updatedTabs = [
+            ...field.tabs
+        ];
+        updatedTabs[index] = {
+            ...tab,
+            layout: newLayout
+        };
+        onUpdate({
+            ...field,
+            tabs: updatedTabs
+        });
+    }, [
+        tab,
+        index,
+        field,
+        tabFields,
+        onUpdate,
+        onInsertField,
+        onRemoveField,
+        onUpdateField
+    ]);
+    const moveTabUp = useCallback(()=>{
+        if (isFirst) return;
+        const tabs = [
+            ...field.tabs
+        ];
+        [tabs[index - 1], tabs[index]] = [
+            tabs[index],
+            tabs[index - 1]
+        ];
+        onUpdate({
+            ...field,
+            tabs
+        });
+    }, [
+        field,
+        index,
+        isFirst,
+        onUpdate
+    ]);
+    const moveTabDown = useCallback(()=>{
+        if (isLast) return;
+        const tabs = [
+            ...field.tabs
+        ];
+        [tabs[index + 1], tabs[index]] = [
+            tabs[index],
+            tabs[index + 1]
+        ];
+        onUpdate({
+            ...field,
+            tabs
+        });
+    }, [
+        field,
+        index,
+        isLast,
+        onUpdate
+    ]);
+    const deleteTab = useCallback(()=>{
+        showConfirmation(()=>{
+            for (const row of tab.layout)for (const cell of row)if ("string" == typeof cell) onRemoveField(cell);
+            const tabs = field.tabs.filter((_, i)=>i !== index);
+            onUpdate({
+                ...field,
+                tabs
+            });
+        });
+    }, [
+        field,
+        index,
+        tab,
+        onUpdate,
+        onRemoveField,
+        showConfirmation
+    ]);
+    const editTab = useCallback(()=>{
+        dialogs.showDialog({
+            title: "Tab Settings",
+            description: "Configure the tab and access permissions",
+            acceptLabel: "Save",
+            cancelLabel: "Cancel",
+            formData: {
+                label: tab.label,
+                icon: tab.icon ?? "",
+                rules: tab.rules ?? []
+            },
+            content: /*#__PURE__*/ react.createElement(TabDialogContent, {
+                fieldOptions: fieldOptions
+            }),
+            onAccept: (data)=>{
+                const updatedTabs = [
+                    ...field.tabs
+                ];
+                updatedTabs[index] = {
+                    ...tab,
+                    label: data.label ?? tab.label,
+                    icon: data.icon || void 0,
+                    rules: data.rules ?? []
+                };
+                onUpdate({
+                    ...field,
+                    tabs: updatedTabs
+                });
+            }
+        });
+    }, [
+        dialogs,
+        field,
+        index,
+        tab,
+        onUpdate
+    ]);
+    return /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: tab.label,
+        className: "[&>[data-state='open']]:!overflow-visible",
+        description: `${tabFields.length} field${1 !== tabFields.length ? "s" : ""}`,
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(expand_less_svg_ReactComponent, null),
+            onClick: moveTabUp,
+            disabled: isFirst
+        }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(expand_more_svg_ReactComponent, null),
+            onClick: moveTabDown,
+            disabled: isLast
+        }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            onClick: editTab
+        }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+            onClick: deleteTab,
+            disabled: totalTabs <= 1
+        }))
+    }, /*#__PURE__*/ react.createElement(FieldEditor, {
+        parent: createTabParent(tab),
+        fields: tabFields,
+        layout: tab.layout,
+        onChange: handleFieldsChange
+    }));
+};
+const TabsLayoutEditor = ({ field, onUpdate, onDelete })=>{
+    const parentEditor = useModelFieldEditor();
+    const { fieldOptions } = useModelEditor();
+    const { showDialog } = useDialogs();
+    const newTabId = useRef(void 0);
+    const { showConfirmation: showDeleteConfirmation } = useConfirmationDialog({
+        title: "Delete tabs",
+        message: "Are you sure you want to delete this tabs element? All fields inside the tabs will be removed.",
+        acceptLabel: "Yes, delete"
+    });
+    useEffect(()=>{
+        newTabId.current = void 0;
+    }, []);
+    const getAllParentFields = useCallback(()=>{
+        const allFieldIds = new Set();
+        for (const tab of field.tabs)for (const row of tab.layout)for (const cell of row)if ("string" == typeof cell) allFieldIds.add(cell);
+        const resolved = [];
+        for (const id of allFieldIds){
+            const f = parentEditor.getField({
+                id
+            });
+            if (f) resolved.push(f);
+        }
+        return resolved;
+    }, [
+        field,
+        parentEditor
+    ]);
+    const handleInsertField = useCallback((f)=>{
+        const existingField = parentEditor.getField({
+            id: f.id
+        });
+        if (!existingField) parentEditor.addField(f);
+    }, [
+        parentEditor
+    ]);
+    const handleRemoveField = useCallback((fieldId)=>{
+        parentEditor.removeField(fieldId);
+    }, [
+        parentEditor
+    ]);
+    const handleUpdateField = useCallback((f)=>{
+        parentEditor.updateField(f);
+    }, [
+        parentEditor
+    ]);
+    const addTab = useCallback(()=>{
+        const id = generateAlphaNumericLowerCaseId(8);
+        newTabId.current = id;
+        const newTab = {
+            id,
+            label: `Tab ${field.tabs.length + 1}`,
+            layout: []
+        };
+        onUpdate({
+            ...field,
+            tabs: [
+                ...field.tabs,
+                newTab
+            ]
+        });
+    }, [
+        field,
+        onUpdate
+    ]);
+    const handleDeleteTabs = useCallback(()=>{
+        showDeleteConfirmation(()=>{
+            onDelete();
+        });
+    }, [
+        onDelete,
+        showDeleteConfirmation
+    ]);
+    const editTabsSettings = useCallback(()=>{
+        showDialog({
+            title: "Tabs Settings",
+            description: "Configure the tabs and access permissions",
+            acceptLabel: "Save",
+            cancelLabel: "Cancel",
+            formData: {
+                label: field.label ?? "",
+                description: field.description ?? "",
+                help: field.help ?? "",
+                rules: field.rules ?? []
+            },
+            content: /*#__PURE__*/ react.createElement(TabsDialogContent, {
+                fieldOptions: fieldOptions
+            }),
+            onAccept: (data)=>{
+                onUpdate({
+                    ...field,
+                    label: data.label ?? "",
+                    description: data.description || null,
+                    help: data.help || null,
+                    rules: data.rules ?? []
+                });
+            }
+        });
+    }, [
+        field,
+        onUpdate
+    ]);
+    const resolvedParentFields = getAllParentFields();
+    return /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-between"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-row items-center"
+    }, /*#__PURE__*/ react.createElement(Heading, {
+        level: 6,
+        className: "text-nowrap"
+    }, field.label || "No label")), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "flex w-full text-neutral-strong"
+    }, "Tabs")), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-xs"
+    }, /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: editTabsSettings,
+        variant: "ghost",
+        size: "sm"
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+        onClick: handleDeleteTabs,
+        variant: "ghost",
+        size: "sm"
+    }))), field.tabs.length > 0 && /*#__PURE__*/ react.createElement(Accordion, null, field.tabs.map((tab, index)=>/*#__PURE__*/ react.createElement(TabItem, {
+            key: tab.id,
+            tab: tab,
+            index: index,
+            totalTabs: field.tabs.length,
+            field: field,
+            parentFields: resolvedParentFields,
+            onUpdate: onUpdate,
+            onInsertField: handleInsertField,
+            onRemoveField: handleRemoveField,
+            onUpdateField: handleUpdateField
+        }))), /*#__PURE__*/ react.createElement("div", {
+        className: "mt-sm flex justify-center"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        onClick: addTab,
+        text: "Add Tab",
+        icon: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null),
+        size: "sm"
+    })));
+};
+export { TabsLayoutEditor };
+
+//# sourceMappingURL=TabsLayoutEditor.js.map

package/presentation/fieldTypes/types/layout/TabsLayoutEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldTypes/types/layout/TabsLayoutEditor.js","sources":["../../../../../src/presentation/fieldTypes/types/layout/TabsLayoutEditor.tsx"],"sourcesContent":["import React, { useCallback, useRef, useEffect } from \"react\";\nimport { Accordion, Tabs, ScrollArea } from \"@webiny/admin-ui\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@webiny/icons/expand_less.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@webiny/icons/expand_more.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport type {\n    CmsTabLayoutField,\n    CmsTabLayoutTab,\n    CmsLayoutField,\n    CmsEditorFieldsLayout\n} from \"~/types.js\";\nimport { useConfirmationDialog, useDialogs } from \"@webiny/app-admin\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { IconButton } from \"@webiny/admin-ui\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { Input } from \"@webiny/admin-ui\";\nimport { Textarea } from \"@webiny/admin-ui\";\nimport { Heading } from \"@webiny/admin-ui\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { Bind } from \"@webiny/form\";\nimport type { CmsModelField } from \"~/types.js\";\nimport { FieldEditor } from \"~/admin/components/FieldEditor/index.js\";\nimport { IconPicker } from \"~/admin/components/IconPicker.js\";\nimport { useModelFieldEditor } from \"~/admin/hooks/index.js\";\nimport { PermissionsEditor } from \"~/admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.js\";\nimport { RulesEditor } from \"~/admin/components/FieldEditor/EditFieldDialog/RulesEditor/RulesEditor.js\";\nimport { useModelEditor } from \"~/admin/components/ContentModelEditor/useModelEditor.js\";\nimport type { FieldOption } from \"~/admin/components/ContentModelEditor/fieldOptions.js\";\n\ninterface TabsLayoutEditorProps {\n    field: CmsTabLayoutField;\n    onUpdate: (d: CmsLayoutField) => void;\n    onDelete: () => void;\n}\n\ninterface TabItemProps {\n    tab: CmsTabLayoutTab;\n    index: number;\n    totalTabs: number;\n    field: CmsTabLayoutField;\n    parentFields: CmsModelField[];\n    onUpdate: (d: CmsLayoutField) => void;\n    onInsertField: (field: CmsModelField) => void;\n    onRemoveField: (fieldId: string) => void;\n    onUpdateField: (field: CmsModelField) => void;\n}\n\nconst TabsSettings = () => {\n    return (\n        <Grid className={\"mt-md\"}>\n            <Grid.Column span={12}>\n                <Bind name={\"label\"}>\n                    <Input label={\"Label\"} />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <Bind name={\"description\"}>\n                    <Input label={\"Description\"} />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <Bind name={\"help\"}>\n                    <Textarea label={\"Help\"} />\n                </Bind>\n            </Grid.Column>\n        </Grid>\n    );\n};\n\nconst TabsDialogContent = ({ fieldOptions }: { fieldOptions: FieldOption[] }) => {\n    return (\n        <ScrollArea className=\"max-h-[70vh] flex flex-col\">\n            <Tabs\n                size={\"md\"}\n                separator\n                tabs={[\n                    <Tabs.Tab\n                        key={\"tabs\"}\n                        trigger={\"Tabs\"}\n                        value={\"tabs\"}\n                        content={<TabsSettings />}\n                    />,\n                    <Tabs.Tab\n                        key={\"permissions\"}\n                        trigger={\"Permissions\"}\n                        value={\"permissions\"}\n                        content={\n                            <div className={\"mt-md\"}>\n                                <PermissionsEditor />\n                            </div>\n                        }\n                    />,\n                    <Tabs.Tab\n                        key={\"rules\"}\n                        trigger={\"Rules\"}\n                        value={\"rules\"}\n                        content={\n                            <div className={\"mt-md\"}>\n                                <RulesEditor fieldOptions={fieldOptions} />\n                            </div>\n                        }\n                    />\n                ]}\n            />\n        </ScrollArea>\n    );\n};\n\nconst TabSettingsFields = () => {\n    return (\n        <Grid className={\"mt-md\"}>\n            <Grid.Column span={12}>\n                <Bind name={\"label\"}>\n                    <Input label={\"Label\"} />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <Bind name={\"icon\"}>\n                    <IconPicker label={\"Icon\"} />\n                </Bind>\n            </Grid.Column>\n        </Grid>\n    );\n};\n\nconst TabDialogContent = ({ fieldOptions }: { fieldOptions: FieldOption[] }) => {\n    return (\n        <Tabs\n            size={\"md\"}\n            separator\n            tabs={[\n                <Tabs.Tab\n                    key={\"tab\"}\n                    trigger={\"Tab\"}\n                    value={\"tab\"}\n                    content={<TabSettingsFields />}\n                />,\n                <Tabs.Tab\n                    key={\"permissions\"}\n                    trigger={\"Permissions\"}\n                    value={\"permissions\"}\n                    content={\n                        <div className={\"mt-md\"}>\n                            <PermissionsEditor />\n                        </div>\n                    }\n                />,\n                <Tabs.Tab\n                    key={\"rules\"}\n                    trigger={\"Rules\"}\n                    value={\"rules\"}\n                    content={\n                        <div className={\"mt-md\"}>\n                            <RulesEditor fieldOptions={fieldOptions} />\n                        </div>\n                    }\n                />\n            ]}\n        />\n    );\n};\n\nfunction createTabParent(tab: CmsTabLayoutTab): CmsModelField {\n    return {\n        id: tab.id,\n        fieldId: `tab:${tab.id}`,\n        type: \"tab\",\n        label: tab.label,\n        renderer: { name: \"\" }\n    } as CmsModelField;\n}\n\nfunction resolveTabFields(tab: CmsTabLayoutTab, parentFields: CmsModelField[]): CmsModelField[] {\n    const fieldIds = new Set<string>();\n    for (const row of tab.layout) {\n        for (const cell of row) {\n            if (typeof cell === \"string\") {\n                fieldIds.add(cell);\n            }\n        }\n    }\n    return parentFields.filter(f => fieldIds.has(f.id));\n}\n\nconst TabItem = ({\n    tab,\n    index,\n    totalTabs,\n    field,\n    parentFields,\n    onUpdate,\n    onInsertField,\n    onRemoveField,\n    onUpdateField\n}: TabItemProps) => {\n    const { fieldOptions } = useModelEditor();\n    const dialogs = useDialogs();\n\n    const { showConfirmation } = useConfirmationDialog({\n        title: \"Delete tab\",\n        message: `Are you sure you want to delete the tab \"${tab.label}\"? Fields inside this tab will be removed.`,\n        acceptLabel: \"Yes, delete tab\"\n    });\n\n    const isFirst = index === 0;\n    const isLast = index === totalTabs - 1;\n\n    const tabFields = resolveTabFields(tab, parentFields);\n\n    const handleFieldsChange = useCallback(\n        ({\n            fields: newFields,\n            layout: newLayout\n        }: {\n            fields: CmsModelField[];\n            layout: CmsEditorFieldsLayout;\n        }) => {\n            const oldFieldIds = new Set(tabFields.map(f => f.id));\n            const newFieldIds = new Set(newFields.map(f => f.id));\n\n            for (const f of newFields) {\n                if (!oldFieldIds.has(f.id)) {\n                    onInsertField(f);\n                }\n            }\n\n            for (const id of oldFieldIds) {\n                if (!newFieldIds.has(id)) {\n                    onRemoveField(id);\n                }\n            }\n\n            const oldFieldMap = new Map(tabFields.map(f => [f.id, f]));\n            for (const f of newFields) {\n                if (oldFieldMap.has(f.id) && oldFieldMap.get(f.id) !== f) {\n                    onUpdateField(f);\n                }\n            }\n\n            const updatedTabs = [...field.tabs];\n            updatedTabs[index] = { ...tab, layout: newLayout };\n            onUpdate({ ...field, tabs: updatedTabs });\n        },\n        [tab, index, field, tabFields, onUpdate, onInsertField, onRemoveField, onUpdateField]\n    );\n\n    const moveTabUp = useCallback(() => {\n        if (isFirst) {\n            return;\n        }\n        const tabs = [...field.tabs];\n        [tabs[index - 1], tabs[index]] = [tabs[index], tabs[index - 1]];\n        onUpdate({ ...field, tabs });\n    }, [field, index, isFirst, onUpdate]);\n\n    const moveTabDown = useCallback(() => {\n        if (isLast) {\n            return;\n        }\n        const tabs = [...field.tabs];\n        [tabs[index + 1], tabs[index]] = [tabs[index], tabs[index + 1]];\n        onUpdate({ ...field, tabs });\n    }, [field, index, isLast, onUpdate]);\n\n    const deleteTab = useCallback(() => {\n        showConfirmation(() => {\n            for (const row of tab.layout) {\n                for (const cell of row) {\n                    if (typeof cell === \"string\") {\n                        onRemoveField(cell);\n                    }\n                }\n            }\n\n            const tabs = field.tabs.filter((_, i) => i !== index);\n            onUpdate({ ...field, tabs });\n        });\n    }, [field, index, tab, onUpdate, onRemoveField, showConfirmation]);\n\n    const editTab = useCallback(() => {\n        dialogs.showDialog({\n            title: \"Tab Settings\",\n            description: \"Configure the tab and access permissions\",\n            acceptLabel: \"Save\",\n            cancelLabel: \"Cancel\",\n            formData: {\n                label: tab.label,\n                icon: tab.icon ?? \"\",\n                rules: tab.rules ?? []\n            },\n            content: <TabDialogContent fieldOptions={fieldOptions} />,\n            onAccept: data => {\n                const updatedTabs = [...field.tabs];\n                updatedTabs[index] = {\n                    ...tab,\n                    label: data.label ?? tab.label,\n                    icon: data.icon || undefined,\n                    rules: data.rules ?? []\n                };\n                onUpdate({ ...field, tabs: updatedTabs });\n            }\n        });\n    }, [dialogs, field, index, tab, onUpdate]);\n\n    return (\n        <Accordion.Item\n            title={tab.label}\n            className={\"[&>[data-state='open']]:!overflow-visible\"}\n            description={`${tabFields.length} field${tabFields.length !== 1 ? \"s\" : \"\"}`}\n            actions={\n                <>\n                    <Accordion.Item.Action\n                        icon={<ArrowUpIcon />}\n                        onClick={moveTabUp}\n                        disabled={isFirst}\n                    />\n                    <Accordion.Item.Action\n                        icon={<ArrowDownIcon />}\n                        onClick={moveTabDown}\n                        disabled={isLast}\n                    />\n                    <Accordion.Item.Action.Separator />\n                    <Accordion.Item.Action icon={<EditIcon />} onClick={editTab} />\n                    <Accordion.Item.Action\n                        icon={<DeleteIcon />}\n                        onClick={deleteTab}\n                        disabled={totalTabs <= 1}\n                    />\n                </>\n            }\n        >\n            <FieldEditor\n                parent={createTabParent(tab)}\n                fields={tabFields}\n                layout={tab.layout}\n                onChange={handleFieldsChange}\n            />\n        </Accordion.Item>\n    );\n};\n\nexport const TabsLayoutEditor = ({ field, onUpdate, onDelete }: TabsLayoutEditorProps) => {\n    const parentEditor = useModelFieldEditor();\n    const { fieldOptions } = useModelEditor();\n    const { showDialog } = useDialogs();\n    const newTabId = useRef<string | undefined>(undefined);\n\n    const { showConfirmation: showDeleteConfirmation } = useConfirmationDialog({\n        title: \"Delete tabs\",\n        message:\n            \"Are you sure you want to delete this tabs element? All fields inside the tabs will be removed.\",\n        acceptLabel: \"Yes, delete\"\n    });\n\n    useEffect(() => {\n        newTabId.current = undefined;\n    }, []);\n\n    const getAllParentFields = useCallback((): CmsModelField[] => {\n        const allFieldIds = new Set<string>();\n        for (const tab of field.tabs) {\n            for (const row of tab.layout) {\n                for (const cell of row) {\n                    if (typeof cell === \"string\") {\n                        allFieldIds.add(cell);\n                    }\n                }\n            }\n        }\n\n        const resolved: CmsModelField[] = [];\n        for (const id of allFieldIds) {\n            const f = parentEditor.getField({ id });\n            if (f) {\n                resolved.push(f);\n            }\n        }\n        return resolved;\n    }, [field, parentEditor]);\n\n    const handleInsertField = useCallback(\n        (f: CmsModelField) => {\n            const existingField = parentEditor.getField({ id: f.id });\n            if (!existingField) {\n                parentEditor.addField(f);\n            }\n        },\n        [parentEditor]\n    );\n\n    const handleRemoveField = useCallback(\n        (fieldId: string) => {\n            parentEditor.removeField(fieldId);\n        },\n        [parentEditor]\n    );\n\n    const handleUpdateField = useCallback(\n        (f: CmsModelField) => {\n            parentEditor.updateField(f);\n        },\n        [parentEditor]\n    );\n\n    const addTab = useCallback(() => {\n        const id = generateAlphaNumericLowerCaseId(8);\n        newTabId.current = id;\n        const newTab: CmsTabLayoutTab = {\n            id,\n            label: `Tab ${field.tabs.length + 1}`,\n            layout: []\n        };\n        onUpdate({ ...field, tabs: [...field.tabs, newTab] });\n    }, [field, onUpdate]);\n\n    const handleDeleteTabs = useCallback(() => {\n        showDeleteConfirmation(() => {\n            onDelete();\n        });\n    }, [onDelete, showDeleteConfirmation]);\n\n    const editTabsSettings = useCallback(() => {\n        showDialog({\n            title: \"Tabs Settings\",\n            description: \"Configure the tabs and access permissions\",\n            acceptLabel: \"Save\",\n            cancelLabel: \"Cancel\",\n            formData: {\n                label: field.label ?? \"\",\n                description: field.description ?? \"\",\n                help: field.help ?? \"\",\n                rules: field.rules ?? []\n            },\n            content: <TabsDialogContent fieldOptions={fieldOptions} />,\n            onAccept: data => {\n                onUpdate({\n                    ...field,\n                    label: data.label ?? \"\",\n                    description: data.description || null,\n                    help: data.help || null,\n                    rules: data.rules ?? []\n                });\n            }\n        });\n    }, [field, onUpdate]);\n\n    const resolvedParentFields = getAllParentFields();\n\n    return (\n        <div>\n            <div className={\"flex justify-between\"}>\n                <div className={\"flex flex-col\"}>\n                    <div className={\"flex flex-row items-center\"}>\n                        <Heading level={6} className={\"text-nowrap\"}>\n                            {field.label || \"No label\"}\n                        </Heading>\n                    </div>\n                    <Text size=\"sm\" className={\"flex w-full text-neutral-strong\"}>\n                        Tabs\n                    </Text>\n                </div>\n                <div className={\"flex items-center gap-xs\"}>\n                    <IconButton\n                        icon={<EditIcon />}\n                        onClick={editTabsSettings}\n                        variant={\"ghost\"}\n                        size={\"sm\"}\n                    />\n                    <IconButton\n                        icon={<DeleteIcon />}\n                        onClick={handleDeleteTabs}\n                        variant={\"ghost\"}\n                        size={\"sm\"}\n                    />\n                </div>\n            </div>\n            {field.tabs.length > 0 && (\n                <Accordion>\n                    {field.tabs.map((tab, index) => (\n                        <TabItem\n                            key={tab.id}\n                            tab={tab}\n                            index={index}\n                            totalTabs={field.tabs.length}\n                            field={field}\n                            parentFields={resolvedParentFields}\n                            onUpdate={onUpdate}\n                            onInsertField={handleInsertField}\n                            onRemoveField={handleRemoveField}\n                            onUpdateField={handleUpdateField}\n                        />\n                    ))}\n                </Accordion>\n            )}\n            <div className={\"mt-sm flex justify-center\"}>\n                <Button onClick={addTab} text={\"Add Tab\"} icon={<AddIcon />} size={\"sm\"} />\n            </div>\n        </div>\n    );\n};\n"],"names":["TabsSettings","Grid","Bind","Input","Textarea","TabsDialogContent","fieldOptions","ScrollArea","Tabs","PermissionsEditor","RulesEditor","TabSettingsFields","IconPicker","TabDialogContent","createTabParent","tab","resolveTabFields","parentFields","fieldIds","Set","row","cell","f","TabItem","index","totalTabs","field","onUpdate","onInsertField","onRemoveField","onUpdateField","useModelEditor","dialogs","useDialogs","showConfirmation","useConfirmationDialog","isFirst","isLast","tabFields","handleFieldsChange","useCallback","newFields","newLayout","oldFieldIds","newFieldIds","id","oldFieldMap","Map","updatedTabs","moveTabUp","tabs","moveTabDown","deleteTab","_","i","editTab","data","undefined","Accordion","ArrowUpIcon","ArrowDownIcon","EditIcon","DeleteIcon","FieldEditor","TabsLayoutEditor","onDelete","parentEditor","useModelFieldEditor","showDialog","newTabId","useRef","showDeleteConfirmation","useEffect","getAllParentFields","allFieldIds","resolved","handleInsertField","existingField","handleRemoveField","fieldId","handleUpdateField","addTab","generateAlphaNumericLowerCaseId","newTab","handleDeleteTabs","editTabsSettings","resolvedParentFields","Heading","Text","IconButton","Button","AddIcon"],"mappings":"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"}

package/presentation/fieldTypes/types/layout/TabsLayoutFieldType.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import type { CmsModelField } from "../../../../types.js";
+import { type ICmsLayoutFieldType } from "../../abstractions.js";
+declare class TabsLayoutFieldTypeImpl implements ICmsLayoutFieldType {
+    type: string;
+    label: string;
+    description: string;
+    icon: React.ReactElement;
+    canEditSettings: boolean;
+    createField(): {
+        type: "tabs";
+        label: string;
+        description: null;
+        help: null;
+        tabs: {
+            id: string;
+            label: string;
+            layout: never[];
+        }[];
+    };
+    collectFields({ field, getField }: Parameters<NonNullable<ICmsLayoutFieldType["collectFields"]>>[0]): CmsModelField[];
+    getFieldLabelPrefixes({ field }: Parameters<NonNullable<ICmsLayoutFieldType["getFieldLabelPrefixes"]>>[0]): Record<string, string>;
+    render({ field, onUpdate, onDelete }: Parameters<ICmsLayoutFieldType["render"]>[0]): React.JSX.Element;
+}
+export declare const TabsLayoutFieldType: typeof TabsLayoutFieldTypeImpl & {
+    __abstraction: import("@webiny/di").Abstraction<ICmsLayoutFieldType>;
+};
+export {};

package/presentation/fieldTypes/types/layout/TabsLayoutFieldType.js

@@ -0,0 +1,66 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/tab.svg";
+import { generateAlphaNumericLowerCaseId } from "@webiny/utils";
+import { CmsLayoutFieldType } from "../../abstractions.js";
+import { TabsLayoutEditor } from "./TabsLayoutEditor.js";
+class TabsLayoutFieldTypeImpl {
+    createField() {
+        return {
+            type: "tabs",
+            label: "Tabs",
+            description: null,
+            help: null,
+            tabs: [
+                {
+                    id: generateAlphaNumericLowerCaseId(8),
+                    label: "Tab 1",
+                    layout: []
+                }
+            ]
+        };
+    }
+    collectFields({ field, getField }) {
+        const tabs = field.tabs;
+        if (!tabs) return [];
+        const result = [];
+        for (const tab of tabs)for (const row of tab.layout)for (const cell of row)if ("string" == typeof cell) {
+            const f = getField(cell);
+            if (f) result.push(f);
+        }
+        return result;
+    }
+    getFieldLabelPrefixes({ field }) {
+        const tabsField = field;
+        const tabs = tabsField.tabs;
+        if (!tabs) return {};
+        const fieldLabel = tabsField.label || "Tabs";
+        const prefixes = {};
+        for (const tab of tabs){
+            const tabLabel = tab.label || "Tab";
+            const prefix = `${fieldLabel} › ${tabLabel}`;
+            for (const row of tab.layout)for (const cell of row)if ("string" == typeof cell) prefixes[cell] = prefix;
+        }
+        return prefixes;
+    }
+    render({ field, onUpdate, onDelete }) {
+        return /*#__PURE__*/ react.createElement(TabsLayoutEditor, {
+            field: field,
+            onUpdate: onUpdate,
+            onDelete: onDelete
+        });
+    }
+    constructor(){
+        this.type = "tabs";
+        this.label = "Tabs";
+        this.description = "Group fields into tabs.";
+        this.icon = /*#__PURE__*/ react.createElement(ReactComponent, null);
+        this.canEditSettings = true;
+    }
+}
+const TabsLayoutFieldType = CmsLayoutFieldType.createImplementation({
+    implementation: TabsLayoutFieldTypeImpl,
+    dependencies: []
+});
+export { TabsLayoutFieldType };
+
+//# sourceMappingURL=TabsLayoutFieldType.js.map

package/presentation/fieldTypes/types/layout/TabsLayoutFieldType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldTypes/types/layout/TabsLayoutFieldType.js","sources":["../../../../../src/presentation/fieldTypes/types/layout/TabsLayoutFieldType.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as TabsIcon } from \"@webiny/icons/tab.svg\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport type { CmsTabLayoutField, CmsLayoutField, CmsModelField } from \"~/types.js\";\nimport { CmsLayoutFieldType, type ICmsLayoutFieldType } from \"../../abstractions.js\";\nimport { TabsLayoutEditor } from \"./TabsLayoutEditor.js\";\n\nclass TabsLayoutFieldTypeImpl implements ICmsLayoutFieldType {\n    type = \"tabs\";\n    label = \"Tabs\";\n    description = \"Group fields into tabs.\";\n    icon = (<TabsIcon />) as React.ReactElement;\n    canEditSettings = true;\n\n    createField() {\n        return {\n            type: \"tabs\" as const,\n            label: \"Tabs\",\n            description: null,\n            help: null,\n            tabs: [{ id: generateAlphaNumericLowerCaseId(8), label: \"Tab 1\", layout: [] }]\n        };\n    }\n\n    collectFields({\n        field,\n        getField\n    }: Parameters<NonNullable<ICmsLayoutFieldType[\"collectFields\"]>>[0]): CmsModelField[] {\n        const tabs = (field as CmsTabLayoutField).tabs;\n        if (!tabs) {\n            return [];\n        }\n        const result: CmsModelField[] = [];\n        for (const tab of tabs) {\n            for (const row of tab.layout) {\n                for (const cell of row) {\n                    if (typeof cell === \"string\") {\n                        const f = getField(cell);\n                        if (f) {\n                            result.push(f);\n                        }\n                    }\n                }\n            }\n        }\n        return result;\n    }\n\n    getFieldLabelPrefixes({\n        field\n    }: Parameters<NonNullable<ICmsLayoutFieldType[\"getFieldLabelPrefixes\"]>>[0]): Record<\n        string,\n        string\n    > {\n        const tabsField = field as CmsTabLayoutField;\n        const tabs = tabsField.tabs;\n        if (!tabs) {\n            return {};\n        }\n        const fieldLabel = tabsField.label || \"Tabs\";\n        const prefixes: Record<string, string> = {};\n        for (const tab of tabs) {\n            const tabLabel = tab.label || \"Tab\";\n            const prefix = `${fieldLabel} › ${tabLabel}`;\n            for (const row of tab.layout) {\n                for (const cell of row) {\n                    if (typeof cell === \"string\") {\n                        prefixes[cell] = prefix;\n                    }\n                }\n            }\n        }\n        return prefixes;\n    }\n\n    render({ field, onUpdate, onDelete }: Parameters<ICmsLayoutFieldType[\"render\"]>[0]) {\n        return (\n            <TabsLayoutEditor\n                field={field as CmsTabLayoutField}\n                onUpdate={onUpdate as (d: CmsLayoutField) => void}\n                onDelete={onDelete}\n            />\n        );\n    }\n}\n\nexport const TabsLayoutFieldType = CmsLayoutFieldType.createImplementation({\n    implementation: TabsLayoutFieldTypeImpl,\n    dependencies: []\n});\n"],"names":["TabsLayoutFieldTypeImpl","generateAlphaNumericLowerCaseId","field","getField","tabs","result","tab","row","cell","f","tabsField","fieldLabel","prefixes","tabLabel","prefix","onUpdate","onDelete","TabsLayoutEditor","TabsIcon","TabsLayoutFieldType","CmsLayoutFieldType"],"mappings":";;;;;AAOA,MAAMA;IAOF,cAAc;QACV,OAAO;YACH,MAAM;YACN,OAAO;YACP,aAAa;YACb,MAAM;YACN,MAAM;gBAAC;oBAAE,IAAIC,gCAAgC;oBAAI,OAAO;oBAAS,QAAQ,EAAE;gBAAC;aAAE;QAClF;IACJ;IAEA,cAAc,EACVC,KAAK,EACLC,QAAQ,EACuD,EAAmB;QAClF,MAAMC,OAAQF,MAA4B,IAAI;QAC9C,IAAI,CAACE,MACD,OAAO,EAAE;QAEb,MAAMC,SAA0B,EAAE;QAClC,KAAK,MAAMC,OAAOF,KACd,KAAK,MAAMG,OAAOD,IAAI,MAAM,CACxB,KAAK,MAAME,QAAQD,IACf,IAAI,AAAgB,YAAhB,OAAOC,MAAmB;YAC1B,MAAMC,IAAIN,SAASK;YACnB,IAAIC,GACAJ,OAAO,IAAI,CAACI;QAEpB;QAIZ,OAAOJ;IACX;IAEA,sBAAsB,EAClBH,KAAK,EACkE,EAGzE;QACE,MAAMQ,YAAYR;QAClB,MAAME,OAAOM,UAAU,IAAI;QAC3B,IAAI,CAACN,MACD,OAAO,CAAC;QAEZ,MAAMO,aAAaD,UAAU,KAAK,IAAI;QACtC,MAAME,WAAmC,CAAC;QAC1C,KAAK,MAAMN,OAAOF,KAAM;YACpB,MAAMS,WAAWP,IAAI,KAAK,IAAI;YAC9B,MAAMQ,SAAS,GAAGH,WAAW,GAAG,EAAEE,UAAU;YAC5C,KAAK,MAAMN,OAAOD,IAAI,MAAM,CACxB,KAAK,MAAME,QAAQD,IACf,IAAI,AAAgB,YAAhB,OAAOC,MACPI,QAAQ,CAACJ,KAAK,GAAGM;QAIjC;QACA,OAAOF;IACX;IAEA,OAAO,EAAEV,KAAK,EAAEa,QAAQ,EAAEC,QAAQ,EAAgD,EAAE;QAChF,OAAO,WAAP,GACI,oBAACC,kBAAgBA;YACb,OAAOf;YACP,UAAUa;YACV,UAAUC;;IAGtB;;aA3EA,IAAI,GAAG;aACP,KAAK,GAAG;aACR,WAAW,GAAG;aACd,IAAI,GAAG,WAAP,GAAQ,oBAACE,gBAAQA;aACjB,eAAe,GAAG;;AAwEtB;AAEO,MAAMC,sBAAsBC,mBAAmB,oBAAoB,CAAC;IACvE,gBAAgBpB;IAChB,cAAc,EAAE;AACpB"}

package/presentation/fieldTypes/types/object/ObjectFields.js

@@ -0,0 +1,28 @@
+import react, { useCallback } from "react";
+import { set } from "dot-prop-immutable";
+import { FieldEditor, useModelFieldEditor } from "../../../../admin/components/FieldEditor/index.js";
+const ObjectFields = ({ field })=>{
+    const { getField, updateField } = useModelFieldEditor();
+    const onChange = useCallback(({ fields, layout })=>{
+        const currentField = getField({
+            id: field.id
+        });
+        const updatedField = set(currentField, "settings", (settings)=>({
+                ...settings,
+                fields,
+                layout
+            }));
+        updateField(updatedField);
+    }, [
+        field
+    ]);
+    return /*#__PURE__*/ react.createElement(FieldEditor, {
+        parent: field,
+        fields: (field.settings ? field.settings.fields : null) || [],
+        layout: (field.settings ? field.settings.layout : null) || [],
+        onChange: onChange
+    });
+};
+export { ObjectFields };
+
+//# sourceMappingURL=ObjectFields.js.map

package/presentation/fieldTypes/types/object/ObjectFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldTypes/types/object/ObjectFields.js","sources":["../../../../../src/presentation/fieldTypes/types/object/ObjectFields.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { set } from \"dot-prop-immutable\";\nimport { FieldEditor, useModelFieldEditor } from \"~/admin/components/FieldEditor/index.js\";\nimport type { CmsModelField, CmsModel } from \"~/types.js\";\n\ninterface ObjectFieldsProps {\n    field: CmsModelField;\n}\n\nexport const ObjectFields = ({ field }: ObjectFieldsProps) => {\n    const { getField, updateField } = useModelFieldEditor();\n\n    const onChange = useCallback(\n        ({ fields, layout }: Pick<CmsModel, \"fields\" | \"layout\">) => {\n            const currentField = getField({ id: field.id });\n            const updatedField = set(\n                currentField,\n                `settings`,\n                (settings: CmsModel[\"settings\"]): Partial<CmsModel> => {\n                    return { ...settings, fields, layout };\n                }\n            );\n            updateField(updatedField);\n        },\n        [field]\n    );\n\n    return (\n        <FieldEditor\n            parent={field}\n            fields={(field.settings ? field.settings.fields : null) || []}\n            layout={(field.settings ? field.settings.layout : null) || []}\n            onChange={onChange}\n        />\n    );\n};\n"],"names":["ObjectFields","field","getField","updateField","useModelFieldEditor","onChange","useCallback","fields","layout","currentField","updatedField","set","settings","FieldEditor"],"mappings":";;;AASO,MAAMA,eAAe,CAAC,EAAEC,KAAK,EAAqB;IACrD,MAAM,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGC;IAElC,MAAMC,WAAWC,YACb,CAAC,EAAEC,MAAM,EAAEC,MAAM,EAAuC;QACpD,MAAMC,eAAeP,SAAS;YAAE,IAAID,MAAM,EAAE;QAAC;QAC7C,MAAMS,eAAeC,IACjBF,cACA,YACA,CAACG,WACU;gBAAE,GAAGA,QAAQ;gBAAEL;gBAAQC;YAAO;QAG7CL,YAAYO;IAChB,GACA;QAACT;KAAM;IAGX,OAAO,WAAP,GACI,oBAACY,aAAWA;QACR,QAAQZ;QACR,QAASA,AAAAA,CAAAA,MAAM,QAAQ,GAAGA,MAAM,QAAQ,CAAC,MAAM,GAAG,IAAG,KAAM,EAAE;QAC7D,QAASA,AAAAA,CAAAA,MAAM,QAAQ,GAAGA,MAAM,QAAQ,CAAC,MAAM,GAAG,IAAG,KAAM,EAAE;QAC7D,UAAUI;;AAGtB"}