Edit project dictionary

apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss

@@ -28,3 +28,7 @@
         margin-right: 8px;
     }
 }
+
+redaction-dictionary-manager {
+    padding: 15px;
+}

apps/red-ui/src/app/modules/projects/dialogs/dossier-dictionary-dialog/dossier-dictionary-dialog.component.scss

@@ -1,4 +1,5 @@
 .dialog-content {
     height: calc(90vh - 160px);
-    padding: 12px 12px 0;
+    box-sizing: border-box;
+    padding-bottom: 24px;
 }

apps/red-ui/src/app/modules/projects/dialogs/edit-project-dialog/dictionary/edit-project-dictionary.component.html

@@ -0,0 +1 @@
+<redaction-dictionary-manager [initialDictionaryEntries]="projectWrapper.type?.entries || []" [withFloatingActions]="false"></redaction-dictionary-manager>

apps/red-ui/src/app/modules/projects/dialogs/edit-project-dialog/dictionary/edit-project-dictionary.component.ts

@@ -0,0 +1,53 @@
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { AppStateService } from '../../../../../state/app-state.service';
+import { ProjectWrapper } from '../../../../../state/model/project.wrapper';
+import { EditProjectSectionInterface } from '../edit-project-section.interface';
+import { DictionarySaveService } from '../../../../shared/services/dictionary-save.service';
+import { DictionaryManagerComponent } from '../../../../shared/components/dictionary-manager/dictionary-manager.component';
+import { PermissionsService } from '../../../../../services/permissions.service';
+
+@Component({
+    selector: 'redaction-edit-project-dictionary',
+    templateUrl: './edit-project-dictionary.component.html',
+    styleUrls: ['./edit-project-dictionary.component.scss']
+})
+export class EditProjectDictionaryComponent implements EditProjectSectionInterface {
+    @Input() projectWrapper: ProjectWrapper;
+    @Output() updateProject = new EventEmitter<any>();
+    @ViewChild(DictionaryManagerComponent, { static: false }) private _dictionaryManager: DictionaryManagerComponent;
+
+    constructor(
+        private readonly _appStateService: AppStateService,
+        private readonly _dictionarySaveService: DictionarySaveService,
+        private readonly _permissionsService: PermissionsService
+    ) {}
+
+    get changed() {
+        return this._dictionaryManager.hasChanges;
+    }
+
+    get disabled() {
+        return !this._permissionsService.isAdmin();
+    }
+
+    save() {
+        this._dictionarySaveService
+            .saveEntries(
+                this._dictionaryManager.currentDictionaryEntries,
+                this._dictionaryManager.initialDictionaryEntries,
+                this.projectWrapper.ruleSetId,
+                'dossier_redaction',
+                this.projectWrapper.projectId,
+                false
+            )
+            .subscribe(async () => {
+                await this._appStateService.updateProjectDictionaryVersion(this.projectWrapper);
+                this._appStateService.updateProjectDictionary(this.projectWrapper.ruleSetId, this.projectWrapper.projectId);
+                this.updateProject.emit();
+            });
+    }
+
+    revert() {
+        this._dictionaryManager.revert();
+    }
+}

apps/red-ui/src/app/modules/projects/dialogs/edit-project-dialog/edit-project-dialog.component.html

@@ -17,7 +17,7 @@
 
                 <redaction-edit-project-general-info
                     (updateProject)="updatedProject($event)"
-                    *ngIf="activeNav === 'project-info'"
+                    *ngIf="activeNav === 'dossier-info'"
                     [projectWrapper]="projectWrapper"
                 ></redaction-edit-project-general-info>
 
@@ -26,6 +26,13 @@
                     *ngIf="activeNav === 'download-package'"
                     [projectWrapper]="projectWrapper"
                 ></redaction-edit-project-download-package>
+
+                <redaction-edit-project-dictionary
+                    (updateProject)="updatedProject($event)"
+                    *ngIf="activeNav === 'dossier-dictionary'"
+                    [projectWrapper]="projectWrapper"
+                >
+                </redaction-edit-project-dictionary>
             </div>
 
             <div class="dialog-actions">

apps/red-ui/src/app/modules/projects/dialogs/edit-project-dialog/edit-project-dialog.component.scss

@@ -15,7 +15,8 @@
             padding: 24px 32px;
             overflow: auto;
             @include scroll-bar;
-            height: calc(100% - 129px);
+            height: calc(100% - 81px);
+            box-sizing: border-box;
 
             .heading {
                 margin-bottom: 24px;
@@ -23,3 +24,8 @@
         }
     }
 }
+
+redaction-edit-project-dictionary {
+    display: block;
+    height: calc(100% - 44px);
+}

apps/red-ui/src/app/modules/projects/dialogs/edit-project-dialog/edit-project-dialog.component.ts

@@ -8,6 +8,7 @@ import { EditProjectDownloadPackageComponent } from './download-package/edit-pro
 import { EditProjectSectionInterface } from './edit-project-section.interface';
 import { NotificationService, NotificationType } from '../../../../services/notification.service';
 import { TranslateService } from '@ngx-translate/core';
+import { EditProjectDictionaryComponent } from './dictionary/edit-project-dictionary.component';
 
 @Component({
     selector: 'redaction-edit-project-dialog',
@@ -16,18 +17,20 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class EditProjectDialogComponent {
     navItems: { key: string; title?: string }[] = [
-        { key: 'project-info', title: 'general-info' },
+        { key: 'dossier-info', title: 'general-info' },
-        { key: 'download-package', title: 'choose-download' }
+        { key: 'download-package', title: 'choose-download' },
-        // { key: 'project-dictionary' }
+        { key: 'dossier-dictionary', title: 'dossier-dictionary' }
         // TODO:
+        // { key: 'members' },
         // { key: 'project-attributes' },
         // { key: 'report-attributes' }
     ];
-    activeNav = 'project-info';
+    activeNav = 'dossier-info';
     projectWrapper: ProjectWrapper;
 
     @ViewChild(EditProjectGeneralInfoComponent) generalInfoComponent: EditProjectGeneralInfoComponent;
     @ViewChild(EditProjectDownloadPackageComponent) downloadPackageComponent: EditProjectDownloadPackageComponent;
+    @ViewChild(EditProjectDictionaryComponent) dictionaryComponent: EditProjectDictionaryComponent;
 
     constructor(
         private readonly _appStateService: AppStateService,
@@ -47,8 +50,9 @@ export class EditProjectDialogComponent {
 
     get activeComponent(): EditProjectSectionInterface {
         return {
-            'project-info': this.generalInfoComponent,
+            'dossier-info': this.generalInfoComponent,
-            'download-package': this.downloadPackageComponent
+            'download-package': this.downloadPackageComponent,
+            'dossier-dictionary': this.dictionaryComponent
         }[this.activeNav];
     }
 
@@ -58,7 +62,9 @@ export class EditProjectDialogComponent {
             null,
             NotificationType.SUCCESS
         );
-        this.projectWrapper = updatedProject;
+        if (updatedProject) {
+            this.projectWrapper = updatedProject;
+        }
         this._changeRef.detectChanges();
         if (this.data.afterSave) {
             this.data.afterSave();

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

@@ -41,6 +41,7 @@ import { EditProjectDialogComponent } from './dialogs/edit-project-dialog/edit-p
 import { EditProjectGeneralInfoComponent } from './dialogs/edit-project-dialog/general-info/edit-project-general-info.component';
 import { EditProjectDownloadPackageComponent } from './dialogs/edit-project-dialog/download-package/edit-project-download-package.component';
 import { UserPreferenceControllerService } from '@redaction/red-ui-http';
+import { EditProjectDictionaryComponent } from './dialogs/edit-project-dialog/dictionary/edit-project-dictionary.component';
 
 const screens = [ProjectListingScreenComponent, ProjectOverviewScreenComponent, FilePreviewScreenComponent];
 
@@ -74,6 +75,7 @@ const components = [
     AnnotationRemoveActionsComponent,
     EditProjectGeneralInfoComponent,
     EditProjectDownloadPackageComponent,
+    EditProjectDictionaryComponent,
 
     ...screens,
     ...dialogs

apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html

@@ -24,7 +24,7 @@
                 </div>
             </div>
         </div>
-        <form [formGroup]="compareForm" class="compare-form">
+        <form [formGroup]="compareForm">
             <div class="red-input-group mr-16">
                 <mat-checkbox color="primary" formControlName="active"> {{ 'dictionary-overview.compare.compare' | translate }} </mat-checkbox>
             </div>

apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss

@@ -4,13 +4,15 @@
 :host {
     width: 100%;
     height: 100%;
+    box-sizing: border-box;
 }
 
-.compare-form {
+form {
     display: flex;
     flex: 1;
     justify-content: flex-end;
     align-items: center;
+    height: 100%;
 
     .red-input-group {
         margin-top: 0;
@@ -18,7 +20,7 @@
 }
 
 .editor-container {
-    height: calc(100% - 50px);
+    height: calc(100% - 53px);
     display: flex;
 
     > *:not(:first-child:last-child) {
@@ -36,9 +38,7 @@
 }
 
 .content-container {
-    padding: 15px;
+    height: 100%;
-    height: calc(100% - 30px);
-    width: calc(100% - 30px);
 
     .actions-bar {
         display: flex;

apps/red-ui/src/app/modules/shared/services/dictionary-save.service.ts

@@ -17,7 +17,7 @@ export class DictionarySaveService {
         private readonly _dictionaryControllerService: DictionaryControllerService
     ) {}
 
-    saveEntries(entries: string[], initialEntries: string[], ruleSetId: string, type: string, dossierId: string): Observable<any> {
+    saveEntries(entries: string[], initialEntries: string[], ruleSetId: string, type: string, dossierId: string, showToast = true): Observable<any> {
         let entriesToAdd = [];
         entries.forEach((currentEntry) => {
             entriesToAdd.push(currentEntry);
@@ -37,11 +37,13 @@ export class DictionarySaveService {
             return obs.pipe(
                 tap(
                     () => {
-                        this._notificationService.showToastNotification(
+                        if (showToast) {
-                            this._translateService.instant('dictionary-overview.success.generic'),
+                            this._notificationService.showToastNotification(
-                            null,
+                                this._translateService.instant('dictionary-overview.success.generic'),
-                            NotificationType.SUCCESS
+                                null,
-                        );
+                                NotificationType.SUCCESS
+                            );
+                        }
                     },
                     () => {
                         this._notificationService.showToastNotification(
@@ -59,7 +61,7 @@ export class DictionarySaveService {
                 NotificationType.ERROR
             );
 
-            return throwError('Entries to short');
+            return throwError('Entries too short');
         }
     }
 }

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

@@ -169,12 +169,13 @@
     "edit-project-dialog": {
         "header": "Edit {{projectName}}",
         "nav-items": {
-            "project-info": "Project Info",
+            "dossier-info": "Dossier Info",
             "general-info": "General Information",
             "download-package": "Download Package",
             "choose-download": "Choose what is included at download:",
-            "project-dictionary": "Project Dictionary",
+            "dictionary": "Dictionary",
-            "project-attributes": "Project Attributes",
+            "dossier-dictionary": "Dossier Dictionary",
+            "project-attributes": "Dossier Attributes",
             "report-attributes": "Report Attributes"
         },
         "actions": {

apps/red-ui/src/assets/styles/red-tooltips.scss

@@ -31,11 +31,11 @@
 
     &.warn {
         background-color: $yellow-2;
-        color: $accent;
+        color: $accent !important;
 
-        &:after {
+        //&:after {
-            border-top: solid 6px $yellow-2;
+        //    border-top: solid 6px $yellow-2;
-        }
+        //}
     }
 }