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

Pull request #106: Default colors screen

Browse Source 
Merge in RED/ui from RED-951 to master

* commit '663b3dba996f1be25727d864dd138b253ad3d605':
  Default colors screen
This commit is contained in:
Timo Bejan 2021-01-27 18:45:28 +01:00
commit d89e0e9aae
19 changed files with 345 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/red-ui/src/app/app.module.ts
View File

@ -108,6 +108,8 @@ import { OverwriteFilesDialogComponent } from './dialogs/overwrite-files-dialog/
import { KeycloakService } from 'keycloak-angular';
import { FileDownloadBtnComponent } from './components/buttons/file-download-btn/file-download-btn.component';
import { LicenseInformationScreenComponent } from './screens/admin/license-information-screen/license-information-screen.component';
import { DefaultColorsScreenComponent } from './screens/admin/default-colors-screen/default-colors-screen.component';
import { EditColorDialogComponent } from './screens/admin/default-colors-screen/edit-color-dialog/edit-color-dialog.component';
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
@ -230,6 +232,14 @@ const routes = [
routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard]
}
},
{
path: 'default-colors',
component: DefaultColorsScreenComponent,
canActivate: [CompositeRouteGuard],
data: {
routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard]
}
},
{ path: '', redirectTo: 'dictionaries', pathMatch: 'full' }
]
}
@ -344,7 +354,9 @@ const matImports = [
ProjectListingActionsComponent,
RuleSetActionsComponent,
RuleSetViewSwitchComponent,
LicenseInformationScreenComponent
LicenseInformationScreenComponent,
DefaultColorsScreenComponent,
EditColorDialogComponent
],
imports: [
BrowserModule,

4
apps/red-ui/src/app/components/rule-set-actions/rule-set-actions.component.html
View File

@ -1,6 +1,6 @@
<div class="action-buttons">
<redaction-circle-button
(action)="openDeleteRuleSetDialog($event, ruleSet)"
(action)="openDeleteRuleSetDialog($event)"
*ngIf="permissionsService.isAdmin()"
tooltip="project-templates-listing.action.delete"
type="dark-bg"
@ -9,7 +9,7 @@
</redaction-circle-button>
<redaction-circle-button
(action)="openEditRuleSetDialog($event, ruleSet)"
(action)="openEditRuleSetDialog($event)"
*ngIf="permissionsService.isAdmin()"
tooltip="project-templates-listing.action.edit"
type="dark-bg"

29
apps/red-ui/src/app/components/rule-set-actions/rule-set-actions.component.ts
View File

@ -1,7 +1,6 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { DialogService } from '../../dialogs/dialog.service';
import { PermissionsService } from '../../common/service/permissions.service';
import { RuleSetModel } from '@redaction/red-ui-http';
import { AppStateService } from '../../state/app-state.service';
import { Router } from '@angular/router';
@ -10,8 +9,8 @@ import { Router } from '@angular/router';
templateUrl: './rule-set-actions.component.html',
styleUrls: ['./rule-set-actions.component.scss']
})
export class RuleSetActionsComponent implements OnInit {
@Input() ruleSet: RuleSetModel;
export class RuleSetActionsComponent {
@Input() ruleSetId: string;
@Output() loadRuleSetsData = new EventEmitter<any>();
constructor(
@ -20,28 +19,32 @@ export class RuleSetActionsComponent implements OnInit {
private readonly _router: Router,
public readonly permissionsService: PermissionsService
) {
if (!this.ruleSet) {
this.ruleSet = this._appStateService.activeRuleSet;
if (!this.ruleSetId) {
this.ruleSetId = this._appStateService.activeRuleSetId;
}
}
ngOnInit(): void {}
public get ruleSet() {
return this._appStateService.getRuleSetById(this.ruleSetId);
}
openEditRuleSetDialog($event: any, ruleSet: RuleSetModel) {
openEditRuleSetDialog($event: any) {
$event.stopPropagation();
this._dialogService.openAddEditRuleSetDialog(ruleSet, async (newRuleSet) => {
if (newRuleSet) {
this._dialogService.openAddEditRuleSetDialog(this.ruleSet, async (newRuleSet) => {
if (newRuleSet && this.loadRuleSetsData) {
this.loadRuleSetsData.emit();
}
});
}
openDeleteRuleSetDialog($event: any, ruleSet: RuleSetModel) {
this._dialogService.openDeleteRuleSetDialog($event, ruleSet, async () => {
openDeleteRuleSetDialog($event: any) {
this._dialogService.openDeleteRuleSetDialog($event, this.ruleSet, async () => {
await this._appStateService.loadAllRuleSets();
await this._appStateService.loadDictionaryData();
await this._router.navigate(['ui', 'admin']);
this.loadRuleSetsData.emit();
if (this.loadRuleSetsData) {
this.loadRuleSetsData.emit();
}
});
}
}

1
apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.html
View File

@ -3,6 +3,7 @@
<mat-button-toggle-group [value]="screen" (change)="switchView($event)" appearance="legacy">
<mat-button-toggle [value]="'dictionaries'"> {{ 'dictionaries' | translate }}</mat-button-toggle>
<mat-button-toggle [value]="'rules'" *ngIf="userPreferenceService.areDevFeaturesEnabled"> {{ 'rule-editor' | translate }}</mat-button-toggle>
<mat-button-toggle [value]="'default-colors'"> {{ 'default-colors' | translate }}</mat-button-toggle>
<mat-button-toggle [value]="'watermark'"> {{ 'watermark' | translate }}</mat-button-toggle>
</mat-button-toggle-group>
</div>

2
apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.ts
View File

@ -9,7 +9,7 @@ import { UserPreferenceService } from '../../common/service/user-preference.serv
styleUrls: ['./rule-set-view-switch.component.scss']
})
export class RuleSetViewSwitchComponent implements OnInit {
@Input() public screen: 'rules' | 'dictionaries' | 'watermark';
@Input() public screen: 'rules' | 'dictionaries' | 'watermark' | 'default-colors';
constructor(
public readonly userPreferenceService: UserPreferenceService,

18
apps/red-ui/src/app/dialogs/dialog.service.ts
View File

@ -1,6 +1,7 @@
import { Injectable } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import {
Colors,
DictionaryControllerService,
FileManagementControllerService,
FileStatus,
@ -23,6 +24,7 @@ import { ProjectWrapper } from '../state/model/project.wrapper';
import { AddEditDictionaryDialogComponent } from '../screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component';
import { AddEditRuleSetDialogComponent } from '../screens/admin/rule-sets-listing-screen/add-edit-rule-set-dialog/add-edit-rule-set-dialog.component';
import { OverwriteFilesDialogComponent } from './overwrite-files-dialog/overwrite-files-dialog.component';
import { EditColorDialogComponent } from '../screens/admin/default-colors-screen/edit-color-dialog/edit-color-dialog.component';
const dialogConfig = {
width: '662px',
@ -293,6 +295,22 @@ export class DialogService {
return ref;
}
public openEditColorsDialog(colors: Colors, colorKey: string, ruleSetId: string, cb?: Function): MatDialogRef<EditColorDialogComponent> {
const ref = this._dialog.open(EditColorDialogComponent, {
...dialogConfig,
data: { colors, colorKey, ruleSetId },
autoFocus: true
});
ref.afterClosed().subscribe((result) => {
if (result && cb) {
cb(result);
}
});
return ref;
}
public openAddEditRuleSetDialog(ruleSet: RuleSetModel, cb?: Function): MatDialogRef<AddEditRuleSetDialogComponent> {
const ref = this._dialog.open(AddEditRuleSetDialogComponent, {
...dialogConfig,

67
apps/red-ui/src/app/screens/admin/default-colors-screen/default-colors-screen.component.html Normal file
View File

@ -0,0 +1,67 @@
<section>
<div class="page-header">
<redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
<redaction-rule-set-view-switch [screen]="'default-colors'"></redaction-rule-set-view-switch>
<div class="flex-1 actions">
<redaction-rule-set-actions></redaction-rule-set-actions>
<redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="before" icon="red:close"></redaction-circle-button>
</div>
</div>
<div class="red-content-inner">
<div class="left-container">
<div class="header-item">
<span class="all-caps-label">
{{ 'default-colors-screen.table-header.title' | translate: { length: colors.length } }}
</span>
</div>
<div class="table-header" redactionSyncWidth="table-item">
<redaction-table-col-name
label="default-colors-screen.table-col-names.key"
column="key"
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
></redaction-table-col-name>
<redaction-table-col-name label="default-colors-screen.table-col-names.color" class="flex-center"></redaction-table-col-name>
<div class="placeholder-bottom-border"></div>
<div class="placeholder-bottom-border scrollbar-placeholder"></div>
</div>
<div class="grid-container" redactionHasScrollbar>
<!-- Table lines -->
<div class="table-item pointer" *ngFor="let color of colors | sortBy: sortingOption.order:sortingOption.column" [routerLink]="[color.type]">
<div>
<div class="table-item-title heading" [translate]="'default-colors-screen.types.' + color.key"></div>
</div>
<div class="color-wrapper">
<div class="color-square" [ngStyle]="{ 'background-color': color.value }"></div>
</div>
<div class="actions-container">
<div class="action-buttons">
<redaction-circle-button
(action)="openEditColorDialog($event, color)"
*ngIf="permissionsService.isAdmin()"
tooltip="default-colors-screen.action.edit"
type="dark-bg"
icon="red:edit"
>
</redaction-circle-button>
</div>
</div>
<div class="scrollbar-placeholder"></div>
</div>
</div>
</div>
</div>
</section>
<redaction-full-page-loading-indicator [displayed]="!viewReady"></redaction-full-page-loading-indicator>

32
apps/red-ui/src/app/screens/admin/default-colors-screen/default-colors-screen.component.scss Normal file
View File

@ -0,0 +1,32 @@
.left-container {
width: 100vw;
.grid-container {
grid-template-columns: 2fr 1fr 2fr 11px;
&.has-scrollbar:hover {
grid-template-columns: 2fr 1fr 2fr;
}
.table-item {
> div:not(.scrollbar-placeholder) {
padding-left: 24px;
}
.color-wrapper {
align-items: center;
.color-square {
width: 16px;
height: 16px;
min-width: 16px;
}
}
}
}
}
.page-header .actions {
display: flex;
justify-content: flex-end;
}

63
apps/red-ui/src/app/screens/admin/default-colors-screen/default-colors-screen.component.ts Normal file
View File

@ -0,0 +1,63 @@
import { Component } from '@angular/core';
import { AppStateService } from '../../../state/app-state.service';
import { Colors, DictionaryControllerService, TypeValue } from '@redaction/red-ui-http';
import { ActivatedRoute } from '@angular/router';
import { SortingOption, SortingService } from '../../../utils/sorting.service';
import { PermissionsService } from '../../../common/service/permissions.service';
import { DialogService } from '../../../dialogs/dialog.service';
@Component({
selector: 'redaction-default-colors-screen',
templateUrl: './default-colors-screen.component.html',
styleUrls: ['./default-colors-screen.component.scss']
})
export class DefaultColorsScreenComponent {
public viewReady = false;
private _colorsObj: Colors;
public colors: { key: string; value: string }[] = [];
constructor(
private readonly _appStateService: AppStateService,
private readonly _activatedRoute: ActivatedRoute,
private readonly _dictionaryControllerService: DictionaryControllerService,
private readonly _sortingService: SortingService,
private readonly _dialogService: DialogService,
public readonly permissionsService: PermissionsService
) {
this._appStateService.activateRuleSet(_activatedRoute.snapshot.params.ruleSetId);
this._loadColors();
}
public get sortingOption(): SortingOption {
return this._sortingService.getSortingOption('default-colors');
}
public toggleSort($event) {
this._sortingService.toggleSort('default-colors', $event);
}
public async loadRuleSetsData(): Promise<void> {
await this._appStateService.loadAllRuleSets();
}
private _loadColors() {
this._dictionaryControllerService
.getColors(this._appStateService.activeRuleSetId)
.toPromise()
.then((data) => {
this._colorsObj = data;
this.colors = Object.keys(data).map((key) => ({
key,
value: data[key]
}));
this.viewReady = true;
});
}
openEditColorDialog($event: any, color: { key: string; value: string }) {
$event.stopPropagation();
this._dialogService.openEditColorsDialog(this._colorsObj, color.key, this._appStateService.activeRuleSetId, async () => {
this._loadColors();
});
}
}

35
apps/red-ui/src/app/screens/admin/default-colors-screen/edit-color-dialog/edit-color-dialog.component.html Normal file
View File

@ -0,0 +1,35 @@
<section class="dialog">
<div class="dialog-header heading-l" [translate]="'default-colors-screen.types.' + this.colorKey"></div>
<form (submit)="saveColors()" [formGroup]="colorForm">
<div class="dialog-content">
<div class="red-input-group required">
<label translate="edit-color-dialog.form.color"></label>
<input
class="hex-color-input"
formControlName="color"
name="color"
type="text"
placeholder="{{ 'edit-color-dialog.form.color-placeholder' | translate }}"
/>
<div
class="input-icon"
[style.background]="colorForm.get('color').value"
[colorPicker]="colorForm.get('color').value"
[cpOutputFormat]="'hex'"
(colorPickerChange)="colorForm.get('color').setValue($event)"
>
<mat-icon svgIcon="red:color-picker" *ngIf="!colorForm.get('color').value || colorForm.get('color').value?.length === 0"></mat-icon>
</div>
</div>
</div>
<div class="dialog-actions">
<button [disabled]="colorForm.invalid || !changed" color="primary" mat-flat-button type="submit">
{{ 'edit-color-dialog.save' | translate }}
</button>
</div>
</form>
<redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
</section>

3
apps/red-ui/src/app/screens/admin/default-colors-screen/edit-color-dialog/edit-color-dialog.component.scss Normal file
View File

@ -0,0 +1,3 @@
.red-input-group {
width: fit-content;
}

60
apps/red-ui/src/app/screens/admin/default-colors-screen/edit-color-dialog/edit-color-dialog.component.ts Normal file
View File

@ -0,0 +1,60 @@
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Colors, DictionaryControllerService } from '@redaction/red-ui-http';
import { NotificationService, NotificationType } from '../../../../notification/notification.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'redaction-edit-color-dialog',
templateUrl: './edit-color-dialog.component.html',
styleUrls: ['./edit-color-dialog.component.scss']
})
export class EditColorDialogComponent {
public readonly colors: Colors;
public readonly colorKey: string;
private readonly _initialColor: string;
private readonly _ruleSetId: string;
public colorForm: FormGroup;
constructor(
private readonly _formBuilder: FormBuilder,
private readonly _dictionaryControllerService: DictionaryControllerService,
private readonly _notificationService: NotificationService,
private readonly _translateService: TranslateService,
public dialogRef: MatDialogRef<EditColorDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: { colors: Colors; colorKey: string; ruleSetId: string }
) {
this.colors = data.colors;
this.colorKey = data.colorKey;
this._ruleSetId = data.ruleSetId;
this._initialColor = data.colors[this.colorKey];
this.colorForm = this._formBuilder.group({
color: [this.colors[this.colorKey], [Validators.required, Validators.minLength(7)]]
});
}
public get changed(): boolean {
return this.colorForm.get('color').value !== this._initialColor;
}
async saveColors() {
const colors = {
...this.colors,
[this.colorKey]: this.colorForm.get('color').value
};
try {
await this._dictionaryControllerService.setColors(colors, this._ruleSetId).toPromise();
this.dialogRef.close(true);
this._notificationService.showToastNotification(
this._translateService.instant('edit-color-dialog.success', {
color: this._translateService.instant('default-colors-screen.types.' + this.colorKey)
})
);
} catch (e) {
this._notificationService.showToastNotification(this._translateService.instant('edit-color-dialog.error'), null, NotificationType.ERROR);
}
}
}

2
apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html
View File

@ -5,7 +5,7 @@
<redaction-rule-set-view-switch [screen]="'dictionaries'"></redaction-rule-set-view-switch>
<div class="flex-1 actions">
<redaction-rule-set-actions (loadRuleSetsData)="loadRuleSetsData()"> </redaction-rule-set-actions>
<redaction-rule-set-actions> </redaction-rule-set-actions>
<redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="before" icon="red:close"></redaction-circle-button>
</div>

4
apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts
View File

@ -142,8 +142,4 @@ export class DictionaryListingScreenComponent implements OnInit {
this._loadDictionaryData();
});
}
public async loadRuleSetsData(): Promise<void> {
await this._appStateService.loadAllRuleSets();
}
}

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

@ -128,7 +128,7 @@
<redaction-rule-set-actions
class="actions-container"
[ruleSet]="ruleSet"
[ruleSetId]="ruleSet.ruleSetId"
(loadRuleSetsData)="loadRuleSetsData()"
></redaction-rule-set-actions>
</div>

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

@ -5,7 +5,7 @@
<redaction-rule-set-view-switch [screen]="'rules'"></redaction-rule-set-view-switch>
<div class="flex-1 actions">
<redaction-rule-set-actions (loadRuleSetsData)="loadRuleSetsData()"> </redaction-rule-set-actions>
<redaction-rule-set-actions></redaction-rule-set-actions>
<redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="before" icon="red:close"></redaction-circle-button>
</div>

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

@ -133,8 +133,4 @@ export class RulesScreenComponent extends ComponentHasChanges {
fileReader.readAsText(file);
}
}
public loadRuleSetsData(): void {
console.log('load rule sets data');
}
}

5
apps/red-ui/src/app/utils/sorting.service.ts
View File

@ -5,7 +5,7 @@ export class SortingOption {
column: string;
}
type Screen = 'project-listing' | 'project-overview' | 'dictionary-listing' | 'rule-sets-listing';
type Screen = 'project-listing' | 'project-overview' | 'dictionary-listing' | 'rule-sets-listing' | 'default-colors';
@Injectable({
providedIn: 'root'
@ -15,7 +15,8 @@ export class SortingService {
'project-listing': { column: 'project.projectName', order: 'asc' },
'project-overview': { column: 'filename', order: 'asc' },
'dictionary-listing': { column: 'label', order: 'asc' },
'rule-sets-listing': { column: 'name', order: 'asc' }
'rule-sets-listing': { column: 'name', order: 'asc' },
'default-colors': { column: 'key', order: 'asc' }
};
constructor() {}

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

@ -757,5 +757,33 @@
"total-analyzed": "Total Analyzed Pages Since {{date}}",
"current-analyzed": "Analyzed Pages in Current Licensing Period",
"unlicensed-analyzed": "Unlicensed Analyzed Pages"
},
"default-colors": "Default Colors",
"default-colors-screen": {
"table-header": {
"title": "{{length}} Default Colors"
},
"table-col-names": {
"key": "Type",
"color": "Color"
},
"types": {
"defaultColor": "Default Color",
"requestAdd": "Request Add",
"requestRemove": "Request Remove",
"notRedacted": "Not Redacted"
},
"action": {
"edit": "Edit Color"
}
},
"edit-color-dialog": {
"success": "Successfully updated color for {{color}}.",
"error": "Failed to update colors.",
"save": "Save",
"form": {
"color": "Color",
"color-placeholder": "Color"
}
}
}