From 53ca7000f189a22bb8969dc0e31d8d9eeb000341 Mon Sep 17 00:00:00 2001
From: Alex Buckley <alexbuckley@catalyst.net.nz>
Date: Sun, 18 Aug 2024 14:51:36 +1200
Subject: [PATCH] Add optional collection home page and descriptive collection
 content fields

---
 .../collection-home-page.component.html       |  61 ++++++++
 .../collection-home-page.component.scss       |   0
 .../collection-home-page.component.ts         | 133 ++++++++++++++++++
 .../collection-page/collection-page-routes.ts |   6 +
 .../collection-page-routing-paths.ts          |   5 +
 .../collection-list-element.component.html    |   2 +-
 6 files changed, 206 insertions(+), 1 deletion(-)
 create mode 100644 src/app/collection-page/collection-home/collection-home-page.component.html
 create mode 100644 src/app/collection-page/collection-home/collection-home-page.component.scss
 create mode 100644 src/app/collection-page/collection-home/collection-home-page.component.ts

diff --git a/src/app/collection-page/collection-home/collection-home-page.component.html b/src/app/collection-page/collection-home/collection-home-page.component.html
new file mode 100644
index 00000000000..4a3e28c6aad
--- /dev/null
+++ b/src/app/collection-page/collection-home/collection-home-page.component.html
@@ -0,0 +1,61 @@
+<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 -->
+            <ds-comcol-page-logo *ngIf="logoRD$"
+                                 [logo]="(logoRD$ | async)?.payload"
+                                 [alternateText]="'collection.logo' | translate">
+            </ds-comcol-page-logo>
+
+            <!-- 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-comcol-page-browse-by
+              [id]="collection.id"
+              [contentType]="collection.type">
+          </ds-comcol-page-browse-by>
+
+          <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>
+      </div>
+    </div>
+    <ds-error *ngIf="collectionRD?.hasFailed"
+              message="{{'error.collection' | translate}}"></ds-error>
+    <ds-loading *ngIf="collectionRD?.isLoading"
+                       message="{{'loading.collection' | translate}}"></ds-loading>
+  </div>
+</div>
diff --git a/src/app/collection-page/collection-home/collection-home-page.component.scss b/src/app/collection-page/collection-home/collection-home-page.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/collection-page/collection-home/collection-home-page.component.ts b/src/app/collection-page/collection-home/collection-home-page.component.ts
new file mode 100644
index 00000000000..ef4dcfe5d30
--- /dev/null
+++ b/src/app/collection-page/collection-home/collection-home-page.component.ts
@@ -0,0 +1,133 @@
+import {
+  AsyncPipe,
+  NgIf,
+} from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+} from '@angular/core';
+import {
+  ActivatedRoute,
+  Router,
+  RouterOutlet,
+} from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import {
+  filter,
+  map,
+  mergeMap,
+  take,
+} from 'rxjs/operators';
+
+import { AuthService } from '../../core/auth/auth.service';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { SortOptions } from '../../core/cache/models/sort-options.model';
+import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
+import { FeatureID } from '../../core/data/feature-authorization/feature-id';
+import { RemoteData } from '../../core/data/remote-data';
+import { redirectOn4xx } from '../../core/shared/authorized.operators';
+import { Bitstream } from '../../core/shared/bitstream.model';
+import { Collection } from '../../core/shared/collection.model';
+import { getAllSucceededRemoteDataPayload } from '../../core/shared/operators';
+import {
+  fadeIn,
+  fadeInOut,
+} from '../../shared/animations/fade';
+import { ThemedComcolPageBrowseByComponent } from '../../shared/comcol/comcol-page-browse-by/themed-comcol-page-browse-by.component';
+import { ThemedComcolPageContentComponent } from '../../shared/comcol/comcol-page-content/themed-comcol-page-content.component';
+import { ThemedComcolPageHandleComponent } from '../../shared/comcol/comcol-page-handle/themed-comcol-page-handle.component';
+import { ComcolPageHeaderComponent } from '../../shared/comcol/comcol-page-header/comcol-page-header.component';
+import { ComcolPageLogoComponent } from '../../shared/comcol/comcol-page-logo/comcol-page-logo.component';
+import { DsoEditMenuComponent } from '../../shared/dso-page/dso-edit-menu/dso-edit-menu.component';
+import {
+  hasValue,
+  isNotEmpty,
+} from '../../shared/empty.util';
+import { ErrorComponent } from '../../shared/error/error.component';
+import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
+import { ObjectCollectionComponent } from '../../shared/object-collection/object-collection.component';
+import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import { VarDirective } from '../../shared/utils/var.directive';
+import { ViewTrackerComponent } from '../../statistics/angulartics/dspace/view-tracker.component';
+import { getCollectionPageRoute } from '../collection-page-routing-paths';
+
+@Component({
+  selector: 'ds-base-collection-home-page',
+  styleUrls: ['./collection--home-page.component.scss'],
+  templateUrl: './collection-home-page.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    fadeIn,
+    fadeInOut,
+  ],
+  imports: [
+    ThemedComcolPageContentComponent,
+    ErrorComponent,
+    NgIf,
+    ThemedLoadingComponent,
+    TranslateModule,
+    ViewTrackerComponent,
+    VarDirective,
+    AsyncPipe,
+    ComcolPageHeaderComponent,
+    ComcolPageLogoComponent,
+    ThemedComcolPageHandleComponent,
+    DsoEditMenuComponent,
+    ThemedComcolPageBrowseByComponent,
+    ObjectCollectionComponent,
+    RouterOutlet,
+  ],
+  standalone: true,
+})
+export class CollectionHomePageComponent implements OnInit {
+  collectionRD$: Observable<RemoteData<Collection>>;
+  logoRD$: Observable<RemoteData<Bitstream>>;
+  paginationConfig: PaginationComponentOptions;
+  sortConfig: SortOptions;
+
+  /**
+   * Whether the current user is a Community admin
+   */
+  isCollectionAdmin$: Observable<boolean>;
+
+  /**
+   * Route to the community page
+   */
+  collectionPageRoute$: Observable<string>;
+
+  constructor(
+    protected route: ActivatedRoute,
+    protected router: Router,
+    protected authService: AuthService,
+    protected authorizationDataService: AuthorizationDataService,
+    public dsoNameService: DSONameService,
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.collectionRD$ = this.route.data.pipe(
+      map((data) => data.dso as RemoteData<Collection>),
+      redirectOn4xx(this.router, this.authService),
+      take(1),
+    );
+    this.logoRD$ = this.collectionRD$.pipe(
+      map((rd: RemoteData<Collection>) => rd.payload),
+      filter((collection: Collection) => hasValue(collection)),
+      mergeMap((collection: Collection) => collection.logo),
+    );
+    this.isCollectionAdmin$ = this.authorizationDataService.isAuthorized(FeatureID.IsCollectionAdmin);
+
+    this.collectionPageRoute$ = this.collectionRD$.pipe(
+      getAllSucceededRemoteDataPayload(),
+      map((collection) => getCollectionPageRoute(collection.id)),
+    );
+  }
+
+  isNotEmpty(object: any) {
+    return isNotEmpty(object);
+  }
+
+
+}
diff --git a/src/app/collection-page/collection-page-routes.ts b/src/app/collection-page/collection-page-routes.ts
index f2dadc3fbe0..a9a06425339 100644
--- a/src/app/collection-page/collection-page-routes.ts
+++ b/src/app/collection-page/collection-page-routes.ts
@@ -17,11 +17,13 @@ import {
   COLLECTION_CREATE_PATH,
   COLLECTION_EDIT_PATH,
   ITEMTEMPLATE_PATH,
+  COLLECTION_HOME_PATH,
 } from './collection-page-routing-paths';
 import { CreateCollectionPageComponent } from './create-collection-page/create-collection-page.component';
 import { createCollectionPageGuard } from './create-collection-page/create-collection-page.guard';
 import { DeleteCollectionPageComponent } from './delete-collection-page/delete-collection-page.component';
 import { itemTemplatePageResolver } from './edit-item-template-page/item-template-page.resolver';
+import { CollectionHomePageComponent } from './collection-home/collection-home-page.component';
 import { ThemedEditItemTemplatePageComponent } from './edit-item-template-page/themed-edit-item-template-page.component';
 import { ThemedCollectionPageComponent } from './themed-collection-page.component';
 
@@ -80,6 +82,10 @@ export const ROUTES: Route[] = [
         },
         data: { title: 'collection.edit.template.title', breadcrumbKey: 'collection.edit.template' },
       },
+      {
+        path: COLLECTION_HOME_PATH,
+        component: CollectionHomePageComponent,
+      },
       {
         path: '',
         component: ThemedCollectionPageComponent,
diff --git a/src/app/collection-page/collection-page-routing-paths.ts b/src/app/collection-page/collection-page-routing-paths.ts
index 2eebe31e1c5..649f08c032c 100644
--- a/src/app/collection-page/collection-page-routing-paths.ts
+++ b/src/app/collection-page/collection-page-routing-paths.ts
@@ -28,7 +28,12 @@ export function getCollectionItemTemplateRoute(id) {
   return new URLCombiner(getCollectionPageRoute(id), ITEMTEMPLATE_PATH).toString();
 }
 
+export function getCollectionHomeRoute(id) {
+  return new URLCombiner(getCollectionPageRoute(id), COLLECTION_HOME_PATH).toString();
+}
+
 export const COLLECTION_CREATE_PATH = 'create';
 export const COLLECTION_EDIT_PATH = 'edit';
 export const COLLECTION_EDIT_ROLES_PATH = 'roles';
 export const ITEMTEMPLATE_PATH = 'itemtemplate';
+export const COLLECTION_HOME_PATH = 'home';
diff --git a/src/app/shared/object-list/collection-list-element/collection-list-element.component.html b/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
index 1c4f68fbcce..7c22d59d1fe 100644
--- a/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
+++ b/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
@@ -1,5 +1,5 @@
 <div class="d-flex flex-row">
-  <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/collections/' + object.id]" class="lead">
+  <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/collections/' + object.id + '/home']" class="lead">
     {{ dsoNameService.getName(object) }}
   </a>
   <span *ngIf="linkType === linkTypes.None" class="lead">