Chorehancement: update to Angular v22, 'zoneless' / 'reactive' (#13114)

2026-11-03 13:35:37 +00:00 · 2026-07-10 00:42:16 -07:00
1 parent f244442c65
commit 106b41a15c
@@ -23,10 +23,10 @@ export class ConfirmDialogComponent extends LoadingComponentWithPermissions {
  title = $localize`Confirmation`

  @Input()
-  messageBold
+  messageBold: string

  @Input()
-  message
+  message: string

  @Input()
  btnClass = 'btn-primary'
@@ -38,7 +38,7 @@ export class ConfirmDialogComponent extends LoadingComponentWithPermissions {
  alternativeBtnClass = 'btn-secondary'

  @Input()
-  alternativeBtnCaption
+  alternativeBtnCaption: string

  @Input()
  cancelBtnClass = 'btn-outline-secondary'
@@ -9,9 +9,9 @@
        <label class="form-label" for="metadataDocumentID" i18n>Documents:</label>
        <ul class="list-group"
            cdkDropList
-            [cdkDropListData]="documentIDs"
+            [cdkDropListData]="documentIDs()"
            (cdkDropListDropped)="onDrop($event)">
-            @for (documentID of documentIDs; track documentID) {
+            @for (documentID of documentIDs(); track documentID) {
              @let document = getDocument(documentID);
              @if (document) {
                <li class="list-group-item d-flex align-items-center" cdkDrag>
@@ -36,22 +36,22 @@
        </div>
    <div class="form-group mt-4">
        <label class="form-label" for="metadataDocumentID" i18n>Use metadata from:</label>
-        <select class="form-select" [(ngModel)]="metadataDocumentID">
+        <select class="form-select" [ngModel]="metadataDocumentID()" (ngModelChange)="metadataDocumentID.set($event)">
            <option [ngValue]="-1" i18n>Regenerate all metadata</option>
-            @for (document of documents; track document.id) {
+            @for (document of documents(); track document.id) {
              <option [ngValue]="document.id">{{document.title}}</option>
            }
        </select>
    </div>
    <div class="form-check form-switch mt-4">
-      <input class="form-check-input" type="checkbox" role="switch" id="archiveFallbackSwitch" [(ngModel)]="archiveFallback">
+      <input class="form-check-input" type="checkbox" role="switch" id="archiveFallbackSwitch" [ngModel]="archiveFallback()" (ngModelChange)="archiveFallback.set($event)">
      <label class="form-check-label" for="archiveFallbackSwitch" i18n>Try to include archive version in merge for non-PDF files</label>
    </div>
    <div class="form-check form-switch mt-2">
-      <input class="form-check-input" type="checkbox" role="switch" id="deleteOriginalsSwitch" [(ngModel)]="deleteOriginals" [disabled]="!userOwnsAllDocuments">
+      <input class="form-check-input" type="checkbox" role="switch" id="deleteOriginalsSwitch" [ngModel]="deleteOriginals()" (ngModelChange)="deleteOriginals.set($event)" [disabled]="!userOwnsAllDocuments">
      <label class="form-check-label" for="deleteOriginalsSwitch" i18n>Delete original documents after successful merge</label>
    </div>
-    @if (!archiveFallback) {
+    @if (!archiveFallback()) {
      <p class="small text-muted fst-italic mt-4" i18n>Note that only PDFs will be included.</p>
    }
 </div>
@@ -50,12 +50,12 @@ describe('MergeConfirmDialogComponent', () => {

    component.ngOnInit()

-    expect(component.documents).toEqual(documents)
-    expect(documentService.getFew).toHaveBeenCalledWith(component.documentIDs)
+    expect(component.documents()).toEqual(documents)
+    expect(documentService.getFew).toHaveBeenCalledWith(component.documentIDs())
  })

  it('should move documentIDs on drop', () => {
-    component.documentIDs = [1, 2, 3]
+    component.documentIDs.set([1, 2, 3])
    const event = {
      previousIndex: 1,
      currentIndex: 2,
@@ -63,7 +63,7 @@ describe('MergeConfirmDialogComponent', () => {

    component.onDrop(event as any)

-    expect(component.documentIDs).toEqual([1, 3, 2])
+    expect(component.documentIDs()).toEqual([1, 3, 2])
  })

  it('should get document by ID', () => {
@@ -4,7 +4,7 @@ import {
  moveItemInArray,
 } from '@angular/cdk/drag-drop'
 import { AsyncPipe } from '@angular/common'
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit, inject, signal } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { takeUntil } from 'rxjs'
@@ -36,15 +36,11 @@ export class MergeConfirmDialogComponent
  private documentService = inject(DocumentService)
  private permissionService = inject(PermissionsService)

-  public documentIDs: number[] = []
-  public archiveFallback: boolean = false
-  public deleteOriginals: boolean = false
-  private _documents: Document[] = []
-  get documents(): Document[] {
-    return this._documents
-  }
-
-  public metadataDocumentID: number = -1
+  readonly documentIDs = signal<number[]>([])
+  readonly archiveFallback = signal(false)
+  readonly deleteOriginals = signal(false)
+  readonly documents = signal<Document[]>([])
+  readonly metadataDocumentID = signal(-1)

  constructor() {
    super()
@@ -52,23 +48,25 @@ export class MergeConfirmDialogComponent

  ngOnInit() {
    this.documentService
-      .getFew(this.documentIDs)
+      .getFew(this.documentIDs())
      .pipe(takeUntil(this.unsubscribeNotifier))
      .subscribe((r) => {
-        this._documents = r.results
+        this.documents.set(r.results)
      })
  }

  onDrop(event: CdkDragDrop<number[]>) {
-    moveItemInArray(this.documentIDs, event.previousIndex, event.currentIndex)
+    const documentIDs = this.documentIDs().concat()
+    moveItemInArray(documentIDs, event.previousIndex, event.currentIndex)
+    this.documentIDs.set(documentIDs)
  }

  getDocument(documentID: number): Document {
-    return this.documents.find((d) => d.id === documentID)
+    return this.documents().find((d) => d.id === documentID)
  }

  get userOwnsAllDocuments(): boolean {
-    return this.documents.every((d) =>
+    return this.documents().every((d) =>
      this.permissionService.currentUserOwnsObject(d)
    )
  }
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { ConfirmDialogComponent } from '../confirm-dialog.component'
@@ -14,18 +14,11 @@ export class PasswordRemovalConfirmDialogComponent extends ConfirmDialogComponen
  includeMetadata: boolean = true
  deleteOriginal: boolean = false

-  @Input()
-  override title = $localize`Remove password protection`
-
-  @Input()
-  override message =
-    $localize`Create an unprotected copy or replace the existing file.`
-
-  @Input()
-  override btnCaption = $localize`Start`
-
  constructor() {
    super()
+    this.title = $localize`Remove password protection`
+    this.message = $localize`Create an unprotected copy or replace the existing file.`
+    this.btnCaption = $localize`Start`
  }

  onUpdateDocumentChange(updateDocument: boolean) {
@@ -11,8 +11,8 @@
            </button>
        </div>
        <div class="col-8 d-flex align-items-center">
-            @if (documentID) {
-                <img class="w-75 m-auto" [ngStyle]="{'transform': 'rotate('+rotation+'deg)'}" [src]="documentService.getThumbUrl(documentID)" />
+            @if (documentID()) {
+                <img class="w-75 m-auto" [ngStyle]="{'transform': 'rotate('+rotation()+'deg)'}" [src]="documentService.getThumbUrl(documentID())" />
            }
        </div>
        <div class="col-2 d-flex">
@@ -21,7 +21,7 @@
            </button>
        </div>
    </div>
-    @if (showPDFNote) {
+    @if (showPDFNote()) {
        <p class="small text-muted fst-italic mt-4" i18n>Note that only PDFs will be rotated.</p>
    }
 </div>
@@ -28,7 +28,7 @@ describe('RotateConfirmDialogComponent', () => {
  })

  it('should support rotating the image', () => {
-    component.documentID = 1
+    component.documentID.set(1)
    fixture.detectChanges()
    component.rotate()
    fixture.detectChanges()
@@ -1,5 +1,5 @@
 import { NgStyle } from '@angular/common'
-import { Component, inject } from '@angular/core'
+import { Component, inject, signal } from '@angular/core'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { ConfirmDialogComponent } from '../confirm-dialog.component'
@@ -13,14 +13,12 @@ import { ConfirmDialogComponent } from '../confirm-dialog.component'
 export class RotateConfirmDialogComponent extends ConfirmDialogComponent {
  documentService = inject(DocumentService)

-  public documentID: number
-  public showPDFNote: boolean = true
-
-  // animation is better if we dont normalize yet
-  public rotation: number = 0
+  readonly documentID = signal<number>(undefined)
+  readonly showPDFNote = signal(true)
+  readonly rotation = signal(0)

  public get degrees(): number {
-    let degrees = this.rotation % 360
+    let degrees = this.rotation() % 360
    if (degrees < 0) degrees += 360
    return degrees
  }
@@ -30,6 +28,6 @@ export class RotateConfirmDialogComponent extends ConfirmDialogComponent {
  }

  rotate(clockwise: boolean = true) {
-    this.rotation += clockwise ? 90 : -90
+    this.rotation.update((rotation) => rotation + (clockwise ? 90 : -90))
  }
 }