117274: Themed DSOSelectorComponent

alexandrevryghem · Sep 5, 2024 · 524b91e · 524b91e
1 parent f55c02a
commit 524b91e
Show file tree

Hide file tree

Showing 18 changed files with 76 additions and 16 deletions.
diff --git a/...r/dso-selector/authorized-collection-selector/authorized-collection-selector.component.ts b/...r/dso-selector/authorized-collection-selector/authorized-collection-selector.component.ts
@@ -35,11 +35,11 @@ export class AuthorizedCollectionSelectorComponent extends DSOSelectorComponent
   constructor(
     protected searchService: SearchService,
     protected collectionDataService: CollectionDataService,
-    protected notifcationsService: NotificationsService,
+    protected notificationService: NotificationsService,
     protected translate: TranslateService,
     protected dsoNameService: DSONameService,
   ) {
-    super(searchService, notifcationsService, translate, dsoNameService);
+    super(searchService, notificationService, translate, dsoNameService);
   }
 
   /**

diff --git a/src/app/shared/dso-selector/dso-selector/dso-selector.component.ts b/src/app/shared/dso-selector/dso-selector/dso-selector.component.ts
@@ -138,7 +138,7 @@ export class DSOSelectorComponent implements OnInit, OnDestroy {
 
   constructor(
     protected searchService: SearchService,
-    protected notifcationsService: NotificationsService,
+    protected notificationService: NotificationsService,
     protected translate: TranslateService,
     protected dsoNameService: DSONameService,
   ) {
@@ -185,7 +185,7 @@ export class DSOSelectorComponent implements OnInit, OnDestroy {
                 ...rd.payload.page.filter((result) => isNotEmpty(query) || result.indexableObject.id !== this.currentDSOId)
               ];
             } else if (rd.hasFailed) {
-              this.notifcationsService.error(this.translate.instant('dso-selector.error.title', { type: this.typesString }), rd.errorMessage);
+              this.notificationService.error(this.translate.instant('dso-selector.error.title', { type: this.typesString }), rd.errorMessage);
             }
             return rd;
           })

diff --git a/src/app/shared/dso-selector/dso-selector/themed-dso-selector.component.ts b/src/app/shared/dso-selector/dso-selector/themed-dso-selector.component.ts
@@ -0,0 +1,44 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { ThemedComponent } from '../../theme-support/themed.component';
+import { DSpaceObjectType } from '../../../core/shared/dspace-object-type.model';
+import { SortOptions } from '../../../core/cache/models/sort-options.model';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { DSOSelectorComponent } from './dso-selector.component';
+
+/**
+ * Themed wrapper for {@link DSOSelectorComponent}
+ */
+@Component({
+  selector: 'ds-themed-dso-selector',
+  templateUrl: '../../theme-support/themed.component.html',
+})
+export class ThemedDSOSelectorComponent extends ThemedComponent<DSOSelectorComponent> {
+
+  @Input() currentDSOId: string;
+
+  @Input() types: DSpaceObjectType[];
+
+  @Input() sort: SortOptions;
+
+  @Output() onSelect: EventEmitter<DSpaceObject> = new EventEmitter();
+
+  protected inAndOutputNames: (keyof DSOSelectorComponent & keyof this)[] = [
+    'currentDSOId',
+    'types',
+    'sort',
+    'onSelect',
+  ];
+
+  protected getComponentName(): string {
+    return 'DSOSelectorComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../../themes/${themeName}/app/shared/dso-selector/dso-selector/dso-selector.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./dso-selector.component');
+  }
+
+}
diff --git a/...wrappers/create-community-parent-selector/create-community-parent-selector.component.html b/...wrappers/create-community-parent-selector/create-community-parent-selector.component.html
@@ -14,6 +14,6 @@ <h3 class="position-relative py-1 my-3 font-weight-normal">
         </h3>
 
         <h5 class="px-2">{{'dso-selector.create.community.sub-level' | translate}}</h5>
-        <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-dso-selector>
+        <ds-themed-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-themed-dso-selector>
     </div>
 </div>
diff --git a/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.html b/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.html
@@ -6,6 +6,6 @@
   </div>
   <div class="modal-body">
     <h5 *ngIf="header" class="px-2">{{header | translate}}</h5>
-    <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-dso-selector>
+    <ds-themed-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-themed-dso-selector>
   </div>
 </div>
diff --git a/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.spec.ts b/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.spec.ts
@@ -8,7 +8,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ActivatedRoute } from '@angular/router';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { By } from '@angular/platform-browser';
-import { DSOSelectorComponent } from '../dso-selector/dso-selector.component';
+import { ThemedDSOSelectorComponent } from '../dso-selector/themed-dso-selector.component';
 import { MockComponent } from 'ng-mocks';
 import { MetadataValue } from '../../../core/shared/metadata.models';
 import { createSuccessfulRemoteDataObject } from '../../remote-data.utils';
@@ -33,7 +33,7 @@ describe('DSOSelectorModalWrapperComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],
-      declarations: [TestComponent, MockComponent(DSOSelectorComponent)],
+      declarations: [TestComponent, MockComponent(ThemedDSOSelectorComponent)],
       providers: [
         { provide: NgbActiveModal, useValue: modalStub },
         {
@@ -95,7 +95,7 @@ describe('DSOSelectorModalWrapperComponent', () => {
   describe('when the onSelect method emits on the child component', () => {
     beforeEach(() => {
       spyOn(component, 'selectObject');
-      debugElement.query(By.css('ds-dso-selector')).componentInstance.onSelect.emit(item);
+      debugElement.query(By.css('ds-themed-dso-selector')).componentInstance.onSelect.emit(item);
       fixture.detectChanges();
     });
     it('should call the selectObject method on the component with the correct object', () => {

diff --git a/...p/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html b/...p/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html
@@ -6,6 +6,6 @@
   </div>
   <div class="modal-body">
     <h5 *ngIf="header" class="px-2">{{header | translate}}</h5>
-    <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" (onSelect)="selectObject($event)"></ds-dso-selector>
+    <ds-themed-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" (onSelect)="selectObject($event)"></ds-themed-dso-selector>
   </div>
 </div>
diff --git a/src/app/shared/search-form/scope-selector-modal/scope-selector-modal.component.html b/src/app/shared/search-form/scope-selector-modal/scope-selector-modal.component.html
@@ -14,6 +14,6 @@ <h3 class="position-relative py-1 my-3 font-weight-normal">
         </h3>
 
         <h5 class="px-2">{{'dso-selector.' + action + '.' + objectType.toString().toLowerCase() + '.input-header' | translate}}</h5>
-        <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-dso-selector>
+        <ds-themed-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-themed-dso-selector>
     </div>
 </div>
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -101,6 +101,7 @@ import { AutoFocusDirective } from './utils/auto-focus.directive';
 import { StartsWithDateComponent } from './starts-with/date/starts-with-date.component';
 import { StartsWithTextComponent } from './starts-with/text/starts-with-text.component';
 import { DSOSelectorComponent } from './dso-selector/dso-selector/dso-selector.component';
+import { ThemedDSOSelectorComponent } from './dso-selector/dso-selector/themed-dso-selector.component';
 import {
   CreateCommunityParentSelectorComponent
 } from './dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component';
@@ -366,6 +367,7 @@ const COMPONENTS = [
   ValidationSuggestionsComponent,
   DsoInputSuggestionsComponent,
   DSOSelectorComponent,
+  ThemedDSOSelectorComponent,
   SearchExportCsvComponent,
   PageSizeSelectorComponent,
   ListableObjectComponentLoaderComponent,

diff --git a/src/themes/custom/app/shared/dso-selector/dso-selector/dso-selector.component.html b/src/themes/custom/app/shared/dso-selector/dso-selector/dso-selector.component.html
diff --git a/src/themes/custom/app/shared/dso-selector/dso-selector/dso-selector.component.scss b/src/themes/custom/app/shared/dso-selector/dso-selector/dso-selector.component.scss
diff --git a/src/themes/custom/app/shared/dso-selector/dso-selector/dso-selector.component.ts b/src/themes/custom/app/shared/dso-selector/dso-selector/dso-selector.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { DSOSelectorComponent as BaseComponent } from '../../../../../../app/shared/dso-selector/dso-selector/dso-selector.component';
+
+@Component({
+  selector: 'ds-dso-selector',
+  // styleUrls: ['./dso-selector.component.scss'],
+  styleUrls: ['../../../../../../app/shared/dso-selector/dso-selector/dso-selector.component.scss'],
+  // templateUrl: './dso-selector.component.html',
+  templateUrl: '../../../../../../app/shared/dso-selector/dso-selector/dso-selector.component.html',
+})
+export class DSOSelectorComponent extends BaseComponent {
+}
diff --git a/...appers/create-collection-parent-selector/create-collection-parent-selector.component.html b/...appers/create-collection-parent-selector/create-collection-parent-selector.component.html
@@ -6,6 +6,6 @@
   </div>
   <div class="modal-body">
     <h5 *ngIf="header" class="px-2">{{header | translate}}</h5>
-    <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-dso-selector>
+    <ds-themed-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-themed-dso-selector>
   </div>
 </div>
diff --git a/...wrappers/create-community-parent-selector/create-community-parent-selector.component.html b/...wrappers/create-community-parent-selector/create-community-parent-selector.component.html
@@ -14,6 +14,6 @@ <h3 class="position-relative py-1 my-3 font-weight-normal">
         </h3>
 
         <h5 class="px-2">{{'dso-selector.create.community.sub-level' | translate}}</h5>
-        <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-dso-selector>
+        <ds-themed-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-themed-dso-selector>
     </div>
 </div>
diff --git a/...-selector/modal-wrappers/edit-collection-selector/edit-collection-selector.component.html b/...-selector/modal-wrappers/edit-collection-selector/edit-collection-selector.component.html
@@ -6,6 +6,6 @@
   </div>
   <div class="modal-body">
     <h5 *ngIf="header" class="px-2">{{header | translate}}</h5>
-    <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-dso-selector>
+    <ds-themed-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-themed-dso-selector>
   </div>
 </div>
diff --git a/...so-selector/modal-wrappers/edit-community-selector/edit-community-selector.component.html b/...so-selector/modal-wrappers/edit-community-selector/edit-community-selector.component.html
@@ -6,6 +6,6 @@
   </div>
   <div class="modal-body">
     <h5 *ngIf="header" class="px-2">{{header | translate}}</h5>
-    <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-dso-selector>
+    <ds-themed-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-themed-dso-selector>
   </div>
 </div>
diff --git a/...p/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html b/...p/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html
@@ -6,6 +6,6 @@
   </div>
   <div class="modal-body">
     <h5 *ngIf="header" class="px-2">{{header | translate}}</h5>
-    <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" (onSelect)="selectObject($event)"></ds-dso-selector>
+    <ds-themed-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" (onSelect)="selectObject($event)"></ds-themed-dso-selector>
   </div>
 </div>
diff --git a/src/themes/custom/lazy-theme.module.ts b/src/themes/custom/lazy-theme.module.ts
@@ -159,6 +159,7 @@ import { RequestCopyModule } from 'src/app/request-copy/request-copy.module';
 import {
   AuthorizedCollectionSelectorComponent
 } from './app/shared/dso-selector/dso-selector/authorized-collection-selector/authorized-collection-selector.component';
+import { DSOSelectorComponent } from './app/shared/dso-selector/dso-selector/dso-selector.component';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -243,6 +244,7 @@ const DECLARATIONS = [
   ItemStatusComponent,
   EditBitstreamPageComponent,
   AuthorizedCollectionSelectorComponent,
+  DSOSelectorComponent,
 ];
 
 @NgModule({