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"
></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>
<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 { extractPageRanges } from '@utils/page-ranges-mapper';
import { File } from '@red/domain';
import { FileDropOverlayService } from '@upload-download/services/file-drop-overlay.service';
interface ImportData {
dossierId: string;
@ -27,10 +28,12 @@ export class ImportRedactionsDialogComponent extends BaseDialogComponent {
constructor(
protected readonly _dialogRef: MatDialogRef<ImportRedactionsDialogComponent>,
private readonly _fileDropOverlayService: FileDropOverlayService,
private readonly _redactionImportService: RedactionImportService,
@Inject(MAT_DIALOG_DATA) readonly data: ImportData,
) {
super(_dialogRef);
_fileDropOverlayService.toggleImportingRedactions();
}
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;
};
}
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 { ComponentPortal } from '@angular/cdk/portal';
import { DOSSIER_ID } from '../../../tokens';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class FileDropOverlayService {
private readonly _dropOverlayRef: OverlayRef;
private _dossierId: string;
readonly #dropOverlayRef: OverlayRef;
readonly #importingRedactions$ = new BehaviorSubject(false);
#dossierId: string;
constructor(private readonly _overlay: Overlay, private readonly _injector: Injector) {
this._dropOverlayRef = this._overlay.create({
this.#dropOverlayRef = this._overlay.create({
height: '100vh',
width: '100vw',
});
}
get #importingRedactions() {
return this.#importingRedactions$.getValue();
}
dragEnter = e => {
e.preventDefault();
e.stopPropagation();
@ -37,7 +43,7 @@ export class FileDropOverlayService {
};
initFileDropHandling(dossierId: string) {
this._dossierId = dossierId;
this.#dossierId = dossierId;
document.getElementsByTagName('body')[0].addEventListener('dragenter', this.dragEnter, false);
document.getElementsByTagName('body')[0].addEventListener('dragleave', this.dragLeave, false);
}
@ -48,23 +54,27 @@ export class FileDropOverlayService {
}
openFileDropOverlay() {
if (!this._dropOverlayRef.hasAttached()) {
if (!this.#dropOverlayRef.hasAttached() && !this.#importingRedactions) {
const component = new ComponentPortal(FileDropComponent, null, this._createInjector());
this._dropOverlayRef.attach(component);
this.#dropOverlayRef.attach(component);
}
}
closeFileDropOverlay() {
if (this._dropOverlayRef) {
this._dropOverlayRef.detach();
if (this.#dropOverlayRef) {
this.#dropOverlayRef.detach();
}
}
toggleImportingRedactions() {
this.#importingRedactions$.next(!this.#importingRedactions);
}
private _createInjector() {
return Injector.create({
providers: [
{ provide: OverlayRef, useValue: this._dropOverlayRef },
{ provide: DOSSIER_ID, useValue: this._dossierId },
{ provide: OverlayRef, useValue: this.#dropOverlayRef },
{ provide: DOSSIER_ID, useValue: this.#dossierId },
],
parent: this._injector,
});