can edit group names in panel header

beat/web/reports/static/reports/app/directives/groupPanelContent.js

@@ -32,6 +32,10 @@ angular.module('reportApp').directive("groupPanelContent", ['GroupsService', fun
 		},
 		link: function(scope){
 			scope.deleteGroup = GroupsService.deleteGroup;
+			scope.editingGroupName = true;
+			scope.change = () => {
+				scope.editingGroupName = !scope.editingGroupName;
+			};
 		},
 		template: `
 <div id="{{group.name}}-heading" class="panel-heading" role="tab">
@@ -44,8 +48,24 @@ angular.module('reportApp').directive("groupPanelContent", ['GroupsService', fun
 			href="#collapse-{{group.name}}"
 			aria-expanded="true"
 			aria-controls="collapse-{{group.name}}">
-			{{ group.name }}
 		</a>
+		<span ng-if='!editingGroupName' ng-click='change()'>
+			<span>{{ group.name }}</span>
+			<span class='glyphicon glyphicon-pencil'></span>
+		</span>
+		<form class='form-inline' role='form' style='display: inline;' ng-if='editingGroupName'>
+			<span class='input-group'>
+				<input
+					required
+					type='text'
+					class='form-control'
+					placeholder='Group name...'
+					ng-model='group._name'/>
+				<span class='input-group-addon' ng-click='change()'>
+					Save
+				</span>
+			</span>
+		</form>
 		<div class='btn-group'>
 			<button class='btn btn-danger' ng-click='deleteGroup(group.name)'>Delete Group</button>
 		</div>