Merge pull request #1842 from the-library-code/PRs/AdditionalThemedComponents

additional themed components

Author: tdonohue

src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts

@@ -11,7 +11,6 @@ import { ActivatedRoute, Params, Router } from '@angular/router';
 import { BrowseService } from '../../core/browse/browse.service';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
-import { BrowseByDataType, rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { map } from 'rxjs/operators';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
@@ -29,7 +28,6 @@ import { AppConfig, APP_CONFIG } from '../../../config/app-config.interface';
  * A metadata definition (a.k.a. browse id) is a short term used to describe one or multiple metadata fields.
  * An example would be 'dateissued' for 'dc.date.issued'
  */
-@rendersBrowseBy(BrowseByDataType.Date)
 export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
 
   /**

src/app/browse-by/browse-by-date-page/themed-browse-by-date-page.component.ts

@@ -0,0 +1,29 @@
+import {Component} from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { BrowseByDatePageComponent } from './browse-by-date-page.component';
+import {BrowseByDataType, rendersBrowseBy} from '../browse-by-switcher/browse-by-decorator';
+
+/**
+ * Themed wrapper for BrowseByDatePageComponent
+ * */
+@Component({
+  selector: 'ds-themed-browse-by-metadata-page',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+
+@rendersBrowseBy(BrowseByDataType.Date)
+export class ThemedBrowseByDatePageComponent
+  extends ThemedComponent<BrowseByDatePageComponent> {
+  protected getComponentName(): string {
+    return 'BrowseByDatePageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/browse-by/browse-by-date-page/browse-by-date-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./browse-by-date-page.component`);
+  }
+}

src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html

@@ -6,10 +6,10 @@
         <ds-comcol-page-header [name]="parentContext.name">
         </ds-comcol-page-header>
         <!-- Handle -->
-        <ds-comcol-page-handle
+        <ds-themed-comcol-page-handle
             [content]="parentContext.handle"
             [title]="parentContext.type+'.page.handle'" >
-        </ds-comcol-page-handle>
+        </ds-themed-comcol-page-handle>
         <!-- Introductory text -->
         <ds-comcol-page-content [content]="parentContext.introductoryText" [hasInnerHtml]="true">
         </ds-comcol-page-content>

src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts

@@ -1,5 +1,5 @@
 import { combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, OnDestroy } from '@angular/core';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginatedList } from '../../core/data/paginated-list.model';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
@@ -14,7 +14,6 @@ import { getFirstSucceededRemoteData } from '../../core/shared/operators';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
-import { BrowseByDataType, rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { map } from 'rxjs/operators';
 import { APP_CONFIG, AppConfig } from '../../../config/app-config.interface';
@@ -32,8 +31,7 @@ export const BBM_PAGINATION_ID = 'bbm';
  * or multiple metadata fields.  An example would be 'author' for
  * 'dc.contributor.*'
  */
-@rendersBrowseBy(BrowseByDataType.Metadata)
-export class BrowseByMetadataPageComponent implements OnInit {
+export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
 
   /**
    * The list of browse-entries to display
@@ -93,7 +91,7 @@ export class BrowseByMetadataPageComponent implements OnInit {
   startsWithOptions;
 
   /**
-   * The value we're browing items for
+   * The value we're browsing items for
    * - When the value is not empty, we're browsing items
    * - When the value is empty, we're browsing browse-entries (values for the given metadata definition)
    */

src/app/browse-by/browse-by-metadata-page/themed-browse-by-metadata-page.component.ts

@@ -0,0 +1,29 @@
+import {Component} from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { BrowseByMetadataPageComponent } from './browse-by-metadata-page.component';
+import {BrowseByDataType, rendersBrowseBy} from '../browse-by-switcher/browse-by-decorator';
+
+/**
+ * Themed wrapper for BrowseByMetadataPageComponent
+ **/
+@Component({
+  selector: 'ds-themed-browse-by-metadata-page',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+
+@rendersBrowseBy(BrowseByDataType.Metadata)
+export class ThemedBrowseByMetadataPageComponent
+  extends ThemedComponent<BrowseByMetadataPageComponent> {
+  protected getComponentName(): string {
+    return 'BrowseByMetadataPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./browse-by-metadata-page.component`);
+  }
+}

src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts

@@ -9,7 +9,6 @@ import {
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { BrowseService } from '../../core/browse/browse.service';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
-import { BrowseByDataType, rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { map } from 'rxjs/operators';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
@@ -23,7 +22,6 @@ import { AppConfig, APP_CONFIG } from '../../../config/app-config.interface';
 /**
  * Component for browsing items by title (dc.title)
  */
-@rendersBrowseBy(BrowseByDataType.Title)
 export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent {
 
   public constructor(protected route: ActivatedRoute,

src/app/browse-by/browse-by-title-page/themed-browse-by-title-page.component.ts

@@ -0,0 +1,29 @@
+import {Component} from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { BrowseByTitlePageComponent } from './browse-by-title-page.component';
+import {BrowseByDataType, rendersBrowseBy} from '../browse-by-switcher/browse-by-decorator';
+
+/**
+ * Themed wrapper for BrowseByTitlePageComponent
+ */
+@Component({
+  selector: 'ds-themed-browse-by-title-page',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+
+@rendersBrowseBy(BrowseByDataType.Title)
+export class ThemedBrowseByTitlePageComponent
+  extends ThemedComponent<BrowseByTitlePageComponent> {
+  protected getComponentName(): string {
+    return 'BrowseByTitlePageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/browse-by/browse-by-title-page/browse-by-title-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./browse-by-title-page.component`);
+  }
+}

src/app/browse-by/browse-by.module.ts

@@ -7,12 +7,20 @@ import { BrowseByDatePageComponent } from './browse-by-date-page/browse-by-date-
 import { BrowseBySwitcherComponent } from './browse-by-switcher/browse-by-switcher.component';
 import { ThemedBrowseBySwitcherComponent } from './browse-by-switcher/themed-browse-by-switcher.component';
 import { ComcolModule } from '../shared/comcol/comcol.module';
+import { ThemedBrowseByMetadataPageComponent } from './browse-by-metadata-page/themed-browse-by-metadata-page.component';
+import { ThemedBrowseByDatePageComponent } from './browse-by-date-page/themed-browse-by-date-page.component';
+import { ThemedBrowseByTitlePageComponent } from './browse-by-title-page/themed-browse-by-title-page.component';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
   BrowseByTitlePageComponent,
   BrowseByMetadataPageComponent,
-  BrowseByDatePageComponent
+  BrowseByDatePageComponent,
+
+  ThemedBrowseByMetadataPageComponent,
+  ThemedBrowseByDatePageComponent,
+  ThemedBrowseByTitlePageComponent,
+
 ];
 
 @NgModule({

src/app/collection-page/collection-page.component.html

@@ -17,10 +17,10 @@
                   </ds-comcol-page-logo>
 
                   <!-- Handle -->
-                  <ds-comcol-page-handle
+                  <ds-themed-comcol-page-handle
                           [content]="collection.handle"
                           [title]="'collection.page.handle'" >
-                  </ds-comcol-page-handle>
+                  </ds-themed-comcol-page-handle>
                   <!-- Introductory text -->
                   <ds-comcol-page-content
                           [content]="collection.introductoryText"

src/app/community-page/community-page.component.html

@@ -10,8 +10,8 @@
           <ds-comcol-page-logo *ngIf="logoRD$" [logo]="(logoRD$ | async)?.payload" [alternateText]="'Community Logo'">
           </ds-comcol-page-logo>
           <!-- Handle -->
-          <ds-comcol-page-handle [content]="communityPayload.handle" [title]="'community.page.handle'">
-          </ds-comcol-page-handle>
+          <ds-themed-comcol-page-handle [content]="communityPayload.handle" [title]="'community.page.handle'">
+          </ds-themed-comcol-page-handle>
           <!-- Introductory text -->
           <ds-comcol-page-content [content]="communityPayload.introductoryText" [hasInnerHtml]="true">
           </ds-comcol-page-content>