Merge pull request #4080 from atmire/themed-SubmissionComponents_contribute-main

Themed Submission Components

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

@@ -105,6 +105,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

@@ -37,12 +37,12 @@ import { HALEndpointServiceStub } from '../../shared/testing/hal-endpoint-servic
 import { SubmissionServiceStub } from '../../shared/testing/submission-service.stub';
 import { createTestComponent } from '../../shared/testing/utils.test';
 import { ThemeService } from '../../shared/theme-support/theme.service';
-import { SubmissionSectionContainerComponent } from '../sections/container/section-container.component';
+import { ThemedSubmissionSectionContainerComponent } from '../sections/container/themed-section-container.component';
 import { SectionsService } from '../sections/sections.service';
 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 { SubmissionFormComponent } from './submission-form.component';
 import { ThemedSubmissionUploadFilesComponent } from './submission-upload-files/themed-submission-upload-files.component';
@@ -84,8 +84,8 @@ describe('SubmissionFormComponent Component', () => {
         remove: {
           imports: [
             ThemedLoadingComponent,
-            SubmissionSectionContainerComponent,
-            SubmissionFormFooterComponent,
+            ThemedSubmissionSectionContainerComponent,
+            ThemedSubmissionFormFooterComponent,
             ThemedSubmissionUploadFilesComponent,
             SubmissionFormCollectionComponent,
             SubmissionFormSectionAddComponent,

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

@@ -38,14 +38,14 @@ 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';
 
@@ -53,14 +53,14 @@ import { ThemedSubmissionUploadFilesComponent } from './submission-upload-files/
  * 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;
+
+  @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-base-submission-section-container',
+  // 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,8 +100,11 @@ 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';
@@ -109,7 +112,6 @@ import { WorkflowItemDeleteComponent } from './app/workflowitems-edit-page/workf
 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({