diff --git a/libs/safe/src/lib/components/role-summary/role-resources/resource-fields/resource-fields.component.html b/libs/safe/src/lib/components/role-summary/role-resources/resource-fields/resource-fields.component.html index fcc7490404..6712c94f20 100644 --- a/libs/safe/src/lib/components/role-summary/role-resources/resource-fields/resource-fields.component.html +++ b/libs/safe/src/lib/components/role-summary/role-resources/resource-fields/resource-fields.component.html @@ -38,7 +38,7 @@

{{ 'common.field.few' | translate }}

- +
{{ 'common.field.few' | translate }} : 'components.role.tooltip.disallowFieldAccessibility' ) | translate : { field: element.name } " - (click)="onEditFieldAccess(element, 'canSee')" + (click)="onEditFieldAccess(index, element, 'canSee')" > {{ 'common.field.few' | translate }} : 'components.role.tooltip.disallowFieldUpdate' ) | translate : { field: element.name } " - (click)="onEditFieldAccess(element, 'canUpdate')" + (click)="onEditFieldAccess(index, element, 'canUpdate')" >
diff --git a/libs/safe/src/lib/components/role-summary/role-resources/resource-fields/resource-fields.component.ts b/libs/safe/src/lib/components/role-summary/role-resources/resource-fields/resource-fields.component.ts index 386354bd93..0c7471de82 100644 --- a/libs/safe/src/lib/components/role-summary/role-resources/resource-fields/resource-fields.component.ts +++ b/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(undefined); - public fields = new Array([]); + public fields = new Array(); 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, diff --git a/libs/safe/src/lib/components/role-summary/role-resources/role-resources.component.html b/libs/safe/src/lib/components/role-summary/role-resources/role-resources.component.html index b35eb783c8..dc90957136 100644 --- a/libs/safe/src/lib/components/role-summary/role-resources/role-resources.component.html +++ b/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 > diff --git a/libs/safe/src/lib/components/role-summary/role-resources/role-resources.component.ts b/libs/safe/src/lib/components/role-summary/role-resources/role-resources.component.ts index 432fdd8b2a..679e5ab7df 100644 --- a/libs/safe/src/lib/components/role-summary/role-resources/role-resources.component.ts +++ b/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 *