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

Add entity

Browse Source
This commit is contained in:
Adina Țeudan 2022-03-24 13:09:11 +02:00
parent c93eabbdc2
commit ce1fda43a7
15 changed files with 382 additions and 496 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
apps/red-ui/src/app/modules/admin/dialogs/add-entity-dialog/add-entity-dialog.component.html
View File

@ -5,101 +5,15 @@
<form [formGroup]="form">
<div class="dialog-content">
<div class="iqser-input-group mb-14">
<label translate="add-entity.form.technical-name"></label>
<div class="technical-name">{{ dictionary?.type || (technicalName$ | async) || '-' }}</div>
</div>
<div *ngIf="(canEditLabel$ | async) === false" class="iqser-input-group mb-14">
<label translate="add-entity.form.name"></label>
{{ dictionary.label }}
</div>
<div class="first-row">
<div *ngIf="canEditLabel$ | async" class="iqser-input-group required">
<label translate="add-entity.form.name"></label>
<input
[placeholder]="'add-entity.form.name-placeholder' | translate"
formControlName="label"
name="label"
type="text"
/>
<span class="hint" translate="add-entity.form.name-hint"></span>
</div>
<div class="iqser-input-group required w-75">
<label translate="add-entity.form.rank"></label>
<input
[placeholder]="'add-entity.form.rank-placeholder' | translate"
formControlName="rank"
name="rank"
type="number"
/>
</div>
<div class="iqser-input-group required">
<label translate="add-entity.form.color"></label>
<input
[placeholder]="'add-entity.form.color-placeholder' | translate"
class="hex-color-input"
formControlName="hexColor"
name="hexColor"
type="text"
/>
<div
(colorPickerChange)="form.get('hexColor').setValue($event)"
[colorPicker]="form.get('hexColor').value"
[cpOutputFormat]="'hex'"
[style.background]="form.get('hexColor').value"
class="input-icon"
>
<mat-icon *ngIf="hasColor$ | async" svgIcon="red:color-picker"></mat-icon>
</div>
</div>
</div>
<div class="iqser-input-group w-450">
<label translate="add-entity.form.description"></label>
<textarea
[placeholder]="'add-entity.form.description-placeholder' | translate"
formControlName="description"
iqserHasScrollbar
name="description"
rows="4"
type="text"
></textarea>
</div>
<div class="iqser-input-group slider-row">
<mat-button-toggle-group appearance="legacy" formControlName="hint" name="hint">
<mat-button-toggle [value]="false">
{{ 'add-entity.form.redaction' | translate }}
</mat-button-toggle>
<mat-button-toggle [value]="true">
{{ 'add-entity.form.hint' | translate }}
</mat-button-toggle>
</mat-button-toggle-group>
</div>
<div class="iqser-input-group">
<mat-checkbox color="primary" formControlName="caseSensitive" name="caseSensitive">
{{ 'add-entity.form.case-sensitive' | translate }}
</mat-checkbox>
</div>
<div class="iqser-input-group">
<mat-checkbox color="primary" formControlName="addToDictionaryAction" name="addToDictionaryAction">
{{ 'add-entity.form.add-to-dictionary-action' | translate }}
</mat-checkbox>
</div>
</div>
<div class="dialog-actions">
<button (click)="save()" [disabled]="disabled" color="primary" mat-flat-button type="button">
{{ 'add-entity.save' | translate }}
</button>
<redaction-add-edit-entity [dossierTemplateId]="dossierTemplateId" [entity]="entity" [form]="form"></redaction-add-edit-entity>
</div>
</form>
<div class="dialog-actions">
<button (click)="save()" [disabled]="disabled" color="primary" mat-flat-button type="button">
{{ 'add-entity.save' | translate }}
</button>
</div>
<iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
</section>

106
apps/red-ui/src/app/modules/admin/dialogs/add-entity-dialog/add-entity-dialog.component.ts
View File

@ -1,16 +1,13 @@
import { ChangeDetectionStrategy, Component, Inject, Injector } from '@angular/core';
import { ChangeDetectionStrategy, Component, Inject, Injector, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { firstValueFrom, Observable } from 'rxjs';
import { BaseDialogComponent, LoadingService, shareDistinctLast, Toaster } from '@iqser/common-ui';
import { BaseDialogComponent } from '@iqser/common-ui';
import { TranslateService } from '@ngx-translate/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { toSnakeCase } from '@utils/functions';
import { DictionaryService } from '@services/entity-services/dictionary.service';
import { Dictionary, IDictionary } from '@red/domain';
import { Dictionary } from '@red/domain';
import { UserService } from '@services/user.service';
import { map } from 'rxjs/operators';
import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
import { AddEditEntityComponent } from '../../shared/components/add-edit-entity/add-edit-entity.component';
@Component({
templateUrl: './add-entity-dialog.component.html',
@ -18,103 +15,50 @@ import { DictionariesMapService } from '@services/entity-services/dictionaries-m
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AddEntityDialogComponent extends BaseDialogComponent {
readonly dictionary = this._data.dictionary;
readonly canEditLabel$ = this._canEditLabel$;
readonly technicalName$: Observable<string>;
readonly entity = this._data.dictionary;
readonly dialogHeader = this._translateService.instant('add-entity.title');
readonly hasColor$: Observable<boolean>;
private readonly _dossierTemplateId = this._data.dossierTemplateId;
readonly dossierTemplateId = this._data.dossierTemplateId;
@ViewChild(AddEditEntityComponent) private readonly _addEditEntityComponent: AddEditEntityComponent;
constructor(
readonly userService: UserService,
private readonly _toaster: Toaster,
private readonly _formBuilder: FormBuilder,
private readonly _dictionariesMapService: DictionariesMapService,
private readonly _translateService: TranslateService,
private readonly _dictionaryService: DictionaryService,
private readonly _loadingService: LoadingService,
protected readonly _injector: Injector,
protected readonly _dialogRef: MatDialogRef<AddEntityDialogComponent>,
@Inject(MAT_DIALOG_DATA)
private readonly _data: { readonly dictionary: Dictionary; readonly dossierTemplateId: string },
) {
super(_injector, _dialogRef, !!_data.dictionary);
this.form = this._getForm(this.dictionary);
this.form = this._getForm(this.entity);
this.initialFormValue = this.form.getRawValue();
this.hasColor$ = this._colorEmpty$;
this.technicalName$ = this.form.get('label').valueChanges.pipe(map(value => this._toTechnicalName(value)));
}
private get _canEditLabel$() {
return this.userService.currentUser$.pipe(
map(user => user.isAdmin || !this._data.dictionary),
shareDistinctLast(),
);
}
private get _colorEmpty$() {
return this.form.get('hexColor').valueChanges.pipe(map((value: string) => !value || value?.length === 0));
}
getDictCaseSensitive(dictionary: Dictionary): boolean {
return dictionary ? !dictionary.caseInsensitive : false;
}
async save(): Promise<void> {
this._loadingService.start();
const dictionary = this._formToObject();
const dossierTemplateId = this._data.dossierTemplateId;
try {
if (this.dictionary) {
// edit mode
await firstValueFrom(this._dictionaryService.updateDictionary(dictionary, dossierTemplateId, dictionary.type));
this._toaster.success(_('add-entity.success.edit'));
} else {
// create mode
await firstValueFrom(this._dictionaryService.addDictionary({ ...dictionary, dossierTemplateId }));
this._toaster.success(_('add-entity.success.create'));
}
await this._addEditEntityComponent.save();
this._dialogRef.close(true);
} catch (e) {}
this._loadingService.stop();
} catch (e) {
console.error(e);
}
}
private _getForm(dictionary: Dictionary): FormGroup {
private _getForm(entity: Dictionary): FormGroup {
return this._formBuilder.group({
label: [dictionary?.label, [Validators.required, Validators.minLength(3)]],
description: [dictionary?.description],
rank: [dictionary?.rank, Validators.required],
hexColor: [dictionary?.hexColor, [Validators.required, Validators.minLength(7)]],
hint: [!!dictionary?.hint],
addToDictionaryAction: [!!dictionary?.addToDictionaryAction],
caseSensitive: [this.getDictCaseSensitive(dictionary)],
type: [entity?.label],
label: [entity?.label, [Validators.required, Validators.minLength(3)]],
description: [entity?.description],
rank: [entity?.rank, Validators.required],
hexColor: [entity?.hexColor, [Validators.required, Validators.minLength(7)]],
hint: [!!entity?.hint],
addToDictionaryAction: [!!entity?.addToDictionaryAction],
caseSensitive: [entity ? !entity.caseInsensitive : false],
recommendationHexColor: [this.entity?.recommendationHexColor, [Validators.required, Validators.minLength(7)]],
hasDictionary: [this.entity?.hasDictionary],
defaultReason: [{ value: null, disabled: true }],
});
}
private _toTechnicalName(value: string) {
const existingTechnicalNames = this._dictionariesMapService.get(this._dossierTemplateId).map(dict => dict.type);
const baseTechnicalName = toSnakeCase(value.trim());
let technicalName = baseTechnicalName;
let suffix = 1;
while (existingTechnicalNames.includes(technicalName)) {
technicalName = [baseTechnicalName, suffix++].join('_');
}
return technicalName;
}
private _formToObject(): IDictionary {
return {
type: this.dictionary?.type || this._toTechnicalName(this.form.get('label').value),
label: this.form.get('label').value,
caseInsensitive: !this.form.get('caseSensitive').value,
description: this.form.get('description').value,
hexColor: this.form.get('hexColor').value,
hint: this.form.get('hint').value,
rank: this.form.get('rank').value,
addToDictionaryAction: this.form.get('addToDictionaryAction').value,
dossierTemplateId: this._data.dossierTemplateId,
};
}
}

4
apps/red-ui/src/app/modules/admin/screens/entities/entities.module.ts
View File

@ -6,7 +6,7 @@ import { DictionaryScreenComponent } from './screens/dictionary/dictionary-scree
import { PendingChangesGuard } from '@guards/can-deactivate.guard';
import { InfoComponent } from './screens/info/info.component';
import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
import { ColorPickerModule } from 'ngx-color-picker';
import { SharedAdminModule } from '../../shared/shared-admin.module';
const routes = [
{ path: '', redirectTo: 'info', pathMatch: 'full' },
@ -33,6 +33,6 @@ const routes = [
@NgModule({
declarations: [DictionaryScreenComponent, InfoComponent],
imports: [RouterModule.forChild(routes), CommonModule, SharedModule, MonacoEditorModule, ColorPickerModule],
imports: [RouterModule.forChild(routes), SharedAdminModule, CommonModule, SharedModule, MonacoEditorModule],
})
export class EntitiesModule {}

123
apps/red-ui/src/app/modules/admin/screens/entities/screens/info/info.component.html
View File

@ -10,128 +10,7 @@
</div>
<div class="dialog-content">
<form [formGroup]="form">
<div class="row">
<div class="iqser-input-group required">
<label translate="entity.info.form.name"></label>
<input
[placeholder]="'entity.info.form.name-placeholder' | translate"
formControlName="label"
name="label"
type="text"
/>
</div>
<div class="iqser-input-group required w-75">
<label translate="entity.info.form.rank"></label>
<input
[placeholder]="'entity.info.form.rank-placeholder' | translate"
formControlName="rank"
name="rank"
type="number"
/>
</div>
</div>
<div class="row mt-14">
<div class="iqser-input-group required">
<label translate="entity.info.form.color"></label>
<input
[placeholder]="'entity.info.form.color-placeholder' | translate"
class="hex-color-input"
formControlName="hexColor"
name="hexColor"
type="text"
/>
<div
(colorPickerChange)="form.get('hexColor').setValue($event)"
[colorPicker]="form.get('hexColor').value"
[cpDisabled]="form.get('hexColor').disabled"
[cpOutputFormat]="'hex'"
[style.background]="form.get('hexColor').value"
class="input-icon"
>
<mat-icon *ngIf="hasHexColor$ | async" svgIcon="red:color-picker"></mat-icon>
</div>
</div>
<div class="iqser-input-group required">
<label translate="entity.info.form.recommendation-color"></label>
<input
[placeholder]="'entity.info.form.recommendation-color-placeholder' | translate"
class="hex-color-input"
formControlName="recommendationHexColor"
name="recommendationHexColor"
type="text"
/>
<div
(colorPickerChange)="form.get('recommendationHexColor').setValue($event)"
[colorPicker]="form.get('recommendationHexColor').value"
[cpDisabled]="form.get('recommendationHexColor').disabled"
[cpOutputFormat]="'hex'"
[style.background]="form.get('recommendationHexColor').value"
class="input-icon"
>
<mat-icon *ngIf="hasRecommendationHexColor$ | async" svgIcon="red:color-picker"></mat-icon>
</div>
</div>
</div>
<div class="iqser-input-group mb-14">
<label translate="entity.info.form.technical-name"></label>
<div class="technical-name">{{ initialFormValue.type }}</div>
<span class="hint" translate="entity.info.form.technical-name-hint"></span>
</div>
<div class="iqser-input-group slider-row">
<mat-button-toggle-group appearance="legacy" formControlName="hint" name="hint">
<mat-button-toggle [value]="false">
{{ 'entity.info.form.redaction' | translate }}
</mat-button-toggle>
<mat-button-toggle [value]="true">
{{ 'entity.info.form.hint' | translate }}
</mat-button-toggle>
</mat-button-toggle-group>
</div>
<div *ngIf="form.get('defaultReason')" class="iqser-input-group w-400">
<label translate="entity.info.form.default-reason"></label>
<mat-select
[placeholder]="'entity.info.form.default-reason-placeholder' | translate"
formControlName="defaultReason"
></mat-select>
</div>
<div class="iqser-input-group w-400">
<label translate="entity.info.form.description"></label>
<textarea
[placeholder]="'entity.info.form.description-placeholder' | translate"
formControlName="description"
iqserHasScrollbar
name="description"
rows="4"
type="text"
></textarea>
</div>
<div class="iqser-input-group">
<mat-slide-toggle color="primary" formControlName="hasDictionary">
{{ 'entity.info.form.has-dictionary' | translate }}
</mat-slide-toggle>
</div>
<div *ngIf="form.get('caseSensitive')" class="iqser-input-group">
<mat-checkbox color="primary" formControlName="caseSensitive" name="caseSensitive">
{{ 'entity.info.form.case-sensitive' | translate }}
</mat-checkbox>
</div>
<div *ngIf="form.get('addToDictionaryAction')" class="iqser-input-group">
<mat-checkbox color="primary" formControlName="addToDictionaryAction" name="addToDictionaryAction">
{{ 'entity.info.form.add-to-dictionary-action' | translate }}
</mat-checkbox>
</div>
</form>
<redaction-add-edit-entity [dossierTemplateId]="dossierTemplateId" [entity]="entity" [form]="form"></redaction-add-edit-entity>
</div>
<div *ngIf="permissionsService.canEditEntities()" class="dialog-actions">

12
apps/red-ui/src/app/modules/admin/screens/entities/screens/info/info.component.scss
View File

@ -26,15 +26,3 @@
min-height: unset;
}
}
.row {
display: flex;
> *:not(:last-child) {
margin-right: 16px;
}
.iqser-input-group {
margin-top: 0;
}
}

74
apps/red-ui/src/app/modules/admin/screens/entities/screens/info/info.component.ts
View File

@ -1,18 +1,14 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
import { BaseFormComponent, LoadingService, Toaster } from '@iqser/common-ui';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Dictionary, IDictionary } from '@red/domain';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
import { BaseFormComponent } from '@iqser/common-ui';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Dictionary } from '@red/domain';
import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
import { DOSSIER_TEMPLATE_ID, ENTITY_TYPE } from '@utils/constants';
import { ActivatedRoute } from '@angular/router';
import { map, startWith } from 'rxjs/operators';
import { firstValueFrom, Observable } from 'rxjs';
import { UserService } from '@services/user.service';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { DictionaryService } from '@services/entity-services/dictionary.service';
import { PermissionsService } from '@services/permissions.service';
const REDACTION_FIELDS = ['defaultReason', 'caseSensitive', 'addToDictionaryAction'];
import { AddEditEntityComponent } from '../../../../shared/components/add-edit-entity/add-edit-entity.component';
@Component({
selector: 'redaction-info',
@ -21,79 +17,45 @@ const REDACTION_FIELDS = ['defaultReason', 'caseSensitive', 'addToDictionaryActi
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class InfoComponent extends BaseFormComponent {
readonly hasHexColor$: Observable<boolean>;
readonly hasRecommendationHexColor$: Observable<boolean>;
readonly currentUser = this._userService.currentUser;
entity: Dictionary;
readonly #dossierTemplateId: string;
readonly dossierTemplateId: string;
@ViewChild(AddEditEntityComponent) private readonly _addEditEntityComponent: AddEditEntityComponent;
constructor(
private readonly _formBuilder: FormBuilder,
private readonly _dictionariesMapService: DictionariesMapService,
private readonly _route: ActivatedRoute,
private readonly _userService: UserService,
private readonly _toaster: Toaster,
private readonly _loadingService: LoadingService,
private readonly _dictionaryService: DictionaryService,
private readonly _changeRef: ChangeDetectorRef,
readonly permissionsService: PermissionsService,
) {
super();
this.#dossierTemplateId = this._route.parent.snapshot.paramMap.get(DOSSIER_TEMPLATE_ID);
this.dossierTemplateId = this._route.parent.snapshot.paramMap.get(DOSSIER_TEMPLATE_ID);
this.form = this._initializeForm();
this.hasHexColor$ = this._colorEmpty$('hexColor');
this.hasRecommendationHexColor$ = this._colorEmpty$('recommendationHexColor');
}
async save(): Promise<void> {
this._loadingService.start();
const dictionary = this._formToObject();
try {
await firstValueFrom(this._dictionaryService.updateDictionary(dictionary, this.#dossierTemplateId, dictionary.type));
this._toaster.success(_('entity.info.actions.save-success'));
await this._addEditEntityComponent.save();
this.initialFormValue = this.form.getRawValue();
this._changeRef.markForCheck();
} catch (e) {
this._toaster.error(_('entity.info.actions.save-failed'));
console.error(e);
}
this._loadingService.stop();
}
revert(): void {
this.form = this._initializeForm();
}
private _colorEmpty$(field: string) {
return this.form.get(field).valueChanges.pipe(
startWith(this.form.get(field).value),
map((value: string) => !value || value?.length === 0),
);
}
private _formToObject(): IDictionary {
return {
type: this.entity.type,
label: this.form.get('label').value,
caseInsensitive: !this.form.get('caseSensitive')?.value,
description: this.form.get('description').value,
hexColor: this.form.get('hexColor').value,
recommendationHexColor: this.form.get('recommendationHexColor').value,
hint: this.form.get('hint').value,
rank: this.form.get('rank').value,
addToDictionaryAction: this.form.get('addToDictionaryAction')?.value,
dossierTemplateId: this.#dossierTemplateId,
hasDictionary: this.form.get('hasDictionary').value,
};
}
private _initializeForm(): FormGroup {
const entityType = this._route.parent.snapshot.paramMap.get(ENTITY_TYPE);
this.entity = this._dictionariesMapService.getDictionary(entityType, this.#dossierTemplateId);
this.entity = this._dictionariesMapService.getDictionary(entityType, this.dossierTemplateId);
const controlsConfig = {
type: [this.entity.type],
label: [
{
value: this.entity.label,
@ -120,20 +82,6 @@ export class InfoComponent extends BaseFormComponent {
this.initialFormValue = form.getRawValue();
form.get('hint').valueChanges.subscribe(isHint => {
if (isHint) {
REDACTION_FIELDS.forEach(field => this.form.removeControl(field));
} else {
form.addControl('addToDictionaryAction', new FormControl(this.entity.addToDictionaryAction));
form.addControl('caseSensitive', new FormControl(!this.entity.caseInsensitive));
form.addControl('defaultReason', new FormControl({ value: null, disabled: true }));
}
});
if (!this.permissionsService.canEditEntities()) {
form.disable();
}
return form;
}
}

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

@ -56,7 +56,7 @@
<div class="iqser-input-group w-150">
<label class="all-caps-label mb-5" translate="watermark-screen.form.color"></label>
<input
[placeholder]="'add-entity.form.color-placeholder' | translate"
[placeholder]="'watermark-screen.form.color-placeholder' | translate"
class="hex-color-input"
formControlName="hexColor"
name="hexColor"

116
apps/red-ui/src/app/modules/admin/shared/components/add-edit-entity/add-edit-entity.component.html Normal file
View File

@ -0,0 +1,116 @@
<form [formGroup]="form">
<div class="row">
<div class="iqser-input-group required">
<label translate="add-edit-entity.form.name"></label>
<input [placeholder]="'add-edit-entity.form.name-placeholder' | translate" formControlName="label" name="label" type="text" />
</div>
<div class="iqser-input-group required w-75">
<label translate="add-edit-entity.form.rank"></label>
<input [placeholder]="'add-edit-entity.form.rank-placeholder' | translate" formControlName="rank" name="rank" type="number" />
</div>
</div>
<div class="row mt-14">
<div class="iqser-input-group required">
<label translate="add-edit-entity.form.color"></label>
<input
[placeholder]="'add-edit-entity.form.color-placeholder' | translate"
class="hex-color-input"
formControlName="hexColor"
name="hexColor"
type="text"
/>
<div
(colorPickerChange)="form.get('hexColor').setValue($event)"
[colorPicker]="form.get('hexColor').value"
[cpDisabled]="form.get('hexColor').disabled"
[cpOutputFormat]="'hex'"
[style.background]="form.get('hexColor').value"
class="input-icon"
>
<mat-icon *ngIf="hasHexColor$ | async" svgIcon="red:color-picker"></mat-icon>
</div>
</div>
<div class="iqser-input-group required">
<label translate="add-edit-entity.form.recommendation-color"></label>
<input
[placeholder]="'add-edit-entity.form.recommendation-color-placeholder' | translate"
class="hex-color-input"
formControlName="recommendationHexColor"
name="recommendationHexColor"
type="text"
/>
<div
(colorPickerChange)="form.get('recommendationHexColor').setValue($event)"
[colorPicker]="form.get('recommendationHexColor').value"
[cpDisabled]="form.get('recommendationHexColor').disabled"
[cpOutputFormat]="'hex'"
[style.background]="form.get('recommendationHexColor').value"
class="input-icon"
>
<mat-icon *ngIf="hasRecommendationHexColor$ | async" svgIcon="red:color-picker"></mat-icon>
</div>
</div>
</div>
<div class="iqser-input-group mb-14">
<label translate="add-edit-entity.form.technical-name"></label>
<div class="technical-name">{{ this.form.get('type').value || '-' }}</div>
<span
[translateParams]="{ type: entity ? 'edit' : 'create' }"
[translate]="'add-edit-entity.form.technical-name-hint'"
class="hint"
></span>
</div>
<div class="iqser-input-group slider-row">
<mat-button-toggle-group appearance="legacy" formControlName="hint" name="hint">
<mat-button-toggle [value]="false">
{{ 'add-edit-entity.form.redaction' | translate }}
</mat-button-toggle>
<mat-button-toggle [value]="true">
{{ 'add-edit-entity.form.hint' | translate }}
</mat-button-toggle>
</mat-button-toggle-group>
</div>
<div *ngIf="form.get('defaultReason')" class="iqser-input-group w-400">
<label translate="add-edit-entity.form.default-reason"></label>
<mat-select
[placeholder]="'add-edit-entity.form.default-reason-placeholder' | translate"
formControlName="defaultReason"
></mat-select>
</div>
<div class="iqser-input-group w-400">
<label translate="add-edit-entity.form.description"></label>
<textarea
[placeholder]="'add-edit-entity.form.description-placeholder' | translate"
formControlName="description"
iqserHasScrollbar
name="description"
rows="4"
type="text"
></textarea>
</div>
<div class="iqser-input-group">
<mat-slide-toggle color="primary" formControlName="hasDictionary">
{{ 'add-edit-entity.form.has-dictionary' | translate }}
</mat-slide-toggle>
</div>
<div *ngIf="form.get('caseSensitive')" class="iqser-input-group">
<mat-checkbox color="primary" formControlName="caseSensitive" name="caseSensitive">
{{ 'add-edit-entity.form.case-sensitive' | translate }}
</mat-checkbox>
</div>
<div *ngIf="form.get('addToDictionaryAction')" class="iqser-input-group">
<mat-checkbox color="primary" formControlName="addToDictionaryAction" name="addToDictionaryAction">
{{ 'add-edit-entity.form.add-to-dictionary-action' | translate }}
</mat-checkbox>
</div>
</form>

11
apps/red-ui/src/app/modules/admin/shared/components/add-edit-entity/add-edit-entity.component.scss Normal file
View File

@ -0,0 +1,11 @@
.row {
display: flex;
> *:not(:last-child) {
margin-right: 16px;
}
.iqser-input-group {
margin-top: 0;
}
}

122
apps/red-ui/src/app/modules/admin/shared/components/add-edit-entity/add-edit-entity.component.ts Normal file
View File

@ -0,0 +1,122 @@
import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { Dictionary, IDictionary } from '@red/domain';
import { FormControl, FormGroup } from '@angular/forms';
import { map, startWith } from 'rxjs/operators';
import { firstValueFrom, Observable } from 'rxjs';
import { toSnakeCase } from '@utils/functions';
import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
import { PermissionsService } from '@services/permissions.service';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { DictionaryService } from '@services/entity-services/dictionary.service';
import { LoadingService, Toaster } from '@iqser/common-ui';
const REDACTION_FIELDS = ['defaultReason', 'caseSensitive', 'addToDictionaryAction'];
@Component({
selector: 'redaction-add-edit-entity [entity] [dossierTemplateId]',
templateUrl: './add-edit-entity.component.html',
styleUrls: ['./add-edit-entity.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AddEditEntityComponent implements OnInit, OnChanges {
@Input() dossierTemplateId: string;
@Input() entity: Dictionary;
@Input() form: FormGroup;
hasHexColor$: Observable<boolean>;
hasRecommendationHexColor$: Observable<boolean>;
technicalName$: Observable<string>;
constructor(
private readonly _dictionariesMapService: DictionariesMapService,
private readonly _permissionsService: PermissionsService,
private readonly _dictionaryService: DictionaryService,
private readonly _toaster: Toaster,
private readonly _loadingService: LoadingService,
) {}
ngOnInit() {
this.hasHexColor$ = this._colorEmpty$('hexColor');
this.hasRecommendationHexColor$ = this._colorEmpty$('recommendationHexColor');
this.technicalName$ = this.form.get('label').valueChanges.pipe(map((value: string) => this._toTechnicalName(value)));
}
ngOnChanges(changes: SimpleChanges) {
if (changes.form) {
this.form.get('hint').valueChanges.subscribe(isHint => {
if (isHint) {
REDACTION_FIELDS.forEach(field => this.form.removeControl(field));
} else {
this.form.addControl('addToDictionaryAction', new FormControl(this.entity?.addToDictionaryAction));
this.form.addControl('caseSensitive', new FormControl(!this.entity?.caseInsensitive));
this.form.addControl('defaultReason', new FormControl({ value: null, disabled: true }));
}
});
if (!this.entity) {
this.form.get('label').valueChanges.subscribe((label: string) => {
this.form.get('type').setValue(this._toTechnicalName(label));
});
}
if (!this._permissionsService.canEditEntities()) {
this.form.disable();
}
}
}
async save(): Promise<void> {
this._loadingService.start();
const dictionary = this._formToObject();
try {
if (this.entity) {
// edit mode
await firstValueFrom(this._dictionaryService.updateDictionary(dictionary, this.dossierTemplateId, dictionary.type));
this._toaster.success(_('add-edit-entity.success.edit'));
} else {
// create mode
await firstValueFrom(this._dictionaryService.addDictionary({ ...dictionary, dossierTemplateId: this.dossierTemplateId }));
this._toaster.success(_('add-edit-entity.success.create'));
}
this._loadingService.stop();
} catch (e) {
this._loadingService.stop();
throw e;
}
}
private _toTechnicalName(value: string) {
const existingTechnicalNames = this._dictionariesMapService.get(this.dossierTemplateId).map(dict => dict.type);
const baseTechnicalName = toSnakeCase(value.trim());
let technicalName = baseTechnicalName;
let suffix = 1;
while (existingTechnicalNames.includes(technicalName)) {
technicalName = [baseTechnicalName, suffix++].join('_');
}
return technicalName;
}
private _colorEmpty$(field: string) {
return this.form.get(field).valueChanges.pipe(
startWith(this.form.get(field).value),
map((value: string) => !value || value?.length === 0),
);
}
private _formToObject(): IDictionary {
return {
type: this.form.get('type').value,
label: this.form.get('label').value,
caseInsensitive: !this.form.get('caseSensitive').value,
description: this.form.get('description').value,
hexColor: this.form.get('hexColor').value,
recommendationHexColor: this.form.get('recommendationHexColor').value,
hint: this.form.get('hint').value,
rank: this.form.get('rank').value,
addToDictionaryAction: !!this.form.get('addToDictionaryAction').value,
dossierTemplateId: this.dossierTemplateId,
hasDictionary: !!this.form.get('hasDictionary').value,
};
}
}

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

@ -2,13 +2,15 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '@shared/shared.module';
import { DossierTemplateActionsComponent } from './components/dossier-template-actions/dossier-template-actions.component';
import { AddEditEntityComponent } from './components/add-edit-entity/add-edit-entity.component';
import { ColorPickerModule } from 'ngx-color-picker';
const components = [DossierTemplateActionsComponent];
const components = [DossierTemplateActionsComponent, AddEditEntityComponent];
@NgModule({
declarations: [...components],
exports: [...components],
providers: [],
imports: [CommonModule, SharedModule],
imports: [CommonModule, SharedModule, ColorPickerModule],
})
export class SharedAdminModule {}

2
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html
View File

@ -13,7 +13,7 @@
<form *ngIf="form" [formGroup]="form">
<div class="iqser-input-group">
<mat-checkbox color="primary" formControlName="addToDictionaryAction" name="addToDictionaryAction">
{{ 'add-entity.form.add-to-dictionary-action' | translate }}
{{ 'edit-dossier-dialog.dictionary.add-to-dictionary-action' | translate }}
</mat-checkbox>
</div>
</form>

6
apps/red-ui/src/app/services/entity-services/dictionary.service.ts
View File

@ -274,11 +274,11 @@ export class DictionaryService extends EntitiesService<Dictionary, IDictionary>
#addUpdateDictionaryErrorToast(error: HttpErrorResponse): Observable<never> {
if (error.status === HttpStatusCode.Conflict) {
this._toaster.error(_('add-entity.error.entity-already-exists'));
this._toaster.error(_('add-edit-entity.error.entity-already-exists'));
} else if (error.status === HttpStatusCode.BadRequest) {
this._toaster.error(_('add-entity.error.invalid-color-or-rank'));
this._toaster.error(_('add-edit-entity.error.invalid-color-or-rank'));
} else {
this._toaster.error(_('add-entity.error.generic'));
this._toaster.error(_('add-edit-entity.error.generic'));
}
return throwError(() => error);
}

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

@ -36,35 +36,6 @@
},
"header-new": "Dossier erstellen"
},
"add-entity": {
"error": {
"entity-already-exists": "Ein Wörterbuch mit diesem Namen existiert bereits!",
"generic": "Wörterbuch konnte nicht gespeichert werden!",
"invalid-color-or-rank": "Ungültige Farbe oder Rang! Der Rang wird bereits von einem anderen Wörterbuch verwendet oder die Farbe ist kein gültiger Hex-Farbcode!"
},
"form": {
"add-to-dictionary-action": "Anwender können Einträge hinzufügen",
"case-sensitive": "Groß-/Kleinschreibung berücksichtigen",
"color": "Hex-Farbcode",
"color-placeholder": "#",
"description": "Beschreibung",
"description-placeholder": "Beschreibung eingeben",
"hint": "Hinweis",
"name": "Name des Wörterbuches",
"name-hint": "Kann nach dem Speichern nicht mehr bearbeitet werden.",
"name-placeholder": "Namen eingeben",
"rank": "Rang",
"rank-placeholder": "1000",
"redaction": "Schwärzung",
"technical-name": "Technischer Name"
},
"save": "Wörterbuch speichern",
"success": {
"create": "",
"edit": ""
},
"title": "Wörterbuch erstellen"
},
"add-edit-dossier-attribute": {
"error": {
"generic": "Attribut konnte nicht gespeichert werden!"
@ -106,6 +77,38 @@
"save": "Dossier-Vorlage speichern",
"title": "{type, select, edit{Dossier-Vorlage {name} bearbeiten} create{Dossier-Vorlage erstellen} other{}}"
},
"add-edit-entity": {
"error": {
"entity-already-exists": "",
"generic": "",
"invalid-color-or-rank": ""
},
"form": {
"add-to-dictionary-action": "",
"case-sensitive": "",
"color": "",
"color-placeholder": "",
"default-reason": "",
"default-reason-placeholder": "",
"description": "",
"description-placeholder": "",
"has-dictionary": "",
"hint": "",
"name": "",
"name-placeholder": "",
"rank": "",
"rank-placeholder": "",
"recommendation-color": "",
"recommendation-color-placeholder": "",
"redaction": "",
"technical-name": "",
"technical-name-hint": ""
},
"success": {
"create": "",
"edit": ""
}
},
"add-edit-file-attribute": {
"form": {
"column-header": "CSV-Spaltenüberschrift",
@ -158,6 +161,10 @@
},
"title": "{type, select, edit{Benutzer bearbeiten} create{Neuen Benutzer hinzufügen} other{}}"
},
"add-entity": {
"save": "Wörterbuch speichern",
"title": "Wörterbuch erstellen"
},
"admin-side-nav": {
"audit": "",
"configurations": "",
@ -604,9 +611,6 @@
"select-dossier": "Dossier auswählen",
"select-dossier-template": "Dossiervorlage auswählen"
},
"dictionary-details": {
"description": "Beschreibung"
},
"error": {
"entries-too-short": "Einige Einträge im Wörterbuch unterschreiten die Mindestlänge von 2 Zeichen. Diese sind rot markiert.",
"generic": "Es ist ein Fehler aufgetreten ... Das Wörterbuch konnte nicht aktualisiert werden!"
@ -1004,6 +1008,7 @@
"change-successful": "Dossier wurde aktualisiert.",
"delete-successful": "Dossier wurde gelöscht.",
"dictionary": {
"add-to-dictionary-action": "",
"display-name": {
"cancel": "Abbrechen",
"edit": "Anzeigenamen bearbeiten",
@ -1059,7 +1064,6 @@
"bulk": {
"delete": "Ausgewählte Wörterbücher löschen"
},
"case-sensitive": "Klein-/Großschreibung berücksichtigen",
"no-data": {
"action": "Neues Wörterbuch",
"title": "Es gibt noch keine Wörterbücher."
@ -1082,29 +1086,7 @@
"info": {
"actions": {
"revert": "",
"save": "",
"save-success": ""
},
"form": {
"add-to-dictionary-action": "",
"case-sensitive": "",
"color": "",
"color-placeholder": "",
"default-reason": "",
"default-reason-placeholder": "",
"description": "",
"description-placeholder": "",
"has-dictionary": "",
"hint": "",
"name": "",
"name-placeholder": "",
"rank": "",
"rank-placeholder": "",
"recommendation-color": "",
"recommendation-color-placeholder": "",
"redaction": "",
"technical-name": "",
"technical-name-hint": ""
"save": ""
},
"heading": ""
}
@ -1454,7 +1436,6 @@
"success": ""
},
"highlights": "",
"hint": "Hinweis",
"image-category": {
"formula": "Formel",
"image": "Bild",
@ -1663,7 +1644,6 @@
},
"header": "Bildtypen bearbeiten"
},
"redaction": "Schwärzung",
"references": "",
"remove-annotations-dialog": {
"cancel": "Abbrechen",
@ -1949,6 +1929,7 @@
},
"form": {
"color": "Farbe",
"color-placeholder": "",
"font-size": "Schriftgröße",
"font-type": "Schriftart",
"opacity": "Deckkraft",

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

@ -36,35 +36,6 @@
},
"header-new": "Create Dossier"
},
"add-entity": {
"error": {
"entity-already-exists": "Entity with this name already exists!",
"generic": "Failed to save entity!",
"invalid-color-or-rank": "Invalid color or rank! Rank is already used by another entity or the color is not a valid hexColor!"
},
"form": {
"add-to-dictionary-action": "Enable 'Add to dictionary'",
"case-sensitive": "Case Sensitive",
"color": "Hex Color",
"color-placeholder": "#",
"description": "Description",
"description-placeholder": "Enter Description",
"hint": "Hint",
"name": "Display Name",
"name-hint": "Cannot be edited after saving.",
"name-placeholder": "Enter Name",
"rank": "Rank",
"rank-placeholder": "1000",
"redaction": "Redaction",
"technical-name": "Technical Name"
},
"save": "Save Entity",
"success": {
"create": "Entity added!",
"edit": "Entity updated!"
},
"title": "Create Entity"
},
"add-edit-dossier-attribute": {
"error": {
"generic": "Failed to save attribute!"
@ -106,6 +77,38 @@
"save": "Save Dossier Template",
"title": "{type, select, edit{Edit {name}} create{Create} other{}} Dossier Template"
},
"add-edit-entity": {
"error": {
"entity-already-exists": "Entity with this name already exists!",
"generic": "Failed to save entity!",
"invalid-color-or-rank": "Invalid color or rank! Rank is already used by another entity or the color is not a valid hexColor!"
},
"form": {
"add-to-dictionary-action": "Enable 'Add to dictionary'",
"case-sensitive": "Case Sensitive",
"color": "Hex Color",
"color-placeholder": "#",
"default-reason": "Default Reason",
"default-reason-placeholder": "No Default Reason",
"description": "Description",
"description-placeholder": "Enter Description",
"has-dictionary": "Has dictionary",
"hint": "Hint",
"name": "Display Name",
"name-placeholder": "Enter Name",
"rank": "Rank",
"rank-placeholder": "1000",
"recommendation-color": "Recommendation Hex Color",
"recommendation-color-placeholder": "#",
"redaction": "Redaction",
"technical-name": "Technical Name",
"technical-name-hint": "{type, select, edit{Autogenerated based on the initial display name.} create{Autogenerates based on the display name and cannot be edited after saving.} other{}}"
},
"success": {
"create": "Entity added!",
"edit": "Entity updated!"
}
},
"add-edit-file-attribute": {
"form": {
"column-header": "CSV Column Header",
@ -158,6 +161,10 @@
},
"title": "{type, select, edit{Edit} create{Add New} other{}} User"
},
"add-entity": {
"save": "Save Entity",
"title": "Create Entity"
},
"admin-side-nav": {
"audit": "Audit",
"configurations": "Configurations",
@ -604,9 +611,6 @@
"select-dossier": "Select Dossier",
"select-dossier-template": "Select Dossier Template"
},
"dictionary-details": {
"description": "Description"
},
"error": {
"entries-too-short": "Some entries of the dictionary are below the minimum length of 2. These are highlighted with red!",
"generic": "Something went wrong... Dictionary update failed!"
@ -1004,6 +1008,7 @@
"change-successful": "Dossier {dossierName} was updated.",
"delete-successful": "Dossier {dossierName} was deleted.",
"dictionary": {
"add-to-dictionary-action": "Available for add to dictionary",
"display-name": {
"cancel": "Cancel",
"edit": "Edit Display Name",
@ -1059,7 +1064,6 @@
"bulk": {
"delete": "Delete Selected Entities"
},
"case-sensitive": "Case Sensitive",
"no-data": {
"action": "New Entity",
"title": "There are no entities yet."
@ -1082,29 +1086,7 @@
"info": {
"actions": {
"revert": "Revert",
"save": "Save Changes",
"save-success": "Entity updated!"
},
"form": {
"add-to-dictionary-action": "Available for add to dictionary",
"case-sensitive": "Case sensitive",
"color": "Hex Color",
"color-placeholder": "#",
"default-reason": "Default Reason",
"default-reason-placeholder": "No Default Reason",
"description": "Description",
"description-placeholder": "Enter Description",
"has-dictionary": "Has dictionary",
"hint": "Hint",
"name": "Display Name",
"name-placeholder": "Enter Name",
"rank": "Rank",
"rank-placeholder": "1000",
"recommendation-color": "Recommendation Hex Color",
"recommendation-color-placeholder": "#",
"redaction": "Redaction",
"technical-name": "Technical Name",
"technical-name-hint": "Autogenerated based on the initial display name."
"save": "Save Changes"
},
"heading": "Edit Entity"
}
@ -1454,7 +1436,6 @@
"success": "{operation, select, CONVERT{Converting} REMOVE{Removing} other{}} highlights in progress..."
},
"highlights": "{color} - {length} {length, plural, one{highlight} other{highlights}}",
"hint": "Hint",
"image-category": {
"formula": "Formula",
"image": "Image",
@ -1663,7 +1644,6 @@
},
"header": "Edit Image Type"
},
"redaction": "Redaction",
"references": "{count} {count, plural, one{reference} other{references}}",
"remove-annotations-dialog": {
"cancel": "Cancel",
@ -1949,6 +1929,7 @@
},
"form": {
"color": "Color",
"color-placeholder": "#",
"font-size": "Font Size",
"font-type": "Font Type",
"opacity": "Opacity",