OPS-355: Fix organizations roles table (#147)

valitydev · Aug 30, 2023 · adc9a1a · adc9a1a
1 parent 757bc46
commit adc9a1a
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 40 deletions.
diff --git a/...ization-section/organization-details/change-roles-table/change-roles-table.component.html b/...ization-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)"
                 ></mat-checkbox>
             </dsh-nested-table-col>
         </dsh-nested-table-row>
@@ -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)"
                     ></mat-checkbox>
                 </dsh-nested-table-col>
             </dsh-nested-table-row>
         </dsh-nested-table-group>
     </ng-container>
 
-    <dsh-nested-table-row *ngIf="isAllowRemoves">
+    <dsh-nested-table-row>
         <dsh-nested-table-col class="dsh-body-2"></dsh-nested-table-col>
         <dsh-nested-table-col
             *ngFor="let roleId of roleIds"
             class="dsh-body-2"
             fxLayoutAlign="center center"
         >
-            <button *ngIf="hasRemove(roleId)" color="warn" dsh-button (click)="remove(roleId)">
+            <button
+                [disabled]="!(isAllowRemoves$ | async)"
+                color="warn"
+                dsh-button
+                (click)="remove(roleId)"
+            >
                 {{ t('remove') }}
             </button>
         </dsh-nested-table-col>

diff --git a/...anization-section/organization-details/change-roles-table/change-roles-table.component.ts b/...anization-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<PartialReadonly<MemberRole>[]>([]);
 
+    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<MemberRole> = {
             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<boolean> {
         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<boolean> {
         return combineLatest([this.shops$, this.roles$]).pipe(
             map(([shops, roles]) => {

diff --git a/.../organization-details/members/components/edit-roles-dialog/edit-roles-dialog.component.ts b/.../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
@@ -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;
         }
     }