Pull request #106: Default colors screen

Merge in RED/ui from RED-951 to master

* commit '663b3dba996f1be25727d864dd138b253ad3d605':
  Default colors screen

apps/red-ui/src/app/app.module.ts

@@ -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,

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

@@ -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"

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

@@ -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 {
+export class RuleSetActionsComponent {
-    @Input() ruleSet: RuleSetModel;
+    @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) {
+        if (!this.ruleSetId) {
-            this.ruleSet = this._appStateService.activeRuleSet;
+            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) => {
+        this._dialogService.openAddEditRuleSetDialog(this.ruleSet, async (newRuleSet) => {
-            if (newRuleSet) {
+            if (newRuleSet && this.loadRuleSetsData) {
                 this.loadRuleSetsData.emit();
             }
         });
     }
 
-    openDeleteRuleSetDialog($event: any, ruleSet: RuleSetModel) {
+    openDeleteRuleSetDialog($event: any) {
-        this._dialogService.openDeleteRuleSetDialog($event, ruleSet, async () => {
+        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();
+            }
         });
     }
 }

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

@@ -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>

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

@@ -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,

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

@@ -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,

apps/red-ui/src/app/screens/admin/default-colors-screen/default-colors-screen.component.html

@@ -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>

apps/red-ui/src/app/screens/admin/default-colors-screen/default-colors-screen.component.scss

@@ -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;
+}

apps/red-ui/src/app/screens/admin/default-colors-screen/default-colors-screen.component.ts

@@ -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();
+        });
+    }
+}

apps/red-ui/src/app/screens/admin/default-colors-screen/edit-color-dialog/edit-color-dialog.component.html

@@ -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>

apps/red-ui/src/app/screens/admin/default-colors-screen/edit-color-dialog/edit-color-dialog.component.scss

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

apps/red-ui/src/app/screens/admin/default-colors-screen/edit-color-dialog/edit-color-dialog.component.ts

@@ -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);
+        }
+    }
+}

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

@@ -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>

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

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

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

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

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

@@ -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>

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

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

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

@@ -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() {}

apps/red-ui/src/assets/i18n/en.json

@@ -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"
+        }
     }
 }