Basket refactor

templates/web/prod/Baskets/Create.html.twig

@@ -13,7 +13,7 @@
   
   <script type="text/javascript">
     $(document).ready(function(){
-      $('#bask_create_sel').val(p4.Result.Selection.serialize());
+      $('#bask_create_sel').val(p4.Results.Selection.serialize());
       
       $('#DIALOG form').bind('submit', function(event){
 

templates/web/prod/Baskets/Reorder.html.twig

@@ -1,5 +1,6 @@
 {% import 'common/thumbnail.html' as thumbnail %}
 
+<div class="elements">
 {% for element in basket.getElements() %}
   <div id="ORDER_{{ element.getId() }}" class="CHIM diapo" style="height:130px;overflow:hidden;">
     <div class="title" title="{{ element.getRecord().get_title() }}" style="position:relative;z-index:1200;height:30px;overflow:visible;text-align:center;">
@@ -12,8 +13,147 @@
       </form>
     </div>
   </div>
-
-  <form method="POST" action="/prod/baskets/{{ basket.getId() }}/reorder/">
-
-  </form>
 {% endfor %}
+</div>
+<form name="reorder" method="POST" action="/prod/baskets/{{ basket.getId() }}/reorder/">
+  {% for element in basket.getElements() %}
+    <input type="hidden" name="element[{{ element.getId() }}]" value="{{ element.getOrd() }}"/>
+  {% endfor %}
+  <button>{% trans 'boutton::valider' %}</button>
+</form>
+
+
+  
+  <script type="text/javascript">
+    $(document).ready(function(){
+      
+      var container = $('#DIALOG');
+      
+      $('.elements', container).sortable({
+        appendTo : container,
+        placeholder: 'diapo ui-sortable-placeholder',
+        distance:20,
+        cursorAt: {
+          top:10,
+          left:-20
+        },
+        items:'div.diapo',
+        scroll:true,
+        scrollSensitivity:40,
+        scrollSpeed:30,
+        start:function(event, ui){
+          var selected = $('.selected',container);
+
+          selected.each(function(i,n){
+            $(n).attr('position',i);
+          });
+
+          var n = selected.length - 1;
+
+          $('.selected:visible', container).hide();
+
+          while(n > 0)
+          {
+            $('<div style="height:130px;" class="diapo ui-sortable-placeholderfollow"></div>').insertAfter($('.diapo.ui-sortable-placeholder', cont));
+            n--;
+          }
+        },
+        stop:function(event, ui){
+
+          $('.diapo.ui-sortable-placeholderfollow', container).remove();
+
+          var main_id = $(ui.item[0]).attr('id');
+
+          var selected = $('.selected',container);
+          var sorter = new Array();
+
+
+          selected.each(function(i,n){
+
+            var position = parseInt($(n).attr('position'));
+
+            if(position !== '')
+            {
+              sorter[position] = $(n);
+            }
+
+            var id = $(n).attr('id');
+            if(id == main_id)
+            {
+              return;
+            }
+
+          });
+
+          var before = true;
+          var last_moved = $(ui.item[0]);
+          $(sorter).each(function(i,n){
+            $(n).show().removeAttr('position');
+            if($(n).attr('id') == main_id)
+            {
+              before = false;
+            }
+            else
+            {
+              if(before)
+                $(n).insertBefore($(ui.item[0]));
+              else
+                $(n).insertAfter($(last_moved));
+
+            }
+            last_moved = sorter[i];
+          });
+
+        },
+        change:function(){
+          $('.diapo.ui-sortable-placeholderfollow', container).remove();
+
+          var n = OrderSelection.length() - 1 ;
+          while(n > 0)
+          {
+            $('<div style="height:130px;" class="diapo ui-sortable-placeholderfollow"></div>').insertAfter($('.diapo.ui-sortable-placeholder', container));
+            n--;
+          }
+        }
+
+      }).disableSelection();
+      
+      var OrderSelection = new Selectable({
+          selector : '.CHIM', 
+          container:$('#DIALOG .elements'),
+        });
+      
+      
+      $('#DIALOG form[name="reorder"]').bind('submit', function(event){
+
+        //$this.SetLoader(true);
+
+        var $form = $(this);
+
+        $.ajax({
+          type: $form.attr('method'),
+          url: $form.attr('action'),
+          data: $form.serializeArray(),
+          dataType: 'json',
+          beforeSend:function(){
+
+          },
+          success: function(data){
+
+            p4.WorkZone.refresh('current');
+            $('#DIALOG').dialog('close').empty();
+
+            return;
+          },
+          error: function(){
+
+          },
+          timeout: function(){
+
+          }
+        });
+
+        return false;
+      });
+    });
+  </script>