Merge pull request DSpace#1748 from mspalti/new-themes

New theme-able components

Author: tdonohue

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

@@ -25,12 +25,13 @@
         </div>
       </div>
       <section class="comcol-page-browse-section">
+
         <!-- Browse-By Links -->
         <ds-themed-comcol-page-browse-by [id]="communityPayload.id" [contentType]="communityPayload.type">
         </ds-themed-comcol-page-browse-by>
 
-        <ds-community-page-sub-community-list [community]="communityPayload"></ds-community-page-sub-community-list>
-        <ds-community-page-sub-collection-list [community]="communityPayload"></ds-community-page-sub-collection-list>
+        <ds-themed-community-page-sub-community-list [community]="communityPayload"></ds-themed-community-page-sub-community-list>
+        <ds-themed-community-page-sub-collection-list [community]="communityPayload"></ds-themed-community-page-sub-collection-list>
       </section>
       <footer  *ngIf="communityPayload.copyrightText"  class="border-top my-5 pt-4">
         <!-- Copyright -->

src/app/community-page/community-page.module.ts

@@ -13,10 +13,18 @@ import { StatisticsModule } from '../statistics/statistics.module';
 import { CommunityFormModule } from './community-form/community-form.module';
 import { ThemedCommunityPageComponent } from './themed-community-page.component';
 import { ComcolModule } from '../shared/comcol/comcol.module';
+import {
+  ThemedCommunityPageSubCommunityListComponent
+} from './sub-community-list/themed-community-page-sub-community-list.component';
+import {
+  ThemedCollectionPageSubCollectionListComponent
+} from './sub-collection-list/themed-community-page-sub-collection-list.component';
 
 const DECLARATIONS = [CommunityPageComponent,
   ThemedCommunityPageComponent,
+  ThemedCommunityPageSubCommunityListComponent,
   CommunityPageSubCollectionListComponent,
+  ThemedCollectionPageSubCollectionListComponent,
   CommunityPageSubCommunityListComponent,
   CreateCommunityPageComponent,
   DeleteCommunityPageComponent];

src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 
 import { BehaviorSubject, combineLatest as observableCombineLatest } from 'rxjs';
 
@@ -12,16 +12,23 @@ import { SortDirection, SortOptions } from '../../core/cache/models/sort-options
 import { CollectionDataService } from '../../core/data/collection-data.service';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { switchMap } from 'rxjs/operators';
+import { hasValue } from '../../shared/empty.util';
 
 @Component({
   selector: 'ds-community-page-sub-collection-list',
   styleUrls: ['./community-page-sub-collection-list.component.scss'],
   templateUrl: './community-page-sub-collection-list.component.html',
   animations:[fadeIn]
 })
-export class CommunityPageSubCollectionListComponent implements OnInit {
+export class CommunityPageSubCollectionListComponent implements OnInit, OnDestroy {
   @Input() community: Community;
 
+  /**
+   * Optional page size. Overrides communityList.pageSize configuration for this component.
+   * Value can be added in the themed version of the parent component.
+   */
+  @Input() pageSize: number;
+
   /**
    * The pagination configuration
    */
@@ -50,7 +57,9 @@ export class CommunityPageSubCollectionListComponent implements OnInit {
   ngOnInit(): void {
     this.config = new PaginationComponentOptions();
     this.config.id = this.pageId;
-    this.config.pageSize = 5;
+    if (hasValue(this.pageSize)) {
+      this.config.pageSize = this.pageSize;
+    }
     this.config.currentPage = 1;
     this.sortConfig = new SortOptions('dc.title', SortDirection.ASC);
     this.initPage();

src/app/community-page/sub-collection-list/themed-community-page-sub-collection-list.component.ts

@@ -0,0 +1,28 @@
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { CommunityPageSubCollectionListComponent } from './community-page-sub-collection-list.component';
+import { Component, Input } from '@angular/core';
+import { Community } from '../../core/shared/community.model';
+
+@Component({
+  selector: 'ds-themed-community-page-sub-collection-list',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedCollectionPageSubCollectionListComponent extends ThemedComponent<CommunityPageSubCollectionListComponent> {
+  @Input() community: Community;
+  @Input() pageSize: number;
+  protected inAndOutputNames: (keyof CommunityPageSubCollectionListComponent & keyof this)[] = ['community', 'pageSize'];
+
+  protected getComponentName(): string {
+    return 'CommunityPageSubCollectionListComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/community-page/sub-collection-list/community-page-sub-collection-list.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./community-page-sub-collection-list.component`);
+  }
+
+}

src/app/community-page/sub-community-list/community-page-sub-community-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 
 import { BehaviorSubject, combineLatest as observableCombineLatest } from 'rxjs';
 
@@ -12,6 +12,7 @@ import { CommunityDataService } from '../../core/data/community-data.service';
 import { takeUntilCompletedRemoteData } from '../../core/shared/operators';
 import { switchMap } from 'rxjs/operators';
 import { PaginationService } from '../../core/pagination/pagination.service';
+import { hasValue } from '../../shared/empty.util';
 
 @Component({
   selector: 'ds-community-page-sub-community-list',
@@ -22,9 +23,15 @@ import { PaginationService } from '../../core/pagination/pagination.service';
 /**
  * Component to render the sub-communities of a Community
  */
-export class CommunityPageSubCommunityListComponent implements OnInit {
+export class CommunityPageSubCommunityListComponent implements OnInit, OnDestroy {
   @Input() community: Community;
 
+  /**
+   * Optional page size. Overrides communityList.pageSize configuration for this component.
+   * Value can be added in the themed version of the parent component.
+   */
+  @Input() pageSize: number;
+
   /**
    * The pagination configuration
    */
@@ -53,7 +60,9 @@ export class CommunityPageSubCommunityListComponent implements OnInit {
   ngOnInit(): void {
     this.config = new PaginationComponentOptions();
     this.config.id = this.pageId;
-    this.config.pageSize = 5;
+    if (hasValue(this.pageSize)) {
+      this.config.pageSize = this.pageSize;
+    }
     this.config.currentPage = 1;
     this.sortConfig = new SortOptions('dc.title', SortDirection.ASC);
     this.initPage();

src/app/community-page/sub-community-list/themed-community-page-sub-community-list.component.ts

@@ -0,0 +1,29 @@
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { CommunityPageSubCommunityListComponent } from './community-page-sub-community-list.component';
+import { Component, Input } from '@angular/core';
+import { Community } from '../../core/shared/community.model';
+
+@Component({
+  selector: 'ds-themed-community-page-sub-community-list',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedCommunityPageSubCommunityListComponent extends ThemedComponent<CommunityPageSubCommunityListComponent> {
+
+  @Input() community: Community;
+  @Input() pageSize: number;
+  protected inAndOutputNames: (keyof CommunityPageSubCommunityListComponent & keyof this)[] = ['community', 'pageSize'];
+
+  protected getComponentName(): string {
+    return 'CommunityPageSubCommunityListComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/community-page/sub-community-list/community-page-sub-community-list.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./community-page-sub-community-list.component`);
+  }
+
+}

src/themes/custom/app/community-page/sub-collection-list/community-page-sub-collection-list.component.html

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { CommunityPageSubCollectionListComponent as BaseComponent }
+  from '../../../../../app/community-page/sub-collection-list/community-page-sub-collection-list.component';
+
+@Component({
+  selector: 'ds-community-page-sub-collection-list',
+  // styleUrls: ['./community-page-sub-collection-list.component.scss'],
+  styleUrls: ['../../../../../app/community-page/sub-collection-list/community-page-sub-collection-list.component.scss'],
+  // templateUrl: './community-page-sub-collection-list.component.html',
+  templateUrl: '../../../../../app/community-page/sub-collection-list/community-page-sub-collection-list.component.html'
+})
+export class CommunityPageSubCollectionListComponent extends BaseComponent {}