From adc9a1a16713ebb599b2319576fb7a5c5f796678 Mon Sep 17 00:00:00 2001 From: Rinat Arsaev <11846445+A77AY@users.noreply.github.com> Date: Wed, 30 Aug 2023 11:09:17 +0400 Subject: [PATCH] OPS-355: Fix organizations roles table (#147) --- .../change-roles-table.component.html | 13 +++++--- .../change-roles-table.component.ts | 17 +++------- .../edit-roles-dialog.component.ts | 33 ++++++++++--------- .../nested-table-col.component.scss | 12 +++---- 4 files changed, 35 insertions(+), 40 deletions(-) diff --git a/src/app/sections/organization-section/organization-details/change-roles-table/change-roles-table.component.html b/src/app/sections/organization-section/organization-details/change-roles-table/change-roles-table.component.html index dca52f471..5c7e966c9 100644 --- a/src/app/sections/organization-section/organization-details/change-roles-table/change-roles-table.component.html +++ b/src/app/sections/organization-section/organization-details/change-roles-table/change-roles-table.component.html @@ -29,7 +29,7 @@ [disabled]="disabledAll(roleId)" [indeterminate]="isIntermediate(roleId) | async" [ngClass]="{ disabled: disabledAll(roleId) }" - (click)="toggleAll(roleId, $event)" + (change)="toggleAll(roleId)" > @@ -41,21 +41,26 @@ [checked]="checked(roleId, shop.id) | async" [disabled]="disabled(roleId, shop.id) | async" [ngClass]="{ disabled: (disabled(roleId, shop.id) | async) }" - (click)="toggle(roleId, shop.id, $event)" + (change)="toggle(roleId, shop.id, $event.checked)" > - + - diff --git a/src/app/sections/organization-section/organization-details/change-roles-table/change-roles-table.component.ts b/src/app/sections/organization-section/organization-details/change-roles-table/change-roles-table.component.ts index 52fc8c556..703616ff3 100644 --- a/src/app/sections/organization-section/organization-details/change-roles-table/change-roles-table.component.ts +++ b/src/app/sections/organization-section/organization-details/change-roles-table/change-roles-table.component.ts @@ -65,16 +65,14 @@ export class ChangeRolesTableComponent implements OnInit { return Object.values(RoleId).filter((r) => !this.roleIds.includes(r)); } - get isAllowRemoves(): boolean { - return !this.editMode || this.hasAdminRole; - } - get isAllowAdd(): boolean { return !!this.availableRoles.length && !this.hasAdminRole; } roles$ = new BehaviorSubject[]>([]); + isAllowRemoves$ = this.roles$.pipe(map((r) => r.length > 1)); + private get hasAdminRole() { return !!this.roles.find((r) => r.id === RoleId.Administrator); } @@ -123,7 +121,7 @@ export class ChangeRolesTableComponent implements OnInit { this.removeRoles(this.roles.filter((r) => r.roleId === roleId)); } - toggle(roleId: RoleId, resourceId: string, event: MouseEvent): void { + toggle(roleId: RoleId, resourceId: string): void { const role: PartialReadonly = { roleId, scope: { id: ResourceScopeId.Shop, resourceId }, @@ -134,10 +132,9 @@ export class ChangeRolesTableComponent implements OnInit { } else { this.addRoles([role]); } - event.preventDefault(); } - toggleAll(roleId: RoleId, event: MouseEvent): void { + toggleAll(roleId: RoleId): void { const roles = this.roles.filter((r) => r.roleId === roleId); combineLatest([this.shops$, this.checkedAll(roleId)]) .pipe(first(), untilDestroyed(this)) @@ -154,11 +151,11 @@ export class ChangeRolesTableComponent implements OnInit { this.addRoles(newRoles); } }); - event.preventDefault(); } disabled(roleId: RoleId, resourceId: string): Observable { if (roleId === RoleId.Administrator) return of(true); + if (!this.editMode) return of(false); return combineLatest([this.roles$, this.checked(roleId, resourceId)]).pipe( map(([roles, isChecked]) => roles.length <= 1 && isChecked), ); @@ -195,10 +192,6 @@ export class ChangeRolesTableComponent implements OnInit { ); } - hasRemove(roleId: RoleId): boolean { - return roleId === RoleId.Administrator || !this.editMode; - } - isIntermediate(roleId: RoleId): Observable { return combineLatest([this.shops$, this.roles$]).pipe( map(([shops, roles]) => { diff --git a/src/app/sections/organization-section/organization-details/members/components/edit-roles-dialog/edit-roles-dialog.component.ts b/src/app/sections/organization-section/organization-details/members/components/edit-roles-dialog/edit-roles-dialog.component.ts index b2017f772..de0061671 100644 --- a/src/app/sections/organization-section/organization-details/members/components/edit-roles-dialog/edit-roles-dialog.component.ts +++ b/src/app/sections/organization-section/organization-details/members/components/edit-roles-dialog/edit-roles-dialog.component.ts @@ -1,9 +1,9 @@ import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; -import { UntilDestroy } from '@ngneat/until-destroy'; +import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; import { MemberRole } from '@vality/swag-organizations'; import { BehaviorSubject, defer, forkJoin, of, Subscription } from 'rxjs'; -import { catchError, pluck, shareReplay, switchMap } from 'rxjs/operators'; +import { catchError, shareReplay, switchMap, map } from 'rxjs/operators'; import { MembersService } from '@dsh/app/api/organizations'; import { ErrorService } from '@dsh/app/shared'; @@ -22,8 +22,9 @@ export class EditRolesDialogComponent { switchMap(() => this.membersService .getOrgMember({ orgId: this.data.orgId, userId: this.data.userId }) - .pipe(pluck('roles')), + .pipe(map((r) => r.roles)), ), + untilDestroyed(this), shareReplay(1), ); @@ -62,19 +63,19 @@ export class EditRolesDialogComponent { removeRoles(roles: MemberRole[]): Subscription { return forkJoin( roles.map((role) => - this.membersService.removeMemberRole({ - orgId: this.data.orgId, - userId: this.data.userId, - memberRoleId: role.id, - }), + this.membersService + .removeMemberRole({ + orgId: this.data.orgId, + userId: this.data.userId, + memberRoleId: role.id, + }) + .pipe( + catchError((err) => { + this.errorService.error(err); + return of(undefined); + }), + ), ), - ) - .pipe( - catchError((err) => { - this.errorService.error(err); - return of(undefined); - }), - ) - .subscribe(() => this.updateRoles$.next()); + ).subscribe(() => this.updateRoles$.next()); } } diff --git a/src/components/nested-table/components/nested-table-col/nested-table-col.component.scss b/src/components/nested-table/components/nested-table-col/nested-table-col.component.scss index 2a860ac27..1446cada6 100644 --- a/src/components/nested-table/components/nested-table-col/nested-table-col.component.scss +++ b/src/components/nested-table/components/nested-table-col/nested-table-col.component.scss @@ -3,21 +3,17 @@ align-items: center; min-height: 32px; padding: 8px; - overflow: auto; & > ::ng-deep button, & > ::ng-deep mat-checkbox, & > ::ng-deep mat-radio-button { margin: auto; - } - & > ::ng-deep mat-checkbox, - & > ::ng-deep mat-radio-button { - display: flex; - - & * { + .mdc-radio { padding: 0; - margin: 0; + } + .mdc-label { + display: none; } }