From 26dfc65c25715f1890438534bca353f0730aea49 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 4 Oct 2017 19:06:16 +0200
Subject: [PATCH] Comments in polls

---
 customize.dist/pages.js |  13 ++++
 www/common/toolbar3.js  |   2 +-
 www/poll/app-poll.less  |  60 ++++++++++++++++++
 www/poll/inner.js       | 132 +++++++++++++++++++++++++++++++++++++++-
 www/poll/render.js      |   3 +-
 5 files changed, 205 insertions(+), 5 deletions(-)

diff --git a/customize.dist/pages.js b/customize.dist/pages.js
index 9e249b6db..1f28dfcb9 100644
--- a/customize.dist/pages.js
+++ b/customize.dist/pages.js
@@ -664,6 +664,19 @@ define([
                             h('button#cp-app-poll-create-option.btn.btn-secondary', {
                                 title: Msg.poll_create_option
                             }, h('span.fa.fa-plus')),
+                        ]),
+                        h('div#cp-app-poll-comments', [
+                            h('h2#cp-app-poll-comments-add-title', "TODO: add comment"),
+                            h('div#cp-app-poll-comments-add', [
+                                h('input.cp-app-poll-comments-add-name', {
+                                    type: 'text'
+                                }),
+                                h('textarea.cp-app-poll-comments-add-msg'),
+                                h('button.cp-app-poll-comments-add-submit', "TODO: SUBMIT"),
+                                h('button.cp-app-poll-comments-add-cancel', "TODO: CANCEL")
+                            ]),
+                            h('h2#cp-app-poll-comments-list-title', "TODO: comments"),
+                            h('div#cp-app-poll-comments-list')
                         ])
                     ])
                 ])
diff --git a/www/common/toolbar3.js b/www/common/toolbar3.js
index 75102b1ad..6433906d6 100644
--- a/www/common/toolbar3.js
+++ b/www/common/toolbar3.js
@@ -228,7 +228,7 @@ define([
                 $span.append($rightCol);
             } else {
                 Common.displayAvatar($span, data.avatar, name, function ($img) {
-                    if (data.avatar && $img) {
+                    if (data.avatar && $img.length) {
                         avatars[data.avatar] = $img[0].outerHTML;
                     }
                     $span.append($rightCol);
diff --git a/www/poll/app-poll.less b/www/poll/app-poll.less
index b6ed472cb..2b109314b 100644
--- a/www/poll/app-poll.less
+++ b/www/poll/app-poll.less
@@ -5,6 +5,7 @@
 @import (once) '../../customize/src/less2/include/alertify.less';
 @import (once) '../../customize/src/less2/include/tokenfield.less';
 @import (once) '../../customize/src/less2/include/tools.less';
+@import (once) '../../customize/src/less2/include/avatar.less';
 
 .toolbar_main();
 .fileupload_main();
@@ -487,6 +488,65 @@ div.cp-app-poll-realtime {
             display: none;
         }
     }
+    #cp-app-poll-comments {
+        width: 50%;
+        margin: 20px auto;
+        min-width: 400px;
+        #cp-app-poll-comments-add {
+            input, textarea {
+                border: 1px solid black;
+                width: 90%;
+                margin: 5px 5%;
+            }
+            input {
+                padding: 5px;
+                height: 26px;
+                &[disabled] {
+                    background: #eee;
+                }
+            }
+            textarea {
+                padding: 5px;
+                height: 8em;
+                line-height: 1.5em;
+            }
+            text-align: center;
+        }
+        #cp-app-poll-comments-list {
+            .cp-app-poll-comments-list-el {
+                width: 90%;
+                margin: 5px 5%;
+            }
+            .cp-app-poll-comments-list-msg {
+                display: flex;
+                background: #eee;
+                padding: 5px 10px;
+                .cp-app-poll-comments-list-msg-text {
+                    flex: 1;
+                    white-space: pre;
+                }
+                .cp-app-poll-comments-list-msg-actions {
+                    button {
+                        border-radius: 0;
+                        width: 25px;
+                        padding: 0;
+                        line-height: 20px;
+                    }
+                }
+            }
+            .cp-app-poll-comments-list-data {
+                background: #ddd;
+                padding: 5px 10px;
+                display: flex;
+                align-items: center;
+                .cp-app-poll-comments-list-data-name {
+                    margin-left: 10px;
+                    flex: 1;
+                }
+                .cp-app-poll-comments-list-data-avatar { .avatar_main(30px); }
+            }
+        }
+    }
 }
 
 .btn {
diff --git a/www/poll/inner.js b/www/poll/inner.js
index 8e7bd8af3..4a2d90ffc 100644
--- a/www/poll/inner.js
+++ b/www/poll/inner.js
@@ -743,7 +743,6 @@ define([
     };
     var updateDescription = function (old, n) {
         var o = APP.editor.getValue();
-        console.error(n);
         SframeCM.setValueAndCursor(APP.editor, o, n, TextPatcher);
         updatePublishedDescription();
         common.notify();
@@ -753,6 +752,119 @@ define([
         updatePublishedDescription();
     };
 
+    var getCommentId = Render.Uid('c');
+    var removeComment = function (uid) {
+        var idx;
+        APP.proxy.comments.some(function (c, i) {
+            if (c.uid === uid) {
+                console.log('found');
+                idx = i;
+                return true;
+            }
+        });
+        if (idx) {
+            APP.proxy.comments.splice(idx, 1);
+        }
+        APP.updateComments();
+    };
+    /*var editComment = function (id) {
+        // TODO
+    };*/
+    var avatars = {};
+    var updateComments = APP.updateComments = function () {
+        if (!APP.proxy.comments) { APP.proxy.comments = []; }
+
+        var profile;
+        if (common.isLoggedIn()) {
+            profile = metadataMgr.getUserData().profile;
+        }
+
+        var $comments = APP.$comments.html('');
+        var comments = APP.proxy.comments;
+        comments.forEach(function (c) {
+            var $c = $('<div>', {
+                'class': 'cp-app-poll-comments-list-el'
+            }).prependTo($comments);
+            // Metadata
+            var $data = $('<div>', { 'class': 'cp-app-poll-comments-list-data' }).appendTo($c);
+            var $avatar = $('<span>', {
+                'class': 'cp-app-poll-comments-list-data-avatar cp-avatar'
+            }).appendTo($data);
+            if (c.avatar && avatars[c.avatar]) {
+                $avatar.append(avatars[c.avatar]);
+            } else {
+                common.displayAvatar($avatar, c.avatar, c.name, function ($img) {
+                    if (c.avatar && $img.length) { avatars[c.avatar] = $img[0].outerHTML; }
+                });
+            }
+            if (c.profile) {
+                $('<a>', {
+                    'href': APP.origin + '/profile/#' + c.profile,
+                    'target': '_blank',
+                    'class': 'cp-app-poll-comments-list-data-name'
+                }).appendTo($data).text(c.name);
+            } else {
+                $('<span>', {
+                    'class': 'cp-app-poll-comments-list-data-name'
+                }).appendTo($data).text(c.name);
+            }
+            $('<span>', {
+                'class': 'cp-app-poll-comments-list-data-time'
+            }).appendTo($data).text(new Date(c.time).toLocaleString());
+
+            // Message
+            var $msg = $('<div>', { 'class': 'cp-app-poll-comments-list-msg' }).appendTo($c);
+            $('<div>', {
+                'class': 'cp-app-poll-comments-list-msg-text'
+            }).appendTo($msg).text(c.msg);
+            var $actions = $('<div>', {
+                'class': 'cp-app-poll-comments-list-msg-actions'
+            }).appendTo($msg);
+
+            // Actions
+            if (!c.profile || c.profile === profile) {
+                $('<button>', {
+                    'class': 'fa fa-times',
+                    'title': 'TODO: remove comment',
+                    'data-rt-id': c.uid
+                }).appendTo($actions).click(function () { removeComment(c.uid); });
+                /*$('<button>', {
+                    'class': 'fa fa-pencil',
+                    'title': 'TODO: edit comment',
+                    'data-rt-id': c.uid
+                }).appendTo($actions).click(editComment);*/
+            }
+        });
+        common.notify();
+    };
+    var resetComment = function () {
+        APP.$addComment.find('.cp-app-poll-comments-add-name').val('');
+        APP.$addComment.find('.cp-app-poll-comments-add-msg').val('');
+    };
+    var addComment = function () {
+        if (!APP.proxy.comments) { APP.proxy.comments = []; }
+        var name = APP.$addComment.find('.cp-app-poll-comments-add-name').val();
+        var msg = APP.$addComment.find('.cp-app-poll-comments-add-msg').val();
+        var time = +new Date();
+
+        var profile, avatar;
+        if (common.isLoggedIn()) {
+            profile = metadataMgr.getUserData().profile;
+            avatar = metadataMgr.getUserData().avatar;
+        }
+
+        APP.proxy.comments.push({
+            msg: msg,
+            name: name,
+            time: time,
+            uid: getCommentId(),
+            profile: profile,
+            avatar: avatar
+        });
+        resetComment();
+        updateComments();
+    };
+
     var checkDeletedCells = function () {
         // faster than forEach?
         var c;
@@ -893,11 +1005,20 @@ define([
             var val = APP.editor.getValue();
             updateLocalDescription(val);
         });
+        APP.$addComment.find('.cp-app-poll-comments-add-submit').click(addComment);
+        APP.$addComment.find('.cp-app-poll-comments-add-cancel').click(resetComment);
 
         $('#cp-app-poll-table-scroll').html('').prepend($table);
         updateDisplayedTable();
         updateDescription(null, APP.proxy.description || '');
 
+        // Initialize author name for comments.
+        // Disable name modification for logged in users
+        var $cName = APP.$addComment.find('.cp-app-poll-comments-add-name')
+            .val(metadataMgr.getUserData().name || '');
+        if (common.isLoggedIn()) { $cName.attr('disabled', 'disabled'); }
+        updateComments();
+
         $table
             .click(handleClick)
             .on('keyup', function (e) { handleClick(e, true); });
@@ -913,6 +1034,7 @@ define([
             })
             .on('change', ['content'], change)
             .on('change', ['description'], updateDescription)
+            .on('change', ['comments'], updateComments)
             .on('remove', [], change);
 
         // If the user's column is not committed, add his username
@@ -1070,12 +1192,15 @@ define([
             APP.loggedIn = common.isLoggedIn();
             APP.SFCommon = common;
 
+            APP.origin = common.getMetadataMgr().getPrivateData().origin;
+
             APP.$body = $('body');
             APP.$bar = $('#cp-toolbar');
             APP.$content = $('#cp-app-poll-content');
             APP.$descriptionPublished = $('#cp-app-poll-description-published');
             APP.$description = $('#cp-app-poll-description');
-                //.attr('placeholder', Messages.poll_descriptionHint || 'description');
+            APP.$comments = $('#cp-app-poll-comments-list');
+            APP.$addComment = $('#cp-app-poll-comments-add');
 
             APP.editor = CMeditor.fromTextArea(APP.$description[0], {
                 lineNumbers: true,
@@ -1092,7 +1217,8 @@ define([
             };
 
             if (APP.readOnly) {
-                $('#cp-app-poll-create-user, #cp-app-poll-create-option').remove();
+                $('#cp-app-poll-create-user, #cp-app-poll-create-option, #cp-app-poll-comments-add')
+                    .remove();
             }
 
             var rt = APP.rt = Listmap.create(listmapConfig);
diff --git a/www/poll/render.js b/www/poll/render.js
index 5428535ac..4307ad458 100644
--- a/www/poll/render.js
+++ b/www/poll/render.js
@@ -9,9 +9,10 @@ define([
     var Example = {
         metadata: {
             title: '',
-            description: '',
             userData: {}
         },
+        description: '',
+        comments: [],
         content: {
 /*  TODO