Modal Forms

Mayd 2+ uses forms in modals at numerous places. It provides a few integrations, to make the implementation of modal forms as easy as possible.

Opening a Modal Form in JavaScript

You need to fetch the modal service and can then open the form.

import app from "@mayd/app";
let modal = app.get<ModalController>("modal");

modal.openForm(
    "app.modal.title",
    {
        route: "backend.my.route",
        routeParameters: {
            page: 5,
        },
    },
    (data) => {
        console.log("The data we got is:", data);
    }
);

parameters

name	type	default	description
title	string		The headline of the modal. Automatically translated in the `backend` domain.
route	FetchOptions		The options to create a route with the router.
onSuccess	(data)	> void	The callback that is called with the success response data, if the form is valid.

The method is generic, so you can define your response type properly:

interface MyResponse {
    page: number;
}

modal.openForm<MyResponse>(
    // ...
    (data: MyResponse) => {
        // ...
    }
);

Backend Integration

The modal form is fully automated on the client side. To properly integrate with it and be able to use all features easily, there is an automated integration for the server side as well.

The AjaxActionHandler::handle() method takes several arguments:

return $ajaxHandler->handle(
    $request,
    $data,
    $formType,
    $url,
    $doAction,
    $buildReturnData,
    $successMessage
);

parameters

name	type	default	description
$request	Request		The symfony request.
$data	any		The form data (like the entity).
$formType	string		The form type class FQCN string.
$url	string		The form action URL.
$doAction	(data: any)	> void	The callback is called if the form is valid. Do the main action here, like persisting the entity. Receives the form data (see `$data`) as only argument.
$buildReturnData	(data: any)	> void	The callback to generate the return data. Receives the form data (see `$data`) as only argument.
$successMessage	string\|null		The success toast message (optional).

Here is a complete and working example implementation:

use Mayd\Foundation\Ajax\AjaxActionHandler;
use Mayd\Foundation\Controller\BackendController;
use Symfony\Component\HttpFoundation\Request;

class MyController extends BackendController
{
    public function handleForm (
        AjaxActionHandler $ajaxHandler,
        EntityModel $model,
        EntityNormalizer $normalizer,
        Request $request,
    ) : JsonResponse
    {
        // to do simple access checks, you can just return an AJAX response
        if (!$this->hasAccess())
        {
            return $this->ajaxResponse(false, "error")
                ->negativeMessage("backend.access_denied")
                ->build();
        }

        $entity = new MyEntity();

        return $ajaxHandler->handle(
            $request,
            $entity,
            MyEntityForm::class,
            $this->generateUrl("backend.entity.create"),
            fn (MyEntity $entity) => $model->add($entity)->flush(),
            // You don't need to define the argument here if it isn't used
            fn () => $normalizer->normalizeAllEntities(),
            "backend.entity.toast.added"
        );
    }
}

Table of Contents

Opening a Modal Form in JavaScript
Backend Integration