Evolution #143: Commentaires sur un élément

app/Resources/translations/elements.fr.yml

     thereare:           Afficher les <strong>%count%</strong> commentaires
     hideis:             Cacher le commentaire
     hideare:            Cacher les commentaires
+    add_submit:         Commenter
+    add_cancel:         Annuler
+    add_error:
+      min:              Le commentaire doit être de %limit% caractéres minimum
   
 elements:
   ajax:

app/config/routing.yml

   resource: "@MuzichFavoriteBundle/Resources/config/routing.yml"
   prefix:   /{_locale}/
   defaults:
+    _locale: en|fr
+  
+MuzichCommentBundle:
+  resource: "@MuzichCommentBundle/Resources/config/routing.yml"
+  prefix:   /{_locale}/
+  defaults:
     _locale: en|fr

src/Muzich/CommentBundle/Controller/CommentController.php

 namespace Muzich\CommentBundle\Controller;
 
 use Muzich\CoreBundle\lib\Controller;
+use Muzich\CoreBundle\Managers\CommentsManager;
 
 class CommentController extends Controller
 {
   
+  public function addAction($element_id)
+  {
+    if (($response = $this->mustBeConnected(true)))
+    {
+      return $response;
+    }
+    
+    if (!($element = $this->getDoctrine()->getRepository('MuzichCoreBundle:Element')
+      ->findOneById($element_id)))
+    {
+      throw $this->createNotFoundException('Not found');
+    }
+        
+    // TODO: Faire un objet pour le formulaire ajout de commentaire
+    if (
+      strlen((($comment = $this->getRequest()->request->get('comment'))))
+      >= $this->container->getParameter('comment_add_min_length')
+    )
+    {
+      
+      // On met a jour les commentaires
+      $cm = new CommentsManager($element->getComments());
+      $cm->add($this->getUser(), $comment);
+      $element->setComments($cm->get());
+      
+      $this->getDoctrine()->getEntityManager()->persist($element);
+      $this->getDoctrine()->getEntityManager()->flush();
+      
+      // On récupère le html du li avec le comment pour la réponse
+      $html = $this->render('MuzichCommentBundle:Comment:comment.html.twig', array(
+        'comment'     => $cm->getLast()
+      ))->getContent();
+      
+      return $this->jsonResponse(array(
+        'status' => 'success',
+        'html'   => $html
+      ));
+      
+    }
+    else
+    {
+      return $this->jsonResponse(array(
+        'status' => 'error',
+        'errors' => array($this->trans(
+          'element.comments.add_error.min', 
+          array(
+            '%limit%' => $this->container->getParameter('comment_add_min_length')
+          ), 
+          'elements'
+        )
+      )));
+    }
+    
+  }
   
 }

src/Muzich/CommentBundle/Resources/config/routing.yml

+
+ajax_add_comment:
+  pattern: /ajax/comment/add/{element_id}
+  defaults: { _controller: MuzichCommentBundle:Comment:add }

src/Muzich/CommentBundle/Resources/views/Comment/comment.html.twig

+<li class="comment">
+  <a href="{{ path('show_user', {'slug': comment.u.s}) }}" >{{ comment.u.n }}</a>: 
+  {{ comment.c }}
+  <span class="datesince">({{ comment.d|date_or_relative_date }})</span>
+</li>

src/Muzich/CoreBundle/Controller/ElementController.php

    * 
    */
   public function editAction($element_id)
-  {    
+  {
     if (($response = $this->mustBeConnected()))
     {
       return $response;

src/Muzich/CoreBundle/DataFixtures/ORM/LoadElementData.php

     
     $cm = new CommentsManager();
     $cm->add($joelle, "J'aime bien quand ça tape. Ca rapelle ".
-      "le grincement sinistre des volets de vieilles".
+      "le grincement sinistre des volets de vieilles ".
       "maisons. D'ailleur j'ai repeint mon mur des shiots !", $this->dateD(180));
     
     $this->createElement('azyd_azylum_1', 'AZYD AZYLUM Live au Café Provisoire', 

src/Muzich/CoreBundle/Managers/CommentsManager.php

   }
   
   /**
+   * Retourne le dernier enregistrement commentaire
+   * 
+   * @return array
+   */
+  public function getLast()
+  {
+    return $this->get(count($this->comments)-1);
+  }
+  
+  /**
    *
    * @return array
    */
-  public function get()
+  public function get($index = null)
   {
-    return $this->comments;
+    if ($index === null)
+    {
+      return $this->comments;
+    }
+    
+    return $this->comments[$index];
   }
   
 }

src/Muzich/CoreBundle/Resources/views/SearchElement/element.html.twig

         {% if element.comments|length > 1 %}
           <a href="#hide_comments_{{ element.id }}" class="hide_comments" style="display: none;">
             {{ 'element.comments.hideare'|trans({}, 'elements') }}
-          </a>   
+          </a>  
           <a href="#comments_{{ element.id }}" class="display_comments">
             {{ 'element.comments.thereare'|trans({'%count%':element.comments|length}, 'elements') }}
-          </a> -
+          </a>
         {% elseif element.comments|length == 1 %}
           <a href="#hide_comments_{{ element.id }}" class="hide_comments" style="display: none;">
             {{ 'element.comments.hideis'|trans({}, 'elements') }}
-          </a>
+          </a> 
           <a href="#comments_{{ element.id }}" class="display_comments">
             {{ 'element.comments.thereis'|trans({}, 'elements') }}
-          </a> -
+          </a>
         {%endif %}
       {% endautoescape %}
                 
   {% endautoescape %}
 {% endif %}
 
-{% if element.comments|length %}
   <div class="comments" style="display: none;">
     <ul class="comments">
+    {% if element.comments|length %}
       {% for comment in element.comments %}
-        <li class="comment">
-          <a href="{{ path('show_user', {'slug': comment.u.s}) }}" >{{ comment.u.n }}</a>: 
-          {{ comment.c }}
-          <span class="datesince">({{ comment.d|date_or_relative_date }})</span>
-        </li>
+        {% include "MuzichCommentBundle:Comment:comment.html.twig" %}
       {% endfor %}
+    {% endif %}
     </ul>
       
-    
+    <div class="comments_loader">
+      <img class="comments_loader" style="display: none;" src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loading"/>
+    </div>
+      
+    <form 
+      action="{{ path('ajax_add_comment', {'element_id':element.id}) }}" 
+      method="post" 
+      name="add_comment"
+      style="display: none;"
+      class="add_comment"
+    >
+      <textarea name="comment"></textarea>
+      <div class="buttons">
+        <input 
+          type="submit" 
+          value="{{ 'element.comments.add_submit'|trans({}, 'elements') }}" 
+          class="button"
+        />
+        <br />
+        <input 
+          type="button" 
+          value="{{ 'element.comments.add_cancel'|trans({}, 'elements') }}" 
+          class="button cancel"
+        />
+      </div>
+    </form>
       
     <a href="#add_comment_{{ element.id }}" class="add_comment">
       {{ 'element.comments.add'|trans({}, 'elements') }}
     </a>
       
   </div>
-{% endif %}

src/Muzich/CoreBundle/lib/Controller.php

    *
    * @return Response
    */
-  protected function mustBeConnected()
+  protected function mustBeConnected($and_ajax = false)
   {
+    if ($and_ajax && !$this->getRequest()->isXmlHttpRequest())
+    {
+      throw $this->createNotFoundException('Ressource ajax uniquement.');
+    }
+    
     if ($this->getUser() == 'anon.')
     {
       if ($this->getRequest()->isXmlHttpRequest())

web/bundles/muzichcore/css/main.css

 	opacity: 0;
 }
 
-div.question .yes, .cancel {
+div.question .yes, div.question .cancel {
 	margin-top: .5em;
 	margin-right: .5em;
 	cursor: pointer;
   color: #868686;
 }
 
+div.comments form.add_comment textarea
+{
+  width: 80%;
+  height: 48px;
+}
+
+div.comments form.add_comment div.buttons
+{
+  float: right;
+  text-align: center;
+}
+
+div.comments form.add_comment div.buttons input
+{
+  margin-top: 1px;
+  margin-bottom: 1px;
+}
+
+div.comments_loader
+{
+  text-align: center;
+}
+
 /* END commentaires */

web/bundles/muzichcore/js/muzich.js

       li_element.find('a.hide_comments').show();
     }
   
-    function hide_comments(li)
+    function hide_comments(li_element)
     {
       li_element.find('div.comments').slideUp();
       li_element.find('a.display_comments').show();
       ));
     });
     
+    $('form.add_comment input[type="submit"]').live('click', function(){
+      $(this).parent('div').parent('form').parent('div.comments').find('img.comments_loader').show();
+    });
+        
     function display_add_comment(li_element)
     {
+      display_comments(li_element);
       li_element.find('a.add_comment').hide();
+      li_element.find('form.add_comment').show();
       
+      li_element.find('form.add_comment').ajaxForm(function(response) {
+        if (response.status == 'mustbeconnected')
+        {
+          $(location).attr('href', url_index);
+        }
+
+        li_element.find('img.comments_loader').hide();
+        
+        if (response.status == 'success')
+        {
+          li_element.find('form.add_comment').find('ul.error_list').remove();
+          li_element.find('div.comments ul.comments').append(response.html);
+          hide_add_comment(li_element);
+        }
+        else if (response.status == 'error')
+        {
+          li_element.find('form.add_comment').find('ul.error_list').remove();
+          ul_errors = $('<ul>').addClass('error_list');
+
+          for (i in response.errors)
+          {
+            ul_errors.append($('<li>').append(response.errors[i]));
+          }
+
+          li_element.find('form.add_comment').prepend(ul_errors);
+        }
+
+        return false;
+      });
+      
+    }
+    
+    $('form.add_comment input.cancel').live('click', function(){
+      li_element = $(this).parent('div').parent('form').parent('div.comments').parent('li.element');
+      hide_add_comment(li_element);
+    });
+    
+    function hide_add_comment(li_element)
+    {
+      li_element.find('a.add_comment').show();
+      li_element.find('form.add_comment').hide();
+      li_element.find('form.add_comment textarea').val('');
     }
    
  });