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

RED-3982 - extracted upload file logic from import redactions dialog component into a separate component to be reusable also for certificate configuration

Browse Source
This commit is contained in:
Valentin Mihai 2022-05-16 00:36:58 +03:00
parent 2e255c8c4c
commit ff795dd9a1
22 changed files with 129 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/modules/admin/admin.module.ts
View File

@ -44,6 +44,8 @@ import { BaseEntityScreenComponent } from './base-entity-screen/base-entity-scre
import { CloneDossierTemplateDialogComponent } from './dialogs/clone-dossier-template-dialog/clone-dossier-template-dialog.component';
import { AdminSideNavComponent } from './admin-side-nav/admin-side-nav.component';
import { ConfigureCertificateDialogComponent } from './dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component';
import { PkcsSignatureConfigurationComponent } from './dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component';
import { KmsSignatureConfigurationComponent } from './dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component';
const dialogs = [
AddEditDossierTemplateDialogComponent,
@ -86,6 +88,8 @@ const components = [
BaseEntityScreenComponent,
GeneralConfigFormComponent,
SmtpFormComponent,
PkcsSignatureConfigurationComponent,
KmsSignatureConfigurationComponent,
...dialogs,
...screens,

57
apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html
View File

@ -1,27 +1,48 @@
<section class="dialog">
<div class="dialog-header heading-l" translate="digital-signature-dialog.title"></div>
<div
class="dialog-header heading-l"
[translate]="!isInConfiguration ? translations.title.beforeConfiguration : translations.title[selectedOption]"
></div>
<div class="dialog-content">
<div
*ngFor="let option of certificateOptions"
class="option"
(click)="selectedOption = option"
[class.selected]="option === selectedOption"
>
<div class="title">
<iqser-round-checkbox [active]="option === selectedOption"></iqser-round-checkbox>
{{ translations[option].title | translate }}
<ng-container *ngIf="!isInConfiguration">
<div
*ngFor="let option of certificateOptions"
class="option"
(click)="selectedOption = option"
[class.selected]="option === selectedOption"
>
<div class="title">
<iqser-round-checkbox [active]="option === selectedOption"></iqser-round-checkbox>
{{ translations.options[option].title | translate }}
</div>
<p class="description">
{{ translations.options[option].description | translate }}
</p>
</div>
<p class="description">
{{ translations[option].description | translate }}
</p>
</div>
</ng-container>
<ng-container *ngIf="isInConfiguration">
<redaction-pkcs-signature-configuration
*ngIf="selectedOption === certificateType.PKCS"
></redaction-pkcs-signature-configuration>
<redaction-kms-signature-configuration *ngIf="selectedOption === certificateType.KMS"></redaction-kms-signature-configuration>
</ng-container>
</div>
<div class="dialog-actions">
<button (click)="displaySignatureConfiguration()" color="primary" mat-flat-button>
{{ 'digital-signature-dialog.actions.continue' | translate }}
</button>
<div translate="digital-signature-dialog.actions.cancel" class="all-caps-label cancel" mat-dialog-close></div>
<ng-container *ngIf="!isInConfiguration">
<button (click)="toggleIsInConfiguration()" color="primary" mat-flat-button>
{{ 'digital-signature-dialog.actions.continue' | translate }}
</button>
<div translate="digital-signature-dialog.actions.cancel" class="all-caps-label cancel" mat-dialog-close></div>
</ng-container>
<ng-container *ngIf="isInConfiguration">
<button (click)="save()" color="primary" mat-flat-button>
{{ 'digital-signature-dialog.actions.save' | translate }}
</button>
<div translate="digital-signature-dialog.actions.back" class="all-caps-label cancel" (click)="toggleIsInConfiguration()"></div>
</ng-container>
</div>
<iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
</section>

21
apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.ts
View File

@ -1,5 +1,7 @@
import { Component } from '@angular/core';
import { Component, Injector, ViewChild } from '@angular/core';
import { digitalSignatureDialogTranslations } from '../../translations/digital-signature-dialog-translations';
import { BaseDialogComponent } from '../../../../../../../../libs/common-ui/src';
import { MatDialogRef } from '@angular/material/dialog';
enum CertificateType {
PKCS = 'pkcs',
@ -10,11 +12,24 @@ enum CertificateType {
templateUrl: './configure-certificate-dialog.component.html',
styleUrls: ['./configure-certificate-dialog.component.scss'],
})
export class ConfigureCertificateDialogComponent {
export class ConfigureCertificateDialogComponent extends BaseDialogComponent {
// @ViewChild(EditDossierGeneralInfoComponent) generalInfoComponent: EditDossierGeneralInfoComponent;
// @ViewChild(EditDossierDownloadPackageComponent) downloadPackageComponent: EditDossierDownloadPackageComponent;
readonly certificateType = CertificateType;
readonly certificateOptions = Object.values(CertificateType);
readonly translations = digitalSignatureDialogTranslations;
selectedOption = this.certificateOptions[0];
isInConfiguration = false;
displaySignatureConfiguration() {}
constructor(protected readonly _injector: Injector, protected readonly _dialogRef: MatDialogRef<ConfigureCertificateDialogComponent>) {
super(_injector, _dialogRef);
}
toggleIsInConfiguration() {
this.isInConfiguration = !this.isInConfiguration;
}
save() {}
}

1
apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.html Normal file
View File

@ -0,0 +1 @@
<iqser-upload-file></iqser-upload-file>

0
apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.html → apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.scss
View File

9
apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms-signature-configuration/kms-signature-configuration.component.ts Normal file
View File

@ -0,0 +1,9 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
selector: 'redaction-kms-signature-configuration',
templateUrl: './kms-signature-configuration.component.html',
styleUrls: ['./kms-signature-configuration.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class KmsSignatureConfigurationComponent {}

0
apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.ts
View File

1
apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.html Normal file
View File

@ -0,0 +1 @@
<iqser-upload-file></iqser-upload-file>

0
apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/kms/kms.component.scss → apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.scss
View File

9
apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs-signature-configuration/pkcs-signature-configuration.component.ts Normal file
View File

@ -0,0 +1,9 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
selector: 'redaction-pkcs-signature-configuration',
templateUrl: './pkcs-signature-configuration.component.html',
styleUrls: ['./pkcs-signature-configuration.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PkcsSignatureConfigurationComponent {}

0
apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.html
View File

0
apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.scss
View File

0
apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/pkcs/pkcs.component.ts
View File

19
apps/red-ui/src/app/modules/admin/translations/digital-signature-dialog-translations.ts
View File

@ -1,12 +1,19 @@
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
export const digitalSignatureDialogTranslations = {
pkcs: {
title: _('digital-signature-dialog.options.pkcs.title'),
description: _('digital-signature-dialog.options.pkcs.description'),
title: {
beforeConfiguration: _('digital-signature-dialog.title.before-configuration'),
pkcs: _('digital-signature-dialog.title.pkcs'),
kms: _('digital-signature-dialog.title.kms'),
},
kms: {
title: _('digital-signature-dialog.options.kms.title'),
description: _('digital-signature-dialog.options.kms.description'),
options: {
pkcs: {
title: _('digital-signature-dialog.options.pkcs.title'),
description: _('digital-signature-dialog.options.pkcs.description'),
},
kms: {
title: _('digital-signature-dialog.options.kms.title'),
description: _('digital-signature-dialog.options.kms.description'),
},
},
} as const;

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

@ -3,37 +3,21 @@
<div class="dialog-content">
<div translate="import-redactions-dialog.details" class="mb-24"></div>
<div
class="upload-area"
*ngIf="!fileToImport"
(click)="triggerAttachFile()"
redactionDragDropFileUpload
(fileDropped)="attachFile($event)"
>
<mat-icon svgIcon="iqser:upload"></mat-icon>
<div translate="import-redactions-dialog.upload-area-text"></div>
</div>
<ng-container *ngIf="fileToImport">
<div class="file-area">
<mat-icon svgIcon="iqser:document"></mat-icon>
<p>{{ fileToImport.name }}</p>
<mat-icon svgIcon="iqser:trash" (click)="removeFile()"></mat-icon>
</div>
<div class="only-for-pages">
<mat-checkbox
(change)="onlyForSpecificPages = !onlyForSpecificPages"
[checked]="onlyForSpecificPages"
class="filter-menu-checkbox"
color="primary"
>
{{ 'import-redactions-dialog.only-for-specific-pages' | translate }}
</mat-checkbox>
<iqser-upload-file (fileChanged)="fileChanged($event)"></iqser-upload-file>
<div class="only-for-pages" *ngIf="fileToImport">
<mat-checkbox
(change)="onlyForSpecificPages = !onlyForSpecificPages"
[checked]="onlyForSpecificPages"
class="filter-menu-checkbox"
color="primary"
>
{{ 'import-redactions-dialog.only-for-specific-pages' | translate }}
</mat-checkbox>
<div *ngIf="onlyForSpecificPages" class="iqser-input-group datepicker-wrapper">
<input />
</div>
<div *ngIf="onlyForSpecificPages" class="iqser-input-group datepicker-wrapper">
<input />
</div>
</ng-container>
</div>
</div>
<div class="dialog-actions">
@ -45,5 +29,3 @@
<iqser-circle-button class="dialog-close" icon="iqser:close" (action)="close()"></iqser-circle-button>
</section>
<input #attachFileInput [hidden]="true" (change)="attachFile($event)" class="file-upload-input" type="file" accept="application/pdf" />

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

@ -1,62 +1,3 @@
@use 'variables';
.upload-area,
.file-area {
display: flex;
align-items: center;
border-radius: 8px;
width: 586px;
background: variables.$grey-2;
}
.upload-area {
gap: 16px;
height: 88px;
cursor: pointer;
mat-icon,
div {
opacity: 0.5;
transition: 0.1s;
}
mat-icon {
margin-left: 32px;
}
div {
font-size: 16px;
font-weight: 500;
}
}
.file-area {
gap: 10px;
height: 48px;
mat-icon:first-child {
opacity: 0.5;
margin-left: 16px;
}
mat-icon:last-child {
margin-left: auto;
margin-right: 16px;
cursor: pointer;
}
mat-icon {
transform: scale(0.7);
}
p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 490px;
}
}
.only-for-pages {
margin-top: 16px;
margin-left: 21px;

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

@ -33,28 +33,13 @@ export class ImportRedactionsDialogComponent extends BaseDialogComponent {
super(_injector, _dialogRef);
}
triggerAttachFile() {
this.attachFileInput.nativeElement.click();
}
attachFile(event) {
const files = event.target['files'];
this.fileToImport = files[0];
// input field needs to be set as empty in case the same file will be selected second time
event.target.value = '';
fileChanged(file: File | null) {
this.fileToImport = file;
if (!this.fileToImport) {
console.error('No file to import!');
return;
this.onlyForSpecificPages = false;
}
}
removeFile() {
this.fileToImport = null;
this.onlyForSpecificPages = false;
}
async save(): Promise<void> {
this._loadingService.start();
const import$ = this._redactionImportService.importRedactions(this.data.dossierId, this.data.fileId, this.fileToImport);

41
apps/red-ui/src/app/modules/shared/directives/drag-drop-file-upload.directive.ts
View File

@ -1,41 +0,0 @@
import { Directive, EventEmitter, Output, HostListener, HostBinding } from '@angular/core';
const DRAG_OVER_BACKGROUND_COLOR = '#e2eefd';
const DEFAULT_BACKGROUND_COLOR = '#f4f5f7';
@Directive({
selector: '[redactionDragDropFileUpload]',
})
export class DragDropFileUploadDirective {
@Output() readonly fileDropped = new EventEmitter<any>();
@HostBinding('style.background-color') private background = DEFAULT_BACKGROUND_COLOR;
@HostListener('dragover', ['$event'])
onDragOver(event) {
event.preventDefault();
event.stopPropagation();
if (event.dataTransfer.types.includes('Files')) {
this.background = DRAG_OVER_BACKGROUND_COLOR;
}
}
@HostListener('dragleave', ['$event'])
onDragLeave(event) {
event.preventDefault();
event.stopPropagation();
this.background = DEFAULT_BACKGROUND_COLOR;
}
@HostListener('drop', ['$event'])
onDrop(event) {
event.preventDefault();
event.stopPropagation();
if (event.dataTransfer.types.includes('Files')) {
this.background = DEFAULT_BACKGROUND_COLOR;
const files = event.dataTransfer.files;
if (files.length > 0) {
this.fileDropped.emit({ target: { files } });
}
}
}
}

4
apps/red-ui/src/app/modules/shared/shared.module.ts
View File

@ -30,7 +30,7 @@ import { FileStatsComponent } from './components/file-stats/file-stats.component
import { FileNameColumnComponent } from '@shared/components/file-name-column/file-name-column.component';
import { DossierNameColumnComponent } from '@shared/components/dossier-name-column/dossier-name-column.component';
import { MAT_DATE_FORMATS } from '@angular/material/core';
import { DragDropFileUploadDirective } from '@shared/directives/drag-drop-file-upload.directive';
import { DragDropFileUploadDirective } from '../../../../../../libs/common-ui/src/lib/upload-file/drag-drop-file-upload.directive';
import { DossiersTypeSwitchComponent } from '@shared/components/dossiers-type-switch/dossiers-type-switch.component';
import { TranslateModule } from '@ngx-translate/core';
import { RouterModule } from '@angular/router';
@ -59,7 +59,7 @@ const components = [
...buttons,
];
const utils = [DatePipe, NamePipe, NavigateLastDossiersScreenDirective, LongPressDirective, DragDropFileUploadDirective];
const utils = [DatePipe, NamePipe, NavigateLastDossiersScreenDirective, LongPressDirective];
const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule, CommonUiModule];

12
apps/red-ui/src/assets/i18n/de.json
View File

@ -657,8 +657,10 @@
"digital-signature": "Digitale Signatur",
"digital-signature-dialog": {
"actions": {
"back": "",
"cancel": "",
"continue": ""
"continue": "",
"save": ""
},
"options": {
"kms": {
@ -670,7 +672,11 @@
"title": ""
}
},
"title": ""
"title": {
"before-configuration": "",
"kms": "",
"pkcs": ""
}
},
"digital-signature-screen": {
"action": {
@ -1548,8 +1554,6 @@
"backend-version": "Backend-Version der Anwendung",
"chart": {
"cumulative": "Seiten insgesamt",
"legend": "Legende",
"licensed-total": "Insgesamt lizensiert",
"pages-per-month": "Seiten pro Monat",
"total-pages": "Gesamtzahl der Seiten"
},

12
apps/red-ui/src/assets/i18n/en.json
View File

@ -657,8 +657,10 @@
"digital-signature": "Digital Signature",
"digital-signature-dialog": {
"actions": {
"back": "Back",
"cancel": "Cancel",
"continue": "Continue"
"continue": "Continue",
"save": "Save Configurations"
},
"options": {
"kms": {
@ -670,7 +672,11 @@
"title": "I want to upload a PKCS#12 file"
}
},
"title": "Configure Digital Signature Certificate"
"title": {
"before-configuration": "Configure Digital Signature Certificate",
"kms": "Configure a Certificate with Amazon KMS",
"pkcs": "Configure a PKCS#12 Certificate"
}
},
"digital-signature-screen": {
"action": {
@ -1548,8 +1554,6 @@
"backend-version": "Backend Application Version",
"chart": {
"cumulative": "Cumulative Pages",
"legend": "Legend",
"licensed-total": "Licensed Total",
"pages-per-month": "Pages per Month",
"total-pages": "Total Pages"
},

2
libs/common-ui

@ -1 +1 @@
Subproject commit ad3c87b4a09961d8f32778c0c912e586cd4576cd
Subproject commit c695f5c4419f4fd8d76946d5a474dccbda0edad2