@solidstarters/solid-core-ui 1.1.70 → 1.1.72

package/dist/components/core/common/SolidLayoutViews.tsx

@@ -0,0 +1,87 @@
+'use client';
+import { Button } from 'primereact/button';
+import { OverlayPanel } from 'primereact/overlaypanel';
+import { RadioButton } from 'primereact/radiobutton';
+import { useRef } from 'react';
+interface Props {
+    sizeOptions: { label: string; value: string, image: string }[];
+    setSize: (value: string) => void;
+    size: string;
+    viewModes: { label: string; value: string, image: string }[];
+    setView: (value: string) => void;
+    view: string;
+}
+export const SolidLayoutViews = ({ sizeOptions, setSize, size, viewModes, setView, view }: Props) => {
+    const op = useRef(null);
+
+    return (
+        <div className="position-relative">
+            <Button
+                type="button"
+                size='small'
+                severity='secondary'
+                icon={
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
+                        <path d="M14.9016 13.1969L10.8031 9.09845L14.9016 5L19 9.09845L14.9016 13.1969ZM5 11.7461V5.94301H10.8031V11.7461H5ZM12.2539 19V13.1969H18.057V19H12.2539ZM5 19V13.1969H10.8031V19H5ZM6.45078 10.2953H9.35233V7.39378H6.45078V10.2953ZM14.9197 11.1658L16.9689 9.11658L14.9197 7.06736L12.8705 9.11658L14.9197 11.1658ZM13.7047 17.5492H16.6062V14.6477H13.7047V17.5492ZM6.45078 17.5492H9.35233V14.6477H6.45078V17.5492Z" fill="#4B4D52" />
+                    </svg>
+                }
+                className='custom-icon-button'
+                outlined
+                // @ts-ignore
+                onClick={(e) => op.current.toggle(e)}
+            />
+            <OverlayPanel ref={op} className='solid-header-dropdown-panel'>
+                <div className='secondary-border-bottom p-1'>
+                    <p className='px-3 pt-2'>Density</p>
+                    <div className="flex flex-column gap-1">
+                        {sizeOptions.map((option) => (
+                            <div key={option.value} className={`flex align-items-center ${option.value === size ? 'solid-active-view' : 'solid-view'}`}>
+                                <RadioButton
+                                    inputId={option.value}
+                                    name="sizes"
+                                    value={option.value}
+                                    onChange={(e) => setSize(e.value)}
+                                    checked={option.value === size}
+                                />
+                                <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
+                                    {option.label}
+                                    <img
+                                        src={option.image}
+                                        alt={option.value}
+                                        className='img-fluid position-relative'
+                                        style={{ width: '2.75rem' }}
+                                    />
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+                <div className='p-1'>
+                    <p className='px-3 pt-2'>View Mode</p>
+                    <div className="flex flex-column gap-1">
+                        {viewModes.map((option) => (
+                            <div key={option.value} className={`flex align-items-center ${option.value === view ? 'solid-active-view' : 'solid-view'}`}>
+                                <RadioButton
+                                    inputId={option.value}
+                                    name="views"
+                                    value={option.value}
+                                    onChange={(e) => setView(e.value)}
+                                    checked={option.value === view}
+                                />
+                                <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
+                                    {option.label}
+                                    <img
+                                        src={option.image}
+                                        alt={option.value}
+                                        className='img-fluid position-relative'
+                                        style={{ width: '2.75rem' }}
+                                    />
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </OverlayPanel>
+        </div>
+    );
+}

package/dist/components/core/common/SolidListViewOptions.tsx

@@ -0,0 +1,31 @@
+'use client';
+import { Dialog } from "primereact/dialog";
+import { useState } from "react";
+
+
+export const SolidListViewOptions = ({ }: any) => {
+
+    const [visible, setVisible] = useState<boolean>(false);
+
+    const [componentsToRender, setComponentsToRender] = useState(["Header", "NonExistentComponent"]);
+
+    return (
+        <div className="card flex justify-content-center">
+            <i className="pi pi-cog" onClick={() => setVisible(true)}></i>
+
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
+                <p className="m-0">
+                    ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <div>
+                   
+                </div>
+
+            </Dialog>
+        </div>
+    )
+
+}

package/dist/components/core/common/SolidSaveCustomFilterForm.tsx

@@ -0,0 +1,74 @@
+import { Button } from "primereact/button";
+import { Checkbox } from "primereact/checkbox";
+import { useState } from "react";
+
+interface SolidSaveCustomFilterFormProps {
+    currentSavedFilterData: any,
+    handleSaveFilter: ({ }) => void;
+    closeDialog: any
+}
+
+export const SolidSaveCustomFilterForm: React.FC<SolidSaveCustomFilterFormProps> = ({ currentSavedFilterData, handleSaveFilter, closeDialog }) => {
+    const [formValues, setFormValues] = useState({ name: currentSavedFilterData ? currentSavedFilterData.name : "", isPrivate: currentSavedFilterData ? currentSavedFilterData.isPrivate : false });
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value, type, checked } = e.target;
+        setFormValues((prev) => ({
+            ...prev,
+            [name]: type === "checkbox" ? checked : value,
+        }));
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        const formData = {
+            id: currentSavedFilterData ? currentSavedFilterData.id : null,
+            name: formValues.name,
+            isPrivate: formValues.isPrivate === true ? true : "",
+        }
+        handleSaveFilter(formData);
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="flex flex-column gap-2">
+                <label htmlFor="name">Name:</label>
+                <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    placeholder="Filter Title"
+                    className="p-inputtext p-inputtext-sm p-component"
+                    value={formValues.name}
+                    onChange={handleChange}
+                    readOnly={currentSavedFilterData}
+                />
+            </div>
+            <div className="mt-3 flex align-items-center ">
+                <Checkbox
+                    inputId="isPrivate"
+                    name="isPrivate"
+                    checked={formValues.isPrivate}
+                    onChange={(e: any) => handleChange(e)}
+                >
+                </Checkbox>
+                <label htmlFor="isPrivate" className="ml-2">Is Private</label>
+            </div>
+            <div className="mt-3 flex align-items-center gap-2">
+                <Button
+                    type="submit"
+                    label="Save"
+                    size="small"
+                />
+                <Button
+                    type="button"
+                    label="Cancel"
+                    size="small"
+                    outlined
+                    onClick={() => closeDialog()}
+                />
+            </div>
+        </form>
+    );
+};
+

package/dist/components/core/common/SolidSearchBox.tsx

@@ -0,0 +1,17 @@
+'use client';
+import { AutoComplete } from "primereact/autocomplete";
+import { useState } from "react";
+
+
+export const SolidSearchBox = ({ viewData }: any) => {
+    const [value, setValue] = useState<string>('');
+    const [items, setItems] = useState<string[]>([]);
+    const search = (event: any) => {
+        // setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
+        </div>
+    )
+}

package/dist/components/core/common/SolidViewLayoutManager.d.ts

@@ -1,4 +1,4 @@
-import { LayoutAttribute, LayoutNode } from "@/types/solid-core";
+import { LayoutAttribute, LayoutNode } from "../../../types/solid-core";
 export declare class SolidViewLayoutManager {
     private layout;
     constructor(layout: LayoutNode);

package/dist/components/core/common/SolidViewLayoutManager.ts

@@ -0,0 +1,85 @@
+import { LayoutAttribute, LayoutNode } from "@/types/solid-core";
+
+export class SolidViewLayoutManager {
+    private layout: LayoutNode;
+
+    constructor(layout: LayoutNode) {
+        // Create a deep copy to prevent modifying the original object
+        this.layout = structuredClone ? structuredClone(layout) : JSON.parse(JSON.stringify(layout));
+    }
+
+    // Helper function to find a node by name
+    private findNode(node: LayoutNode, name: string): LayoutNode | null {
+        if (node.attrs.name === name) {
+            return node;
+        }
+
+        if (node.children) {
+            for (let child of node.children) {
+                const found = this.findNode(child, name);
+                if (found) return found;
+            }
+        }
+        return null;
+    }
+
+    // Helper function to find and remove a node
+    private removeNodeRecursive(parent: LayoutNode, name: string): boolean {
+        if (!parent.children) return false;
+
+        const index = parent.children.findIndex((child) => child.attrs.name === name);
+        if (index !== -1) {
+            parent.children.splice(index, 1); // Remove the node
+            return true;
+        }
+
+        return parent.children.some((child) => this.removeNodeRecursive(child, name));
+    }
+
+    // Get a deep copy of the layout
+    getLayout(): LayoutNode {
+        // return structuredClone ? structuredClone(this.layout) : JSON.parse(JSON.stringify(this.layout));
+        return this.layout;
+    }
+
+    // Update attributes of a node
+    updateNodeAttributes(name: string, newAttributes: Partial<LayoutAttribute>): boolean {
+        const node = this.findNode(this.layout, name);
+        if (node) {
+            node.attrs = { ...node.attrs, ...newAttributes };
+            return true;
+        }
+        return false;
+    }
+
+    // Add a child node to a parent node
+    addChildNode(parentName: string, newNode: LayoutNode): boolean {
+        const parentNode = this.findNode(this.layout, parentName);
+        if (parentNode) {
+            if (!parentNode.children) {
+                parentNode.children = [];
+            }
+            parentNode.children.push(newNode);
+            return true;
+        }
+        return false;
+    }
+
+    // Remove a node and its children
+    removeNode(name: string): boolean {
+        if (this.layout.attrs.name === name) {
+            console.warn("Cannot remove the root node.");
+            return false;
+        }
+
+        return this.removeNodeRecursive(this.layout, name);
+    }
+
+    // Recursively traverse the layout and execute a callback function
+    traverse(callback: (node: LayoutNode) => void, node: LayoutNode = this.layout) {
+        callback(node);
+        if (node.children) {
+            node.children.forEach((child) => this.traverse(callback, child));
+        }
+    }
+}

package/dist/components/core/extension/solid-core/emailTemplate/emailFormTypeChangeHandler.ts

@@ -0,0 +1,18 @@
+import { SolidViewLayoutManager } from "@/components/core/common/SolidViewLayoutManager";
+
+const hanldeEmailFormTypeChange = (event: any) => {
+
+    const { modifiedField, modifiedFieldValue, viewMetadata, } = event;
+    const layout = viewMetadata.layout;
+    if (modifiedField === 'type') {
+        const layoutManager = new SolidViewLayoutManager(layout);
+        const renderMode = modifiedFieldValue.value === 'text' ? 'longText' : 'richText';
+        layoutManager.updateNodeAttributes('body', { "renderMode": renderMode});
+        return {
+            layoutChanged: true,
+            dataChanged: false,
+            newLayout: layoutManager.getLayout(), 
+        }
+    }
+}
+export default hanldeEmailFormTypeChange;

package/dist/components/core/extension/solid-core/emailTemplate/emailFormTypeLoad.ts

@@ -0,0 +1,18 @@
+import { SolidViewLayoutManager } from "@/components/core/common/SolidViewLayoutManager";
+
+const hanldeEmailFormTypeLoad = (event: any) => {
+
+    const { formData, type, viewMetadata } = event;
+    const layout = viewMetadata.layout;
+    if (formData?.type && type === 'onFormLayoutLoad') {
+        const layoutManager = new SolidViewLayoutManager(layout);
+        const renderMode = formData.type === 'text' ? 'longText' : 'richText';
+        layoutManager.updateNodeAttributes('body', { "renderMode": renderMode});
+        return {
+            layoutChanged: true,
+            dataChanged: false,
+            newLayout: layoutManager.getLayout(), 
+        }
+    }
+}
+export default hanldeEmailFormTypeLoad;

package/dist/components/core/extension/solid-core/modelMetadata/list/GenerateModelCodeRowAction.tsx

@@ -0,0 +1,59 @@
+'use client';
+import { useGenerateCodeForModelMutation } from "@/redux/api/modelApi";
+import { useSeederMutation } from "@/redux/api/testApi";
+import { Button } from "primereact/button";
+import { useEffect } from "react";
+
+
+const GenerateModelCodeRowAction = ({ context }: any) => {
+    const [
+        generateCode,
+        { isLoading: isGenerateCodeUpdating, isSuccess: isGenerateCodeSuceess, isError: isGenerateCodeError, error: generateCodeError, data: generateCodeData },
+    ] = useGenerateCodeForModelMutation();
+
+    const [triggerSeeder, {data}] = useSeederMutation();
+
+
+    const generateCodeHandler = async () => {
+        const response = await generateCode({ id: context?.rowData?.id });
+        context.closeListViewRowActionPopup();
+    }
+
+    useEffect(() => {
+        const seeder = async () => {
+            if(isGenerateCodeSuceess) {
+                await triggerSeeder("ModuleMetadataSeederService");
+            }
+        }
+        seeder();
+    }, [isGenerateCodeSuceess])
+
+    return (
+        <>
+        {context?.rowData?.module?.name != "solid-core" ? <div>
+            <p className="">Click Ok to proceed with model code generation, please note that if the file already exists and <br></br>you have made custom changes to this file we will create a .bkp file as a backup of the existing file.</p>
+            <p>Below is the list of files that will be created </p>
+            <ul>
+                <li>Model Entity File</li>
+                <li>Model Controller File</li>
+                <li>Model Service File</li>
+                <li>Model Create and Update Dto files</li>
+            </ul>
+            <div className="flex gap-5 justify-content-center">
+                <Button label="Ok" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={generateCodeHandler} />
+                <Button label="Cancel" icon="pi pi-times" className='small-button' onClick={() => context.closeListViewRowActionPopup()} />
+            </div>
+        </div > :
+        <div>
+            <p className="">You cannot generate code for Solid Core models</p>
+            <div className="flex gap-5 justify-content-center">
+                {/* <Button label="Ok" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={generateCodeHandler} /> */}
+                <Button label="Close" icon="pi pi-times" className='small-button' onClick={() => context.closeListViewRowActionPopup()} />
+            </div>
+        </div >
+        }
+        </>
+    )
+}
+
+export default GenerateModelCodeRowAction;

package/dist/components/core/extension/solid-core/moduleMetadata/list/GenerateModuleCodeRowAction.tsx

@@ -0,0 +1,38 @@
+'use client';
+import { useGenerateCodeFormoduleMutation } from "@/redux/api/moduleApi";
+import { Button } from "primereact/button";
+
+
+const GenerateModuleCodeRowAction = ({ context }: any) => {
+    const [
+        generateCode,
+        { isLoading: isGenerateCodeUpdating, isSuccess: isGenerateCodeSuceess, isError: isGenerateCodeError, error: generateCodeError, data: generateCodeData },
+    ] = useGenerateCodeFormoduleMutation();
+
+    const generateCodeHandler = async () => {
+        const response = await generateCode({ id: context?.rowData?.id })
+        context.closeListViewRowActionPopup();
+
+    }
+
+    return (
+        <>
+            {context?.rowData?.name != "solid-core" ? <div>
+                <p className="text-center">Click Ok to proceed with module code generation, please note that if the file already exists and <br></br>you have made custom changes to this file we will create a .bkp file as a backup of the existing file.</p>
+                <div className="flex gap-5 justify-content-center">
+                    <Button label="Ok" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={generateCodeHandler} />
+                    <Button label="Cancel" icon="pi pi-times" className='small-button' onClick={() => context.closeListViewRowActionPopup()} />
+                </div>
+            </div> :
+            <div>
+                <p className="">You cannot generate code for Solid Core modules</p>
+                <div className="flex gap-5 justify-content-center">
+                    {/* <Button label="Ok" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={generateCodeHandler} /> */}
+                    <Button label="Close" icon="pi pi-times" className='small-button' onClick={() => context.closeListViewRowActionPopup()} />
+                </div>
+            </div >}
+        </>
+    )
+}
+
+export default GenerateModuleCodeRowAction;

package/dist/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.d.ts

@@ -1,3 +1,3 @@
-import { SolidRelationManyToManyFieldWidgetProps } from "@/types/solid-core";
-export declare const RolePermissionsManyToManyFieldWidget: ({ formik, fieldContext }: SolidRelationManyToManyFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
+import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
+export declare const RolePermissionsManyToManyFieldWidget: ({ formik, fieldContext }: SolidFormFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RolePermissionsManyToManyFieldWidget.d.ts.map

package/dist/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RolePermissionsManyToManyFieldWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,uCAAuC,EAAE,MAAM,oBAAoB,CAAC;AAsB7E,eAAO,MAAM,oCAAoC,6BAA8B,uCAAuC,4CAmGrH,CAAC"}
+{"version":3,"file":"RolePermissionsManyToManyFieldWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAc/D,eAAO,MAAM,oCAAoC,6BAA8B,yBAAyB,4CAmGvG,CAAC"}

package/dist/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"RolePermissionsManyToManyFieldWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"RolePermissionsManyToManyFieldWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx"],"names":[],"mappings":"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"}

package/dist/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx

@@ -0,0 +1,123 @@
+"use client";
+import { capitalize } from "lodash";
+import { Panel } from "primereact/panel";
+import { useEffect, useState } from "react";
+import { Button } from "primereact/button";
+import { InputSwitch } from "primereact/inputswitch";
+import { useRelationEntityHandler } from "@/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler";
+import { InlineRelationEntityDialog } from "@/components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog";
+import { Checkbox } from "primereact/checkbox";
+import { SolidFormFieldWidgetProps } from "@/types/solid-core";
+
+const groupByController = (items: any[]) => {
+    const grouped: { [key: string]: any[] } = {};
+    items.forEach((item) => {
+        const controllerName = item.label.split(".")[0];
+        if (!grouped[controllerName]) {
+            grouped[controllerName] = [];
+        }
+        grouped[controllerName].push(item);
+    });
+    return grouped;
+};
+
+export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+    const fieldLayoutInfo = fieldContext.field;
+
+    const readOnlyPermission = fieldContext.readOnly;
+    const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);
+    const { autoCompleteItems, fetchRelationEntities, addNewRelation } = useRelationEntityHandler({ fieldContext, formik });
+    const [visibleDialogs, setVisibleDialogs] = useState<{ [key: string]: boolean }>({});
+
+    useEffect(() => {
+        fetchRelationEntities();
+    }, []);
+
+    const handleCheckboxChange = (e: any) => {
+        if (formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.value === e.value)) {
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, formik.values[fieldLayoutInfo.attrs.name].filter((s: any) => s.value !== e.value));
+        } else {
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, [...formik.values[fieldLayoutInfo.attrs.name], e]);
+        }
+    };
+
+    const getHeaderTemplate = (controllerName: string) => (options: any) => {
+        const className = `${options.className} justify-content-space-between`;
+    
+        return (
+            <div className={className}>
+                <div className="flex align-items-center gap-3">
+                    <label className="form-field-label text-lg font-bold">
+                        {controllerName}
+                    </label>
+                    {fieldContext.field.attrs.inlineCreate && (
+                        <>
+                            <Button
+                                icon="pi pi-plus"
+                                rounded
+                                outlined
+                                aria-label="Add"
+                                type="button"
+                                size="small"
+                                onClick={() =>
+                                    setVisibleDialogs((prev) => ({
+                                        ...prev,
+                                        [controllerName]: true,
+                                    }))
+                                }
+                                className="custom-add-button"
+                            />
+                            <InlineRelationEntityDialog
+                                visible={visibleCreateDialog}
+                                setVisible={setVisibleCreateDialog}
+                                fieldContext={fieldContext}
+                                onCreate={addNewRelation}
+                            />
+                        </>
+                    )}
+                </div>
+                <div>{options.togglerElement}</div>
+            </div>
+        );
+    };
+    
+    const groupedEntities = groupByController(autoCompleteItems || []);
+    return (
+            <div>
+                {Object.keys(groupedEntities).map((controllerName) => (
+                    <Panel toggleable headerTemplate={getHeaderTemplate(controllerName)} key={controllerName} className="mt-4">
+                        <div className="formgrid grid">
+                            {groupedEntities[controllerName].map((entity: any, i: number) => {
+                                const isChecked = formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.value === entity.value);
+                                return (
+                                    <div key={entity.label} className={`field col-6 flex gap-2 ${i >= 2 ? 'mt-3' : ''}`}>
+                                        <Checkbox
+                                            readOnly={readOnlyPermission}
+                                            inputId={entity.label}
+                                            checked={isChecked}
+                                            onChange={() => handleCheckboxChange(entity)}
+                                        />
+                                        <label htmlFor={entity.label} className="form-field-label m-0"> {entity.label}</label>
+                                    </div>
+                                )
+                            })}
+                        </div>
+                    </Panel>
+                ))}
+                {Object.keys(groupedEntities).map((controllerName) => (
+                    <InlineRelationEntityDialog
+                        key={`dialog-${controllerName}`}
+                        visible={visibleDialogs[controllerName] || false}
+                        setVisible={(visible: any) =>
+                            setVisibleDialogs((prev) => ({
+                                ...prev,
+                                [controllerName]: visible,
+                            }))
+                        }
+                        fieldContext={fieldContext}
+                        onCreate={addNewRelation}
+                    />
+                ))}
+            </div>
+        )
+};