-
Notifications
You must be signed in to change notification settings - Fork 932
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
16 changed files
with
656 additions
and
140 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 54 additions & 0 deletions
54
...mon/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <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"> | ||
| <div class="btn-toolbar flex-nowrap"> | ||
| <div class="input-group input-group-sm"> | ||
| <div class="input-group-text" i18n>Page</div> | ||
| <input class="form-control mw-60" type="number" min="1" [(ngModel)]="currentPage" /> | ||
| <div class="input-group-text" i18n>of {{totalPages}}</div> | ||
| </div> | ||
| <div class="input-group input-group-sm ms-auto"> | ||
| <span class="input-group-text" i18n>Pages to remove</span> | ||
| <input [ngModel]="pagesString" class="form-control" disabled /> | ||
| </div> | ||
| </div> | ||
| <div class="pdf-viewer-container w-100 mt-3"> | ||
| <pngx-pdf-viewer #pdfViewer [src]="pdfSrc" [(page)]="currentPage" | ||
| [original-size]="false" | ||
| [zoom]="1" | ||
| zoom-scale="page-fit" | ||
| [render-text]="false" | ||
| (pagerendered)="pageRendered($event)" | ||
| (after-load-complete)="pdfPreviewLoaded($event)"> | ||
| </pngx-pdf-viewer> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="modal-footer flex-nowrap"> | ||
| <div> | ||
| @if (message) { | ||
| <p [innerHTML]="message | safeHtml"></p> | ||
| } | ||
| @if (messageBold) { | ||
| <p class="mb-0 small"><b [innerHTML]="messageBold | safeHtml"></b></p> | ||
| } | ||
| </div> | ||
| <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"> | ||
| {{btnCaption}} | ||
| </button> | ||
| </div> | ||
|
|
||
| <ng-template #pageCheckOverlay let-page="page" let-pages="pages"> | ||
| <div class="position-absolute top-0 start-0 w-100 h-100 p-2" (click)="pageCheckChanged(page)"> | ||
| <input type="checkbox" class="form-check-input" /> | ||
| </div> | ||
| </ng-template> |
28 changes: 28 additions & 0 deletions
28
...mon/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| .pdf-viewer-container { | ||
| background-color: gray; | ||
| height: 350px; | ||
|
|
||
| pngx-pdf-viewer { | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| } | ||
|
|
||
| .mw-60 { | ||
| max-width: 60px; | ||
| } | ||
|
|
||
| div.position-absolute:has(.form-check-input:checked) { | ||
| background-color: rgba(var(--bs-dark-rgb), 0.25); | ||
| } | ||
|
|
||
| .form-check-input { | ||
| &:checked { | ||
| background-color: var(--bs-danger); | ||
| border-color: var(--bs-danger); | ||
| } | ||
| &:focus { | ||
| box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), var(--pngx-focus-alpha)); | ||
| border-color: var(--bs-danger); | ||
| } | ||
| } |
55 changes: 55 additions & 0 deletions
55
.../confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing' | ||
| import { DeletePagesConfirmDialogComponent } from './delete-pages-confirm-dialog.component' | ||
| import { HttpClientTestingModule } from '@angular/common/http/testing' | ||
| import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' | ||
| import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons' | ||
| import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe' | ||
| import { PdfViewerComponent } from '../../pdf-viewer/pdf-viewer.component' | ||
| import { FormsModule, ReactiveFormsModule } from '@angular/forms' | ||
|
|
||
| describe('DeletePagesConfirmDialogComponent', () => { | ||
| let component: DeletePagesConfirmDialogComponent | ||
| let fixture: ComponentFixture<DeletePagesConfirmDialogComponent> | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| declarations: [DeletePagesConfirmDialogComponent, PdfViewerComponent], | ||
| providers: [NgbActiveModal, SafeHtmlPipe], | ||
| imports: [ | ||
| HttpClientTestingModule, | ||
| NgxBootstrapIconsModule.pick(allIcons), | ||
| FormsModule, | ||
| ReactiveFormsModule, | ||
| ], | ||
| }).compileComponents() | ||
| fixture = TestBed.createComponent(DeletePagesConfirmDialogComponent) | ||
| component = fixture.componentInstance | ||
| fixture.detectChanges() | ||
| }) | ||
|
|
||
| it('should return a string with comma-separated pages', () => { | ||
| component.pages = [1, 2, 3, 4] | ||
| expect(component.pagesString).toEqual('1, 2, 3, 4') | ||
| }) | ||
|
|
||
| it('should update totalPages when pdf is loaded', () => { | ||
| component.pdfPreviewLoaded({ numPages: 5 } as any) | ||
| expect(component.totalPages).toEqual(5) | ||
| }) | ||
|
|
||
| it('should update checks when page is rendered', () => { | ||
| const event = { | ||
| target: document.createElement('div'), | ||
| detail: { pageNumber: 1 }, | ||
| } as any | ||
| component.pageRendered(event) | ||
| expect(component['checks'].length).toEqual(1) | ||
| }) | ||
|
|
||
| it('should update pages when page check is changed', () => { | ||
| component.pageCheckChanged(1) | ||
| expect(component.pages).toEqual([1]) | ||
| component.pageCheckChanged(1) | ||
| expect(component.pages).toEqual([]) | ||
| }) | ||
| }) |
65 changes: 65 additions & 0 deletions
65
...ommon/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { Component, TemplateRef, ViewChild } from '@angular/core' | ||
| import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' | ||
| import { DocumentService } from 'src/app/services/rest/document.service' | ||
| import { ConfirmDialogComponent } from '../confirm-dialog.component' | ||
| import { PDFDocumentProxy } from 'pdfjs-dist' | ||
| import { PdfViewerComponent } from '../../pdf-viewer/pdf-viewer.component' | ||
|
|
||
| @Component({ | ||
| selector: 'pngx-delete-pages-confirm-dialog', | ||
| templateUrl: './delete-pages-confirm-dialog.component.html', | ||
| styleUrl: './delete-pages-confirm-dialog.component.scss', | ||
| }) | ||
| export class DeletePagesConfirmDialogComponent extends ConfirmDialogComponent { | ||
| public documentID: number | ||
| public pages: number[] = [] | ||
| public currentPage: number = 1 | ||
| public totalPages: number | ||
|
|
||
| @ViewChild('pdfViewer') pdfViewer: PdfViewerComponent | ||
| @ViewChild('pageCheckOverlay') pageCheckOverlay!: TemplateRef<any> | ||
| private checks: HTMLElement[] = [] | ||
|
|
||
| public get pagesString(): string { | ||
| return this.pages.join(', ') | ||
| } | ||
|
|
||
| public get pdfSrc(): string { | ||
| return this.documentService.getPreviewUrl(this.documentID) | ||
| } | ||
|
|
||
| constructor( | ||
| activeModal: NgbActiveModal, | ||
| private documentService: DocumentService | ||
| ) { | ||
| super(activeModal) | ||
| } | ||
|
|
||
| public pdfPreviewLoaded(pdf: PDFDocumentProxy) { | ||
| this.totalPages = pdf.numPages | ||
| } | ||
|
|
||
| pageRendered(event: CustomEvent) { | ||
| const pageDiv = event.target as HTMLDivElement | ||
| const check = this.pageCheckOverlay.createEmbeddedView({ | ||
| page: event.detail.pageNumber, | ||
| }) | ||
| this.checks[event.detail.pageNumber - 1] = check.rootNodes[0] | ||
| pageDiv?.insertBefore(check.rootNodes[0], pageDiv.firstChild) | ||
| this.updateChecks() | ||
| } | ||
|
|
||
| pageCheckChanged(pageNumber: number) { | ||
| if (!this.pages.includes(pageNumber)) this.pages.push(pageNumber) | ||
| else if (this.pages.includes(pageNumber)) | ||
| this.pages.splice(this.pages.indexOf(pageNumber), 1) | ||
| this.updateChecks() | ||
| } | ||
|
|
||
| private updateChecks() { | ||
| this.checks.forEach((check, i) => { | ||
| const input = check.getElementsByTagName('input')[0] | ||
| input.checked = this.pages.includes(i + 1) | ||
| }) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.