Skip to content

Commit 2fbd165

Browse files
sarkapalkovicovamattjoke
sarkapalkovicova
authored and
mattjoke
committed
fix(admin): indirect membership
- Refactored indirect membership’s origin dialog. - Added column for type in the members list.
1 parent 7d955c9 commit 2fbd165

File tree

9 files changed

+93
-28
lines changed

9 files changed

+93
-28
lines changed

‎apps/admin-gui/src/assets/i18n/en.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2417,6 +2417,7 @@
24172417
"ID": "Id",
24182418
"VO_ID": "Organization Id",
24192419
"USER_ID": "User Id",
2420+
"TYPE": "Type",
24202421
"NAME": "Name",
24212422
"STATUS": "Organization status",
24222423
"GROUP_STATUS": "Group status",
@@ -2426,7 +2427,8 @@
24262427
"ORGANIZATION": "Organization",
24272428
"NO_MEMBERS_ALERT": "No members present",
24282429
"NO_FILTER_RESULTS_ALERT": "No members are matching your query",
2429-
"INDIRECT_MEMBER": "Indirect member",
2430+
"INDIRECT_MEMBER": "Show indirect member origin",
2431+
"DIRECT_MEMBER": "Direct member",
24302432
"CHECKBOX_TOOLTIP_INDIRECT": "Indirect members cannot be removed or copied",
24312433
"CHECKBOX_TOOLTIP_UNALTERABLE": "Members from member organizations cannot be directly removed",
24322434
"STATUS_TOOLTIP_INDIRECT": "Member status from member organization cannot be directly changed",
@@ -3281,8 +3283,8 @@
32813283
"MEMBER_TREEVIEW_DIALOG": {
32823284
"TITLE": "Indirect membership’s origin of {{name}}",
32833285
"INFO": "Member is coming to this group through the following group hierarchy.",
3284-
"DIRECT": "(Direct membership)",
3285-
"INCLUDE": "(Included group)",
3286+
"DIRECT": "Direct membership",
3287+
"INCLUDE": "Included group",
32863288
"FILTER": "Search by group name",
32873289
"CLOSE": "Close",
32883290
"NO_PATHS": "No paths include the entered group name.",

‎libs/perun/components/src/lib/members-dynamic-list/members-dynamic-list.component.html‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,18 @@
4444
<td *matCellDef="let member" class="static-column-size" mat-cell>{{member.id}}</td>
4545
</ng-container>
4646
<ng-container matColumnDef="type">
47-
<th *matHeaderCellDef mat-header-cell mat-sort-header></th>
47+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
48+
{{'MEMBERS_LIST.TYPE' | translate}}
49+
</th>
4850
<td *matCellDef="let member" mat-cell>
49-
<mat-icon
50-
(click)="viewMemberGroupTree($event, member)"
51-
*ngIf="member.membershipType !== 'DIRECT'"
52-
[matTooltip]="'MEMBERS_LIST.INDIRECT_MEMBER' | translate"
53-
>transfer_within_a_station</mat-icon
54-
>
51+
<span [matTooltip]="member.membershipType | memberTypeTooltip">
52+
<button
53+
(click)="viewMemberGroupTree($event, member)"
54+
[disabled]="member.membershipType === 'DIRECT'"
55+
mat-icon-button>
56+
<mat-icon>{{member.membershipType | memberTypeIcon}}</mat-icon>
57+
</button>
58+
</span>
5559
</td>
5660
</ng-container>
5761
<ng-container matColumnDef="fullName">

‎libs/perun/components/src/lib/members-dynamic-list/members-dynamic-list.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,8 @@ export class MembersDynamicListComponent implements AfterViewInit, OnInit, OnCha
9999
switch (column) {
100100
case 'id':
101101
return data.id.toString();
102+
case 'type':
103+
return data.membershipType;
102104
case 'fullName':
103105
if (data.user) {
104106
return parseFullName(data.user);
@@ -272,7 +274,7 @@ export class MembersDynamicListComponent implements AfterViewInit, OnInit, OnCha
272274
viewMemberGroupTree(event: Event, member: RichMember): void {
273275
event.stopPropagation();
274276
const config = getDefaultDialogConfig();
275-
config.width = '800px';
277+
config.width = '1000px';
276278
config.data = { member: member, groupId: this.groupId };
277279

278280
this.dialog.open(MemberTreeViewDialogComponent, config);

‎libs/perun/dialogs/src/lib/member-tree-view-dialog/member-tree-view-dialog.component.html‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,52 +7,58 @@ <h1 mat-dialog-title>
77
{{'SHARED_LIB.PERUN.COMPONENTS.MEMBER_TREEVIEW_DIALOG.TITLE' | translate:{ 'name': userName} }}
88
</h1>
99
<div *ngIf="dataSource" mat-dialog-content class="me-0">
10-
<p>{{'SHARED_LIB.PERUN.COMPONENTS.MEMBER_TREEVIEW_DIALOG.INFO' | translate}}</p>
10+
<p class="ms-2">{{'SHARED_LIB.PERUN.COMPONENTS.MEMBER_TREEVIEW_DIALOG.INFO' | translate}}</p>
1111

1212
<mat-form-field class="filter-field ms-2">
1313
<mat-label>
1414
{{'SHARED_LIB.PERUN.COMPONENTS.MEMBER_TREEVIEW_DIALOG.FILTER' | translate}}
1515
</mat-label>
1616
<input matInput [formControl]="formControl" />
1717
</mat-form-field>
18-
<perun-web-apps-alert
19-
*ngIf="!dataSource.data.length"
20-
>{{'SHARED_LIB.PERUN.COMPONENTS.MEMBER_TREEVIEW_DIALOG.NO_PATHS'|translate}}</perun-web-apps-alert
21-
>
18+
19+
<perun-web-apps-alert *ngIf="!dataSource.data.length">
20+
{{'SHARED_LIB.PERUN.COMPONENTS.MEMBER_TREEVIEW_DIALOG.NO_PATHS'|translate}}
21+
</perun-web-apps-alert>
22+
2223
<mat-tree
2324
*ngIf="dataSource.data.length"
2425
[dataSource]="dataSource"
2526
[treeControl]="treeControl"
26-
class="example-tree">
27+
class="example-tree ms-2 bordered-tree description-text">
2728
<!-- This is the tree node template for leaf nodes -->
2829
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
29-
<li class="mat-tree-node">
30+
<li class="mat-tree-node node ps-2">
3031
<div
3132
class="row flex-nowrap"
3233
[class.cursor-pointer]="node.direct || node.include"
3334
[class.act-disabled]="!node.direct && !node.include"
3435
(click)="navigate(node.id, node.include)">
35-
<div [ngStyle]="{'min-width': getMinWidth(node.level)}" class="mt-auto mb-auto">
36+
<div
37+
[ngStyle]="{'min-width': getMinWidth(node.level)}"
38+
class="mt-auto mb-auto ms-3 d-flex">
3639
<span>{{node.name | parseGroupName}}</span>
3740
<span
3841
*ngIf="node.direct"
3942
class="text-muted ms-2"
40-
>{{'SHARED_LIB.PERUN.COMPONENTS.MEMBER_TREEVIEW_DIALOG.DIRECT' | translate}}</span
41-
>
43+
matTooltip="{{'SHARED_LIB.PERUN.COMPONENTS.MEMBER_TREEVIEW_DIALOG.DIRECT' | translate}}">
44+
<mat-icon>person_pin_circle</mat-icon>
45+
</span>
4246
<span
4347
*ngIf="node.include"
4448
class="text-muted ms-2"
45-
>{{'SHARED_LIB.PERUN.COMPONENTS.MEMBER_TREEVIEW_DIALOG.INCLUDE' | translate}}</span
46-
>
49+
matTooltip="{{'SHARED_LIB.PERUN.COMPONENTS.MEMBER_TREEVIEW_DIALOG.INCLUDE' | translate}}">
50+
<mat-icon>mediation</mat-icon>
51+
</span>
52+
<span class="text-muted ms-5 w-50">{{node.description}}</span>
4753
</div>
48-
<span class="text-muted ms-3">{{node.description}}</span>
4954
</div>
5055
</li>
5156
</mat-tree-node>
57+
5258
<!-- This is the tree node template for expandable nodes -->
5359
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
5460
<li>
55-
<div class="mat-tree-node">
61+
<div class="mat-tree-node ps-2">
5662
<button
5763
mat-icon-button
5864
matTreeNodeToggle
@@ -66,8 +72,10 @@ <h1 mat-dialog-title>
6672
[class.cursor-pointer]="node.direct || node.include"
6773
[class.act-disabled]="!node.direct && !node.include"
6874
(click)="navigate(node.id, node.include)"
69-
class="row flex-nowrap">
70-
<div [ngStyle]="{'min-width': getMinWidth(node.level)}" class="mt-auto mb-auto">
75+
class="row">
76+
<div
77+
[ngStyle]="{'min-width': getMinWidth(node.level)}"
78+
class="mt-auto mb-auto d-flex">
7179
<span>{{node.name | parseGroupName}}</span>
7280
<span
7381
*ngIf="node.direct"
@@ -79,8 +87,8 @@ <h1 mat-dialog-title>
7987
class="text-muted ms-2"
8088
>{{'SHARED_LIB.PERUN.COMPONENTS.MEMBER_TREEVIEW_DIALOG.INCLUDE' | translate}}</span
8189
>
90+
<span class="text-muted ms-5">{{node.description}}</span>
8291
</div>
83-
<span class="text-muted ms-3">{{node.description}}</span>
8492
</div>
8593
</div>
8694
<ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
@@ -90,6 +98,7 @@ <h1 mat-dialog-title>
9098
</mat-nested-tree-node>
9199
</mat-tree>
92100
</div>
101+
93102
<div mat-dialog-actions>
94103
<div class="ms-auto">
95104
<button (click)="onCancel()" mat-stroked-button>

‎libs/perun/dialogs/src/lib/member-tree-view-dialog/member-tree-view-dialog.component.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
margin-top: 0;
88
margin-bottom: 0;
99
list-style-type: none;
10+
11+
&:hover {
12+
background-color: rgba(0, 0, 0, 0.05);
13+
}
1014
}
1115

1216
.act-disabled {
@@ -22,3 +26,14 @@
2226
width: 100% !important;
2327
min-width: initial !important;
2428
}
29+
30+
.bordered-tree {
31+
border: 1px solid var(--bs-border-color-translucent);
32+
border-radius: var(--bs-border-radius) !important;
33+
}
34+
35+
.description-text {
36+
text-overflow: ellipsis;
37+
overflow: auto;
38+
white-space: nowrap;
39+
}

‎libs/perun/pipes/src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,5 @@ export * from './lib/application-column-select-label.pipe';
4343
export * from './lib/selected-consent-statuses.pipe';
4444
export * from './lib/global-namespace.pipe';
4545
export * from './lib/last-successful-propagation.pipe';
46+
export * from './lib/member-type-icon.pipe';
47+
export * from './lib/member-type-tooltip.pipe';

‎libs/perun/pipes/src/lib/member-type-icon.pipe.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Pipe, PipeTransform } from '@angular/core';
2+
3+
@Pipe({
4+
name: 'memberTypeIcon',
5+
})
6+
export class MemberTypeIconPipe implements PipeTransform {
7+
transform(value: string): string {
8+
return value === 'DIRECT' ? 'person_pin_circle' : 'transfer_within_a_station';
9+
}
10+
}

‎libs/perun/pipes/src/lib/member-type-tooltip.pipe.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Pipe, PipeTransform } from '@angular/core';
2+
import { PerunTranslateService } from '@perun-web-apps/perun/services';
3+
4+
@Pipe({
5+
name: 'memberTypeTooltip',
6+
})
7+
export class MemberTypeTooltipPipe implements PipeTransform {
8+
constructor(private translate: PerunTranslateService) {}
9+
10+
transform(value: string): string {
11+
const tooltip =
12+
value === 'DIRECT' ? 'MEMBERS_LIST.DIRECT_MEMBER' : 'MEMBERS_LIST.INDIRECT_MEMBER';
13+
return this.translate.instant(tooltip);
14+
}
15+
}

‎libs/perun/pipes/src/lib/perun-pipes.module.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import { GetResourceRoutePipe } from './get-resource-route.pipe';
1212
import { ServiceStateBlockedToStringPipe } from './service-state-blocked-to-string.pipe';
1313
import { MemberStatusIconColorPipe } from './member-status-icon-color.pipe';
1414
import { MemberStatusIconPipe } from './member-status-icon.pipe';
15+
import { MemberTypeIconPipe } from './member-type-icon.pipe';
16+
import { MemberTypeTooltipPipe } from './member-type-tooltip.pipe';
1517
import { MemberStatusTooltipPipe } from './member-status-tooltip.pipe';
1618
import { MemberEmailPipe } from './member-email.pipe';
1719
import { MemberLoginsPipe } from './member-logins.pipe';
@@ -79,6 +81,8 @@ import { ActiveSideMenuItemPipe } from './active-side-menu-item.pipe';
7981
ServiceStateBlockedToStringPipe,
8082
MemberStatusIconColorPipe,
8183
MemberStatusIconPipe,
84+
MemberTypeIconPipe,
85+
MemberTypeTooltipPipe,
8286
MemberStatusTooltipPipe,
8387
MemberEmailPipe,
8488
MemberLoginsPipe,
@@ -145,6 +149,8 @@ import { ActiveSideMenuItemPipe } from './active-side-menu-item.pipe';
145149
ServiceStateBlockedToStringPipe,
146150
MemberStatusIconColorPipe,
147151
MemberStatusIconPipe,
152+
MemberTypeIconPipe,
153+
MemberTypeTooltipPipe,
148154
MemberStatusTooltipPipe,
149155
MemberEmailPipe,
150156
MemberLoginsPipe,

0 commit comments

Comments
 (0)