Merge pull request #2813 from FinnStutzenstein/MotionCommentInline

Motion comments inline editing
2017-01-11 21:48:02 +01:00 · 2017-01-11 21:48:02 +01:00 · fb24ca0aba
commit fb24ca0aba
parent 4a935bb641 b44b58393d
6 changed files with 228 additions and 128 deletions
--- a/1
+++ b/1
@ -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.
--- a/openslides/motions/static/js/motions/motion-services.js
+++ b/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());
-            motion.disable_versioning = (obj.trivialChange && Config.get('motions_allow_disable_versioning').value);
+                saveData(obj);

                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,
+        };
    }
 ])

--- a/openslides/motions/static/js/motions/site.js
+++ b/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.init($scope, motion);
+        $scope.inlineEditing = MotionInlineEditing.createInstance($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;
--- a/openslides/motions/static/templates/motions/motion-detail.html
+++ b/openslides/motions/static/templates/motions/motion-detail.html
@ -485,16 +485,5 @@
  </div>
 </div>

-<div class="details" ng-if="isAllowedToSeeCommentField()">
-  <h3 translate>Comments</h3>
-  <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>
+<!-- Comments section -->
+<ng-include src="'static/templates/motions/motion-detail/comments.html'"></ng-include>
--- a/openslides/motions/static/templates/motions/motion-detail/comments.html
+++ b/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>
--- a/openslides/motions/static/templates/motions/motion-detail/view-original.html
+++ b/openslides/motions/static/templates/motions/motion-detail/view-original.html
@ -1,8 +1,8 @@
 <!-- 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 }}">
+      contenteditable="{{ inlineEditing.isEditable }}">
    </div>
    <div class="motion-save-toolbar" ng-class="{ 'visible': (inlineEditing.changed && inlineEditing.active) }">
        <div class="changed-hint" translate>The text has been changed.</div>