Blog Symfony - Lexik Montpellier » sortable http://www.lexik.fr/blog/symfony Blog sur le développement Web PHP Tue, 20 Jul 2010 08:35:36 +0000 en hourly 1 http://wordpress.org/?v=3.0 Liste d’objets ordonnable via AJAX partie 1 bis http://www.lexik.fr/blog/symfony/symfony/liste-d%e2%80%99objets-ordonnable-via-ajax-partie-1-bis-887 http://www.lexik.fr/blog/symfony/symfony/liste-d%e2%80%99objets-ordonnable-via-ajax-partie-1-bis-887#comments Tue, 18 Aug 2009 14:12:40 +0000 Nikaw http://www.lexik.fr/sfblog/?p=887 Ce post a pour but de reprendre la première version de la liste, en utilisant le plugin csDoctrineActAsSortablePlugin.
Ce plugin gère exactement la situation décrite dans la partie 1 en utilisant simplement un behavior dans le schema.

Voilà le lien du plugin : csDoctrineActAsSortablePlugin

Le readme est assez bien fait, cependant pour plus de clarté reprenons l’exemple précédent.

Dans un premier temps, révisons le schema.yml :
schema.yml

?View Code YAML
Item:
  actAs:
    Sortable: ~
  columns:
    name:
      type: string(255)

Le champs « rank » est remplacé par le behavior actAs: Sortable: ~

Il gère les ajout et les suppression, les surcharges des méthodes save() et delete() dans la classe Item.class.php ne sont plus utiles.

Il ajoute aussi des méthodes de tri, de classement, de positionnement etc. les méthodes déclarées dans la class ItemTable.class.php ne sont donc plus utiles non plus.

Nous allons voir maintenant à quel point le listing et les déplacements sont facilités grâce à ce plugin.
Commençons par les actions :
actions.class.php

?View Code PHP
public function executeIndex(sfWebRequest $request)
  {
    $this->items = Doctrine::getTable('Item')->findAllSorted('ASCENDING');
  }

La méthode findAllSorted() est fournie par le plugin et est associée à tout objet comportant le behavior actAs: Sortable dans le schéma.

La vue indexSuccess.php ne change pas.

En revanche, l’action déclenchée par le bouton oui :
actions.class.php:

?View Code PHP
public function executeOrder(sfWebRequest $request)
  {
    $this->elements = explode(",",$request->getParameter('elements'));
 
    Doctrine::getTable('Item')->sort($this->elements);
 
    $this->items = Doctrine::getTable('Item')->findAllSorted('ASCENDING');
    $this->setTemplate('index');
  }

Les changements sont Doctrine::getTable(‘Item’)->sort($this->elements);
Cette méthode est également liée au behavior actAs: Sortable, mais le plugin tel quel contient des erreurs.

Corrections des erreurs de la méthode sort() :
/plugins/csDoctrineActAsSortablePlugin/lib/template/Sortable.php, ligne 221

?View Code PHP
$connection->beginTransaction();

Là il manque juste la lettre « c ».

A la ligne 225 une variable $class est utilisée, mais elle n’est pas définie, ce qui génère une deuxième erreur.
Pour la corriger, il faut donc définir cette $class, qui est en fait une variable contenant la classe de l’objet à trier.
Ici il s’agirait de la classe « Item », mais soyons théorique : il faut se débrouiller pour récupérer la classe d’un objet quelconque.
Voici ma solution :
/plugins/csDoctrineActAsSortablePlugin/lib/template/Sortable.php, fonction sortTableProxy()

?View Code PHP
/**
   * Send an array from the sortable_element tag (symfony+prototype)and it will
   * update the sort order to match
   *
   * @param string $order
   * @return void
   * @author Travis Black
   */
  public function sortTableProxy($order)
  {
    /*
      TODO
        - Make this a transaction.
        - Add proper error messages.
    */
    //on récupère l'objet
    $object = $this->getInvoker();
    //on récupère la connection
    $connection = $object->getTable()->getConnection();
 
    $connection->beginTransaction();
 
    foreach ($order as $position => $id)
    {
      $newObject = $object->getTable()->findOneById($id);
 
      if ($newObject->get($this->_options['name']) != $position + 1)
      {
        $newObject->moveToPosition($position + 1);
      }
    }
 
    // Commit Transaction
    $connection->commit();
  }

Et voilà, la classe est corrigée, et l’action fonctionne à présent.

Les méthodes principales pour reclasser des éléments Sortable sont (comme indiquées dans le readme) :
pour les Record :
promote()
demote()
moveToFirst()
moveToLast()
moveToPosition($newPosition)

pour les Table :
sort($order)
findAllSorted($sortMode)
findAllSortedWithParent(…)

Voyons comment utiliser ces méthodes.
Mais d’abord, corrigeons encore quelques erreurs :
tout d’abord, le return de la méthode getFinalPosition() :

?View Code PHP
return (integer) $finalPosition;

Il faut faire un cast car cette méthode entraine une erreur de type.
Ensuite, dans la méthode moveToPosition() :

?View Code PHP
public function moveToPosition($newPosition)
  {
    if (!is_int($newPosition))
    {
      throw new Doctrine_Exception('moveToPosition requires an Integer as the new position. Entered ' . $newPosition);
    }
 
    $object = $this->getInvoker();
    $position = $object->get($this->_options['name']);
    $connection = $object->getTable()->getConnection();
 
    //begin Transaction
    $connection->beginTransaction();
 
    // Position is required to be unique. Blanks it out before it moves others up/down.
    $object->set($this->_options['name'], null);
    $object->save();
 
 
    if ($position > $newPosition)
    {
      $q = $object->getTable()->createQuery()
          ->update(get_class($object))
          ->set($this->_options['name'], $this->_options['name'].' + 1')
          ->where($this->_options['name'].' < ?',$position)
          ->andWhere($this->_options['name'].' >= ?',$newPosition)
          ->orderBy($this->_options['name'].' DESC');
 
      foreach ($this->_options['uniqueBy'] as $field)
      {
        $q->addWhere($field.' = '.$object[$field]);
      }
 
      $q->execute();
    }
    elseif ($position < $newPosition)
    {
      $q = $object->getTable()->createQuery()
          ->update(get_class($object))
          ->set($this->_options['name'], $this->_options['name'].' - 1')
          ->where($this->_options['name'].' > ?',$position)
          ->andWhere($this->_options['name'].' <= ?',$newPosition)
          ->orderBy($this->_options['name'].' ASC');
 
      foreach($this->_options['uniqueBy'] as $field)
      {
        $q->addWhere($field . ' = ' . $object[$field]);
      }
 
      $q->execute();
    }
 
    $object->set($this->_options['name'], $newPosition);
    $object->save();
 
    // Commit Transaction
    $connection->commit();
  }

Il manquait tout simplement le orderBy ASC dans le elseif, ce qui engendrait une erreur a cause du unique.

Maintenant que tout est juste, il ne reste plus qu’à créer une route et une action pour chaque méthode :
routing.yml

?View Code YAML
promote:
  url:        /promote/:id
  class:      sfDoctrineRoute
  params:     { module: item, action: promote }
  options:    { model: Item, type: object }
 
demote:
  url:        /demote/:id
  class:      sfDoctrineRoute
  params:     { module: item, action: demote }
  options:    { model: Item, type: object }
 
movetofirst:
  url:        /movetofirst/:id
  class:      sfDoctrineRoute
  params:     { module: item, action: moveToFirst }
  options:    { model: Item, type: object }
 
movetolast:
  url:        /movetolast/:id
  class:      sfDoctrineRoute
  params:     { module: item, action: moveToLast }
  options:    { model: Item, type: object }

actions.class.php

?View Code PHP
public function executePromote(sfWebRequest $request)
  {
    $this->item = $this->getRoute()->getObject();
    $this->item->promote();
    $this->items = $this->item->getTable()->findAllSorted('ASCENDING');
    $this->redirect('@homepage');
  }
 
  public function executeDemote(sfWebRequest $request)
  {
    $this->item = $this->getRoute()->getObject();
    $this->item->demote();
    $this->items = $this->item->getTable()->findAllSorted('ASCENDING');
    $this->redirect('@homepage');
  }
 
  public function executeMoveToFirst(sfWebRequest $request)
  {
    $this->item = $this->getRoute()->getObject();
    $this->item->moveToFirst();
    $this->items = $this->item->getTable()->findAllSorted('ASCENDING');
    $this->redirect('@homepage');
  }
 
  public function executeMoveToLast(sfWebRequest $request)
  {
    $this->item = $this->getRoute()->getObject();
    $this->item->moveToLast();
    $this->items = $this->item->getTable()->findAllSorted('ASCENDING');
    $this->redirect('@homepage');
  }
 
  public function executeOrder(sfWebRequest $request)
  {
    $this->elements = explode(",",$request->getParameter('elements'));
 
    Doctrine::getTable('Item')->sort($this->elements);
 
    $this->items = Doctrine::getTable('Item')->findAllSorted('ASCENDING');
    $this->redirect('@homepage');
  }

Et la vue qui correspond, avec les liens pour tester chaque méthode :
indexSuccess.php

?View Code PHP
<h1>Ordered list of items - AJAX enabled</h1>
<ul id="order">
  <?php foreach($items as $item): ?>
  <li id="<?php echo $item->getId() ?>">
      <?php echo $item->getName() ?> |
      <a href="<?php echo url_for('promote',$item) ?>">Promote</a> |
      <a href="<?php echo url_for('demote',$item) ?>">Demote</a> | 
      <a href="<?php echo url_for('movetofirst',$item) ?>">Move to first</a> |
      <a href="<?php echo url_for('movetolast',$item) ?>">Move to last</a> |
  </li>
  <?php endforeach ?>
</ul>
 
<input type="button" value="Enregistrer" onclick="submitOrder()"/>
<script type="text/javascript">
  $(function() {
    $("#order").sortable();
    $("#order").disableSelection();
  });
 
  function submitOrder()
  {
    var elements = "";
    var i=0;
    $('ul#order li').each(function()
    {
      elements += $(this).attr('id')+",";
      i++;
    })
//alert(elements.substr(0, elements.length-1));
$.post('<?php echo url_for('@order') ?>', { elements: elements.substr(0, elements.length-1) });
  }
</script>

Voilà donc tout ce qu’il faut pour utiliser basiquement ce plugin.

]]> http://www.lexik.fr/blog/symfony/symfony/liste-d%e2%80%99objets-ordonnable-via-ajax-partie-1-bis-887/feed 2 Liste d’objets ordonnable via AJAX partie 1 http://www.lexik.fr/blog/symfony/symfony/liste-dobjets-ordonnable-via-ajax-partie-1-870 http://www.lexik.fr/blog/symfony/symfony/liste-dobjets-ordonnable-via-ajax-partie-1-870#comments Wed, 12 Aug 2009 13:07:48 +0000 Nikaw http://www.lexik.fr/sfblog/?p=870 Aujourd’hui, voyons les fonctions sortables permettant de changer la position d’objet, de les ordonner et de sauvegarder l’ordre. C’est toujours pratique pour organiser une galerie photo, ou des éléments dans votre site internet.

Toutes les informations sur l’objet que nous souhaitons ordonner et/ou classer seront stockées en base :
schema.yml

?View Code YAML
Item:
  columns:
    name:
      type: string(255)
    rank:
      type: integer
      notnull: true
      unique: true


L’attribut ‘rank’ étant notnull, il faut forcément qu’il soit définit lors du save(), et étant unique on ne peut pas le définir par défaut.
Il faut donc surcharger la méthode save() :
Item.class.php

?View Code PHP
public function save(Doctrine_Connection $con = null)
{
   // les nouveaux enregistrements seront ajoutés à la suite, donc avec un rang élévé de 1 par rapport au rang max
   if($this->isNew())
   $this->setRank($this->getTable()->getMaxRank()+1);
 
   return parent::save($con);
}

Il faut aussi surchager la méthode delete() pour redescendre tous les éléments de rang supérieur lors de la suppression :
Item.class.php

?View Code PHP
public function delete(Doctrine_Connection $con = null)
{
   //tous les enregistrements au dessus descendent d'une place
  $items = Doctrine_Query->create()->from('Item')->where('rank > ?', $this->getRank())->execute();
 
   // delete the item
   $ret = parent::delete();
 
  foreach($items as $item)
  {
    $item->setRank($item->getRank()-1);
    $item->save();
  }
  return $ret;
}

Nous avons donc besoin d’une méthode permettant de récupérer le rang max :
ItemTable.class.php

?View Code PHP
//permet de récupérer le rang le plus haut
public function getMaxRank()
{
  $query = Doctrine_Query::create()
        ->select('MAX(rank)')
        ->from('Item i');
 
    $tmp = $query->execute(array(),Doctrine::HYDRATE_NONE);
 
    return $tmp[0][0];
}

Ici on passe en paramètre Doctrine::HYDRATE_NONE pour que la méthode ne retourne pas une collection. Le retour est un tableau à 2 entrées, mais la requête ne retournant qu’un résultat, il est disponible en [0][0].

Passons maintenant à la vue.
Il s’agit d’afficher la liste des items, tout simplement.
Mais pour les afficher, il faut les charger, voyons donc d’abord l’action :
actions.class.php

?View Code PHP
public function executeIndex()
{
  $this->items = Doctrine::getTable('Item')->getAllOrderedByRank();
}

Un coup d’oeil tout de suite sur la méthode getAllOrderedByRank() :
ItemTable.class.php

?View Code PHP
public function getAllOrderedByRank()
  {
    $query = Doctrine_Query::create()
        ->from('Item')
        ->orderBy('rank ASC');
 
    return $query->execute();
  }

Maintenant voyons la vue :
indexSuccess.php

?View Code PHP
<h1>Ordered list of items</h1>
<ul>
  <?php foreach($items as $item): ?>
  <li id="<?php echo $item->getId() ?>">
      <?php echo $item->getName() ?>
  </li>
  <?php endforeach ?>
</ul>

Passons maintenant aux choses sérieuses.
Le framework Javascript JQuery comporte des fonctions permettant de créer des liste dont les éléments sont « drag n’ droppables », ici c’est celles ci que l’on va utiliser.
Pour cela, il faut modifier la vue, afin de rajouter le script jquery, et de spécifier une id à la liste, id que le script jquery utilisera pour cibler la liste à ordonner :

?View Code PHP
<ul id="order">
  <?php foreach($items as $item): ?>
  <li id="<?php echo $item->getId() ?>">
      <?php echo $item->getName() ?>
  </li>
  <?php endforeach ?>
</ul>
 
<input type="button" value="Enregistrer" onClick="submitOrder()"/>
<script type="text/javascript">
  $(function() {
    //on spécifie la liste
    $("#order").sortable();
    $("#order").disableSelection();
  });
 
  function submitOrder()
  {
    //initialisation de la chaine contenant les id des items
    var elements = "";
 
    //parcours de la liste d'items
    $('ul#order li').each(function()
    {
      //pour chaque item, on concatene l'id dans la chaine
      elements += $(this).attr('id')+",";
    })
  //on execute l'action, a laquelle on envoie en param la liste des id
  $.post('<?php echo url_for('@order') ?>', { elements: elements.substr(0, elements.length-1) });
  }
</script>

Vous aurez noté l’ajout du bouton submit. C’est en cliquant sur celui-ci que l’on déclenche l’action qui sauvegarde le nouvel ordre des items.
Pour enregistrer l’ordre des items, chaque

  • a pour id l’id de l’item en question.
    Lors du click on exécute un script qui récupère toutes les id dans l’ordre et qui les concatène dans une chaîne de caractères en les séparant par des « , ». Cette chaîne est envoyée en paramètre à l’action.
    Routing :
    routing.yml

    ?View Code YAML
    order:
  url:      /order-item
  params:  { module: item, action: order }

    L’action :
    actions.class.php

    ?View Code PHP
    public function executeOrder(sfWebRequest $request)
  {
    //on récupère les id, que l'on place dans un tableau pour un parcours plus aisé
    $this->elements = explode(",",$request->getParameter('elements'));
 
    //on parcours les id, on récupère l'item correspondant, et on met son rang à jour
    foreach($this->elements as $key=>$element_id)
    {
      $item = Doctrine::getTable('Item')->find($element_id);
      $item->setRank($key);
      $item->save();
    }
 
    $this->items = Doctrine::getTable('Item')->getAllByRank();
 
    //on affiche à nouveau la liste des items, mis à jour
    $this->setTemplate('index');
  }

    Voilà, vous aurez noté que les nouveaux rangs sont tout simplement la position dans la liste, partant de 0.

    Dans la prochaine partie, nous verront comment implanter cette fonctionnalité dans votre backend avec l’admin generator

    ]]> http://www.lexik.fr/blog/symfony/symfony/liste-dobjets-ordonnable-via-ajax-partie-1-870/feed 3