Feature: PDF actions - merge, split & rotate (#6094)

src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.html

@@ -0,0 +1,48 @@
+<div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+</div>
+<div class="modal-body">
+    <div class="row">
+        <div class="col-2 d-flex justify-content-end">
+            <button class="btn btn-secondary mt-auto" (click)="rotate(false)">
+                <i-bs name="arrow-counterclockwise"></i-bs>
+            </button>
+        </div>
+        <div class="col-8 d-flex align-items-center">
+            @if (documentID) {
+                <img class="w-50 m-auto" [ngStyle]="{'transform': 'rotate('+rotation+'deg)'}" [src]="documentService.getThumbUrl(documentID)" />
+            }
+        </div>
+        <div class="col-2 d-flex">
+            <button class="btn btn-secondary mt-auto" (click)="rotate()">
+                <i-bs name="arrow-clockwise"></i-bs>
+            </button>
+        </div>
+    </div>
+    <div class="row mt-4">
+        <div class="col">
+            @if (messageBold) {
+              <p><b>{{messageBold}}</b></p>
+            }
+            @if (message) {
+              <p class="mb-0" [innerHTML]="message | safeHtml"></p>
+            }
+        </div>
+    </div>
+    @if (showPDFNote) {
+        <p class="small text-muted fst-italic mt-4" i18n>Note that only PDFs will be rotated.</p>
+    }
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
+        <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
+    </button>
+    <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled || degrees === 0">
+      {{btnCaption}}
+      @if (!confirmButtonEnabled) {
+          <ngb-progressbar style="height: 1px;" type="dark" [max]="secondsTotal" [value]="seconds"></ngb-progressbar>
+      }
+    </button>
+</div>

src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.scss

@@ -0,0 +1,3 @@
+img {
+    transition: all 0.25s ease;
+}

src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.spec.ts

@@ -0,0 +1,60 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { RotateConfirmDialogComponent } from './rotate-confirm-dialog.component'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+
+describe('RotateConfirmDialogComponent', () => {
+  let component: RotateConfirmDialogComponent
+  let fixture: ComponentFixture<RotateConfirmDialogComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [RotateConfirmDialogComponent, SafeHtmlPipe],
+      providers: [NgbActiveModal, SafeHtmlPipe],
+      imports: [
+        HttpClientTestingModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(RotateConfirmDialogComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should support rotating the image', () => {
+    component.documentID = 1
+    fixture.detectChanges()
+    component.rotate()
+    fixture.detectChanges()
+    expect(component.degrees).toBe(90)
+    expect(fixture.nativeElement.querySelector('img').style.transform).toBe(
+      'rotate(90deg)'
+    )
+    component.rotate()
+    fixture.detectChanges()
+    expect(fixture.nativeElement.querySelector('img').style.transform).toBe(
+      'rotate(180deg)'
+    )
+  })
+
+  it('should normalize degrees', () => {
+    expect(component.degrees).toBe(0)
+    component.rotate()
+    expect(component.degrees).toBe(90)
+    component.rotate()
+    expect(component.degrees).toBe(180)
+    component.rotate()
+    expect(component.degrees).toBe(270)
+    component.rotate()
+    expect(component.degrees).toBe(0)
+    component.rotate()
+    expect(component.degrees).toBe(90)
+    component.rotate(false)
+    expect(component.degrees).toBe(0)
+    component.rotate(false)
+    expect(component.degrees).toBe(270)
+  })
+})

src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { DocumentService } from 'src/app/services/rest/document.service'
+
+@Component({
+  selector: 'pngx-rotate-confirm-dialog',
+  templateUrl: './rotate-confirm-dialog.component.html',
+  styleUrl: './rotate-confirm-dialog.component.scss',
+})
+export class RotateConfirmDialogComponent extends ConfirmDialogComponent {
+  public documentID: number
+  public showPDFNote: boolean = true
+
+  // animation is better if we dont normalize yet
+  public rotation: number = 0
+
+  public get degrees(): number {
+    let degrees = this.rotation % 360
+    if (degrees < 0) degrees += 360
+    return degrees
+  }
+
+  constructor(
+    activeModal: NgbActiveModal,
+    public documentService: DocumentService
+  ) {
+    super(activeModal)
+  }
+
+  rotate(clockwise: boolean = true) {
+    this.rotation += clockwise ? 90 : -90
+  }
+}