Comment avoir du style (dans la représentation d’un smartElement) ?

Prérequis

Afin de pouvoir suivre ce guide, il faut préalablement savoir Comment associer une classe de rendu à une smart structure.

Comment avoir du style (dans la représentation d’un smartElement) ?

Surchargeons la méthode getCssReferences de la classe de rendu d’édition des menus MenuEditRender pour injecter des feuilles de style personnalisées dans le formulaire d’un Smart Element Menu.

Recommandations

Si vous n’êtes pas familier avec la fonction getCssReferences, il est recommandé de lire la documentation associée disponible ici



























































































 
 
 
 
 
 
 
 
 
 


<?php

namespace Cogip\Restauratec\SmartStructures\Menu\Render;

use Anakeen\Core\Internal\SmartElement as InternalSmartElement;
use Anakeen\Ui\CommonRenderOptions;
use Anakeen\Ui\RenderAttributeNeeded;
use Anakeen\Ui\RenderOptions;
use Mediapost\Csm\Utils\FindAssets;
use SmartStructure\Fields\Menu as MenuFields;
use \Anakeen\Core\Internal\SmartElement;
use SmartStructure\Mask;

class MenuEditRender extends \Anakeen\Ui\DefaultConfigEditRender
{
    public function getOptions(\Anakeen\Core\Internal\SmartElement $document): RenderOptions
    {
        $options = parent::getOptions($document);
        //Mis en place des descriptions par la function setDescription
        $options->frame(MenuFields::menu_frame)
            ->setDescription("<p>Une proposiion de repas pour client</p>",
            CommonRenderOptions::topPosition);
        $options->arrayAttribute(MenuFields::menu_composition)
            ->setDescription("<p>La liste des divers mets qui composent le repas</p>",
            CommonRenderOptions::bottomPosition);
        $options->arrayAttribute(MenuFields::menu_composition)
            ->setTemplate('
         <table class="dcpArray__table"" rules="all" >
            <thead>
                <tr>
                <th/>
                    <th class="dcpArray__head__cell" style="display: block; text-align: center">
                       {{attributes.menu_plat.label}} / {{attributes.menu_boisson.label}}
                    </th>
                </tr>
            </thead>
            <tbody>
            {{#attribute.rows}}
                <tr>
                    {{#attribute.isWriteMode}}
                        <td>
                            {{{rowTools}}}
                        </td>
                    {{/attribute.isWriteMode}}
                    <td  style="display: block; height: 100px">
                        <div style="margin: 5px">
                        {{{content.menu_plat.htmlContent}}}
                        </div>
                        <div style="margin: 5px">
                        {{{content.menu_boisson.htmlContent}}}
                        </div>
                    </td>
                </tr>
            {{/attribute.rows}}
            </tbody>
        </table>
        <div>
            {{#attribute.isWriteMode}}
                {{{attribute.tableTools}}}
            {{/attribute.isWriteMode}}
        </div>
     ');
        $options->text(MenuFields::menu_title)
            ->setDescription("<p>Le nom d’un menu</p>",
            CommonRenderOptions::clickPosition);
        //Mis en place des descriptions par le Smart Element Menu_discount_description_1
        /** @var SmartElement $menuDescriptions */
        $menuDescriptions = \Anakeen\Core\SEManager::getDocument("Menu_discount_description_3");
        if ($menuDescriptions) {
            $this->applyRenderDescription($menuDescriptions, $options);
            }
        return $options;
    }

    /**
     * @param InternalSmartElement $document
     * @param Mask|null $mask
     * @return RenderAttributeNeeded
     * @throws \Anakeen\Exception
     * @throws \Anakeen\Ui\Exception
     */
    public function getNeeded(InternalSmartElement $document, Mask $mask = null): RenderAttributeNeeded
    {
        $neededAttributes = parent::getNeeded($document);
        $neededAttributes->setNeeded(MenuFields::menu_discount,true);
        $neededAttributes->setNeeded(MenuFields::menu_plat,true);
        return $neededAttributes;
    }


    /**
     * @param SmartElement|null $document
     * @return array
     */
    public function getCssReferences(\Anakeen\Core\Internal\SmartElement $document = null): array
    {
        $css = parent::getCssReferences($document);
        $css["menu"] = "\menuEdit.css";
        return $css;
    }
}

La feuille CSS menuEdit.css est placé sous src/public

.dcpFrame {
  border: 1px solid #0f6674;
}
.dcpArray__label {
  font-style: italic;
}

Vous pouvez maintenant déployer vos modifications :

npx @anakeen/anakeen-cli deploy -c http://localhost:8080/control -s . -u admin -p anakeen --reinstall

Et voir le résultat sur un MENU en création ou modification :

http://localhost:8080/api/v2/smart-elements/MENU/views/!defaultCreation.html

AddCSS

Et ensuite ?

Comment ajouter des messages en provenance du serveur après une sauvegarde ?