Adds select all control on role permissions wizard step

Change-Id: Ic956bbf799de629f506e17a69c41c6c1f33241f0
Mirantis · Apr 28, 2017 · 2d0dcf2 · 2d0dcf2
1 parent 258cd2b
commit 2d0dcf2
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 6 deletions.
diff --git a/ui/app/admin/wizard_steps/role_permissions_group.spec.ts b/ui/app/admin/wizard_steps/role_permissions_group.spec.ts
@@ -79,7 +79,7 @@ describe('Role wizard: permissions group step', () => {
     beforeEach(() => {
       component.model = new Role({});
       component.init();
-      expect(component.modelGroupPermissions).toEqual([]);
+      expect(component.modelGroup.permissions).toEqual([]);
       component.model = new Role({
         name: 'Dummy Role',
         data: {
@@ -93,7 +93,7 @@ describe('Role wizard: permissions group step', () => {
     });
 
     it('that corresponds to given group name', () => {
-      expect(component.modelGroupPermissions).toEqual(targetGroup.permissions);
+      expect(component.modelGroup.permissions).toEqual(targetGroup.permissions);
     });
 
     it('to get their states', () => {

diff --git a/ui/app/admin/wizard_steps/role_permissions_group.ts b/ui/app/admin/wizard_steps/role_permissions_group.ts
@@ -26,14 +26,15 @@ import { PermissionGroup } from '../../models';
 class RolePermissionsGroupStep extends WizardStepBase {
   protected groupName = '';
   allGroupPermissions: PermissionGroup = null;
+  allPermissionsList: string[] = [];
 
-  public get modelGroupPermissions(): string[] {
+  public get modelGroup(): any {
     let group: PermissionGroup = _.find(this.model.data.permissions, {name: this.groupName}) as PermissionGroup;
     if (!group) {
       group = {name: this.groupName, permissions: []} as PermissionGroup;
       this.model.data.permissions.push(group);
     }
-    return group.permissions;
+    return group;
   }
 
   init() {
@@ -45,17 +46,18 @@ class RolePermissionsGroupStep extends WizardStepBase {
       .then(
         (permissions: pagedResult) => {
           this.allGroupPermissions = _.find(permissions.items, {name: this.groupName});
+          this.allPermissionsList = _.get(this.allGroupPermissions, 'permissions') as string[];
         },
         (error: any) => this.data.handleResponseError(error)
       );
   }
 
   getGroupPermission(permission: string): boolean {
-    return _.includes(this.modelGroupPermissions, permission);
+    return _.includes(this.modelGroup.permissions, permission);
   }
 
   toggleGroupPermission(permission: string) {
-    let groupPermissions = this.modelGroupPermissions;
+    let groupPermissions = this.modelGroup.permissions;
 
     if (_.includes(groupPermissions, permission)) {
       _.pull(groupPermissions, permission);
@@ -64,6 +66,14 @@ class RolePermissionsGroupStep extends WizardStepBase {
     }
   }
 
+  areAllSelected(): boolean {
+    return _.difference(this.allPermissionsList, this.modelGroup.permissions).length === 0;
+  }
+
+  toggleSelectAll() {
+    this.modelGroup.permissions = this.areAllSelected() ? [] : _.clone(this.allPermissionsList);
+  }
+
   constructor(wizard: WizardService, private data: DataService) {
     super(wizard);
     this.fetchData();

diff --git a/ui/app/styles/main.less b/ui/app/styles/main.less
@@ -716,6 +716,12 @@ longdata {
 }
 
 .wizard-step {
+  .subtitle {
+    float: right;
+    input[type='checkbox'] {
+      margin-right: 5px;
+    }
+  }
   .has-error {
     .control-label {
       color: inherit;

diff --git a/ui/app/styles/styles.css b/ui/app/styles/styles.css
@@ -7900,6 +7900,12 @@ longdata ul li {
 .modal-footer {
   border: 0;
 }
+.wizard-step .subtitle {
+  float: right;
+}
+.wizard-step .subtitle input[type='checkbox'] {
+  margin-right: 5px;
+}
 .wizard-step .has-error .control-label {
   color: inherit;
 }

diff --git a/ui/app/templates/wizard_steps/role_permissions_group.html b/ui/app/templates/wizard_steps/role_permissions_group.html
@@ -1,4 +1,14 @@
 <step [title]="'Role Permissions Groups'">
+  <div class="subtitle">
+    <label>
+      <input
+        type="checkbox"
+        [name]="group"
+        [checked]="areAllSelected()"
+        (click)="toggleSelectAll()"
+      > SELECT ALL
+    </label>
+  </div>
   <h5>{{groupName}}</h5>
   <div class="permissions long-content grid" *ngIf="allGroupPermissions">
     <div class="col-xs-12 col-sm-6" *ngFor="let permission of allGroupPermissions.permissions">