Add edit modal in kanban

customize.dist/src/less2/include/alertify.less

@@ -277,7 +277,7 @@
                 margin-bottom: 15px;
             }
 
-            button {
+            button:not('.pure-button') {
                 display: inline-block;
                 position: relative;
                 margin: 6px 8px;

www/kanban/app-kanban.less

@@ -15,6 +15,78 @@
     max-height: 100%;
     min-height: auto;
 
+    @palette1: #FFD4D4;
+    @palette2: #FFDECA;
+    @palette3: #FFE69C;
+    @palette4: #DBFFB7;
+    @palette5: #AFFDC2;
+    @palette6: #C9FFFE;
+    @palette7: #C8D6FF;
+    @palette8: #E4CAFF;
+
+
+    .cp-kanban-palette-color1 {
+        background-color: @palette1;
+    }
+    .cp-kanban-palette-color2 {
+        background-color: @palette2;
+    }
+    .cp-kanban-palette-color3 {
+        background-color: @palette3;
+    }
+    .cp-kanban-palette-color4 {
+        background-color: @palette4;
+    }
+    .cp-kanban-palette-color5 {
+        background-color: @palette5;
+    }
+    .cp-kanban-palette-color6 {
+        background-color: @palette6;
+    }
+    .cp-kanban-palette-color7 {
+        background-color: @palette7;
+    }
+    .cp-kanban-palette-color8 {
+        background-color: @palette8;
+    }
+
+    #cp-kanban-edit-body {
+        border: 1px solid @colortheme_modal-input;
+        .CodeMirror {
+            height: 105px;
+        }
+        .CodeMirror-scroll {
+            box-sizing: content-box;
+        }
+        .cp-markdown-toolbar {
+            background-color: #eee;
+            color: @cryptpad_text_col;
+        }
+        margin-bottom: 15px;
+    }
+    #cp-kanban-edit-colors {
+        display: flex;
+        justify-content: space-between;
+        .cp-kanban-palette {
+            display: inline-block;
+            border-radius: 50%;
+            height: 30px;
+            width: 30px;
+            text-align: center;
+            line-height: 30px;
+            color: @cryptpad_text_col;
+        }
+        .cp-kanban-palette-nocolor {
+            border: 1px solid @cryptpad_text_col;
+        }
+    }
+    #cp-kanban-edit-tags {
+        .tokenfield {
+            margin: 0;
+        }
+        margin-bottom: 15px;
+    }
+
     #cp-app-kanban-container {
         flex: 1;
         display: flex;

www/kanban/inner.js

@@ -9,10 +9,21 @@ define([
     '/common/common-interface.js',
     '/common/modes.js',
     '/customize/messages.js',
+    '/common/hyperscript.js',
+    '/bower_components/marked/marked.min.js',
+    'cm/lib/codemirror',
+
+    'cm/mode/gfm/gfm',
+
+    'css!/bower_components/codemirror/lib/codemirror.css',
+    'css!/bower_components/codemirror/addon/dialog/dialog.css',
+    'css!/bower_components/codemirror/addon/fold/foldgutter.css',
+
+
+
     '/kanban/jkanban.js',
     '/common/jscolor.js',
     'css!/kanban/jkanban.css',
-
     'less!/kanban/app-kanban.less'
 ], function (
     $,
@@ -24,7 +35,10 @@ define([
     Hash,
     UI,
     Modes,
-    Messages)
+    Messages,
+    h,
+    Marked,
+    CodeMirror)
 {
 
     var verbose = function (x) { console.log(x); };
@@ -32,6 +46,222 @@ define([
 
     var COLORS = ['yellow', 'green', 'orange', 'blue', 'red', 'purple', 'cyan', 'lightgreen', 'lightblue'];
 
+    Messages.kanban_title = "Title"; // XXX
+    Messages.kanban_body = "Body"; // XXX
+    Messages.kanban_color = "Color"; // XXX
+    Messages.kanban_submit = "Submit"; // XXX
+    Messages.kanban_delete = "Delete"; // XXX
+
+
+    var editModal;
+    var PROPERTIES = ['title', 'body', 'tags', 'color'];
+    var BOARD_PROPERTIES = ['title', 'color'];
+    var createEditModal = function (framework, kanban) {
+        if (editModal) { return editModal; }
+        var titleInput, tagsDiv, color, text;
+        var content = h('div', [
+            h('label', {for:'cp-kanban-edit-title'}, Messages.kanban_title),
+            titleInput = h('input#cp-kanban-edit-title'),
+            h('label', {for:'cp-kanban-edit-body'}, Messages.kanban_body),
+            h('div#cp-kanban-edit-body', [
+                text = h('textarea')
+            ]),
+            h('label', {for:'cp-kanban-edit-tags'}, Messages.fm_tagsName),
+            tagsDiv = h('div#cp-kanban-edit-tags'),
+            h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
+            colors = h('div#cp-kanban-edit-colors'),
+        ]);
+
+        // Title
+        var $title = $(titleInput);
+        var title = {
+            getValue: function () {
+                return $title.val();
+            },
+            setValue: function (val) {
+                $title.val(val);
+            }
+        };
+
+        // Body
+        var editor = CodeMirror.fromTextArea(text, {
+            lineNumbers: true,
+            styleActiveLine : true,
+            mode: "gfm"
+        });
+        var common = framework._.sfCommon;
+        var markdownTb = common.createMarkdownToolbar(editor);
+        $(text).before(markdownTb.toolbar);
+        $(markdownTb.toolbar).show();
+        editor.refresh();
+        var body = {
+            getValue: function () {
+                return editor.getValue();
+            },
+            setValue: function (val) {
+                console.log(val);
+                setTimeout(function () {
+                    editor.setValue(val || ' ');
+                    editor.setValue(val || '');
+                    editor.save();
+                });
+            }
+        };
+
+        // Tags
+        var getExisting = function () {
+            var tags = [];
+            var boards = kanban.options.boards || {};
+            Object.keys(boards.items || {}).forEach(function (id) {
+                var data = boards.items[id];
+                if (!Array.isArray(data.tags)) { return; }
+                data.tags.forEach(function (tag) {
+                    if (tags.indexOf(tag) === -1) { tags.push(tag); }
+                });
+            });
+            tags.sort();
+            return tags;
+        };
+        var $tags = $(tagsDiv);
+        var _field;
+        var tags = {
+            getValue: function () {
+                if (!_field) { return; }
+                return _field.getTokens();
+            },
+            setValue: function (tags) {
+                $tags.empty();
+                var input = UI.dialog.textInput();
+                $tags.append(input);
+                var existing = getExisting();
+                _field = UI.tokenField(input, existing).preventDuplicates(function (val) {
+                    UI.warn(Messages._getKey('tags_duplicate', [val]));
+                });
+                $tags.append(_field);
+                setTimeout(function () {
+                    _field.setTokens(tags || []);
+                });
+            }
+        }
+
+        // Colors
+        var $colors = $(colors);
+        var palette = [''];
+        for (var i=1; i<=8; i++) { palette.push('color'+i); }
+        var selectedColor = '';
+        palette.forEach(function (color) {
+            var $color = $(h('span.cp-kanban-palette.fa'));
+            $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
+            $color.click(function () {
+                selectedColor = color;
+                $colors.find('.cp-kanban-palette').removeClass('fa-check');
+                var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
+                $col.addClass('fa-check');
+            }).appendTo($colors);
+        });
+        var color = {
+            getValue: function () {
+                return selectedColor;
+            },
+            setValue: function (color) {
+                $colors.find('.cp-kanban-palette').removeClass('fa-check');
+                var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
+                $col.addClass('fa-check');
+            }
+        };
+
+        var isBoard, id;
+        var setId = function (_isBoard, _id) {
+            isBoard = _isBoard;
+            id = _id;
+            if (_isBoard) {
+                $(content)
+                    .find('#cp-kanban-edit-body, #cp-kanban-edit-tags, [for="cp-kanban-edit-body"], [for="cp-kanban-edit-tags"]')
+                    .hide();
+            } else {
+                $(content)
+                    .find('#cp-kanban-edit-body, #cp-kanban-edit-tags, [for="cp-kanban-edit-body"], [for="cp-kanban-edit-tags"]')
+                    .show();
+            }
+        };
+
+        var button = [{
+            className: 'danger', // XXX align left
+            name: Messages.kanban_delete,
+            onClick: function () {
+                // XXX
+            },
+            keys: []
+        }, {
+            className: 'cancel',
+            name: Messages.cancel,
+            onClick: function () {},
+            keys: []
+        }, {
+            className: 'primary',
+            name: Messages.kanban_submit,
+            onClick: function () {
+                var boards = kanban.options.boards || {};
+                if (isBoard) {
+                    var data = (boards.data || {})[id];
+                    if (!data) { return; } // XXX deleted by someone else?
+                    BOARD_PROPERTIES.forEach(function (type) {
+                        if (!editModal[type]) { return; }
+                        data[type] = editModal[type].getValue();
+                    });
+                    framework.localChange();
+                    return;
+                }
+                var item = (boards.items || {})[id];
+                if (!item) { return; } // XXX deleted by someone else?
+                PROPERTIES.forEach(function (type) {
+                    if (!editModal[type]) { return; }
+                    item[type] = editModal[type].getValue();
+                });
+                framework.localChange();
+            },
+            keys: []
+        }];
+        var modal = UI.dialog.customModal(content, {
+            buttons: button
+        });
+        return {
+            modal: modal,
+            setId: setId,
+            title: title,
+            body: body,
+            tags: tags,
+            color: color
+        };
+    };
+    var getItemEditModal = function (framework, kanban, eid) {
+        // Create modal if needed
+        if (!editModal) { editModal = createEditModal(framework, kanban); }
+        editModal.setId(false, eid);
+        var boards = kanban.options.boards || {};
+        var item = (boards.items || {})[eid];
+        if (!item) { return void UI.warn(Messages.error); }
+        PROPERTIES.forEach(function (type) {
+            if (!editModal[type]) { return; }
+            editModal[type].setValue(item[type]);
+        });
+        UI.openCustomModal(editModal.modal);
+    };
+    var getBoardEditModal = function (framework, kanban, id) {
+        // Create modal if needed
+        if (!editModal) { editModal = createEditModal(framework, kanban); }
+
+        editModal.setId(true, id);
+        var boards = kanban.options.boards || {};
+        var board = (boards.data || {})[id];
+        if (!board) { return void UI.warn(Messages.error); }
+        BOARD_PROPERTIES.forEach(function (type) {
+            if (!editModal[type]) { return; }
+            editModal[type].setValue(board[type]);
+        });
+        UI.openCustomModal(editModal.modal);
+    };
+
     var addEditItemButton = function (framework, kanban) {
         if (!kanban) { return; }
         if (framework.isReadOnly() || framework.isLocked()) { return; }
@@ -42,16 +272,8 @@ define([
             $('<button>', {
                 'class': 'kanban-edit-item btn btn-default fa fa-pencil',
             }).click(function (e) {
+                getItemEditModal(framework, kanban, itemId);
                 e.stopPropagation();
-                /*
-                UI.confirm(Messages.kanban_removeItemConfirm, function (yes) {
-                    if (!yes) { return; }
-                    board.item.splice(pos, 1);
-                    $(el).remove();
-                    kanban.onChange();
-                });
-                */
-                // XXX Open edit modal
             }).appendTo($(el));
         });
         $container.find('.kanban-board').each(function (i, el) {
@@ -59,8 +281,8 @@ define([
             $('<button>', {
                 'class': 'kanban-edit-item btn btn-default fa fa-pencil',
             }).click(function (e) {
+                getBoardEditModal(framework, kanban, itemId);
                 e.stopPropagation();
-                // XXX Open edit modal
             }).appendTo($(el).find('.kanban-board-header'));
         });
     };
@@ -132,7 +354,6 @@ define([
             gutter: '5px',
             widthBoard: '300px',
             buttonContent: '❌',
-            colors: COLORS,
             readOnly: framework.isReadOnly(),
             onChange: function () {
                 verbose("Board object has changed");
@@ -368,7 +589,7 @@ define([
             kanban.addBoard({
                 "id": id,
                 "title": Messages.kanban_newBoard,
-                "color": COLORS[Math.floor(Math.random()*COLORS.length)], // random color
+                //"color": ""; //COLORS[Math.floor(Math.random()*COLORS.length)], // random color // XXX
                 "item": []
             });
             kanban.onChange();

www/kanban/jkanban.js

@@ -50,7 +50,6 @@
                     gutter: '15px',
                     widthBoard: '250px',
                     responsive: '700',
-                    colors: ["yellow", "green", "blue", "red", "orange"],
                     responsivePercentage: false,
                     boards: {
                         data: {},