From d9f2f1e8009404888b1dd4c5f0c279c319fe5097 Mon Sep 17 00:00:00 2001
From: jaden <noreply@example.com>
Date: Thu, 1 Jun 2017 16:18:08 +0200
Subject: [PATCH] refactor editable labels to own directive #38
---
.../app/directives/edit/panelContent.js | 18 +-----
.../reports/app/directives/editableLabel.js | 61 +++++++++++++++++++
.../web/reports/templates/reports/report.html | 1 +
3 files changed, 63 insertions(+), 17 deletions(-)
create mode 100644 beat/web/reports/static/reports/app/directives/editableLabel.js
diff --git a/beat/web/reports/static/reports/app/directives/edit/panelContent.js b/beat/web/reports/static/reports/app/directives/edit/panelContent.js
index bfb1fecc1..881b0161e 100644
--- a/beat/web/reports/static/reports/app/directives/edit/panelContent.js
+++ b/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)'
diff --git a/beat/web/reports/static/reports/app/directives/editableLabel.js b/beat/web/reports/static/reports/app/directives/editableLabel.js
new file mode 100644
index 000000000..2f44bbbb5
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/editableLabel.js
@@ -0,0 +1,61 @@
+/*
+ * 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>
+`
+ };
+}]);
+
diff --git a/beat/web/reports/templates/reports/report.html b/beat/web/reports/templates/reports/report.html
index 8fad84ee4..4934e4fd5 100644
--- a/beat/web/reports/templates/reports/report.html
+++ b/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 %}
--
GitLab