make components standalone and clean up routing of ImportModule

src/app/app.routing.ts

@@ -22,7 +22,6 @@ import { UserAccountComponent } from "./core/user/user-account/user-account.comp
 import { SupportComponent } from "./core/support/support/support.component";
 import { AuthGuard } from "./core/session/auth.guard";
 import { LoginComponent } from "./core/session/login/login.component";
-import { ImportComponent } from "./features/import/import/import.component";
 
 /**
  * Marks a class to be the target when routing.
@@ -64,9 +63,6 @@ export const allRoutes: Routes = [
   { path: "login", component: LoginComponent },
   { path: "404", component: NotFoundComponent },
 
-  // TODO: properly register this with @RouteTarget() ...
-  { path: "import", component: ImportComponent },
-
   {
     path: "**",
     pathMatch: "full",

src/app/features/import/import-additional-actions/import-additional-actions.component.spec.ts

@@ -1,17 +1,18 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 
 import { ImportAdditionalActionsComponent } from "./import-additional-actions.component";
+import { EntityTypeLabelPipe } from "../../../core/entity-components/entity-type-label/entity-type-label.pipe";
+import { MatDialog } from "@angular/material/dialog";
 import { MockedTestingModule } from "../../../utils/mocked-testing.module";
-import { ImportModule } from "../import.module";
 
 describe("ImportAdditionalActionsComponent", () => {
   let component: ImportAdditionalActionsComponent;
   let fixture: ComponentFixture<ImportAdditionalActionsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ImportModule, MockedTestingModule],
-      declarations: [ImportAdditionalActionsComponent],
+      imports: [ImportAdditionalActionsComponent, MockedTestingModule],
+      providers: [EntityTypeLabelPipe, { provide: MatDialog, useValue: null }],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ImportAdditionalActionsComponent);

src/app/features/import/import-additional-actions/import-additional-actions.component.ts

@@ -7,11 +7,20 @@ import {
   SimpleChanges,
 } from "@angular/core";
 import { Entity } from "../../../core/entity/model/entity";
-import { FormControl, FormGroup } from "@angular/forms";
+import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms";
 import { EntityMapperService } from "../../../core/entity/entity-mapper.service";
 import { EntityTypeLabelPipe } from "../../../core/entity-components/entity-type-label/entity-type-label.pipe";
 import { AdditionalImportAction } from "./additional-import-action";
 import { ImportService } from "../import.service";
+import { MatListModule } from "@angular/material/list";
+import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { NgForOf, NgIf } from "@angular/common";
+import { DisplayEntityComponent } from "../../../core/entity-components/entity-select/display-entity/display-entity.component";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { BasicAutocompleteComponent } from "../../../core/configurable-enum/basic-autocomplete/basic-autocomplete.component";
+import { MatButtonModule } from "@angular/material/button";
+import { HelpButtonComponent } from "../../../core/common-components/help-button/help-button.component";
 
 /**
  * Import sub-step: Let user select additional import actions like adding entities to a group entity.
@@ -20,6 +29,22 @@ import { ImportService } from "../import.service";
   selector: "app-import-additional-actions",
   templateUrl: "./import-additional-actions.component.html",
   styleUrls: ["./import-additional-actions.component.scss"],
+  standalone: true,
+  imports: [
+    MatListModule,
+    FontAwesomeModule,
+    MatTooltipModule,
+    NgForOf,
+    EntityTypeLabelPipe,
+    DisplayEntityComponent,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    BasicAutocompleteComponent,
+    MatButtonModule,
+    HelpButtonComponent,
+    NgIf,
+  ],
+  providers: [EntityTypeLabelPipe],
 })
 export class ImportAdditionalActionsComponent implements OnChanges {
   @Input() entityType: string;

src/app/features/import/import-additional-actions/import-additional-actions.stories.ts

@@ -2,43 +2,24 @@ import { Meta, Story } from "@storybook/angular/types-6-0";
 import { moduleMetadata } from "@storybook/angular";
 import { StorybookBaseModule } from "../../../utils/storybook-base.module";
 import { ImportAdditionalActionsComponent } from "./import-additional-actions.component";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { BasicAutocompleteComponent } from "../../../core/configurable-enum/basic-autocomplete/basic-autocomplete.component";
-import { DisplayEntityComponent } from "../../../core/entity-components/entity-select/display-entity/display-entity.component";
 import { EntityMapperService } from "../../../core/entity/entity-mapper.service";
 import { mockEntityMapper } from "../../../core/entity/mock-entity-mapper-service";
-import { EntityTypeLabelPipe } from "../../../core/entity-components/entity-type-label/entity-type-label.pipe";
 import {
   IMPORT_SAMPLE_ADDITIONAL_ACTIONS,
   IMPORT_SAMPLE_LINKABLE_DATA,
 } from "../import/import-sample-raw-data";
-import { MatButtonModule } from "@angular/material/button";
-import { MatListModule } from "@angular/material/list";
-import { HelpButtonComponent } from "../../../core/common-components/help-button/help-button.component";
-import { ReactiveFormsModule } from "@angular/forms";
 
 export default {
   title: "Features/Import/2b Select Additional Actions",
   component: ImportAdditionalActionsComponent,
   decorators: [
     moduleMetadata({
-      imports: [
-        StorybookBaseModule,
-        MatFormFieldModule,
-        BasicAutocompleteComponent,
-        DisplayEntityComponent,
-        MatButtonModule,
-        MatListModule,
-        HelpButtonComponent,
-        ReactiveFormsModule,
-      ],
-      declarations: [ImportAdditionalActionsComponent],
+      imports: [ImportAdditionalActionsComponent, StorybookBaseModule],
       providers: [
         {
           provide: EntityMapperService,
           useValue: mockEntityMapper(IMPORT_SAMPLE_LINKABLE_DATA),
         },
-        EntityTypeLabelPipe,
       ],
     }),
   ],

src/app/features/import/import-column-mapping/date-value-mapping/date-value-mapping.component.html

@@ -1,21 +1,23 @@
 <mat-dialog-content>
   <mat-form-field>
     <mat-label>Date format</mat-label>
-    <input [formControl]="format" matInput/>
-    <mat-error *ngIf="format.errors">
-      Format cannot parse all dates
-    </mat-error>
+    <input [formControl]="format" matInput />
+    <mat-error *ngIf="format.errors"> Format cannot parse all dates</mat-error>
   </mat-form-field>
+
   <mat-list>
     <mat-list-item
       *ngFor="let val of values"
-      [ngClass]="{'invalid': !val.parsed}"
+      [ngClass]="{ invalid: !val.parsed }"
     >
       {{ val.value }} -> {{ val.parsed | date }}
     </mat-list-item>
   </mat-list>
 </mat-dialog-content>
+
 <mat-dialog-actions>
-  <button mat-raised-button color="accent" (click)="save()">Save & Close</button>
+  <button mat-raised-button color="accent" (click)="save()">
+    Save & Close
+  </button>
   <button mat-stroked-button matDialogClose>Cancel</button>
 </mat-dialog-actions>

src/app/features/import/import-column-mapping/date-value-mapping/date-value-mapping.component.spec.ts

@@ -6,7 +6,6 @@ import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import moment from "moment";
 import { ConfirmationDialogService } from "../../../../core/confirmation-dialog/confirmation-dialog.service";
-import { ImportModule } from "../../import.module";
 
 describe("DateValueMappingComponent", () => {
   let component: DateValueMappingComponent;
@@ -17,8 +16,7 @@ describe("DateValueMappingComponent", () => {
   beforeEach(async () => {
     data = { values, col: { column: "" }, entityType: undefined };
     await TestBed.configureTestingModule({
-      imports: [ImportModule, NoopAnimationsModule],
-      declarations: [DateValueMappingComponent],
+      imports: [DateValueMappingComponent, NoopAnimationsModule],
       providers: [
         { provide: MAT_DIALOG_DATA, useValue: data },
         { provide: MatDialogRef, useValue: { close: () => undefined } },

src/app/features/import/import-column-mapping/date-value-mapping/date-value-mapping.component.ts

@@ -1,14 +1,34 @@
 import { Component, Inject } from "@angular/core";
-import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from "@angular/material/dialog";
 import moment from "moment/moment";
-import { FormControl } from "@angular/forms";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
 import { ConfirmationDialogService } from "../../../../core/confirmation-dialog/confirmation-dialog.service";
 import { MappingDialogData } from "../import-column-mapping.component";
+import { MatInputModule } from "@angular/material/input";
+import { DatePipe, NgClass, NgForOf, NgIf } from "@angular/common";
+import { MatListModule } from "@angular/material/list";
+import { MatButtonModule } from "@angular/material/button";
 
 @Component({
   selector: "app-date-value-mapping",
   templateUrl: "./date-value-mapping.component.html",
   styleUrls: ["./date-value-mapping.component.scss"],
+  standalone: true,
+  imports: [
+    MatDialogModule,
+    MatInputModule,
+    ReactiveFormsModule,
+    NgIf,
+    MatListModule,
+    NgForOf,
+    NgClass,
+    DatePipe,
+    MatButtonModule,
+  ],
 })
 export class DateValueMappingComponent {
   format = new FormControl("");

src/app/features/import/import-column-mapping/enum-value-mapping/enum-value-mapping.component.spec.ts

@@ -1,7 +1,6 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 
 import { EnumValueMappingComponent } from "./enum-value-mapping.component";
-import { ImportModule } from "../../import.module";
 import { MappingDialogData } from "../import-column-mapping.component";
 import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import { Child } from "../../../../child-dev-project/children/model/child";
@@ -22,8 +21,7 @@ describe("EnumValueMappingComponent", () => {
       entityType: Child,
     };
     await TestBed.configureTestingModule({
-      declarations: [EnumValueMappingComponent],
-      imports: [ImportModule, MockedTestingModule],
+      imports: [EnumValueMappingComponent, MockedTestingModule],
       providers: [
         { provide: MAT_DIALOG_DATA, useValue: data },
         { provide: MatDialogRef, useValue: { close: () => undefined } },

src/app/features/import/import-column-mapping/enum-value-mapping/enum-value-mapping.component.ts

@@ -1,15 +1,30 @@
 import { Component, Inject } from "@angular/core";
-import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from "@angular/material/dialog";
 import { FormBuilder, FormControl, FormGroup } from "@angular/forms";
 import { ConfirmationDialogService } from "../../../../core/confirmation-dialog/confirmation-dialog.service";
 import { EntitySchemaService } from "../../../../core/entity/schema/entity-schema.service";
 import { MappingDialogData } from "../import-column-mapping.component";
 import { EntitySchemaField } from "../../../../core/entity/schema/entity-schema-field";
+import { KeyValuePipe, NgForOf } from "@angular/common";
+import { DynamicComponentDirective } from "../../../../core/view/dynamic-components/dynamic-component.directive";
+import { MatButtonModule } from "@angular/material/button";
 
 @Component({
   selector: "app-enum-value-mapping",
   templateUrl: "./enum-value-mapping.component.html",
   styleUrls: ["./enum-value-mapping.component.scss"],
+  standalone: true,
+  imports: [
+    MatDialogModule,
+    NgForOf,
+    KeyValuePipe,
+    DynamicComponentDirective,
+    MatButtonModule,
+  ],
 })
 export class EnumValueMappingComponent {
   form: FormGroup;

src/app/features/import/import-column-mapping/import-column-mapping.component.spec.ts

@@ -2,7 +2,6 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
 
 import { ImportColumnMappingComponent } from "./import-column-mapping.component";
 import { MockedTestingModule } from "../../../utils/mocked-testing.module";
-import { ImportModule } from "../import.module";
 import { MatDialog } from "@angular/material/dialog";
 import { EnumValueMappingComponent } from "./enum-value-mapping/enum-value-mapping.component";
 import { Child } from "../../../child-dev-project/children/model/child";
@@ -15,8 +14,7 @@ describe("ImportMapColumnsComponent", () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MockedTestingModule, ImportModule],
-      declarations: [ImportColumnMappingComponent],
+      imports: [MockedTestingModule, ImportColumnMappingComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ImportColumnMappingComponent);

src/app/features/import/import-column-mapping/import-column-mapping.component.ts

@@ -12,6 +12,12 @@ import { EntityRegistry } from "../../../core/entity/database-entity.decorator";
 import { EntityConstructor } from "../../../core/entity/model/entity";
 import { MatDialog } from "@angular/material/dialog";
 import { ImportService } from "../import.service";
+import { HelpButtonComponent } from "../../../core/common-components/help-button/help-button.component";
+import { NgForOf, NgIf } from "@angular/common";
+import { MatInputModule } from "@angular/material/input";
+import { BasicAutocompleteComponent } from "../../../core/configurable-enum/basic-autocomplete/basic-autocomplete.component";
+import { FormsModule } from "@angular/forms";
+import { MatButtonModule } from "@angular/material/button";
 
 /**
  * Import sub-step: Let user map columns from import data to entity properties
@@ -21,6 +27,16 @@ import { ImportService } from "../import.service";
   selector: "app-import-column-mapping",
   templateUrl: "./import-column-mapping.component.html",
   styleUrls: ["./import-column-mapping.component.scss"],
+  standalone: true,
+  imports: [
+    HelpButtonComponent,
+    NgForOf,
+    MatInputModule,
+    BasicAutocompleteComponent,
+    FormsModule,
+    MatButtonModule,
+    NgIf,
+  ],
 })
 export class ImportColumnMappingComponent implements OnChanges {
   @Input() rawData: any[] = [];

src/app/features/import/import-column-mapping/import-column-mapping.stories.ts

@@ -7,26 +7,13 @@ import {
   IMPORT_SAMPLE_RAW_DATA,
 } from "../import/import-sample-raw-data";
 import { ImportService } from "../import.service";
-import { BasicAutocompleteComponent } from "../../../core/configurable-enum/basic-autocomplete/basic-autocomplete.component";
-import { FormsModule } from "@angular/forms";
-import { MatButtonModule } from "@angular/material/button";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { HelpButtonComponent } from "../../../core/common-components/help-button/help-button.component";
 
 export default {
   title: "Features/Import/3 Map Columns",
   component: ImportColumnMappingComponent,
   decorators: [
     moduleMetadata({
-      imports: [
-        StorybookBaseModule,
-        MatFormFieldModule,
-        MatButtonModule,
-        BasicAutocompleteComponent,
-        FormsModule,
-        HelpButtonComponent,
-      ],
-      declarations: [ImportColumnMappingComponent],
+      imports: [StorybookBaseModule, ImportColumnMappingComponent],
       providers: [ImportService],
     }),
   ],

src/app/features/import/import-confirm-summary/import-confirm-summary.component.spec.ts

@@ -9,7 +9,6 @@ import { ImportConfirmSummaryComponent } from "./import-confirm-summary.componen
 import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import { ImportService } from "../import.service";
 import { MatSnackBar } from "@angular/material/snack-bar";
-import { ImportModule } from "../import.module";
 import { ImportMetadata } from "../import-metadata";
 import { of } from "rxjs";
 
@@ -28,7 +27,7 @@ describe("ImportConfirmSummaryComponent", () => {
     mockDialogRef = jasmine.createSpyObj(["close"]);
 
     await TestBed.configureTestingModule({
-      imports: [ImportModule],
+      imports: [ImportConfirmSummaryComponent],
       providers: [
         { provide: MAT_DIALOG_DATA, useValue: {} },
         { provide: MatDialogRef, useValue: mockDialogRef },

src/app/features/import/import-confirm-summary/import-confirm-summary.component.ts

@@ -1,9 +1,16 @@
 import { Component, Inject } from "@angular/core";
 import { ImportService } from "../import.service";
-import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from "@angular/material/dialog";
 import { Entity } from "../../../core/entity/model/entity";
 import { ImportMetadata, ImportSettings } from "../import-metadata";
 import { MatSnackBar } from "@angular/material/snack-bar";
+import { NgIf } from "@angular/common";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { MatButtonModule } from "@angular/material/button";
 
 /**
  * Data passed into Import Confirmation Dialog.
@@ -13,10 +20,15 @@ export interface ImportDialogData {
   importSettings: ImportSettings;
 }
 
+/**
+ * Summary screen and confirmation / execution dialog for running an import.
+ */
 @Component({
   selector: "app-import-confirm-summary",
   templateUrl: "./import-confirm-summary.component.html",
   styleUrls: ["./import-confirm-summary.component.scss"],
+  standalone: true,
+  imports: [MatDialogModule, NgIf, MatProgressBarModule, MatButtonModule],
 })
 export class ImportConfirmSummaryComponent {
   importInProgress: boolean;