Themed SubmissionUploadFilesComponent

Author: alexandrevryghem

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

@@ -1,9 +1,9 @@
 <div class="container-fluid">
     <div *ngIf="!(isLoading() | async)" class="submission-form-header mb-3 d-flex flex-wrap position-sticky">
         <div *ngIf="(uploadEnabled$ | async)" class="w-100">
-            <ds-submission-upload-files [submissionId]="submissionId"
+            <ds-themed-submission-upload-files [submissionId]="submissionId"
                                         [collectionId]="collectionId"
-                                        [uploadFilesOptions]="uploadFilesOptions"></ds-submission-upload-files>
+                                        [uploadFilesOptions]="uploadFilesOptions"></ds-themed-submission-upload-files>
             <div class="clearfix"></div>
         </div>
 

src/app/submission/form/submission-upload-files/submission-upload-files.component.spec.ts

@@ -81,9 +81,9 @@ describe('SubmissionUploadFilesComponent Component', () => {
     // synchronous beforeEach
     beforeEach(() => {
       const html = `
-        <ds-submission-upload-files [submissionId]="submissionId"
+        <ds-themed-submission-upload-files [submissionId]="submissionId"
                                     [collectionId]="collectionId"
-                                    [uploadFilesOptions]="uploadFilesOptions"></ds-submission-upload-files>`;
+                                    [uploadFilesOptions]="uploadFilesOptions"></ds-themed-submission-upload-files>`;
 
       testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
       testComp = testFixture.componentInstance;

src/app/submission/form/submission-upload-files/themed-submission-upload-files.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input } from '@angular/core';
+import { ThemedComponent } from '../../../shared/theme-support/themed.component';
+import { SubmissionUploadFilesComponent } from './submission-upload-files.component';
+import { UploaderOptions } from '../../../shared/upload/uploader/uploader-options.model';
+
+/**
+ * Themed wrapper for {@link SubmissionUploadFilesComponent}
+ */
+@Component({
+  selector: 'ds-themed-submission-upload-files',
+  templateUrl: '../../../shared/theme-support/themed.component.html',
+})
+export class ThemedSubmissionUploadFilesComponent extends ThemedComponent<SubmissionUploadFilesComponent> {
+
+  @Input() collectionId: string;
+
+  @Input() submissionId: string;
+
+  @Input() uploadFilesOptions: UploaderOptions;
+
+  protected inAndOutputNames: (keyof SubmissionUploadFilesComponent & keyof this)[] = [
+    'collectionId',
+    'submissionId',
+    'uploadFilesOptions'
+  ];
+
+  protected getComponentName(): string {
+    return 'SubmissionUploadFilesComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../../themes/${themeName}/app/submission/form/submission-upload-files/submission-upload-files.component.ts`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./submission-upload-files.component');
+  }
+}

src/app/submission/submission.module.ts

@@ -67,6 +67,7 @@ import {
 } from './sections/sherpa-policies/metadata-information/metadata-information.component';
 import { SectionFormOperationsService } from './sections/form/section-form-operations.service';
 import {SubmissionSectionIdentifiersComponent} from './sections/identifiers/section-identifiers.component';
+import { ThemedSubmissionUploadFilesComponent } from './form/submission-upload-files/themed-submission-upload-files.component';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -90,6 +91,7 @@ const DECLARATIONS = [
   SubmissionSubmitComponent,
   ThemedSubmissionSubmitComponent,
   SubmissionUploadFilesComponent,
+  ThemedSubmissionUploadFilesComponent,
   SubmissionSectionContainerComponent,
   SubmissionSectionUploadAccessConditionsComponent,
   SubmissionSectionUploadFileComponent,

src/themes/custom/app/submission/form/submission-upload-files/submission-upload-files.component.html

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { SubmissionUploadFilesComponent as BaseComponent } from '../../../../../../app/submission/form/submission-upload-files/submission-upload-files.component';
+
+@Component({
+  selector: 'ds-submission-upload-files',
+  // templateUrl: './submission-upload-files.component.html',
+  templateUrl: '../../../../../../app/submission/form/submission-upload-files/submission-upload-files.component.html',
+})
+export class SubmissionUploadFilesComponent extends BaseComponent {
+}

src/themes/custom/app/submission/form/submission-upload-files/submission-upload-files.component.ts

@@ -156,6 +156,7 @@ import { ItemStatusComponent } from './app/item-page/edit-item-page/item-status/
 import { EditBitstreamPageComponent } from './app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component';
 import { FormModule } from '../../app/shared/form/form.module';
 import { RequestCopyModule } from 'src/app/request-copy/request-copy.module';
+import { SubmissionUploadFilesComponent } from './app/submission/form/submission-upload-files/submission-upload-files.component';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -239,6 +240,7 @@ const DECLARATIONS = [
   SubmissionSectionUploadFileComponent,
   ItemStatusComponent,
   EditBitstreamPageComponent,
+  SubmissionUploadFilesComponent,
 ];
 
 @NgModule({