From ea6309c615b603332f7527da8f75e6ab0cca2434 Mon Sep 17 00:00:00 2001
From: sylvain121 <sylvain121@gmail.com>
Date: Mon, 6 Nov 2023 16:03:17 +0100
Subject: [PATCH] fix role update infinte loop

---
 .../role-detail/role-detail.component.html    | 35 ++++++++++---------
 .../role-detail/role-detail.component.ts      | 25 ++++++++-----
 2 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/src/app/components/role-management/role-detail/role-detail.component.html b/src/app/components/role-management/role-detail/role-detail.component.html
index ae9db3d9..93edb9f0 100644
--- a/src/app/components/role-management/role-detail/role-detail.component.html
+++ b/src/app/components/role-management/role-detail/role-detail.component.html
@@ -12,27 +12,30 @@
     </div>
     <div class="main">
       <div class="details">
-        <div>
-          <mat-form-field>
-            <mat-label>Role name:</mat-label>
-            <input matInput type="text" [ngModel]="($role | async)?.name">
-          </mat-form-field>
-        </div>
-        <div>
-          <mat-form-field>
-            <mat-label>Description:</mat-label>
-            <input matInput type="text" [ngModel]="($role | async)?.description">
-          </mat-form-field>
-        </div>
+        <form [formGroup]="editRoleForm">
+          <div>
+            <mat-form-field>
+              <mat-label>Role name:</mat-label>
+              <input matInput type="text" formControlName="rolename">
+            </mat-form-field>
+          </div>
+          <div>
+            <mat-form-field>
+              <mat-label>Description:</mat-label>
+              <input matInput type="text" formControlName="description">
+            </mat-form-field>
+          </div>
+        </form>
         <div>Creation date:   {{($role | async)?.created_at}}</div>
-        <div>Last update Date:   {{($role | async )?.updated_at}}</div>
+        <div>Last update Date:   {{($role | async)?.updated_at}}</div>
         <div>UUID:   {{($role | async)?.role_id}}</div>
         <div>
           <mat-checkbox [checked]="($role | async)?.is_builtin" disabled>Is built-in</mat-checkbox>
         </div>
         <div mat-dialog-actions class="button-div">
           <button mat-button (click)="onUpdate()" tabindex="2" mat-raised-button color="primary"
-                  [disabled]="!editRoleForm.valid || ($role | async)?.is_builtin">
+                  [disabled]="(!(editRoleForm.valueChanges | async) && editRoleForm.valid) || ($role | async)?.is_builtin">
+
             Update Role
           </button>
         </div>
@@ -41,8 +44,8 @@
       <app-privilege
         [disable]="($role | async)?.is_builtin"
         [ownedPrivilege]="$ownedPrivilegesId | async"
-      [privileges]="privileges | async"
-      (update)="onPrivilegesUpdate($event)"></app-privilege>
+        [privileges]="privileges | async"
+        (update)="onPrivilegesUpdate($event)"></app-privilege>
     </div>
   </div>
 </div>
diff --git a/src/app/components/role-management/role-detail/role-detail.component.ts b/src/app/components/role-management/role-detail/role-detail.component.ts
index 2c6af119..ff8e9e0e 100644
--- a/src/app/components/role-management/role-detail/role-detail.component.ts
+++ b/src/app/components/role-management/role-detail/role-detail.component.ts
@@ -15,14 +15,15 @@ import {RoleService} from "@services/role.service";
 import {ActivatedRoute} from "@angular/router";
 import {Controller} from "@models/controller";
 import {Role} from "@models/api/role";
-import {UntypedFormControl, UntypedFormGroup} from "@angular/forms";
+import {FormBuilder, FormGroup} from "@angular/forms";
 import {ToasterService} from "@services/toaster.service";
 import {HttpErrorResponse} from "@angular/common/http";
 import {Privilege} from "@models/api/Privilege";
 import {PrivilegeService} from "@services/privilege.service";
-import {Observable, ReplaySubject} from "rxjs";
+import {BehaviorSubject, Observable} from "rxjs";
 import {IPrivilegesChange} from "@components/role-management/role-detail/privilege/IPrivilegesChange";
 import {map} from "rxjs/operators";
+import {string} from "yargs";
 
 @Component({
   selector: 'app-role-detail',
@@ -31,8 +32,8 @@ import {map} from "rxjs/operators";
 })
 export class RoleDetailComponent implements OnInit {
   controller: Controller;
-  $role: ReplaySubject<Role> = new ReplaySubject<Role>(1);
-  editRoleForm: UntypedFormGroup;
+  $role: BehaviorSubject<Role> = new BehaviorSubject<Role>({role_id: "", description: "", updated_at: "", is_builtin: false, privileges: [], name: "", created_at:""});
+  editRoleForm: FormGroup;
   $ownedPrivilegesId: Observable<Privilege[]> =  this.$role.pipe(map((role: Role) => {
     return role.privileges
   }));
@@ -44,11 +45,16 @@ export class RoleDetailComponent implements OnInit {
               private toastService: ToasterService,
               private route: ActivatedRoute,
               private privilegeService: PrivilegeService,
+              private fb : FormBuilder,
   ) {
 
-    this.editRoleForm = new UntypedFormGroup({
-      rolename: new UntypedFormControl(),
-      description: new UntypedFormControl(),
+
+
+    this.$role.subscribe((role) => {
+      this.editRoleForm = fb.group({
+        rolename: [role.name],
+        description: [role.description],
+      });
     });
   }
 
@@ -61,7 +67,9 @@ export class RoleDetailComponent implements OnInit {
     });
   }
   onUpdate() {
-    this.$role.subscribe((role) => {
+      const role = this.$role.value;
+      role.name = this.editRoleForm.get("rolename").value;
+      role.description = this.editRoleForm.get("description").value;
       this.roleService.update(this.controller, role)
         .subscribe(() => {
             this.toastService.success(`role: ${role.name} was updated`);
@@ -71,7 +79,6 @@ export class RoleDetailComponent implements OnInit {
             this.toastService.error(`${error.message}
         ${error.error.message}`);
           });
-    })
 
   }