mirror of
https://github.com/Sylius/Sylius.git
synced 2026-07-14 17:10:53 +00:00
[Taxon] Drag and drop support
This commit is contained in:
Arminek
parent
9c1052d4bc
commit
31b3aa1640
7 changed files with 99 additions and 22 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -496,7 +496,7 @@ final class ManagingTaxonsContext implements Context
|
|||
$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()
|
||||
)
|
||||
|
|
|
|||
|
|
@ -141,10 +141,6 @@ class CreatePage extends BaseCreatePage implements CreatePageInterface
|
|||
*/
|
||||
public function getFirstLeafName(TaxonInterface $parentTaxon = null)
|
||||
{
|
||||
$this->getDocument()->waitFor(5, function () {
|
||||
return;
|
||||
});
|
||||
|
||||
return $this->getLeafs($parentTaxon)[0]->getText();
|
||||
}
|
||||
|
||||
|
|
@ -177,10 +173,13 @@ class CreatePage extends BaseCreatePage implements CreatePageInterface
|
|||
$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;
|
||||
|
|
|
|||
|
|
@ -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/**',
|
||||
|
|
|
|||
|
|
@ -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 );
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 }}">
|
||||
<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="ui icon button yellow sylius-taxon-move-down" data-action="move taxon" data-id="{{ taxon.id }}" data-position="{{ taxon.position }}">
|
||||
<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 class="list">
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue