From be4c6380e797ee5aa8590f5680541d4d0e34f0ee Mon Sep 17 00:00:00 2001
From: mespeche <michael-espeche@Micks-iMac.local>
Date: Thu, 26 Sep 2013 15:24:31 +0200
Subject: [PATCH] Setting taxe rule drag and drop functionnal with sortable
 rule group

---
 .../Thelia/Config/Resources/routing/admin.xml |   5 +
 .../Controller/Admin/TaxRuleController.php    |   6 +
 .../default/assets/less/thelia/thelia.less    |  76 ++++++
 templates/admin/default/tax-rule-edit.html    | 228 ++++++++++++++++++
 4 files changed, 315 insertions(+)
 create mode 100644 templates/admin/default/tax-rule-edit.html

diff --git a/core/lib/Thelia/Config/Resources/routing/admin.xml b/core/lib/Thelia/Config/Resources/routing/admin.xml
index 55dc7b583..2f043c2f4 100755
--- a/core/lib/Thelia/Config/Resources/routing/admin.xml
+++ b/core/lib/Thelia/Config/Resources/routing/admin.xml
@@ -559,6 +559,11 @@
         <default key="_controller">Thelia\Controller\Admin\TaxRuleController::defaultAction</default>
     </route>
 
+    <route id="admin.configuration.taxes-rules.update" path="/admin/configuration/taxes_rules/update/{tax_rule_id}" methods="get">
+        <default key="_controller">Thelia\Controller\Admin\TaxRuleController::updateAction</default>
+        <requirement key="tax_rule_id">\d+</requirement>
+    </route>
+
     <!-- end admin profiles management -->
 
 
diff --git a/core/lib/Thelia/Controller/Admin/TaxRuleController.php b/core/lib/Thelia/Controller/Admin/TaxRuleController.php
index ca51b4ac9..2a4f37a77 100644
--- a/core/lib/Thelia/Controller/Admin/TaxRuleController.php
+++ b/core/lib/Thelia/Controller/Admin/TaxRuleController.php
@@ -36,4 +36,10 @@ class TaxRuleController extends BaseAdminController
         return $this->render("taxes-rules", array("display_taxes_rules" => 20));
     }
 
+    public function updateAction($tax_rule_id){
+        return $this->render("tax-rule-edit", array(
+            "tax_rule_id" => $tax_rule_id
+        ));
+    }
+
 }
\ No newline at end of file
diff --git a/templates/admin/default/assets/less/thelia/thelia.less b/templates/admin/default/assets/less/thelia/thelia.less
index 822130a5c..802d57e96 100644
--- a/templates/admin/default/assets/less/thelia/thelia.less
+++ b/templates/admin/default/assets/less/thelia/thelia.less
@@ -276,4 +276,80 @@
   background: url("@{imgDir}/ajax-loader.gif") no-repeat;
   height: 30px;
   width: 30px;
+}
+
+// -- Drag & drop --
+.take{
+    
+    .draggable{
+        border: 2px dashed @gray-light;
+        margin-bottom: 10px;
+        padding: 10px;
+
+        &:last-child{
+            margin-bottom: 0;
+        }       
+    }
+    
+    .over{
+        .drop-message{
+            border-color: @brand-primary;
+            color: @brand-primary;
+        }
+    }
+
+}
+
+.place{    
+    
+    .over{
+        .drop-message{
+            border-color: @brand-primary;
+            color: @brand-primary;
+        }
+    }
+
+    .panel-body{
+        
+        .draggable{
+            margin: 5px 0;
+            padding: 10px;            
+            border: 1px dashed @gray-light;
+        }
+
+        .drop-group{
+            padding: 10px;
+            border: 2px dashed @gray-light;
+            margin-bottom: 10px;
+
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
+
+    }
+
+}
+
+.take, .place{
+    
+    .drop-message{
+        width: 50%;
+        margin: 10px auto;
+        padding: 10px;
+        color: @gray;
+        border: 2px dashed @gray;
+        text-align: center;
+        .opacity(0.5);
+
+        .glyphicon{
+            display: block;
+            font-size: @font-size-large;
+            margin-bottom: 10px;
+        }
+    }
+
+    .ui-draggable-dragging{
+        z-index: 100;
+    }
 }
\ No newline at end of file
diff --git a/templates/admin/default/tax-rule-edit.html b/templates/admin/default/tax-rule-edit.html
new file mode 100644
index 000000000..1bf6346d1
--- /dev/null
+++ b/templates/admin/default/tax-rule-edit.html
@@ -0,0 +1,228 @@
+{extends file="admin-layout.tpl"}
+
+{block name="page-title"}{intl l='Edit a tax rule'}{/block}
+
+{block name="check-permissions"}admin.configuration.taxes-rules.edit{/block}
+
+{block name="main-content"}
+<div class="taxes-rules edit-taxes-rules">
+
+    <div id="wrapper" class="container">
+
+        <ul class="breadcrumb">
+            <li><a href="{url path='/admin/home'}">{intl l="Home"}</a></li>
+            <li><a href="{url path='/admin/configuration'}">{intl l="Configuration"}</a></li>
+            <li><a href="{url path='/admin/configuration/taxes_rules'}">{intl l="Taxes rules"}</a></li>
+            <li>{intl l='Editing tax rule "%name"' name="{$TITLE}"}</li>
+        </ul>
+
+        <div class="row">
+            <div class="col-md-12 general-block-decorator clearfix">
+
+                <div class="title title-without-tabs">
+                   {intl l="Edit tax rule $TITLE"}
+                </div>     
+                
+                <form action="" method="post">
+                    
+                    <div class="form-group">
+                        <label for="" class="label-control">{intl l="Choose a country"} :</label>
+                        <div class="input-group">
+                            <select name="" id="" data-toggle="selectpicker">
+                                <option value="">France</option>
+                                <option value="">Spanish</option>
+                            </select>
+                            <span class="input-group-btn">
+                                <button type="submit" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-check"></span></button>
+                            </span>
+                        </div>
+                    </div>
+
+                </form>
+                
+                <p><strong>{intl l="Countries that have the same tax rule"} :<strong></p>
+                <p class="lead">
+                    <span class="label label-info">Italy</span>
+                    <span class="label label-info">England</span>
+                    <span class="label label-info">Japan</span>
+                </p>
+                
+                <div class="row">
+                    <div class="col-md-6">
+
+                        <!-- <div class="panel droppable place">
+                            <p id="drop-message">
+                                <span class="glyphicon glyphicon-plus"></span>
+                                {intl l="Drop tax here to create a tax rule"}
+                            </p>
+                        </div> -->
+
+                        <div class="panel panel-default place">
+                            <div class="panel-heading">
+                                <h3 class="panel-title">Create a tax rule</h3>
+                            </div>
+                            <div class="panel-body">
+                                
+                                <div class="drop-group droppable add-to-group">
+                                    <p class="drop-message">
+                                        <span class="glyphicon glyphicon-plus"></span>
+                                        <span class="message">{intl l="Add tax to this group"}</span>
+                                    </p>
+                                </div>
+
+                            </div>
+                            <div class="panel-footer droppable create-group">
+                                <p class="drop-message">
+                                    <span class="glyphicon glyphicon-plus"></span>
+                                    <span class="message">{intl l="Drop tax here to create a tax group"}</span>
+                                </p>
+                            </div>
+                        </div>
+
+                        <button type="button" id="apply-taxes-rules" class="btn btn-default btn-primary btn-block"><span class="glyphicon glyphicon-check"></span> {intl l="Apply"}</button>
+
+                    </div>
+                    <div class="col-md-6">
+
+                        <div class="panel panel-default take">
+                            <div class="panel-heading">
+                                <h3 class="panel-title">List of taxes</h3>
+                            </div>
+                            <div class="panel-body">
+                                <div class="draggable">Cras justo odio</div>
+                                <div class="draggable">Dapibus ac facilisis in</div>
+                                <div class="draggable">Morbi leo risus</div>
+                                <div class="draggable">Porta ac consectetur ac</div>
+                                <div class="draggable">Vestibulum at eros</div>                        
+                            </div>
+                            <div class="panel-footer droppable remove-from-group">
+                                <p class="drop-message">
+                                    <span class="glyphicon glyphicon-minus"></span>
+                                    <span class="message">{intl l="Drop tax here to delete from group"}</span>
+                                </p>
+                            </div>
+                        </div>
+                                                            
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+    </div>
+</div>
+{/block}
+
+{block name="javascript-initialization"}
+    
+    {javascripts file='assets/js/bootstrap-select/bootstrap-select.js'}
+        <script src="{$asset_url}"></script>
+    {/javascripts}
+
+    {javascripts file='assets/js/main.js'}
+        <script src="{$asset_url}"></script>
+    {/javascripts}
+
+    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
+    <script>
+        $(function() {
+
+            // Création du tableau des règles de taxe
+            $('#apply-taxes-rules').click(function(){
+                var taxesRules = [],
+                    index;
+
+                $('.place .panel-body .drop-group').each(function(i){
+
+                    var $this = $(this);
+                    
+                    index = i;
+                    taxesRules[index] = [];
+
+                    $('.draggable', $this).each(function(j){
+                        taxesRules[index][j] = [];
+                        taxesRules[index][j] = $(this).text();
+                    });
+
+                });
+
+            });            
+
+            $('.place .panel-body').sortable({
+                axis: "y",                
+                revert: true,
+                containment: "parent",
+                items : "> div"
+            });
+
+            $(".draggable").draggable({                
+                cursor: "move",
+                revert: true,
+                containment: "document",
+                opacity: 0.5,
+                start: function(event, ui){
+                    // Initilisation du droppable pour nouveaux groupes
+                    initDrop();                    
+                },
+                stop: function(event, ui) {
+
+                    var $zone = $('.panel-body').find('.droppable');
+                    var zoneLength = $zone.length;                    
+                    
+                    if(zoneLength > 1){
+                        $zone.each(function(){
+                            var $this = $(this);
+                            var draggableLength = $('.draggable', $this).length;
+
+                            // Si une zone est vide on la supprime
+                            if(draggableLength == 0){
+                                $this.slideUp(function(){
+                                    $this.remove();
+                                });
+                            }                            
+
+                        });
+                    }      
+
+                }
+            });
+
+            // Initialisation du droppable
+            initDrop();
+
+            // Fonction droppable
+            function initDrop() {
+                $(".droppable").droppable({
+                    hoverClass: "over",
+                    drop: function( event, ui ) {
+                        var $this       = $(this),
+                            $elem       = ui.draggable.detach();
+
+                        // On ajout au groupe existant
+                        if($this.hasClass('add-to-group')){
+                            $this.find('.drop-message').after($elem);
+                        }
+                        // On crée un nouveau groupe
+                        else if($this.hasClass('create-group')){
+                            var $dropZone = $this.prev('.panel-body').find('.drop-group:last-child').clone();
+                            $dropZone.find('.draggable').remove();
+                            
+                            var $panelBody = $this.prev('.panel-body');
+                            $panelBody.append($dropZone);
+                            
+                            var $newZone = $panelBody.find('.drop-group:last-child');
+                            $newZone.find('.drop-message').after($elem);                            
+                        }
+                        // On supprime d'un groupe
+                        else if($this.hasClass('remove-from-group')){
+                            var $panelBody = $this.prev('.panel-body');
+                            $panelBody.append($elem);
+                        }
+                    }
+                });
+            }
+                
+        });
+    </script>
+
+{/block}
\ No newline at end of file