From 5de6b359ee514c24f1be1026807d9b45ca645afe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Mon, 23 Sep 2024 13:18:05 +0300 Subject: [PATCH] Revision of the dossier dictionary presentation --- .../edit-dossier-dictionary.component.html | 64 ++++++++------- .../dictionary-manager.component.html | 31 ++------ .../dictionary-manager.component.ts | 77 +++---------------- .../components/editor/editor.component.ts | 25 +++--- apps/red-ui/src/assets/i18n/redact/de.json | 7 +- apps/red-ui/src/assets/i18n/redact/en.json | 9 ++- apps/red-ui/src/assets/i18n/scm/de.json | 7 +- apps/red-ui/src/assets/i18n/scm/en.json | 7 +- 8 files changed, 87 insertions(+), 140 deletions(-) diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html index 727bec369..7d5b0684e 100644 --- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html +++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html @@ -18,12 +18,15 @@
- {{ - dictionary.entries.length + - dictionary.falsePositiveEntries.length + - dictionary.falseRecommendationEntries.length - }} - entries +
@@ -36,12 +39,12 @@
{{ selectedDictionary?.label }}
@@ -68,23 +71,6 @@
-
- - - -
+ > + +
+ + + +
+ + diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html index 546c0c2f2..4557166e6 100644 --- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html +++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html @@ -1,29 +1,7 @@
-
- - -
-
- -
- -
- {{ currentMatch + '/' + findMatches.length }} - - - -
-
-
+ + +
diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts index a842204f7..5145a99bc 100644 --- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts @@ -8,9 +8,7 @@ import { DossierTemplatesService } from '@services/dossier-templates/dossier-tem import { EditorComponent } from '@shared/components/editor/editor.component'; import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service'; import { saveAs } from 'file-saver'; -import { Debounce, List } from '@iqser/common-ui/lib/utils'; -import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration; -import FindMatch = monaco.editor.FindMatch; +import { List } from '@iqser/common-ui/lib/utils'; import { firstValueFrom } from 'rxjs'; import { MatIcon } from '@angular/material/icon'; import { NgForOf, NgIf } from '@angular/common'; @@ -23,7 +21,6 @@ import { MatOption, MatSelect } from '@angular/material/select'; import { MatDivider } from '@angular/material/divider'; const COMPARE_ENTRIES_ERROR = 'compare-entries-error'; -const SMOOTH_SCROLL = 0; const HELP_MODE_KEYS = { dictionary: 'dictionary_entity', 'false-positive': 'false_recommendations_entity', @@ -53,8 +50,6 @@ const HELP_MODE_KEYS = { ], }) export class DictionaryManagerComponent implements OnChanges, OnInit { - private _searchDecorations: string[] = []; - readonly #currentTab = window.location.href.split('/').pop(); @Input() type: DictionaryType = 'dictionary'; @Input() entityType?: string; @Input() currentDossierId: string; @@ -73,11 +68,8 @@ export class DictionaryManagerComponent implements OnChanges, OnInit { readonly iconButtonTypes = IconButtonTypes; dossiers: Dossier[]; dossierTemplates: DossierTemplate[] = this.dossierTemplatesService.all; - currentMatch = 0; - findMatches: FindMatch[] = []; diffEditorText = ''; showDiffEditor = false; - searchText = ''; selectDossier = { dossierName: _('dictionary-overview.compare.select-dossier') } as Dossier; selectDictionary = { label: _('dictionary-overview.compare.select-dictionary'), @@ -85,10 +77,11 @@ export class DictionaryManagerComponent implements OnChanges, OnInit { selectDossierTemplate = { name: _('dictionary-overview.compare.select-dossier-template') } as DossierTemplate; compare = false; dictionaries: List = this.#dictionaries; + protected initialDossierTemplateId: string; + readonly #currentTab = window.location.href.split('/').pop(); #dossierTemplate = this.dossierTemplatesService.all[0]; #dossier = this.selectDossier; #dictionary = this.selectDictionary; - protected initialDossierTemplateId: string; constructor( private readonly _dictionaryService: DictionaryService, @@ -99,11 +92,6 @@ export class DictionaryManagerComponent implements OnChanges, OnInit { readonly dossierTemplatesService: DossierTemplatesService, ) {} - ngOnInit() { - this.initialDossierTemplateId = this.currentDossierTemplateId; - this.#updateDropdownsOptions(); - } - get selectedDossierTemplate() { return this.#dossierTemplate; } @@ -150,6 +138,7 @@ export class DictionaryManagerComponent implements OnChanges, OnInit { if (dictionary.type) { this.selectedDictionaryType = dictionary.type; this.#dictionary = dictionary; + console.log(dictionary); this.#onDossierChanged(this.#dossier.dossierTemplateId).then(entries => this.#updateDiffEditorText(entries)); } } @@ -185,6 +174,11 @@ export class DictionaryManagerComponent implements OnChanges, OnInit { ); } + ngOnInit() { + this.initialDossierTemplateId = this.currentDossierTemplateId; + this.#updateDropdownsOptions(); + } + download(): void { const content = this.editor.currentEntries.join('\n'); const blob = new Blob([content], { @@ -195,35 +189,6 @@ export class DictionaryManagerComponent implements OnChanges, OnInit { revert() { this.editor?.revert(); - this.searchText = ''; - this.searchChanged(''); - } - - @Debounce() - searchChanged(text: string) { - this.findMatches = this.#getMatches(text.toLowerCase()); - this.#applySearchDecorations(); - - this.currentMatch = 0; - this.nextSearchMatch(); - } - - nextSearchMatch(): void { - if (this.findMatches.length <= 0) { - return; - } - - this.currentMatch = this.currentMatch < this.findMatches.length ? this.currentMatch + 1 : 1; - this.#scrollToCurrentMatch(); - } - - previousSearchMatch(): void { - if (this.findMatches.length <= 0) { - return; - } - - this.currentMatch = this.currentMatch > 1 ? this.currentMatch - 1 : this.findMatches.length; - this.#scrollToCurrentMatch(); } toggleCompareMode() { @@ -246,30 +211,6 @@ export class DictionaryManagerComponent implements OnChanges, OnInit { } } - #applySearchDecorations() { - this._searchDecorations = this.editor.codeEditor?.deltaDecorations(this._searchDecorations, []) || []; - - const decorations = this.findMatches.map(match => this.#getSearchDecoration(match)); - - this._searchDecorations = this.editor.codeEditor?.deltaDecorations(this._searchDecorations, decorations) || []; - } - - #getMatches(text: string): FindMatch[] { - const model = this.editor.codeEditor?.getModel(); - return model?.findMatches(text, false, false, false, null, false) || []; - } - - #getSearchDecoration(match: FindMatch): IModelDeltaDecoration { - return { range: match.range, options: { inlineClassName: 'search-marker' } }; - } - - #scrollToCurrentMatch(): void { - const range = this.findMatches[this.currentMatch - 1].range; - - this.editor.codeEditor.setSelection(range); - this.editor.codeEditor.revealLineInCenter(range.startLineNumber, SMOOTH_SCROLL); - } - async #onDossierChanged(dossierTemplateId: string, dossierId?: string) { let dictionary: IDictionary; if (dossierId === 'template') { diff --git a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts index e5fa526f5..45a452d89 100644 --- a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts @@ -5,15 +5,15 @@ import { Subject } from 'rxjs'; import { debounceTime, filter, tap } from 'rxjs/operators'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { List, OnChange } from '@iqser/common-ui/lib/utils'; -import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions; -import ICodeEditor = monaco.editor.ICodeEditor; -import IDiffEditor = monaco.editor.IDiffEditor; -import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration; -import ILineChange = monaco.editor.ILineChange; -import IEditorMouseEvent = monaco.editor.IEditorMouseEvent; import { MonacoEditorModule, MonacoStandaloneCodeEditor, MonacoStandaloneDiffEditor } from '@materia-ui/ngx-monaco-editor'; import { FormsModule } from '@angular/forms'; import { NgIf } from '@angular/common'; +import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions; +import IDiffEditor = monaco.editor.IDiffEditor; +import ICodeEditor = monaco.editor.ICodeEditor; +import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration; +import ILineChange = monaco.editor.ILineChange; +import IEditorMouseEvent = monaco.editor.IEditorMouseEvent; const MIN_WORD_LENGTH = 2; const lineChangeToDecoration = ({ originalEndLineNumber, originalStartLineNumber }: ILineChange) => @@ -35,10 +35,6 @@ const notZero = (lineChange: ILineChange) => lineChange.originalEndLineNumber != imports: [MonacoEditorModule, FormsModule, NgIf], }) export class EditorComponent implements OnInit, OnChanges { - #initialEntriesSet = new Set(); - private _diffEditor: IDiffEditor; - private _decorations: string[] = []; - protected readonly _editorTextChanged$ = new Subject(); @Input() showDiffEditor = false; @Input() diffEditorText: string; @Input() @OnChange('revert') initialEntries: List; @@ -51,6 +47,10 @@ export class EditorComponent implements OnInit, OnChanges { editorOptions: IStandaloneEditorConstructionOptions = {}; codeEditor: ICodeEditor; value: string; + protected readonly _editorTextChanged$ = new Subject(); + #initialEntriesSet = new Set(); + private _diffEditor: IDiffEditor; + private _decorations: string[] = []; constructor( private readonly _loadingService: LoadingService, @@ -84,6 +84,11 @@ export class EditorComponent implements OnInit, OnChanges { return this.currentEntries.length; } + async openFindPanel(): Promise { + const editor = this.showDiffEditor ? this._diffEditor.getOriginalEditor() : this.codeEditor; + await editor.getAction('actions.find').run(); + } + onPaste(event: ClipboardEvent) { if ((event.target as HTMLTextAreaElement).ariaRoleDescription === 'editor') { this._loadingService.start(); diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json index d97127b00..aa1b41c55 100644 --- a/apps/red-ui/src/assets/i18n/redact/de.json +++ b/apps/red-ui/src/assets/i18n/redact/de.json @@ -1234,11 +1234,12 @@ "title": "{label} bearbeiten" }, "entries": "{length} {length, plural, one{Eintrag} other{Einträge}}", + "entries-count": "", "false-positive-entries": "{length} {length, plural, one{Falsch-Positiver} other{Falsch-Positive}}", - "false-positives": "Falsch-Positive", + "false-positives": "Falsch-Positive ({count})", "false-recommendation-entries": "{length} {length, plural, one{falsche Empfehlung} other{falsche Empfehlungen}}", - "false-recommendations": "Falsche Empfehlungen", - "to-redact": "Schwärzungen" + "false-recommendations": "Falsche Empfehlungen ({count})", + "to-redact": "Schwärzungen ({count})" }, "general-info": { "form": { diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json index b8c85c8c0..2520c4e6a 100644 --- a/apps/red-ui/src/assets/i18n/redact/en.json +++ b/apps/red-ui/src/assets/i18n/redact/en.json @@ -1234,11 +1234,12 @@ "title": "Edit {label}" }, "entries": "{length} {length, plural, one{entry} other{entries}} to redact", + "entries-count": "{count} {count, plural, one{entry} other{entries}}", "false-positive-entries": "{length} false positive {length, plural, one{entry} other{entries}}", - "false-positives": "False positives", + "false-positives": "False positives ({count})", "false-recommendation-entries": "{length} false recommendation {length, plural, one{entry} other{entries}}", - "false-recommendations": "False recommendations", - "to-redact": "To redact" + "false-recommendations": "False recommendations ({count})", + "to-redact": "Entries ({count})" }, "general-info": { "form": { @@ -1264,7 +1265,7 @@ "choose-download": "Select the documents for your download:", "dictionary": "Dictionaries", "dossier-attributes": "Dossier attributes", - "dossier-dictionary": "Dictionaries", + "dossier-dictionary": "Dossier entries", "dossier-info": "Dossier info", "download-package": "Download package", "general-info": "General information", diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json index dd2b402dc..cf1f3bb46 100644 --- a/apps/red-ui/src/assets/i18n/scm/de.json +++ b/apps/red-ui/src/assets/i18n/scm/de.json @@ -1234,11 +1234,12 @@ "title": "" }, "entries": "{length} {length, plural, one{entry} other{entries}} to {hint, select, true{annotate} other{redact}}", + "entries-count": "", "false-positive-entries": "{length} false positive {length, plural, one{entry} other{entries}}", - "false-positives": "False positives", + "false-positives": "False positives ({count})", "false-recommendation-entries": "{length} false recommendation {length, plural, one{entry} other{entries}}", - "false-recommendations": "False recommendations", - "to-redact": "To redact" + "false-recommendations": "False recommendations ({count})", + "to-redact": "To redact ({count})" }, "general-info": { "form": { diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json index 320543548..66f48bef9 100644 --- a/apps/red-ui/src/assets/i18n/scm/en.json +++ b/apps/red-ui/src/assets/i18n/scm/en.json @@ -1234,11 +1234,12 @@ "title": "" }, "entries": "{length} {length, plural, one{entry} other{entries}} to {hint, select, true{annotate} other{redact}}", + "entries-count": "{count} {count, plural, one{entry} other{entries}}", "false-positive-entries": "{length} false positive {length, plural, one{entry} other{entries}}", - "false-positives": "False positives", + "false-positives": "False positives ({count})", "false-recommendation-entries": "{length} false recommendation {length, plural, one{entry} other{entries}}", - "false-recommendations": "False recommendations", - "to-redact": "To redact" + "false-recommendations": "False recommendations ({count})", + "to-redact": "To redact ({count})" }, "general-info": { "form": {