• la remise en état des liens modifier/supprimer
• l’ajout d’un lien pour ajouter un enfant à une catégorie
• la sauvegarde de l’ordre de l’arbre

Ya du boulot, alors on se lance.

Le seul problème à la remise des liens modifier/supprimer c’est leur structure HTML, en ul/li qui pose souci avec le plugin NestedSortable. On va donc revoir la chose en les mettant dans un « p » avec de simples liens. Pour cela on va éditer dans notre module le fichier lib/categoriesGeneratorHelper.class.php (qui doit être vierge pour l’instant) et on va surcharger les méthodes, linkToEdit et linkToDelete:

  public function linkToEdit($object, $params)
  {
    return '<span class="sf_admin_action_edit">'.link_to(__($params['label'], array(), 'sf_admin'), $this->getUrlForAction('edit'), $object).'</span>';
  }
 
public function linkToDelete($object, $params)
  {
    if ($object->isNew())
    {
      return '';
    }
 
    return '<span class="sf_admin_action_delete">'.link_to(__($params['label'], array(), 'sf_admin'), $this->getUrlForAction('delete'), $object, array('method' => 'delete', 'confirm' => !empty($params['confirm']) ? __($params['confirm'], array(), 'sf_admin') : $params['confirm'])).'</span>';
  }

Les seules modifications concernant le changement d’un li par un span.

Maintenant on va modifier le partial _list_td_actions.php et donc le rajouter dans notre répertoire templates de notre module:

<p class="sf_admin_td_actions list_action">
  <span class="sf_admin_action_new">
    <?php echo link_to(__('Ajout Enfant'), 'categories/addChild?id='.$categories->getId(), array(), 'messages') ?>
  </span>
  <?php echo $helper->linkToEdit($categories, array(  'params' =>   array(  ),  'class_suffix' => 'edit',  'label' => 'Edit',)) ?>
  <?php echo $helper->linkToDelete($categories, array(  'params' =>   array(  ),  'confirm' => 'Are you sure?',  'class_suffix' => 'delete',  'label' => 'Delete',)) ?>
</p>

A noter qu’on a ajouté au passage l’action Ajout d’enfant.
Il nous reste plus qu’à rajouter l’appel à ce partial dans notre _tree.php:

[...]
<div class="sort-handle">
   <?php echo $node->getTitre() ?>
</div>
<?php include_partial('categories/list_td_actions', array('categories' => $node, 'helper' => $helper)) ?>
[...]

Le résultat nous donne ceci:

Alors oui c’est moche, mais ca fonctionne! Maintenant, on passe un petit coup de CSS comme d’habitude:

.list_action {
	position: absolute;
	right: 0; top:0;
	width: 350px;
}
 
.list_action span {
	padding: 0 10px 0 0;
}
 
.current-nesting {
	background-color: #FFE;
}
 
#sf_admin_container #sf_admin_content p span.sf_admin_action_new a {
	background:transparent url(/sfPropelPlugin/images/new.png) no-repeat scroll 0 0;
}
#sf_admin_container #sf_admin_content p span.sf_admin_action_edit a {
	background:transparent url(/sfPropelPlugin/images/edit.png) no-repeat scroll 0 0;
}
#sf_admin_container #sf_admin_content p span.sf_admin_action_delete a,.link_delete {
	background:transparent url(/sfPropelPlugin/images/delete.png) no-repeat scroll 0 0;
}

Et la magie opère de nouveau:

On va maintenant créer les actions liées à cette nouvelle action dans notre fichier d’actions de notre module:

public function executeAddChild(sfWebRequest $request)
  {
    $this->categories = $this->getRoute()->getObject();
 
    // On récupère le parent pour insérer la nouvelle catégorie sous ce parent et on le fait transiter via session 
    $this->getUser()->setAttribute('categories.addChild',$this->categories->getPrimaryKey(), 'admin_module');
 
    $this->form = $this->configuration->getForm();
    $this->setTemplate('new');
  }
 
  /**
   * On surcharge le processForm pour récupérer le parent de la catégorie à ajouter s'il existe
   *
   * @param sfWebRequest $request
   * @param sfForm $form
   */
  protected function processForm(sfWebRequest $request, sfForm $form)
  {
    if ($parent = $this->getUser()->getAttribute('categories.addChild', null, 'admin_module'))
    {
      $this->getUser()->getAttributeHolder()->remove('categories.addChild', null, 'admin_module');
      $root = CategoriesPeer::retrieveByPk($parent);
      $form->getObject()->insertAsLastChildOf($root);
    }
 
    parent::processForm($request,$form);
  }

Si vous cliquez maintenant sur « Ajouter un enfant’ d’une des catégories déjà présente vous obtenez alors:

Vu que les tree left et tree right sont définis par Propel, on va les supprimer du formulaire.
Dans notre CategoriesForm.class.php on rajoute:

public function configure()
  {
    unset(
      $this['tree_left'],
      $this['tree_right']
    );
  }

Maintenant, il ne manque plus qu’à pouvoir sauvegarder les modifications d’ordre effectuées via javascript. Pour cela on va rajouter une batch actions (elles soumettent un formulaire, il sera ainsi plus facile de faire passer les modifications faites à l’arbre).
Dans notre generator.yml on rajoute dans l’entrée list:

  batch_actions:
    saveOrder:
      label: Sauvegarder ordre
      action: saveOrder

Et dans notre partial _list.php, juste avant le javascript:

<div>
	<input type="hidden" id="hashValue" name="hashValue" value="" />
	<input type="hidden" name="ids" value="<?php echo (!empty($item)?$item->getPrimaryKey():'1') ?>" />
</div>

Le premier pour récupérer la sérialisation de la nestedlist en javascript, le deuxième pour passer outre le système de batch qui demande de sélectionner au moins un ids pour lancer l’action ensuite.

On obtient donc:

Il ne reste plus qu’à faire l’action correspondante dans notre fichier d’actions:

public function executeBatchSaveOrder(sfWebRequest $request)
  {
    $hash = $request->getParameter('hashValue');
    parse_str($hash, $list);
    CategoriesPeer::saveOrder($list);
    $this->getUser()->setFlash('notice', 'Ordre mis à jour');
  }

Et les fonctions de sauvegarde dans notre modèle. La fonction mère dans le CategoriesPeer.php:

public static function saveOrder($hash)
  {
    $root = self::retrieveRoot();
 
    foreach ($hash['main_list'] as $categorie)
    { 
      $u = self::retrieveByPk($categorie['id']);
 
      if (!empty($categorie['children']))
      {
        $u->saveChildren($categorie['children']);
      }
 
      $u->moveToLastChildOf($root);
      $u->save();
    }
  }

Qui gère les « racines » et son équivalent récursif dans le model Categories.php:

       public function saveChildren($children)
	{
	  foreach($children as $child)
	  {
	    $item = CategoriesPeer::retrieveByPk($child['id']);
	    if (!empty($child['children']))
	    {
	      $item->saveChildren($child['children']);
	    }
	    $item->moveToLastChildOf($this);
            $item->save();
	  }
	}

Et voilà! Vous pouvez maintenant déplacer vos catégories et sauvegarder leur position dans l’arbre.

Evidemment toute question, suggestion sont bien sûr les bienvenues. Je pense mettre les source et une démo en ligne très bientôt, voir en faire un plugin si jamais je rencontre un réel intérêt pour ce genre de gadget.

En attendant, une petit illustration en vidéo:

Ici, le principe va être justement de gérer un arbre de catégories, un cas qui peut revenir assez régulièrement. A noter que le concept reprend la version doctrine de redotheoffice avec une modification quant au plugin jquery utilisé. En effet, on essaiera ici de gérer l’ordre des catégories également par drag and drop.

En général, quand on part la tête dans le guidon, on crée une table categories, et pour créer la notion de parent, on applique une clé étrangère sur cette même table. Oui mais voilà, autant pour les opérations de suppression et d’ajout, voir même de déplacement dans l’arbre cette démarche est très performante, autant quand il s’agit d’afficher l’arbre, la galère commence.
Et pourtant, c’est bien cette deuxième qu’on fait à chaque affichage de page!

Il existe pourtant une alternative à cette clé étrangère: les Nested Set. En français, les représentations intervallaires. Le but n’étant pas d’expliquer dans le détail ce que c’est, je vous invite à faire un tour sur développez.com où on retrouve un très bon article illustré à ce sujet.

Brièvement, cette méthode consiste à rajouter des champs en base, left, right et scope permettant de retrouver ses petits. Le diagramme de developpez.com résume bien:

Ok, c’est bien, mais appliquer tout ça à symfony ca doit être lourd! Et bien nan, Propel dans sa dernière version (1.3) intègre déjà cet algorithme en tant que behavior. (Cela sous entend qu’il faut utiliser symfony 1.2)

Pour se faire, on va donc créer un project vierge en 1.2 histoire d’éviter tout parasitage qu’on mènera en 2 parties. La première pour la partie visuel, la deuxième pour la partie code admin generator.

Voici le résultat attendu à la fin de cette première partie:

On se lance donc, notre beau projet est créé, on ouvre le schema.yml que l’on modifie comme ceci:

propel:
  categories:
    _attributes: { phpName: Categories, treeMode: NestedSet }
    id: ~
    titre: { type: VARCHAR, size: '50', required: true }
    tree_left: { type: INTEGER, size: '11', required: true, nestedSetLeftKey: true }
    tree_right: { type: INTEGER, size: '11', required: true, nestedSetRightKey: true }
    tree_parent: { type: INTEGER, size: '11', required: true }

Vous noterez donc l’ajout du treeMode et la définition des nesetSetLeftKey et nestedSetRightKey, le tree_parent, n’est là que pour un certain confort à l’affichage, mais pas indispensable.

Votre schema ainsi terminé (vous pouvez y rajouter d’autres tables, même pas peur), on construit la base correspondante (en ayant au préalable configuré notre database.yml évidemment:

php symfony propel:build-all

Et là on constate dans notre dossier lib, deux nouvelles classes que vous n’avez sans doute jamais vu:

- BaseCategoriesNestedSet
- BaseCategoriesNestedSetPeer
qui viennent se placer entre entre les classes classiques et les classes « Base »

Afin de jouer rapidement, on va ajouter quelques valeurs test dans data/fixtures/fixtures.yml comme suit:

Categories:
  cat_1:
    titre: root
    tree_left: 1
    tree_right: 10
  cat_2:
    titre: Hi-Tech
    tree_left: 2
    tree_right: 7
  cat_3:
    titre: Developpement
    tree_left: 3
    tree_right: 4
  cat_4:
    titre: Internet
    tree_left: 5
    tree_right: 6
  cat_5:
    titre: Culture
    tree_left: 8
    tree_right: 9

que l’on va charger dès à présent:

php symfony propel:data-load

A noter que la notion de root est ici très importante. En effet, j’ai choisi délibérément de travailler avec un seul scope (une seule racine) pour la simple et bonne raison que les manipulations entre scope sont très limitées et l’intérêt et de pouvoir y faire tout et n’importe quoi. Il nous faut donc un élément parent de tous, que l’on ne modifiera jamais, que l’on n’affichera jamais.

Maintenant, les choses sérieuses commencent. On va commencer par générer un module admin generator:

php symfony generate:app main
php symfony propel:generate-admin main Categories

Et vous devriez arriver via http://monlocal/categories sur quelque chose d’assez classique:

L’idée est maintenant d’inclure un plugin jquery qui va matérialiser notre arbre, propel ne s’occupant évidemment que de la logique métier.
J’ai choisi le très bon NestedSortable qui répond très bien en terme de performance et très flexible à configurer. Vous pouvez donc télécharger la dernière version. Seul bémol, il nécessite Interface, un équivalent à jquery UI, que l’on va donc télécharger également.
Pour jQuery, on laissera google faire.

On a donc nos js comme ceci:

et on les intègre à notre projet via notre view.yml (la notation en ligne étant plus claire à mon goût):

  javascripts: 
    - http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
    - interface.js
    - inestedsortable-1.0.1.pack.js

On va devoir maintenant modifier un peu quelques partials car le plugin jquery nécessite une imbrication de tag html, ici on utilisera ce qui semble être le plus apte sémantiquement parlant, des couples ul/li.

L’idée est donc d’afficher tout l’arbre quelque soit le nombre d’élément et de n’afficher que l’info qui nous interesse, en l’occurrence le titre. Première chose, voici la modification sur le generator.yml:

      list:
        peer_method: retrieveTree
        max_per_page: 99999
        display: [titre]

Vous n’avez maintenant plus qu’un seul élément affiché dans votre tableau, l’élément root et c’est normal.

La suite se passe dans le partial _list.php. Rapide brief pour ceux qui n’ont jamais modifier un partial de l’admin generator. On récupère la version qui est dans le dossier cache/[APP]/[ENV]/modules/auto[MODULE]/templates et on la copie dans notre dossier templates de notre module généré.

Une fois cette opération effectuée, rien n’a du changer, mais maintenant on a la possibilité de modifier le partial, et voici un extrait de ce qu’il faut modifier dans la balise tbody:

     <tbody>
        <tr>
            <td class="container_main_list" colspan="3">
              <?php foreach ($pager->getResults() as $i => $item): ?>
                <?php include_partial('categories/tree',array('tree' => $item, 'i' => $i, 'helper' => $helper)) ?>
              <?php endforeach; ?>
            </td>
        </tr>
      </tbody>

Puis dans la partie script tout en base (vous pouvez retirer l’ancienne fonction checkAll, on ne pourra plus s’en servir:

<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function()  {
  $('#main_list').NestedSortable(
    {
      accept: 'item_list',
      opacity: 0.6,
      autoScroll: true,
      revert: true,
      nestingPxSpace: '15',
      handle: '.sort-handle',
      currentNestingClass: 'current-nesting',
      noNestingClass: 'sf_admin_td_actions',
      onChange: function(serialized) {
	$('#hashValue').val(serialized[0].hash);
      } 
    }
  );
});
/* ]]> */
</script>

Bon si vous avez suivi, vous vous doutez que si vous actualisez, symfony vous dira gentiment qu’il manque le partial _tree.php. Et bien créons le! C’est la base même du tuto, car c’est un partial récursif, qui va donc s’auto inclure:

<ul <?php echo (!empty($i)?'id="main_list" ':'')?>class="page-list">
  <?php foreach($tree->getChildren() as $node): ?>
    <li class="item_list clear-element" id="ele-<?php echo $node->getPrimaryKey() ?>">
      <div class="sort-handle">
        <?php echo $node->getTitre() ?>
			</div>
      <?php if ($node->hasChildren()): ?>
            <?php include_partial('categories/tree',array('tree' => $node, 'helper' => $helper)) ?>
      <?php endif; ?>
    </li>
  <?php endforeach; ?>
</ul>

Et là, un petit coup de F5 et la magie comment à opérer. Vous pouvez maintenant déplacer les éléments de branche en branche tel un hibou… bref, ca fonctionne!

Un petit coup de css s’impose pour que ca se rapproche le plus possible des autres modules classiques:

#sf_admin_container table tr:hover {
	background-color: #FFF;
}
 
ul#menu li{
	list-style: none;
	display: inline;
	padding: 0 10px 0 0 ;
}
 
#admin_content ul {
	margin: 0;
	list-style-position: inside;
}
 
#admin_content ul#list-container {
	margin-left: 1em;
	background-color: #FFF ;
	padding: 10px ;
}
 
#admin_content ul li {
	list-style-position: inside;
}
 
li img {
	vertical-align: text-bottom ;
}
 
#list-container li span {
	cursor: pointer;
}
 
#sortHelper {
	background: #FFE;
}
 
#dragHelper {
	background-color: #EEE;
}
 
div.wrap {
	border:1px solid #BBBBBB;
	padding: 1em 1em 1em 1em;
}
#main_list,#contenu_list {
	width: 700px;
}
 
#main_list li {
	list-style-type: none;
	list-style-position: none;
}
 
.page-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}
 
.clear-element {
	clear: both;
	position: relative;
}
 
.sort-handle {
	cursor:move;
	margin: 0.25em 0 0 0;
	padding: 2px 0 2px 18px;
	background: #f3F3F3 left center url(../images/toggleexpanddark.png) no-repeat;
}
 
div.item-title {
	background-color: #DDD;
	margin: 0.25em 0 0 0;
	padding: 2px 0 2px 18px;
}
 
.list-action {
	/*background-color: #f3F3F3;*/
	position: absolute;
	right: 0; top:0;
	width: 350px;
}

Et l’image qui va bien (récupéré de redotheoffice):

Et voilà, la première étape s’achève ici, on peut s’amuser à déplacer ces éléments. La suite très prochainement, pour remettre les actions et ajouter une action pour sauvegarder l’arbre.

A noter que je ne détaille pas forcément toutes les étapes de création d’un projet symfony, Jobeet le fais si bien.

Évidemment, toutes remarques, questions, propositions, meilleurs solutions sont les bienvenues! Je suis aussi là pour apprendre : )