Rewrite task move position component and remove Vuejs

1 files changed, 157 insertions, 79 deletions

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