Angular 2 Dragula Model updating incorrectly

Question

Working with ng2-dragula. I'm looking to update the orderNumber for every item in a database using the new dropped order.

dragulaService.dropModel.subscribe((value) => {
  var drake = dragulaService.find('bag-orders').drake
  var models = drake.models
  console.log(models)
})

The new model order that it returns does not reflect the order within the bag.

TL;DR: has anyone implemented reordering within a database onDrop with ng2-dragula?

Answer 1

If you want to be able to drag items (without them disappearing) AND fire the dropModel event:

• Put the [dragula] and [dragulaModel] directives in the parent element. (For example, contrary to the current doc where it says to put them in the <li>, you have to put them in the <ul>

• Inject the dragularService, and, in the constructor of your component:

• Call the dragulaService.setOptions for the bag (you can pass an empty dictionary). If you don't call it, dropModelcallback is not fired

• Subscribe to dropModel

The result:

<!--thecomponent.html-->
<h2>Playlists</h2>
<ul [dragula]='"first-bag"' [dragulaModel]='playlists'>
  <li *ngFor="let playlist of playlists">

---

//Inside the component.ts  
playlists: Playlist[];

constructor(private youtubeService: YoutubeService, private dragulaService: DragulaService) {

    dragulaService.setOptions('first-bag', {})
    dragulaService.dropModel.subscribe((value) => {
      this.onDropModel(value);
    });
}

private onDropModel(args) {
    //Here, this.playlists contains the elements reordered
}

Answer 2

I was using the ng2-dragula and It's quite strange on something that I've noticed. The issue I had was the same. Server call is not updating the data object according to the dragged order.

I've just used if clause inside the ngDoCheck lifecycle hook to solve the issue.

It's sorted in the printed object in the console. After digging deeper a bit could find out in the network that the object that is sent with the update server call was the not updated one.

So, it's because the server call is made before the data object is updated.

All I did was adding a global variable which can keep track of drag has updated the data object.

private dropModelUpdated = false;

ngAfterViewInit() {
    // this method only changes a variable to execute a method in ngDoCheck
    this.dragulaService.drop.subscribe((value) => {
      this.dropModelUpdated = true;
    });
}

Then, in the ngDoCheck lifecycle hook,

ngDoCheck() {    
    if (this.dropModelUpdated) { // this excutes if this.dropModelUpdated is true only
        const drake = this.dragulaService.find('any_bag_name').drake;
        const models = drake.models;
        this.modelContent.groups = models[0];
        // ...Here... Make the server or DB call to update the model with the changed/sorted order
        this.dropModelUpdated = false; // make sure this is there for the next smooth execution
    }
}