Rewrite task move position component and remove Vuejs

4 files changed, 210 insertions, 115 deletions

diff --git a/assets/js/components/accordion.js b/assets/js/components/accordion.js
index 518d0768..4588ccc6 100644
--- a/assets/js/components/accordion.js
+++ b/assets/js/components/accordion.js
@@ -3,6 +3,6 @@ KB.onClick('.accordion-toggle', function(e) {
 
     if (section) {
         KB.dom(section).toggleClass('accordion-collapsed');
-        KB.dom(KB.dom(section).child('.accordion-content')).toggle();
+        KB.dom(KB.dom(section).find('.accordion-content')).toggle();
     }
 });
diff --git a/assets/js/components/submit-cancel.js b/assets/js/components/submit-cancel.js
index 061b1146..ccb3c1d9 100644
--- a/assets/js/components/submit-cancel.js
+++ b/assets/js/components/submit-cancel.js
@@ -1,35 +1,52 @@
-Vue.component('submit-cancel', {
-    props: ['labelButton', 'labelOr', 'labelCancel', 'callback'],
-    template: '<div class="form-actions">' +
-              '<button type="button" class="btn btn-blue" @click="onSubmit" :disabled="isLoading">' +
-              '<span v-show="isLoading"><i class="fa fa-spinner fa-pulse"></i> </span>' +
-              '{{ labelButton }}' +
-              '</button> ' +
-              '{{ labelOr }} <a href="#" v-on:click.prevent="onCancel">{{ labelCancel }}</a>' +
-              '</div>'
-    ,
-    data: function () {
-        return {
-            loading: false
-        };
-    },
-    computed: {
-        isLoading: function () {
-            return this.loading;
-        }
-    },
-    methods: {
-        onSubmit: function () {
-            this.loading = true;
-            this.callback();
-        },
-        onCancel: function () {
-            _KB.get('Popover').close();
-        }
-    },
-    events: {
-        'submitCancelled': function() {
-            this.loading = false;
+KB.component('submit-cancel', function (containerElement, options) {
+    var isLoading = false;
+
+    function onSubmit() {
+        isLoading = true;
+        KB.find('#modal-submit-button').replace(buildButton());
+        KB.trigger('modal.submit');
+    }
+
+    function onCancel() {
+        KB.trigger('modal.cancel');
+        _KB.get('Popover').close();
+    }
+
+    function onStop() {
+        isLoading = false;
+        KB.find('#modal-submit-button').replace(buildButton());
+    }
+
+    function buildButton() {
+        var button = KB.dom('button')
+            .click(onSubmit)
+            .attr('id', 'modal-submit-button')
+            .attr('type', 'submit')
+            .attr('class', 'btn btn-blue');
+
+        if (isLoading) {
+            button
+                .disable()
+                .add(KB.dom('i').attr('class', 'fa fa-spinner fa-pulse').build())
+                .text(' ')
+            ;
         }
+
+        return button
+            .text(options.submitLabel)
+            .build();
     }
+
+    this.render = function () {
+        KB.on('modal.stop', onStop);
+
+        var element = KB.dom('div')
+            .attr('class', 'form-actions')
+            .add(buildButton())
+            .text(' ' + options.orLabel + ' ')
+            .add(KB.dom('a').attr('href', '#').click(onCancel).text(options.cancelLabel).build())
+            .build();
+
+        containerElement.appendChild(element);
+    };
 });
diff --git a/assets/js/components/task-move-position.js b/assets/js/components/task-move-position.js
index 11e1068c..5e559713 100644
--- a/assets/js/components/task-move-position.js
+++ b/assets/js/components/task-move-position.js
@@ -1,86 +1,164 @@
-Vue.component('task-move-position', {
-    props: ['board', 'saveUrl'],
-    template: '#template-task-move-position',
-    data: function () {
-        return {
-            swimlaneId: 0,
-            columnId: 0,
-            position: 1,
-            columns: [],
-            tasks: [],
-            positionChoice: 'before',
-            errorMessage: ''
+KB.component('task-move-position', function (containerElement, options) {
+
+    function getSelectedValue(id) {
+        var element = KB.dom(document).find('#' + id);
+
+        if (element) {
+            return parseInt(element.options[element.selectedIndex].value);
         }
-    },
-    ready: function () {
-        this.columns = this.board[0].columns;
-        this.columnId = this.columns[0].id;
-        this.tasks = this.columns[0].tasks;
-        this.errorMessage = '';
-    },
-    methods: {
-        onChangeSwimlane: function () {
-            var self = this;
-            this.columnId = 0;
-            this.position = 1;
-            this.columns = [];
-            this.tasks = [];
-            this.positionChoice = 'before';
-
-            this.board.forEach(function(swimlane) {
-                if (swimlane.id === self.swimlaneId) {
-                    self.columns = swimlane.columns;
-                    self.tasks = self.columns[0].tasks;
-                    self.columnId = self.columns[0].id;
-                }
-            });
-        },
-        onChangeColumn: function () {
-            var self = this;
-            this.position = 1;
-            this.tasks = [];
-            this.positionChoice = 'before';
-
-            this.columns.forEach(function(column) {
-                if (column.id == self.columnId) {
-                    self.tasks = column.tasks;
-
-                    if (self.tasks.length > 0) {
-                        self.position = parseInt(self.tasks[0]['position']);
-                    }
-                }
-            });
-        },
-        onSubmit: function () {
-            var self = this;
-
-            if (this.positionChoice == 'after') {
-                this.position++;
+
+        return null;
+    }
+
+    function getSwimlaneId() {
+        var swimlaneId = getSelectedValue('form-swimlanes');
+        return swimlaneId === null ? options.board[0].id : swimlaneId;
+    }
+
+    function getColumnId() {
+        var columnId = getSelectedValue('form-columns');
+        return columnId === null ? options.board[0].columns[0].id : columnId;
+    }
+
+    function getPosition() {
+        var position = getSelectedValue('form-position');
+        return position === null ? 1 : position;
+    }
+
+    function getPositionChoice() {
+        var element = KB.find('input[name=positionChoice]:checked');
+
+        if (element) {
+            return element.value;
+        }
+
+        return 'before';
+    }
+
+    function onSwimlaneChanged() {
+        var columnSelect = KB.dom(document).find('#form-columns');
+        KB.dom(columnSelect).replace(buildColumnSelect());
+
+        var taskSection = KB.dom(document).find('#form-tasks');
+        KB.dom(taskSection).replace(buildTasks());
+    }
+
+    function onColumnChanged() {
+        var taskSection = KB.dom(document).find('#form-tasks');
+        KB.dom(taskSection).replace(buildTasks());
+    }
+
+    function onError(message) {
+        KB.trigger('modal.stop');
+
+        KB.find('#message-container')
+            .replace(KB.dom('div')
+                .attr('id', 'message-container')
+                .attr('class', 'alert alert-error')
+                .text(message)
+                .build()
+            );
+    }
+
+    function onSubmit() {
+        var position = getPosition();
+        var positionChoice = getPositionChoice();
+
+        if (positionChoice === 'after') {
+            position++;
+        }
+
+        KB.find('#message-container').replace(KB.dom('div').attr('id', 'message-container').build());
+
+        KB.http.postJson(options.saveUrl, {
+            "column_id": getColumnId(),
+            "swimlane_id": getSwimlaneId(),
+            "position": position
+        }).success(function () {
+            window.location.reload(true);
+        }).error(function (response) {
+            if (response) {
+                onError(response.message);
             }
+        });
+    }
+
+    function buildSwimlaneSelect() {
+        var swimlanes = [];
+
+        options.board.forEach(function(swimlane) {
+            swimlanes.push({'value': swimlane.id, 'text': swimlane.name});
+        });
+
+        return KB.dom('select')
+            .attr('id', 'form-swimlanes')
+            .change(onSwimlaneChanged)
+            .for('option', swimlanes)
+            .build();
+    }
+
+    function buildColumnSelect() {
+        var columns = [];
+        var swimlaneId = getSwimlaneId();
 
-            $.ajax({
-                cache: false,
-                url: this.saveUrl,
-                contentType: "application/json",
-                type: "POST",
-                processData: false,
-                data: JSON.stringify({
-                    "column_id": this.columnId,
-                    "swimlane_id": this.swimlaneId,
-                    "position": this.position
-                }),
-                statusCode: {
-                    200: function() {
-                        window.location.reload(true);
-                    },
-                    403: function(jqXHR) {
-                        var response = JSON.parse(jqXHR.responseText);
-                        self.errorMessage = response.message;
-
-                        self.$broadcast('submitCancelled');
+        options.board.forEach(function(swimlane) {
+            if (swimlaneId === swimlane.id) {
+                swimlane.columns.forEach(function(column) {
+                    columns.push({'value': column.id, 'text': column.title});
+                });
+            }
+        });
+
+        return KB.dom('select')
+            .attr('id', 'form-columns')
+            .change(onColumnChanged)
+            .for('option', columns)
+            .build();
+    }
+
+    function buildTasks() {
+        var tasks = [];
+        var swimlaneId = getSwimlaneId();
+        var columnId = getColumnId();
+        var container = KB.dom('div').attr('id', 'form-tasks');
+
+        options.board.forEach(function(swimlane) {
+            if (swimlaneId === swimlane.id) {
+                swimlane.columns.forEach(function(column) {
+                    if (columnId === column.id) {
+                        column.tasks.forEach(function(task) {
+                            tasks.push({'value': task.position, 'text': '#' + task.id + ' - ' + task.title});
+                        });
                     }
-                }
-            });
+                });
+            }
+        });
+
+        if (tasks.length > 0) {
+            container
+                .add(KB.html.label(options.positionLabel, 'form-position'))
+                .add(KB.dom('select').attr('id', 'form-position').for('option', tasks).build())
+                .add(KB.html.radio(options.beforeLabel, 'positionChoice', 'before'))
+                .add(KB.html.radio(options.afterLabel, 'positionChoice', 'after'))
+            ;
         }
+
+        return container.build();
     }
+
+    this.render = function () {
+        KB.on('modal.submit', onSubmit);
+
+        var form = KB.dom('div')
+            .on('submit', onSubmit)
+            .add(KB.dom('div').attr('id', 'message-container').build())
+            .add(KB.html.label(options.swimlaneLabel, 'form-swimlanes'))
+            .add(buildSwimlaneSelect())
+            .add(KB.html.label(options.columnLabel, 'form-columns'))
+            .add(buildColumnSelect())
+            .add(buildTasks())
+            .build();
+
+        containerElement.appendChild(form);
+    };
 });
diff --git a/assets/js/components/text-editor.js b/assets/js/components/text-editor.js
index 5268bc4d..2bf8109e 100644
--- a/assets/js/components/text-editor.js
+++ b/assets/js/components/text-editor.js
@@ -51,8 +51,8 @@ KB.component('text-editor', function (containerElement, options) {
             .attr('tabindex', options.tabindex || '-1')
             .attr('required', options.required || false)
             .attr('autofocus', options.autofocus || null)
-            .attr('placeholder', options.placeholder || '')
-            .text(options.text)
+            .text(options.text) // Order is important for IE11
+            .attr('placeholder', options.placeholder || null)
             .build();
 
         return KB.dom('div')
@@ -124,7 +124,7 @@ KB.component('text-editor', function (containerElement, options) {
                 document.execCommand('ms-beginUndoUnit');
             } catch (error) {}
 
-            textarea.value = replaceTextRange(text, textarea.selectionStart, textarea.selectionEnd, replacedText);
+            textarea.value = replaceTextRange(textarea.value, textarea.selectionStart, textarea.selectionEnd, replacedText);
 
             try {
                 document.execCommand('ms-endUndoUnit');