Evolution #143: Commentaires sur un élément

app/Resources/translations/elements.fr.yml

     hideare:            Cacher les commentaires
     add_submit:         Commenter
     add_cancel:         Annuler
+    edit_submit:        Envoyer
+    edit_cancel:        Annuler
     add_error:
       min:              Le commentaire doit être de %limit% caractéres minimum
+      max:              Le commentaire doit être de %limit% caractéres maximum
+  
+comment:
+  edit:
+    link:               Modifier votre commentaire
+  remove:
+    link:               Supprimer votre commentaire
   
 elements:
   ajax:

app/Resources/translations/messages.fr.yml

 
 Username:     Nom d'utilisateur
+

src/Muzich/CommentBundle/Controller/CommentController.php

 class CommentController extends Controller
 {
   
-  public function addAction($element_id)
+  public function addAction($element_id, $token)
   {
     if (($response = $this->mustBeConnected(true)))
     {
     }
     
     if (!($element = $this->getDoctrine()->getRepository('MuzichCoreBundle:Element')
-      ->findOneById($element_id)))
+      ->findOneById($element_id)) || $this->getUser()->getPersonalHash() != $token)
     {
-      throw $this->createNotFoundException('Not found');
+      return $this->jsonResponse(array(
+        'status' => 'error',
+        'errors' => array('NotFound')
+      ));
     }
+    
+    $length = strlen((($comment = $this->getRequest()->request->get('comment'))));
         
     // 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')
-    )
+    if ($length  < $this->container->getParameter('comment_add_min_length'))
     {
+      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'
+        )
+      )));
+    }
+    if ($length > $this->container->getParameter('comment_add_max_length'))
+    {
+      return $this->jsonResponse(array(
+        'status' => 'error',
+        'errors' => array($this->trans(
+          'element.comments.add_error.max', 
+          array(
+            '%limit%' => $this->container->getParameter('comment_add_max_length')
+          ), 
+          'elements'
+        )
+      )));
+    }
+    
       
-      // 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();
-      
+    // 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:li.comment.html.twig', array(
+      'comment'     => $cm->getLast(),
+      'element_id'  => $element->getId()
+    ))->getContent();
+
+    return $this->jsonResponse(array(
+      'status' => 'success',
+      'html'   => $html
+    ));
+         
+  }
+  
+  public function deleteAction($element_id, $date, $token)
+  {
+    if (($response = $this->mustBeConnected(true)))
+    {
+      return $response;
+    }
+    
+    if (!($element = $this->getDoctrine()->getRepository('MuzichCoreBundle:Element')
+      ->findOneById($element_id)) || $this->getUser()->getPersonalHash() != $token)
+    {
       return $this->jsonResponse(array(
-        'status' => 'success',
-        'html'   => $html
+        'status' => 'error',
+        'errors' => array('NotFound')
       ));
+    }
+    
+    // On met a jour les commentaires
+    $cm = new CommentsManager($element->getComments());
+    $cm->delete($this->getUserId(), $date);
+    $element->setComments($cm->get());
       
+    $this->getDoctrine()->getEntityManager()->persist($element);
+    $this->getDoctrine()->getEntityManager()->flush();
+    
+    return $this->jsonResponse(array(
+      'status' => 'success'
+    ));
+  }
+  
+  public function editAction($element_id, $date, $token)
+  {
+    if (($response = $this->mustBeConnected(true)))
+    {
+      return $response;
+    }
+    
+    if (!($element = $this->getDoctrine()->getRepository('MuzichCoreBundle:Element')
+      ->findOneById($element_id)) || $this->getUser()->getPersonalHash() != $token)
+    {
+      return $this->jsonResponse(array(
+        'status' => 'error',
+        'errors' => array('NotFound')
+      ));
     }
-    else
+    
+    $cm = new CommentsManager($element->getComments());
+    $comment = $cm->get($cm->getIndex($this->getUserId(), $date));
+    
+    $html = $this->render('MuzichCommentBundle:Comment:edit.html.twig', array(
+      'comment'     => $comment,
+      'element_id'  => $element->getId(),
+      'date'        => $date
+    ))->getContent();
+    
+    return $this->jsonResponse(array(
+      'status' => 'success',
+      'html'   => $html
+    ));
+  }
+  
+  public function updateAction($element_id, $date, $token, $dom_id)
+  {
+    if (($response = $this->mustBeConnected(true)))
+    {
+      return $response;
+    }
+    
+    if (!($element = $this->getDoctrine()->getRepository('MuzichCoreBundle:Element')
+      ->findOneById($element_id)) || $this->getUser()->getPersonalHash() != $token)
     {
       return $this->jsonResponse(array(
         'status' => 'error',
+        'errors' => array('NotFound')
+      ));
+    }
+        
+    // TODO: Faire un objet pour le formulaire ajout de commentaire
+    $length = strlen((($comment = $this->getRequest()->request->get('comment'))));
+        
+    // TODO: Faire un objet pour le formulaire ajout de commentaire
+    if ($length  < $this->container->getParameter('comment_add_min_length'))
+    {
+      return $this->jsonResponse(array(
+        'status' => 'error',
+        'dom_id' => $dom_id,
         'errors' => array($this->trans(
           'element.comments.add_error.min', 
           array(
         )
       )));
     }
+    if ($length > $this->container->getParameter('comment_add_max_length'))
+    {
+      return $this->jsonResponse(array(
+        'status' => 'error',
+        'dom_id' => $dom_id,
+        'errors' => array($this->trans(
+          'element.comments.add_error.max', 
+          array(
+            '%limit%' => $this->container->getParameter('comment_add_max_length')
+          ), 
+          'elements'
+        )
+      )));
+    }
+      
+    // On met a jour les commentaires
+    $cm = new CommentsManager($element->getComments());
+    $cm->update($this->getUser(), $date, $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->get($cm->getIndex($this->getUserId(), $date)),
+      'element_id'  => $element->getId()
+    ))->getContent();
+
+    return $this->jsonResponse(array(
+      'status' => 'success',
+      'dom_id' => $dom_id,
+      'html'   => $html
+    ));
     
   }
   

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

 
 ajax_add_comment:
-  pattern: /ajax/comment/add/{element_id}
-  defaults: { _controller: MuzichCommentBundle:Comment:add }
+  pattern: /ajax/comment/add/{element_id}/{token}
+  defaults: { _controller: MuzichCommentBundle:Comment:add }
+  
+ajax_edit_comment:
+  pattern: /ajax/comment/edit/{element_id}/{date}/{token}
+  defaults: { _controller: MuzichCommentBundle:Comment:edit }
+  
+ajax_update_comment:
+  pattern: /ajax/comment/update/{element_id}/{date}/{token}/{dom_id}
+  defaults: { _controller: MuzichCommentBundle:Comment:update }
+  
+ajax_delete_comment:
+  pattern: /ajax/comment/delete/{element_id}/{date}/{token}
+  defaults: { _controller: MuzichCommentBundle:Comment:delete }

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>
+<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>
+
+{% if app.user.id == comment.u.i %}
+  <a title="{{ 'comment.edit.link'|trans({}, 'elements') }}" class="comment_edit_link" 
+     href="{{ path('ajax_edit_comment', {'element_id': element_id, 'date':comment.d, 'token':app.user.getPersonalHash})  }}" style="display: none;"
+  >
+    <img src="{{ asset('bundles/muzichcore/img/1327151338_desktop.png') }}" alt="edit" />
+  </a>
+
+  <a title="{{ 'comment.remove.link'|trans({}, 'elements') }}" class="comment_remove_link" 
+     href="{{ path('ajax_delete_comment', {'element_id': element_id, 'date':comment.d, 'token':app.user.getPersonalHash})  }}" style="display: none;"
+  >
+    <img src="{{ asset('bundles/muzichcore/img/1327168960_fileclose.png') }}" alt="delete" />
+  </a>
+
+  <img 
+    class="comment_loader" 
+    style="display: none;" 
+    src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" 
+    alt="loading"
+  />
+{% endif %}

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

+<form 
+  id="edit_{{ comment.u.i }}_{{ comment.d|date_epurate }}"
+  action="{{ path('ajax_update_comment', {
+    'element_id':element_id, 
+    'date': date, 
+    'token':app.user.getPersonalHash,
+    'dom_id': comment.u.i~'_'~(comment.d|date_epurate)
+  }) }}" 
+  method="post" 
+  name="edit_comment"
+  class="edit_comment"
+>
+  {% include "MuzichCommentBundle:Comment:form.html.twig" with {
+    'submit_value' : 'element.comments.edit_submit'|trans({}, 'elements'),
+    'cancel_value' : 'element.comments.edit_cancel'|trans({}, 'elements'),
+    'comment_value' : comment.c
+  } %}
+</form>

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

+<textarea name="comment">{% if comment_value is defined %}{{ comment_value }}{% endif %}</textarea>
+<div class="buttons">
+  <input 
+    type="submit" 
+    value="{{ submit_value }}" 
+    class="button"
+  />
+  <br />
+  <input 
+    type="button" 
+    value="{{ cancel_value }}" 
+    class="button cancel"
+  />
+</div>

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

+<li class="comment" id="{{ comment.u.i }}_{{ comment.d|date_epurate }}">
+  {% include "MuzichCommentBundle:Comment:comment.html.twig" %}  
+</li>

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

     $this->entity_manager->persist($element);
   }
   
-  protected function dateD($ecal)
+  protected function dateD($ecal, $micro = false)
   {
+    if ($micro)
+    {
+      return date('Y-m-d H:i:s u', time() - 60 * 60 *24 * $ecal);
+    }
     return date('Y-m-d H:i:s', time() - 60 * 60 *24 * $ecal);
   }
   

src/Muzich/CoreBundle/Extension/MyTwigExtension.php

   {
     return array(
       'var_dump'               => new \Twig_Filter_Function('var_dump'),
-      'date_or_relative_date'  => new \Twig_Filter_Method($this, 'date_or_relative_date')
+      'date_or_relative_date'  => new \Twig_Filter_Method($this, 'date_or_relative_date'),
+      'date_epurate'            => new \Twig_Filter_Method($this, 'date_epurate')
     );
   }
   
   {
     return 'my_twig_extension';
   }
+  
+  public function date_epurate($date)
+  {
+    $date = str_replace(' ', '', $date);
+    $date = str_replace('-', '', $date);
+    $date = str_replace(':', '', $date);
+    return $date;
+  }
 
 }

src/Muzich/CoreBundle/Managers/CommentsManager.php

   {
     if (!$date)
     {
-      $date = date('Y-m-d H:i:s');
+      $date = date('Y-m-d H:i:s u');
     }
     
     $this->comments[] = array(
     return $this->get(count($this->comments)-1);
   }
   
+  public function update($user, $date, $comment_c)
+  {
+    $comments = array();
+    foreach ($this->comments as $comment)
+    {
+      if ($comment['u']['i'] == $user->getId() && $comment['d'] == $date)
+      {
+        $comments[] = array(
+          "u" => array(
+            "i" => $user->getId(),
+            "s" => $user->getSlug(),
+            "n" => $user->getName()
+          ),
+          "u" => date('Y-m-d H:i:s u'),
+          "d" => $date,
+          "c" => $comment_c
+        );
+      }
+      else
+      {
+        $comments[] = $comment;
+      }
+    }
+    $this->comments = $comments;
+  }
+  
+  public function delete($user_id, $date)
+  {
+    $comments = array();
+    foreach ($this->comments as $comment)
+    {
+      if ($comment['u']['i'] != $user_id || $comment['d'] != $date)
+      {
+        $comments[] = $comment;
+      }
+    }
+    $this->comments = $comments;
+  }
+  
+  public function getIndex($user_id, $date)
+  {
+    foreach ($this->comments as $i => $comment)
+    {
+      if ($comment['u']['i'] == $user_id && $comment['d'] == $date)
+      {
+        return $i;
+      }
+    }
+    return null;
+  }
+  
   /**
    *
    * @return array

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

     <ul class="comments">
     {% if element.comments|length %}
       {% for comment in element.comments %}
-        {% include "MuzichCommentBundle:Comment:comment.html.twig" %}
+        {% include "MuzichCommentBundle:Comment:li.comment.html.twig" with {'element_id' : element.id} %}
       {% endfor %}
     {% endif %}
     </ul>
     </div>
       
     <form 
-      action="{{ path('ajax_add_comment', {'element_id':element.id}) }}" 
+      action="{{ path('ajax_add_comment', {'element_id':element.id, 'token':app.user.getPersonalHash}) }}" 
       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>
+      {% include "MuzichCommentBundle:Comment:form.html.twig" with {
+        'submit_value' : 'element.comments.add_submit'|trans({}, 'elements'),
+        'cancel_value' : 'element.comments.add_cancel'|trans({}, 'elements')
+      } %}
     </form>
       
     <a href="#add_comment_{{ element.id }}" class="add_comment">

web/bundles/muzichcore/css/main.css

   color: #868686;
 }
 
-div.comments form.add_comment textarea
+div.comments form.add_comment textarea, div.comments form.edit_comment textarea
 {
   width: 80%;
   height: 48px;
 }
 
-div.comments form.add_comment div.buttons
+div.comments form.add_comment div.buttons, div.comments form.edit_comment div.buttons
 {
   float: right;
   text-align: center;
 }
 
-div.comments form.add_comment div.buttons input
+div.comments form.add_comment div.buttons input, div.comments form.edit_comment div.buttons input
 {
   margin-top: 1px;
   margin-bottom: 1px;

web/bundles/muzichcore/js/muzich.js

       li_element.find('form.add_comment textarea').val('');
     }
    
+   // Modifier et supprimer
+   // Affichage du bouton Modifier et Supprimer
+    $('ul.comments li.comment').live({
+      mouseenter:
+        function()
+        {
+          $(this).find('a.comment_edit_link').show();
+          $(this).find('a.comment_remove_link').show();
+        },
+      mouseleave:
+        function()
+        {
+          if (!$(this).find('a.comment_edit_link').hasClass('mustBeDisplayed'))
+          {
+            $(this).find('a.comment_edit_link').hide();
+          }
+          if (!$(this).find('a.comment_remove_link').hasClass('mustBeDisplayed'))
+          {
+            $(this).find('a.comment_remove_link').hide();
+          }
+        }
+      }
+    );
+      
+    // Supprimer
+    $('a.comment_remove_link').jConfirmAction({
+    question : "Vraiment supprimer ?", 
+    yesAnswer : "Oui", 
+    cancelAnswer : "Non",
+    onYes: function(link){
+      
+      li = link.parent('li.comment');
+      li.find('img.comment_loader').show();
+      
+      $.getJSON(link.attr('href'), function(response){
+        
+        li.find('img.comment_loader').hide();
+        
+        if (response.status == 'mustbeconnected')
+        {
+          $(location).attr('href', url_index);
+        }
+        
+        if (response.status == 'success')
+        {
+          li.remove();
+        }
+      });
+
+      return false;
+    },
+    onOpen: function(link){
+      li = link.parent('li.comment');
+      li.find('a.comment_edit_link').addClass('mustBeDisplayed');
+      li.find('a.comment_remove_link').addClass('mustBeDisplayed');
+    },
+    onClose: function(link){
+      li = link.parent('li.comment');
+      li.find('a.comment_edit_link').removeClass('mustBeDisplayed');
+      li.find('a.comment_remove_link').removeClass('mustBeDisplayed');
+      li.find('a.comment_edit_link').hide();
+      li.find('a.comment_remove_link').hide();
+    }
+  });
+  
+  comments_edited = new Array();
+  
+  // Modification
+  // Ouverture du formulaire de modification
+  $('a.comment_edit_link').live('click', function(){
+    
+    link = $(this);
+    li = link.parent('li.comment');
+    // On garde en mémoire l'élément édité en cas d'annulation
+    comments_edited[li.attr('id')] = li.html();
+    loader = li.find('img.comment_loader');
+    li.html(loader);
+    li.find('img.comment_loader').show();
+    
+    $.getJSON($(this).attr('href'), function(response) {
+      
+      if (response.status == 'mustbeconnected')
+      {
+        $(location).attr('href', url_index);
+      }
+      
+      li.html(response.html);
+      // On rend ce formulaire ajaxFormable
+      $('li#'+li.attr('id')+' form.edit_comment input[type="submit"]').live('click', function(){
+        li_current = $(this).parent('div').parent('form').parent('li');
+        li_current.prepend(loader);
+        li_current.find('img.comment_loader').show();
+      });
+      
+      li.find('form.edit_comment').ajaxForm(function(response){
+        
+        li = $('li#'+response.dom_id);
+        li.find('img.comment_loader').hide();
+        
+        if (response.status == 'mustbeconnected')
+        {
+          $(location).attr('href', url_index);
+        }
+        
+        if (response.status == 'success')
+        {
+          li.html(response.html);
+          delete(comments_edited[li.attr('id')]);
+        }
+        else if (response.status == 'error')
+        {
+          li.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.prepend(ul_errors);
+        }
+      });
+      
+    });
+    return false;
+  });
+  
+  // Annulation d'un formulaire de modification d'un comment
+  $('form.edit_comment input.cancel').live('click', function(){
+    var li = $(this).parent('div').parent('form').parent('li');
+    li.html(comments_edited[li.attr('id')]);
+    delete(comments_edited[li.attr('id')]);
+  });
+   
  });