Evolution #357: Maj interface d'ajout

app/Resources/translations/userui.fr.yml

   tag_strict:       Chaques tag doit être trouvé
   
 element_add:
+  prop_tags:
+    text:     "Proposition de tags:"
   url:
     name:     http://
     help:     |

src/Muzich/CoreBundle/Controller/ElementController.php

 use Muzich\CoreBundle\Entity\ElementTagsProposition;
 use Symfony\Component\HttpFoundation\Request;
 use Muzich\CoreBundle\Entity\Element;
+use Muzich\CoreBundle\Util\TagLike;
 
 class ElementController extends Controller
 {
     ));
   }
   
+  protected function findTagsWithProposeds($tags)
+  {
+    $tag_like = new TagLike($this->getDoctrine());
+    $tags_with_likes = array();
+    foreach ($tags as $tag_name)
+    {
+      // On va determiner si on connais ces tags
+      $tag_like_tag = $tag_like->getSimilarTags($tag_name, $this->getUserId());
+      
+      // Premièrement: Si on a trouvé des équivalents en base
+      if (array_key_exists('tags', $tag_like_tag))
+      {
+        if (count($tag_like_tag['tags']))
+        {
+          // Deuxièmement: Si nos algorythmes on déterminés qu'on l'a en base
+          if ($tag_like_tag['same_found'])
+          {
+            // A ce moment là on le considère comme "bon"
+            // Et on prend le premier
+            $tags_with_likes[] = array(
+              'original_name' => $tag_name,
+              'like_found'    => true,
+              'like'          => $tag_like_tag['tags'][0]
+            );
+          }
+          // On considère ce tag comme inconnu, l'utilisateur peut toute fois 
+          // l'ajouté a notre base.
+          else
+          {
+            $tags_with_likes[] = array(
+              'original_name' => $tag_name,
+              'like_found'    => false,
+              'like'          => array()
+            );
+          }
+        }
+      }
+    }
+    
+    return $tags_with_likes;
+  }
   
   public function getDatasApiAction(Request $request)
   {
     $factory = new ElementManager($element, $this->getEntityManager(), $this->container);
     $factory->proceedFill($this->getUser());
     
+    // On gère les tags proposés
+    $tags_propositions = array();
+    if (count($tags = $element->getProposedTags()))
+    {
+      $tags_propositions = $this->findTagsWithProposeds($tags);
+    }
+    
     return $this->jsonResponse(array(
       'status' => 'success',
       'name'   => $element->getProposedName(),
-      'tags'   => $element->getProposedTags(),
+      'tags'   => $tags_propositions,
       'thumb'  => $element->getThumbnailUrl() 
     ));
   }

src/Muzich/CoreBundle/Entity/Element.php

     return null;
   }
   
+  /**
+   *
+   * @return type 
+   */
   public function getProposedTags()
   {
     if (count($tags = $this->getData(self::DATA_TAGS)))
     {
       return $tags;
     }
+    return array();
   }
   
 }

src/Muzich/CoreBundle/Resources/views/Element/form.add.html.twig

 
 {{ form_errors(form) }}
 
-<span class="help">{{ 'element_add.url.help'|trans({}, 'userui') }}</span>
-
-<div class="field fom_add_url">
-  {{ form_errors(form.url) }}
-  {{ form_widget(form.url, { 'attr': {
-    'placeholder': 'element_add.url.name'|trans({}, 'userui')},
-    'type': 'URL'
-  }) }}
+<div id="form_add_first_part">
+
+  <span class="help">{{ 'element_add.url.help'|trans({}, 'userui') }}</span>
+
+  <div class="field fom_add_url">
+    {{ form_errors(form.url) }}
+    {{ form_widget(form.url, { 'attr': {
+      'placeholder': 'element_add.url.name'|trans({}, 'userui')},
+      'type': 'URL'
+    }) }}
+
+    <a href="#" id="form_add_check_url" class="button">
+      {{ 'home.check_url'|trans({}, 'navigationui') }}
+    </a>
+
+
+    <img id="form_add_loader" class="tag_loader" style="display: none;" 
+      src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loading" 
+    />
+
+  </div>
     
-  <a href="#" id="form_add_check_url" class="button">
-    {{ 'home.check_url'|trans({}, 'navigationui') }}
-  </a>
 </div>
 
-<div class="form_add_second_part" style="display: none;">
-  <div class="field fom_add_name">
-    {{ form_errors(form.name) }}
-    {{ form_widget(form.name, { 'attr': {'placeholder': 'element_add.name.name'|trans({}, 'userui')} }) }}
-  </div>
+<div id="form_add_second_part" style="display: none;">
+  
+  <table>
+    <tr>
+      <td style="vertical-align: top;">
+        <div id="form_add_thumb">
+          <img src="{{ asset('bundles/muzichcore/img/nothumb.png') }}" />
+        </div>
+      </td>
+      <td style="vertical-align: top;">
+        <div class="field fom_add_name">
+          {{ form_errors(form.name) }}
+          {{ form_widget(form.name, { 'attr': {'placeholder': 'element_add.name.name'|trans({}, 'userui')} }) }}
+        </div>
 
-    {% include "MuzichCoreBundle:Tag:tagsPrompt.html.twig" with { 
-      'form_name'     : form_name
-    } %}
+          <p id="form_add_prop_tags_text" style="display: none;">
+            {{ 'element_add.prop_tags.text'|trans({}, 'userui') }}
+          </p>
+          <ul id="form_add_prop_tags" style="display: none;"></ul>
 
-    {{ form_widget(form.tags, { 'attr': {'class': 'tagBox_tags_ids'} }) }}
+          {% include "MuzichCoreBundle:Tag:tagsPrompt.html.twig" with { 
+            'form_name'     : form_name
+          } %}
 
-  <div class="field">
-    {{ form_errors(form.need_tags) }}
-    {{ form_widget(form.need_tags) }}
-    {{ form_label(form.need_tags, 'element_add.need_tags.name'|trans({}, 'userui')) }}
-  </div>
+          {{ form_widget(form.tags, { 'attr': {'class': 'tagBox_tags_ids'} }) }}
+
+        <div class="field">
+          {{ form_errors(form.need_tags) }}
+          {{ form_widget(form.need_tags) }}
+          {{ form_label(form.need_tags, 'element_add.need_tags.name'|trans({}, 'userui')) }}
+        </div>
+      </td>
+    </tr>
+  </table>
+  
+  
+  
+  
+  
+    
+  <input type="submit" value="Partager cette ressource" />
+    
 </div>
 
 {{ form_row(form._token) }}

src/Muzich/CoreBundle/Resources/views/layout.html.twig

 	<link href="{{ asset('bundles/muzichcore/css/base.css') }}" rel="stylesheet" media="screen" type="text/css" />
 	<link href="{{ asset('bundles/muzichcore/css/main.css') }}" rel="stylesheet" media="screen" type="text/css" />
   {% block css %}{% endblock %}
-	<script src="{{ asset('js/jquery-1.6.4.min.js') }}" type="text/javascript"></script>
+  {% if  app.environment != 'prod' %}  
+	<script src="{{ asset('js/jquery-1.8.2.dev.js') }}" type="text/javascript"></script>
+  {% else %}
+	<script src="{{ asset('js/jquery-1.8.2.prod.js') }}" type="text/javascript"></script>
+  {% endif %}
   <script src="{{ asset('js/jquery-ui-1.8.7.min.js') }}" type="text/javascript"></script>
 	<script src="{{ asset('bundles/muzichcore/js/muzich.js') }}" type="text/javascript"></script>
   <script src="{{ asset('js/tags/jquery.autoGrowInput.js') }}" type="text/javascript"></script>

src/Muzich/HomeBundle/Resources/views/Home/index.html.twig

   </div>
   #}
 
-  <div id="element_add_box">    
-    
-    <img class="tag_loader" style="display: none;" 
-      src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loading" 
-    />
 
+
+  <div id="element_add_box" style="display: none;">    
+    
+    <a href="#" id="element_add_close_link" class="button">
+      &lt;&lt; {{ 'home.add_element_box.close'|trans({}, 'navigationui') }}
+    </a>
+    
     <form novalidate name="{{ add_form_name }}" action="{{ path('element_add') }}" method="post" {{ form_enctype(add_form) }}>
 
       {% include "MuzichCoreBundle:Element:form.add.html.twig" with { 
     </form>
   </div>
 
+
+  <a href="#" id="element_add_link" class="button">
+    {{ 'home.add_element'|trans({}, 'navigationui') }} &gt;&gt;
+  </a>
+
   <div id="added_element_to_group" style="display: none;">
     <img class="loader" style="display: none;" src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loading" />
     <p class="help">

web/bundles/muzichcore/css/main.css

   text-align: center;
 }
 
-input#element_add_url, input#element_add_name
+input#element_add_url
 {
   width: 70%;
   font-size: 110%;
   font-weight: bold;
 }
 
+input#element_add_name
+{
+  width: 65%;
+  font-size: 110%;
+  font-weight: bold;
+}
+
 label#element_add_url, label#element_add_name
 {
   

web/bundles/muzichcore/js/muzich.js

             // Si le tag ne semble pas connu en base
             if (!data.same_found)
             {
-              // Cette variable nous permettra de stocker le lien nouveau tag
-              var link_add_tag = null;
-              
               li_tag = 
                 $('<li>').addClass('new').append(
                   $('<a>').attr('href','#new#'+$.trim(input.val()))
                   // qui réagit quand on clique dessus
-                  .click(function(e){
-                    
-                    // Effet fade-in du fond opaque
-                    $('body').append($('<div>').attr('id', 'fade')); 
-                    //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
-                    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
-                    
-                    // On met le lien cliqué dans la variabke prévu
-                    link_add_tag = $(this);
-                    
-                    // En premier lieux on fait apparaître la fenêtre de confirmation
-                    var popup = $('<div>')
-                    .attr('id', 'add_tag')
-                    .addClass('popin_block')
-                    .css('width', '400px')
-                      //.append($('<h2>').append(string_tag_add_title))
-                   .append($('<form>')
-                     .attr('action', url_add_tag)
-                     .attr('method', 'post')
-                     .attr('name', 'add_tag')
-                     .ajaxForm(function(response) {
-                       /*
-                        *
-                        */
-
-                        if (response.status == 'mustbeconnected')
-                        {
-                          $(location).attr('href', url_index);
-                        }
-
-                        if (response.status == 'success')
-                        {
-                          var tag_id   = response.tag_id;
-                          var tag_name = response.tag_name;
-
-                          $('input#tags_selected_tag_'+form_name).val(tag_id);
-                          inputTag.val(tag_name);
-                          // Et on execute l'évènement selectTag de l'input
-                          inputTag.trigger("selectTag");
-                          // On cache la liste puisque le choix vient d'être fait
-                          divtags.hide();
-                          inputTag.val(tag_text_help); 
-
-                          link_add_tag.parents('div.search_tag_list').find('img.tag_loader').hide();
-
-                          $('#fade').fadeOut(400, function(){$('#fade').remove();});
-                          $('#add_tag').remove();
-                        }
-                        
-                        if (response.status == 'error')
-                        {
-                          $('form[name="add_tag"]').find('ul.error_list').remove();
-                          var ul_errors = $('<ul>').addClass('error_list');
-
-                          for (i in response.errors)
-                          {
-                            ul_errors.append($('<li>').append(response.errors[i]));
-                          }
-
-                          $('form[name="add_tag"]').prepend(ul_errors);
-                        }
-                        
-                        return false;
-                     })
-                     
-                      .append($('<div>').addClass('tag')
-                        .append($('<ul>')
-                          .append($('<li>').addClass('button')
-                            .append($(this).text()))))
-                      .append($('<p>').append(string_tag_add_text))
-                      .append($('<p>').append(string_tag_add_argument))
-                      .append($('<textarea>').attr('name', 'argument'))
-                      .append($('<div>').addClass('inputs')
-                        .append($('<input>')
-                          .attr('type', 'button')
-                          .attr('value', string_tag_add_inputs_cancel)
-                          .addClass('button')
-                          .click(function(){
-                            $('#fade').fadeOut(1000, function(){$('#fade').remove();});
-                            $('#add_tag').remove();
-                            
-                            return false;
-                          })
-                        )
-                        .append($('<input>')
-                          .attr('type', 'submit')
-                          .attr('value', string_tag_add_inputs_submit)
-                          .addClass('button')
-                          .click(function(){
-                            
-                            link_add_tag.parents('div.search_tag_list').find('img.tag_loader').show();
-                          
-                          })
-                        )
-                        .append($('<input>').attr('type', 'hidden').attr('name', 'tag_name').val($(this).text()))
-                      ))
-                    ;
-                    
-                    // Il faut ajouter le popup au dom avant de le positionner en css
-                    // Sinon la valeur height n'est pas encore calculable
-                    $('body').prepend(popup);
-                    
-                    //Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
-                    var popMargTop = (popup.height() + 50) / 2;
-                    var popMargLeft = (popup.width() + 50) / 2;
-                    
-                    //On affecte le margin
-                    $(popup).css({
-                      'margin-top' : -popMargTop,
-                      'margin-left' : -popMargLeft
-                    });
-                    
-                    return false;
-                    
-                  })
+                  .click({
+                    inputTag: inputTag,
+                    form_name: form_name,
+                    divtags: divtags
+                  }, event_click_new_tag_proposition)
                   .append($.trim(input.val()))
               );
               search_tag_list.append(li_tag);
       
     }
   }
+  
+  function event_click_new_tag_proposition(event)
+  {
+    form_add_open_dialog_for_new_tag($(event.target), event.data.inputTag, event.data.form_name, event.data.divtags);
+  }
  
+  function form_add_open_dialog_for_new_tag(link_add_tag, inputTag, form_name, divtags)
+  {       
+    
+    
+    // Effet fade-in du fond opaque
+    $('body').append($('<div>').attr('id', 'fade')); 
+    //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
+    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
+    
+    // En premier lieux on fait apparaître la fenêtre de confirmation
+    var popup = $('<div>')
+    .attr('id', 'add_tag')
+    .addClass('popin_block')
+    .css('width', '400px')
+      //.append($('<h2>').append(string_tag_add_title))
+    .append($('<form>')
+      .attr('action', url_add_tag)
+      .attr('method', 'post')
+      .attr('name', 'add_tag')
+      .ajaxForm(function(response) {
+        /*
+        *
+        */
+
+        if (response.status == 'mustbeconnected')
+        {
+          $(location).attr('href', url_index);
+        }
+
+        if (response.status == 'success')
+        {
+          var tag_id   = response.tag_id;
+          var tag_name = response.tag_name;
+
+          $('input#tags_selected_tag_'+form_name).val(tag_id);
+          inputTag.val(tag_name);
+          // Et on execute l'évènement selectTag de l'input
+          inputTag.trigger("selectTag");
+          // On cache la liste puisque le choix vient d'être fait
+          divtags.hide();
+          inputTag.val(tag_text_help); 
+
+          link_add_tag.parents('div.search_tag_list').find('img.tag_loader').hide();
+
+          $('#fade').fadeOut(400, function(){$('#fade').remove();});
+          $('#add_tag').remove();
+        }
+
+        if (response.status == 'error')
+        {
+          $('form[name="add_tag"]').find('ul.error_list').remove();
+          var ul_errors = $('<ul>').addClass('error_list');
+
+          for (i in response.errors)
+          {
+            ul_errors.append($('<li>').append(response.errors[i]));
+          }
+
+          $('form[name="add_tag"]').prepend(ul_errors);
+        }
+
+        return false;
+      })
+
+      .append($('<div>').addClass('tag')
+        .append($('<ul>')
+          .append($('<li>').addClass('button')
+            .append(link_add_tag.text()))))
+      .append($('<p>').append(string_tag_add_text))
+      .append($('<p>').append(string_tag_add_argument))
+      .append($('<textarea>').attr('name', 'argument'))
+      .append($('<div>').addClass('inputs')
+        .append($('<input>')
+          .attr('type', 'button')
+          .attr('value', string_tag_add_inputs_cancel)
+          .addClass('button')
+          .click(function(){
+            $('#fade').fadeOut(1000, function(){$('#fade').remove();});
+            $('#add_tag').remove();
+
+            return false;
+          })
+        )
+        .append($('<input>')
+          .attr('type', 'submit')
+          .attr('value', string_tag_add_inputs_submit)
+          .addClass('button')
+          .click(function(){
+
+            link_add_tag.parents('div.search_tag_list').find('img.tag_loader').show();
+
+          })
+        )
+        .append($('<input>').attr('type', 'hidden').attr('name', 'tag_name').val(link_add_tag.text()))
+      ))
+    ;
+
+    // Il faut ajouter le popup au dom avant de le positionner en css
+    // Sinon la valeur height n'est pas encore calculable
+    $('body').prepend(popup);
+
+    //Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
+    var popMargTop = (popup.height() + 50) / 2;
+    var popMargLeft = (popup.width() + 50) / 2;
+
+    //On affecte le margin
+    $(popup).css({
+      'margin-top' : -popMargTop,
+      'margin-left' : -popMargLeft
+    });
+
+    return false;
+  }
  
   var last_keypress = 0;
   
     }
   }
 
-  // Ajout d'un element #ajouter
+  // Ajout d'un element #ajouter (première partie)
   
   // Click sur "ajouter" (l'url)
   $('a#form_add_check_url').click(function(){
     
+    // On fait tourner notre gif loader
+    $('img#form_add_loader').show();
+    
     $.ajax({
       type: 'POST',
       url: url_datas_api,
       data: {'url':$('input#element_add_url').val()},
       success: function(response){
         
-        console.debug(response);
-        
         if (response.status == 'mustbeconnected')
         {
           $(location).attr('href', url_index);
 
         if (response.status == 'success')
         {
-
+          // On cache notre gif loader.
+          $('img#form_add_loader').hide();
+          
+          // On commence par renseigner les champs si on a du concret
+          // name
+          if (response.name)
+          {
+            $('input#element_add_name').val(response.name);
+          }
+          
+          // thumb
+          $('div#form_add_thumb img').attr('src', '/bundles/muzichcore/img/nothumb.png');
+          if (response.thumb)
+          {
+            $('div#form_add_thumb img').attr('src', response.thumb);
+          }
+          
+          // Proposition de tags
+          if (response.tags)
+          {
+            $('ul#form_add_prop_tags li').remove();
+            $('ul#form_add_prop_tags').show();
+            $('ul#form_add_prop_tags_text').show();
+            
+            for (tags_index = 0; tags_index < response.tags.length; tags_index++)
+            {
+              var tag = response.tags[tags_index];
+              var tag_id = '';
+              var tag_name = tag.original_name;
+              // Si il y a des équivalent en base.
+              if (tag.like_found)
+              {
+                tag_id = tag.like.id;
+                tag_name = tag.like.name;
+              }
+                
+              // On aura plus qu'a vérifie le href pour savoir si c'est une demande d'ajout de tags =)
+              $('ul#form_add_prop_tags').append(
+                '<li>'+
+                  '<a href="#'+tag_id+'" class="form_add_prop_tag">'+
+                    tag_name+
+                  '</a>'+
+                '</li>'
+              );
+            }
+          }
+          
+          // On a plus qu'a afficher les champs
+          $('div#form_add_second_part').slideDown();
+          $('div#form_add_first_part').slideUp();
+            
         }
       },
       dataType: 'json'
     
   });
   
+  /*
+   * Formulaire d'ajout: click sur proposition de tags du a une api
+   */
+  
+  $('a.form_add_prop_tag').live('click', function(){
+    
+    var form_name = "add";
+    var tag_id = str_replace('#', '', $(this).attr('href'));
+    var input_tag = $("div.tags_prompt ul.tagbox li.input input");
+    
+    // Si on connait le tag id (pas un nouveau tag donc)
+    if (tag_id)
+    {
+      $('input#tags_selected_tag_'+form_name).val(tag_id);
+      input_tag.val($(this).text());
+      // Et on execute l'évènement selectTag de l'input
+      input_tag.trigger("selectTag");
+      input_tag.val(tag_text_help); 
+    }
+    else
+    {
+      // Cette var sert a rien ici, mais c'est la refactorisation qui
+      //  pose problmeme (corrigeable cela dit)
+      var divtags = $("#search_tag_"+form_name);
+      form_add_open_dialog_for_new_tag($(this), input_tag, form_name, divtags);
+    }
+    
+  });
   
+  // #ajouter ajouter un élément (envoi du formulaire)
   $('form[name="add"] input[type="submit"]').live('click', function(){
     $('form[name="add"]').find('img.tag_loader').show();
   });
     $('form[name="add"] img.tag_loader').hide();
     element_add_proceed_json_response(response);
     
+    $('div#element_add_box').slideUp();
+    $('div#form_add_first_part').show();
+    $('div#form_add_second_part').hide();
+    $('ul#form_add_prop_tags').hide();
+    $('ul#form_add_prop_tags_text').hide();
+    
     return false;
   });