Chore: update to Angular 20 (#10273)

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -71,6 +71,19 @@ export class BulkEditorComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy
 {
+  private documentTypeService = inject(DocumentTypeService)
+  private tagService = inject(TagService)
+  private correspondentService = inject(CorrespondentService)
+  list = inject(DocumentListViewService)
+  private documentService = inject(DocumentService)
+  private modalService = inject(NgbModal)
+  private openDocumentService = inject(OpenDocumentsService)
+  private settings = inject(SettingsService)
+  private toastService = inject(ToastService)
+  private storagePathService = inject(StoragePathService)
+  private customFieldService = inject(CustomFieldsService)
+  private permissionService = inject(PermissionsService)
+
   tagSelectionModel = new FilterableDropdownSelectionModel(true)
   correspondentSelectionModel = new FilterableDropdownSelectionModel()
   documentTypeSelectionModel = new FilterableDropdownSelectionModel()
@@ -94,23 +107,6 @@ export class BulkEditorComponent
   @Input()
   public disabled: boolean = false
 
-  constructor(
-    private documentTypeService: DocumentTypeService,
-    private tagService: TagService,
-    private correspondentService: CorrespondentService,
-    public list: DocumentListViewService,
-    private documentService: DocumentService,
-    private modalService: NgbModal,
-    private openDocumentService: OpenDocumentsService,
-    private settings: SettingsService,
-    private toastService: ToastService,
-    private storagePathService: StoragePathService,
-    private customFieldService: CustomFieldsService,
-    private permissionService: PermissionsService
-  ) {
-    super()
-  }
-
   applyOnClose: boolean = this.settings.get(
     SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE
   )

src-ui/src/app/components/document-list/bulk-editor/custom-fields-bulk-edit-dialog/custom-fields-bulk-edit-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core'
+import { Component, EventEmitter, Output, inject } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -38,6 +38,9 @@ import { DocumentService } from 'src/app/services/rest/document.service'
   ],
 })
 export class CustomFieldsBulkEditDialogComponent {
+  private activeModal = inject(NgbActiveModal)
+  private documentService = inject(DocumentService)
+
   CustomFieldDataType = CustomFieldDataType
 
   @Output()
@@ -73,11 +76,6 @@ export class CustomFieldsBulkEditDialogComponent {
 
   public documents: number[] = []
 
-  constructor(
-    private activeModal: NgbActiveModal,
-    private documentService: DocumentService
-  ) {}
-
   initForm() {
     Object.keys(this.form.controls).forEach((key) => {
       if (!this._fieldsToAddIds.includes(parseInt(key))) {

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts

@@ -6,6 +6,7 @@ import {
   Input,
   Output,
   ViewChild,
+  inject,
 } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import {
@@ -62,14 +63,10 @@ export class DocumentCardLargeComponent
   extends LoadingComponentWithPermissions
   implements AfterViewInit
 {
-  DisplayField = DisplayField
+  private documentService = inject(DocumentService)
+  settingsService = inject(SettingsService)
 
-  constructor(
-    private documentService: DocumentService,
-    public settingsService: SettingsService
-  ) {
-    super()
-  }
+  DisplayField = DisplayField
 
   @Input()
   selected = false

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -71,14 +71,14 @@
           }
           @if (displayFields.includes(DisplayField.CREATED)) {
             <div class="list-group-item bg-transparent p-0 border-0 d-flex flex-wrap-reverse justify-content-between">
-              <ng-template #dateTooltip>
+              <ng-template #dateCreatedTooltip>
                 <div class="d-flex flex-column text-light">
                   <span i18n>Created: {{ document.created | customDate }}</span>
                   <span i18n>Added: {{ document.added | customDate }}</span>
                   <span i18n>Modified: {{ document.modified | customDate }}</span>
                 </div>
               </ng-template>
-              <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateTooltip">
+              <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateCreatedTooltip">
                 <i-bs width="1em" height="1em" class="me-2 text-muted" name="calendar-event"></i-bs>
                 <small>{{document.created | customDate:'mediumDate'}}</small>
               </div>
@@ -86,14 +86,14 @@
           }
           @if (displayFields.includes(DisplayField.ADDED)) {
             <div class="list-group-item bg-transparent p-0 border-0 d-flex flex-wrap-reverse justify-content-between">
-              <ng-template #dateTooltip>
+              <ng-template #dateAddedTooltip>
                 <div class="d-flex flex-column text-light">
                   <span i18n>Created: {{ document.created | customDate }}</span>
                   <span i18n>Added: {{ document.added | customDate }}</span>
                   <span i18n>Modified: {{ document.modified | customDate }}</span>
                 </div>
               </ng-template>
-              <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateTooltip">
+              <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateAddedTooltip">
                 <i-bs width="1em" height="1em" class="me-2 text-muted" name="calendar-event"></i-bs>
                 <small>{{document.added | customDate:'mediumDate'}}</small>
               </div>

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts

@@ -6,6 +6,7 @@ import {
   Input,
   Output,
   ViewChild,
+  inject,
 } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import {
@@ -63,14 +64,10 @@ export class DocumentCardSmallComponent
   extends LoadingComponentWithPermissions
   implements AfterViewInit
 {
-  DisplayField = DisplayField
+  private documentService = inject(DocumentService)
+  settingsService = inject(SettingsService)
 
-  constructor(
-    private documentService: DocumentService,
-    public settingsService: SettingsService
-  ) {
-    super()
-  }
+  DisplayField = DisplayField
 
   @Input()
   selected = false

src-ui/src/app/components/document-list/document-list.component.ts

@@ -1,6 +1,7 @@
 import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common'
 import {
   Component,
+  inject,
   OnDestroy,
   OnInit,
   QueryList,
@@ -103,25 +104,21 @@ export class DocumentListComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy
 {
+  list = inject(DocumentListViewService)
+  savedViewService = inject(SavedViewService)
+  route = inject(ActivatedRoute)
+  private router = inject(Router)
+  private toastService = inject(ToastService)
+  private modalService = inject(NgbModal)
+  private websocketStatusService = inject(WebsocketStatusService)
+  openDocumentsService = inject(OpenDocumentsService)
+  settingsService = inject(SettingsService)
+  private hotKeyService = inject(HotKeyService)
+  permissionService = inject(PermissionsService)
+
   DisplayField = DisplayField
   DisplayMode = DisplayMode
 
-  constructor(
-    public list: DocumentListViewService,
-    public savedViewService: SavedViewService,
-    public route: ActivatedRoute,
-    private router: Router,
-    private toastService: ToastService,
-    private modalService: NgbModal,
-    private websocketStatusService: WebsocketStatusService,
-    public openDocumentsService: OpenDocumentsService,
-    public settingsService: SettingsService,
-    private hotKeyService: HotKeyService,
-    public permissionService: PermissionsService
-  ) {
-    super()
-  }
-
   @ViewChild('filterEditor')
   private filterEditor: FilterEditorComponent
 

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts

@@ -8,6 +8,7 @@ import {
   OnInit,
   Output,
   ViewChild,
+  inject,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
@@ -240,6 +241,15 @@ export class FilterEditorComponent
   extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy, AfterViewInit
 {
+  private documentTypeService = inject(DocumentTypeService)
+  private tagService = inject(TagService)
+  private correspondentService = inject(CorrespondentService)
+  private documentService = inject(DocumentService)
+  private storagePathService = inject(StoragePathService)
+  permissionsService = inject(PermissionsService)
+  private customFieldService = inject(CustomFieldsService)
+  private searchService = inject(SearchService)
+
   generateFilterName() {
     if (this.filterRules.length == 1) {
       let rule = this.filterRules[0]
@@ -313,19 +323,6 @@ export class FilterEditorComponent
     return ''
   }
 
-  constructor(
-    private documentTypeService: DocumentTypeService,
-    private tagService: TagService,
-    private correspondentService: CorrespondentService,
-    private documentService: DocumentService,
-    private storagePathService: StoragePathService,
-    public permissionsService: PermissionsService,
-    private customFieldService: CustomFieldsService,
-    private searchService: SearchService
-  ) {
-    super()
-  }
-
   @ViewChild('textFilterInput')
   textFilterInput: ElementRef
 

src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.ts

@@ -1,4 +1,11 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  inject,
+} from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -16,7 +23,7 @@ import { TextComponent } from '../../common/input/text/text.component'
   imports: [CheckComponent, TextComponent, FormsModule, ReactiveFormsModule],
 })
 export class SaveViewConfigDialogComponent implements OnInit {
-  constructor(private modal: NgbActiveModal) {}
+  private modal = inject(NgbActiveModal)
 
   @Output()
   public saveClicked = new EventEmitter()