Dictionary technical name

apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html

@@ -5,6 +5,11 @@
 
     <form (submit)="saveDictionary()" [formGroup]="dictionaryForm">
         <div class="dialog-content">
+            <div class="red-input-group mb-14">
+                <label translate="add-edit-dictionary.form.technical-name"></label>
+                <div class="technical-name">{{ dictionary?.type || technicalName || '-' }}</div>
+            </div>
+
             <div *ngIf="!!dictionary" class="red-input-group mb-14">
                 <label translate="add-edit-dictionary.form.name"></label>
                 {{ dictionary.label }}
@@ -15,8 +20,8 @@
                     <label translate="add-edit-dictionary.form.name"></label>
                     <input
                         [placeholder]="'add-edit-dictionary.form.name-placeholder' | translate"
-                        formControlName="type"
+                        formControlName="label"
-                        name="type"
+                        name="label"
                         type="text"
                     />
                     <span class="hint" translate="add-edit-dictionary.form.name-hint"></span>

apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss

@@ -15,3 +15,7 @@
 .mb-14 {
     margin-bottom: 14px;
 }
+
+.technical-name {
+    font-weight: 600;
+}

apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts

@@ -7,7 +7,8 @@ import { Toaster } from '@services/toaster.service';
 import { TranslateService } from '@ngx-translate/core';
 import { TypeValueWrapper } from '@models/file/type-value.wrapper';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { humanize } from '@iqser/common-ui';
+import { AppStateService } from '@state/app-state.service';
+import { toKebabCase } from '@utils/functions';
 
 @Component({
     selector: 'redaction-add-edit-dictionary-dialog',
@@ -17,10 +18,12 @@ import { humanize } from '@iqser/common-ui';
 export class AddEditDictionaryDialogComponent {
     dictionaryForm: FormGroup;
     readonly dictionary: TypeValueWrapper;
+    technicalName = '';
     private readonly _dossierTemplateId: string;
 
     constructor(
         private readonly _dictionaryControllerService: DictionaryControllerService,
+        private readonly _appStateService: AppStateService,
         private readonly _formBuilder: FormBuilder,
         private readonly _toaster: Toaster,
         private readonly _translateService: TranslateService,
@@ -31,7 +34,7 @@ export class AddEditDictionaryDialogComponent {
         this.dictionary = _data.dictionary;
         this._dossierTemplateId = _data.dossierTemplateId;
         this.dictionaryForm = _formBuilder.group({
-            type: [this.dictionary?.type, [Validators.required, Validators.minLength(3)]],
+            label: [this.dictionary?.label, [Validators.required, Validators.minLength(3)]],
             description: [this.dictionary?.description],
             rank: [this.dictionary?.rank, Validators.required],
             hexColor: [this.dictionary?.hexColor, [Validators.required, Validators.minLength(7)]],
@@ -39,12 +42,15 @@ export class AddEditDictionaryDialogComponent {
             addToDictionaryAction: [!!this.dictionary?.addToDictionaryAction],
             caseSensitive: [this.dictCaseSensitive]
         });
+        this.dictionaryForm.get('label').valueChanges.subscribe(() => {
+            this._updateTechnicalName();
+        });
     }
 
     get dialogHeader(): string {
         return this._translateService.instant('add-edit-dictionary.title', {
             type: this.dictionary ? 'edit' : 'create',
-            name: humanize(this.dictionary?.type)
+            name: this.dictionary?.label
         });
     }
 
@@ -100,13 +106,26 @@ export class AddEditDictionaryDialogComponent {
         );
     }
 
+    private _updateTechnicalName() {
+        const displayName = this.dictionaryForm.get('label').value.trim();
+        const existingTechnicalNames = Object.keys(this._appStateService.dictionaryData[this._dossierTemplateId]);
+        const baseTechnicalName: string = toKebabCase(displayName);
+        let technicalName = baseTechnicalName;
+        let suffix = 1;
+        while (existingTechnicalNames.includes(technicalName)) {
+            technicalName = [baseTechnicalName, suffix++].join('-');
+        }
+        this.technicalName = technicalName;
+    }
+
     private _formToObject(): TypeValue {
         return {
+            type: this.dictionary?.type || this.technicalName,
+            label: this.dictionaryForm.get('label').value,
             caseInsensitive: !this.dictionaryForm.get('caseSensitive').value,
             description: this.dictionaryForm.get('description').value,
             hexColor: this.dictionaryForm.get('hexColor').value,
             hint: this.dictionaryForm.get('hint').value,
-            type: this.dictionaryForm.get('type').value,
             rank: this.dictionaryForm.get('rank').value,
             addToDictionaryAction: this.dictionaryForm.get('addToDictionaryAction').value,
             dossierTemplateId: this._dossierTemplateId

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

@@ -26,7 +26,6 @@ const toChartConfig = (dict: TypeValueWrapper): DoughnutChartConfig => ({
     providers: [...DefaultListingServices]
 })
 export class DictionaryListingScreenComponent extends ListingComponent<TypeValueWrapper> implements OnInit {
-    protected readonly _primaryKey = 'label';
     readonly iconButtonTypes = IconButtonTypes;
     readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = this._userService.currentUser;
@@ -46,8 +45,8 @@ export class DictionaryListingScreenComponent extends ListingComponent<TypeValue
             class: 'flex-center'
         }
     ];
-
     chartData: DoughnutChartConfig[] = [];
+    protected readonly _primaryKey = 'type';
 
     constructor(
         protected readonly _injector: Injector,

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

@@ -7,18 +7,18 @@
                 (action)="openDeleteDictionaryDialog($event)"
                 *ngIf="currentUser.isAdmin"
                 [tooltip]="'dictionary-overview.action.delete' | translate"
+                [type]="circleButtonTypes.dark"
                 icon="red:trash"
                 tooltipPosition="below"
-                [type]="circleButtonTypes.dark"
             ></iqser-circle-button>
 
             <iqser-circle-button
                 (action)="openEditDictionaryDialog($event)"
                 *ngIf="currentUser.isAdmin"
                 [tooltip]="'dictionary-overview.action.edit' | translate"
+                [type]="circleButtonTypes.dark"
                 icon="red:edit"
                 tooltipPosition="below"
-                [type]="circleButtonTypes.dark"
             ></iqser-circle-button>
 
             <iqser-circle-button
@@ -60,11 +60,11 @@
             [initialEntries]="entries"
         ></redaction-dictionary-manager>
 
-        <div class="right-container">
+        <div *ngIf="!!dictionary" class="right-container">
             <div class="dictionary-header">
                 <div [style.backgroundColor]="dictionary.hexColor" class="color-box"></div>
                 <div class="heading-xl">
-                    {{ dictionary.type | humanize }}
+                    {{ dictionary.label }}
                 </div>
             </div>
             <div class="small-label stats-subtitle">

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

@@ -40,18 +40,18 @@ export class DictionaryOverviewScreenComponent extends ComponentHasChanges imple
         private readonly _dictionaryControllerService: DictionaryControllerService
     ) {
         super(_translateService);
-        this._appStateService.activateDictionary(
-            this._activatedRoute.snapshot.params.type,
-            this._activatedRoute.snapshot.params.dossierTemplateId
-        );
-        this.dictionary = this._appStateService.activeDictionary;
     }
 
     get hasChanges() {
         return this._dictionaryManager.hasChanges;
     }
 
-    ngOnInit(): void {
+    async ngOnInit() {
+        await this._appStateService.activateDictionary(
+            this._activatedRoute.snapshot.params.type,
+            this._activatedRoute.snapshot.params.dossierTemplateId
+        );
+        this.dictionary = this._appStateService.activeDictionary;
         this._loadEntries();
     }
 

apps/red-ui/src/app/state/app-state.service.ts

@@ -22,7 +22,6 @@ import { TypeValueWrapper } from '@models/file/type-value.wrapper';
 import { DossierTemplateModelWrapper } from '@models/file/dossier-template-model.wrapper';
 import { DossiersService } from '../modules/dossier/services/dossiers.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { humanize } from '@iqser/common-ui';
 import { UserPreferenceService } from '@services/user-preference.service';
 
 export interface AppState {
@@ -193,7 +192,7 @@ export class AppStateService {
         return this.dossierTemplates.find(rs => rs.dossierTemplateId === id);
     }
 
-    getDictionaryTypeValue(key: string, dossierTemplateId?: string) {
+    getDictionaryTypeValue(key: string, dossierTemplateId?: string): TypeValueWrapper {
         if (!dossierTemplateId && this.activeDossier) {
             dossierTemplateId = this.activeDossier.dossierTemplateId;
         }
@@ -401,12 +400,32 @@ export class AppStateService {
         }
     }
 
-    getDictionaryDataForDossierTemplateObservables(dossierTemplateId: string, dictionaryData: { [key: string]: any }): Observable<any>[] {
+    async loadDictionaryData(): Promise<void> {
+        const obj = {};
+        const observables = [];
+
+        for (const dossierTemplate of this.dossierTemplates) {
+            obj[dossierTemplate.dossierTemplateId] = {};
+            observables.push(
+                ...this._getDictionaryDataForDossierTemplateObservables(
+                    dossierTemplate.dossierTemplateId,
+                    obj[dossierTemplate.dossierTemplateId]
+                )
+            );
+        }
+
+        await forkJoin(observables).toPromise();
+        this._dictionaryData = obj;
+    }
+
+    private _getDictionaryDataForDossierTemplateObservables(
+        dossierTemplateId: string,
+        dictionaryData: { [key: string]: any }
+    ): Observable<any>[] {
         const typeObs = this._dictionaryControllerService.getAllTypes(dossierTemplateId).pipe(
             tap(typesResponse => {
                 for (const type of typesResponse.types) {
                     dictionaryData[type.type] = type;
-                    dictionaryData[type.type].label = humanize(type.type, false);
                 }
             })
         );
@@ -634,24 +653,6 @@ export class AppStateService {
         return [typeObs, colorsObs];
     }
 
-    async loadDictionaryData(): Promise<void> {
-        const obj = {};
-        const observables = [];
-
-        for (const dossierTemplate of this.dossierTemplates) {
-            obj[dossierTemplate.dossierTemplateId] = {};
-            observables.push(
-                ...this.getDictionaryDataForDossierTemplateObservables(
-                    dossierTemplate.dossierTemplateId,
-                    obj[dossierTemplate.dossierTemplateId]
-                )
-            );
-        }
-
-        await forkJoin(observables).toPromise();
-        this._dictionaryData = obj;
-    }
-
     private async _updateLastActiveFileForDossier(dossierId: string, fileId: string) {
         this.activeDossier.files.forEach(f => {
             f.lastOpened = f.fileId === fileId;

apps/red-ui/src/app/utils/functions.ts

@@ -89,3 +89,10 @@ export function getLeftDateTime(ISOString: string) {
 export function removeBraces(str: any): string {
     return str.replace(/[{}]/g, '');
 }
+
+export function toKebabCase(str: string): string {
+    return str
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .replace(/[\s_]+/g, '-')
+        .toLowerCase();
+}

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

@@ -42,12 +42,13 @@
       "description": "Description",
       "description-placeholder": "Enter Description",
       "hint": "Hint",
-      "name": "Dictionary Name",
+      "name": "Display Name",
       "name-hint": "Cannot be edited after saving.",
       "name-placeholder": "Enter Name",
       "rank": "Rank",
       "rank-placeholder": "1000",
-      "redaction": "Redaction"
+      "redaction": "Redaction",
+      "technical-name": "Technical Name"
     },
     "save": "Save Dictionary",
     "title": "{type, select, edit{Edit {name}} create{Create} other{}} Dictionary"

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

@@ -23,8 +23,8 @@ form .red-input-group:not(first-of-type) {
         right: 1px;
         bottom: 1px;
         background: $grey-5;
-        height: 32px;
+        height: 34px;
-        width: 32px;
+        width: 34px;
         border-left: 1px solid $grey-5;
         border-top-right-radius: 7px;
         border-bottom-right-radius: 7px;