feat(admin): added tree view also to member-groups page

* Member groups page was extended by tree view (previously there was just list view).
* Groups-tree component was extended by group status icon and expiration functionality (expiration can be edited also from tree view).

Author: HejdaJakub

apps/admin-gui/src/app/vos/pages/group-detail-page/group-subgroups/group-subgroups.component.html

@@ -53,6 +53,7 @@ <h1 class="page-subtitle">{{'GROUP_DETAIL.SUBGROUPS.TITLE' | translate}}</h1>
         [groups]="groups"
         (moveGroup)="onMoveGroup($event)"
         (refreshTable)="refreshTable()"
+        [displayedColumns]="['nameWithId', 'description', 'menu']"
         [hideCheckbox]="!deleteAuth"
         [filterValue]="filterValue"
         [selection]="selected">

apps/admin-gui/src/app/vos/pages/member-detail-page/member-groups/member-groups.component.html

@@ -25,20 +25,45 @@ <h1 class="page-subtitle">{{'MEMBER_DETAIL.GROUPS.TITLE' | translate}}</h1>
   (filter)="applyFilter($event)"
   [placeholder]="'SHARED_LIB.PERUN.COMPONENTS.RESOURCES_LIST.TABLE_SEARCH'">
 </perun-web-apps-debounce-filter>
+<label class="slide-label" (click)="labelToggle()">
+  {{'MEMBER_DETAIL.GROUPS.TREE_VIEW' | translate}}
+</label>
+<mat-slide-toggle #toggle (change)="selection.clear()" [(ngModel)]="showGroupList" class="me-1">
+</mat-slide-toggle>
+<label class="slide-label" (click)="labelToggle()">
+  {{'MEMBER_DETAIL.GROUPS.LIST_VIEW' | translate}}
+</label>
 <ng-template #spinner>
   <perun-web-apps-loading-table></perun-web-apps-loading-table>
 </ng-template>
 <div class="position-relative">
-  <perun-web-apps-groups-list
-    *perunWebAppsLoader="loading; indicator: spinner"
-    (refreshTable)="refreshTable()"
-    [displayedColumns]="['select', 'id', 'name', 'description', 'expiration', 'groupStatus']"
-    [memberId]="memberId"
-    [disableRouting]="!routeAuth"
-    [groups]="groups"
-    [filter]="filterValue"
-    [memberGroupStatus]="member?.groupStatus"
-    [selection]="selection"
-    [tableId]="tableId">
-  </perun-web-apps-groups-list>
+  <div *ngIf="!showGroupList">
+    <perun-web-apps-groups-tree
+      *perunWebAppsLoader="loading; indicator: spinner"
+      (refreshTable)="refreshTable()"
+      (changeExpiration)="changeExpiration($event)"
+      [expandAll]="filtering"
+      [disableRouting]="!routeAuth"
+      [groups]="groups"
+      [selection]="selection"
+      [filterValue]="filterValue"
+      [displayedColumns]="['nameWithId', 'description', 'expiration', 'status']"
+      theme="member-theme">
+    </perun-web-apps-groups-tree>
+  </div>
+  <div [hidden]="!showGroupList">
+    <perun-web-apps-groups-list
+      #list
+      *perunWebAppsLoader="loading; indicator: spinner"
+      (refreshTable)="refreshTable()"
+      [displayedColumns]="['select', 'id', 'name', 'description', 'expiration', 'groupStatus']"
+      [memberId]="memberId"
+      [disableRouting]="!routeAuth"
+      [groups]="groups"
+      [filter]="filterValue"
+      [memberGroupStatus]="member?.groupStatus"
+      [selection]="selection"
+      [tableId]="tableId">
+    </perun-web-apps-groups-list>
+  </div>
 </div>

apps/admin-gui/src/app/vos/pages/member-detail-page/member-groups/member-groups.component.scss

@@ -0,0 +1,4 @@
+.slide-label {
+  display: inline;
+  cursor: pointer;
+}

apps/admin-gui/src/app/vos/pages/member-detail-page/member-groups/member-groups.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostBinding, OnInit } from '@angular/core';
+import { Component, HostBinding, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import {
   Group,
@@ -17,6 +17,9 @@ import { GuiAuthResolver } from '@perun-web-apps/perun/services';
 import { Urns } from '@perun-web-apps/perun/urns';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { GroupsListComponent } from '@perun-web-apps/perun/components';
+import { GroupWithStatus } from '@perun-web-apps/perun/models';
 
 @Component({
   selector: 'app-member-groups',
@@ -28,14 +31,18 @@ export class MemberGroupsComponent implements OnInit {
 
   // used for router animation
   @HostBinding('class.router-component') true;
+  @ViewChild('toggle', { static: true }) toggle: MatSlideToggle;
+  @ViewChild('list') private list: GroupsListComponent;
 
   groups: Group[] = [];
   memberId: number;
   member: Member;
   allGroups: Group[];
   loading: boolean;
   filterValue = '';
+  filtering = false;
   tableId = TABLE_MEMBER_DETAIL_GROUPS;
+  showGroupList = false;
   selection = new SelectionModel<Group>(true, []);
   addAuth: boolean;
   routeAuth: boolean;
@@ -67,6 +74,16 @@ export class MemberGroupsComponent implements OnInit {
         this.groupsService.getAllGroups(this.member.voId).subscribe((allGroups) => {
           this.allGroups = allGroups;
           this.refreshTable();
+          if (localStorage.getItem('preferedValue') === 'list') {
+            this.toggle.toggle();
+            this.showGroupList = true;
+          }
+
+          this.toggle.change.subscribe(() => {
+            const value = this.toggle.checked ? 'list' : 'tree';
+            localStorage.setItem('preferedValue', value);
+            this.refreshTable();
+          });
         });
       });
     });
@@ -80,15 +97,19 @@ export class MemberGroupsComponent implements OnInit {
         Urns.MEMBER_GROUP_STATUS,
         Urns.MEMBER_GROUP_STATUS_INDIRECT,
       ])
-      .subscribe(
-        (groups) => {
+      .subscribe({
+        next: (groups) => {
           this.selection.clear();
           this.groups = groups;
           this.setAuthRights();
           this.loading = false;
         },
-        () => (this.loading = false)
-      );
+        error: () => (this.loading = false),
+      });
+  }
+
+  changeExpiration(group: GroupWithStatus): void {
+    this.list.changeExpiration(group);
   }
 
   setAuthRights(): void {
@@ -148,5 +169,11 @@ export class MemberGroupsComponent implements OnInit {
 
   applyFilter(filterValue: string): void {
     this.filterValue = filterValue;
+    this.filtering = filterValue !== '';
+  }
+
+  labelToggle(): void {
+    this.showGroupList = !this.showGroupList;
+    this.refreshTable();
   }
 }

apps/admin-gui/src/app/vos/pages/vo-detail-page/vo-groups/vo-groups.component.html

@@ -42,6 +42,7 @@ <h1 class="page-subtitle">{{'VO_DETAIL.GROUPS.TITLE' | translate}}</h1>
         *perunWebAppsLoader="loading$ | async; indicator: spinner"
         (moveGroup)="onMoveGroup($event)"
         (refreshTable)="refresh()"
+        [displayedColumns]="['nameWithId', 'description', 'menu']"
         [expandAll]="filtering"
         [disableRouting]="!routeAuth"
         [groups]="groups"

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

@@ -832,7 +832,9 @@
       "TITLE": "Member groups",
       "ADD": "Add",
       "REMOVE": "Remove",
-      "REMOVE_PERMISSION_HINT": "You don't have permission to remove some of the selected groups."
+      "REMOVE_PERMISSION_HINT": "You don't have permission to remove some of the selected groups.",
+      "LIST_VIEW": "List view",
+      "TREE_VIEW": "Tree view"
     },
     "APPLICATIONS": {
       "TITLE": "Application",

libs/perun/components/src/lib/groups-list/groups-list.component.html

@@ -160,16 +160,18 @@
           {{'SHARED_LIB.PERUN.COMPONENTS.GROUPS_LIST.TABLE_GROUP_EXPIRATION' | translate}}
         </th>
         <td *matCellDef="let group" class="wrap-content" mat-cell>
-          {{group | groupExpiration | parseDate}}
-          <button
-            *ngIf="group | canManageGroup"
-            (click)="changeExpiration(group)"
-            (mouseenter)="disabledRouting = true"
-            (mouseleave)="disabledRouting = disableRouting"
-            matTooltip="{{'SHARED_LIB.PERUN.COMPONENTS.GROUPS_LIST.CHANGE_EXPIRATION' | translate}}"
-            mat-icon-button>
-            <mat-icon>edit</mat-icon>
-          </button>
+          <span class="align-elements">
+            {{group | groupExpiration | parseDate}}
+            <button
+              *ngIf="group | canManageGroup"
+              (click)="changeExpiration(group)"
+              (mouseenter)="disabledRouting = true"
+              (mouseleave)="disabledRouting = disableRouting"
+              matTooltip="{{'SHARED_LIB.PERUN.COMPONENTS.GROUPS_LIST.CHANGE_EXPIRATION' | translate}}"
+              mat-icon-button>
+              <mat-icon>edit</mat-icon>
+            </button>
+          </span>
         </td>
       </ng-container>
       <ng-container matColumnDef="menu">

libs/perun/components/src/lib/groups-list/groups-list.component.ts

@@ -5,12 +5,7 @@ import {
   EditFacilityResourceGroupVoDialogOptions,
   GroupSyncDetailDialogComponent,
 } from '@perun-web-apps/perun/dialogs';
-import {
-  Group,
-  Member,
-  PaginatedRichGroups,
-  VosManagerService,
-} from '@perun-web-apps/perun/openapi';
+import { Group, PaginatedRichGroups, VosManagerService } from '@perun-web-apps/perun/openapi';
 import { GuiAuthResolver, TableCheckbox } from '@perun-web-apps/perun/services';
 import {
   customDataSourceFilterPredicate,
@@ -259,8 +254,8 @@ export class GroupsListComponent {
     };
 
     const dialogRef = this.dialog.open(ChangeGroupExpirationDialogComponent, config);
-    dialogRef.afterClosed().subscribe((success: { success: boolean; member: Member }) => {
-      if (success.success) {
+    dialogRef.afterClosed().subscribe((success) => {
+      if (success) {
         this.refreshTable.emit();
       }
     });

libs/perun/components/src/lib/groups-tree/groups-tree.component.html

@@ -37,21 +37,49 @@
               {{treeControl.isExpanded(group) ? 'expand_more' : 'chevron_right'}}
             </mat-icon>
           </button>
-          <div class="w-50">
+          <div *ngIf="displayedColumns.includes('nameWithId')" class="w-50">
             <span attr.data-cy="{{group.name}}" class="me-2">
               {{group.name}}
             </span>
             <span *ngIf="authResolver.isPerunAdminOrObserver()" class="text-muted">
               #{{group.id}}
             </span>
           </div>
-          <div class="w-50 text-muted description-text" #rootDescription>
+          <div
+            *ngIf="displayedColumns.includes('description')"
+            class="w-50 text-muted description-text"
+            #rootDescription>
             <span matTooltip="{{group.description}}" matTooltipPosition="before">
               {{group.description}}
             </span>
           </div>
         </a>
-        <div class="group-buttons">
+        <div *ngIf="displayedColumns.includes('expiration')" class="me-4 align-elements">
+          {{group | groupExpiration | parseDate}}
+          <button
+            *ngIf="group | canManageGroup"
+            (click)="changeExpiration.emit(group)"
+            (mouseenter)="disabledRouting = true"
+            (mouseleave)="disabledRouting = disableRouting"
+            matTooltip="{{'SHARED_LIB.PERUN.COMPONENTS.GROUPS_LIST.CHANGE_EXPIRATION' | translate}}"
+            mat-icon-button>
+            <mat-icon>edit</mat-icon>
+          </button>
+        </div>
+        <div *ngIf="displayedColumns.includes('status')" class="w-25">
+          <i
+            *ngIf="{status: group.attributes | findAttribute: 'groupStatus'} as groupStatus"
+            (click)="$event.stopPropagation()"
+            class="material-icons status-change {{groupStatus.status | groupStatusIconColor}} cursor-default me-4"
+            matTooltip="{{groupStatus.status}}"
+            matTooltipClass="status-tooltip"
+            matTooltipPosition="left">
+            <span>
+              {{groupStatus.status | memberStatusIcon}}
+            </span>
+          </i>
+        </div>
+        <div *ngIf="displayedColumns.includes('menu')" class="group-buttons">
           <perun-web-apps-group-menu
             [disabled]="group.fullName === 'members'"
             (moveGroup)="onMoveGroup(group)"

libs/perun/components/src/lib/groups-tree/groups-tree.component.ts

@@ -12,7 +12,7 @@ import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { SelectionModel } from '@angular/cdk/collections';
 import { RichGroup, Vo } from '@perun-web-apps/perun/openapi';
-import { GroupFlatNode, TreeGroup } from '@perun-web-apps/perun/models';
+import { GroupFlatNode, GroupWithStatus, TreeGroup } from '@perun-web-apps/perun/models';
 import { MatDialog } from '@angular/material/dialog';
 import { findParent, getDefaultDialogConfig } from '@perun-web-apps/perun/utils';
 import { GroupSyncDetailDialogComponent } from '@perun-web-apps/perun/dialogs';
@@ -37,15 +37,18 @@ export class GroupsTreeComponent implements OnChanges {
   @Input() theme = 'group-theme';
   @Output() moveGroup = new EventEmitter<GroupFlatNode>();
   @Output() refreshTable = new EventEmitter<void>();
+  @Output() changeExpiration = new EventEmitter<GroupWithStatus>();
   @Input() groups: RichGroup[];
   @Input() filterValue: string;
   @Input() expandAll = false;
   @Input() disableRouting = false;
   @Input() selection = new SelectionModel<GroupFlatNode>(true, []);
   @Input() hideCheckbox = false;
   @Input() vo: Vo;
+  @Input() displayedColumns = ['nameWithId', 'description', 'menu', 'expiration', 'status'];
   @ViewChild('scrollViewport', { static: false }) scrollViewport: CdkVirtualScrollViewport;
 
+  disabledRouting = false;
   displayButtons = window.innerWidth > 600;
 
   removeAuth: boolean;