refactor editable labels to own directive #38

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

@@ -53,23 +53,7 @@ angular.module('reportApp').directive("groupPanelContent", ['GroupsService', fun
 			aria-expanded="true"
 			aria-controls="collapse-{{group.name}}">
 		</a>
-		<span ng-if='!editingGroupName' ng-click='toggleEditingGroupName()'>
-			<span>{{ group.name }}</span>
-			<span style='cursor: pointer;' 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='toggleEditingGroupName()'>
-					Save
-				</span>
-			</span>
-		</form>
+		<editable-label obj='group' field='_name'></editable-label>
 		<div class='btn-group action-buttons'>
 			<span
 				ng-click='deleteGroup(group.name)'

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

+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+
+/*
+ * editableLabel
+ * Desc:
+ * 	represents an editable label (group name, report item name, etc.)
+ */
+angular.module('reportApp').directive("editableLabel", [function(){
+	return {
+		scope: {
+			obj: '=',
+			field: '@'
+		},
+		link: function(scope){
+			scope.editingGroupName = false;
+			scope.toggleEditingGroupName = () => {
+				scope.editingGroupName = !scope.editingGroupName;
+			};
+		},
+		template: `
+<span ng-if='!editingGroupName' ng-click='toggleEditingGroupName()'>
+	<span>{{ obj[field] }}</span>
+	<span style='cursor: pointer;' 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='A label...'
+			ng-model='obj[field]'/>
+		<span class='input-group-addon' ng-click='toggleEditingGroupName()'>
+			Save
+		</span>
+	</span>
+</form>
+`
+	};
+}]);
+

beat/web/reports/templates/reports/report.html

@@ -104,6 +104,7 @@
     <script src="{% fingerprint "reports/app/directives/error.js" %}" type="text/javascript" charset="utf-8"></script>
     <script src="{% fingerprint "reports/app/directives/experimentsTable.js" %}" type="text/javascript" charset="utf-8"></script>
     <script src="{% fingerprint "reports/app/directives/lastEdited.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/editableLabel.js" %}" type="text/javascript" charset="utf-8"></script>
 
     <!-- edit view -->
     {% if not report_number and report.get_status_display == 'Editable' and owner %}