Rewrite component to change user/group role

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

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

assets/js/src/ProjectPermission.js

@@ -1,19 +0,0 @@
-Kanboard.ProjectPermission = function(app) {
-    this.app = app;
-};
-
-Kanboard.ProjectPermission.prototype.listen = function() {
-    $('.project-change-role').on('change', function () {
-        $.ajax({
-            cache: false,
-            url: $(this).data('url'),
-            contentType: "application/json",
-            type: "POST",
-            processData: false,
-            data: JSON.stringify({
-                "id": $(this).data('id'),
-                "role": $(this).val()
-            })
-        });
-    });
-};

assets/sass/_icon.sass

@@ -0,0 +1,17 @@
+@import variables
+
+.icon-success
+  color: icon-color('success')
+
+.icon-error
+  color: icon-color('error')
+
+.icon-fade-out
+  opacity: 1
+  animation: icon-fadeout 5s linear forwards
+
+@keyframes icon-fadeout
+  0%
+    opacity: 1
+  100%
+    opacity: 0

assets/sass/_variables.sass

@@ -19,6 +19,8 @@ $button-hover-border-colors: ('default': #bbb, 'red': #b0281a, 'blue': #3079ed)
 
 $font-sizes: ('normal': 1.0em, 'tiny': 0.7em, 'small': 0.8em, 'compact': 0.9em, 'medium': 1.2em, 'large': 1.4em, 'xlarge': 1.6em, 'title': 1.5em)
 
+$icon-colors: ('success': #468847, 'error': #b94a48)
+
 $text-font: 'Helvetica Neue', Helvetica, Arial, sans-serif
 $board-task-limit-color: #DF5353
 
@@ -34,6 +36,9 @@ $board-task-limit-color: #DF5353
 @function bg-color($key: 'primary')
   @return map-get($background-colors, $key)
 
+@function icon-color($key)
+  @return map-get($icon-colors, $key)
+
 @function alert-color($key)
   @return map-get($alert-colors, $key)
 

assets/sass/app.sass

@@ -6,6 +6,7 @@
 @import table_drag_and_drop
 @import form
 @import input_addon
+@import icon
 @import alert
 @import button
 @import tooltip