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

Merge branch 'extract-admin-screens'

Browse Source
This commit is contained in:
Adina Țeudan 2022-02-07 15:03:14 +02:00
commit 9db630c135
28 changed files with 282 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.scss
View File

@ -1,5 +1,5 @@
@use 'apps/red-ui/src/assets/styles/variables';
@use 'libs/common-ui/src/assets/styles/common-mixins';
@use 'variables';
@use 'common-mixins';
.content-container {
background-color: variables.$grey-2;

2
apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.scss
View File

@ -1,5 +1,5 @@
@use 'variables';
@use 'libs/common-ui/src/assets/styles/common-mixins';
@use 'common-mixins';
.dialog-content {
flex-direction: column;

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

@ -6,16 +6,13 @@ import { AppStateGuard } from '@state/app-state.guard';
import { DictionaryListingScreenComponent } from './screens/dictionary-listing/dictionary-listing-screen.component';
import { DictionaryOverviewScreenComponent } from './screens/dictionary-overview/dictionary-overview-screen.component';
import { PendingChangesGuard } from '@guards/can-deactivate.guard';
import { RulesScreenComponent } from './screens/rules/rules-screen.component';
import { FileAttributesListingScreenComponent } from './screens/file-attributes-listing/file-attributes-listing-screen.component';
import { WatermarkScreenComponent } from './screens/watermark/watermark-screen.component';
import { DefaultColorsScreenComponent } from './screens/default-colors/default-colors-screen.component';
import { UserListingScreenComponent } from './screens/user-listing/user-listing-screen.component';
import { LicenseInformationScreenComponent } from './screens/license-information/license-information-screen.component';
import { DigitalSignatureScreenComponent } from './screens/digital-signature/digital-signature-screen.component';
import { AuditScreenComponent } from './screens/audit/audit-screen.component';
import { RouterModule, Routes } from '@angular/router';
import { ReportsScreenComponent } from './screens/reports/reports-screen.component';
import { DossierAttributesListingScreenComponent } from './screens/dossier-attributes-listing/dossier-attributes-listing-screen.component';
import { TrashScreenComponent } from './screens/trash/trash-screen.component';
import { GeneralConfigScreenComponent } from './screens/general-config/general-config-screen.component';
@ -72,12 +69,13 @@ const routes: Routes = [
},
{
path: 'rules',
component: RulesScreenComponent,
component: BaseDossierTemplateScreenComponent,
canActivate: [CompositeRouteGuard],
canDeactivate: [PendingChangesGuard],
data: {
routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
},
loadChildren: () => import('./screens/rules/rules.module').then(m => m.RulesModule),
},
{
path: 'file-attributes',
@ -89,19 +87,21 @@ const routes: Routes = [
},
{
path: 'watermark',
component: WatermarkScreenComponent,
component: BaseDossierTemplateScreenComponent,
canActivate: [CompositeRouteGuard],
data: {
routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
},
loadChildren: () => import('./screens/watermark/watermark.module').then(m => m.WatermarkModule),
},
{
path: 'reports',
component: ReportsScreenComponent,
component: BaseDossierTemplateScreenComponent,
canActivate: [CompositeRouteGuard],
data: {
routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
},
loadChildren: () => import('./screens/reports/reports.module').then(m => m.ReportsModule),
},
{
path: 'dossier-attributes',

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

@ -1,7 +1,6 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutingModule } from './admin-routing.module';
import { RulesScreenComponent } from './screens/rules/rules-screen.component';
import { SharedModule } from '@shared/shared.module';
import { AuditScreenComponent } from './screens/audit/audit-screen.component';
import { DefaultColorsScreenComponent } from './screens/default-colors/default-colors-screen.component';
@ -11,7 +10,6 @@ import { DigitalSignatureScreenComponent } from './screens/digital-signature/dig
import { FileAttributesListingScreenComponent } from './screens/file-attributes-listing/file-attributes-listing-screen.component';
import { LicenseInformationScreenComponent } from './screens/license-information/license-information-screen.component';
import { UserListingScreenComponent } from './screens/user-listing/user-listing-screen.component';
import { WatermarkScreenComponent } from './screens/watermark/watermark-screen.component';
import { DossierTemplateBreadcrumbsComponent } from './components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component';
import { ColorPickerModule } from 'ngx-color-picker';
import { AddEditFileAttributeDialogComponent } from './dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component';
@ -31,7 +29,6 @@ import { FileAttributesCsvImportDialogComponent } from './dialogs/file-attribute
import { ActiveFieldsListingComponent } from './dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component';
import { AdminSideNavComponent } from './admin-side-nav/admin-side-nav.component';
import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
import { ReportsScreenComponent } from './screens/reports/reports-screen.component';
import { ResetPasswordComponent } from './dialogs/add-edit-user-dialog/reset-password/reset-password.component';
import { UserDetailsComponent } from './dialogs/add-edit-user-dialog/user-details/user-details.component';
import { AddEditDossierAttributeDialogComponent } from './dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component';
@ -66,7 +63,6 @@ const dialogs = [
];
const screens = [
RulesScreenComponent,
AuditScreenComponent,
DefaultColorsScreenComponent,
DictionaryListingScreenComponent,
@ -75,9 +71,7 @@ const screens = [
FileAttributesListingScreenComponent,
LicenseInformationScreenComponent,
UserListingScreenComponent,
WatermarkScreenComponent,
GeneralConfigScreenComponent,
ReportsScreenComponent,
DossierAttributesListingScreenComponent,
TrashScreenComponent,
];

88
apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html
View File

@ -1,88 +0,0 @@
<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" iqserHasScrollbar>
<div class="heading-xl" translate="reports-screen.title"></div>
<div class="description" translate="reports-screen.description"></div>
<div class="document-setup">
<div class="all-caps-label" translate="reports-screen.document-setup-heading"></div>
<div translate="reports-screen.document-setup-description"></div>
</div>
<div class="placeholders">
<div class="all-caps-label" translate="reports-screen.table-header.placeholders"></div>
<div class="all-caps-label" translate="reports-screen.table-header.description"></div>
<ng-container *ngFor="let placeholder of placeholders">
<div class="placeholder">{{ placeholder.placeholder }}</div>
<div
[innerHTML]="placeholder.descriptionTranslation | translate: { attribute: placeholder.attributeName }"
class="description"
></div>
</ng-container>
</div>
</div>
<div class="right-container" iqserHasScrollbar>
<div class="header">
<div class="heading" translate="reports-screen.report-documents"></div>
<iqser-circle-button
(action)="fileInput.click()"
*ngIf="permissionsService.isAdmin()"
[tooltip]="'reports-screen.upload-document' | translate"
icon="iqser:upload"
></iqser-circle-button>
</div>
<div
(click)="fileInput.click()"
*ngIf="permissionsService.isAdmin() && !availableTemplates?.length"
class="template upload-button"
translate="reports-screen.upload-document"
></div>
<div *ngFor="let template of availableTemplates" class="template">
<div class="name">
{{ template.fileName }} {{ template.multiFileReport ? ('reports-screen.multi-file-report' | translate) : '' }}
</div>
<div class="actions">
<iqser-circle-button
(action)="download(template)"
[iconSize]="12"
[size]="18"
icon="iqser:download"
></iqser-circle-button>
<iqser-circle-button
(action)="deleteTemplate(template)"
*ngIf="permissionsService.isAdmin()"
[iconSize]="12"
[size]="18"
icon="iqser:trash"
></iqser-circle-button>
</div>
</div>
</div>
</div>
</section>
<input #fileInput (change)="uploadTemplate($event)" hidden type="file" />

60
apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.html Normal file
View File

@ -0,0 +1,60 @@
<div class="content-container" iqserHasScrollbar>
<div class="heading-xl" translate="reports-screen.title"></div>
<div class="description" translate="reports-screen.description"></div>
<div class="document-setup">
<div class="all-caps-label" translate="reports-screen.document-setup-heading"></div>
<div translate="reports-screen.document-setup-description"></div>
</div>
<div *ngIf="placeholders$ | async as placeholders" class="placeholders">
<div class="all-caps-label" translate="reports-screen.table-header.placeholders"></div>
<div class="all-caps-label" translate="reports-screen.table-header.description"></div>
<ng-container *ngFor="let placeholder of placeholders">
<div class="placeholder">{{ placeholder.placeholder }}</div>
<div
[innerHTML]="placeholder.descriptionTranslation | translate: { attribute: placeholder.attributeName }"
class="description"
></div>
</ng-container>
</div>
</div>
<div *ngIf="availableTemplates$ | async as availableTemplates" class="right-container" iqserHasScrollbar>
<div class="header">
<div class="heading" translate="reports-screen.report-documents"></div>
<iqser-circle-button
(action)="fileInput.click()"
*ngIf="permissionsService.isAdmin()"
[tooltip]="'reports-screen.upload-document' | translate"
icon="iqser:upload"
></iqser-circle-button>
</div>
<div
(click)="fileInput.click()"
*ngIf="permissionsService.isAdmin() && !availableTemplates?.length"
class="template upload-button"
translate="reports-screen.upload-document"
></div>
<div *ngFor="let template of availableTemplates" class="template">
<div class="name">
{{ template.fileName }} {{ template.multiFileReport ? ('reports-screen.multi-file-report' | translate) : '' }}
</div>
<div class="actions">
<iqser-circle-button (action)="download(template)" [iconSize]="12" [size]="18" icon="iqser:download"></iqser-circle-button>
<iqser-circle-button
(action)="deleteTemplate(template)"
*ngIf="permissionsService.isAdmin()"
[iconSize]="12"
[size]="18"
icon="iqser:trash"
></iqser-circle-button>
</div>
</div>
</div>
<input #fileInput (change)="uploadTemplate($event)" hidden type="file" />

6
apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.scss → apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.scss
View File

@ -1,6 +1,12 @@
@use 'variables';
@use 'common-mixins';
:host {
flex-grow: 1;
overflow: hidden;
display: flex;
}
.content-container,
.right-container {
flex: 1;

37
apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.ts → apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.ts
View File

@ -1,4 +1,4 @@
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { IPlaceholdersResponse, IReportTemplate } from '@red/domain';
import { download } from '@utils/file-download-utils';
import { ConfirmationDialogInput, LoadingService, Toaster } from '@iqser/common-ui';
@ -6,13 +6,13 @@ import { PermissionsService } from '@services/permissions.service';
import {
generalPlaceholdersDescriptionsTranslations,
placeholdersDescriptionsTranslations,
} from '../../translations/placeholders-descriptions-translations';
} from '../../../translations/placeholders-descriptions-translations';
import { removeBraces } from '@utils/functions';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { AdminDialogService } from '../../services/admin-dialog.service';
import { AdminDialogService } from '../../../services/admin-dialog.service';
import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
import { ReportTemplateService } from '@services/report-template.service';
import { firstValueFrom } from 'rxjs';
import { BehaviorSubject, firstValueFrom } from 'rxjs';
interface Placeholder {
placeholder: string;
@ -27,10 +27,11 @@ const placeholderTypes: PlaceholderType[] = ['generalPlaceholders', 'fileAttribu
selector: 'redaction-reports-screen',
templateUrl: './reports-screen.component.html',
styleUrls: ['./reports-screen.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ReportsScreenComponent implements OnInit {
placeholders: Placeholder[];
availableTemplates: IReportTemplate[];
placeholders$ = new BehaviorSubject<Placeholder[]>([]);
availableTemplates$ = new BehaviorSubject<IReportTemplate[]>([]);
@ViewChild('fileInput') private _fileInput: ElementRef;
@ -85,7 +86,7 @@ export class ReportsScreenComponent implements OnInit {
}
private async _uploadTemplate($event) {
const file = $event.target.files[0];
const file: File = $event.target.files[0];
if (!this._isValidFile(file)) {
this._toaster.error(_('reports-screen.invalid-upload'));
@ -94,7 +95,7 @@ export class ReportsScreenComponent implements OnInit {
const dossierTemplateId = this._dossierTemplatesService.activeDossierTemplateId;
if (this.availableTemplates.some(template => template.fileName === file.name)) {
if (this.availableTemplates$.value.some(template => template.fileName === file.name)) {
const data = new ConfirmationDialogInput({
title: _('confirmation-dialog.report-template-same-name.title'),
question: _('confirmation-dialog.report-template-same-name.question'),
@ -147,8 +148,10 @@ export class ReportsScreenComponent implements OnInit {
}
private async _loadReportTemplates() {
this.availableTemplates = await firstValueFrom(
this._reportTemplateService.getAvailableReportTemplates(this._dossierTemplatesService.activeDossierTemplateId),
this.availableTemplates$.next(
await firstValueFrom(
this._reportTemplateService.getAvailableReportTemplates(this._dossierTemplatesService.activeDossierTemplateId),
),
);
}
@ -156,12 +159,14 @@ export class ReportsScreenComponent implements OnInit {
const placeholdersResponse: IPlaceholdersResponse = await firstValueFrom(
this._reportTemplateService.getAvailablePlaceholders(this._dossierTemplatesService.activeDossierTemplateId),
);
this.placeholders = placeholderTypes.flatMap(type =>
placeholdersResponse[type].map(placeholder => ({
placeholder,
descriptionTranslation: this._getPlaceholderDescriptionTranslation(type, placeholder),
attributeName: this._getAttributeName(placeholder),
})),
this.placeholders$.next(
placeholderTypes.flatMap(type =>
placeholdersResponse[type].map(placeholder => ({
placeholder,
descriptionTranslation: this._getPlaceholderDescriptionTranslation(type, placeholder),
attributeName: this._getAttributeName(placeholder),
})),
),
);
}

13
apps/red-ui/src/app/modules/admin/screens/reports/reports.module.ts Normal file
View File

@ -0,0 +1,13 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { SharedModule } from '../../../shared/shared.module';
import { ReportsScreenComponent } from './reports-screen/reports-screen.component';
const routes = [{ path: '', component: ReportsScreenComponent }];
@NgModule({
declarations: [ReportsScreenComponent],
imports: [RouterModule.forChild(routes), CommonModule, SharedModule],
})
export class ReportsModule {}

35
apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
View File

@ -1,35 +0,0 @@
<section>
<div class="page-header">
<redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
<div class="flex-1 actions">
<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="editor-container">
<ngx-monaco-editor (init)="onCodeEditorInit($event)" [(ngModel)]="codeEditorText" [options]="editorOptions"></ngx-monaco-editor>
</div>
<div *ngIf="changed && permissionsService.isAdmin() && !isLeaving" class="changes-box">
<iqser-icon-button
(action)="save()"
[label]="'rules-screen.save-changes' | translate"
[type]="iconButtonTypes.primary"
icon="iqser:check"
></iqser-icon-button>
<div (click)="revert()" class="all-caps-label cancel" translate="rules-screen.revert-changes"></div>
</div>
</div>
</section>

10
apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.scss
View File

@ -1,10 +0,0 @@
.editor-container {
width: 100%;
padding-top: 15px;
padding-left: 15px;
}
ngx-monaco-editor {
height: 100%;
width: 100%;
}

11
apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.html Normal file
View File

@ -0,0 +1,11 @@
<ngx-monaco-editor (init)="onCodeEditorInit($event)" [(ngModel)]="codeEditorText" [options]="editorOptions"></ngx-monaco-editor>
<div *ngIf="changed && permissionsService.isAdmin() && !isLeaving" class="changes-box">
<iqser-icon-button
(action)="save()"
[label]="'rules-screen.save-changes' | translate"
[type]="iconButtonTypes.primary"
icon="iqser:check"
></iqser-icon-button>
<div (click)="revert()" class="all-caps-label cancel" translate="rules-screen.revert-changes"></div>
</div>

10
apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.scss Normal file
View File

@ -0,0 +1,10 @@
:host {
flex-grow: 1;
overflow: hidden;
padding: 15px 0 0 15px;
}
ngx-monaco-editor {
height: 100%;
width: 100%;
}

2
apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.ts → apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts
View File

@ -5,7 +5,7 @@ import { TranslateService } from '@ngx-translate/core';
import { saveAs } from 'file-saver';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
import { RulesService } from '../../services/rules.service';
import { RulesService } from '../../../services/rules.service';
import { firstValueFrom } from 'rxjs';
import ICodeEditor = monaco.editor.ICodeEditor;
import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;

14
apps/red-ui/src/app/modules/admin/screens/rules/rules.module.ts Normal file
View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { SharedModule } from '../../../shared/shared.module';
import { RulesScreenComponent } from './rules-screen/rules-screen.component';
import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
const routes = [{ path: '', component: RulesScreenComponent }];
@NgModule({
declarations: [RulesScreenComponent],
imports: [RouterModule.forChild(routes), CommonModule, SharedModule, MonacoEditorModule],
})
export class RulesModule {}

127
apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
View File

@ -1,127 +0,0 @@
<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">
<div #viewer class="viewer"></div>
<div *ngIf="changed && permissionsService.isAdmin()" class="changes-box">
<iqser-icon-button
(action)="save()"
[disabled]="form.invalid"
[label]="'watermark-screen.action.save' | translate"
[type]="iconButtonTypes.primary"
icon="iqser:check"
></iqser-icon-button>
<div (click)="revert()" class="all-caps-label cancel" translate="watermark-screen.action.revert"></div>
</div>
</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">
<textarea
(mousemove)="triggerChanges()"
[placeholder]="'watermark-screen.form.text-placeholder' | translate"
class="w-full"
formControlName="text"
iqserHasScrollbar
name="text"
rows="4"
type="text"
></textarea>
</div>
<div class="iqser-input-group">
<label class="all-caps-label mb-8" translate="watermark-screen.form.orientation"></label>
<div class="square-options">
<div
(click)="setValue('orientation', option)"
*ngFor="let option of ['VERTICAL', 'HORIZONTAL', 'DIAGONAL']"
[class.active]="form.get('orientation').value === option"
[class.disabled]="form.get('orientation').disabled"
[ngClass]="option"
>
<span>ABC</span>
</div>
</div>
</div>
<div class="iqser-input-group">
<label class="all-caps-label" translate="watermark-screen.form.font-size"></label>
<mat-slider (change)="configChanged()" color="primary" formControlName="fontSize" max="50" min="5"></mat-slider>
</div>
<div class="iqser-input-group">
<label class="all-caps-label" translate="watermark-screen.form.opacity"></label>
<mat-slider (change)="configChanged()" color="primary" formControlName="opacity" min="1"></mat-slider>
</div>
<div class="iqser-input-group w-150">
<label class="all-caps-label mb-5" translate="watermark-screen.form.color"></label>
<input
[placeholder]="'add-edit-dictionary.form.color-placeholder' | translate"
class="hex-color-input"
formControlName="hexColor"
name="hexColor"
type="text"
/>
<div
(colorPickerChange)="setValue('hexColor', $event)"
[class.disabled]="form.get('hexColor').disabled"
[colorPicker]="form.get('hexColor').value"
[cpDisabled]="form.get('hexColor').disabled"
[cpOutputFormat]="'hex'"
[cpPosition]="'top-right'"
[cpUseRootViewContainer]="true"
[style.background]="form.get('hexColor').value"
class="input-icon"
>
<mat-icon
*ngIf="!form.get('hexColor')?.value || form.get('hexColor').value?.length === 0"
svgIcon="red:color-picker"
></mat-icon>
</div>
</div>
<div class="iqser-input-group">
<label class="all-caps-label mb-8" translate="watermark-screen.form.font-type"></label>
<div class="square-options">
<div
(click)="setValue('fontType', option.value)"
*ngFor="
let option of [
{ value: 'times-new-roman', display: 'Times' },
{ value: 'helvetica', display: 'Helvetica' },
{ value: 'courier', display: 'Courier' }
]
"
[class.active]="form.get('fontType').value === option.value"
[class.disabled]="form.get('fontType').disabled"
[ngClass]="option.value"
>
{{ option.display }}
</div>
</div>
</div>
</form>
</div>
</div>
</section>

104
apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html Normal file
View File

@ -0,0 +1,104 @@
<div class="content-container">
<div #viewer class="viewer"></div>
<div *ngIf="changed && permissionsService.isAdmin()" class="changes-box">
<iqser-icon-button
(action)="save()"
[disabled]="form.invalid"
[label]="'watermark-screen.action.save' | translate"
[type]="iconButtonTypes.primary"
icon="iqser:check"
></iqser-icon-button>
<div (click)="revert()" class="all-caps-label cancel" translate="watermark-screen.action.revert"></div>
</div>
</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">
<textarea
(mousemove)="triggerChanges()"
[placeholder]="'watermark-screen.form.text-placeholder' | translate"
class="w-full"
formControlName="text"
iqserHasScrollbar
name="text"
rows="4"
type="text"
></textarea>
</div>
<div class="iqser-input-group">
<label class="all-caps-label mb-8" translate="watermark-screen.form.orientation"></label>
<div class="square-options">
<div
(click)="setValue('orientation', option)"
*ngFor="let option of ['VERTICAL', 'HORIZONTAL', 'DIAGONAL']"
[class.active]="form.get('orientation').value === option"
[class.disabled]="form.get('orientation').disabled"
[ngClass]="option"
>
<span>ABC</span>
</div>
</div>
</div>
<div class="iqser-input-group">
<label class="all-caps-label" translate="watermark-screen.form.font-size"></label>
<mat-slider (change)="configChanged()" color="primary" formControlName="fontSize" max="50" min="5"></mat-slider>
</div>
<div class="iqser-input-group">
<label class="all-caps-label" translate="watermark-screen.form.opacity"></label>
<mat-slider (change)="configChanged()" color="primary" formControlName="opacity" min="1"></mat-slider>
</div>
<div class="iqser-input-group w-150">
<label class="all-caps-label mb-5" translate="watermark-screen.form.color"></label>
<input
[placeholder]="'add-edit-dictionary.form.color-placeholder' | translate"
class="hex-color-input"
formControlName="hexColor"
name="hexColor"
type="text"
/>
<div
(colorPickerChange)="setValue('hexColor', $event)"
[class.disabled]="form.get('hexColor').disabled"
[colorPicker]="form.get('hexColor').value"
[cpDisabled]="form.get('hexColor').disabled"
[cpOutputFormat]="'hex'"
[cpPosition]="'top-right'"
[cpUseRootViewContainer]="true"
[style.background]="form.get('hexColor').value"
class="input-icon"
>
<mat-icon
*ngIf="!form.get('hexColor')?.value || form.get('hexColor').value?.length === 0"
svgIcon="red:color-picker"
></mat-icon>
</div>
</div>
<div class="iqser-input-group">
<label class="all-caps-label mb-8" translate="watermark-screen.form.font-type"></label>
<div class="square-options">
<div
(click)="setValue('fontType', option.value)"
*ngFor="
let option of [
{ value: 'times-new-roman', display: 'Times' },
{ value: 'helvetica', display: 'Helvetica' },
{ value: 'courier', display: 'Courier' }
]
"
[class.active]="form.get('fontType').value === option.value"
[class.disabled]="form.get('fontType').disabled"
[ngClass]="option.value"
>
{{ option.display }}
</div>
</div>
</div>
</form>
</div>

6
apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss → apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss
View File

@ -1,5 +1,11 @@
@use 'variables';
:host {
display: flex;
flex-grow: 1;
overflow: hidden;
}
.content-container {
order: 1;

2
apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.ts → apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts
View File

@ -6,7 +6,7 @@ import { HttpClient } from '@angular/common/http';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Debounce, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
import { IWatermark, WatermarkOrientation, WatermarkOrientations } from '@red/domain';
import { BASE_HREF } from '../../../../tokens';
import { BASE_HREF } from '../../../../../tokens';
import { stampPDFPage } from '@utils/page-stamper';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';

14
apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts Normal file
View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { SharedModule } from '@shared/shared.module';
import { WatermarkScreenComponent } from './watermark-screen/watermark-screen.component';
import { ColorPickerModule } from 'ngx-color-picker';
const routes = [{ path: '', component: WatermarkScreenComponent }];
@NgModule({
declarations: [WatermarkScreenComponent],
imports: [RouterModule.forChild(routes), CommonModule, SharedModule, ColorPickerModule],
})
export class WatermarkModule {}

4
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.scss
View File

@ -1,5 +1,5 @@
@use 'libs/common-ui/src/assets/styles/common-mixins';
@use 'apps/red-ui/src/assets/styles/variables';
@use 'common-mixins';
@use 'variables';
.search-container {
margin-top: 16px;

2
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/view-mode-selection/view-mode-selection.component.scss
View File

@ -1,4 +1,4 @@
@use 'apps/red-ui/src/assets/styles/variables';
@use 'variables';
.view-mode-selection {
border-right: 1px solid variables.$separator;

2
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.scss
View File

@ -1,4 +1,4 @@
@use 'apps/red-ui/src/assets/styles/variables';
@use 'variables';
.annotation-actions {
display: none;

4
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/document-info/document-info.component.scss
View File

@ -1,5 +1,5 @@
@use 'apps/red-ui/src/assets/styles/variables';
@use 'libs/common-ui/src/assets/styles/common-mixins';
@use 'variables';
@use 'common-mixins';
:host {
display: block;

4
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.scss
View File

@ -1,5 +1,5 @@
@use 'apps/red-ui/src/assets/styles/variables';
@use 'libs/common-ui/src/assets/styles/common-mixins';
@use 'variables';
@use 'common-mixins';
.read-only {
padding: 13px 16px;

4
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/page-exclusion/page-exclusion.component.scss
View File

@ -1,5 +1,5 @@
@use 'apps/red-ui/src/assets/styles/variables';
@use 'libs/common-ui/src/assets/styles/common-mixins';
@use 'variables';
@use 'common-mixins';
:host {
height: 100%;

2
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/page-indicator/page-indicator.component.scss
View File

@ -1,4 +1,4 @@
@use 'apps/red-ui/src/assets/styles/variables';
@use 'variables';
.page-wrapper {
color: variables.$accent;

2
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.scss
View File

@ -1,4 +1,4 @@
@use 'apps/red-ui/src/assets/styles/variables';
@use 'variables';
.page {
display: flex;