Redesign role editing - Angular side

Author: alirizaadiyahsi

angular/src/app/roles/edit-role/edit-role.component.html

@@ -1,4 +1,4 @@
-<div bsModal #editRoleModal="bs-modal" class="modal fade" (onShown)="onShown()" tabindex="-1" role="dialog" aria-labelledby="edidtRoleModal" aria-hidden="true" [config]="{backdrop: 'static'}">
+<div bsModal #editRoleModal="bs-modal" class="modal fade" (onShown)="onShown()" tabindex="-1" role="dialog" aria-labelledby="edidtRoleModal" aria-hidden="true" [config]="{backdrop: 'static'}">
     <div class="modal-dialog">
 
         <div #modalContent class="modal-content">
@@ -10,7 +10,7 @@
                         <span aria-hidden="true">&times;</span>
                     </button>
                     <h4 class="modal-title">
-                        <span>{{l("EditRole")}} <span *ngIf="role.isStatic"> (<span style="color:red">static</span>)</span></span>
+                        <span>{{l("EditRole")}} <span *ngIf="model.role.isStatic"> (<span style="color:red">static</span>)</span></span>
                     </h4>
                 </div>
                 <div class="modal-body">
@@ -19,7 +19,7 @@ <h4 class="modal-title">
                         <div class="col-sm-12">
                             <div class="form-group form-float">
                                 <div class="form-line">
-                                    <input id="rolename" [disabled]="role.isStatic" type="text" name="RoleName" [(ngModel)]="role.name" required maxlength="32" minlength="2" class="validate form-control">
+                                    <input id="rolename" [disabled]="model.role.isStatic" type="text" name="RoleName" [(ngModel)]="model.role.name" required maxlength="32" minlength="2" class="validate form-control">
                                     <label for="rolename" class="form-label">{{l("RoleName")}}</label>
                                 </div>
                             </div>
@@ -30,7 +30,7 @@ <h4 class="modal-title">
                         <div class="col-sm-12">
                             <div class="form-group form-float">
                                 <div class="form-line">
-                                    <input id="displayname" type="text" name="DisplayName" [(ngModel)]="role.displayName" required maxlength="32" minlength="2" class="validate form-control">
+                                    <input id="displayname" type="text" name="DisplayName" [(ngModel)]="model.role.displayName" required maxlength="32" minlength="2" class="validate form-control">
                                     <label for="displayname" class="form-label">{{l("DisplayName")}}</label>
                                 </div>
                             </div>
@@ -41,7 +41,7 @@ <h4 class="modal-title">
                         <div class="col-sm-12">
                             <div class="form-group form-float">
                                 <div class="form-line">
-                                    <textarea id="role-description" name="Description" [(ngModel)]="role.description" class="validate form-control"></textarea>
+                                    <textarea id="role-description" name="Description" [(ngModel)]="model.role.description" class="validate form-control"></textarea>
                                     <label for="role-description" class="form-label">Role Description</label>
                                 </div>
                             </div>
@@ -52,9 +52,9 @@ <h4 class="modal-title">
                         <div class="col-sm-12">
                             <h4>Permissions</h4>
 
-                            <ng-template ngFor let-permission [ngForOf]="permissions.items" let-permissionIndex="index">
+                            <ng-template ngFor let-permission [ngForOf]="model.permissions" let-permissionIndex="index">
                                 <div class="col-sm-6">
-                                    <input [disabled]="role.isStatic" type="checkbox" name="permission" value="{{permission.name}}" class="filled-in" id="permission-{{permissionIndex}}" checked="{{checkPermission(permission.name)}}" />
+                                    <input [disabled]="model.role.isStatic" type="checkbox" name="permission" value="{{permission.name}}" class="filled-in" id="permission-{{permissionIndex}}" checked="{{checkPermission(permission.name)}}" />
                                     <label for="permission-{{permissionIndex}}">{{permission.displayName}}</label>
                                 </div>
                             </ng-template>
@@ -74,4 +74,4 @@ <h4>Permissions</h4>
             </form>
         </div>
     </div>
-</div>
+</div>

angular/src/app/roles/edit-role/edit-role.component.ts

@@ -1,6 +1,6 @@
 import { Component, ViewChild, Injector, Output, EventEmitter, ElementRef, OnInit } from '@angular/core';
 import { ModalDirective } from 'ngx-bootstrap';
-import { RoleServiceProxy, RoleDto, ListResultDtoOfPermissionDto } from '@shared/service-proxies/service-proxies';
+import { RoleServiceProxy, ListResultDtoOfPermissionDto, GetRoleForEditOutput, RoleDto } from '@shared/service-proxies/service-proxies';
 import { AppComponentBase } from '@shared/app-component-base';
 import { finalize } from 'rxjs/operators';
 
@@ -15,8 +15,8 @@ export class EditRoleComponent extends AppComponentBase implements OnInit {
     active: boolean = false;
     saving: boolean = false;
 
-    permissions: ListResultDtoOfPermissionDto = null;
-    role: RoleDto = null;
+    //permissions: ListResultDtoOfPermissionDto = null;
+    model: GetRoleForEditOutput = null;
 
     @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
     constructor(
@@ -26,21 +26,21 @@ export class EditRoleComponent extends AppComponentBase implements OnInit {
         super(injector);
     }
 
-    ngOnInit(): void {
-        this._roleService.getAllPermissions()
-            .subscribe((permissions: ListResultDtoOfPermissionDto) => {
-                this.permissions = permissions;
-            });
-    }
+    //ngOnInit(): void {
+    //    this._roleService.getAllPermissions()
+    //        .subscribe((permissions: ListResultDtoOfPermissionDto) => {
+    //            this.permissions = permissions;
+    //        });
+    //}
 
     show(id: number): void {
-        this._roleService.get(id)
+        this._roleService.getRoleForEdit(id)
             .pipe(finalize(() => {
                 this.active = true;
                 this.modal.show();
             }))
-            .subscribe((result: RoleDto) => {
-                this.role = result;
+            .subscribe((result: GetRoleForEditOutput) => {
+                this.model = result;
             });
     }
 
@@ -49,7 +49,7 @@ export class EditRoleComponent extends AppComponentBase implements OnInit {
     }
 
     checkPermission(permissionName: string): string {
-        if (this.role.permissions.indexOf(permissionName) != -1) {
+        if (this.model.grantedPermissionNames.indexOf(permissionName) != -1) {
             return "checked";
         }
         else {
@@ -58,6 +58,8 @@ export class EditRoleComponent extends AppComponentBase implements OnInit {
     }
 
     save(): void {
+        const role = this.model.role;
+
         var permissions = [];
         $(this.modalContent.nativeElement).find("[name=permission]").each(
             function (index: number, elem: Element) {
@@ -67,9 +69,18 @@ export class EditRoleComponent extends AppComponentBase implements OnInit {
             }
         )
 
-        this.role.permissions = permissions;
         this.saving = true;
-        this._roleService.update(this.role)
+        var input = new RoleDto();
+
+        input.name = role.name;
+        input.displayName = role.displayName;
+        input.description = role.description;
+        input.id = role.id;
+        input.isStatic = role.isStatic;
+        input.permissions = permissions;
+
+
+        this._roleService.update(input)
             .pipe(finalize(() => { this.saving = false; }))
             .subscribe(() => {
                 this.notify.info(this.l('SavedSuccessfully'));