Themed Submission Components

src/app/submission/edit/submission-edit.component.spec.ts

@@ -57,6 +57,8 @@ describe('SubmissionEditComponent Component', () => {
   const submissionObject: any = mockSubmissionObject;
 
   beforeEach(waitForAsync(() => {
+    // Fix for missing CSS custom property
+    document.documentElement.style.setProperty('--bs-xl', '1200');
     itemDataService = jasmine.createSpyObj('itemDataService', {
       findByHref: createSuccessfulRemoteDataObject$(submissionObject.item),
     });
@@ -105,6 +107,10 @@ describe('SubmissionEditComponent Component', () => {
   });
 
   afterEach(() => {
+    if (fixture) {
+      // Ensure Angular cleans up the component properly
+      fixture.destroy();
+    }
     comp = null;
     fixture = null;
     router = null;

src/app/submission/edit/submission-edit.component.ts

@@ -36,7 +36,7 @@ import {
   isNotNull,
 } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
-import { SubmissionFormComponent } from '../form/submission-form.component';
+import { ThemedSubmissionFormComponent } from '../form/themed-submission-form.component';
 import { SubmissionError } from '../objects/submission-error.model';
 import { SubmissionService } from '../submission.service';
 import parseSectionErrors from '../utils/parseSectionErrors';
@@ -50,7 +50,7 @@ import parseSectionErrors from '../utils/parseSectionErrors';
   templateUrl: './submission-edit.component.html',
   standalone: true,
   imports: [
-    SubmissionFormComponent,
+    ThemedSubmissionFormComponent,
   ],
 })
 export class SubmissionEditComponent implements OnDestroy, OnInit {

src/app/submission/form/footer/submission-form-footer.component.ts

@@ -24,7 +24,7 @@ import { SubmissionService } from '../../submission.service';
  * This component represents submission form footer bar.
  */
 @Component({
-  selector: 'ds-submission-form-footer',
+  selector: 'ds-base-submission-form-footer',
   styleUrls: ['./submission-form-footer.component.scss'],
   templateUrl: './submission-form-footer.component.html',
   standalone: true,

src/app/submission/form/footer/themed-submission-form-footer.component.ts

@@ -0,0 +1,33 @@
+import {
+  Component,
+  Input,
+} from '@angular/core';
+
+import { ThemedComponent } from '../../../shared/theme-support/themed.component';
+import { SubmissionFormFooterComponent } from './submission-form-footer.component';
+
+@Component({
+  selector: 'ds-submission-form-footer',
+  styleUrls: [],
+  templateUrl: '../../../shared/theme-support/themed.component.html',
+  standalone: true,
+  imports: [SubmissionFormFooterComponent],
+})
+export class ThemedSubmissionFormFooterComponent extends ThemedComponent<SubmissionFormFooterComponent> {
+  @Input() submissionId: string;
+
+  protected inAndOutputNames: (keyof SubmissionFormFooterComponent & keyof this)[] = ['submissionId'];
+
+  protected getComponentName(): string {
+    return 'SubmissionFormFooterComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../../themes/${themeName}/app/submission/form/footer/submission-form-footer.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./submission-form-footer.component`);
+  }
+
+}

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

@@ -10,13 +10,18 @@ import {
   TestBed,
   waitForAsync,
 } from '@angular/core/testing';
+import { Store } from '@ngrx/store';
 import {
   cold,
   getTestScheduler,
 } from 'jasmine-marbles';
-import { of as observableOf } from 'rxjs';
+import {
+  of as observableOf,
+  of,
+} from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 
+import { APP_DATA_SERVICES_MAP } from '../../../config/app-config.interface';
 import { AuthService } from '../../core/auth/auth.service';
 import { HALEndpointService } from '../../core/shared/hal-endpoint.service';
 import { Item } from '../../core/shared/item.model';
@@ -56,6 +61,8 @@ describe('SubmissionFormComponent Component', () => {
   let scheduler: TestScheduler;
 
   const submissionServiceStub: SubmissionServiceStub = new SubmissionServiceStub();
+  submissionServiceStub.getSubmissionStatus = jasmine.createSpy('getSubmissionStatus')
+    .and.returnValue(of(true));
   const submissionId = mockSubmissionId;
   const collectionId = mockSubmissionCollectionId;
   const submissionObjectNew: any = mockSubmissionObjectNew;
@@ -64,6 +71,7 @@ describe('SubmissionFormComponent Component', () => {
   const selfUrl: any = mockSubmissionSelfUrl;
   const sectionsList: any = mockSectionsList;
   const sectionsData: any = mockSectionsData;
+  const store = jasmine.createSpyObj('store', ['dispatch']);
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -75,6 +83,8 @@ describe('SubmissionFormComponent Component', () => {
         { provide: SubmissionService, useValue: submissionServiceStub },
         { provide: SectionsService, useValue: { isSectionTypeAvailable: () => observableOf(true) } },
         { provide: ThemeService, useValue: getMockThemeService() },
+        { provide: Store, useValue: store },
+        { provide: APP_DATA_SERVICES_MAP, useValue: {} },
         ChangeDetectorRef,
         SubmissionFormComponent,
       ],

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

@@ -38,29 +38,29 @@ import { UploaderOptions } from '../../shared/upload/uploader/uploader-options.m
 import { SectionVisibility } from '../objects/section-visibility.model';
 import { SubmissionError } from '../objects/submission-error.model';
 import { SubmissionObjectEntry } from '../objects/submission-objects.reducer';
-import { SubmissionSectionContainerComponent } from '../sections/container/section-container.component';
+import { ThemedSubmissionSectionContainerComponent } from '../sections/container/themed-section-container.component';
 import { SectionDataObject } from '../sections/models/section-data.model';
 import { SectionsService } from '../sections/sections.service';
 import { SectionsType } from '../sections/sections-type';
 import { VisibilityType } from '../sections/visibility-type';
 import { SubmissionService } from '../submission.service';
 import { SubmissionFormCollectionComponent } from './collection/submission-form-collection.component';
-import { SubmissionFormFooterComponent } from './footer/submission-form-footer.component';
+import { ThemedSubmissionFormFooterComponent } from './footer/themed-submission-form-footer.component';
 import { SubmissionFormSectionAddComponent } from './section-add/submission-form-section-add.component';
 import { ThemedSubmissionUploadFilesComponent } from './submission-upload-files/themed-submission-upload-files.component';
 
 /**
  * This component represents the submission form.
  */
 @Component({
-  selector: 'ds-submission-form',
+  selector: 'ds-base-submission-form',
   styleUrls: ['./submission-form.component.scss'],
   templateUrl: './submission-form.component.html',
   imports: [
     CommonModule,
     ThemedLoadingComponent,
-    SubmissionSectionContainerComponent,
-    SubmissionFormFooterComponent,
+    ThemedSubmissionSectionContainerComponent,
+    ThemedSubmissionFormFooterComponent,
     ThemedSubmissionUploadFilesComponent,
     SubmissionFormCollectionComponent,
     SubmissionFormSectionAddComponent,

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

@@ -0,0 +1,50 @@
+import {
+  Component,
+  Input,
+} from '@angular/core';
+
+import { SubmissionDefinitionsModel } from '../../core/config/models/config-submission-definitions.model';
+import { Item } from '../../core/shared/item.model';
+import { WorkspaceitemSectionsObject } from '../../core/submission/models/workspaceitem-sections.model';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { SubmissionError } from '../objects/submission-error.model';
+import { SubmissionFormComponent } from './submission-form.component';
+
+@Component({
+  selector: 'ds-submission-form',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+  standalone: true,
+  imports: [SubmissionFormComponent],
+})
+export class ThemedSubmissionFormComponent extends ThemedComponent<SubmissionFormComponent> {
+  @Input() collectionId: string;
+
+  @Input() item: Item;
+
+  @Input() collectionModifiable: boolean | null = null;
+
+  @Input() sections: WorkspaceitemSectionsObject;
+
+  @Input() submissionErrors: SubmissionError;
+
+  @Input() selfUrl: string;
+
+  @Input() submissionDefinition: SubmissionDefinitionsModel;
+
+  @Input() submissionId: string;
+
+  protected inAndOutputNames: (keyof SubmissionFormComponent & keyof this)[] = ['collectionId', 'item', 'collectionModifiable', 'sections', 'submissionErrors', 'selfUrl', 'submissionDefinition', 'submissionId'];
+
+  protected getComponentName(): string {
+    return 'SubmissionFormComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/submission/form/submission-form.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./submission-form.component`);
+  }
+}

src/app/submission/sections/container/section-container.component.ts

@@ -23,7 +23,7 @@ import { rendersSectionType } from '../sections-decorator';
  * This component represents a section that contains the submission license form.
  */
 @Component({
-  selector: 'ds-submission-section-container',
+  selector: 'ds-base-submission-section-container',
   templateUrl: './section-container.component.html',
   styleUrls: ['./section-container.component.scss'],
   imports: [

src/app/submission/sections/container/themed-section-container.component.ts

@@ -0,0 +1,35 @@
+import {
+  Component,
+  Input,
+} from '@angular/core';
+
+import { ThemedComponent } from '../../../shared/theme-support/themed.component';
+import { SectionDataObject } from '../models/section-data.model';
+import { SubmissionSectionContainerComponent } from './section-container.component';
+
+@Component({
+  selector: 'ds-submission-section-container',
+  styleUrls: [],
+  templateUrl: '../../../shared/theme-support/themed.component.html',
+  standalone: true,
+  imports: [SubmissionSectionContainerComponent],
+})
+export class ThemedSubmissionSectionContainerComponent extends ThemedComponent<SubmissionSectionContainerComponent> {
+  @Input() collectionId: string;
+  @Input() sectionData: SectionDataObject;
+  @Input() submissionId: string;
+
+  protected inAndOutputNames: (keyof SubmissionSectionContainerComponent & keyof this)[] = ['collectionId', 'sectionData', 'submissionId'];
+
+  protected getComponentName(): string {
+    return 'SubmissionSectionContainerComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../../themes/${themeName}/app/submission/sections/container/section-container.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./section-container.component`);
+  }
+}

src/themes/custom/app/submission/edit/submission-edit.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 import { SubmissionEditComponent as BaseComponent } from '../../../../../app/submission/edit/submission-edit.component';
-import { SubmissionFormComponent } from '../../../../../app/submission/form/submission-form.component';
+import { ThemedSubmissionFormComponent } from '../../../../../app/submission/form/themed-submission-form.component';
 
 /**
  * This component allows to edit an existing workspaceitem/workflowitem.
@@ -14,7 +14,7 @@ import { SubmissionFormComponent } from '../../../../../app/submission/form/subm
   templateUrl: '../../../../../app/submission/edit/submission-edit.component.html',
   standalone: true,
   imports: [
-    SubmissionFormComponent,
+    ThemedSubmissionFormComponent,
   ],
 })
 export class SubmissionEditComponent extends BaseComponent {

src/themes/custom/app/submission/form/footer/submission-form-footer.component.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { BtnDisabledDirective } from '../../../../../../app/shared/btn-disabled.directive';
+import { BrowserOnlyPipe } from '../../../../../../app/shared/utils/browser-only.pipe';
+import { SubmissionFormFooterComponent as BaseComponent } from '../../../../../../app/submission/form/footer/submission-form-footer.component';
+
+@Component({
+  selector: 'ds-themed-submission-form-footer',
+  // styleUrls: ['./submission-form-footer.component.scss'],
+  styleUrls: ['../../../../../../app/submission/form/footer/submission-form-footer.component.scss'],
+  // templateUrl: './submission-form-footer.component.html'
+  templateUrl: '../../../../../../app/submission/form/footer/submission-form-footer.component.html',
+  standalone: true,
+  imports: [CommonModule, BrowserOnlyPipe, TranslateModule, BtnDisabledDirective],
+})
+export class SubmissionFormFooterComponent extends BaseComponent {
+
+}

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

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+import { ThemedLoadingComponent } from '../../../../../app/shared/loading/themed-loading.component';
+import { SubmissionFormCollectionComponent } from '../../../../../app/submission/form/collection/submission-form-collection.component';
+import { ThemedSubmissionFormFooterComponent } from '../../../../../app/submission/form/footer/themed-submission-form-footer.component';
+import { SubmissionFormSectionAddComponent } from '../../../../../app/submission/form/section-add/submission-form-section-add.component';
+import { SubmissionFormComponent as BaseComponent } from '../../../../../app/submission/form/submission-form.component';
+import { ThemedSubmissionUploadFilesComponent } from '../../../../../app/submission/form/submission-upload-files/themed-submission-upload-files.component';
+import { ThemedSubmissionSectionContainerComponent } from '../../../../../app/submission/sections/container/themed-section-container.component';
+
+@Component({
+  selector: 'ds-themed-submission-form',
+  // styleUrls: ['./submission-form.component.scss'],
+  styleUrls: ['../../../../../app/submission/form/submission-form.component.scss'],
+  // templateUrl: './submission-form.component.html'
+  templateUrl: '../../../../../app/submission/form/submission-form.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ThemedLoadingComponent,
+    ThemedSubmissionSectionContainerComponent,
+    ThemedSubmissionFormFooterComponent,
+    ThemedSubmissionUploadFilesComponent,
+    SubmissionFormCollectionComponent,
+    SubmissionFormSectionAddComponent,
+  ],
+})
+export class SubmissionFormComponent extends BaseComponent {
+
+}

src/themes/custom/app/submission/sections/container/section-container.component.ts

@@ -0,0 +1,33 @@
+import {
+  AsyncPipe,
+  NgClass,
+  NgComponentOutlet,
+} from '@angular/common';
+import { Component } from '@angular/core';
+import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { AlertComponent } from '../../../../../../app/shared/alert/alert.component';
+import { SubmissionSectionContainerComponent as BaseComponent } from '../../../../../../app/submission/sections/container/section-container.component';
+import { SectionsDirective } from '../../../../../../app/submission/sections/sections.directive';
+
+@Component({
+  selector: 'ds-themed-submission-upload-section-file',
+  // styleUrls: ['./section-container.component.scss'],
+  styleUrls: ['../../../../../../app/submission/sections/container/section-container.component.scss'],
+  // templateUrl: './section-container.component.html'
+  templateUrl: '../../../../../../app/submission/sections/container/section-container.component.html',
+  standalone: true,
+  imports: [
+    AlertComponent,
+    NgbAccordionModule,
+    NgComponentOutlet,
+    TranslateModule,
+    NgClass,
+    AsyncPipe,
+    SectionsDirective,
+  ],
+})
+export class SubmissionSectionContainerComponent extends BaseComponent {
+
+}

src/themes/custom/lazy-theme.module.ts

@@ -100,16 +100,18 @@ import { CommunityStatisticsPageComponent } from './app/statistics-page/communit
 import { ItemStatisticsPageComponent } from './app/statistics-page/item-statistics-page/item-statistics-page.component';
 import { SiteStatisticsPageComponent } from './app/statistics-page/site-statistics-page/site-statistics-page.component';
 import { SubmissionEditComponent } from './app/submission/edit/submission-edit.component';
+import { SubmissionFormFooterComponent } from './app/submission/form/footer/submission-form-footer.component';
+import { SubmissionFormComponent } from './app/submission/form/submission-form.component';
 import { SubmissionUploadFilesComponent } from './app/submission/form/submission-upload-files/submission-upload-files.component';
 import { SubmissionImportExternalComponent } from './app/submission/import-external/submission-import-external.component';
+import { SubmissionSectionContainerComponent } from './app/submission/sections/container/section-container.component';
 import { SubmissionSectionUploadFileComponent } from './app/submission/sections/upload/file/section-upload-file.component';
 import { SubmissionSubmitComponent } from './app/submission/submit/submission-submit.component';
 import { ThumbnailComponent } from './app/thumbnail/thumbnail.component';
 import { WorkflowItemDeleteComponent } from './app/workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component';
 import { WorkflowItemSendBackComponent } from './app/workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component';
 import { WorkspaceItemsDeletePageComponent } from './app/workspaceitems-edit-page/workspaceitems-delete-page/workspaceitems-delete-page.component';
 
-
 const DECLARATIONS = [
   FileSectionComponent,
   HomePageComponent,
@@ -204,6 +206,9 @@ const DECLARATIONS = [
   AdminSearchPageComponent,
   AdminWorkflowPageComponent,
   SearchResultsSkeletonComponent,
+  SubmissionSectionContainerComponent,
+  SubmissionFormFooterComponent,
+  SubmissionFormComponent,
 ];
 
 @NgModule({