we have an app which built with angular 4 and now we are trying to customize our theme by using dragula. I implemented every part of the page and it is working, persisting and etc. But now I have one big problem. We used angular routerlink to switch between our pages. Every thing works fine, but after I switch to another page (which works with angular routerlink) and I come back to main page, it will cause dragula to not working properly. I printed the results but it seems the position of each node is persisted and it is truly working but after I drag each of components it will disappear. Hear is some code which may help:
<span *ngFor="let portion of filterUndefinedItems(getPortions1())">
<rh-market-watch
*ngIf="portion.name == 'market-watch'"
style="display: flex;"></rh-market-watch>
...
this._dragulaService.setOptions('bag-one', {
revertOnSpill: true,
copy: true,
moves: function (el: any, container: any, handle: any): any {
if(el == null || el.children[0] == null) return false;
me.selectedElementName = el.children[0].getAttribute('name');
me.selectedElementsParentId = container.id;
return typeof(handle.className) == 'string' && handle.className.indexOf('draggable-main') >= 0;
}
});
this._dragulaService.drop.subscribe((value) => {
if (value[2].id != this.selectedElementsParentId) {
if (value[2].id.indexOf('2') > 0)
this.updateComponentColumn(this.selectedElementName, 2);
else if (value[2].id.indexOf('3') > 0)
this.updateComponentColumn(this.selectedElementName, 3);
else
this.updateComponentColumn(this.selectedElementName, 1);
}
if (value[4] != null && value[4].firstElementChild != null)
this.updateComponentPosition(
value[1].firstElementChild.getAttribute('name'), // Name of element which we want to move, for example x
value[4].firstElementChild.getAttribute('name') // Name of element which x will place on top of it
);
let userDataList: UserData[] = [];
let userData: UserData = new UserData;
userData.dataKey = UserData.EXIR_CUSTOM_THEME_POSITIONS;
userData.dataValue = JSON.stringify([this.getPortions1(), this.getPortions2(), this.getPortions3()]);
userDataList.push(userData);
this._restService.setUserData(userDataList, this._http)
.then(error => {
this.error(error);
});
});
private findPortion(portionName): any[] {
for(let portion of this.getPortions1())
if(portion.name == portionName)
return [1, portion];
for(let portion of this.getPortions2())
if(portion.name == portionName)
return [2, portion];
for(let portion of this.getPortions3())
if(portion.name == portionName)
return [3, portion];
return null;
}
private getRelatedPortions(portionNumber): Portion[] {
switch (portionNumber) {
case 1: return this.portions1;
case 2: return this.portions2;
case 3: return this.portions3;
default: return null;
}
}
private setRelatedPortions(portionNumber, portions) {
switch(portionNumber) {
case 1:
this.portions1 = portions;
return;
case 2:
this.portions2 = portions;
return;
case 3:
this.portions3 = portions;
return;
default:
return;
}
}
private updateComponentPosition(portionName: string, newPosition: string) {
let portionInfo: any[] = this.findPortion(portionName);
let portionNumber: number = portionInfo[0];
let portionToDrag: Portion = portionInfo[1];
this.setRelatedPortions(portionNumber, this.getRelatedPortions(portionNumber).filter(obj => obj !== portionToDrag));
this.getRelatedPortions(portionNumber).splice(this.getRelatedPortions(portionNumber).indexOf(this.findPortion(newPosition)[1]), 0, portionToDrag);
}
private updateComponentColumn(portionName: string, column: number) {
let portionInfo: any[] = this.findPortion(portionName);
this.getRelatedPortions(portionInfo[0]).splice(this.getRelatedPortions(portionInfo[0]).indexOf(portionInfo[1]), 1);
this.getRelatedPortions(column).push(portionInfo[1]);
}
The way I showed components: I have 3 div elements which has [dragula]='bag-one' and also 3 lists which indicates which item should be appear in which div. In each div I placed every drag-able element in a for loop in a span. So every element will be printed if it is in the corresponding list. It is working very well, but after I switch to a routerlink and come back to the main page again, ng-dracula stops working and it is not moving items. It seems it is related to routerlink in angular but I do not know why.
I also faced some css issues, for example my components have css style: display: grid but after routerlink, I have this style, but it is not working and when I disable it and re-enable it, it works just fine.
Any helps will greatly appreciated.
Unfortunately I found the problem and it is just a little mistake. The first problem, I moved the style for display: flex into the component using :host means:
@Component({
selector: 'market-watch',
template: 'blah-blah',
style: `
:host { display: grid }
`
})
and for the dragula problem, I used some filters before for some bugs, I mean this filter:
filterUndefinedItems(items) {
return items.filter(obj => obj !== undefined && obj != null);
}
and when I removed it, the problem solved, and I do not know why! but it is working now! :D