Rewrite component to change user/group role

2 files changed, 75 insertions, 3 deletions

diff --git a/assets/js/components/project-select-role.js b/assets/js/components/project-select-role.js
new file mode 100644
index 00000000..904d1dbd
--- /dev/null
+++ b/assets/js/components/project-select-role.js
@@ -0,0 +1,72 @@
+KB.component('project-select-role', function (containerElement, options) {
+    var isLoading = false;
+    var isSuccess = false;
+    var isError = false;
+    var componentElement;
+
+    function onChange(element) {
+        isLoading = true;
+        options.role = element.value;
+        replaceComponentElement();
+        updateRole();
+    }
+
+    function updateRole() {
+        KB.http.postJson(options.url, {
+            id: options.id,
+            role: options.role
+        }).success(function () {
+            isLoading = false;
+            isSuccess = true;
+            replaceComponentElement();
+        }).error(function () {
+            isLoading = false;
+            isSuccess = false;
+            isError = true;
+            replaceComponentElement();
+        });
+    }
+
+    function replaceComponentElement() {
+        KB.dom(componentElement).remove();
+        componentElement = buildComponentElement();
+        containerElement.appendChild(componentElement);
+    }
+
+    function buildComponentElement() {
+        var roles = [];
+        var container = KB.dom('div');
+
+        for (var role in options.roles) {
+            if (options.roles.hasOwnProperty(role)) {
+                var item = {value: role, text: options.roles[role]};
+
+                if (options.role === role) {
+                    item.selected = 'selected';
+                }
+
+                roles.push(item);
+            }
+        }
+
+        container.add(KB.dom('select').change(onChange).for('option', roles).build());
+
+        if (isLoading) {
+            container.text(' ');
+            container.add(KB.dom('i').attr('class', 'fa fa-spinner fa-pulse fa-fw').build());
+        } else if (isSuccess) {
+            container.text(' ');
+            container.add(KB.dom('i').attr('class', 'fa fa-check fa-fw icon-fade-out icon-success').build());
+        } else if (isError) {
+            container.text(' ');
+            container.add(KB.dom('i').attr('class', 'fa fa-check fa-fw icon-fade-out icon-error').build());
+        }
+
+        return container.build();
+    }
+
+    this.render = function () {
+        componentElement = buildComponentElement();
+        containerElement.appendChild(componentElement);
+    };
+});
diff --git a/assets/js/components/task-move-position.js b/assets/js/components/task-move-position.js
index 5e559713..e54c1324 100644
--- a/assets/js/components/task-move-position.js
+++ b/assets/js/components/task-move-position.js
@@ -122,11 +122,11 @@ KB.component('task-move-position', function (containerElement, options) {
         var columnId = getColumnId();
         var container = KB.dom('div').attr('id', 'form-tasks');
 
-        options.board.forEach(function(swimlane) {
+        options.board.forEach(function (swimlane) {
             if (swimlaneId === swimlane.id) {
-                swimlane.columns.forEach(function(column) {
+                swimlane.columns.forEach(function (column) {
                     if (columnId === column.id) {
-                        column.tasks.forEach(function(task) {
+                        column.tasks.forEach(function (task) {
                             tasks.push({'value': task.position, 'text': '#' + task.id + ' - ' + task.title});
                         });
                     }