[Taxon] Drag and drop support

Inventis · Nov 7, 2016 · 31b3aa1 · 31b3aa1
1 parent 9c1052d
commit 31b3aa1
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,8 @@
 {
   "dependencies": {
     "jquery": "^2.2.0",
-    "semantic-ui-css": "^2.2.0"
+    "semantic-ui-css": "^2.2.0",
+    "sortablejs": "^1.4.2"
   },
   "devDependencies": {
     "gulp": "^3.9.0",

diff --git a/src/Sylius/Behat/Context/Ui/Admin/ManagingTaxonsContext.php b/src/Sylius/Behat/Context/Ui/Admin/ManagingTaxonsContext.php
@@ -496,7 +496,7 @@ public function theFirstTaxonOnTheListShouldBe(TaxonInterface $taxon)
             $this->createPage->getFirstLeafName(),
             $taxon->getName(),
             sprintf(
-                'Expected %s as a first taxon, leaf but got %s.',
+                'Expected %s as a first taxon, but got %s.',
                 $taxon->getName(),
                 $this->createPage->getFirstLeafName()
             )

diff --git a/src/Sylius/Behat/Page/Admin/Taxon/CreatePage.php b/src/Sylius/Behat/Page/Admin/Taxon/CreatePage.php
@@ -141,10 +141,6 @@ public function moveDown(TaxonInterface $taxon)
      */
     public function getFirstLeafName(TaxonInterface $parentTaxon = null)
     {
-        $this->getDocument()->waitFor(5, function () {
-            return;
-        });
-
         return $this->getLeafs($parentTaxon)[0]->getText();
     }
 
@@ -177,10 +173,13 @@ private function moveLeaf(TaxonInterface $taxon, $direction)
         $leafs = $this->getLeafs();
         foreach ($leafs as $leaf) {
             if ($leaf->getText() === $taxon->getName()) {
-                $moveButton = $leaf->getParent()->find('css', sprintf('.%s', $direction));
+                $leaf = $leaf->getParent();
+                $menuButton = $leaf->find('css', '.wrench');
+                $menuButton->click();
+                $moveButton = $leaf->find('css', sprintf('.%s', $direction));
                 $moveButton->click();
-                $moveButton->waitFor(5, function () use ($moveButton) {
-                    return !$moveButton->hasClass('loading');
+                $moveButton->waitFor(5, function () use ($taxon) {
+                    return $this->getFirstLeafName() === $taxon->getName();
                 });
 
                 return;

diff --git a/src/Sylius/Bundle/AdminBundle/Gulpfile.js b/src/Sylius/Bundle/AdminBundle/Gulpfile.js
@@ -17,6 +17,8 @@ var paths = {
     admin: {
         js: [
             '../../../../node_modules/jquery/dist/jquery.min.js',
+            '../../../../node_modules/sortablejs/Sortable.js',
+            '../../../../node_modules/sortablejs/jquery.binding.js',
             '../../../../node_modules/semantic-ui-css/semantic.min.js',
             '../PromotionBundle/Resources/public/js/sylius-promotion.js',
             '../ShippingBundle/Resources/public/js/**',

diff --git a/src/Sylius/Bundle/AdminBundle/Resources/private/js/delete-resource-action.js b/src/Sylius/Bundle/AdminBundle/Resources/private/js/delete-resource-action.js
@@ -0,0 +1,31 @@
+(function ($) {
+    'use strict';
+
+    $(document).ready(function() {
+
+        $('.sylius-delete-resource').api({
+            method: 'delete',
+            debug: true,
+            onSuccess: function (response) {
+                var redirectUrl = $(this).data('success-redirect-url');
+
+                if (redirectUrl) {
+                    location.replace(redirectUrl);
+
+                    return;
+                }
+
+                throw 'You need to define data-success-redirect-url on "' + $(this).attr('class') +'"';
+            },
+            onFailure: function (response) {
+                var message = $(this).parent().parent().popup({
+                    inline: true,
+                    content: response.error.message,
+                    on: 'manual'
+                });
+                message.popup('show');
+                setTimeout(function() { message.popup('hide'); }, 3000);
+            }
+        });
+    });
+})( jQuery );
diff --git a/src/Sylius/Bundle/AdminBundle/Resources/private/js/move-taxon.js b/src/Sylius/Bundle/AdminBundle/Resources/private/js/move-taxon.js
@@ -2,8 +2,37 @@
     'use strict';
 
     $(document).ready(function() {
+        $('.sylius-sortable-list').sortable({
+            onEnd: function (event) {
+                $(this).api({
+                    throttle: 500,
+                    method: 'PUT',
+                    action: 'move taxon',
+                    urlData: {
+                        id: $(event.item).data('id')
+                    },
+                    on: 'now',
+                    beforeSend: function (settings) {
+                        settings.data = {
+                            position: event.newIndex
+                        };
+
+                        return settings;
+                    },
+                    onSuccess: function (response) {
+                        $(event.item).find('.sylius-taxon-move-up').data('position', event.newIndex);
+                        $(event.item).find('.sylius-taxon-move-down').data('position', event.newIndex);
+                    },
+                    onFailure: function (response) {
+                        throw 'Something went wrong with api call.';
+                    }
+                });
+            }
+        });
+
         $('.sylius-taxon-move-up').api({
             method: 'PUT',
+            on: 'click',
             beforeSend: function (settings) {
                 settings.data = {
                     position: $(this).data('position') - 1
@@ -18,6 +47,7 @@
 
         $('.sylius-taxon-move-down').api({
             method: 'PUT',
+            on: 'click',
             beforeSend: function (settings) {
                 settings.data = {
                     position: $(this).data('position') + 1

diff --git a/src/Sylius/Bundle/AdminBundle/Resources/views/Taxon/Partial/_treeWithButtons.html.twig b/src/Sylius/Bundle/AdminBundle/Resources/views/Taxon/Partial/_treeWithButtons.html.twig
@@ -6,26 +6,40 @@
     {% import _self as tree %}
 
     {% for taxon in taxons if taxon.id != null %}
-        <div class="item">
+        <div class="item" data-id="{{ taxon.id }}">
             <i class="folder icon"></i>
             <div class="content">
                 <div class="header">
                     <a href="{{ path('sylius_admin_product_index_per_taxon', {'taxonId': taxon.id}) }}">
                         {{ taxon.name }}
                     </a>
-                </div>
-                <div class="ui mini buttons">
-                    {{ buttons.create(path('sylius_admin_taxon_create_for_parent', { 'id': taxon.id }), 'sylius.ui.add'|trans) }}
-                    {{ buttons.edit(path('sylius_admin_taxon_update', { 'id': taxon.id })) }}
-                    {{ buttons.delete(path('sylius_admin_taxon_delete', { 'id': taxon.id }), 'sylius.ui.delete'|trans) }}
-                    <div class="ui icon button yellow sylius-taxon-move-up" data-action="move taxon" data-id="{{ taxon.id }}" data-position="{{ taxon.position }}">
-                        <i class="icon arrow up"></i>
-                    </div>
-                    <div class="ui icon button yellow sylius-taxon-move-down" data-action="move taxon" data-id="{{ taxon.id }}" data-position="{{ taxon.position }}">
-                        <i class="icon arrow down"></i>
+                    <div class="ui inline dropdown icon button mini">
+                        <i class="wrench icon"></i>
+                        <div class="menu">
+                            <a class="item" href="{{ path('sylius_admin_taxon_create_for_parent', { 'id': taxon.id }) }}">
+                                <i class="plus icon"></i>
+                                {{ 'sylius.ui.add'|trans }}
+                            </a>
+                            <a class="item" href="{{ path('sylius_admin_taxon_update', { 'id': taxon.id }) }}">
+                                <i class="edit icon"></i>
+                                {{ 'sylius.ui.edit'|trans }}
+                            </a>
+                            <div class="item sylius-taxon-move-up" data-action="move taxon" data-id="{{ taxon.id }}" data-position="{{ taxon.position }}">
+                                <i class="icon arrow up"></i>
+                                {{ 'sylius.ui.move_up'|trans }}
+                            </div>
+                            <div class="item sylius-taxon-move-down" data-action="move taxon" data-id="{{ taxon.id }}" data-position="{{ taxon.position }}">
+                                <i class="icon arrow down"></i>
+                                {{ 'sylius.ui.move_down'|trans }}
+                            </div>
+                            <div class="item sylius-delete-resource" data-url="{{ path('sylius_admin_taxon_delete', { 'id': taxon.id }) ~ '?_format=json' }}" data-success-redirect-url="{{ path('sylius_admin_taxon_index') }}">
+                                <i class="delete icon"></i>
+                                {{ 'sylius.ui.delete'|trans }}
+                            </div>
+                        </div>
                     </div>
                 </div>
-                <div class="list">
+                <div class="list sylius-sortable-list">
                     {{ tree.render(taxon.children) }}
                 </div>
             </div>
@@ -35,7 +49,7 @@
 
 {{ buttons.create(path('sylius_admin_taxon_create')) }}
 <div class="ui segment">
-    <div id="taxons-list" class="ui list">
+    <div class="ui list sylius-sortable-list">
         {{ tree.render(taxons) }}
     </div>
 </div>