V9 Upgrade community subcommunities/collections tree navigation

src/app/core/data/community-data.service.ts

@@ -54,7 +54,7 @@ export class CommunityDataService extends ComColDataService<Community> {
   }
 
   protected getFindByParentHref(parentUUID: string): Observable<string> {
-    return this.halService.getEndpoint(this.linkPath).pipe(
+    return this.getEndpoint().pipe(
       switchMap((communityEndpointHref: string) =>
         this.halService.getEndpoint('subcommunities', `${communityEndpointHref}/${parentUUID}`)),
     );

src/themes/tamu/app/community-list-page/community-list/community-list.component.html

@@ -1,36 +1,41 @@
 <!-- TAMU Customization - expand/collapse all -->
-<!-- <ds-themed-loading *ngIf="(dataSource.loading$ | async) && !loadingNode" class="ds-themed-loading"></ds-themed-loading> -->
+<!-- @if ((dataSource.loading$ | async) && !loadingNode) {
+  <ds-loading class="ds-themed-loading"></ds-loading>
+} -->
 <div class="row mb-1" *ngIf="enableExpandCollapseAll">
   <div class="col-3">
-    <button (click)="expandAll()" [disabled]="(dataSource.loading$ | async) || (expanding | async)" class="btn btn-outline-primary btn-sm mr-2 mb-2" role="button">
+    <button (click)="expandAll()" [disabled]="(dataSource.loading$ | async) || (isExpanding | async)" class="btn btn-outline-primary btn-sm mr-2 mb-2" role="button">
       <span>{{ 'communityList.expandAll' | translate }}</span>
     </button>
-    <button (click)="collapseAll()" [disabled]="(dataSource.loading$ | async) || (expanding | async)" class="btn btn-outline-primary btn-sm mr-2 mb-2" role="button">
+    <button (click)="collapseAll()" [disabled]="(dataSource.loading$ | async) || (isExpanding | async)" class="btn btn-outline-primary btn-sm mr-2 mb-2" role="button">
       <span>{{ 'communityList.collapseAll' | translate }}</span>
     </button>
   </div>
   <div class="col-9">
-    <ds-themed-loading *ngIf="(dataSource.loading$ | async) || (expanding | async)" class="ds-themed-loading" [showMessage]="false"></ds-themed-loading>
+    @if ((dataSource.loading$ | async) && !loadingNode) {
+      <ds-loading class="ds-themed-loading"></ds-loading>
+    }
   </div>
 </div>
 <!-- End TAMU Customization - expand/collapse all -->
 <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl" [trackBy]="trackBy">
   <!-- This is the tree node template for show more node -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding
-                 class="example-tree-node show-more-node">
+    class="example-tree-node show-more-node">
     <div class="btn-group">
-      <button type="button" class="btn btn-default" cdkTreeNodeToggle>
-        <span class="fa fa-chevron-right invisible" aria-hidden="true"></span>
-      </button>
-      <div class="align-middle pt-2">
-        <button #viewMore *ngIf="!(dataSource.loading$ | async)" (click)="getNextPage(node)"
-           class="btn btn-outline-primary btn-sm" role="button">
-           <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
-        </button>
-        <!-- TAMU Customization - show loading animation while not expanding -->
-        <!-- <ds-themed-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-themed-loading> -->
-        <ds-themed-loading *ngIf="node===loadingNode && (dataSource.loading$ | async) && !(expanding | async)" class="ds-themed-loading"></ds-themed-loading>
-        <!-- End TAMU Customization - show loading animation while not expanding -->
+      <span aria-hidden="true" class="btn btn-default invisible" cdkTreeNodeToggle>
+        <span class="fa fa-chevron-right"></span>
+      </span>
+      <div class="align-middle my-auto">
+        @if ((dataSource.loading$ | async) !== true) {
+          <button (click)="getNextPage(node)"
+            class="btn btn-outline-primary btn-sm" role="button" tabindex="0">
+            <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
+          </button>
+        }
+        @if (node===loadingNode && dataSource.loading$ | async) {
+          <ds-loading class="ds-themed-loading"></ds-loading>
+        }
       </div>
     </div>
     <div class="text-muted" cdkTreeNodePadding>
@@ -40,77 +45,85 @@
   </cdk-tree-node>
   <!-- This is the tree node template for expandable nodes (coms and subcoms with children) -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
-                 class="example-tree-node expandable-node">
+    class="example-tree-node expandable-node">
     <div class="btn-group">
-      <button #toggle type="button" class="btn btn-default" cdkTreeNodeToggle
-              [title]="'toggle ' + dsoNameService.getName(node.payload)"
-              [attr.aria-label]="'toggle ' + dsoNameService.getName(node.payload)"
-              (click)="toggleExpanded(node)"
-              [ngClass]="(hasChild(null, node)| async) ? 'visible' : 'invisible'"
-              [attr.data-test]="(hasChild(null, node)| async) ? 'expand-button' : ''">
-        <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
-              aria-hidden="true"></span>
-      </button>
+      @if (hasChild(null, node) | async) {
+        <button type="button" class="btn btn-default btn-transparent" cdkTreeNodeToggle
+          [attr.aria-label]="(node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) }"
+          (click)="toggleExpanded(node)"
+          (keyup.enter)="toggleExpanded(node)"
+          (keyup.space)="toggleExpanded(node)"
+          data-test="expand-button"
+          role="button"
+          tabindex="0">
+          <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
+          aria-hidden="true"></span>
+          <span class="sr-only">{{ (node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) } }}</span>
+        </button>
+      }
+      <!--Don't render the button when non-expandable otherwise it's still accessible, instead render this placeholder-->
+      @if ((hasChild(null, node) | async) !== true) {
+        <span aria-hidden="true" class="btn btn-default invisible">
+          <span class="fa fa-chevron-right"></span>
+        </span>
+      }
       <div class="d-flex flex-row">
-        <span class="align-middle pt-2 lead">
-          <a [routerLink]="node.route" class="lead">
-            {{ dsoNameService.getName(node.payload) }}
-          </a>
-          <span class="pr-2">&nbsp;</span>
-          <span *ngIf="node.payload.archivedItemsCount >= 0" class="badge badge-pill badge-secondary align-top archived-items-lead">{{node.payload.archivedItemsCount}}</span>
+        <span class="d-flex align-middle my-auto">
+          <a [routerLink]="node.route" class="lead" role="link" tabindex="0">{{ dsoNameService.getName(node.payload) }}</a>
+          <span class="pe-2">&nbsp;</span>
+          @if (node.payload.archivedItemsCount >= 0) {
+            <span class="badge rounded-pill bg-secondary align-top archived-items-lead my-auto ps-2 pe-2">{{node.payload.archivedItemsCount}}</span>
+          }
         </span>
       </div>
     </div>
     <ds-truncatable [id]="node.id">
       <div class="text-muted" cdkTreeNodePadding>
-        <div class="d-flex" *ngIf="node.payload.shortDescription">
-          <button type="button" class="btn btn-default invisible">
-            <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
-                  aria-hidden="true"></span>
-          </button>
-          <ds-truncatable-part [id]="node.id" [minLines]="3">
-            <span>{{node.payload.shortDescription}}</span>
-          </ds-truncatable-part>
-        </div>
+        @if (node.payload.shortDescription) {
+          <div class="d-flex">
+            <span aria-hidden="true" class="btn btn-default invisible">
+              <span class="fa fa-chevron-right"></span>
+            </span>
+            <ds-truncatable-part [id]="node.id" [minLines]="3">
+              <span>{{node.payload.shortDescription}}</span>
+            </ds-truncatable-part>
+          </div>
+        }
       </div>
     </ds-truncatable>
-    <!-- TAMU Customization - show loading animation while not expanding -->
-    <!-- <div class="d-flex" *ngIf="node===loadingNode && dataSource.loading$ | async"
-         cdkTreeNodePadding> -->
-    <div class="d-flex" *ngIf="node===loadingNode && (dataSource.loading$ | async) && !(expanding | async)"
-         cdkTreeNodePadding>
-    <!-- End TAMU Customization - show loading animation while not expanding -->
-      <button type="button" class="btn btn-default invisible">
-        <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
-              aria-hidden="true"></span>
-      </button>
-      <ds-themed-loading class="ds-themed-loading"></ds-themed-loading>
-    </div>
+    @if (node===loadingNode && dataSource.loading$ | async) {
+      <div class="d-flex"
+        cdkTreeNodePadding>
+        <span aria-hidden="true" class="btn btn-default invisible">
+          <span class="fa fa-chevron-right"></span>
+        </span>
+        <ds-loading class="ds-themed-loading"></ds-loading>
+      </div>
+    }
   </cdk-tree-node>
   <!-- This is the tree node template for leaf nodes (collections and (sub)coms without children) -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: !(hasChild && isShowMore)" cdkTreeNodePadding
-                 class="example-tree-node childless-node">
+    class="example-tree-node childless-node">
     <div class="btn-group">
-      <button type="button" class="btn btn-default" cdkTreeNodeToggle>
-        <span class="fa fa-chevron-right invisible" aria-hidden="true"></span>
-      </button>
-      <h6 class="align-middle pt-2">
-        <a [routerLink]="node.route" class="lead">
-          {{ dsoNameService.getName(node.payload) }}
-        </a>
+      <span aria-hidden="true" class="btn btn-default invisible" cdkTreeNodeToggle>
+        <span class="fa fa-chevron-right"></span>
+      </span>
+      <h6 class="align-middle my-auto">
+        <a [routerLink]="node.route" class="lead" role="link" tabindex="0">{{ dsoNameService.getName(node.payload) }}</a>
       </h6>
     </div>
     <ds-truncatable [id]="node.id">
       <div class="text-muted" cdkTreeNodePadding>
-        <div class="d-flex" *ngIf="node.payload.shortDescription">
-          <button type="button" class="btn btn-default invisible">
-            <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
-                  aria-hidden="true"></span>
-          </button>
-          <ds-truncatable-part [id]="node.id" [minLines]="3">
-            <span>{{node.payload.shortDescription}}</span>
-          </ds-truncatable-part>
-        </div>
+        @if (node.payload.shortDescription) {
+          <div class="d-flex">
+            <span aria-hidden="true" class="btn btn-default invisible">
+              <span class="fa fa-chevron-right"></span>
+            </span>
+            <ds-truncatable-part [id]="node.id" [minLines]="3">
+              <span>{{node.payload.shortDescription}}</span>
+            </ds-truncatable-part>
+          </div>
+        }
       </div>
     </ds-truncatable>
   </cdk-tree-node>

src/themes/tamu/app/community-list-page/community-list/community-list.component.ts

@@ -1,53 +1,74 @@
-import { Component, Input, OnInit, QueryList, ViewChildren } from '@angular/core';
-import { BehaviorSubject, debounceTime, filter, take } from 'rxjs';
+import { CdkTreeModule } from '@angular/cdk/tree';
+import { AsyncPipe } from '@angular/common';
+import { Component, Input, QueryList, ViewChildren } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { BehaviorSubject, debounceTime, distinctUntilChanged, take } from 'rxjs';
+
 import { CommunityListComponent as BaseComponent } from '../../../../../app/community-list-page/community-list/community-list.component';
+import { ThemedLoadingComponent } from '../../../../../app/shared/loading/themed-loading.component';
+import { TruncatableComponent } from '../../../../../app/shared/truncatable/truncatable.component';
+import { TruncatablePartComponent } from '../../../../../app/shared/truncatable/truncatable-part/truncatable-part.component';
 
-/**
- * A tree-structured list of nodes representing the communities, their subCommunities and collections.
- * Initially only the page-restricted top communities are shown.
- * Each node can be expanded to show its children and all children are also page-limited.
- * More pages of a page-limited result can be shown by pressing a show more node/link.
- * Which nodes were expanded is kept in the store, so this persists across pages.
- */
 @Component({
   selector: 'ds-community-list',
-  // styleUrls: ['./community-list.component.scss'],
+  styleUrls: ['./community-list.component.scss'],
+  // styleUrls: ['../../../../../app/community-list-page/community-list/community-list.component.scss'],
   templateUrl: './community-list.component.html',
-  // templateUrl: '../../../../../app/community-list-page/community-list/community-list.component.html'
+  // templateUrl: '../../../../../app/community-list-page/community-list/community-list.component.html',
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    CdkTreeModule,
+    RouterLink,
+    ThemedLoadingComponent,
+    TranslateModule,
+    TruncatableComponent,
+    TruncatablePartComponent,
+  ],
 })
-export class CommunityListComponent extends BaseComponent implements OnInit {
+export class CommunityListComponent extends BaseComponent {
 
   @Input() scopeId!: string;
 
   @Input() enableExpandCollapseAll = false;
 
   @ViewChildren('toggle') toggle!: QueryList<any>;
 
-  expanding: BehaviorSubject<boolean>;
+  isExpanding: BehaviorSubject<boolean>;
 
   ngOnInit(): void {
     this.paginationConfig.scopeID = this.scopeId;
-    this.expanding = new BehaviorSubject<boolean>(false);
+    this.isExpanding = new BehaviorSubject<boolean>(false);
     super.ngOnInit();
   }
 
   expandAll(): void {
-    this.expanding.next(true);
+    let anyExpanded = false;
+    this.isExpanding.next(true);
 
     const expandable = this.toggle.filter((node: any) => {
       return !!node.nativeElement.querySelector('.fa-chevron-right');
     });
 
     this.dataSource.loading$.pipe(
+      distinctUntilChanged(),
+      // allow 100 milliseconds per expanded subcommunity
       debounceTime(expandable.length * 100),
-      filter((loading: boolean) => !loading),
       take(1)
     ).subscribe(() => {
-      this.expanding.next(false);
+      if (anyExpanded) {
+        this.expandAll();
+      } else {
+        this.isExpanding.next(false);
+      }
     });
 
     expandable.forEach((node: any) => {
       node.nativeElement.click();
+      if (!anyExpanded) {
+        anyExpanded = true;
+      }
     });
   }
 
@@ -60,4 +81,3 @@ export class CommunityListComponent extends BaseComponent implements OnInit {
   }
 
 }
-