V9 Port image gallery theme customizations

src/themes/image-gallery/app/collection-page/collection-page.component.html

@@ -1,97 +1,107 @@
 <div class="container">
-    <div class="collection-page"
-         *ngVar="(collectionRD$ | async) as collectionRD">
-              <div *ngIf="collectionRD?.hasSucceeded" @fadeInOut>
-                      <div *ngIf="collectionRD?.payload as collection">
-              <ds-view-tracker [object]="collection"></ds-view-tracker>
-              <div class="d-flex flex-row border-bottom mb-4 pb-4">
-                <header class="comcol-header mr-auto">
-                  <!-- Collection Name -->
-                  <ds-comcol-page-header
-                          [name]="dsoNameService.getName(collection)">
-                  </ds-comcol-page-header>
-                  <!-- Collection logo -->
+  <div class="collection-page"
+    *ngVar="(collectionRD$ | async) as collectionRD">
+    @if (collectionRD?.hasSucceeded) {
+      <div @fadeInOut>
+        @if (collectionRD?.payload; as collection) {
+          <div>
+            <div class="d-flex flex-row border-bottom mb-4 pb-4">
+              <header class="comcol-header me-auto">
+                <!-- Collection Name -->
+                <ds-comcol-page-header
+                  [name]="dsoNameService.getName(collection)">
+                </ds-comcol-page-header>
+                <!-- Collection logo -->
+                @if (logoRD$) {
                   <!-- TAMU Customization - wrap text around logo -->
-                  <!--
-                  <ds-comcol-page-logo *ngIf="logoRD$"
-                                   [logo]="(logoRD$ | async)?.payload"
-                                   [alternateText]="'Collection Logo'">
-                  </ds-comcol-page-logo>
-                  -->
-                  <ds-comcol-page-logo *ngIf="logoRD$" class="float-left mr-4"
-                                   [logo]="(logoRD$ | async)?.payload"
-                                   [alternateText]="'Collection Logo'">
+                  <!-- <ds-comcol-page-logo
+                    [logo]="(logoRD$ | async)?.payload"
+                    [alternateText]="'collection.logo' | translate">
+                  </ds-comcol-page-logo> -->
+                  <ds-comcol-page-logo class="float-left mr-4"
+                    [logo]="(logoRD$ | async)?.payload"
+                    [alternateText]="'collection.logo' | translate">
                   </ds-comcol-page-logo>
                   <!-- End TAMU Customization - wrap text around logo -->
-
-                  <!-- Handle -->
-                  <ds-themed-comcol-page-handle
-                          [content]="collection.handle"
-                          [title]="'collection.page.handle'" >
-                  </ds-themed-comcol-page-handle>
-                  <!-- Introductory text -->
-                  <ds-comcol-page-content
-                          [content]="collection.introductoryText"
-                          [hasInnerHtml]="true">
-                  </ds-comcol-page-content>
-                  <!-- News -->
-                  <ds-comcol-page-content
-                          [content]="collection.sidebarText"
-                          [hasInnerHtml]="true"
-                          [title]="'collection.page.news'">
-                  </ds-comcol-page-content>
-                </header>
-                <ds-dso-edit-menu></ds-dso-edit-menu>
-              </div>
-              <section class="comcol-page-browse-section">
+                }
+                <!-- Handle -->
+                <ds-comcol-page-handle
+                  [content]="collection.handle"
+                  [title]="'collection.page.handle'">
+                </ds-comcol-page-handle>
+                <!-- Introductory text -->
+                <ds-comcol-page-content
+                  [content]="collection.introductoryText"
+                  [hasInnerHtml]="true">
+                </ds-comcol-page-content>
+                <!-- News -->
+                <ds-comcol-page-content
+                  [content]="collection.sidebarText"
+                  [hasInnerHtml]="true"
+                  [title]="'collection.page.news'">
+                </ds-comcol-page-content>
+              </header>
+              <ds-dso-edit-menu></ds-dso-edit-menu>
+            </div>
+            <section class="comcol-page-browse-section">
               <!-- Browse-By Links -->
-              <ds-themed-comcol-page-browse-by
-                      [id]="collection.id"
-                      [contentType]="collection.type">
-              </ds-themed-comcol-page-browse-by>
+              <ds-comcol-page-browse-by
+                [id]="collection.id"
+                [contentType]="collection.type">
+              </ds-comcol-page-browse-by>
 
-            <ng-container *ngVar="(itemRD$ | async) as itemRD">
-                <div class="mt-4" *ngIf="itemRD?.hasSucceeded" @fadeIn>
-                    <!-- TAMU Customization - grid view -->
-                    <!--
-                    <h3 class="sr-only">{{'collection.page.browse.recent.head' | translate}}</h3>
-                    <ds-viewable-collection
-                            [config]="paginationConfig"
-                            [sortConfig]="sortConfig"
-                            [objects]="itemRD"
-                            [hideGear]="true">
-                    </ds-viewable-collection>
-                    -->
+              <!-- TAMU Customization - community collection tree browse -->
+              <ds-community-list [scopeId]="collection.id" [enableExpandCollapseAll]="true"></ds-community-list>
+              <!-- End TAMU Customization - community collection tree browse -->
+
+              <!-- TAMU Customization - recent submissions grid view -->
+              <ng-container *ngVar="(itemRD$ | async) as itemRD">
+                @if (itemRD?.hasSucceeded) {
+                  <div class="mt-4" @fadeIn>
                     <h3>{{'collection.page.browse.recent.head' | translate}}</h3>
                     <ds-object-grid
                         [config]="paginationConfig"
                         [sortConfig]="sortConfig"
                         [objects]="itemRD"
-                        [hideGear]="false">
+                        [hideGear]="false"
+                        [context]="'ItemPage'">
                     </ds-object-grid>
-                    <!-- End TAMU Customization - grid view -->
-                </div>
-                <ds-error *ngIf="itemRD?.hasFailed"
-                          message="{{'error.recent-submissions' | translate}}"></ds-error>
-                <ds-themed-loading *ngIf="!itemRD || itemRD.isLoading"
-                            message="{{'loading.recent-submissions' | translate}}"></ds-themed-loading>
-                <div *ngIf="!itemRD?.isLoading && itemRD?.payload?.page.length === 0" class="alert alert-info w-100" role="alert">
-                        {{'collection.page.browse.recent.empty' | translate}}
-                </div>
-            </ng-container>
+                  </div>
+                }
+                @if (itemRD?.hasFailed) {
+                  <ds-error *ngIf="itemRD?.hasFailed"message="{{'error.recent-submissions' | translate}}"></ds-error>
+                }
+                @if (!itemRD || itemRD.isLoading) {
+                  <ds-loading message="{{'loading.recent-submissions' | translate}}"></ds-loading>
+                }
+                @if (!itemRD?.isLoading && itemRD?.payload?.page.length === 0) {
+                  <div class="alert alert-info w-100" role="alert">{{'collection.page.browse.recent.empty' | translate}}</div>
+                }
+              </ng-container>
+              <!-- End TAMU Customization - recent submissions grid view -->
+
+              <router-outlet></router-outlet>
             </section>
-            <footer *ngIf="collection.copyrightText" class="border-top my-5 pt-4">
-          <!-- Copyright -->
-          <ds-comcol-page-content
-                      [content]="collection.copyrightText"
-                      [hasInnerHtml]="true">
-          </ds-comcol-page-content>
-        </footer>
+            @if (collection.copyrightText) {
+              <footer class="border-top my-5 pt-4">
+                <!-- Copyright -->
+                <ds-comcol-page-content
+                  [content]="collection.copyrightText"
+                  [hasInnerHtml]="true">
+                </ds-comcol-page-content>
+              </footer>
+            }
+          </div>
+        }
       </div>
-    </div>
-        <ds-error *ngIf="collectionRD?.hasFailed"
-            message="{{'error.collection' | translate}}"></ds-error>
-        <ds-themed-loading *ngIf="collectionRD?.isLoading"
-            message="{{'loading.collection' | translate}}"></ds-themed-loading>
+    }
+    @if (collectionRD?.hasFailed) {
+      <ds-error
+      message="{{'error.collection' | translate}}"></ds-error>
+    }
+    @if (collectionRD?.isLoading) {
+      <ds-loading
+      message="{{'loading.collection' | translate}}"></ds-loading>
+    }
   </div>
 </div>

src/themes/image-gallery/app/collection-page/collection-page.component.ts

@@ -1,22 +1,146 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  OnDestroy
+} from '@angular/core';
+import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { BehaviorSubject, combineLatest, map, Observable, startWith, Subject, switchMap } from 'rxjs';
 import { CollectionPageComponent as BaseComponent } from '../../../../app/collection-page/collection-page.component';
+import { AuthService } from '../../../../app/core/auth/auth.service';
+import { DSONameService } from '../../../../app/core/breadcrumbs/dso-name.service';
+import { getBrowseLinksToFollow } from '../../../../app/core/browse/browse.service';
+import { SortDirection, SortOptions } from '../../../../app/core/cache/models/sort-options.model';
+import { AuthorizationDataService } from '../../../../app/core/data/feature-authorization/authorization-data.service';
+import { PaginatedList } from '../../../../app/core/data/paginated-list.model';
+import { RemoteData } from '../../../../app/core/data/remote-data';
+import { PaginationService } from '../../../../app/core/pagination/pagination.service';
+import { DSpaceObjectType } from '../../../../app/core/shared/dspace-object-type.model';
+import { Item } from '../../../../app/core/shared/item.model';
+import { getFirstSucceededRemoteData, toDSpaceObjectListRD } from '../../../../app/core/shared/operators';
+import { SearchService } from '../../../../app/core/shared/search/search.service';
 import { fadeIn, fadeInOut } from '../../../../app/shared/animations/fade';
+import { ThemedComcolPageBrowseByComponent } from '../../../../app/shared/comcol/comcol-page-browse-by/themed-comcol-page-browse-by.component';
+import { ThemedComcolPageContentComponent } from '../../../../app/shared/comcol/comcol-page-content/themed-comcol-page-content.component';
+import { ThemedComcolPageHandleComponent } from '../../../../app/shared/comcol/comcol-page-handle/themed-comcol-page-handle.component';
+import { ComcolPageHeaderComponent } from '../../../../app/shared/comcol/comcol-page-header/comcol-page-header.component';
+import { ComcolPageLogoComponent } from '../../../../app/shared/comcol/comcol-page-logo/comcol-page-logo.component';
+import { DsoEditMenuComponent } from '../../../../app/shared/dso-page/dso-edit-menu/dso-edit-menu.component';
+import { ErrorComponent } from '../../../../app/shared/error/error.component';
+import { ThemedLoadingComponent } from '../../../../app/shared/loading/themed-loading.component';
+import { ObjectGridComponent } from '../../../../app/shared/object-grid/object-grid.component';
+import { PaginationComponentOptions } from '../../../../app/shared/pagination/pagination-component-options.model';
+import { PaginatedSearchOptions } from '../../../../app/shared/search/models/paginated-search-options.model';
+import { VarDirective } from '../../../../app/shared/utils/var.directive';
+import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface';
+import { CommunityListComponent } from '../community-list-page/community-list/community-list.component';
 
 @Component({
   selector: 'ds-collection-page',
-  templateUrl: './collection-page.component.html',
+  // styleUrls: ['../../../../app/collection-page/collection-page.component.scss'],
+  styleUrls: ['./collection-page.component.scss'],
   // templateUrl: '../../../../app/collection-page/collection-page.component.html',
-  // styleUrls: ['./collection-page.component.scss'],
-  styleUrls: ['../../../../app/collection-page/collection-page.component.scss'],
+  templateUrl: './collection-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
     fadeIn,
     fadeInOut
-  ]
+  ],
+  imports: [
+    AsyncPipe,
+    ComcolPageHeaderComponent,
+    ComcolPageLogoComponent,
+    CommunityListComponent,
+    DsoEditMenuComponent,
+    ErrorComponent,
+    ObjectGridComponent,
+    RouterOutlet,
+    ThemedComcolPageBrowseByComponent,
+    ThemedComcolPageContentComponent,
+    ThemedComcolPageHandleComponent,
+    ThemedLoadingComponent,
+    TranslateModule,
+    VarDirective,
+  ],
+  standalone: true,
 })
 /**
  * This component represents a detail page for a single collection
  */
-export class CollectionPageComponent extends BaseComponent {
+export class CollectionPageComponent extends BaseComponent implements OnDestroy {
+
+  itemRD$: Observable<RemoteData<PaginatedList<Item>>>;
+
+  paginationConfig: PaginationComponentOptions;
+
+  sortConfig: SortOptions;
+
+  private paginationChanges$: Subject<{
+    paginationConfig: PaginationComponentOptions,
+    sortConfig: SortOptions
+  }>;
+
+  constructor(
+    private readonly searchService: SearchService,
+    private readonly paginationService: PaginationService,
+    route: ActivatedRoute,
+    router: Router,
+    authService: AuthService,
+    authorizationDataService: AuthorizationDataService,
+    public dsoNameService: DSONameService,
+    @Inject(APP_CONFIG) public appConfig: AppConfig,
+  ) {
+    super(
+      route,
+      router,
+      authService,
+      authorizationDataService,
+      dsoNameService
+    );
+
+    this.paginationConfig = Object.assign(new PaginationComponentOptions(), {
+      id: 'cp',
+      currentPage: 1,
+      pageSize: this.appConfig.browseBy.pageSize,
+    });
+
+    this.sortConfig = new SortOptions('dc.date.accessioned', SortDirection.DESC);
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+
+    this.paginationChanges$ = new BehaviorSubject({
+      paginationConfig: this.paginationConfig,
+      sortConfig: this.sortConfig
+    });
+
+    const currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
+    const currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, this.sortConfig);
+
+    this.itemRD$ = combineLatest([currentPagination$, currentSort$]).pipe(
+      switchMap(([currentPagination, currentSort]) => this.collectionRD$.pipe(
+        getFirstSucceededRemoteData(),
+        map((rd) => rd.payload.id),
+        switchMap((id: string) => {
+          return this.searchService.search<Item>(
+            new PaginatedSearchOptions({
+              scope: id,
+              pagination: currentPagination,
+              sort: currentSort,
+              dsoTypes: [DSpaceObjectType.ITEM]
+            }), null, true, true, ...getBrowseLinksToFollow())
+            .pipe(toDSpaceObjectListRD()) as Observable<RemoteData<PaginatedList<Item>>>;
+        }),
+        startWith(undefined) // Make sure switching pages shows loading component
+      )
+      )
+    );
+  }
 
+  ngOnDestroy(): void {
+    this.paginationService.clearPagination(this.paginationConfig.id);
+  }
 }

src/themes/image-gallery/app/community-list-page/community-list/community-list.component.ts

@@ -1,4 +1,11 @@
+import { CdkTreeModule } from '@angular/cdk/tree';
+import { AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { ThemedLoadingComponent } from '../../../../../app/shared/loading/themed-loading.component';
+import { TruncatablePartComponent } from '../../../../../app/shared/truncatable/truncatable-part/truncatable-part.component';
+import { TruncatableComponent } from '../../../../../app/shared/truncatable/truncatable.component';
 import { CommunityListComponent as BaseComponent } from '../../../../tamu/app/community-list-page/community-list/community-list.component';
 
 /**
@@ -10,9 +17,20 @@ import { CommunityListComponent as BaseComponent } from '../../../../tamu/app/co
  */
 @Component({
   selector: 'ds-community-list',
+  styleUrls: ['../../../../../app/community-list-page/community-list/community-list.component.scss'],
   // styleUrls: ['./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',
+  // templateUrl: './community-list.component.html',
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    CdkTreeModule,
+    RouterLink,
+    ThemedLoadingComponent,
+    TranslateModule,
+    TruncatableComponent,
+    TruncatablePartComponent,
+  ],
 })
 export class CommunityListComponent extends BaseComponent {