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

Merge branch 'RED-1420'

Browse Source
This commit is contained in:
Adina Țeudan 2021-05-05 19:01:34 +03:00
commit bc30ae88ef
17 changed files with 155 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/red-ui/src/app/app.component.ts
View File

@ -1,5 +1,6 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { AppLoadStateService } from './services/app-load-state.service'; import { AppLoadStateService } from './services/app-load-state.service';
import { RouterHistoryService } from './services/router-history.service';
@Component({ @Component({
selector: 'redaction-root', selector: 'redaction-root',
@ -7,5 +8,5 @@ import { AppLoadStateService } from './services/app-load-state.service';
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss']
}) })
export class AppComponent { export class AppComponent {
constructor(public appLoadStateService: AppLoadStateService) {} constructor(public appLoadStateService: AppLoadStateService, private readonly _routerHistoryService: RouterHistoryService) {}
} }

10
apps/red-ui/src/app/components/base-screen/base-screen.component.html
View File

@ -28,15 +28,9 @@
*ngIf="projectsView" *ngIf="projectsView"
[routerLinkActiveOptions]="{ exact: true }" [routerLinkActiveOptions]="{ exact: true }"
></a> ></a>
<a <a class="breadcrumb back" redactionNavigateLastProjectsScreen *ngIf="!projectsView">
class="breadcrumb back-to-projects"
routerLink="/main/projects"
routerLinkActive="active"
*ngIf="settingsView"
[routerLinkActiveOptions]="{ exact: true }"
>
<mat-icon svgIcon="red:expand"></mat-icon> <mat-icon svgIcon="red:expand"></mat-icon>
{{ 'top-bar.navigation-items.back-to-projects' | translate }} {{ 'top-bar.navigation-items.back' | translate }}
</a> </a>
<ng-container *ngIf="projectsView"> <ng-container *ngIf="projectsView">
<mat-icon class="primary" *ngIf="!appStateService.activeProject" svgIcon="red:arrow-down"></mat-icon> <mat-icon class="primary" *ngIf="!appStateService.activeProject" svgIcon="red:arrow-down"></mat-icon>

4
apps/red-ui/src/app/components/base-screen/base-screen.component.ts
View File

@ -45,10 +45,6 @@ export class BaseScreenComponent {
return this._projectsView; return this._projectsView;
} }
get settingsView() {
return !this._projectsView;
}
get showPendingDownloadsDot() { get showPendingDownloadsDot() {
return this.fileDownloadService.hasPendingDownloads; return this.fileDownloadService.hasPendingDownloads;
} }

17
apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
View File

@ -1,7 +1,12 @@
<section> <section>
<div class="page-header"> <div class="page-header">
<div class="actions flex-1"> <div class="actions flex-1">
<redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button> <redaction-circle-button
icon="red:close"
redactionNavigateLastProjectsScreen
tooltip="common.close"
tooltipPosition="below"
></redaction-circle-button>
</div> </div>
</div> </div>
@ -28,7 +33,7 @@
<!-- Table lines --> <!-- Table lines -->
<div *cdkVirtualFor="let download of fileDownloadService.downloads" class="table-item"> <div *cdkVirtualFor="let download of fileDownloadService.downloads" class="table-item">
<div> <div>
<div class="table-item-title heading" [class.no-bold]="download.lastDownload">{{ download.filename }}</div> <div [class.no-bold]="download.lastDownload" class="table-item-title heading">{{ download.filename }}</div>
</div> </div>
<div> <div>
<div class="small-label"> <div class="small-label">
@ -46,17 +51,17 @@
</div> </div>
</div> </div>
<div class="actions-container"> <div class="actions-container">
<div class="action-buttons" [class.active]="download.inProgress"> <div [class.active]="download.inProgress" class="action-buttons">
<redaction-circle-button <redaction-circle-button
*ngIf="download.status === 'READY' && !download.inProgress"
(action)="downloadItem(download)" (action)="downloadItem(download)"
*ngIf="download.status === 'READY' && !download.inProgress"
icon="red:download"
tooltip="downloads-list.actions.download" tooltip="downloads-list.actions.download"
type="dark-bg" type="dark-bg"
icon="red:download"
> >
</redaction-circle-button> </redaction-circle-button>
<redaction-circle-button (action)="deleteItem(download)" tooltip="downloads-list.actions.delete" type="dark-bg" icon="red:trash"> <redaction-circle-button (action)="deleteItem(download)" icon="red:trash" tooltip="downloads-list.actions.delete" type="dark-bg">
</redaction-circle-button> </redaction-circle-button>
<mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner> <mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner>

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

@ -9,12 +9,12 @@
<div class="actions"> <div class="actions">
<redaction-circle-button <redaction-circle-button
class="ml-6"
*ngIf="permissionsService.isUser()" *ngIf="permissionsService.isUser()"
[routerLink]="['/main/projects/']" class="ml-6"
icon="red:close"
redactionNavigateLastProjectsScreen
tooltip="common.close" tooltip="common.close"
tooltipPosition="below" tooltipPosition="below"
icon="red:close"
></redaction-circle-button> ></redaction-circle-button>
</div> </div>
</div> </div>
@ -26,8 +26,8 @@
</span> </span>
<div class="actions-wrapper"> <div class="actions-wrapper">
<redaction-pagination <redaction-pagination
[settings]="{ currentPage: logs?.page || 0, totalPages: totalPages }"
(pageChanged)="pageChanged($event)" (pageChanged)="pageChanged($event)"
[settings]="{ currentPage: logs?.page || 0, totalPages: totalPages }"
></redaction-pagination> ></redaction-pagination>
<div class="separator">·</div> <div class="separator">·</div>
<form [formGroup]="filterForm"> <form [formGroup]="filterForm">
@ -46,18 +46,18 @@
<mat-select-trigger> <mat-select-trigger>
<redaction-initials-avatar <redaction-initials-avatar
*ngIf="filterForm.get('userId').value !== ALL_USERS" *ngIf="filterForm.get('userId').value !== ALL_USERS"
size="small"
[userId]="filterForm.get('userId').value" [userId]="filterForm.get('userId').value"
[withName]="true" [withName]="true"
size="small"
></redaction-initials-avatar> ></redaction-initials-avatar>
<div *ngIf="filterForm.get('userId').value === ALL_USERS" [translate]="ALL_USERS"></div> <div *ngIf="filterForm.get('userId').value === ALL_USERS" [translate]="ALL_USERS"></div>
</mat-select-trigger> </mat-select-trigger>
<mat-option *ngFor="let userId of userIds" [value]="userId"> <mat-option *ngFor="let userId of userIds" [value]="userId">
<redaction-initials-avatar <redaction-initials-avatar
*ngIf="userId !== ALL_USERS" *ngIf="userId !== ALL_USERS"
size="small"
[userId]="userId" [userId]="userId"
[withName]="true" [withName]="true"
size="small"
></redaction-initials-avatar> ></redaction-initials-avatar>
<div *ngIf="userId === ALL_USERS" [translate]="ALL_USERS"></div> <div *ngIf="userId === ALL_USERS" [translate]="ALL_USERS"></div>
</mat-option> </mat-option>
@ -66,8 +66,8 @@
</div> </div>
<div class="separator">·</div> <div class="separator">·</div>
<div class="red-input-group datepicker-wrapper mr-20"> <div class="red-input-group datepicker-wrapper mr-20">
<input placeholder="dd/mm/yy" [matDatepicker]="fromPicker" formControlName="from" /> <input [matDatepicker]="fromPicker" formControlName="from" placeholder="dd/mm/yy" />
<mat-datepicker-toggle matSuffix [for]="fromPicker"> <mat-datepicker-toggle [for]="fromPicker" matSuffix>
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon> <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
</mat-datepicker-toggle> </mat-datepicker-toggle>
<mat-datepicker #fromPicker></mat-datepicker> <mat-datepicker #fromPicker></mat-datepicker>
@ -76,8 +76,8 @@
<div class="mr-20" translate="audit-screen.to"></div> <div class="mr-20" translate="audit-screen.to"></div>
<div class="red-input-group datepicker-wrapper"> <div class="red-input-group datepicker-wrapper">
<input placeholder="dd/mm/yy" [matDatepicker]="toPicker" formControlName="to" /> <input [matDatepicker]="toPicker" formControlName="to" placeholder="dd/mm/yy" />
<mat-datepicker-toggle matSuffix [for]="toPicker"> <mat-datepicker-toggle [for]="toPicker" matSuffix>
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon> <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
</mat-datepicker-toggle> </mat-datepicker-toggle>
<mat-datepicker #toPicker></mat-datepicker> <mat-datepicker #toPicker></mat-datepicker>
@ -87,17 +87,17 @@
</div> </div>
<div class="table-header" redactionSyncWidth="table-item"> <div class="table-header" redactionSyncWidth="table-item">
<redaction-table-col-name label="audit-screen.table-col-names.message" column="message"></redaction-table-col-name> <redaction-table-col-name column="message" label="audit-screen.table-col-names.message"></redaction-table-col-name>
<redaction-table-col-name label="audit-screen.table-col-names.date" column="date"></redaction-table-col-name> <redaction-table-col-name column="date" label="audit-screen.table-col-names.date"></redaction-table-col-name>
<redaction-table-col-name label="audit-screen.table-col-names.user" column="user" class="user-column"></redaction-table-col-name> <redaction-table-col-name class="user-column" column="user" label="audit-screen.table-col-names.user"></redaction-table-col-name>
<redaction-table-col-name label="audit-screen.table-col-names.category" column="category"></redaction-table-col-name> <redaction-table-col-name column="category" label="audit-screen.table-col-names.category"></redaction-table-col-name>
<div class="scrollbar-placeholder"></div> <div class="scrollbar-placeholder"></div>
</div> </div>
<redaction-empty-state *ngIf="!logs?.totalHits" icon="red:document" screen="audit-screen"></redaction-empty-state> <redaction-empty-state *ngIf="!logs?.totalHits" icon="red:document" screen="audit-screen"></redaction-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar> <cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
<div class="table-item" *cdkVirtualFor="let log of logs?.data"> <div *cdkVirtualFor="let log of logs?.data" class="table-item">
<div> <div>
{{ log.message }} {{ log.message }}
</div> </div>
@ -105,7 +105,7 @@
{{ log.recordDate | date: 'd MMM. yyyy, hh:mm a' }} {{ log.recordDate | date: 'd MMM. yyyy, hh:mm a' }}
</div> </div>
<div class="user-column"> <div class="user-column">
<redaction-initials-avatar size="small" [userId]="log.userId" [withName]="true"></redaction-initials-avatar> <redaction-initials-avatar [userId]="log.userId" [withName]="true" size="small"></redaction-initials-avatar>
</div> </div>
<div> <div>
{{ log.category }} {{ log.category }}

40
apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
View File

@ -10,9 +10,9 @@
<div class="actions"> <div class="actions">
<redaction-circle-button <redaction-circle-button
*ngIf="permissionsService.isUser()" *ngIf="permissionsService.isUser()"
[routerLink]="['/main/projects/']"
class="ml-6" class="ml-6"
icon="red:close" icon="red:close"
redactionNavigateLastProjectsScreen
tooltip="common.close" tooltip="common.close"
tooltipPosition="below" tooltipPosition="below"
></redaction-circle-button> ></redaction-circle-button>
@ -22,71 +22,71 @@
<div class="red-content-inner"> <div class="red-content-inner">
<div class="content-container"> <div class="content-container">
<div class="content-container-content"> <div class="content-container-content">
<form [formGroup]="digitalSignatureForm" (keyup)="formChanged()" autocomplete="off" *ngIf="digitalSignatureForm"> <form (keyup)="formChanged()" *ngIf="digitalSignatureForm" [formGroup]="digitalSignatureForm" autocomplete="off">
<input #fileInput (change)="fileChanged($event, fileInput)" hidden class="file-upload-input" type="file" /> <input #fileInput (change)="fileChanged($event, fileInput)" class="file-upload-input" hidden type="file" />
<redaction-empty-state <redaction-empty-state
*ngIf="!hasDigitalSignatureSet"
screen="digital-signature-screen"
buttonIcon="red:upload"
(action)="fileInput.click()" (action)="fileInput.click()"
*ngIf="!hasDigitalSignatureSet"
buttonIcon="red:upload"
screen="digital-signature-screen"
></redaction-empty-state> ></redaction-empty-state>
<div class="red-input-group required w-300" [class.hidden]="!hasDigitalSignatureSet"> <div [class.hidden]="!hasDigitalSignatureSet" class="red-input-group required w-300">
<label translate="digital-signature-screen.certificate-name.label"></label> <label translate="digital-signature-screen.certificate-name.label"></label>
<input <input
[placeholder]="'digital-signature-screen.certificate-name.placeholder' | translate"
formControlName="certificateName" formControlName="certificateName"
name="certificateName" name="certificateName"
[placeholder]="'digital-signature-screen.certificate-name.placeholder' | translate"
/> />
</div> </div>
<div class="red-input-group required w-300" [class.hidden]="!hasDigitalSignatureSet" *ngIf="!digitalSignatureExists"> <div *ngIf="!digitalSignatureExists" [class.hidden]="!hasDigitalSignatureSet" class="red-input-group required w-300">
<label translate="digital-signature-screen.password.label"></label> <label translate="digital-signature-screen.password.label"></label>
<input formControlName="keySecret" name="keySecret" [placeholder]="'digital-signature-screen.password.placeholder' | translate" /> <input [placeholder]="'digital-signature-screen.password.placeholder' | translate" formControlName="keySecret" name="keySecret" />
</div> </div>
<div class="red-input-group w-300" [class.hidden]="!hasDigitalSignatureSet"> <div [class.hidden]="!hasDigitalSignatureSet" class="red-input-group w-300">
<label translate="digital-signature-screen.reason.label"></label> <label translate="digital-signature-screen.reason.label"></label>
<input formControlName="reason" name="reason" [placeholder]="'digital-signature-screen.reason.placeholder' | translate" /> <input [placeholder]="'digital-signature-screen.reason.placeholder' | translate" formControlName="reason" name="reason" />
</div> </div>
<div class="red-input-group w-300" [class.hidden]="!hasDigitalSignatureSet"> <div [class.hidden]="!hasDigitalSignatureSet" class="red-input-group w-300">
<label translate="digital-signature-screen.location.label"></label> <label translate="digital-signature-screen.location.label"></label>
<input formControlName="location" name="location" [placeholder]="'digital-signature-screen.location.placeholder' | translate" /> <input [placeholder]="'digital-signature-screen.location.placeholder' | translate" formControlName="location" name="location" />
</div> </div>
<div class="red-input-group w-300" [class.hidden]="!hasDigitalSignatureSet"> <div [class.hidden]="!hasDigitalSignatureSet" class="red-input-group w-300">
<label translate="digital-signature-screen.contact-info.label"></label> <label translate="digital-signature-screen.contact-info.label"></label>
<input <input
[placeholder]="'digital-signature-screen.contact-info.placeholder' | translate"
formControlName="contactInfo" formControlName="contactInfo"
name="contactInfo" name="contactInfo"
[placeholder]="'digital-signature-screen.contact-info.placeholder' | translate"
/> />
</div> </div>
<div class="changes-box" [class.hidden]="!hasDigitalSignatureSet"> <div [class.hidden]="!hasDigitalSignatureSet" class="changes-box">
<redaction-icon-button <redaction-icon-button
(action)="saveDigitalSignature()"
[disabled]="digitalSignatureForm.invalid" [disabled]="digitalSignatureForm.invalid"
icon="red:check" icon="red:check"
(action)="saveDigitalSignature()"
text="digital-signature-screen.action.save" text="digital-signature-screen.action.save"
type="primary" type="primary"
></redaction-icon-button> ></redaction-icon-button>
<redaction-icon-button <redaction-icon-button
(action)="removeDigitalSignature()"
*ngIf="digitalSignatureExists" *ngIf="digitalSignatureExists"
icon="red:trash" icon="red:trash"
(action)="removeDigitalSignature()"
text="digital-signature-screen.action.delete" text="digital-signature-screen.action.delete"
type="primary" type="primary"
></redaction-icon-button> ></redaction-icon-button>
<div <div
(click)="loadDigitalSignatureAndInitializeForm()" (click)="loadDigitalSignatureAndInitializeForm()"
translate="digital-signature-screen.action.reset"
*ngIf="!digitalSignatureExists" *ngIf="!digitalSignatureExists"
class="all-caps-label cancel" class="all-caps-label cancel"
translate="digital-signature-screen.action.reset"
></div> ></div>
</div> </div>
</form> </form>

30
apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
View File

@ -11,9 +11,9 @@
<button (click)="sendMail()" color="primary" mat-flat-button translate="license-info-screen.email-report"></button> <button (click)="sendMail()" color="primary" mat-flat-button translate="license-info-screen.email-report"></button>
<redaction-circle-button <redaction-circle-button
*ngIf="permissionsService.isUser()" *ngIf="permissionsService.isUser()"
[routerLink]="['/main/projects/']"
class="ml-6" class="ml-6"
icon="red:close" icon="red:close"
redactionNavigateLastProjectsScreen
tooltip="common.close" tooltip="common.close"
tooltipPosition="below" tooltipPosition="below"
></redaction-circle-button> ></redaction-circle-button>
@ -88,7 +88,7 @@
<div>{{ currentInfo.numberOfAnalyzedPages }} ({{ analysisPercentageOfLicense | number: '1.0-2' }}%)</div> <div>{{ currentInfo.numberOfAnalyzedPages }} ({{ analysisPercentageOfLicense | number: '1.0-2' }}%)</div>
</div> </div>
<div class="row" *ngIf="!!unlicensedInfo"> <div *ngIf="!!unlicensedInfo" class="row">
<div translate="license-info-screen.unlicensed-analyzed"></div> <div translate="license-info-screen.unlicensed-analyzed"></div>
<div>{{ unlicensedInfo.numberOfAnalyzedPages }}</div> <div>{{ unlicensedInfo.numberOfAnalyzedPages }}</div>
</div> </div>
@ -101,21 +101,21 @@
</div> </div>
<combo-chart-component <combo-chart-component
[view]="[1000, 300]"
[scheme]="comboBarScheme"
[legend]="true"
[colorSchemeLine]="lineChartScheme"
[results]="barChart"
[animations]="true" [animations]="true"
[lineChart]="lineChartSeries" [colorSchemeLine]="lineChartScheme"
[xAxis]="true"
[yAxis]="true"
[showGridLines]="true"
[showYAxisLabel]="true"
[showRightYAxisLabel]="true"
[yAxisLabel]="'license-info-screen.chart.pages-per-month' | translate"
[yAxisLabelRight]="'license-info-screen.chart.total-pages' | translate"
[legendTitle]="'license-info-screen.chart.legend' | translate" [legendTitle]="'license-info-screen.chart.legend' | translate"
[legend]="true"
[lineChart]="lineChartSeries"
[results]="barChart"
[scheme]="comboBarScheme"
[showGridLines]="true"
[showRightYAxisLabel]="true"
[showYAxisLabel]="true"
[view]="[1000, 300]"
[xAxis]="true"
[yAxisLabelRight]="'license-info-screen.chart.total-pages' | translate"
[yAxisLabel]="'license-info-screen.chart.pages-per-month' | translate"
[yAxis]="true"
> >
</combo-chart-component> </combo-chart-component>
</div> </div>

38
apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
View File

@ -9,10 +9,10 @@
<redaction-circle-button <redaction-circle-button
*ngIf="permissionsService.isUser()" *ngIf="permissionsService.isUser()"
[routerLink]="['/main/projects/']" icon="red:close"
redactionNavigateLastProjectsScreen
tooltip="common.close" tooltip="common.close"
tooltipPosition="below" tooltipPosition="below"
icon="red:close"
></redaction-circle-button> ></redaction-circle-button>
</div> </div>
@ -35,39 +35,39 @@
<redaction-search-input [form]="searchForm" [placeholder]="'project-templates-listing.search'"></redaction-search-input> <redaction-search-input [form]="searchForm" [placeholder]="'project-templates-listing.search'"></redaction-search-input>
<redaction-icon-button <redaction-icon-button
(action)="openAddRuleSetDialog()"
*ngIf="permissionsService.isAdmin() && userPreferenceService.areDevFeaturesEnabled" *ngIf="permissionsService.isAdmin() && userPreferenceService.areDevFeaturesEnabled"
icon="red:plus" icon="red:plus"
(action)="openAddRuleSetDialog()"
text="project-templates-listing.add-new" text="project-templates-listing.add-new"
type="primary" type="primary"
></redaction-icon-button> ></redaction-icon-button>
</div> </div>
</div> </div>
<div class="table-header" redactionSyncWidth="table-item" [class.no-data]="!allEntities.length"> <div [class.no-data]="!allEntities.length" class="table-header" redactionSyncWidth="table-item">
<div class="select-oval-placeholder"></div> <div class="select-oval-placeholder"></div>
<redaction-table-col-name <redaction-table-col-name
label="project-templates-listing.table-col-names.name" (toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
column="name" column="name"
label="project-templates-listing.table-col-names.name"
></redaction-table-col-name>
<redaction-table-col-name class="user-column" label="project-templates-listing.table-col-names.created-by"></redaction-table-col-name>
<redaction-table-col-name
(toggleSort)="toggleSort($event)" (toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption" [activeSortingOption]="sortingOption"
[withSort]="true" [withSort]="true"
></redaction-table-col-name>
<redaction-table-col-name label="project-templates-listing.table-col-names.created-by" class="user-column"></redaction-table-col-name>
<redaction-table-col-name
label="project-templates-listing.table-col-names.created-on"
column="dateAdded" column="dateAdded"
(toggleSort)="toggleSort($event)" label="project-templates-listing.table-col-names.created-on"
[activeSortingOption]="sortingOption"
[withSort]="true"
></redaction-table-col-name> ></redaction-table-col-name>
<redaction-table-col-name <redaction-table-col-name
label="project-templates-listing.table-col-names.modified-on"
column="dateModified"
(toggleSort)="toggleSort($event)" (toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption" [activeSortingOption]="sortingOption"
[withSort]="true" [withSort]="true"
column="dateModified"
label="project-templates-listing.table-col-names.modified-on"
></redaction-table-col-name> ></redaction-table-col-name>
<div class="scrollbar-placeholder"></div> <div class="scrollbar-placeholder"></div>
</div> </div>
@ -82,11 +82,11 @@
<cdk-virtual-scroll-viewport [itemSize]="100" redactionHasScrollbar> <cdk-virtual-scroll-viewport [itemSize]="100" redactionHasScrollbar>
<div <div
class="table-item pointer"
*cdkVirtualFor="let ruleSet of displayedEntities | sortBy: sortingOption.order:sortingOption.column" *cdkVirtualFor="let ruleSet of displayedEntities | sortBy: sortingOption.order:sortingOption.column"
[routerLink]="[ruleSet.ruleSetId, 'dictionaries']" [routerLink]="[ruleSet.ruleSetId, 'dictionaries']"
class="table-item pointer"
> >
<div class="selection-column" (click)="toggleEntitySelected($event, ruleSet)"> <div (click)="toggleEntitySelected($event, ruleSet)" class="selection-column">
<redaction-round-checkbox [active]="isEntitySelected(ruleSet)"></redaction-round-checkbox> <redaction-round-checkbox [active]="isEntitySelected(ruleSet)"></redaction-round-checkbox>
</div> </div>
@ -103,7 +103,7 @@
</div> </div>
<div class="user-column"> <div class="user-column">
<redaction-initials-avatar [userId]="ruleSet.createdBy" [withName]="true"> </redaction-initials-avatar> <redaction-initials-avatar [userId]="ruleSet.createdBy" [withName]="true"></redaction-initials-avatar>
</div> </div>
<div class="small-label"> <div class="small-label">
{{ ruleSet.dateAdded | date: 'd MMM. yyyy' }} {{ ruleSet.dateAdded | date: 'd MMM. yyyy' }}
@ -114,9 +114,9 @@
</div> </div>
<redaction-rule-set-actions <redaction-rule-set-actions
class="actions-container"
[ruleSetId]="ruleSet.ruleSetId"
(loadRuleSetsData)="loadRuleSetsData()" (loadRuleSetsData)="loadRuleSetsData()"
[ruleSetId]="ruleSet.ruleSetId"
class="actions-container"
></redaction-rule-set-actions> ></redaction-rule-set-actions>
</div> </div>
<div class="scrollbar-placeholder"></div> <div class="scrollbar-placeholder"></div>

30
apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html
View File

@ -10,9 +10,9 @@
<div class="actions"> <div class="actions">
<redaction-circle-button <redaction-circle-button
*ngIf="permissionsService.isUser()" *ngIf="permissionsService.isUser()"
[routerLink]="['/main/projects/']"
class="ml-6" class="ml-6"
icon="red:close" icon="red:close"
redactionNavigateLastProjectsScreen
tooltip="common.close" tooltip="common.close"
tooltipPosition="below" tooltipPosition="below"
></redaction-circle-button> ></redaction-circle-button>
@ -26,7 +26,7 @@
<div class="heading-l" translate="smtp-config-screen.title"></div> <div class="heading-l" translate="smtp-config-screen.title"></div>
<div translate="smtp-config-screen.subtitle"></div> <div translate="smtp-config-screen.subtitle"></div>
</div> </div>
<form [formGroup]="configForm" (submit)="save()"> <form (submit)="save()" [formGroup]="configForm">
<div class="dialog-content"> <div class="dialog-content">
<div class="dialog-content-left"> <div class="dialog-content-left">
<div class="red-input-group required"> <div class="red-input-group required">
@ -34,8 +34,8 @@
<input <input
formControlName="host" formControlName="host"
name="host" name="host"
type="text"
placeholder="{{ 'smtp-config-screen.form.host-placeholder' | translate }}" placeholder="{{ 'smtp-config-screen.form.host-placeholder' | translate }}"
type="text"
/> />
</div> </div>
@ -44,8 +44,8 @@
<input <input
formControlName="port" formControlName="port"
name="port" name="port"
type="number"
placeholder="{{ 'smtp-config-screen.form.port-placeholder' | translate }}" placeholder="{{ 'smtp-config-screen.form.port-placeholder' | translate }}"
type="number"
/> />
</div> </div>
@ -54,8 +54,8 @@
<input <input
formControlName="from" formControlName="from"
name="from" name="from"
type="email"
placeholder="{{ 'smtp-config-screen.form.from-placeholder' | translate }}" placeholder="{{ 'smtp-config-screen.form.from-placeholder' | translate }}"
type="email"
/> />
</div> </div>
@ -64,8 +64,8 @@
<input <input
formControlName="fromDisplayName" formControlName="fromDisplayName"
name="fromDisplayName" name="fromDisplayName"
type="text"
placeholder="{{ 'smtp-config-screen.form.from-display-name-placeholder' | translate }}" placeholder="{{ 'smtp-config-screen.form.from-display-name-placeholder' | translate }}"
type="text"
/> />
<span class="hint" translate="smtp-config-screen.form.from-display-name-hint"></span> <span class="hint" translate="smtp-config-screen.form.from-display-name-hint"></span>
</div> </div>
@ -75,8 +75,8 @@
<input <input
formControlName="replyTo" formControlName="replyTo"
name="replyTo" name="replyTo"
type="text"
placeholder="{{ 'smtp-config-screen.form.reply-to-placeholder' | translate }}" placeholder="{{ 'smtp-config-screen.form.reply-to-placeholder' | translate }}"
type="text"
/> />
</div> </div>
@ -85,8 +85,8 @@
<input <input
formControlName="replyToDisplayName" formControlName="replyToDisplayName"
name="replyToDisplayName" name="replyToDisplayName"
type="text"
placeholder="{{ 'smtp-config-screen.form.reply-to-display-name-placeholder' | translate }}" placeholder="{{ 'smtp-config-screen.form.reply-to-display-name-placeholder' | translate }}"
type="text"
/> />
</div> </div>
@ -95,8 +95,8 @@
<input <input
formControlName="envelopeFrom" formControlName="envelopeFrom"
name="envelopeFrom" name="envelopeFrom"
type="text"
placeholder="{{ 'smtp-config-screen.form.envelope-from-placeholder' | translate }}" placeholder="{{ 'smtp-config-screen.form.envelope-from-placeholder' | translate }}"
type="text"
/> />
<span class="hint" translate="smtp-config-screen.form.envelope-from-hint"></span> <span class="hint" translate="smtp-config-screen.form.envelope-from-hint"></span>
</div> </div>
@ -104,20 +104,20 @@
<div> <div>
<div class="red-input-group"> <div class="red-input-group">
<label translate="smtp-config-screen.form.ssl"></label> <label translate="smtp-config-screen.form.ssl"></label>
<mat-slide-toggle formControlName="ssl" color="primary"></mat-slide-toggle> <mat-slide-toggle color="primary" formControlName="ssl"></mat-slide-toggle>
</div> </div>
<div class="red-input-group"> <div class="red-input-group">
<label translate="smtp-config-screen.form.starttls"></label> <label translate="smtp-config-screen.form.starttls"></label>
<mat-slide-toggle formControlName="starttls" color="primary"></mat-slide-toggle> <mat-slide-toggle color="primary" formControlName="starttls"></mat-slide-toggle>
</div> </div>
<div class="red-input-group"> <div class="red-input-group">
<label translate="smtp-config-screen.form.auth"></label> <label translate="smtp-config-screen.form.auth"></label>
<mat-slide-toggle formControlName="auth" color="primary"></mat-slide-toggle> <mat-slide-toggle color="primary" formControlName="auth"></mat-slide-toggle>
</div> </div>
<div <div
class="link-action"
*ngIf="configForm.get('auth').value"
(click)="openAuthConfigDialog(true)" (click)="openAuthConfigDialog(true)"
*ngIf="configForm.get('auth').value"
class="link-action"
translate="smtp-config-screen.form.change-credentials" translate="smtp-config-screen.form.change-credentials"
></div> ></div>
</div> </div>
@ -128,9 +128,9 @@
</button> </button>
<redaction-icon-button <redaction-icon-button
(action)="testConnection()"
[disabled]="configForm.invalid" [disabled]="configForm.invalid"
text="smtp-config-screen.actions.test-connection" text="smtp-config-screen.actions.test-connection"
(action)="testConnection()"
type="show-bg" type="show-bg"
></redaction-icon-button> ></redaction-icon-button>
</div> </div>

28
apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
View File

@ -17,18 +17,18 @@
type="primary" type="primary"
></redaction-icon-button> ></redaction-icon-button>
<redaction-circle-button <redaction-circle-button
class="ml-6"
*ngIf="permissionsService.isUser()" *ngIf="permissionsService.isUser()"
[routerLink]="['/main/projects/']" class="ml-6"
icon="red:close"
redactionNavigateLastProjectsScreen
tooltip="common.close" tooltip="common.close"
tooltipPosition="below" tooltipPosition="below"
icon="red:close"
></redaction-circle-button> ></redaction-circle-button>
</div> </div>
</div> </div>
<div class="red-content-inner"> <div class="red-content-inner">
<div class="content-container" [class.extended]="collapsedDetails"> <div [class.extended]="collapsedDetails" class="content-container">
<div class="header-item"> <div class="header-item">
<div class="select-all-container"> <div class="select-all-container">
<redaction-round-checkbox <redaction-round-checkbox
@ -47,9 +47,9 @@
(action)="bulkDelete()" (action)="bulkDelete()"
[disabled]="!canDeleteSelected" [disabled]="!canDeleteSelected"
[tooltip]="canDeleteSelected ? 'user-listing.bulk.delete' : 'user-listing.bulk.delete-disabled'" [tooltip]="canDeleteSelected ? 'user-listing.bulk.delete' : 'user-listing.bulk.delete-disabled'"
icon="red:trash"
tooltipPosition="after" tooltipPosition="after"
type="dark-bg" type="dark-bg"
icon="red:trash"
></redaction-circle-button> ></redaction-circle-button>
</ng-container> </ng-container>
@ -63,7 +63,7 @@
<redaction-table-col-name label="user-listing.table-col-names.email"></redaction-table-col-name> <redaction-table-col-name label="user-listing.table-col-names.email"></redaction-table-col-name>
<redaction-table-col-name label="user-listing.table-col-names.active" class="flex-center"></redaction-table-col-name> <redaction-table-col-name class="flex-center" label="user-listing.table-col-names.active"></redaction-table-col-name>
<redaction-table-col-name label="user-listing.table-col-names.roles"></redaction-table-col-name> <redaction-table-col-name label="user-listing.table-col-names.roles"></redaction-table-col-name>
@ -75,34 +75,34 @@
<cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar> <cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
<!-- Table lines --> <!-- Table lines -->
<div class="table-item" *cdkVirtualFor="let user of displayedEntities"> <div *cdkVirtualFor="let user of displayedEntities" class="table-item">
<div class="selection-column" (click)="toggleEntitySelected($event, user)"> <div (click)="toggleEntitySelected($event, user)" class="selection-column">
<redaction-round-checkbox [active]="isEntitySelected(user)"></redaction-round-checkbox> <redaction-round-checkbox [active]="isEntitySelected(user)"></redaction-round-checkbox>
</div> </div>
<div> <div>
<redaction-initials-avatar [user]="user" [withName]="true" [showYou]="true"></redaction-initials-avatar> <redaction-initials-avatar [showYou]="true" [user]="user" [withName]="true"></redaction-initials-avatar>
</div> </div>
<div class="small-label">{{ user.email || '-' }}</div> <div class="small-label">{{ user.email || '-' }}</div>
<div class="center"> <div class="center">
<mat-slide-toggle [checked]="userService.isActive(user)" color="primary" (toggleChange)="toggleActive(user)"></mat-slide-toggle> <mat-slide-toggle (toggleChange)="toggleActive(user)" [checked]="userService.isActive(user)" color="primary"></mat-slide-toggle>
</div> </div>
<div class="small-label">{{ getDisplayRoles(user) }}</div> <div class="small-label">{{ getDisplayRoles(user) }}</div>
<div class="actions-container"> <div class="actions-container">
<div class="action-buttons"> <div class="action-buttons">
<redaction-circle-button <redaction-circle-button
(action)="openAddEditUserDialog($event, user)" (action)="openAddEditUserDialog($event, user)"
icon="red:edit"
tooltip="user-listing.action.edit" tooltip="user-listing.action.edit"
type="dark-bg" type="dark-bg"
icon="red:edit"
> >
</redaction-circle-button> </redaction-circle-button>
<redaction-circle-button <redaction-circle-button
(action)="openDeleteUserDialog([user], $event)" (action)="openDeleteUserDialog([user], $event)"
[disabled]="user.userId === userService.userId"
icon="red:trash"
tooltip="user-listing.action.delete" tooltip="user-listing.action.delete"
type="dark-bg" type="dark-bg"
icon="red:trash"
[disabled]="user.userId === userService.userId"
> >
</redaction-circle-button> </redaction-circle-button>
</div> </div>
@ -112,7 +112,7 @@
</cdk-virtual-scroll-viewport> </cdk-virtual-scroll-viewport>
</div> </div>
<div class="right-container" redactionHasScrollbar [class.collapsed]="collapsedDetails"> <div [class.collapsed]="collapsedDetails" class="right-container" redactionHasScrollbar>
<redaction-users-stats (toggleCollapse)="toggleCollapsedDetails()" [chartData]="chartData"></redaction-users-stats> <redaction-users-stats (toggleCollapse)="toggleCollapsedDetails()" [chartData]="chartData"></redaction-users-stats>
</div> </div>
</div> </div>

13
apps/red-ui/src/app/modules/shared/directives/navigate-last-projects-screen.directive.ts Normal file
View File

@ -0,0 +1,13 @@
import { Directive, HostListener } from '@angular/core';
import { RouterHistoryService } from '../../../services/router-history.service';
@Directive({
selector: '[redactionNavigateLastProjectsScreen]'
})
export class NavigateLastProjectsScreenDirective {
constructor(private readonly _routerHistoryService: RouterHistoryService) {}
@HostListener('click') onClick() {
this._routerHistoryService.navigateToLastProjectsScreen();
}
}

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

@ -32,6 +32,7 @@ import { RoundCheckboxComponent } from './components/checkbox/round-checkbox.com
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core'; import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter'; import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { SelectComponent } from './components/select/select.component'; import { SelectComponent } from './components/select/select.component';
import { NavigateLastProjectsScreenDirective } from './directives/navigate-last-projects-screen.directive';
const buttons = [ChevronButtonComponent, CircleButtonComponent, FileDownloadBtnComponent, IconButtonComponent, UserButtonComponent]; const buttons = [ChevronButtonComponent, CircleButtonComponent, FileDownloadBtnComponent, IconButtonComponent, UserButtonComponent];
@ -57,7 +58,7 @@ const components = [
...buttons ...buttons
]; ];
const utils = [HumanizePipe, SyncWidthDirective, HasScrollbarDirective]; const utils = [HumanizePipe, SyncWidthDirective, HasScrollbarDirective, NavigateLastProjectsScreenDirective];
const modules = [MatConfigModule, TranslateModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule]; const modules = [MatConfigModule, TranslateModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule];

22
apps/red-ui/src/app/services/router-history.service.ts Normal file
View File

@ -0,0 +1,22 @@
import { Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class RouterHistoryService {
private _lastProjectsScreen = '/main/projects';
constructor(private readonly _router: Router) {
this._router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
if (event.url.startsWith('/main/projects')) {
this._lastProjectsScreen = event.url;
}
});
}
public navigateToLastProjectsScreen() {
this._router.navigate([this._lastProjectsScreen]);
}
}

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

@ -58,7 +58,7 @@
"top-bar": { "top-bar": {
"navigation-items": { "navigation-items": {
"projects": "Aktives Dossier", "projects": "Aktives Dossier",
"back-to-projects": "Zurück zu den Dossiers", "back": "Zurück",
"my-account": { "my-account": {
"children": { "children": {
"admin": "die Einstellungen", "admin": "die Einstellungen",

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

@ -58,7 +58,7 @@
"top-bar": { "top-bar": {
"navigation-items": { "navigation-items": {
"projects": "Active Dossier", "projects": "Active Dossier",
"back-to-projects": "Back to Dossiers", "back": "Back",
"my-account": { "my-account": {
"children": { "children": {
"admin": "Settings", "admin": "Settings",

2
apps/red-ui/src/assets/styles/red-breadcrumbs.scss
View File

@ -22,7 +22,7 @@
width: fit-content; width: fit-content;
white-space: nowrap; white-space: nowrap;
&.back-to-projects { &.back {
display: flex !important; display: flex !important;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

1
apps/red-ui/src/assets/styles/red-text-styles.scss
View File

@ -3,6 +3,7 @@
a { a {
color: $primary; color: $primary;
transition: color 0.1s;
&:hover { &:hover {
color: lighten($primary, 10%); color: lighten($primary, 10%);