In my application, there is a grid consisting of cells where users can drag and drop images. Whenever an image is dropped onto a cell, a $resource action call is triggered to update the app.
My goal is to display a loader in each cell while the update call is in progress. For example, when a user drops an item, a spinning loader should appear in the cell. Once the call completes, the loader should be removed and the cell updated accordingly.
All cells trigger the same call with different data being passed. The challenge I'm facing is how to identify which cell the response corresponds to, especially when multiple cells are loading simultaneously. Ideally, the API response should contain information about the cell location, allowing JavaScript to remove the loader and update the correct cell.
However, if the call fails for any reason, it becomes tricky to determine which cell had the failed call. How can the app identify the specific cell that needs the loader removed in case of a failed call?
I am looking for a solution where data specified in the $resource call can be accessed in the promise response. For instance:
rest = $resource('www.api-source.com/layout/34/cells','post',{cell_location:'2x4'},{'post': {method:'GET', isArray: false}});
rest.setTracker('2x5');
rest.post( );
rest.$promise.then(function(data) {
$scope.removeLoader(data.cell_data.location);
},function(data, status, headers, config) {
cell = rest.getTracker( );
$scope.removeLoader(cell);
}
This approach involves setting a value in the $resource object and extracting it from the promise. While this may not be the most optimal method, it aims to ensure that the loader is removed even if the cell location data is missing.