Delete item after sorting jQuery UI with Ember

Question

I am using Ember with jQuery UI sortable and it works fine until I want to delete some item after sort. This questio is allready answerd on stackoverflow but that solution does not work for me. I am using Ember 2.6.

Component template

<ui id="department_roles">
    {{#each sortedList as |item|}}
        {{item.id}}
            <li data-id="{{item.id}}"  role_id="{{item.id}}" class="ui-state-default role_droppable">
                <span>
                    {{item.name}}
                </span>

                <button {{action "removeItem" item.id}}>Remove</button>
            </li>
    {{/each}}
</ui>

Component, The sorting works fine and after delete action item is deleted from array but DOM is incorrect.

    import Ember from 'ember';

export default Ember.Component.extend({
    list: Ember.ArrayProxy.create({content: Ember.A()}),
    init: function () {
        this._super();
        this.get('list').pushObject({
            id: 1,
            index: 1,
            name: 'name1'
        });
        this.get('list').pushObject({
            id: 2,
            index: 2,
            name: 'name2'
        });
        this.get('list').pushObject({
            id: 3,
            index: 3,
            name: 'name3'
        });
        this.get('list').pushObject({
            id: 4,
            index: 4,
            name: 'name4'
        });
        this.get('list').pushObject({
            id: 5,
            index: 6,
            name: 'name5'
        });
    },
    sortProps: ['index:asc'],
    sortedList: Ember.computed.sort('list', 'sortProps'),
    updateSortedOrder(indices) {
        this.beginPropertyChanges();
        let tracks = this.get('list').forEach((item) => {
            var index = indices[Ember.get(item, 'id')];
            if (Ember.get(item, 'index') !== index) {
                Ember.set(item, 'index', index);
            }
        });
        this.endPropertyChanges();
    },
    didRender: function () {
        this._super();
        var self = this;

        Ember.$("#department_roles").sortable({
            update: function () {
                var indices = {};
                Ember.$(this).children().each((index, item) => {
                    indices[Ember.$(item).data('id')] = index + 1;
                });

                self.updateSortedOrder(indices);
            },
        });

        Ember.$('#department_roles').disableSelection();
    },
    actions: {
        removeItem: function (itemId) {

            var self = this,
                deleteItem,
                list = this.get('list');

            this.$("#department_roles").sortable("destroy");

            list.arrayContentWillChange();

            list.forEach(function (item) {

                if (item.id === itemId) {
                    deleteItem = item;
                }
            });

            list.removeObject(deleteItem);

            list.arrayContentDidChange();

            Ember.$("#department_roles").sortable({
                update: function () {
                    var indices2 = {};
                    Ember.$(this).children().each((index, item) => {
                        indices2[Ember.$(item).data('id')] = index + 1;
                    });
                    self.updateSortedOrder(indices2);

                },
            });

            console.log(self.get('sortedList'));
        }
    }
});

Is this printing `console.log(self.get('sortedList'));` sorted list after removing?. — Ember Freak, Sep 23 '16 at 14:54
@kumkanillam yes the printed list is fine but the DOM is wrong. — user1432760, Sep 23 '16 at 15:02
just remove this line `list: Ember.ArrayProxy.create({content: Ember.A()})` and include the below line in `init()` - this.set('list',[]); I meant can you try this with normal array instead of ArrayProxy..Is there any specific reason for ArrayProxy ?. — Ember Freak, Sep 23 '16 at 15:10
@kumkanillam I try with normal [], with Ember.A and always it is the same result. I remove the line and and behaves the same. Here is how DOM looks like after sort [link](http://imgur.com/Z9DEEtC). I was add extra {{item.id}} before
May be you can try addon https://github.com/jgwhite/ember-sortable or this [stack overflow question](http://stackoverflow.com/questions/10298057/best-way-to-update-collectionview-content-after-jquery-ui-sortable) — Ember Freak, Sep 27 '16 at 10:13
Problem is you should shift object from current index to moved index positions, not just index property alone. — Ember Freak, Sep 27 '16 at 10:57
@kumkanillam I try that addon but is the same result, finaly I decide to use cancel option with index on items. After I set index on item I call cancel and sort items by index. Problem is what DOM is in conflict with ember each helper so after sort or delete item list is incorrect but cancel fix that problem. — user1432760, Sep 28 '16 at 23:02
@user1432760 could you please update your own question or give answer to your question, so it will help others. Thank youj — Aamir Mahmood, Oct 19 '16 at 10:10

score 0 · Answer 1 · answered Oct 25 '16 at 16:20

I still doesn't have perfect solution for my problem but because @Aamir Mahmood asked for update in the comment I will put here my solution that are not perfect but for now it work.

I tried I think every possible solution and always was the same result, the DOM has broke after one element was removed and added to another list. The break didn't always happened after first sort but eventually did happen.

First I will write what I did try, there is some solution on the web that was working on previous version of ember but after version 2.0 that solution doesn't work any more.
1) Use component function rerender after update didn't work
2) Sorting index after update also doesn't work
3) Use computed property that has value true/false and after update is done set property to false and immediately change to true didn't work

The solution is to completely remove html ul tag and rewrite it again to DOM, all other solution didn't do that.

My solution is to create computed property that is array and add only on item to array and after update set the new array to computed property. After update the array loop will be run and old ul tag will be removed and new will be added.

Template:

{{#each placeboListComputed as |placeboItem|}}
<ul id="sortable_{{node.id}}" class="sortable_connection">
    {{#each sortedList key="index" as |item index|}}
        {{li-component
        item=item
        index=index
        }}
    {{/each}}
</ul>
{{/each}}

Component,

This is not code that work this is just example to get idea. Placebo list is computed property that is array and will loop every time when array is changed so template will rerender DOM,

After sorting from one list to another the first is triggered update on list from which item is going to another list after that receive, then remove and finally update on list that getting item. So after remove item I save that item to trash and on update I check does given item does not exist on list but exist in trash I add that item to list and resort computed property that will rewrite content.

export default Ember.Component.extend({
sortProps: ['index:asc'],
sortedList : Ember.computed.sort('list', 'sortProps'),
placeboList: Ember.A(),
placeboListComputed: Ember.computed('placeboList', function () {
    return this.get('placeboList');
}),
init() {
    this._super();
    this.resetPlacebo();
},
resetPlacebo() {
    var list = Ember.A(),
        newPlacebo = Placebo.create();
    list.pushObject(newPlacebo);
    this.set('placeboList', list);
},
updateSortableIndices(items, indices, self) {

    self.beginPropertyChanges();
    items.forEach((item) => {
        var index = indices[Ember.get(item, 'id')];
        if (index !== undefined) {
            if (Ember.get(item, 'index') !== index) {
                Ember.set(item, 'index',index);
            }
        }
    });
    self.endPropertyChanges();
},
didRender() {
    var self = this;

    Ember.$("#sortable_" + this.get('node.id')).sortable({
        helper: 'clone',
        appendTo: "#append_element",
        connectWith: ".sortable_connection",
        update: function (event, ui) {

            var uiItemId = Ember.$(ui.item).children().attr('data-id'),
                uiItemIndex = Ember.$(ui.item).index() + 1;
            var item = self.getItem(uiItemId);
            var indices = {};
            var currentItemIndex = item.index;

            Ember.$(this).children().children().each((index, item) => {
                indices[Ember.$(item).attr('data-id')] = index + 1;
            }).promise().done(function () {

                if (!(uiItemId in indices)) {
                    var trash = self.getTrash(uiItemId);
                    if (trash !== undefined) {

                        Ember.$.each(indices, function (id, index) {

                            if (index >= currentItemIndex ) {
                                index = index + 1;
                                indices[id] = index;
                            }
                        });
                        self.removeTrash(uiItemId);

                    } else {
                        Ember.set(role, 'index', uiItemIndex);
                    }

                }
                self.updateSortableIndices(self.get('list'), indices, self);
            });
            self.resetPlacebo();
        },
        receive: function (event, ui) {

            var id = ui.item.children().attr('data-id'),
                items = self.get('list');

            var item= self.getItem(id, true);

            items.arrayContentWillChange();
            items.pushObject(item);
            items.arrayContentDidChange();
        },
        remove: function (event, ui) {

            var item= self.getItem(ui.item.children().attr('data-id')),
                items = self.get('list');
            var removedIndex = item.index;
            items .arrayContentWillChange();
            self.pushTrash(item.id, item);
            items .removeObject(item);
            self.sortRemovedIndex(items , removedIndex);
            items .arrayContentDidChange();
        }
    });
}

This is not still fully tested solution but what I saw it work. If there is some Ember expert I will be grateful to see his idea or solution for this problem.

Delete item after sorting jQuery UI with Ember

1 Answers1