Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Merge branch 'VM/RED-8284' into 'master'

Browse Source 
RED-8284 - Drag & Drop for Import Redactions not working

Closes RED-8284

See merge request redactmanager/red-ui!275
This commit is contained in:
Dan Percic 2024-01-30 12:51:04 +01:00
commit d1d5019cc2
3 changed files with 29 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.html
View File

@ -29,7 +29,7 @@
[type]="iconButtonTypes.primary" [type]="iconButtonTypes.primary"
></iqser-icon-button> ></iqser-icon-button>
<div class="all-caps-label cancel" mat-dialog-close [translate]="'import-redactions-dialog.actions.cancel'"></div> <div class="all-caps-label cancel" mat-dialog-close [translate]="'import-redactions-dialog.actions.cancel'" (click)="close()"></div>
</div> </div>
<iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button> <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>

8
apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts
View File

@ -7,6 +7,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { HttpStatusCode } from '@angular/common/http'; import { HttpStatusCode } from '@angular/common/http';
import { extractPageRanges } from '@utils/page-ranges-mapper'; import { extractPageRanges } from '@utils/page-ranges-mapper';
import { File } from '@red/domain'; import { File } from '@red/domain';
import { FileDropOverlayService } from '@upload-download/services/file-drop-overlay.service';
interface ImportData { interface ImportData {
dossierId: string; dossierId: string;
@ -27,10 +28,12 @@ export class ImportRedactionsDialogComponent extends BaseDialogComponent {
constructor( constructor(
protected readonly _dialogRef: MatDialogRef<ImportRedactionsDialogComponent>, protected readonly _dialogRef: MatDialogRef<ImportRedactionsDialogComponent>,
private readonly _fileDropOverlayService: FileDropOverlayService,
private readonly _redactionImportService: RedactionImportService, private readonly _redactionImportService: RedactionImportService,
@Inject(MAT_DIALOG_DATA) readonly data: ImportData, @Inject(MAT_DIALOG_DATA) readonly data: ImportData,
) { ) {
super(_dialogRef); super(_dialogRef);
_fileDropOverlayService.toggleImportingRedactions();
} }
get disabled(): boolean { get disabled(): boolean {
@ -97,4 +100,9 @@ export class ImportRedactionsDialogComponent extends BaseDialogComponent {
this.numberOfPages = (reader.result as any).match(/\/Type[\s]*\/Page[^s]/g).length; this.numberOfPages = (reader.result as any).match(/\/Type[\s]*\/Page[^s]/g).length;
}; };
} }
close () {
this._fileDropOverlayService.toggleImportingRedactions();
return super.close();
}
} }

30
apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts
View File

@ -3,19 +3,25 @@ import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { FileDropComponent } from '../file-drop/file-drop.component'; import { FileDropComponent } from '../file-drop/file-drop.component';
import { ComponentPortal } from '@angular/cdk/portal'; import { ComponentPortal } from '@angular/cdk/portal';
import { DOSSIER_ID } from '../../../tokens'; import { DOSSIER_ID } from '../../../tokens';
import { BehaviorSubject } from 'rxjs';
@Injectable() @Injectable()
export class FileDropOverlayService { export class FileDropOverlayService {
private readonly _dropOverlayRef: OverlayRef; readonly #dropOverlayRef: OverlayRef;
private _dossierId: string; readonly #importingRedactions$ = new BehaviorSubject(false);
#dossierId: string;
constructor(private readonly _overlay: Overlay, private readonly _injector: Injector) { constructor(private readonly _overlay: Overlay, private readonly _injector: Injector) {
this._dropOverlayRef = this._overlay.create({ this.#dropOverlayRef = this._overlay.create({
height: '100vh', height: '100vh',
width: '100vw', width: '100vw',
}); });
} }
get #importingRedactions() {
return this.#importingRedactions$.getValue();
}
dragEnter = e => { dragEnter = e => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -37,7 +43,7 @@ export class FileDropOverlayService {
}; };
initFileDropHandling(dossierId: string) { initFileDropHandling(dossierId: string) {
this._dossierId = dossierId; this.#dossierId = dossierId;
document.getElementsByTagName('body')[0].addEventListener('dragenter', this.dragEnter, false); document.getElementsByTagName('body')[0].addEventListener('dragenter', this.dragEnter, false);
document.getElementsByTagName('body')[0].addEventListener('dragleave', this.dragLeave, false); document.getElementsByTagName('body')[0].addEventListener('dragleave', this.dragLeave, false);
} }
@ -48,23 +54,27 @@ export class FileDropOverlayService {
} }
openFileDropOverlay() { openFileDropOverlay() {
if (!this._dropOverlayRef.hasAttached()) { if (!this.#dropOverlayRef.hasAttached() && !this.#importingRedactions) {
const component = new ComponentPortal(FileDropComponent, null, this._createInjector()); const component = new ComponentPortal(FileDropComponent, null, this._createInjector());
this._dropOverlayRef.attach(component); this.#dropOverlayRef.attach(component);
} }
} }
closeFileDropOverlay() { closeFileDropOverlay() {
if (this._dropOverlayRef) { if (this.#dropOverlayRef) {
this._dropOverlayRef.detach(); this.#dropOverlayRef.detach();
} }
} }
toggleImportingRedactions() {
this.#importingRedactions$.next(!this.#importingRedactions);
}
private _createInjector() { private _createInjector() {
return Injector.create({ return Injector.create({
providers: [ providers: [
{ provide: OverlayRef, useValue: this._dropOverlayRef }, { provide: OverlayRef, useValue: this.#dropOverlayRef },
{ provide: DOSSIER_ID, useValue: this._dossierId }, { provide: DOSSIER_ID, useValue: this.#dossierId },
], ],
parent: this._injector, parent: this._injector,
}); });