Comment ? / How To ?

Comment ajouter un menu permettant d'accéder à une vue d'impression ?

Prérequis

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

Objectif

On souhaite ajouter un menu permettant d'afficher la vue imprimable d'un plat.

Comment créer un menu ?

Surchargeons la méthode getMenu de la classe de rendu de consultation des plats PlatViewRender pour définir un menu d’un Smart Element Plat.

Recommandations

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

On utilise la fonction setURL pour définir l’URL d’un menu et la fonction setTarget pour indiquer la cible d’un menu.

Recommandations

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

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

<?php

namespace Cogip\Restauratec\SmartStructures\Plat\Render;

use Anakeen\Core\Internal\SmartElement;
use Anakeen\Ui\BarMenu;
use Anakeen\Ui\ItemMenu;
use Anakeen\Ui\MenuTargetOptions;
use Cogip\Restauratec\SmartStructures\Consommable\Render\ConsommableViewRender;
use SmartStructure\Fields\Plat as PlatFields;

class PlatViewRender extends ConsommableViewRender
{

    public function getMenu(\Anakeen\Core\Internal\SmartElement $document): BarMenu
    {
        $menu = parent::getMenu($document);
        $printMenu = new ItemMenu("print", "print");
        $printMenu->setUrl("#action/printMe");
        $menu->appendElement($printMenu);
        return $menu;
    }

    public function getJsReferences(\Anakeen\Core\Internal\SmartElement $document = null)
    {
        $js = parent::getJsReferences($document);
        $js["printMe"] = "/plat/printme.js";
        return $js;
    }

}

De plus, on ajoute dans le fichier public/plat/printme.js avec le contenu suivant :

window.ank.smartElement.globalController.registerFunction("printMe", (controller) => {
  controller.addEventListener(
    "actionClick",
    {
      name: "printMePlease",
    },
    function (event, smartElement, parameters) {
      if (parameters.eventId === "printMe") {
        //Detecte si quelqu'un clic sur le menu printMe
        if (location.hash === "#printMe") {
          //Si jamais l'url contient déjà printMe on lance la vue d'impression
          window.print();
          return;
        }
        //Sinon on prend l'url du SmartElement
        window.open(smartElement.url + ".html#printMe", "_blank");
      }
    }
  );
  controller.addEventListener(
    "ready",
    {
      name: "printMeNow",
    },
    function () {
      //Si lorsque le SmartElement se charge on a le hash alors on lance la vue d'impression
      if (location.hash === "#printMe") {
        setTimeout(() => {
          window.print();
        }, 500);
      }
    }
  );
});

Vous pouvez maintenant déployer vos modifications :

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

Et ensuite ?

Comment déclencher un code javascript lors de la sélection d’un menu spécifique ?