Motion comments inline editing

CHANGELOG

@@ -58,6 +58,7 @@ Motions:
 - Number of ballots printed can now be set in config.
 - Add new personal settings to remove all whitespaces from motion identifier.
 - Add new personal settings to allow amendments of amendments.
+- Added inline editing for comments.
 
 Elections:
 - Added options to calculate percentages on different bases.

openslides/motions/static/js/motions/motion-services.js

@@ -59,27 +59,19 @@ angular.module('OpenSlidesApp.motions.motionservices', ['OpenSlidesApp.motions',
 .factory('MotionInlineEditing', [
     'Editor',
     'Motion',
-    'Config',
     '$timeout',
     'gettextCatalog',
-    function (Editor, Motion, Config, $timeout, gettextCatalog) {
+    function (Editor, Motion, $timeout, gettextCatalog) {
+        var createInstance = function ($scope, motion, selector, versioning, getOriginalData, saveData) {
             var obj = {
                 active: false,
                 changed: false,
+                isEditable: false,
                 trivialChange: false,
-            originalHtml: null
+                originalHtml: null,
+                ckeditorOptions: Editor.getOptions(),
             };
-
-        var $scope, motion;
-
-        obj.init = function (_scope, _motion) {
-            $scope = _scope;
-            motion = _motion;
-            obj.ckeditorOptions = Editor.getOptions();
             obj.ckeditorOptions.readOnly = true;
-            obj.isEditable = false;
-            obj.changed = false;
-        };
 
             obj.setVersion = function (_motion, versionId) {
                 motion = _motion; // If this is not updated,
@@ -96,7 +88,7 @@ angular.module('OpenSlidesApp.motions.motionservices', ['OpenSlidesApp.motions',
                     obj.active = true;
                     obj.isEditable = true;
                     obj.ckeditorOptions.language = gettextCatalog.getCurrentLanguage();
-                obj.editor = CKEDITOR.inline('view-original-inline-editor', obj.ckeditorOptions);
+                    obj.editor = CKEDITOR.inline(selector, obj.ckeditorOptions);
                     obj.editor.on('change', function () {
                         $timeout(function() {
                             if (obj.editor.getData() != obj.originalHtml) {
@@ -129,11 +121,11 @@ angular.module('OpenSlidesApp.motions.motionservices', ['OpenSlidesApp.motions',
             };
 
             // sets editor content to the initial motion state
-        obj.revert = function() {
+            obj.revert = function(originalData) {
                 if (obj.editor) {
-                obj.originalHtml = motion.getTextWithLineBreaks($scope.version);
+                    obj.originalHtml = getOriginalData(obj);
                     obj.editor.setData(
-                    motion.getTextWithLineBreaks($scope.version), {
+                        getOriginalData(obj), {
                         callback: function() {
                             obj.originalHtml = obj.editor.getData();
                             obj.editor.setReadOnly(false);
@@ -153,14 +145,15 @@ angular.module('OpenSlidesApp.motions.motionservices', ['OpenSlidesApp.motions',
                     throw 'No permission to update motion';
                 }
 
-            motion.setTextStrippingLineBreaks(obj.editor.getData());
+                saveData(obj);
-            motion.disable_versioning = (obj.trivialChange && Config.get('motions_allow_disable_versioning').value);
 
                 Motion.inject(motion);
                 // save change motion object on server
                 Motion.save(motion, {method: 'PATCH'}).then(
                     function (success) {
+                        if (versioning) {
                             $scope.showVersion(motion.getVersion(-1));
+                        }
                         obj.revert();
                     },
                     function (error) {
@@ -178,6 +171,68 @@ angular.module('OpenSlidesApp.motions.motionservices', ['OpenSlidesApp.motions',
             };
 
             return obj;
+        };
+        return {
+            createInstance: createInstance
+        };
+    }
+])
+
+.factory('MotionCommentsInlineEditing', [
+    'MotionInlineEditing',
+    function (MotionInlineEditing) {
+        var createInstances = function ($scope, motion) {
+            var commentsInlineEditing = {
+                editors: []
+            };
+            _.forEach($scope.commentsFields, function (field) {
+                var inlineEditing = MotionInlineEditing.createInstance($scope, motion,
+                    'view-original-comment-inline-editor-' + field.name, false,
+                    function (obj) {
+                        return motion['comment ' + field.name];
+                    },
+                    function (obj) {
+                        motion['comment ' + field.name] = obj.editor.getData();
+                    }
+                );
+                commentsInlineEditing.editors.push(inlineEditing);
+            });
+            commentsInlineEditing.saveToolbarVisible = function () {
+                return _.some(commentsInlineEditing.editors, function (instance) {
+                    return instance.changed && instance.active;
+                });
+            };
+            commentsInlineEditing.active = function () {
+                return _.some(commentsInlineEditing.editors, function (instance) {
+                    return instance.active;
+                });
+            };
+            commentsInlineEditing.save = function () {
+                _.forEach(commentsInlineEditing.editors, function (instance) {
+                    instance.save();
+                });
+            };
+            commentsInlineEditing.revert = function () {
+                _.forEach(commentsInlineEditing.editors, function (instance) {
+                    instance.revert();
+                });
+            };
+            commentsInlineEditing.enable = function () {
+                _.forEach(commentsInlineEditing.editors, function (instance) {
+                    instance.enable();
+                });
+            };
+            commentsInlineEditing.disable = function () {
+                _.forEach(commentsInlineEditing.editors, function (instance) {
+                    instance.disable();
+                });
+            };
+
+            return commentsInlineEditing;
+        };
+        return {
+            createInstances: createInstances,
+        };
     }
 ])
 

openslides/motions/static/js/motions/site.js

@@ -1100,12 +1100,13 @@ angular.module('OpenSlidesApp.motions.site', [
     'Config',
     'motion',
     'MotionInlineEditing',
+    'MotionCommentsInlineEditing',
     'Projector',
     'ProjectionDefault',
     function($scope, $http, operator, ngDialog, MotionForm,
              ChangeRecommmendationCreate, ChangeRecommmendationView, MotionChangeRecommendation, MotionPDFExport,
              Motion, MotionComment, Category, Mediafile, Tag, User, Workflow, Config, motion, MotionInlineEditing,
-             Projector, ProjectionDefault) {
+             MotionCommentsInlineEditing, Projector, ProjectionDefault) {
         Category.bindAll({}, $scope, 'categories');
         Mediafile.bindAll({}, $scope, 'mediafiles');
         Tag.bindAll({}, $scope, 'tags');
@@ -1345,8 +1346,17 @@ angular.module('OpenSlidesApp.motions.site', [
         };
 
         // Inline editing functions
-        $scope.inlineEditing = MotionInlineEditing;
+        $scope.inlineEditing = MotionInlineEditing.createInstance($scope, motion,
-        $scope.inlineEditing.init($scope, motion);
+            'view-original-text-inline-editor', true,
+            function (obj) {
+                return motion.getTextWithLineBreaks($scope.version);
+            },
+            function (obj) {
+                motion.setTextStrippingLineBreaks(obj.editor.getData());
+                motion.disable_versioning = (obj.trivialChange && Config.get('motions_allow_disable_versioning').value);
+            }
+        );
+        $scope.commentsInlineEditing = MotionCommentsInlineEditing.createInstances($scope, motion);
 
         // Change recommendation creation functions
         $scope.createChangeRecommendation = ChangeRecommmendationCreate;

openslides/motions/static/templates/motions/motion-detail.html

@@ -485,16 +485,5 @@
   </div>
 </div>
 
-<div class="details" ng-if="isAllowedToSeeCommentField()">
+<!-- Comments section -->
-  <h3 translate>Comments</h3>
+<ng-include src="'static/templates/motions/motion-detail/comments.html'"></ng-include>
-  <div ng-repeat="field in commentsFields">
-    <div ng-if="(field.public && !field.forState && !field.forRecommendation) ||
-        (operator.hasPerms('motions.can_see_and_manage_comments') && !field.forState && !field.forRecommendation)">
-      <h4>
-        {{ field.name }}
-        <span ng-if="!field.public" class="label label-warning" translate>internal</span>
-      </h4>
-      <div ng-bind-html="motion.comments[$index]"></div>
-    </div>
-  </div>
-</div>

openslides/motions/static/templates/motions/motion-detail/comments.html

@@ -0,0 +1,45 @@
+<div class="details" ng-if="isAllowedToSeeCommentField()">
+  <div class="row">
+    <!-- inline editing toolbar -->
+    <div class="motion-toolbar">
+      <div class="pull-right inline-editing-activator" ng-if="motion.isAllowed('update')">
+        <button ng-if="!commentsInlineEditing.active()" ng-click="commentsInlineEditing.enable()"
+          class="btn btn-sm btn-default">
+          <i class="fa fa-pencil-square-o"></i>
+          <translate>Inline editing</translate>
+        </button>
+        <button ng-if="commentsInlineEditing.active()" ng-click="commentsInlineEditing.disable()"
+          class="btn btn-sm btn-default">
+          <i class="fa fa-times-circle"></i>
+          <translate>Inline editing</translate>
+        </button>
+      </div>
+      <h3 class="toolbar-left" translate>Comments</h3>
+    </div>
+    <!-- comment fields -->
+    <div class="col-sm-12">
+      <div ng-repeat="field in commentsFields">
+        <div ng-if="(field.public && !field.forState && !field.forRecommendation) ||
+            (operator.hasPerms('motions.can_see_and_manage_comments') && !field.forState && !field.forRecommendation)">
+          <h4>
+            {{ field.name }}
+            <span ng-if="!field.public" class="label label-warning" translate>internal</span>
+          </h4>
+          <div id="view-original-comment-inline-editor-{{ field.name }}" style="min-height: 14px;"
+            ng-bind-html="motion.comments[$index] | trusted" contenteditable="{{ commentsInlineEditing.editors[$index].isEditable }}"></div>
+        </div>
+      </div>
+      <!-- save toolbar -->
+      <div class="motion-save-toolbar" ng-class="{ 'visible': commentsInlineEditing.saveToolbarVisible() }">
+        <div class="changed-hint" ng-if="commentsFields.length > 1" translate>The comments have been changed.</div>
+        <div class="changed-hint" ng-if="commentsFields.length == 1" translate>The comment has been changed.</div>
+        <button type="button" ng-click="commentsInlineEditing.save()" class="btn btn-primary" translate>
+            Save
+        </button>
+        <button type="button" ng-click="commentsInlineEditing.revert()" class="btn btn-primary" translate>
+            Revert
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

openslides/motions/static/templates/motions/motion-detail/view-original.html

@@ -1,6 +1,6 @@
 <!-- Original view -->
 <div ng-if="viewChangeRecommendations.mode == 'original' && version == motion.getVersion(-1).id">
-    <div id="view-original-inline-editor" ng-bind-html="motion.getTextWithLineBreaks(version, highlight) | trusted"
+    <div id="view-original-text-inline-editor" ng-bind-html="motion.getTextWithLineBreaks(version, highlight) | trusted"
       class="motion-text motion-text-original line-numbers-{{ lineNumberMode }}"
       contenteditable="{{ inlineEditing.isEditable }}">
     </div>