Pull request #368: VM/RED-4247

Merge in RED/ui from VM/RED-4247 to master

* commit '4c14a86fbe60887b54c03da375f13cdb9d634629':
  RED-4247 - When I edit or create a dossier as n owner I want to select from multiple watermark configurations
  RED-4247 - WIP on watermarks list
This commit is contained in:
Valentin-Gabriel Mihai 2022-06-29 23:46:16 +02:00
commit 2afe0e0735
33 changed files with 1028 additions and 459 deletions

View File

@ -15,12 +15,14 @@ import { GeneralConfigScreenComponent } from './screens/general-config/general-c
import { BaseAdminScreenComponent } from './base-admin-screen/base-admin-screen.component';
import { BaseDossierTemplateScreenComponent } from './base-dossier-templates-screen/base-dossier-template-screen.component';
import { DossierTemplatesGuard } from '@guards/dossier-templates.guard';
import { DOSSIER_TEMPLATE_ID, ENTITY_TYPE } from '@red/domain';
import { DOSSIER_TEMPLATE_ID, ENTITY_TYPE, WATERMARK_ID } from '@red/domain';
import { DossierTemplateExistsGuard } from '@guards/dossier-template-exists.guard';
import { EntityExistsGuard } from '@guards/entity-exists-guard.service';
import { DossierStatesListingScreenComponent } from './screens/dossier-states-listing/dossier-states-listing-screen.component';
import { BaseEntityScreenComponent } from './base-entity-screen/base-entity-screen.component';
import { PermissionsGuard } from '../../guards/permissions-guard';
import { WatermarksListingScreenComponent } from './screens/watermarks-listing/watermarks-listing-screen.component';
import { BaseWatermarkScreenComponent } from './base-watermark-screen/base-watermark-screen.component';
const dossierTemplateIdRoutes: Routes = [
{
@ -69,13 +71,26 @@ const dossierTemplateIdRoutes: Routes = [
},
},
{
path: 'watermark',
component: BaseDossierTemplateScreenComponent,
canActivate: [CompositeRouteGuard],
data: {
routeGuards: [AuthGuard, RedRoleGuard],
},
loadChildren: () => import('./screens/watermark/watermark.module').then(m => m.WatermarkModule),
path: 'watermarks',
children: [
{
path: '',
component: WatermarksListingScreenComponent,
canActivate: [CompositeRouteGuard],
data: {
routeGuards: [AuthGuard, RedRoleGuard],
},
},
{
path: `:${WATERMARK_ID}`,
component: BaseWatermarkScreenComponent,
canActivate: [CompositeRouteGuard],
loadChildren: () => import('./screens/watermark/watermark.module').then(m => m.WatermarkModule),
data: {
routeGuards: [AuthGuard, RedRoleGuard],
},
},
],
},
{
path: 'reports',

View File

@ -59,7 +59,7 @@ export class AdminSideNavComponent implements OnInit {
hideIf: !this.userPreferenceService.areDevFeaturesEnabled,
},
{ screen: 'default-colors', label: _('admin-side-nav.default-colors') },
{ screen: 'watermark', label: _('admin-side-nav.watermark') },
{ screen: 'watermarks', label: _('admin-side-nav.watermarks') },
{ screen: 'file-attributes', label: _('admin-side-nav.file-attributes') },
{ screen: 'dossier-attributes', label: _('admin-side-nav.dossier-attributes') },
{ screen: 'dossier-states', label: _('admin-side-nav.dossier-states') },

View File

@ -46,6 +46,8 @@ import { SystemPreferencesFormComponent } from './screens/general-config/system-
import { ConfigureCertificateDialogComponent } from './dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component';
import { PkcsSignatureConfigurationComponent } from './dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component';
import { KmsSignatureConfigurationComponent } from './dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component';
import { WatermarksListingScreenComponent } from './screens/watermarks-listing/watermarks-listing-screen.component';
import { BaseWatermarkScreenComponent } from './base-watermark-screen/base-watermark-screen.component';
const dialogs = [
AddEditCloneDossierTemplateDialogComponent,
@ -73,6 +75,7 @@ const screens = [
GeneralConfigScreenComponent,
DossierAttributesListingScreenComponent,
DossierStatesListingScreenComponent,
WatermarksListingScreenComponent,
];
const components = [
@ -85,6 +88,7 @@ const components = [
BaseAdminScreenComponent,
BaseDossierTemplateScreenComponent,
BaseEntityScreenComponent,
BaseWatermarkScreenComponent,
GeneralConfigFormComponent,
SmtpFormComponent,
SystemPreferencesFormComponent,

View File

@ -0,0 +1,27 @@
<section>
<div class="page-header">
<redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
<div class="flex-1 actions">
<iqser-circle-button
*ngIf="editMode"
(action)="openDeleteWatermarkDialog($event)"
[tooltip]="'watermarks-listing.action.delete' | translate"
icon="iqser:trash"
></iqser-circle-button>
<iqser-circle-button
[routerLink]="['../../watermarks']"
[tooltip]="'common.close' | translate"
icon="iqser:close"
tooltipPosition="below"
></iqser-circle-button>
</div>
</div>
<div class="content-inner">
<div class="overlay-shadow"></div>
<router-outlet></router-outlet>
</div>
</section>

View File

@ -0,0 +1,57 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { firstValueFrom } from 'rxjs';
import { AdminDialogService } from '../services/admin-dialog.service';
import { ConfirmationDialogInput, LoadingService, Toaster } from '@iqser/common-ui';
import { WatermarkService } from '../../../services/entity-services/watermark.service';
import { DOSSIER_TEMPLATE_ID, WATERMARK_ID } from '@red/domain';
import { ActivatedRoute, Router } from '@angular/router';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
@Component({
templateUrl: './base-watermark-screen.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BaseWatermarkScreenComponent {
readonly #dossierTemplateId: string;
readonly #watermarkId: string;
constructor(
private readonly _dialogService: AdminDialogService,
private readonly _loadingService: LoadingService,
private readonly _watermarkService: WatermarkService,
private readonly _toaster: Toaster,
private readonly _route: ActivatedRoute,
private readonly _router: Router,
) {
this.#dossierTemplateId = _route.snapshot.paramMap.get(DOSSIER_TEMPLATE_ID);
this.#watermarkId = _route.snapshot.paramMap.get(WATERMARK_ID);
}
async openDeleteWatermarkDialog($event: MouseEvent): Promise<void> {
const isUsed = await firstValueFrom(this._watermarkService.isWatermarkUsed(this.#watermarkId));
if (!isUsed) {
await this._deleteWatermark(this.#watermarkId);
return;
}
const data = new ConfirmationDialogInput({
question: _('watermarks-listing.watermark-is-used'),
});
this._dialogService.openDialog('confirm', $event, data, async () => {
await this._deleteWatermark(this.#watermarkId);
});
}
private async _deleteWatermark(watermarkId: string): Promise<void> {
this._loadingService.start();
await firstValueFrom(this._watermarkService.deleteWatermark(watermarkId));
this._toaster.success(_('watermarks-listing.action.delete-success'));
await this._router.navigate([`/main/admin/dossier-templates/${this.#dossierTemplateId}/watermarks`]);
this._loadingService.stop();
}
get editMode(): boolean {
return !!Number(this.#watermarkId);
}
}

View File

@ -3,7 +3,7 @@
<div *ngIf="changed && permissionsService.isAdmin()" class="changes-box">
<iqser-icon-button
(action)="save()"
[disabled]="form.invalid"
[disabled]="!valid"
[label]="'watermark-screen.action.save' | translate"
[type]="iconButtonTypes.primary"
icon="iqser:check"
@ -13,9 +13,14 @@
</div>
<div class="right-container" iqserHasScrollbar>
<div class="heading-xl" translate="watermark-screen.title"></div>
<form (keyup)="configChanged()" [formGroup]="form">
<div class="iqser-input-group w-300">
<div class="iqser-input-group required w-300">
<label translate="watermark-screen.form.name-label"></label>
<input [placeholder]="'watermark-screen.form.name-placeholder' | translate" formControlName="name" type="text" />
</div>
<div class="iqser-input-group required w-300">
<label translate="watermark-screen.form.text-label"></label>
<textarea
(mousemove)="triggerChanges()"
[placeholder]="'watermark-screen.form.text-placeholder' | translate"
@ -33,7 +38,7 @@
<div class="square-options">
<div
(click)="setValue('orientation', option)"
*ngFor="let option of ['VERTICAL', 'HORIZONTAL', 'DIAGONAL']"
*ngFor="let option of ['DIAGONAL', 'HORIZONTAL', 'VERTICAL']"
[class.active]="form.get('orientation').value === option"
[class.disabled]="form.get('orientation').disabled"
[ngClass]="option"

View File

@ -4,24 +4,31 @@ import WebViewer, { WebViewerInstance } from '@pdftron/webviewer';
import { HttpClient } from '@angular/common/http';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { Debounce, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
import { DOSSIER_TEMPLATE_ID, IWatermark, WatermarkOrientation, WatermarkOrientations } from '@red/domain';
import { DOSSIER_TEMPLATE_ID, IWatermark, WATERMARK_ID, WatermarkOrientation, WatermarkOrientations } from '@red/domain';
import { BASE_HREF_FN, BaseHrefFn } from '../../../../../tokens';
import { stampPDFPage } from '@utils/page-stamper';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { WatermarkService } from '@services/entity-services/watermark.service';
import { firstValueFrom, Observable, of, switchMap } from 'rxjs';
import { firstValueFrom, Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
import { ActivatedRoute } from '@angular/router';
import { LicenseService } from '@services/license.service';
import { UserPreferenceService } from '@services/user-preference.service';
import { ActivatedRoute, Router } from '@angular/router';
export const DEFAULT_WATERMARK: IWatermark = {
text: null,
hexColor: '#dd4d50',
opacity: 70,
fontSize: 11,
id: null,
dossierTemplateId: null,
text: 'Watermark',
name: '',
enabled: true,
hexColor: '#000000',
opacity: 30,
fontSize: 40,
fontType: 'sans-serif',
orientation: WatermarkOrientations.DIAGONAL,
orientation: WatermarkOrientations.HORIZONTAL,
createdBy: null,
dateAdded: null,
dateModified: null,
} as const;
@Component({
@ -33,8 +40,9 @@ export class WatermarkScreenComponent implements OnInit {
readonly iconButtonTypes = IconButtonTypes;
readonly form: UntypedFormGroup = this._getForm();
readonly #dossierTemplateId: string;
readonly #watermarkId: string;
private _instance: WebViewerInstance;
private _watermark: IWatermark = {};
private _watermark: IWatermark = {} as IWatermark;
@ViewChild('viewer', { static: true })
private _viewer: ElementRef;
@ -50,15 +58,14 @@ export class WatermarkScreenComponent implements OnInit {
private readonly _watermarkService: WatermarkService,
private readonly _changeDetectorRef: ChangeDetectorRef,
private readonly _userPreferenceService: UserPreferenceService,
private readonly _router: Router,
) {
this._loadingService.start();
this.#dossierTemplateId = route.snapshot.paramMap.get(DOSSIER_TEMPLATE_ID);
this.#watermarkId = route.snapshot.paramMap.get(WATERMARK_ID);
}
get changed(): boolean {
if (this._watermark === DEFAULT_WATERMARK) {
return true;
}
for (const key of Object.keys(this._watermark)) {
if (this._watermark[key] !== this.form.get(key)?.value) {
return true;
@ -67,6 +74,13 @@ export class WatermarkScreenComponent implements OnInit {
return false;
}
get valid(): boolean {
if (!this.form.get('name')?.value || !this.form.get('text')?.value) {
return false;
}
return this.form.valid;
}
async ngOnInit(): Promise<void> {
await firstValueFrom(this._loadWatermark());
}
@ -79,19 +93,21 @@ export class WatermarkScreenComponent implements OnInit {
async save(): Promise<void> {
const watermark: IWatermark = this.form.getRawValue();
const observable = watermark.text
? this._watermarkService.saveWatermark(watermark, this.#dossierTemplateId)
: this._watermarkService.deleteWatermark(this.#dossierTemplateId);
try {
await firstValueFrom(
observable.pipe(
switchMap(() => this._loadWatermark()),
this._watermarkService.saveWatermark(watermark).pipe(
tap(() => {
this._toaster.success(
watermark.text ? _('watermark-screen.action.change-success') : _('watermark-screen.action.delete-success'),
watermark.id ? _('watermark-screen.action.change-success') : _('watermark-screen.action.created-success'),
);
}),
tap(async () => {
if (!watermark.id) {
await this._router.navigate([`/main/admin/dossier-templates/${this.#dossierTemplateId}/watermarks`]);
} else {
await firstValueFrom(this._loadWatermark());
}
}),
),
);
} catch (error) {
@ -114,10 +130,11 @@ export class WatermarkScreenComponent implements OnInit {
}
private _loadWatermark(): Observable<IWatermark> {
return this._watermarkService.getWatermark(this.#dossierTemplateId).pipe(
return this._watermarkService.getWatermark(this.#watermarkId).pipe(
catchError(() => of(DEFAULT_WATERMARK)),
tap(watermark => {
this._watermark = watermark;
this._watermark.dossierTemplateId = this.#dossierTemplateId;
this.form.setValue({ ...watermark });
this._loadViewer();
}),
@ -199,12 +216,19 @@ export class WatermarkScreenComponent implements OnInit {
const defaultFormControl = [{ ...defaultValue }, Validators.required];
return this._formBuilder.group({
text: [{ ...defaultValue }],
id: [{ ...defaultValue }],
name: [{ ...defaultFormControl }],
enabled: [{ ...defaultValue }],
dossierTemplateId: [{ ...defaultValue }],
text: [{ ...defaultFormControl }],
hexColor: [...defaultFormControl],
opacity: [...defaultFormControl],
fontSize: [...defaultFormControl],
fontType: [...defaultFormControl],
orientation: [...defaultFormControl],
createdBy: [{ ...defaultValue }],
dateAdded: [{ ...defaultValue }],
dateModified: [{ ...defaultValue }],
});
}
}

View File

@ -0,0 +1,105 @@
<section>
<div class="page-header">
<redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
<div class="actions flex-1">
<redaction-dossier-template-actions></redaction-dossier-template-actions>
<iqser-circle-button
[routerLink]="['../..']"
[tooltip]="'common.close' | translate"
icon="iqser:close"
tooltipPosition="below"
></iqser-circle-button>
</div>
</div>
<div class="content-inner">
<div class="overlay-shadow"></div>
<redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
<div class="content-container">
<iqser-table
[bulkActions]="bulkActions"
[headerTemplate]="headerTemplate"
[itemSize]="80"
[noDataText]="'watermarks-listing.no-data.title' | translate"
[selectionEnabled]="true"
[tableColumnConfigs]="tableColumnConfigs"
emptyColumnWidth="1fr"
noDataIcon="red:attribute"
></iqser-table>
</div>
</div>
</section>
<ng-template #headerTemplate>
<div class="table-header-actions">
<iqser-icon-button
[routerLink]="getRouterLink()"
*ngIf="currentUser.isAdmin"
[label]="'watermarks-listing.add-new' | translate"
[type]="iconButtonTypes.primary"
icon="iqser:plus"
></iqser-icon-button>
</div>
</ng-template>
<ng-template #bulkActions>
<iqser-circle-button
*ngIf="currentUser.isAdmin && (listingService.areSomeSelected$ | async)"
[tooltip]="'watermarks-listing.action.delete' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:trash"
></iqser-circle-button>
</ng-template>
<ng-template #tableItemTemplate let-entity="entity">
<div *ngIf="cast(entity) as watermark">
<div class="label cell">
<span>{{ watermark.name }}</span>
</div>
<div class="center cell">
<mat-slide-toggle (toggleChange)="toggleStatus(watermark)" [checked]="watermark.enabled" color="primary"></mat-slide-toggle>
</div>
<div class="cell user-column">
<redaction-initials-avatar
[defaultValue]="'unknown' | translate"
[user]="watermark.createdBy || 'system'"
></redaction-initials-avatar>
</div>
<div class="cell">
<div class="small-label">
{{ watermark.dateAdded | date: 'd MMM yyyy' }}
</div>
</div>
<div class="cell">
<div class="small-label">
{{ watermark.dateModified | date: 'd MMM yyyy' }}
</div>
</div>
<div class="cell">
<div class="action-buttons">
<iqser-circle-button
[routerLink]="getRouterLink(watermark)"
[tooltip]="'watermarks-listing.action.edit' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:edit"
></iqser-circle-button>
<iqser-circle-button
(action)="openConfirmDeleteWatermarkDialog($event, watermark)"
[tooltip]="'watermarks-listing.action.delete' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:trash"
></iqser-circle-button>
</div>
</div>
</div>
</ng-template>

View File

@ -0,0 +1,106 @@
import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnInit } from '@angular/core';
import {
CircleButtonTypes,
ConfirmationDialogInput,
DefaultListingServices,
IconButtonTypes,
ListingComponent,
LoadingService,
TableColumnConfig,
Toaster,
} from '@iqser/common-ui';
import { DOSSIER_TEMPLATE_ID, User, Watermark } from '@red/domain';
import { UserService } from '../../../../services/user.service';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { firstValueFrom } from 'rxjs';
import { WatermarkService } from '../../../../services/entity-services/watermark.service';
import { ActivatedRoute } from '@angular/router';
import { AdminDialogService } from '../../services/admin-dialog.service';
@Component({
templateUrl: './watermarks-listing-screen.component.html',
styleUrls: ['./watermarks-listing-screen.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => WatermarksListingScreenComponent) }],
})
export class WatermarksListingScreenComponent extends ListingComponent<Watermark> implements OnInit {
private readonly _dossierTemplateId: string;
readonly iconButtonTypes = IconButtonTypes;
readonly circleButtonTypes = CircleButtonTypes;
readonly currentUser: User;
readonly tableColumnConfigs: TableColumnConfig<Watermark>[] = [
{ label: _('watermarks-listing.table-col-names.name'), width: '2fr' },
{ label: _('watermarks-listing.table-col-names.status'), class: 'flex-center' },
{ label: _('watermarks-listing.table-col-names.created-by'), class: 'user-column' },
{ label: _('watermarks-listing.table-col-names.created-on') },
{ label: _('watermarks-listing.table-col-names.modified-on') },
];
readonly tableHeaderLabel: string = _('watermarks-listing.table-header.title');
constructor(
protected readonly _injector: Injector,
private readonly _route: ActivatedRoute,
private readonly _userService: UserService,
private readonly _loadingService: LoadingService,
private readonly _watermarkService: WatermarkService,
private readonly _dialogService: AdminDialogService,
private readonly _toaster: Toaster,
) {
super(_injector);
this.currentUser = _userService.currentUser;
this._dossierTemplateId = _route.snapshot.paramMap.get(DOSSIER_TEMPLATE_ID);
}
async ngOnInit(): Promise<void> {
await this._loadData();
}
private async _loadData(): Promise<void> {
this._loadingService.start();
try {
const response = await firstValueFrom(this._watermarkService.getWatermarks(this._dossierTemplateId));
const watermarkConfig = response?.map(item => new Watermark(item)) || [];
this.entitiesService.setEntities(watermarkConfig);
} catch (e) {}
this._loadingService.stop();
}
async openConfirmDeleteWatermarkDialog($event: MouseEvent, watermark: Watermark): Promise<void> {
const isUsed = await firstValueFrom(this._watermarkService.isWatermarkUsed(watermark.id));
if (!isUsed) {
await this._deleteWatermark(watermark);
return;
}
const data = new ConfirmationDialogInput({
question: _('watermarks-listing.watermark-is-used'),
});
this._dialogService.openDialog('confirm', $event, data, async () => {
await this._deleteWatermark(watermark);
});
}
private async _deleteWatermark(watermark: Watermark): Promise<void> {
this._loadingService.start();
await firstValueFrom(this._watermarkService.deleteWatermark(watermark.id));
this._toaster.success(_('watermarks-listing.action.delete-success'));
await this._loadData();
this._loadingService.stop();
}
async toggleStatus(watermark?: Watermark): Promise<void> {
watermark.enabled = !watermark.enabled;
this._loadingService.start();
await firstValueFrom(this._watermarkService.saveWatermark(watermark));
this._loadingService.stop();
}
getRouterLink(watermark: Watermark = null): string {
return `/main/admin/dossier-templates/${this._dossierTemplateId}/watermarks/${watermark ? watermark.id : 0}`;
}
}

View File

@ -1,6 +1,6 @@
import { Injectable, Injector } from '@angular/core';
import { filterEach, GenericService, RequiredParam, Validate } from '@iqser/common-ui';
import { filter, forkJoin, Observable, of } from 'rxjs';
import { forkJoin, Observable, of } from 'rxjs';
import {
IDigitalSignatureRequest,
IKmsDigitalSignature,
@ -8,7 +8,7 @@ import {
IPkcsDigitalSignature,
IPkcsDigitalSignatureRequest,
} from '@red/domain';
import { catchError, map, tap } from 'rxjs/operators';
import { catchError, map } from 'rxjs/operators';
@Injectable()
export class DigitalSignatureService extends GenericService<IDigitalSignatureRequest> {

View File

@ -43,7 +43,7 @@ export class StampService {
if (this._viewModeService.isRedacted) {
const dossier = this._state.dossier;
if (dossier.watermarkPreviewEnabled) {
if (dossier.previewWatermarkId) {
await this._stampPreview(pdfDoc, dossier.dossierTemplateId);
}
} else {

View File

@ -15,17 +15,41 @@
></redaction-select>
</div>
<div class="mt-32 mb-14">
<mat-checkbox class="watermark" color="primary" formControlName="watermarkEnabled">
{{ 'edit-dossier-dialog.general-info.form.watermark' | translate }}
</mat-checkbox>
</div>
<ng-container *ngIf="watermarks.length">
<div class="iqser-input-group watermark">
<mat-checkbox
color="primary"
[checked]="isWatermarkEnabled('watermarkId')"
(change)="enableDisableWatermark($event.checked, 'watermarkId')"
>
{{ 'add-dossier-dialog.form.watermark' | translate }}
</mat-checkbox>
<mat-form-field *ngIf="isWatermarkEnabled('watermarkId')">
<mat-select formControlName="watermarkId">
<mat-option *ngFor="let watermark of watermarks" [value]="watermark.id">
{{ watermark.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-checkbox class="watermark-preview" color="primary" formControlName="watermarkPreviewEnabled">
{{ 'edit-dossier-dialog.general-info.form.watermark-preview' | translate }}
</mat-checkbox>
</div>
<div class="iqser-input-group watermark">
<mat-checkbox
color="primary"
[checked]="isWatermarkEnabled('previewWatermarkId')"
(change)="enableDisableWatermark($event.checked, 'previewWatermarkId')"
>
{{ 'add-dossier-dialog.form.watermark' | translate }}
</mat-checkbox>
<mat-form-field *ngIf="isWatermarkEnabled('previewWatermarkId')">
<mat-select formControlName="previewWatermarkId">
<mat-option *ngFor="let watermark of watermarks" [value]="watermark.id">
{{ watermark.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</ng-container>
</form>
<ng-template #reportTemplateOptionTemplate let-option="option">

View File

@ -16,3 +16,13 @@ form {
display: flex;
}
}
.watermark {
width: 315px;
max-width: 315px;
mat-form-field {
margin-left: 22px;
margin-top: -10px;
}
}

View File

@ -1,5 +1,5 @@
import { Component, Input, OnInit } from '@angular/core';
import { Dossier, DownloadFileType, IReportTemplate } from '@red/domain';
import { Dossier, DownloadFileType, IReportTemplate, IWatermark } from '@red/domain';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { EditDossierSaveResult, EditDossierSectionInterface } from '../edit-dossier-section.interface';
import { downloadTypesTranslations } from '@translations/download-types-translations';
@ -7,6 +7,7 @@ import { ReportTemplateService } from '@services/report-template.service';
import { PermissionsService } from '@services/permissions.service';
import { firstValueFrom } from 'rxjs';
import { DossiersService } from '@services/dossiers/dossiers.service';
import { WatermarkService } from '@services/entity-services/watermark.service';
@Component({
selector: 'redaction-edit-dossier-download-package',
@ -22,6 +23,9 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
}),
);
availableReportTypes: IReportTemplate[] = [];
watermarks: IWatermark[] = [];
oldWatermarkId: string;
oldPreviewWatermarkID: string;
@Input() dossier: Dossier;
@ -30,6 +34,7 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
private readonly _reportTemplateController: ReportTemplateService,
private readonly _formBuilder: UntypedFormBuilder,
private readonly _permissionsService: PermissionsService,
private readonly _watermarkService: WatermarkService,
) {}
get reportTypesLength() {
@ -46,7 +51,7 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
}
for (const key of Object.keys(this.form.getRawValue())) {
if (key.startsWith('watermark')) {
if (key.startsWith('watermark') || key.startsWith('previewWatermark')) {
if (this.dossier[key] !== this.form.get(key).value) {
return true;
}
@ -54,7 +59,6 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
if (this.dossier[key].length !== this.form.get(key).value.length) {
return true;
}
const originalItems = [...this.dossier[key]].sort();
const newItems = [...this.form.get(key).value].sort();
@ -74,19 +78,24 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
}
get valid(): boolean {
return this.form.valid;
return this.form && this.form.valid;
}
reportTemplateValueMapper = (reportTemplate: IReportTemplate) => reportTemplate.templateId;
async ngOnInit() {
const dossierTemplateId = this.dossier.dossierTemplateId;
this.availableReportTypes =
(await firstValueFrom(this._reportTemplateController.getAvailableReportTemplates(this.dossier.dossierTemplateId))) || [];
(await firstValueFrom(this._reportTemplateController.getAvailableReportTemplates(dossierTemplateId))) || [];
this.form = this._getForm();
if (!this._permissionsService.canEditDossier(this.dossier)) {
this.form.disable();
}
this.watermarks = await firstValueFrom(this._watermarkService.getWatermarks(dossierTemplateId));
this.oldWatermarkId = this.form.get('watermarkId').value || this.watermarks[0]?.id;
this.oldPreviewWatermarkID = this.form.get('previewWatermarkId').value || this.watermarks[0]?.id;
}
async save(): EditDossierSaveResult {
@ -94,8 +103,8 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
...this.dossier,
downloadFileTypes: this.form.get('downloadFileTypes').value,
reportTemplateIds: this.form.get('reportTemplateIds').value,
watermarkEnabled: this.form.get('watermarkEnabled').value,
watermarkPreviewEnabled: this.form.get('watermarkPreviewEnabled').value,
watermarkId: this.form.get('watermarkId').value,
previewWatermarkId: this.form.get('previewWatermarkId').value,
};
const updatedDossier = await firstValueFrom(this._dossiersService.createOrUpdate(dossier));
@ -106,8 +115,8 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
this.form.reset({
downloadFileTypes: this.dossier.downloadFileTypes,
reportTemplateIds: this.dossier.reportTemplateIds,
watermarkEnabled: this.dossier.watermarkEnabled,
watermarkPreviewEnabled: this.dossier.watermarkPreviewEnabled,
watermarkId: [this.dossier.watermarkId],
previewWatermarkId: [this.dossier.previewWatermarkId],
});
}
@ -116,8 +125,8 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
{
reportTemplateIds: [this.dossier.reportTemplateIds],
downloadFileTypes: [this.dossier.downloadFileTypes],
watermarkEnabled: [this.dossier.watermarkEnabled],
watermarkPreviewEnabled: [this.dossier.watermarkPreviewEnabled],
watermarkId: [this.dossier.watermarkId],
previewWatermarkId: [this.dossier.previewWatermarkId],
},
{
validators: control =>
@ -127,4 +136,20 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
},
);
}
isWatermarkEnabled(key: string): boolean {
return this.form.get(key).value;
}
enableDisableWatermark(checked: boolean, key: string): void {
let oldValue: string;
if (key === 'watermarkId') {
this.oldWatermarkId = !checked ? this.form.get(key).value : this.oldWatermarkId;
oldValue = this.oldWatermarkId;
} else {
this.oldPreviewWatermarkID = !checked ? this.form.get(key).value : this.oldPreviewWatermarkID;
oldValue = this.oldPreviewWatermarkID;
}
this.form.get(key).setValue(checked ? oldValue : null);
}
}

View File

@ -47,17 +47,41 @@
></textarea>
</div>
<div>
<mat-checkbox class="watermark" color="primary" formControlName="watermarkEnabled">
{{ 'add-dossier-dialog.form.watermark' | translate }}
</mat-checkbox>
</div>
<ng-container *ngIf="watermarks.length">
<div class="iqser-input-group watermark">
<mat-checkbox
color="primary"
[checked]="isWatermarkEnabled('watermarkId')"
(change)="enableDisableWatermark($event.checked, 'watermarkId')"
>
{{ 'add-dossier-dialog.form.watermark' | translate }}
</mat-checkbox>
<mat-form-field *ngIf="isWatermarkEnabled('watermarkId')">
<mat-select formControlName="watermarkId">
<mat-option *ngFor="let watermark of watermarks" [value]="watermark.id">
{{ watermark.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-checkbox class="watermark-preview" color="primary" formControlName="watermarkPreviewEnabled">
{{ 'add-dossier-dialog.form.watermark-preview' | translate }}
</mat-checkbox>
</div>
<div class="iqser-input-group watermark">
<mat-checkbox
color="primary"
[checked]="isWatermarkEnabled('previewWatermarkId')"
(change)="enableDisableWatermark($event.checked, 'previewWatermarkId')"
>
{{ 'add-dossier-dialog.form.watermark' | translate }}
</mat-checkbox>
<mat-form-field *ngIf="isWatermarkEnabled('previewWatermarkId')">
<mat-select formControlName="previewWatermarkId">
<mat-option *ngFor="let watermark of watermarks" [value]="watermark.id">
{{ watermark.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</ng-container>
<div class="due-date">
<mat-checkbox (change)="hasDueDate = !hasDueDate" [checked]="hasDueDate" class="filter-menu-checkbox" color="primary">

View File

@ -1,11 +1,3 @@
.watermark {
margin-top: 24px;
}
.watermark-preview {
margin-top: 8px;
}
.due-date {
margin-top: 8px;
min-height: 34px;
@ -27,3 +19,13 @@
redaction-select {
flex: 1;
}
.watermark {
width: 315px;
max-width: 315px;
mat-form-field {
margin-left: 22px;
margin-top: -10px;
}
}

View File

@ -1,6 +1,6 @@
import { Component, Inject, Injector, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { DOSSIER_TEMPLATE_ID, DownloadFileType, IDossierRequest, IDossierTemplate, IReportTemplate } from '@red/domain';
import { DOSSIER_TEMPLATE_ID, DownloadFileType, IDossierRequest, IDossierTemplate, IReportTemplate, IWatermark } from '@red/domain';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { downloadTypesTranslations } from '@translations/download-types-translations';
import { BaseDialogComponent, IconButtonTypes, LoadingService, SaveOptions } from '@iqser/common-ui';
@ -11,6 +11,7 @@ import { firstValueFrom } from 'rxjs';
import dayjs from 'dayjs';
import { Router } from '@angular/router';
import { DossiersDialogService } from '../../../shared-dossiers/services/dossiers-dialog.service';
import { WatermarkService } from '@services/entity-services/watermark.service';
interface DialogData {
readonly dossierTemplateId?: string;
@ -32,6 +33,9 @@ export class AddDossierDialogComponent extends BaseDialogComponent implements On
);
dossierTemplates: IDossierTemplate[];
availableReportTypes = [];
watermarks: IWatermark[] = [];
oldWatermarkId: string;
oldPreviewWatermarkID: string;
constructor(
private readonly _activeDossiersService: ActiveDossiersService,
@ -41,6 +45,7 @@ export class AddDossierDialogComponent extends BaseDialogComponent implements On
private readonly _router: Router,
private readonly _dialogService: DossiersDialogService,
private readonly _loadingService: LoadingService,
private readonly _watermarkService: WatermarkService,
protected readonly _injector: Injector,
protected readonly _dialogRef: MatDialogRef<AddDossierDialogComponent>,
@Inject(MAT_DIALOG_DATA) readonly data: DialogData,
@ -68,7 +73,11 @@ export class AddDossierDialogComponent extends BaseDialogComponent implements On
}
async ngOnInit(): Promise<void> {
await this.dossierTemplateChanged(this.form.get('dossierTemplateId').value);
const dossierTemplateId = this.form.get('dossierTemplateId').value;
await this.dossierTemplateChanged(dossierTemplateId);
this.watermarks = await firstValueFrom(this._watermarkService.getWatermarks(dossierTemplateId));
this.oldWatermarkId = this.watermarks[0]?.id;
this.oldPreviewWatermarkID = this.watermarks[0]?.id;
}
reportTemplateValueMapper = (reportTemplate: IReportTemplate) => reportTemplate.templateId;
@ -125,8 +134,8 @@ export class AddDossierDialogComponent extends BaseDialogComponent implements On
reportTemplateIds: [null],
description: [null],
dueDate: [null],
watermarkEnabled: [true],
watermarkPreviewEnabled: [false],
watermarkId: [null],
previewWatermarkId: [null],
},
{
validators: control =>
@ -155,8 +164,24 @@ export class AddDossierDialogComponent extends BaseDialogComponent implements On
dossierTemplateId: this.form.get(DOSSIER_TEMPLATE_ID).value,
downloadFileTypes: this.form.get('downloadFileTypes').value,
reportTemplateIds: this.form.get('reportTemplateIds').value,
watermarkEnabled: this.form.get('watermarkEnabled').value,
watermarkPreviewEnabled: this.form.get('watermarkPreviewEnabled').value,
watermarkId: this.form.get('watermarkId').value,
previewWatermarkId: this.form.get('previewWatermarkId').value,
};
}
isWatermarkEnabled(key: string): boolean {
return !!this.form.get(key).value;
}
enableDisableWatermark(checked: boolean, key: string): void {
let oldValue: string;
if (key === 'watermarkId') {
this.oldWatermarkId = !checked ? this.form.get(key).value : this.oldWatermarkId;
oldValue = this.oldWatermarkId;
} else {
this.oldPreviewWatermarkID = !checked ? this.form.get(key).value : this.oldPreviewWatermarkID;
oldValue = this.oldPreviewWatermarkID;
}
this.form.get(key).setValue(checked ? oldValue : null);
}
}

View File

@ -1,6 +1,12 @@
import { Injectable, Injector } from '@angular/core';
import { GenericService, RequiredParam, Validate } from '@iqser/common-ui';
import { GenericService, QueryParam, RequiredParam, Validate } from '@iqser/common-ui';
import { IWatermark } from '@red/domain';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
interface IsUsedResponse {
value: boolean;
}
@Injectable({
providedIn: 'root',
@ -11,17 +17,29 @@ export class WatermarkService extends GenericService<IWatermark> {
}
@Validate()
saveWatermark(@RequiredParam() body: IWatermark, @RequiredParam() dossierTemplateId: string) {
return this._post(body, `${this._defaultModelPath}/${dossierTemplateId}`);
saveWatermark(@RequiredParam() body: IWatermark) {
return this._post(body, `${this._defaultModelPath}`);
}
@Validate()
deleteWatermark(@RequiredParam() dossierTemplateId: string) {
return super.delete({}, `${this._defaultModelPath}/${dossierTemplateId}`);
deleteWatermark(@RequiredParam() watermarkId: string) {
return super.delete({}, `${this._defaultModelPath}/${watermarkId}`);
}
@Validate()
getWatermark(@RequiredParam() dossierTemplateId: string) {
return this._getOne([dossierTemplateId]);
getWatermark(@RequiredParam() watermarkId: string) {
return this._getOne([watermarkId]);
}
@Validate()
getWatermarks(@RequiredParam() dossierTemplateId: string): Observable<IWatermark[]> {
const queryParams: QueryParam[] = [{ key: 'dossierTemplateId', value: dossierTemplateId }];
return this.getAll<IWatermark[]>(this._defaultModelPath, queryParams);
}
@Validate()
isWatermarkUsed(@RequiredParam() watermarkId: string): Observable<boolean> {
const queryParams: QueryParam[] = [{ key: 'watermarkId', value: watermarkId }];
return this.getAll<IsUsedResponse>(`${this._defaultModelPath}/used`, queryParams).pipe(map(result => result.value));
}
}

View File

@ -31,8 +31,7 @@
"label": "Dossier-Vorlage",
"placeholder": ""
},
"watermark": "Geschwärzte Dokumente mit Wasserzeichen versehen",
"watermark-preview": "Vorschau Dokumente mit Wasserzeichen versehen"
"watermark": "Geschwärzte Dokumente mit Wasserzeichen versehen"
},
"header-new": "Dossier erstellen"
},
@ -188,7 +187,7 @@
"rule-editor": "",
"settings": "Einstellungen",
"user-management": "",
"watermark": ""
"watermarks": ""
},
"annotation-actions": {
"accept-recommendation": {
@ -1089,9 +1088,7 @@
"label": "Dossier-Name",
"placeholder": "Namen eingeben"
},
"template": "Dossier-Vorlage",
"watermark": "Geschwärzte Dokumente mit Wasserzeichen versehen",
"watermark-preview": "Vorschau Dokumente mit Wasserzeichen versehen"
"template": "Dossier-Vorlage"
}
},
"header": "{dossierName} bearbeiten",
@ -2081,7 +2078,7 @@
"watermark-screen": {
"action": {
"change-success": "Das Wasserzeichen wurde aktualisiert!",
"delete-success": "Das Wasserzeichen wurde gelöscht.",
"created-success": "",
"error": "Fehler beim Aktualisieren des Wasserzeichens",
"revert": "Rückgängig machen",
"save": "Änderungen speichern"
@ -2091,11 +2088,35 @@
"color-placeholder": "",
"font-size": "Schriftgröße",
"font-type": "Schriftart",
"name-label": "",
"name-placeholder": "",
"opacity": "Deckkraft",
"orientation": "Ausrichtung",
"text-label": "",
"text-placeholder": "Text eingeben"
}
},
"watermarks-listing": {
"action": {
"delete": "",
"delete-success": "",
"edit": ""
},
"title": "Wasserzeichen"
"add-new": "",
"no-data": {
"title": ""
},
"table-col-names": {
"created-by": "",
"created-on": "",
"modified-on": "",
"name": "",
"status": ""
},
"table-header": {
"title": ""
},
"watermark-is-used": ""
},
"workflow": {
"selection": {

View File

@ -31,8 +31,7 @@
"label": "Dossier Template",
"placeholder": "Choose Dossier Template"
},
"watermark": "Watermark application on redacted documents",
"watermark-preview": "Watermark application on preview documents"
"watermark": "Watermark application on redacted documents"
},
"header-new": "Create Dossier"
},
@ -188,7 +187,7 @@
"rule-editor": "Rule Editor",
"settings": "Settings",
"user-management": "User Management",
"watermark": "Watermark"
"watermarks": "Watermarks"
},
"annotation-actions": {
"accept-recommendation": {
@ -1089,9 +1088,7 @@
"label": "Dossier Name",
"placeholder": "Enter Name"
},
"template": "Dossier Template",
"watermark": "Watermark application on redacted documents",
"watermark-preview": "Watermark application on preview documents"
"template": "Dossier Template"
}
},
"header": "Edit {dossierName}",
@ -2080,8 +2077,8 @@
},
"watermark-screen": {
"action": {
"change-success": "Watermark updated!",
"delete-success": "Watermark deleted.",
"change-success": "Watermark has been updated!",
"created-success": "Watermark has been created!",
"error": "Failed to update Watermark",
"revert": "Revert",
"save": "Save Changes"
@ -2091,11 +2088,35 @@
"color-placeholder": "#",
"font-size": "Font Size",
"font-type": "Font Type",
"name-label": "Watermark Name",
"name-placeholder": "Choose a name to identify the watermark",
"opacity": "Opacity",
"orientation": "Orientation",
"text-label": "Watermark Text",
"text-placeholder": "Enter text"
}
},
"watermarks-listing": {
"action": {
"delete": "Delete",
"delete-success": "Watermark has been deleted!",
"edit": "Edit"
},
"title": "Watermark"
"add-new": "New Watermark",
"no-data": {
"title": "There are no watermarks yet."
},
"table-col-names": {
"created-by": "Created by",
"created-on": "Created on",
"modified-on": "Modified on",
"name": "Name",
"status": "Status"
},
"table-header": {
"title": "Watermarks"
},
"watermark-is-used": "This watermark is already in use, are you sure you want to delete it?"
},
"workflow": {
"selection": {

View File

@ -26,3 +26,4 @@ export * from './lib/text-highlight';
export * from './lib/permissions';
export * from './lib/license';
export * from './lib/digital-signature';
export * from './lib/watermarks';

View File

@ -8,3 +8,4 @@ export type DossierTemplateStatus = keyof typeof DossierTemplateStatuses;
export const DOSSIER_TEMPLATE_ID = 'dossierTemplateId';
export const ENTITY_TYPE = 'entity';
export const WATERMARK_ID = 'watermarkId';

View File

@ -19,8 +19,8 @@ export class Dossier implements IDossier, IListable {
readonly hardDeletedTime?: string;
readonly softDeletedTime?: string;
readonly startDate?: string;
readonly watermarkEnabled: boolean;
readonly watermarkPreviewEnabled: boolean;
readonly watermarkId: number;
readonly previewWatermarkId: number;
readonly archivedTime: string;
readonly hasReviewers: boolean;
readonly routerLink: string;
@ -43,8 +43,8 @@ export class Dossier implements IDossier, IListable {
this.reportTemplateIds = dossier.reportTemplateIds;
this.softDeletedTime = dossier.softDeletedTime;
this.startDate = dossier.startDate;
this.watermarkEnabled = dossier.watermarkEnabled;
this.watermarkPreviewEnabled = dossier.watermarkPreviewEnabled;
this.watermarkId = dossier.watermarkId;
this.previewWatermarkId = dossier.previewWatermarkId;
this.archivedTime = dossier.archivedTime;
this.hasReviewers = !!this.memberIds && this.memberIds.length > 1;

View File

@ -53,4 +53,12 @@ export interface IDossierRequest {
* Whether a watermark will be applied to the preview files or not.
*/
readonly watermarkPreviewEnabled?: boolean;
/**
* Watermark id that will be applied to the redacted files.
*/
readonly watermarkId?: number;
/**
* Watermark id that will be applied to the preview files.
*/
readonly previewWatermarkId?: number;
}

View File

@ -17,7 +17,7 @@ export interface IDossier {
readonly reportTemplateIds: List;
readonly softDeletedTime?: string;
readonly startDate?: string;
readonly watermarkEnabled: boolean;
readonly watermarkPreviewEnabled: boolean;
readonly watermarkId: number;
readonly previewWatermarkId: number;
readonly archivedTime: string;
}

View File

@ -3,7 +3,7 @@ import { IFileAttributeConfig } from './file-attribute-config';
export interface IFileAttributesConfig {
delimiter?: string;
encoding?: string;
keyColumn?: string
keyColumn?: string;
filenameMappingColumnHeaderName?: string;
fileAttributeConfigs?: IFileAttributeConfig[];
}

View File

@ -2,7 +2,6 @@ export * from './sorters/status-sorter';
export * from './breadcrumb-types';
export * from './types';
export * from './rules';
export * from './watermark';
export * from './default-color-type';
export * from './colors';
export * from './view-mode';

View File

@ -1,15 +0,0 @@
export interface IWatermark {
fontSize?: number;
fontType?: string;
hexColor?: string;
opacity?: number;
orientation?: WatermarkOrientation;
text?: string;
}
export const WatermarkOrientations = {
DIAGONAL: 'DIAGONAL',
HORIZONTAL: 'HORIZONTAL',
VERTICAL: 'VERTICAL',
} as const;
export type WatermarkOrientation = keyof typeof WatermarkOrientations;

View File

@ -0,0 +1,2 @@
export * from './watermark';
export * from './watermark.model';

View File

@ -0,0 +1,38 @@
import { IWatermark, WatermarkOrientation } from './watermark';
import { IListable } from '@iqser/common-ui';
export class Watermark implements IListable, IWatermark {
readonly id: string;
readonly dossierTemplateId: string;
enabled: boolean;
readonly fontSize: number;
readonly fontType: string;
readonly hexColor: string;
readonly opacity: number;
readonly orientation: WatermarkOrientation;
readonly text: string;
readonly name: string;
readonly createdBy?: string;
readonly dateAdded?: string;
readonly dateModified?: string;
constructor(watermark: IWatermark) {
this.id = watermark.id;
this.dossierTemplateId = watermark.dossierTemplateId;
this.enabled = watermark.enabled;
this.fontSize = watermark.fontSize;
this.fontType = watermark.fontType;
this.hexColor = watermark.hexColor;
this.opacity = watermark.opacity;
this.orientation = watermark.orientation;
this.text = watermark.text;
this.name = watermark.name;
this.createdBy = watermark.createdBy;
this.dateAdded = watermark.dateAdded;
this.dateModified = watermark.dateModified;
}
get searchKey(): string {
return this.name;
}
}

View File

@ -0,0 +1,22 @@
export interface IWatermark {
id: string;
dossierTemplateId: string;
enabled: boolean;
fontSize: number;
fontType: string;
hexColor: string;
opacity: number;
orientation: WatermarkOrientation;
text: string;
name: string;
createdBy?: string;
dateAdded?: string;
dateModified?: string;
}
export const WatermarkOrientations = {
DIAGONAL: 'DIAGONAL',
HORIZONTAL: 'HORIZONTAL',
VERTICAL: 'VERTICAL',
} as const;
export type WatermarkOrientation = keyof typeof WatermarkOrientations;

File diff suppressed because it is too large Load Diff