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 }}
: '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
*
|