Merge pull request #17 from Dangl-IT/feature/FE-#16-update-angular-to…

…-v18-2-11

Feature/fe #16 update angular to v18 2 11

src/ipa-bcfier-ui/package.json

@@ -6,35 +6,35 @@
     "start": "ng serve",
     "build": "npm run install-fonts && ng build --configuration production",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test",
+    "test": "ng test --no-watch",
     "install-fonts": "node ./copyFonts.js"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.3.0",
-    "@angular/cdk": "^17.3.2",
-    "@angular/common": "^17.3.0",
-    "@angular/compiler": "^17.3.0",
-    "@angular/core": "^17.3.0",
-    "@angular/forms": "^17.3.0",
-    "@angular/material": "^17.3.2",
-    "@angular/platform-browser": "^17.3.0",
-    "@angular/platform-browser-dynamic": "^17.3.0",
-    "@angular/router": "^17.3.0",
+    "@angular/animations": "^18.2.11",
+    "@angular/cdk": "^18.2.12",
+    "@angular/common": "^18.2.11",
+    "@angular/compiler": "^18.2.11",
+    "@angular/core": "^18.2.11",
+    "@angular/forms": "^18.2.11",
+    "@angular/material": "^18.2.12",
+    "@angular/platform-browser": "^18.2.11",
+    "@angular/platform-browser-dynamic": "^18.2.11",
+    "@angular/router": "^18.2.11",
     "@microsoft/signalr": "6.0.4",
     "@ngx-dropzone/cdk": "^17.2.0",
     "@ngx-dropzone/material": "^17.2.0",
     "ng-lightquery": "^2.4.0",
-    "ngx-toastr": "18.0.0",
+    "ngx-toastr": "19.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "uuid": "9.0.1",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.2",
-    "@angular/cli": "^17.3.2",
-    "@angular/compiler-cli": "^17.3.0",
+    "@angular-devkit/build-angular": "^18.2.11",
+    "@angular/cli": "^18.2.11",
+    "@angular/compiler-cli": "^18.2.11",
     "@types/jasmine": "~5.1.0",
     "@types/uuid": "9.0.8",
     "google-fonts-helper": "^3.5.0",

src/ipa-bcfier-ui/src/app/app.component.spec.ts

@@ -1,10 +1,11 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
+import { AppTestingModule } from './app.testing.module';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent],
+      imports: [AppComponent, AppTestingModule],
     }).compileComponents();
   });
 
@@ -14,16 +15,4 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have the 'ipa-bcfier-ui' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('ipa-bcfier-ui');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, ipa-bcfier-ui');
-  });
 });

src/ipa-bcfier-ui/src/app/app.testing.module.ts

@@ -0,0 +1,23 @@
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { NgModule } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { RouterModule } from '@angular/router';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ToastrModule, ToastrService } from 'ngx-toastr';
+import { provideNativeDateAdapter } from '@angular/material/core';
+
+@NgModule({
+  declarations: [],
+  imports: [RouterModule.forRoot([]), ToastrModule, NoopAnimationsModule],
+  exports: [ToastrModule, RouterModule],
+  providers: [
+    { provide: MatDialogRef, useValue: { close: () => {} } },
+    { provide: MAT_DIALOG_DATA, useValue: [] },
+    { provide: ToastrService, useValue: {} },
+    provideNativeDateAdapter(),
+    provideHttpClient(),
+    provideHttpClientTesting()
+  ]
+})
+export class AppTestingModule {}

src/ipa-bcfier-ui/src/app/components/add-snapshot-viewpoint/add-snapshot-viewpoint.component.spec.ts

@@ -1,17 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AddSnapshotViewpointComponent } from './add-snapshot-viewpoint.component';
+import { AppTestingModule } from '../../app.testing.module';
 
 describe('AddSnapshotViewpointComponent', () => {
   let component: AddSnapshotViewpointComponent;
   let fixture: ComponentFixture<AddSnapshotViewpointComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AddSnapshotViewpointComponent]
+      imports: [AddSnapshotViewpointComponent, AppTestingModule]
     })
     .compileComponents();
-    
+
     fixture = TestBed.createComponent(AddSnapshotViewpointComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/ipa-bcfier-ui/src/app/components/add-string-value/add-string-value.component.spec.ts

@@ -1,17 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AddStringValueComponent } from './add-string-value.component';
+import { AppTestingModule } from '../../app.testing.module';
 
 describe('AddStringValueComponent', () => {
   let component: AddStringValueComponent;
   let fixture: ComponentFixture<AddStringValueComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AddStringValueComponent]
+      imports: [AddStringValueComponent, AppTestingModule]
     })
     .compileComponents();
-    
+
     fixture = TestBed.createComponent(AddStringValueComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/ipa-bcfier-ui/src/app/components/add-user/add-user.component.spec.ts

@@ -1,17 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AddUserComponent } from './add-user.component';
+import { AppTestingModule } from '../../app.testing.module';
 
 describe('AddUserComponent', () => {
   let component: AddUserComponent;
   let fixture: ComponentFixture<AddUserComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AddUserComponent]
+      imports: [AddUserComponent, AppTestingModule]
     })
     .compileComponents();
-    
+
     fixture = TestBed.createComponent(AddUserComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/ipa-bcfier-ui/src/app/components/bcf-file/bcf-file.component.html

@@ -1,4 +1,4 @@
-<div class="wrapper">
+<div class="wrapper" *ngIf="bcfFile">
   <div class="issue-list">
     <mat-drawer-container [hasBackdrop]="true">
       <mat-drawer #drawer mode="over">

src/ipa-bcfier-ui/src/app/components/bcf-file/bcf-file.component.spec.ts

@@ -1,17 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { BcfFileComponent } from './bcf-file.component';
+import { AppTestingModule } from '../../app.testing.module';
 
 describe('BcfFileComponent', () => {
   let component: BcfFileComponent;
   let fixture: ComponentFixture<BcfFileComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [BcfFileComponent]
+      imports: [BcfFileComponent, AppTestingModule]
     })
     .compileComponents();
-    
+
     fixture = TestBed.createComponent(BcfFileComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/ipa-bcfier-ui/src/app/components/bcf-file/bcf-file.component.ts

@@ -88,6 +88,7 @@ export class BcfFileComponent {
   private dialog = inject(MatDialog);
 
   ngOnInit() {
+    if (!this.bcfFile) return;
     this.selectedTopic = this.bcfFile.topics[0] || null;
     this.topicMessengerService.setSelectedTopic(this.selectedTopic);
     this.cdr.detectChanges();

src/ipa-bcfier-ui/src/app/components/bulk-edit-topic/bulk-edit-topic.component.spec.ts

@@ -1,14 +1,15 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { BulkTopicEditComponent } from './bulk-edit-topic.component';
+import { AppTestingModule } from '../../app.testing.module';
 
 describe('BulkTopicEditComponent', () => {
   let component: BulkTopicEditComponent;
   let fixture: ComponentFixture<BulkTopicEditComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [BulkTopicEditComponent],
+      imports: [BulkTopicEditComponent, AppTestingModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(BulkTopicEditComponent);

src/ipa-bcfier-ui/src/app/components/cad-error-dialog/cad-error-dialog.component.spec.ts

@@ -1,17 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CadErrorDialogComponent } from './cad-error-dialog.component';
+import { AppTestingModule } from '../../app.testing.module';
 
 describe('CadErrorDialogComponent', () => {
   let component: CadErrorDialogComponent;
   let fixture: ComponentFixture<CadErrorDialogComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CadErrorDialogComponent]
+      imports: [CadErrorDialogComponent, AppTestingModule]
     })
     .compileComponents();
-    
+
     fixture = TestBed.createComponent(CadErrorDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/ipa-bcfier-ui/src/app/components/comments-detail/comments-detail.component.spec.ts

@@ -1,14 +1,15 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CommentsDetailComponent } from './comments-detail.component';
+import { AppTestingModule } from '../../app.testing.module';
 
 describe('CommentsDetailComponent', () => {
   let component: CommentsDetailComponent;
   let fixture: ComponentFixture<CommentsDetailComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CommentsDetailComponent],
+      imports: [CommentsDetailComponent, AppTestingModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(CommentsDetailComponent);

src/ipa-bcfier-ui/src/app/components/image-preview/image-preview.component.spec.ts

@@ -1,17 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ImagePreviewComponent } from './image-preview.component';
+import { AppTestingModule } from '../../app.testing.module';
 
 describe('ImagePreviewComponent', () => {
   let component: ImagePreviewComponent;
   let fixture: ComponentFixture<ImagePreviewComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ImagePreviewComponent]
+      imports: [ImagePreviewComponent, AppTestingModule]
     })
     .compileComponents();
-    
+
     fixture = TestBed.createComponent(ImagePreviewComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/ipa-bcfier-ui/src/app/components/navisworks-clash-selection/navisworks-clash-selection.component.spec.ts

@@ -1,17 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { NavisworksClashSelectionComponent } from './navisworks-clash-selection.component';
+import { AppTestingModule } from '../../app.testing.module';
 
 describe('NavisworksClashSelectionComponent', () => {
   let component: NavisworksClashSelectionComponent;
   let fixture: ComponentFixture<NavisworksClashSelectionComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [NavisworksClashSelectionComponent]
+      imports: [NavisworksClashSelectionComponent, AppTestingModule]
     })
     .compileComponents();
-    
+
     fixture = TestBed.createComponent(NavisworksClashSelectionComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/ipa-bcfier-ui/src/app/components/projects-table/projects-table.component.html

@@ -76,14 +76,15 @@
       </td>
     </tr>
   </table>
-
-  <mat-paginator
-    [pageSizeOptions]="[5, 10, 25, 100]"
-    [length]="paginationResult?.totalCount"
-    [pageSize]="paginationResult?.pageSize"
-    [pageIndex]="paginationResult.page - 1"
-    (page)="onPage($event)"
-    [showFirstLastButtons]="true"
-    class="dark-theme"
-  ></mat-paginator>
+  @if(paginationResult) {
+    <mat-paginator
+      [pageSizeOptions]="[5, 10, 25, 100]"
+      [length]="paginationResult.totalCount"
+      [pageSize]="paginationResult.pageSize"
+      [pageIndex]="paginationResult.page - 1"
+      (page)="onPage($event)"
+      [showFirstLastButtons]="true"
+      class="dark-theme"
+    ></mat-paginator>
+  }
 </div>

src/ipa-bcfier-ui/src/app/components/settings/settings.component.spec.ts

@@ -1,17 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { SettingsComponent } from './settings.component';
+import { AppTestingModule } from '../../app.testing.module';
 
 describe('SettingsComponent', () => {
   let component: SettingsComponent;
   let fixture: ComponentFixture<SettingsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SettingsComponent]
+      imports: [SettingsComponent, AppTestingModule]
     })
     .compileComponents();
-    
+
     fixture = TestBed.createComponent(SettingsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/ipa-bcfier-ui/src/app/components/top-menu/top-menu.component.spec.ts

@@ -1,17 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TopMenuComponent } from './top-menu.component';
+import { AppTestingModule } from '../../app.testing.module';
 
 describe('TopMenuComponent', () => {
   let component: TopMenuComponent;
   let fixture: ComponentFixture<TopMenuComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TopMenuComponent]
+      imports: [TopMenuComponent, AppTestingModule]
     })
     .compileComponents();
-    
+
     fixture = TestBed.createComponent(TopMenuComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/ipa-bcfier-ui/src/app/components/topic-detail/topic-detail.component.html

@@ -1,4 +1,4 @@
-<div class="wrapper">
+<div class="wrapper" *ngIf="topic">
   <mat-form-field class="top-field dark-theme">
     <mat-label>Title</mat-label>
     <input

src/ipa-bcfier-ui/src/app/components/topic-detail/topic-detail.component.spec.ts

@@ -1,17 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TopicDetailComponent } from './topic-detail.component';
+import { AppTestingModule } from '../../app.testing.module';
 
 describe('TopicDetailComponent', () => {
   let component: TopicDetailComponent;
   let fixture: ComponentFixture<TopicDetailComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TopicDetailComponent]
+      imports: [TopicDetailComponent, AppTestingModule]
     })
     .compileComponents();
-    
+
     fixture = TestBed.createComponent(TopicDetailComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();