Following some resize and drag actions on my dashboard, I aim to store the updated size and position of my altered widget in my MongoDB database. Even though the gridster library offers the ability to respond to draggable and resizable events, these events are static. This poses a challenge when attempting to save the new values using my database service since it cannot be utilized due to its static nature.
I employed Angular 6 and angular-gridster2 6.0.10 for this project.
Does anyone have any suggestions on how I can leverage the resize/drag events to persist my data?
Below is a snippet of the code (not executable as it has been condensed):
export class SheetContentComponent implements OnInit {
constructor(protected databaseService: DatabaseService,
private dataService: DataService,
protected projectService: ProjectService) {
}
protected widgetType = WidgetType;
protected project: Project;
protected currentDashboardId: string;
protected user: User;
protected currentSheetId: string;
protected widgetPosition: GridsterItem;
protected currentWidgetId: string;
protected dashboard: Array<GridsterItem>;
ngOnInit(): void {
this.options = {
gridType: GridType.Fit,
displayGrid: DisplayGrid.Always,
compactType: CompactType.None,
margin: 10,
outerMargin: true,
minCols: 50,
maxCols: 200,
minRows: 50,
maxRows: 100,
pushItems: true,
pushDirections: {north: true, east: true, south: true, west: true},
pushResizeItems: true,
swap: true,
draggable: {
enabled: true,
stop: function (event, $element, widget) {
console.log("draggable");
this.saveInDatabase($element.el.id, event, 'position');
}
},
resizable: {
enabled: true,
stop: function (event, $element, widget) {
console.log("resizable");
this.saveInDatabase($element.el.id, event, 'position');
}
}
};
}
/**
* This method saves the selected options into the database.
* @param widgetId the id of the widget to save
* @param value the value
* @param field the field where to store
*/
protected saveInDatabase(widgetId: string, value, field: string): void {
this.databaseService.updateDocument(this.databaseService.WIDGETSCOLLECTION, widgetId, new Fieldvalue(field, value))
.subscribe(result => {
}, error => {
console.log('Error updating database entry ', error);
});
}<gridster #dashboardgrid [options]="options" class="widget-container">
<gridster-item *ngFor="let widget of list" id="widget.id" [id]="widget.id" [item]="widget.position" class="gridster-design" (mouseup)="enablePointer(widget.id)">
<!-- more HTML stuff -->
</gridster-item>
</gridster>I am encountering the following error: