@webiny/app-headless-cms 6.4.5 → 6.6.0-alpha.0

package/presentation/modelGroup/ModelGroupPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/modelGroup/ModelGroupPresenter.js","sources":["../../../src/presentation/modelGroup/ModelGroupPresenter.ts"],"sourcesContent":["import { makeAutoObservable, runInAction, computed } from \"mobx\";\nimport slugify from \"slugify\";\nimport { ListPresenter } from \"@webiny/app-admin/presentation/listPresenter/abstractions.js\";\nimport { FormModelFactory } from \"@webiny/app-admin/features/formModel/abstractions.js\";\nimport type { IFormModel } from \"@webiny/app-admin/features/formModel/abstractions.js\";\nimport type { ModelGroupDto } from \"~/features/modelGroup/listModelGroups/abstractions.js\";\nimport { ListModelGroupsUseCase } from \"~/features/modelGroup/listModelGroups/abstractions.js\";\nimport { GetModelGroupUseCase } from \"~/features/modelGroup/getModelGroup/abstractions.js\";\nimport { CreateModelGroupUseCase } from \"~/features/modelGroup/createModelGroup/abstractions.js\";\nimport { UpdateModelGroupUseCase } from \"~/features/modelGroup/updateModelGroup/abstractions.js\";\nimport { DeleteModelGroupUseCase } from \"~/features/modelGroup/deleteModelGroup/abstractions.js\";\nimport { ModelGroupsCache } from \"~/features/modelGroup/abstractions.js\";\nimport {\n    ModelGroupPresenter as Abstraction,\n    type IModelGroupPresenter,\n    type IModelGroupPresenterViewModel\n} from \"./abstractions.js\";\nimport { ModelGroupDataSource } from \"./ModelGroupDataSource.js\";\n\nfunction extractIconName(icon: unknown): string {\n    if (icon !== null && typeof icon === \"object\" && \"name\" in icon) {\n        return (icon as { name: string }).name;\n    }\n    if (typeof icon === \"string\") {\n        return icon;\n    }\n    return \"\";\n}\n\nfunction toIconValue(name: string): { type: string; name: string } {\n    return { type: \"icon\", name };\n}\n\nclass ModelGroupPresenterImpl implements IModelGroupPresenter {\n    private selectedGroup: ModelGroupDto | null = null;\n    private loading = false;\n    private saving = false;\n    private showForm = false;\n    private form: IFormModel;\n\n    constructor(\n        private listPresenter: ListPresenter.Interface<ModelGroupDto>,\n        private formModelFactory: FormModelFactory.Interface,\n        private listModelGroupsUseCase: ListModelGroupsUseCase.Interface,\n        private getRoleUseCase: GetModelGroupUseCase.Interface,\n        private createModelGroupUseCase: CreateModelGroupUseCase.Interface,\n        private updateModelGroupUseCase: UpdateModelGroupUseCase.Interface,\n        private deleteModelGroupUseCase: DeleteModelGroupUseCase.Interface,\n        private cache: ModelGroupsCache.Interface\n    ) {\n        this.form = this.buildForm(false, false);\n        makeAutoObservable<\n            ModelGroupPresenterImpl,\n            | \"formModelFactory\"\n            | \"listModelGroupsUseCase\"\n            | \"getRoleUseCase\"\n            | \"createModelGroupUseCase\"\n            | \"updateModelGroupUseCase\"\n            | \"deleteModelGroupUseCase\"\n            | \"cache\"\n        >(this, {\n            formModelFactory: false,\n            listModelGroupsUseCase: false,\n            getRoleUseCase: false,\n            createModelGroupUseCase: false,\n            updateModelGroupUseCase: false,\n            deleteModelGroupUseCase: false,\n            cache: false,\n            vm: computed\n        });\n    }\n\n    get vm(): IModelGroupPresenterViewModel {\n        const group = this.selectedGroup;\n        const isPluginGroup = group !== null && (group.plugin ?? false);\n\n        return {\n            selectedGroup: this.selectedGroup,\n            loading: this.loading,\n            saving: this.saving,\n            showForm: this.showForm,\n            canModify: !isPluginGroup,\n            isPluginGroup,\n            form: this.form.vm\n        };\n    }\n\n    get list(): ListPresenter.Interface<ModelGroupDto> {\n        return this.listPresenter;\n    }\n\n    init(): void {\n        const dataSource = new ModelGroupDataSource(this.listModelGroupsUseCase, this.cache);\n\n        this.listPresenter.init({\n            dataSource,\n            initialSort: { field: \"createdOn\", direction: \"DESC\" },\n            limit: 1000\n        });\n    }\n\n    async selectGroup(id: string): Promise<void> {\n        runInAction(() => {\n            this.loading = true;\n            this.showForm = true;\n        });\n\n        try {\n            const group = await this.getRoleUseCase.execute(id);\n            const isPluginGroup = group.plugin ?? false;\n            const canModify = !isPluginGroup;\n\n            runInAction(() => {\n                this.selectedGroup = group;\n                this.form = this.buildForm(false, canModify);\n                this.form.setData({\n                    name: group.name,\n                    slug: group.slug,\n                    description: group.description,\n                    icon: extractIconName(group.icon)\n                });\n            });\n        } finally {\n            runInAction(() => {\n                this.loading = false;\n            });\n        }\n    }\n\n    createNew(): void {\n        this.selectedGroup = null;\n        this.form = this.buildForm(true, true);\n        this.form.setData({ icon: \"fas/star\", description: \"\" });\n        this.showForm = true;\n    }\n\n    deselect(): void {\n        this.selectedGroup = null;\n        this.showForm = false;\n    }\n\n    async save(): Promise<ModelGroupDto | null> {\n        const data = await this.form.submit<ModelGroupDto>();\n        if (!data) {\n            return null;\n        }\n\n        runInAction(() => {\n            this.saving = true;\n        });\n\n        try {\n            const isUpdate = this.selectedGroup !== null && this.selectedGroup.createdOn;\n\n            const iconValue = toIconValue(data.icon as unknown as string);\n\n            if (isUpdate) {\n                const group = await this.updateModelGroupUseCase.execute({\n                    id: this.selectedGroup!.id,\n                    name: data.name as unknown as string,\n                    slug: this.selectedGroup!.slug,\n                    description: data.description as unknown as string,\n                    icon: iconValue as unknown as string\n                });\n                runInAction(() => {\n                    this.selectedGroup = group;\n                });\n                return group;\n            } else {\n                const group = await this.createModelGroupUseCase.execute({\n                    name: data.name as unknown as string,\n                    slug: data.slug as unknown as string,\n                    description: data.description as unknown as string,\n                    icon: iconValue as unknown as string\n                });\n                runInAction(() => {\n                    this.selectedGroup = group;\n                    this.form = this.buildForm(false, true);\n                    this.form.setData({\n                        name: group.name,\n                        slug: group.slug,\n                        description: group.description,\n                        icon: extractIconName(group.icon)\n                    });\n                });\n                return group;\n            }\n        } catch {\n            return null;\n        } finally {\n            runInAction(() => {\n                this.saving = false;\n            });\n        }\n    }\n\n    async deleteGroup(id: string): Promise<void> {\n        await this.deleteModelGroupUseCase.execute(id);\n\n        runInAction(() => {\n            if (this.selectedGroup !== null && this.selectedGroup.id === id) {\n                this.selectedGroup = null;\n                this.showForm = false;\n            }\n        });\n    }\n\n    private buildForm(isNew: boolean, canModify: boolean): IFormModel {\n        return this.formModelFactory.create({\n            fields: fields => ({\n                name: fields\n                    .text()\n                    .label(\"Name\")\n                    .required(\"Name is required.\")\n                    .disabled(!canModify)\n                    .onBlur((value, { form }) => {\n                        const slugValue = form.field(\"slug\").getValue();\n                        if (slugValue || !value) {\n                            return;\n                        }\n                        form.field(\"slug\").setValue(\n                            slugify(String(value), {\n                                replacement: \"-\",\n                                lower: true,\n                                remove: /[*#?<>_{}[\\]+~.()'\"!:;@]/g,\n                                trim: false\n                            })\n                        );\n                    }),\n                slug: fields\n                    .text()\n                    .label(\"Slug\")\n                    .required(\"Slug is required.\")\n                    .disabled(!isNew || !canModify),\n                icon: fields\n                    .text()\n                    .label(\"Group icon\")\n                    .required(\"Icon is required.\")\n                    .disabled(!canModify)\n                    .renderer(\"cmsIconPicker\"),\n                description: fields\n                    .text()\n                    .label(\"Description\")\n                    .defaultValue(\"\")\n                    .renderer(\"textarea\")\n                    .disabled(!canModify)\n            }),\n            layout: layout => [\n                layout.row(\"name\"),\n                layout.row(\"slug\"),\n                layout.row(\"icon\"),\n                layout.row(\"description\")\n            ]\n        });\n    }\n}\n\nexport const ModelGroupPresenter = Abstraction.createImplementation({\n    implementation: ModelGroupPresenterImpl,\n    dependencies: [\n        ListPresenter,\n        FormModelFactory,\n        ListModelGroupsUseCase,\n        GetModelGroupUseCase,\n        CreateModelGroupUseCase,\n        UpdateModelGroupUseCase,\n        DeleteModelGroupUseCase,\n        ModelGroupsCache\n    ]\n});\n"],"names":["extractIconName","icon","toIconValue","name","ModelGroupPresenterImpl","listPresenter","formModelFactory","listModelGroupsUseCase","getRoleUseCase","createModelGroupUseCase","updateModelGroupUseCase","deleteModelGroupUseCase","cache","makeAutoObservable","computed","group","isPluginGroup","dataSource","ModelGroupDataSource","id","runInAction","canModify","data","isUpdate","iconValue","isNew","fields","value","form","slugValue","slugify","String","layout","ModelGroupPresenter","Abstraction","ListPresenter","FormModelFactory","ListModelGroupsUseCase","GetModelGroupUseCase","CreateModelGroupUseCase","UpdateModelGroupUseCase","DeleteModelGroupUseCase","ModelGroupsCache"],"mappings":"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"}

package/presentation/modelGroup/abstractions.d.ts

@@ -0,0 +1,27 @@
+import type { IFormVM } from "@webiny/app-admin/features/formModel/abstractions.js";
+import type { IListPresenter } from "@webiny/app-admin/presentation/listPresenter/abstractions.js";
+import type { ModelGroupDto } from "../../features/modelGroup/listModelGroups/abstractions.js";
+export interface IModelGroupPresenterViewModel {
+    selectedGroup: ModelGroupDto | null;
+    loading: boolean;
+    saving: boolean;
+    showForm: boolean;
+    canModify: boolean;
+    isPluginGroup: boolean;
+    form: IFormVM;
+}
+export interface IModelGroupPresenter {
+    readonly vm: IModelGroupPresenterViewModel;
+    readonly list: IListPresenter<ModelGroupDto>;
+    init(): void;
+    selectGroup(id: string): Promise<void>;
+    createNew(): void;
+    deselect(): void;
+    save(): Promise<ModelGroupDto | null>;
+    deleteGroup(id: string): Promise<void>;
+}
+export declare const ModelGroupPresenter: import("@webiny/di").Abstraction<IModelGroupPresenter>;
+export declare namespace ModelGroupPresenter {
+    type Interface = IModelGroupPresenter;
+    type ViewModel = IModelGroupPresenterViewModel;
+}

package/presentation/modelGroup/abstractions.js

@@ -0,0 +1,5 @@
+import { createAbstraction } from "@webiny/feature/admin";
+const ModelGroupPresenter = createAbstraction("CmsModelGroup/Presenter");
+export { ModelGroupPresenter };
+
+//# sourceMappingURL=abstractions.js.map

package/presentation/modelGroup/abstractions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/modelGroup/abstractions.js","sources":["../../../src/presentation/modelGroup/abstractions.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type { IFormVM } from \"@webiny/app-admin/features/formModel/abstractions.js\";\nimport type { IListPresenter } from \"@webiny/app-admin/presentation/listPresenter/abstractions.js\";\nimport type { ModelGroupDto } from \"~/features/modelGroup/listModelGroups/abstractions.js\";\n\nexport interface IModelGroupPresenterViewModel {\n    selectedGroup: ModelGroupDto | null;\n    loading: boolean;\n    saving: boolean;\n    showForm: boolean;\n    canModify: boolean;\n    isPluginGroup: boolean;\n    form: IFormVM;\n}\n\nexport interface IModelGroupPresenter {\n    readonly vm: IModelGroupPresenterViewModel;\n    readonly list: IListPresenter<ModelGroupDto>;\n    init(): void;\n    selectGroup(id: string): Promise<void>;\n    createNew(): void;\n    deselect(): void;\n    save(): Promise<ModelGroupDto | null>;\n    deleteGroup(id: string): Promise<void>;\n}\n\nexport const ModelGroupPresenter =\n    createAbstraction<IModelGroupPresenter>(\"CmsModelGroup/Presenter\");\n\nexport namespace ModelGroupPresenter {\n    export type Interface = IModelGroupPresenter;\n    export type ViewModel = IModelGroupPresenterViewModel;\n}\n"],"names":["ModelGroupPresenter","createAbstraction"],"mappings":";AA0BO,MAAMA,sBACTC,kBAAwC"}

package/presentation/modelGroup/components/ContentModelGroups.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const ContentModelGroups: (() => React.JSX.Element) & {
+    displayName: string;
+};
+export default ContentModelGroups;

package/presentation/modelGroup/components/ContentModelGroups.js

@@ -0,0 +1,33 @@
+import react, { useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import { useFeature } from "@webiny/app";
+import { LeftPanel, RightPanel, SplitView, useRoute } from "@webiny/app-admin";
+import { ModelGroupPresenterFeature } from "../feature.js";
+import { Routes } from "../../../routes.js";
+import { ContentModelGroupsDataList } from "./ContentModelGroupsDataList.js";
+import { ContentModelGroupsForm } from "./ContentModelGroupsForm.js";
+const ContentModelGroups = observer(()=>{
+    const { presenter } = useFeature(ModelGroupPresenterFeature);
+    const { route } = useRoute(Routes.ContentModelGroups.List);
+    useEffect(()=>{
+        presenter.init();
+    }, [
+        presenter
+    ]);
+    return /*#__PURE__*/ react.createElement(SplitView, null, /*#__PURE__*/ react.createElement(LeftPanel, {
+        span: 4
+    }, /*#__PURE__*/ react.createElement(ContentModelGroupsDataList, {
+        activeId: route.params.id
+    })), /*#__PURE__*/ react.createElement(RightPanel, {
+        span: 8
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "w-full overflow-y-auto h-main-content"
+    }, /*#__PURE__*/ react.createElement(ContentModelGroupsForm, {
+        newEntry: true === route.params.new,
+        id: route.params.id
+    }))));
+});
+const components_ContentModelGroups = ContentModelGroups;
+export default components_ContentModelGroups;
+
+//# sourceMappingURL=ContentModelGroups.js.map

package/presentation/modelGroup/components/ContentModelGroups.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/modelGroup/components/ContentModelGroups.js","sources":["../../../../src/presentation/modelGroup/components/ContentModelGroups.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useFeature } from \"@webiny/app\";\nimport { SplitView, LeftPanel, RightPanel, useRoute } from \"@webiny/app-admin\";\nimport { ModelGroupPresenterFeature } from \"~/presentation/modelGroup/feature.js\";\nimport { Routes } from \"~/routes.js\";\nimport { ContentModelGroupsDataList } from \"./ContentModelGroupsDataList.js\";\nimport { ContentModelGroupsForm } from \"./ContentModelGroupsForm.js\";\n\nconst ContentModelGroups = observer(() => {\n    const { presenter } = useFeature(ModelGroupPresenterFeature);\n    const { route } = useRoute(Routes.ContentModelGroups.List);\n\n    useEffect(() => {\n        presenter.init();\n    }, [presenter]);\n\n    return (\n        <SplitView>\n            <LeftPanel span={4}>\n                <ContentModelGroupsDataList activeId={route.params.id} />\n            </LeftPanel>\n            <RightPanel span={8}>\n                <div className={\"w-full overflow-y-auto h-main-content\"}>\n                    <ContentModelGroupsForm\n                        newEntry={route.params.new === true}\n                        id={route.params.id}\n                    />\n                </div>\n            </RightPanel>\n        </SplitView>\n    );\n});\n\nexport default ContentModelGroups;\n"],"names":["ContentModelGroups","observer","presenter","useFeature","ModelGroupPresenterFeature","route","useRoute","Routes","useEffect","SplitView","LeftPanel","ContentModelGroupsDataList","RightPanel","ContentModelGroupsForm"],"mappings":";;;;;;;;AASA,MAAMA,qBAAqBC,SAAS;IAChC,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAM,EAAEC,KAAK,EAAE,GAAGC,SAASC,OAAO,kBAAkB,CAAC,IAAI;IAEzDC,UAAU;QACNN,UAAU,IAAI;IAClB,GAAG;QAACA;KAAU;IAEd,OAAO,WAAP,GACI,oBAACO,WAASA,MAAAA,WAAAA,GACN,oBAACC,WAASA;QAAC,MAAM;qBACb,oBAACC,4BAA0BA;QAAC,UAAUN,MAAM,MAAM,CAAC,EAAE;uBAEzD,oBAACO,YAAUA;QAAC,MAAM;qBACd,oBAAC;QAAI,WAAW;qBACZ,oBAACC,wBAAsBA;QACnB,UAAUR,AAAqB,SAArBA,MAAM,MAAM,CAAC,GAAG;QAC1B,IAAIA,MAAM,MAAM,CAAC,EAAE;;AAM3C;AAEA,sCAAeL"}

package/presentation/modelGroup/components/ContentModelGroupsDataList.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const ContentModelGroupsDataList: (({ activeId }: {
+    activeId: string | undefined;
+}) => React.JSX.Element) & {
+    displayName: string;
+};

package/presentation/modelGroup/components/ContentModelGroupsDataList.js

@@ -0,0 +1,145 @@
+import react, { useCallback, useMemo, useState } from "react";
+import { observer } from "mobx-react-lite";
+import orderBy from "lodash/orderBy.js";
+import { useFeature } from "@webiny/app";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { SearchUI, useConfirmationDialog, useRouter, useSnackbar } from "@webiny/app-admin";
+import { Button, DataList, DataListModal, DeleteIcon, List, Select, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { ModelGroupPresenterFeature } from "../feature.js";
+import { usePermission } from "../../../admin/hooks/index.js";
+import { Routes } from "../../../routes.js";
+const t = i18n.ns("app-headless-cms/admin/content-model-groups/data-list");
+const SORTERS = [
+    {
+        label: "Newest to oldest",
+        sorter: "createdOn_DESC"
+    },
+    {
+        label: "Oldest to newest",
+        sorter: "createdOn_ASC"
+    },
+    {
+        label: "Name A-Z",
+        sorter: "name_ASC"
+    },
+    {
+        label: "Name Z-A",
+        sorter: "name_DESC"
+    }
+];
+const deserializeSorters = (data)=>{
+    const [field, order] = data.split("_");
+    return [
+        field,
+        "asc" === order.toLowerCase() ? "asc" : "desc"
+    ];
+};
+const ContentModelGroupsDataList = observer(({ activeId })=>{
+    const { presenter } = useFeature(ModelGroupPresenterFeature);
+    const { goToRoute } = useRouter();
+    const { showSnackbar } = useSnackbar();
+    const { showConfirmation } = useConfirmationDialog({
+        dataTestId: "cms.contentModelGroup.list-item.delete-dialog"
+    });
+    const { canCreate, canDelete } = usePermission();
+    const [filter, setFilter] = useState("");
+    const [sort, setSort] = useState(SORTERS[0].sorter);
+    const groups = presenter.list.vm.rows;
+    const loading = presenter.list.vm.pagination.loading;
+    const filteredData = useMemo(()=>{
+        if ("" === filter) return groups;
+        const lc = filter.toLowerCase();
+        return groups.filter((g)=>g.name.toLowerCase().includes(lc));
+    }, [
+        groups,
+        filter
+    ]);
+    const sortedData = useMemo(()=>{
+        if (!sort) return filteredData;
+        const [key, order] = deserializeSorters(sort);
+        return orderBy(filteredData, [
+            key
+        ], [
+            order
+        ]);
+    }, [
+        filteredData,
+        sort
+    ]);
+    const deleteItem = useCallback((item)=>{
+        showConfirmation(async ()=>{
+            try {
+                await presenter.deleteGroup(item.id);
+                showSnackbar(t`Content model group "{name}" deleted.`({
+                    name: item.name
+                }));
+                if (activeId === item.id) goToRoute(Routes.ContentModelGroups.List);
+            } catch (e) {
+                showSnackbar(e.message);
+            }
+        });
+    }, [
+        activeId
+    ]);
+    return /*#__PURE__*/ react.createElement(DataList, {
+        title: t`Content model groups`,
+        refresh: null,
+        actions: canCreate("cms.contentModelGroup") ? /*#__PURE__*/ react.createElement(Button, {
+            "data-testid": "new-group-button",
+            onClick: ()=>goToRoute(Routes.ContentModelGroups.List, {
+                    new: true
+                }),
+            text: t`New`,
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "sm",
+            className: "ml-xs"
+        }) : null,
+        data: sortedData,
+        loading: loading,
+        search: /*#__PURE__*/ react.createElement(SearchUI, {
+            value: filter,
+            onChange: setFilter,
+            inputPlaceholder: t`Search content model group...`
+        }),
+        modalOverlay: /*#__PURE__*/ react.createElement(DataListModal.Content, null, /*#__PURE__*/ react.createElement(Select, {
+            value: sort,
+            onChange: setSort,
+            label: t`Sort by`,
+            description: "Sort groups by",
+            options: SORTERS.map(({ label, sorter: value })=>({
+                    label,
+                    value
+                }))
+        })),
+        modalOverlayAction: /*#__PURE__*/ react.createElement(DataListModal.Trigger, {
+            "data-testid": "default-data-list.filter"
+        })
+    }, ({ data })=>/*#__PURE__*/ react.createElement(List, {
+            "data-testid": "default-data-list"
+        }, data.map((item)=>/*#__PURE__*/ react.createElement(List.Item, {
+                key: item.id,
+                selected: item.id === activeId,
+                title: item.name,
+                description: item.contentModels.length ? t`{contentModels|count:1:content model:default:content models}`({
+                    contentModels: item.contentModels.length
+                }) : t`No content models`,
+                onClick: ()=>goToRoute(Routes.ContentModelGroups.List, {
+                        id: item.id
+                    }),
+                actions: canDelete(item, "cms.contentModelGroup") ? item.plugin ? /*#__PURE__*/ react.createElement(Tooltip, {
+                    content: "Content model group is registered via a plugin.",
+                    side: "bottom",
+                    trigger: /*#__PURE__*/ react.createElement(DeleteIcon, {
+                        disabled: true,
+                        "data-testid": "cms.contentModelGroup.list-item.delete"
+                    })
+                }) : /*#__PURE__*/ react.createElement(DeleteIcon, {
+                    onClick: ()=>deleteItem(item),
+                    "data-testid": "cms.contentModelGroup.list-item.delete"
+                }) : void 0
+            }))));
+});
+export { ContentModelGroupsDataList };
+
+//# sourceMappingURL=ContentModelGroupsDataList.js.map

package/presentation/modelGroup/components/ContentModelGroupsDataList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/modelGroup/components/ContentModelGroupsDataList.js","sources":["../../../../src/presentation/modelGroup/components/ContentModelGroupsDataList.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport orderBy from \"lodash/orderBy.js\";\nimport { useFeature } from \"@webiny/app\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useSnackbar, useConfirmationDialog, SearchUI, useRouter } from \"@webiny/app-admin\";\nimport {\n    Button,\n    DataList,\n    DataListModal,\n    DeleteIcon,\n    List,\n    Select,\n    Tooltip\n} from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ModelGroupPresenterFeature } from \"~/presentation/modelGroup/feature.js\";\nimport { usePermission } from \"~/admin/hooks/index.js\";\nimport { Routes } from \"~/routes.js\";\nimport type { ModelGroupDto } from \"~/features/modelGroup/listModelGroups/abstractions.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/content-model-groups/data-list\");\n\nconst SORTERS = [\n    { label: \"Newest to oldest\", sorter: \"createdOn_DESC\" },\n    { label: \"Oldest to newest\", sorter: \"createdOn_ASC\" },\n    { label: \"Name A-Z\", sorter: \"name_ASC\" },\n    { label: \"Name Z-A\", sorter: \"name_DESC\" }\n];\n\nconst deserializeSorters = (data: string): [string, \"asc\" | \"desc\"] => {\n    const [field, order] = data.split(\"_\");\n    return [field, order.toLowerCase() === \"asc\" ? \"asc\" : \"desc\"];\n};\n\nexport const ContentModelGroupsDataList = observer(\n    ({ activeId }: { activeId: string | undefined }) => {\n        const { presenter } = useFeature(ModelGroupPresenterFeature);\n        const { goToRoute } = useRouter();\n        const { showSnackbar } = useSnackbar();\n        const { showConfirmation } = useConfirmationDialog({\n            dataTestId: \"cms.contentModelGroup.list-item.delete-dialog\"\n        });\n        const { canCreate, canDelete } = usePermission();\n\n        const [filter, setFilter] = useState(\"\");\n        const [sort, setSort] = useState(SORTERS[0].sorter);\n\n        const groups = presenter.list.vm.rows;\n        const loading = presenter.list.vm.pagination.loading;\n\n        const filteredData = useMemo(() => {\n            if (filter === \"\") {\n                return groups;\n            }\n            const lc = filter.toLowerCase();\n            return groups.filter((g: ModelGroupDto) => g.name.toLowerCase().includes(lc));\n        }, [groups, filter]);\n\n        const sortedData = useMemo(() => {\n            if (!sort) {\n                return filteredData;\n            }\n            const [key, order] = deserializeSorters(sort);\n            return orderBy(filteredData, [key], [order]);\n        }, [filteredData, sort]);\n\n        const deleteItem = useCallback(\n            (item: ModelGroupDto) => {\n                showConfirmation(async () => {\n                    try {\n                        await presenter.deleteGroup(item.id);\n                        showSnackbar(t`Content model group \"{name}\" deleted.`({ name: item.name }));\n                        if (activeId === item.id) {\n                            goToRoute(Routes.ContentModelGroups.List);\n                        }\n                    } catch (e: any) {\n                        showSnackbar(e.message);\n                    }\n                });\n            },\n            [activeId]\n        );\n\n        return (\n            <DataList\n                title={t`Content model groups`}\n                refresh={null}\n                actions={\n                    canCreate(\"cms.contentModelGroup\") ? (\n                        <Button\n                            data-testid=\"new-group-button\"\n                            onClick={() => goToRoute(Routes.ContentModelGroups.List, { new: true })}\n                            text={t`New`}\n                            icon={<AddIcon />}\n                            size={\"sm\"}\n                            className={\"ml-xs\"}\n                        />\n                    ) : null\n                }\n                data={sortedData}\n                loading={loading}\n                search={\n                    <SearchUI\n                        value={filter}\n                        onChange={setFilter}\n                        inputPlaceholder={t`Search content model group...`}\n                    />\n                }\n                modalOverlay={\n                    <DataListModal.Content>\n                        <Select\n                            value={sort}\n                            onChange={setSort}\n                            label={t`Sort by`}\n                            description={\"Sort groups by\"}\n                            options={SORTERS.map(({ label, sorter: value }) => ({\n                                label,\n                                value\n                            }))}\n                        />\n                    </DataListModal.Content>\n                }\n                modalOverlayAction={\n                    <DataListModal.Trigger data-testid={\"default-data-list.filter\"} />\n                }\n            >\n                {({ data }: { data: ModelGroupDto[] }) => (\n                    <List data-testid=\"default-data-list\">\n                        {data.map(item => (\n                            <List.Item\n                                key={item.id}\n                                selected={item.id === activeId}\n                                title={item.name}\n                                description={\n                                    item.contentModels.length\n                                        ? t`{contentModels|count:1:content model:default:content models}`(\n                                              {\n                                                  contentModels: item.contentModels.length\n                                              }\n                                          )\n                                        : t`No content models`\n                                }\n                                onClick={() =>\n                                    goToRoute(Routes.ContentModelGroups.List, { id: item.id })\n                                }\n                                actions={\n                                    canDelete(item, \"cms.contentModelGroup\") ? (\n                                        item.plugin ? (\n                                            <Tooltip\n                                                content={\n                                                    \"Content model group is registered via a plugin.\"\n                                                }\n                                                side={\"bottom\"}\n                                                trigger={\n                                                    <DeleteIcon\n                                                        disabled\n                                                        data-testid={\n                                                            \"cms.contentModelGroup.list-item.delete\"\n                                                        }\n                                                    />\n                                                }\n                                            />\n                                        ) : (\n                                            <DeleteIcon\n                                                onClick={() => deleteItem(item)}\n                                                data-testid={\n                                                    \"cms.contentModelGroup.list-item.delete\"\n                                                }\n                                            />\n                                        )\n                                    ) : undefined\n                                }\n                            />\n                        ))}\n                    </List>\n                )}\n            </DataList>\n        );\n    }\n);\n"],"names":["t","i18n","SORTERS","deserializeSorters","data","field","order","ContentModelGroupsDataList","observer","activeId","presenter","useFeature","ModelGroupPresenterFeature","goToRoute","useRouter","showSnackbar","useSnackbar","showConfirmation","useConfirmationDialog","canCreate","canDelete","usePermission","filter","setFilter","useState","sort","setSort","groups","loading","filteredData","useMemo","lc","g","sortedData","key","orderBy","deleteItem","useCallback","item","Routes","e","DataList","Button","AddIcon","SearchUI","DataListModal","Select","label","value","List","Tooltip","DeleteIcon","undefined"],"mappings":"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"}

package/presentation/modelGroup/components/ContentModelGroupsForm.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare const ContentModelGroupsForm: (({ newEntry, id }: {
+    newEntry: boolean;
+    id: string | undefined;
+}) => React.JSX.Element) & {
+    displayName: string;
+};

package/presentation/modelGroup/components/ContentModelGroupsForm.js

@@ -0,0 +1,88 @@
+import react, { useCallback, useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import { useFeature } from "@webiny/app";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { EmptyView, SimpleForm, SimpleFormContent, SimpleFormFooter, SimpleFormHeader, useRouter, useSnackbar } from "@webiny/app-admin";
+import { FormView } from "@webiny/app-admin/features/formModel/FormView.js";
+import { Button, OverlayLoader, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as devices_other_svg_ReactComponent } from "@webiny/icons/devices_other.svg";
+import { ModelGroupPresenterFeature } from "../feature.js";
+import { usePermission } from "../../../admin/hooks/index.js";
+import { Routes } from "../../../routes.js";
+const t = i18n.ns("app-headless-cms/admin/content-model-groups/form");
+const ContentModelGroupsForm = observer(({ newEntry, id })=>{
+    const { presenter } = useFeature(ModelGroupPresenterFeature);
+    const { goToRoute } = useRouter();
+    const { showSnackbar } = useSnackbar();
+    const { canCreate, canEdit } = usePermission();
+    const { vm } = presenter;
+    useEffect(()=>{
+        if (id) presenter.selectGroup(id);
+        else if (newEntry) presenter.createNew();
+        else presenter.deselect();
+    }, [
+        id,
+        newEntry
+    ]);
+    const handleSave = useCallback(async ()=>{
+        const group = await presenter.save();
+        if (group) {
+            if (!vm.selectedGroup || vm.selectedGroup.id !== group.id) goToRoute(Routes.ContentModelGroups.List, {
+                id: group.id
+            });
+            showSnackbar(t`Content model group saved successfully!`);
+        }
+    }, [
+        presenter,
+        vm.selectedGroup
+    ]);
+    if (!vm.showForm) return /*#__PURE__*/ react.createElement(EmptyView, {
+        icon: /*#__PURE__*/ react.createElement(devices_other_svg_ReactComponent, null),
+        title: t`Click on the left side list to display group details {message}`({
+            message: canCreate("cms.contentModelGroup") ? "or create a..." : ""
+        }),
+        action: canCreate("cms.contentModelGroup") ? /*#__PURE__*/ react.createElement(Button, {
+            text: t`New Group`,
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            "data-testid": "new-record-button",
+            onClick: ()=>goToRoute(Routes.ContentModelGroups.List, {
+                    new: true
+                })
+        }) : /*#__PURE__*/ react.createElement(react.Fragment, null)
+    });
+    return /*#__PURE__*/ react.createElement(SimpleForm, {
+        "data-testid": "pb-content-model-groups-form"
+    }, /*#__PURE__*/ react.createElement(SimpleFormHeader, {
+        title: vm.selectedGroup ? vm.selectedGroup.name || t`New content model group` : t`New content model group`
+    }), (vm.loading || vm.saving) && /*#__PURE__*/ react.createElement(OverlayLoader, null), /*#__PURE__*/ react.createElement(SimpleFormContent, null, /*#__PURE__*/ react.createElement(FormView, {
+        name: "ContentModelGroup",
+        form: vm.form
+    })), /*#__PURE__*/ react.createElement(SimpleFormFooter, null, /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        text: t`Cancel`,
+        onClick: ()=>goToRoute(Routes.ContentModelGroups.List)
+    }), vm.selectedGroup ? canEdit(vm.selectedGroup, "cms.contentModelGroup") && vm.canModify ? /*#__PURE__*/ react.createElement(Button, {
+        variant: "primary",
+        text: t`Save`,
+        onClick: handleSave,
+        "data-testid": "cms.form.group.submit"
+    }) : vm.isPluginGroup ? /*#__PURE__*/ react.createElement(Tooltip, {
+        content: "Content model group is registered via a plugin.",
+        side: "bottom",
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            disabled: true,
+            variant: "primary",
+            text: t`Save`,
+            "data-testid": "cms.form.group.submit"
+        })
+    }) : null : /*#__PURE__*/ react.createElement(Button, {
+        variant: "primary",
+        text: t`Save`,
+        onClick: handleSave,
+        "data-testid": "cms.form.group.submit"
+    })));
+});
+export { ContentModelGroupsForm };
+
+//# sourceMappingURL=ContentModelGroupsForm.js.map

package/presentation/modelGroup/components/ContentModelGroupsForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/modelGroup/components/ContentModelGroupsForm.js","sources":["../../../../src/presentation/modelGroup/components/ContentModelGroupsForm.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useFeature } from \"@webiny/app\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport {\n    SimpleForm,\n    SimpleFormHeader,\n    SimpleFormContent,\n    SimpleFormFooter,\n    EmptyView,\n    useSnackbar,\n    useRouter\n} from \"@webiny/app-admin\";\nimport { FormView } from \"@webiny/app-admin/features/formModel/FormView.js\";\nimport { Button, OverlayLoader, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as DevicesIcon } from \"@webiny/icons/devices_other.svg\";\nimport { ModelGroupPresenterFeature } from \"~/presentation/modelGroup/feature.js\";\nimport { usePermission } from \"~/admin/hooks/index.js\";\nimport { Routes } from \"~/routes.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/content-model-groups/form\");\n\nexport const ContentModelGroupsForm = observer(\n    ({ newEntry, id }: { newEntry: boolean; id: string | undefined }) => {\n        const { presenter } = useFeature(ModelGroupPresenterFeature);\n        const { goToRoute } = useRouter();\n        const { showSnackbar } = useSnackbar();\n        const { canCreate, canEdit } = usePermission();\n        const { vm } = presenter;\n\n        useEffect(() => {\n            if (id) {\n                presenter.selectGroup(id);\n            } else if (newEntry) {\n                presenter.createNew();\n            } else {\n                presenter.deselect();\n            }\n        }, [id, newEntry]);\n\n        const handleSave = useCallback(async () => {\n            const group = await presenter.save();\n            if (group) {\n                if (!vm.selectedGroup || vm.selectedGroup.id !== group.id) {\n                    goToRoute(Routes.ContentModelGroups.List, { id: group.id });\n                }\n                showSnackbar(t`Content model group saved successfully!`);\n            }\n        }, [presenter, vm.selectedGroup]);\n\n        if (!vm.showForm) {\n            return (\n                <EmptyView\n                    icon={<DevicesIcon />}\n                    title={t`Click on the left side list to display group details {message}`({\n                        message: canCreate(\"cms.contentModelGroup\") ? \"or create a...\" : \"\"\n                    })}\n                    action={\n                        canCreate(\"cms.contentModelGroup\") ? (\n                            <Button\n                                text={t`New Group`}\n                                icon={<AddIcon />}\n                                data-testid=\"new-record-button\"\n                                onClick={() =>\n                                    goToRoute(Routes.ContentModelGroups.List, { new: true })\n                                }\n                            />\n                        ) : (\n                            <></>\n                        )\n                    }\n                />\n            );\n        }\n\n        return (\n            <SimpleForm data-testid={\"pb-content-model-groups-form\"}>\n                <SimpleFormHeader\n                    title={\n                        vm.selectedGroup\n                            ? vm.selectedGroup.name || t`New content model group`\n                            : t`New content model group`\n                    }\n                />\n                {(vm.loading || vm.saving) && <OverlayLoader />}\n                <SimpleFormContent>\n                    <FormView name={\"ContentModelGroup\"} form={vm.form} />\n                </SimpleFormContent>\n                <SimpleFormFooter>\n                    <Button\n                        variant={\"secondary\"}\n                        text={t`Cancel`}\n                        onClick={() => goToRoute(Routes.ContentModelGroups.List)}\n                    />\n                    {vm.selectedGroup ? (\n                        canEdit(vm.selectedGroup, \"cms.contentModelGroup\") && vm.canModify ? (\n                            <Button\n                                variant={\"primary\"}\n                                text={t`Save`}\n                                onClick={handleSave}\n                                data-testid={\"cms.form.group.submit\"}\n                            />\n                        ) : vm.isPluginGroup ? (\n                            <Tooltip\n                                content={\"Content model group is registered via a plugin.\"}\n                                side={\"bottom\"}\n                                trigger={\n                                    <Button\n                                        disabled\n                                        variant={\"primary\"}\n                                        text={t`Save`}\n                                        data-testid={\"cms.form.group.submit\"}\n                                    />\n                                }\n                            />\n                        ) : null\n                    ) : (\n                        <Button\n                            variant={\"primary\"}\n                            text={t`Save`}\n                            onClick={handleSave}\n                            data-testid={\"cms.form.group.submit\"}\n                        />\n                    )}\n                </SimpleFormFooter>\n            </SimpleForm>\n        );\n    }\n);\n"],"names":["t","i18n","ContentModelGroupsForm","observer","newEntry","id","presenter","useFeature","ModelGroupPresenterFeature","goToRoute","useRouter","showSnackbar","useSnackbar","canCreate","canEdit","usePermission","vm","useEffect","handleSave","useCallback","group","Routes","EmptyView","DevicesIcon","Button","AddIcon","SimpleForm","SimpleFormHeader","OverlayLoader","SimpleFormContent","FormView","SimpleFormFooter","Tooltip"],"mappings":";;;;;;;;;;;;AAqBA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAEX,MAAMC,yBAAyBC,SAClC,CAAC,EAAEC,QAAQ,EAAEC,EAAE,EAAiD;IAC5D,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAM,EAAEC,SAAS,EAAE,GAAGC;IACtB,MAAM,EAAEC,YAAY,EAAE,GAAGC;IACzB,MAAM,EAAEC,SAAS,EAAEC,OAAO,EAAE,GAAGC;IAC/B,MAAM,EAAEC,EAAE,EAAE,GAAGV;IAEfW,UAAU;QACN,IAAIZ,IACAC,UAAU,WAAW,CAACD;aACnB,IAAID,UACPE,UAAU,SAAS;aAEnBA,UAAU,QAAQ;IAE1B,GAAG;QAACD;QAAID;KAAS;IAEjB,MAAMc,aAAaC,YAAY;QAC3B,MAAMC,QAAQ,MAAMd,UAAU,IAAI;QAClC,IAAIc,OAAO;YACP,IAAI,CAACJ,GAAG,aAAa,IAAIA,GAAG,aAAa,CAAC,EAAE,KAAKI,MAAM,EAAE,EACrDX,UAAUY,OAAO,kBAAkB,CAAC,IAAI,EAAE;gBAAE,IAAID,MAAM,EAAE;YAAC;YAE7DT,aAAaX,CAAC,CAAC,uCAAuC,CAAC;QAC3D;IACJ,GAAG;QAACM;QAAWU,GAAG,aAAa;KAAC;IAEhC,IAAI,CAACA,GAAG,QAAQ,EACZ,OAAO,WAAP,GACI,oBAACM,WAASA;QACN,oBAAM,oBAACC,kCAAWA;QAClB,OAAOvB,CAAC,CAAC,8DAA8D,CAAC,CAAC;YACrE,SAASa,UAAU,2BAA2B,mBAAmB;QACrE;QACA,QACIA,UAAU,2BAA2B,WAA3B,GACN,oBAACW,QAAMA;YACH,MAAMxB,CAAC,CAAC,SAAS,CAAC;YAClB,oBAAM,oBAACyB,gBAAOA;YACd,eAAY;YACZ,SAAS,IACLhB,UAAUY,OAAO,kBAAkB,CAAC,IAAI,EAAE;oBAAE,KAAK;gBAAK;2BAI9D;;IAOpB,OAAO,WAAP,GACI,oBAACK,YAAUA;QAAC,eAAa;qBACrB,oBAACC,kBAAgBA;QACb,OACIX,GAAG,aAAa,GACVA,GAAG,aAAa,CAAC,IAAI,IAAIhB,CAAC,CAAC,uBAAuB,CAAC,GACnDA,CAAC,CAAC,uBAAuB,CAAC;QAGtCgB,AAAAA,CAAAA,GAAG,OAAO,IAAIA,GAAG,MAAK,mBAAM,oBAACY,eAAaA,OAAAA,WAAAA,GAC5C,oBAACC,mBAAiBA,MAAAA,WAAAA,GACd,oBAACC,UAAQA;QAAC,MAAM;QAAqB,MAAMd,GAAG,IAAI;uBAEtD,oBAACe,kBAAgBA,MAAAA,WAAAA,GACb,oBAACP,QAAMA;QACH,SAAS;QACT,MAAMxB,CAAC,CAAC,MAAM,CAAC;QACf,SAAS,IAAMS,UAAUY,OAAO,kBAAkB,CAAC,IAAI;QAE1DL,GAAG,aAAa,GACbF,QAAQE,GAAG,aAAa,EAAE,4BAA4BA,GAAG,SAAS,GAAG,WAAH,GAC9D,oBAACQ,QAAMA;QACH,SAAS;QACT,MAAMxB,CAAC,CAAC,IAAI,CAAC;QACb,SAASkB;QACT,eAAa;SAEjBF,GAAG,aAAa,GAAG,WAAH,GAChB,oBAACgB,SAAOA;QACJ,SAAS;QACT,MAAM;QACN,uBACI,oBAACR,QAAMA;YACH;YACA,SAAS;YACT,MAAMxB,CAAC,CAAC,IAAI,CAAC;YACb,eAAa;;SAIzB,qBAEJ,oBAACwB,QAAMA;QACH,SAAS;QACT,MAAMxB,CAAC,CAAC,IAAI,CAAC;QACb,SAASkB;QACT,eAAa;;AAMrC"}

package/presentation/modelGroup/feature.d.ts

@@ -0,0 +1,3 @@
+export declare const ModelGroupPresenterFeature: import("@webiny/feature/admin").FeatureDefinition<{
+    presenter: import("./abstractions.js").IModelGroupPresenter;
+}, []>;

package/presentation/modelGroup/feature.js

@@ -0,0 +1,17 @@
+import { createFeature } from "@webiny/feature/admin";
+import { ModelGroupPresenter } from "./abstractions.js";
+import { ModelGroupPresenter as external_ModelGroupPresenter_js_ModelGroupPresenter } from "./ModelGroupPresenter.js";
+const ModelGroupPresenterFeature = createFeature({
+    name: "CmsModelGroup/Presenter",
+    register (container) {
+        container.register(external_ModelGroupPresenter_js_ModelGroupPresenter).inSingletonScope();
+    },
+    resolve (container) {
+        return {
+            presenter: container.resolve(ModelGroupPresenter)
+        };
+    }
+});
+export { ModelGroupPresenterFeature };
+
+//# sourceMappingURL=feature.js.map

package/presentation/modelGroup/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/modelGroup/feature.js","sources":["../../../src/presentation/modelGroup/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { ModelGroupPresenter as Abstraction } from \"./abstractions.js\";\nimport { ModelGroupPresenter } from \"./ModelGroupPresenter.js\";\n\nexport const ModelGroupPresenterFeature = createFeature({\n    name: \"CmsModelGroup/Presenter\",\n    register(container) {\n        container.register(ModelGroupPresenter).inSingletonScope();\n    },\n    resolve(container) {\n        return {\n            presenter: container.resolve(Abstraction)\n        };\n    }\n});\n"],"names":["ModelGroupPresenterFeature","createFeature","container","ModelGroupPresenter","Abstraction"],"mappings":";;;AAIO,MAAMA,6BAA6BC,cAAc;IACpD,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC,qDAAqB,gBAAgB;IAC5D;IACA,SAAQD,SAAS;QACb,OAAO;YACH,WAAWA,UAAU,OAAO,CAACE;QACjC;IACJ;AACJ"}

package/presentation/newContentModel/NewContentModelPresenter.d.ts

@@ -0,0 +1,27 @@
+import { FormModelFactory } from "@webiny/app-admin/features/formModel/abstractions.js";
+import type { CmsModel } from "../../types.js";
+import { ListModelGroupsUseCase } from "../../features/modelGroup/listModelGroups/abstractions.js";
+import { CreateModelUseCase } from "../../features/model/createModel/abstractions.js";
+import { ModelGroupsCache } from "../../features/modelGroup/abstractions.js";
+import { ModelsCache } from "../../features/model/abstractions.js";
+import { type INewContentModelPresenter, type INewContentModelPresenterViewModel } from "./abstractions.js";
+declare class NewContentModelPresenterImpl implements INewContentModelPresenter {
+    private formModelFactory;
+    private listModelGroupsUseCase;
+    private createModelUseCase;
+    private groupsCache;
+    private modelsCache;
+    private loading;
+    private saving;
+    private form;
+    constructor(formModelFactory: FormModelFactory.Interface, listModelGroupsUseCase: ListModelGroupsUseCase.Interface, createModelUseCase: CreateModelUseCase.Interface, groupsCache: ModelGroupsCache.Interface, modelsCache: ModelsCache.Interface);
+    get vm(): INewContentModelPresenterViewModel;
+    init(): Promise<void>;
+    save(): Promise<CmsModel | null>;
+    reset(): void;
+    private buildForm;
+}
+export declare const NewContentModelPresenter: typeof NewContentModelPresenterImpl & {
+    __abstraction: import("@webiny/di").Abstraction<INewContentModelPresenter>;
+};
+export {};

package/presentation/newContentModel/NewContentModelPresenter.js

@@ -0,0 +1,130 @@
+import { computed, makeAutoObservable, runInAction } from "mobx";
+import { FormModelFactory } from "@webiny/app-admin/features/formModel/abstractions.js";
+import { ListModelGroupsUseCase } from "../../features/modelGroup/listModelGroups/abstractions.js";
+import { CreateModelUseCase } from "../../features/model/createModel/abstractions.js";
+import { ModelGroupsCache } from "../../features/modelGroup/abstractions.js";
+import { ModelsCache } from "../../features/model/abstractions.js";
+import { NewContentModelPresenter } from "./abstractions.js";
+const CMS_MODEL_SINGLETON_TAG = "singleEntry";
+class NewContentModelPresenterImpl {
+    constructor(formModelFactory, listModelGroupsUseCase, createModelUseCase, groupsCache, modelsCache){
+        this.formModelFactory = formModelFactory;
+        this.listModelGroupsUseCase = listModelGroupsUseCase;
+        this.createModelUseCase = createModelUseCase;
+        this.groupsCache = groupsCache;
+        this.modelsCache = modelsCache;
+        this.loading = true;
+        this.saving = false;
+        this.form = this.buildForm();
+        makeAutoObservable(this, {
+            formModelFactory: false,
+            listModelGroupsUseCase: false,
+            createModelUseCase: false,
+            groupsCache: false,
+            modelsCache: false,
+            vm: computed
+        });
+    }
+    get vm() {
+        const groups = this.groupsCache.getItems().map((g)=>({
+                value: g.slug,
+                label: g.name
+            }));
+        return {
+            loading: this.loading,
+            saving: this.saving,
+            groups,
+            models: this.modelsCache.getItems(),
+            form: this.form.vm
+        };
+    }
+    async init() {
+        try {
+            await this.listModelGroupsUseCase.execute();
+        } finally{
+            runInAction(()=>{
+                this.loading = false;
+                const groups = this.groupsCache.getItems();
+                if (groups.length > 0) this.form.setData({
+                    group: groups[0].slug
+                });
+            });
+        }
+    }
+    async save() {
+        const data = await this.form.submit();
+        if (!data) return null;
+        runInAction(()=>{
+            this.saving = true;
+        });
+        try {
+            const tags = Array.isArray(data.tags) ? data.tags : [];
+            let pluralApiName = data.pluralApiName;
+            if (data.singleEntry) {
+                tags.push(CMS_MODEL_SINGLETON_TAG);
+                pluralApiName = `${data.singularApiName}Unused`;
+            }
+            const model = await this.createModelUseCase.execute({
+                name: data.name,
+                singularApiName: data.singularApiName,
+                pluralApiName,
+                group: data.group,
+                icon: data.icon,
+                description: data.description,
+                defaultFields: data.defaultFields,
+                tags
+            });
+            return model;
+        } catch  {
+            return null;
+        } finally{
+            runInAction(()=>{
+                this.saving = false;
+            });
+        }
+    }
+    reset() {
+        this.form = this.buildForm();
+        const groups = this.groupsCache.getItems();
+        if (groups.length > 0) this.form.setData({
+            group: groups[0].slug
+        });
+    }
+    buildForm() {
+        return this.formModelFactory.create({
+            fields: (fields)=>({
+                    name: fields.text().label("Name").required("Name is required."),
+                    singularApiName: fields.text().label("Singular API Name").required("Singular API Name is required."),
+                    singleEntry: fields.boolean().label("Single entry model").defaultValue(false),
+                    pluralApiName: fields.text().label("Plural API Name"),
+                    group: fields.text().label("Content model group").required("Group is required."),
+                    icon: fields.text().label("Icon").renderer("cmsIconPicker"),
+                    description: fields.text().label("Description").renderer("textarea"),
+                    defaultFields: fields.boolean().label("Create model with default fields").defaultValue(true)
+                }),
+            layout: (layout)=>[
+                    layout.row("name"),
+                    layout.row("singularApiName"),
+                    layout.row("singleEntry"),
+                    layout.row("pluralApiName"),
+                    layout.row("group"),
+                    layout.row("icon"),
+                    layout.row("description"),
+                    layout.row("defaultFields")
+                ]
+        });
+    }
+}
+const NewContentModelPresenter_NewContentModelPresenter = NewContentModelPresenter.createImplementation({
+    implementation: NewContentModelPresenterImpl,
+    dependencies: [
+        FormModelFactory,
+        ListModelGroupsUseCase,
+        CreateModelUseCase,
+        ModelGroupsCache,
+        ModelsCache
+    ]
+});
+export { NewContentModelPresenter_NewContentModelPresenter as NewContentModelPresenter };
+
+//# sourceMappingURL=NewContentModelPresenter.js.map