Merge pull request DSpace#1939 from atmire/w2p-96062_theme-collection-dropdown-component

Make the CollectionDropdownComponent themeable

Author: tdonohue

src/app/my-dspace-page/collection-selector/collection-selector.component.html

@@ -5,7 +5,7 @@
     </button>
   </div>
   <div class="modal-body">
-    <ds-collection-dropdown (selectionChange)="selectObject($event)">
-    </ds-collection-dropdown>
+    <ds-themed-collection-dropdown (selectionChange)="selectObject($event)">
+    </ds-themed-collection-dropdown>
   </div>
 </div>

src/app/my-dspace-page/collection-selector/collection-selector.component.spec.ts

@@ -128,10 +128,13 @@ describe('CollectionSelectorComponent', () => {
 
   beforeEach(() => {
     scheduler = getTestScheduler();
-    fixture = TestBed.createComponent(CollectionSelectorComponent);
+    fixture = TestBed.overrideComponent(CollectionSelectorComponent, {
+      set: {
+        template: '<ds-collection-dropdown (selectionChange)="selectObject($event)"></ds-collection-dropdown>'
+      }
+    }).createComponent(CollectionSelectorComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-
   });
 
   it('should create', () => {

src/app/shared/collection-dropdown/themed-collection-dropdown.component.ts

@@ -0,0 +1,33 @@
+import { CollectionDropdownComponent, CollectionListEntry } from './collection-dropdown.component';
+import { ThemedComponent } from '../theme-support/themed.component';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'ds-themed-collection-dropdown',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedCollectionDropdownComponent extends ThemedComponent<CollectionDropdownComponent> {
+
+  @Input() entityType: string;
+
+  @Output() searchComplete = new EventEmitter<any>();
+
+  @Output() theOnlySelectable = new EventEmitter<CollectionListEntry>();
+
+  @Output() selectionChange = new EventEmitter<CollectionListEntry>();
+
+  protected inAndOutputNames: (keyof CollectionDropdownComponent & keyof this)[] = ['entityType', 'searchComplete', 'theOnlySelectable', 'selectionChange'];
+
+  protected getComponentName(): string {
+    return 'CollectionDropdownComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/shared/collection-dropdown/collection-dropdown.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./collection-dropdown.component`);
+  }
+}

src/app/shared/shared.module.ts

@@ -315,6 +315,7 @@ import { MenuModule } from './menu/menu.module';
 import {
   ListableNotificationObjectComponent
 } from './object-list/listable-notification-object/listable-notification-object.component';
+import { ThemedCollectionDropdownComponent } from './collection-dropdown/themed-collection-dropdown.component';
 
 const MODULES = [
   CommonModule,
@@ -484,6 +485,7 @@ const ENTRY_COMPONENTS = [
   ClaimedTaskActionsReturnToPoolComponent,
   ClaimedTaskActionsEditMetadataComponent,
   CollectionDropdownComponent,
+  ThemedCollectionDropdownComponent,
   FileDownloadLinkComponent,
   BitstreamDownloadPageComponent,
   BitstreamRequestACopyPageComponent,

src/app/submission/form/collection/submission-form-collection.component.html

@@ -35,9 +35,9 @@
          class="dropdown-menu"
          id="collectionControlsDropdownMenu"
          aria-labelledby="collectionControlsMenuButton">
-      <ds-collection-dropdown
+      <ds-themed-collection-dropdown
         (selectionChange)="onSelect($event)">
-      </ds-collection-dropdown>
+      </ds-themed-collection-dropdown>
     </div>
   </div>
 </div>

src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.html

@@ -6,11 +6,11 @@
   </div>
   <div class="modal-body">
     <ds-themed-loading *ngIf="isLoading()"></ds-themed-loading>
-    <ds-collection-dropdown [ngClass]="{'d-none': isLoading()}"
+    <ds-themed-collection-dropdown [ngClass]="{'d-none': isLoading()}"
                             (selectionChange)="selectObject($event)"
                             (searchComplete)="searchComplete()"
                             (theOnlySelectable)="theOnlySelectable($event)"
                             [entityType]="entityType">
-    </ds-collection-dropdown>
+    </ds-themed-collection-dropdown>
   </div>
 </div>

src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.spec.ts

@@ -122,7 +122,7 @@ describe('SubmissionImportExternalCollectionComponent test suite', () => {
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
-        const dropdownMenu = fixture.debugElement.query(By.css('ds-collection-dropdown')).nativeElement;
+        const dropdownMenu = fixture.debugElement.query(By.css('ds-themed-collection-dropdown')).nativeElement;
         expect(dropdownMenu.classList).toContain('d-none');
       });
     }));

src/themes/custom/app/shared/collection-dropdown/collection-dropdown.component.html

@@ -0,0 +1,15 @@
+import {
+  CollectionDropdownComponent as BaseComponent
+} from '../../../../../app/shared/collection-dropdown/collection-dropdown.component';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ds-collection-dropdown',
+  templateUrl: '../../../../../app/shared/collection-dropdown/collection-dropdown.component.html',
+  // templateUrl: './collection-dropdown.component.html',
+  styleUrls: ['../../../../../app/shared/collection-dropdown/collection-dropdown.component.scss']
+  // styleUrls: ['./collection-dropdown.component.scss']
+})
+export class CollectionDropdownComponent extends BaseComponent {
+
+}