[Refactored] - Migrate roles creation

Author: iyilm4z

angular/src/app/app.module.ts

@@ -30,10 +30,8 @@ import { RightSideBarComponent } from '@app/layout/right-sidebar.component';
 import { CreateTenantDialogComponent } from './tenants/create-tenant/create-tenant-dialog.component';
 import { EditTenantDialogComponent } from './tenants/edit-tenant/edit-tenant-dialog.component';
 // roles
-import { RolesComponent } from "@app/roles/roles.component";
-import { CreateRoleDialogComponent } from "@app/roles/create-role/create-role-dialog.component";
-import { EditRoleDialogComponent } from "./roles/edit-role/edit-role-dialog.component";
-
+import { RolesComponent } from '@app/roles/roles.component';
+import { CreateOrEditRoleDialogComponent } from '@app/roles/create-or-edit-role-dialog.component';
 
 @NgModule({
     declarations: [
@@ -54,8 +52,7 @@ import { EditRoleDialogComponent } from "./roles/edit-role/edit-role-dialog.comp
         RightSideBarComponent,
         // roles
         RolesComponent,
-        CreateRoleDialogComponent,
-        EditRoleDialogComponent
+        CreateOrEditRoleDialogComponent
     ],
     imports: [
         CommonModule,
@@ -78,8 +75,7 @@ import { EditRoleDialogComponent } from "./roles/edit-role/edit-role-dialog.comp
 
         // roles
         RolesComponent,
-        CreateRoleDialogComponent,
-        EditRoleDialogComponent
+        CreateOrEditRoleDialogComponent
     ]
 })
 export class AppModule { }

angular/src/app/roles/edit-role/edit-role-dialog.component.html renamed to angular/src/app/roles/create-or-edit-role-dialog.component.html

@@ -1,7 +1,8 @@
 <form autocomplete="off"
       #editRoleForm="ngForm"
       (ngSubmit)="save()">
-    <h1 mat-dialog-title>{{ 'EditRole' | localize }}</h1>
+    <h1 mat-dialog-title *ngIf="!role.id">{{"CreateNewRole" | localize}}</h1>
+    <h1 mat-dialog-title *ngIf="role.id">{{"EditRole" | localize}}: {{permissionName}}</h1>
     <mat-dialog-content>
         <mat-form-field>
             <input matInput 
@@ -33,11 +34,9 @@ <h4>{{ 'Permissions' | localize }}</h4>
                 <ng-template ngFor let-permission [ngForOf]="permissions">
                     <div class="col-sm-6">
                         <div class="checkbox-wrapper">
-                            <mat-checkbox name="permission"
-                                          [value]="permission.name"
-                                          [checked]="checkPermission(permission.name)"
+                            <mat-checkbox [checked]="isPermissionChecked(permission.name)"
                                           [disabled]="role.isStatic"
-                                          style="padding-bottom: 5px">{{ permission.displayName }}</mat-checkbox>
+                                          (change)="onPermissionsChange(permission, $event)">{{ permission.displayName }}</mat-checkbox>
                         </div>
                     </div>
                 </ng-template>

angular/src/app/roles/create-or-edit-role-dialog.component.ts

@@ -0,0 +1,130 @@
+import { Component, Injector, Inject, OnInit, Optional } from '@angular/core';
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatCheckboxChange
+} from '@angular/material';
+import * as _ from 'lodash';
+import {
+  RoleServiceProxy,
+  GetRoleForEditOutput,
+  RoleDto,
+  ListResultDtoOfPermissionDto,
+  PermissionDto,
+  CreateRoleDto
+} from '@shared/service-proxies/service-proxies';
+import { AppComponentBase } from '@shared/app-component-base';
+
+@Component({
+  templateUrl: 'create-or-edit-role-dialog.component.html',
+  styles: [
+    `
+      mat-form-field {
+        width: 100%;
+      }
+      mat-checkbox {
+        padding-bottom: 5px;
+      }
+    `
+  ]
+})
+export class CreateOrEditRoleDialogComponent extends AppComponentBase
+  implements OnInit {
+  role: RoleDto = new RoleDto();
+  permissions: PermissionDto[] = [];
+  grantedPermissionNames: string[] = [];
+  checkedPermissionsMap: { [key: string]: boolean } = {};
+  defaultPermissionCheckedStatus = true;
+  permissionName = '';
+
+  constructor(
+    injector: Injector,
+    private _roleService: RoleServiceProxy,
+    private _dialogRef: MatDialogRef<CreateOrEditRoleDialogComponent>,
+    @Optional() @Inject(MAT_DIALOG_DATA) private _id: number
+  ) {
+    super(injector);
+  }
+
+  ngOnInit(): void {
+    if (this.isCreateDialog()) {
+      this._roleService
+        .getAllPermissions()
+        .subscribe((result: ListResultDtoOfPermissionDto) => {
+          this.permissions = result.items;
+          this.setInitialPermissionsStatus();
+        });
+    } else {
+      this._roleService
+        .getRoleForEdit(this._id)
+        .subscribe((result: GetRoleForEditOutput) => {
+          this.role.init(result.role);
+          _.map(result.permissions, item => {
+            const permission = new PermissionDto();
+            permission.init(item);
+            this.permissions.push(permission);
+          });
+          this.grantedPermissionNames = result.grantedPermissionNames;
+          this.permissionName = result.role.name;
+          this.setInitialPermissionsStatus();
+        });
+    }
+  }
+
+  isCreateDialog(): boolean {
+    return this._id <= 0;
+  }
+
+  setInitialPermissionsStatus(): void {
+    _.map(this.permissions, item => {
+      this.checkedPermissionsMap[item.name] = this.isCreateDialog()
+        ? this.defaultPermissionCheckedStatus
+        : _.includes(this.grantedPermissionNames, item.name);
+    });
+  }
+
+  isPermissionChecked(permissionName: string): boolean {
+    if (this.isCreateDialog()) {
+      return this.defaultPermissionCheckedStatus;
+    }
+    return _.includes(this.grantedPermissionNames, permissionName);
+  }
+
+  onPermissionsChange(permission: PermissionDto, $event: MatCheckboxChange) {
+    this.checkedPermissionsMap[permission.name] = $event.checked;
+  }
+
+  getCheckedPermissions(): string[] {
+    const permissions: string[] = [];
+    _.forEach(this.checkedPermissionsMap, function (value, key) {
+      if (value) {
+        permissions.push(key);
+      }
+    });
+    return permissions;
+  }
+
+  save(): void {
+    const role = new RoleDto();
+    role.permissions = this.getCheckedPermissions();
+    role.init(this.role);
+
+    if (this.isCreateDialog()) {
+      const createRole = new CreateRoleDto();
+      createRole.init(role);
+      this._roleService.create(createRole).subscribe(() => {
+        this.notify.info(this.l('SavedSuccessfully'));
+        this.close(true);
+      });
+    } else {
+      this._roleService.update(role).subscribe(() => {
+        this.notify.info(this.l('SavedSuccessfully'));
+        this.close(true);
+      });
+    }
+  }
+
+  close(result: any): void {
+    this._dialogRef.close(result);
+  }
+}