Renamed groups to roles in the frontend

Working:
 Account
 Cost Centre
 Employee
 Product Group
 Product
 Role
 User
 Client

overlord/src/app/user/user-detail/user-detail.component.html

@@ -29,7 +29,7 @@
           <div fxLayout="row" *ngFor="let r of item.roles; index as i" [formGroupName]="i" fxLayout="row"
                fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
                fxLayoutGap.lt-md="0px">
-            <mat-checkbox formControlName="group" fxFlex>{{r.name}}</mat-checkbox>
+            <mat-checkbox formControlName="role" fxFlex>{{r.name}}</mat-checkbox>
           </div>
         </div>
       </form>

overlord/src/app/user/user-detail/user-detail.component.ts

@@ -114,7 +114,7 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
     this.item.lockedOut = formModel.lockedOut;
     const array = this.form.get('roles') as FormArray;
     this.item.roles.forEach((item, index) => {
-      item.enabled = array.controls[index].value.group;
+      item.enabled = array.controls[index].value.role;
     });
     return this.item;
   }