Add updated invite form

ui/css/cloudstack3.css

@@ -6184,7 +6184,8 @@ div.panel.ui-dialog div.list-view div.fixed-header {
 
 .multi-edit label.error {
   font-size: 10px;
-  margin: 0 0 0 10px;
+  margin: 3px 0 0;
+  float: left;
 }
 
 .multi-edit .data-table td span {
@@ -6440,27 +6441,27 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   background: #F2F0F0;
 }
 
-/*Security Rules*/
-.security-rules .add-by {
+.ui-tabs-panel .add-by {
   font-size: 12px;
   color: #536474;
   width: 94%;
   margin: 13px 0 0 14px;
 }
 
-.security-rules .add-by .selection {
+.ui-tabs-panel .add-by .selection {
   width: 236px;
   margin: 8px 0 0;
 }
 
-.security-rules .add-by .selection input {
+.ui-tabs-panel .add-by .selection input {
   margin: 0 6px 0 0;
 }
 
-.security-rules .add-by .selection label {
+.ui-tabs-panel .add-by .selection label {
   margin: 0 22px 0 0;
 }
 
+/*Security Rules*/
 .security-rules .multi-edit input {
   width: 69px;
   margin: 0 0 0 9px;

ui/scripts/projects.js

@@ -1,7 +1,7 @@
 (function(cloudStack) {
   cloudStack.projects = {
     requireInvitation: function(args) {
-      return window.g_projectsInviteRequired;
+      return g_capabilities.projectinviterequired;
     },
 
     resourceManagement: {
@@ -262,14 +262,16 @@
     },
     inviteForm: {
       noSelect: true,
+      noHeaderActionsColumn: true,
+      ignoreEmptyFields: true,
       fields: {
         'email': { edit: true, label: 'E-mail' },
-        'account': { edit: 'ignore', label: 'Account' },
+        'account': { edit: true, label: 'Account' },
         'state': { edit: 'ignore', label: 'Status' },
         'add-user': { addButton: true, label: '' }
       },
       add: {
-        label: 'E-mail invite',
+        label: 'Invite',
         action: function(args) {
           $.ajax({
             url: createURL('addAccountToProject', { ignoreProject: true }),
@@ -284,7 +286,18 @@
               data: args.data,
               args.response.success({
                 _custom: {
-                  jobId: data.addaccounttoprojectresponse.jobid
+                  jobId: data.addaccounttoprojectresponse.jobid,
+                  onComplete: function(json) {
+                    if (args.data.email) {
+                      cloudStack.dialog.notice({
+                        message: 'Invitation sent to ' + args.data.email
+                      });
+                    } else {
+                      cloudStack.dialog.notice({
+                        message: 'Pending invitation added for account ' + args.data.account
+                      });                      
+                    }
+                  }
                 },
                 notification: {
                   label: 'Invited user to project',
@@ -336,12 +349,14 @@
         $.ajax({
           url: createURL('listProjectInvitations', { ignoreProject: true }),
           data: {
+            listAll: true,
             projectId: args.context.projects[0].id
           },
           dataType: 'json',
           async: true,
           success: function(data) {
-            var invites = data.listprojectinvitationsresponse.projectinvitation;
+            var invites = data.listprojectinvitationsresponse.projectinvitation ?
+              data.listprojectinvitationsresponse.projectinvitation : [];
             args.response.success({
               data: $.map(invites, function(elem) {
                 return {
@@ -358,6 +373,9 @@
     },
     addUserForm: {
       noSelect: true,
+      hideForm: function() {
+        return g_capabilities.projectinviterequired;
+      },
       fields: {
         'username': { edit: true, label: 'Account' },
         'role': { edit: 'ignore', label: 'Role' },
@@ -806,6 +824,19 @@
                 }
               },
 
+              invitations: {
+                title: 'Invitations',
+                custom: function(args) {
+                  var project = args.context.projects[0];
+                  var $invites = cloudStack.uiCustom.projectsTabs.userManagement({
+                    useInvites: true,
+                    context: { projects: [project] }
+                  });
+                  
+                  return $invites;
+                }
+              },
+
               resources: {
                 title: 'Resources',
                 custom: function(args) {
@@ -843,6 +874,7 @@
             $.ajax({
               url: createURL('listProjectInvitations'),
               data: {
+                listAll: true,
                 account: cloudStack.context.users[0].account,
                 domainid: cloudStack.context.users[0].domainid,
                 state: 'Pending'
@@ -850,7 +882,8 @@
               success: function(data) {
                 args.response.success({
                   actionFilter: projectInvitationActionFilter,
-                  data: data.listprojectinvitationsresponse.projectinvitation
+                  data: data.listprojectinvitationsresponse.projectinvitation ?
+                    data.listprojectinvitationsresponse.projectinvitation : []
                 });
               }
             });

ui/scripts/ui-custom/projects.js

@@ -8,9 +8,54 @@
             cloudStack.projects.addUserForm :
             cloudStack.projects.inviteForm;
 
-      return $('<div>').multiEdit($.extend(true, {}, multiEdit, {
+      var $multi = $('<div>').multiEdit($.extend(true, {}, multiEdit, {
         context: args.context
       }));
+
+      if (args.useInvites) {
+        var $fields = $multi.find('form table').find('th, td');
+        var $accountFields = $fields.filter(function() {
+          return $(this).hasClass('account');
+        });
+        var $emailFields = $fields.filter(function() {
+          return $(this).hasClass('email');
+        });
+        
+        $multi.prepend(
+          $('<div>').addClass('add-by')
+            .append($('<span>').html('Add by:'))
+            .append(
+              $('<div>').addClass('selection')
+                .append(
+                  $('<input>').attr({
+                    type: 'radio',
+                    name: 'add-by',
+                    checked: 'checked'
+                  }).click(function() {
+                    $accountFields.show();
+                    $emailFields.hide();
+
+                    return true;
+                  }).click()
+                )
+                .append($('<label>').html('Account'))
+                .append(
+                  $('<input>').attr({
+                    type: 'radio',
+                    name: 'add-by'
+                  }).click(function() {
+                    $accountFields.hide();
+                    $emailFields.show();
+
+                    return true;
+                  })
+                )
+                .append($('<label>').html('E-mail'))
+            )
+        );
+      }
+
+      return $multi;
     },
 
     dashboardTabs: {
@@ -305,7 +350,11 @@
                     });
                     var $nextButton = $('<div>').addClass('button confirm next').html('Next');
 
-                    $newProject.find('.title').html('Add Accounts to ' + args.data.name);
+                    $newProject.find('.title').html(
+                      cloudStack.projects.requireInvitation() ?
+                        'Invite to ' + args.data.name :
+                        'Add Accounts to ' + args.data.name
+                    );
                     $nextButton.appendTo($userManagement).click(function() {
                       $newProject.find('.title').html('Review');
                       $userManagement.replaceWith(function() {

ui/scripts/ui/widgets/multiEdit.js

@@ -827,6 +827,10 @@
       });
     };
 
+    if (args.hideForm && args.hideForm()){
+      $multiForm.detach();
+    }
+
     // Get existing data
     getData();