fix: update resources field permissions in roles page

Author: estelafs

libs/safe/src/lib/components/role-summary/role-resources/resource-fields/resource-fields.component.html

@@ -38,7 +38,7 @@ <h2>{{ 'common.field.few' | translate }}</h2>
       </ng-container>
       <ng-container cdkColumnDef="actions" [stickyEnd]="true">
         <th uiCellHeader *cdkHeaderCellDef scope="col" class="w-16"></th>
-        <td uiCell *cdkCellDef="let element">
+        <td uiCell *cdkCellDef="let element; let index = index">
           <div class="flex">
             <ui-button
               [isIcon]="true"
@@ -51,7 +51,7 @@ <h2>{{ 'common.field.few' | translate }}</h2>
                   : 'components.role.tooltip.disallowFieldAccessibility'
                 ) | translate : { field: element.name }
               "
-              (click)="onEditFieldAccess(element, 'canSee')"
+              (click)="onEditFieldAccess(index, element, 'canSee')"
             >
             </ui-button>
             <ui-button
@@ -65,7 +65,7 @@ <h2>{{ 'common.field.few' | translate }}</h2>
                   : 'components.role.tooltip.disallowFieldUpdate'
                 ) | translate : { field: element.name }
               "
-              (click)="onEditFieldAccess(element, 'canUpdate')"
+              (click)="onEditFieldAccess(index, element, 'canUpdate')"
             >
             </ui-button>
           </div>

libs/safe/src/lib/components/role-summary/role-resources/resource-fields/resource-fields.component.ts

@@ -1,4 +1,12 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
 import { isEqual, sortBy } from 'lodash';
 import { Resource } from '../../../../models/resource.model';
 import { Role } from '../../../../models/user.model';
@@ -19,7 +27,7 @@ type ResourceField = {
   templateUrl: './resource-fields.component.html',
   styleUrls: ['./resource-fields.component.scss'],
 })
-export class ResourceFieldsComponent implements OnInit {
+export class ResourceFieldsComponent implements OnInit, OnChanges {
   @Input() resource!: Resource;
   @Input() role!: Role;
   @Input() disabled = false;
@@ -32,9 +40,12 @@ export class ResourceFieldsComponent implements OnInit {
 
   public filterId = new FormControl<string | null | undefined>(undefined);
 
-  public fields = new Array<ResourceField[]>([]);
+  public fields = new Array<ResourceField>();
   public displayedColumns: string[] = ['name', 'actions'];
 
+  private updatedField: { index: number; permission: 'canSee' | 'canUpdate' } =
+    { index: -1, permission: 'canSee' };
+
   ngOnInit() {
     this.fields = sortBy(
       this.resource.fields.map((field: any) => ({
@@ -49,6 +60,18 @@ export class ResourceFieldsComponent implements OnInit {
     });
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.resource && this.updatedField.index !== -1) {
+      const field = this.fields[this.updatedField.index];
+      if (this.updatedField.permission === 'canSee') {
+        field.canSee = !field.canSee;
+      } else {
+        field.canUpdate = !field.canUpdate;
+      }
+      this.updatedField.index = -1;
+    }
+  }
+
   /**
    * Filter list of fields by template id
    *
@@ -85,13 +108,17 @@ export class ResourceFieldsComponent implements OnInit {
   /**
    * Emits an event to toggle if field is visible / editable.
    *
+   * @param index Index of the field to toggle permission for.
    * @param field Field to toggle permission for.
    * @param permission Permission type to toggle.
    */
   public onEditFieldAccess(
+    index: number,
     field: ResourceField,
     permission: 'canSee' | 'canUpdate'
   ) {
+    // Save field updated
+    this.updatedField = { index, permission };
     this.onToggle.emit({
       field,
       permission,

libs/safe/src/lib/components/role-summary/role-resources/role-resources.component.html

@@ -14,6 +14,7 @@
       cdk-table
       uiTableWrapper
       [dataSource]="resources"
+      [trackBy]="getUniqueIdentifier"
       multiTemplateDataRows
     >
       <!-- Resource Name -->

libs/safe/src/lib/components/role-summary/role-resources/role-resources.component.ts

@@ -456,6 +456,18 @@ export class RoleResourcesComponent
       });
   }
 
+  /**
+   * Custom TrackByFunction to compute the identity of items in an iterable, so when
+   * updating fields the scroll don't get back to the beginning of the table.
+   *
+   * @param index index of the item in the table
+   * @param item item table
+   * @returns unique value for all unique inputs
+   */
+  public getUniqueIdentifier(index: number, item: any): any {
+    return item.resource.id;
+  }
+
   /**
    * Gets the correspondent icon for a given permission
    *