CODEWITHSUNDEEP
angularfirebaseangular5dragulang2-dragula
av0000
av0000

Reputation: 1967

Angular Dragula - Not Updating Firebase on Drop

I have an AngularFireList of items.

I split the items into arrays and use those to populate several divs for one dragula bag based on each item's location value which corresponds to the div's ID.

On dropping one item into another div the dragged item's location value is updated to the id of the new div. All this works as expected but the updates to the item's location value is not being saved to Firebase, so when I inspect the item I see the updated value but if I refresh the page nothing has been saved.

Where have I gone wrong?

HTML:

<div 
    [dragula]='"bag-equipment"' 
    [dragulaModel]="equipmentArmor"
    id="armor"
>
    <mat-card *ngFor="let item of equipmentArmor">
        {{ item.name }}
    </mat-card>
</div>

<div 
    [dragula]='"bag-equipment"'
    [dragulaModel]="equipmentBagOfHolding"
    id="bagOfHolding"
>
    <mat-card *ngFor="let item of equipmentBagOfHolding">
        {{ item.name }} 
    </mat-card>
</div>

TS:

    ngOnInit() {

    this.dragula.drop.subscribe(value => {

        // Get location item is dragged to
        let destination = value[2]['id'];

        // Get item's name and clean it up
        let itemName = value[1]['innerText'];
        itemName = value[1]['innerText'].trim();
        itemName = itemName.slice(0, -5);

        // Update the FireList's itemList
        this.itemList.find(item => item.name == itemName).location = destination;

    });

    let data = this.itemService.getData();
    
    data.snapshotChanges().subscribe(item => {

        this.itemList = [];
        item.forEach(element => {
            let json = element.payload.toJSON();
            json["$key"] = element.key;
            this.itemList.push(json as Item);
        });

        this.itemList = this.itemList.filter(item => item.equippable == true);
        this.equipmentArmor = this.itemList.filter(item => item.location == 'armor');
        this.equipmentBagOfHolding = this.itemList.filter(item => item.location == 'bagOfHolding');
        this.equipmentMisc = this.itemList.filter(item => item.location == 'misc');
        this.equipmentWeapons = this.itemList.filter(item => item.location == 'weapons');

    });
}

Upvotes: 0

Views: 198

Answers (2)

av0000
av0000

Reputation: 1967

So I finally realized updating the model doesn't push the update back to firebase; I'm so used to Angular interpolating values I completely forgot that Firebase doesn't automatically update. So I just pushed up the updated object back and everything worked as expected. Just goes to show that 99% of the time its the dumbest thing.

HTML snippet:

this.itemList.find(item => item.name == itemName).location = destination;
this.itemService.updateItem(this.itemList.find(item => item.name == itemName));

Upvotes: 0

Jolleyboy
Jolleyboy

Reputation: 1403

I would guess that equipmentBagOfHolding/this.itemList isn't the same array as the array returned from itemService.getData(). Since your UI is tied to those arrays, when they change it's updated, but the array from itemService.getData() isn't.

Upvotes: 1

Related Questions