fix finding next available id for report items, #16

beat/web/reports/static/reports/app/directives/edit/addItemsMenu.js

@@ -36,12 +36,14 @@ angular.module('reportApp')
 			// the given type
 			// by looking at the existing items
 			const getNextItemId = (type) => {
-				let count = Object.values(scope.group.reportItems)
-				.filter(v => v.id.includes(type))
-				.length
-				;
+				const formatId = (type, count) => `${type}_${count}`;
+				let currCount = 0;
+				let nextId = formatId(type, currCount);
+				while(scope.group.reportItems.find(i => i.id === nextId)){
+					currCount++;
+					nextId = formatId(type, currCount);
+				}
 
-				let nextId = `${type}_${count}`;
 				return nextId;
 			};
 

beat/web/reports/static/reports/app/directives/edit/itemContainer.js

@@ -45,7 +45,7 @@ angular.module('reportApp')
 	ng-if="item.id.includes('table')"
 	class='panel panel-default'
 	group='group'
-	id='item.id'
+	item-id='item.id'
 	content='item.content'
 	>
 </div>
@@ -54,7 +54,7 @@ angular.module('reportApp')
 	ng-if="item.id.includes('plot')"
 	class='panel panel-default'
 	group='group'
-	id='item.id'
+	item-id='item.id'
 	content='item.content'
 	>
 </div>
@@ -64,6 +64,7 @@ angular.module('reportApp')
 	class='panel panel-default'
 	group='group'
 	report-item='item'
+	item-id='item.id'
 	>
 </div>
 `

beat/web/reports/static/reports/app/directives/edit/plotItem.js

@@ -30,12 +30,12 @@ angular.module('reportApp')
 	return {
 		scope: {
 			group: '=',
-			id: '=',
+			itemId: '=',
 			content: '='
 		},
 		link: function(scope){
 			const group = scope.group;
-			scope.domId = `${scope.group.name}_${scope.id}`;
+			scope.domId = `${scope.group.name}_${scope.itemId}`;
 
 			// container for the plots applet to insert into
 			scope.renderDivId = `${scope.domId}-render`;
@@ -44,7 +44,7 @@ angular.module('reportApp')
 			// angular will run these functions called with $timeout
 			// after everything has been rendered
 			$timeout(function() {
-				PlotService.addPlot(scope.group, scope.id, scope.renderDivId);
+				PlotService.addPlot(scope.group, scope.itemId, scope.renderDivId);
 			});
 
 			let plotTimer;
@@ -58,7 +58,7 @@ angular.module('reportApp')
 					// redo the render
 					if(el && el.childNodes.length > 0){
 						el.innerHTML = '';
-						PlotService.addPlot(scope.group, scope.id, scope.renderDivId);
+						PlotService.addPlot(scope.group, scope.itemId, scope.renderDivId);
 					}
 				};
 
@@ -107,7 +107,7 @@ angular.module('reportApp')
 		</a>
 		<div class='btn-group action-buttons'>
 			<span
-				ng-click='group.removeReportItem(id)'
+				ng-click='group.removeReportItem(itemId)'
 				class="btn btn-default btn-delete"
 				data-toggle="tooltip" data-placement="top" title="Delete Plot">
 				<i class="fa fa-times fa-lg"></i>

beat/web/reports/static/reports/app/directives/edit/tableItem.js

@@ -31,14 +31,14 @@ angular.module('reportApp')
 	return {
 		scope: {
 			group: '=',
-			id: '=',
+			itemId: '=',
 			content: '='
 		},
 		link: function(scope){
 			// aliases
 			scope.fields = scope.content.fields;
 			// ids
-			scope.domId = `${scope.group.name}_${scope.id}`;
+			scope.domId = `${scope.group.name}_${scope.itemId}`;
 			scope.colSelectorId = `${scope.domId}_columnSelector`;
 
 			// 1 - 10
@@ -88,7 +88,7 @@ angular.module('reportApp')
 		</a>
 		<div class='btn-group action-buttons'>
 			<span
-				ng-click='group.removeReportItem(id)'
+				ng-click='group.removeReportItem(itemId)'
 				class="btn btn-default btn-delete"
 				data-toggle="tooltip" data-placement="top" title="Delete Table">
 				<i class="fa fa-times fa-lg"></i>