Skip to content

[DP-772] Fix for Role Based Access Tab delete/update bug #454

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oleksandrkits merged 1 commit into from
Oct 2, 2025
Merged

[DP-772] Fix for Role Based Access Tab delete/update bug #454

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 55 additions & 2 deletions src/app/adf-roles/df-role-details/df-role-details.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,9 +259,62 @@ export class DfRoleDetailsComponent implements OnInit {
}

onSubmit() {
if (this.roleForm.invalid) return;
// Clear validators for all hidden items before validation
const serviceAccess = this.roleForm.get('serviceAccess') as FormArray;
serviceAccess.controls.forEach((control, index) => {
if (!this.visibilityArray[index]) {
console.log(`Clearing validators for hidden item at index ${index}`);
control.get('service')?.clearValidators();
control.get('component')?.clearValidators();
control.get('access')?.clearValidators();
control.get('requester')?.clearValidators();
control.get('service')?.updateValueAndValidity();
control.get('component')?.updateValueAndValidity();
control.get('access')?.updateValueAndValidity();
control.get('requester')?.updateValueAndValidity();
}
});

if (this.roleForm.invalid) {
// Mark all controls as touched to show validation errors
this.roleForm.markAllAsTouched();

console.log('Form is invalid:', this.roleForm.errors);
console.log('Form controls validity:', {
name: this.roleForm.get('name')?.errors,
description: this.roleForm.get('description')?.errors,
active: this.roleForm.get('active')?.errors,
serviceAccess: this.roleForm.get('serviceAccess')?.errors,
lookupKeys: this.roleForm.get('lookupKeys')?.errors,
});

serviceAccess.controls.forEach((control, index) => {
console.log(`ServiceAccess[${index}] valid:`, control.valid, 'visibility:', this.visibilityArray[index]);
if (control.invalid) {
console.log(`ServiceAccess[${index}] errors:`, control.errors);
console.log(`ServiceAccess[${index}] controls errors:`, {
service: control.get('service')?.errors,
component: control.get('component')?.errors,
access: control.get('access')?.errors,
requester: control.get('requester')?.errors,
});
console.log(`ServiceAccess[${index}] controls valid:`, {
service: control.get('service')?.valid,
component: control.get('component')?.valid,
access: control.get('access')?.valid,
requester: control.get('requester')?.valid,
});
console.log(`ServiceAccess[${index}] values:`, control.value);
}
});

return;
}
const formValue = this.roleForm.getRawValue();
if (formValue.name === '' || formValue.name === null) return;
if (formValue.name === '' || formValue.name === null) {
console.log('Form name is empty');
return;
}
const payload: RolePayload = {
id: formValue.id,
name: formValue.name,
Expand Down
49 changes: 30 additions & 19 deletions src/app/adf-roles/df-roles-access/df-roles-access.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,22 +21,26 @@
<td
mat-cell
*matCellDef="let row; let i = dataIndex"
[formGroupName]="i">
[formGroupName]="getFormArrayIndex(i)">
<mat-form-field subscriptSizing="dynamic" appearance="outline">
<mat-label>{{
'roles.accessOverview.tableHeadings.service' | transloco
}}</mat-label>
<mat-select
formControlName="service"
panelWidth="null"
(selectionChange)="getComponents(i)">
(selectionChange)="getComponents(getFormArrayIndex(i))"
required>
<mat-option [value]="0">All</mat-option>
<mat-option
*ngFor="let option of serviceOptions"
[value]="option.id"
>{{ option.name }}</mat-option
>
</mat-select>
<mat-error *ngIf="formArray.controls[getFormArrayIndex(i)]?.get('service')?.hasError('required')">
Service is required
</mat-error>
</mat-form-field>
</td>
</ng-container>
Expand All @@ -48,18 +52,21 @@
<td
mat-cell
*matCellDef="let row; let i = dataIndex"
[formGroupName]="i">
[formGroupName]="getFormArrayIndex(i)">
<mat-form-field subscriptSizing="dynamic" appearance="outline">
<mat-label>{{
'roles.accessOverview.tableHeadings.component' | transloco
}}</mat-label>
<mat-select formControlName="component" panelWdith="null">
<mat-select formControlName="component" panelWdith="null" required>
<mat-option
*ngFor="let option of getComponentArray(i)"
*ngFor="let option of getComponentArray(getFormArrayIndex(i))"
[value]="option"
>{{ option }}</mat-option
>
</mat-select>
<mat-error *ngIf="formArray.controls[getFormArrayIndex(i)]?.get('component')?.hasError('required')">
Component is required
</mat-error>
</mat-form-field>
</td>
</ng-container>
Expand All @@ -71,7 +78,7 @@
<td
mat-cell
*matCellDef="let row; let i = dataIndex"
[formGroupName]="i">
[formGroupName]="getFormArrayIndex(i)">
<mat-form-field subscriptSizing="dynamic" appearance="outline">
<mat-label>{{
'roles.accessOverview.tableHeadings.access' | transloco
Expand All @@ -80,27 +87,31 @@
formControlName="access"
multiple
panelWidth="null"
(selectionChange)="accessChange(i, $event.value)">
(selectionChange)="accessChange(getFormArrayIndex(i), $event.value)"
required>
<mat-option
*ngFor="let option of accessOptions"
[value]="option.value"
>{{ option.label }}
<span
class="example-additional-selection"
*ngIf="
(formArray.controls[i].value.access.length || 0) > 1
(formArray.controls[getFormArrayIndex(i)]?.value.access.length || 0) > 1
">
(+{{
(formArray.controls[i].value.access.length || 0) - 1
(formArray.controls[getFormArrayIndex(i)]?.value.access.length || 0) - 1
}}
{{
formArray.controls[i].value.access.length === 2
formArray.controls[getFormArrayIndex(i)]?.value.access.length === 2
? 'other'
: 'others'
}})
</span>
</mat-option>
</mat-select>
<mat-error *ngIf="formArray.controls[getFormArrayIndex(i)]?.get('access')?.hasError('required')">
Access is required
</mat-error>
</mat-form-field>
</td>
</ng-container>
Expand All @@ -112,7 +123,7 @@
<td
mat-cell
*matCellDef="let row; let i = dataIndex"
[formGroupName]="i">
[formGroupName]="getFormArrayIndex(i)">
<mat-form-field subscriptSizing="dynamic" appearance="outline">
<mat-label>{{
'roles.accessOverview.tableHeadings.requester' | transloco
Expand Down Expand Up @@ -140,12 +151,12 @@
<td
mat-cell
*matCellDef="let row; let i = dataIndex"
[formGroupName]="i">
[formGroupName]="getFormArrayIndex(i)">
<button
mat-icon-button
color="primary"
type="button"
(click)="toggleRow(row, i)">
(click)="toggleRow(row, getFormArrayIndex(i))">
<fa-icon [icon]="faPlus" size="xs"></fa-icon>
</button>
</td>
Expand All @@ -165,7 +176,7 @@
<td
mat-cell
*matCellDef="let row; let i = dataIndex"
[formGroupName]="i">
[formGroupName]="getFormArrayIndex(i)">
<button mat-icon-button (click)="remove(i)">
<fa-icon [icon]="faTrashCan" size="xs"></fa-icon>
</button>
Expand All @@ -177,7 +188,7 @@
mat-cell
*matCellDef="let element; let i = dataIndex"
[attr.colspan]="6"
[formGroupName]="i">
[formGroupName]="getFormArrayIndex(i)">
<div
class="element-detail"
formArrayName="advancedFilters"
Expand All @@ -186,7 +197,7 @@
">
<ng-container
*ngFor="
let advancedFilter of getAdvancedFilters(i).controls;
let advancedFilter of getAdvancedFilters(getFormArrayIndex(i)).controls;
let j = index
">
<div [formArrayName]="j" class="expandedItems">
Expand Down Expand Up @@ -220,7 +231,7 @@
<mat-button-toggle-group
aria-label="Service Definition Type"
formControlName="filterOp"
(change)="filterOpChange($event, i)">
(change)="filterOpChange($event, getFormArrayIndex(i))">
<mat-button-toggle value="AND">AND</mat-button-toggle>
<mat-button-toggle value="OR">OR</mat-button-toggle>
</mat-button-toggle-group>
Expand All @@ -229,13 +240,13 @@
<button
mat-icon-button
type="button"
(click)="addAdvancedFilter(i)">
(click)="addAdvancedFilter(getFormArrayIndex(i))">
<fa-icon [icon]="faPlus" size="xs"></fa-icon>
</button>
<button
mat-icon-button
type="button"
(click)="removeAdvancedFilter(i, j)">
(click)="removeAdvancedFilter(getFormArrayIndex(i), j)">
<fa-icon [icon]="faTrashCan" size="xs"></fa-icon>
</button>
</div>
Expand Down
45 changes: 45 additions & 0 deletions src/app/adf-roles/df-roles-access/df-roles-access.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,19 @@ export class DfRolesAccessComponent implements OnInit {
return components || [];
}

getFormArrayIndex(visibleIndex: number): number {
let visibleCount = 0;
for (let i = 0; i < this.visible.length; i++) {
if (this.visible[i]) {
if (visibleCount === visibleIndex) {
return i;
}
visibleCount++;
}
}
return -1;
}

filterOptions(event: Event, index: number) {
const input = (event.target as HTMLInputElement).value.toLowerCase();
const serviceId = this.formArray.at(index).get('service')?.value;
Expand Down Expand Up @@ -294,6 +307,7 @@ export class DfRolesAccessComponent implements OnInit {
})
);
this.visible.push(true);
console.log('FormArray after add:', this.formArray.value, 'Visible:', this.visible);
this.updateDataSource();
}

Expand Down Expand Up @@ -323,9 +337,40 @@ export class DfRolesAccessComponent implements OnInit {
}

remove(index: number) {
console.log('Remove called with index:', index, 'Visible array before:', [...this.visible]);
if (index >= 0 && index < this.formArray.length) {
// Find the actual form array index for the nth visible item BEFORE updating visible array
let visibleCount = 0;
let actualIndex = -1;
for (let i = 0; i < this.visible.length; i++) {
if (this.visible[i]) {
if (visibleCount === index) {
actualIndex = i;
break;
}
visibleCount++;
}
}
console.log('Actual form array index to hide:', actualIndex);

this.visible = this.updateNthTrueToFalse(this.visible, index);

// Clear validators for the hidden item
if (actualIndex !== -1 && actualIndex < this.formArray.length) {
const formGroup = this.formArray.at(actualIndex);
console.log('Clearing validators for form group at index:', actualIndex);
formGroup.get('service')?.clearValidators();
formGroup.get('component')?.clearValidators();
formGroup.get('access')?.clearValidators();
formGroup.get('requester')?.clearValidators();
formGroup.get('service')?.updateValueAndValidity();
formGroup.get('component')?.updateValueAndValidity();
formGroup.get('access')?.updateValueAndValidity();
formGroup.get('requester')?.updateValueAndValidity();
console.log('Form group validity after clearing:', formGroup.valid);
}
}
console.log('FormArray after remove:', this.formArray.value, 'Visible:', this.visible);
this.updateDataSource();
}

Expand Down