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

RED-9757: Working find panel toggle

Browse Source
This commit is contained in:
Adina Țeudan 2024-09-26 15:11:00 +03:00
parent d457f9a46f
commit c5f072f6b6
5 changed files with 50 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,44 +33,15 @@
</div>
</div>
<div class="entries">
<div class="header-wrapper">
<div class="header-left">
<div class="heading">
<div class="flex-align-items-center">
{{ selectedDictionary?.label }}
<iqser-circle-button
(action)="openEditDictionaryModal()"
*ngIf="selectedDictionary.dossierDictionaryOnly && selectedDictionary.hasDictionary"
[size]="20"
[tooltip]="'edit-dossier-dialog.dictionary.edit-button-tooltip' | translate"
class="p-left-8"
icon="iqser:edit"
></iqser-circle-button>
</div>
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:entries"></mat-icon>
<ng-container *ngIf="activeEntryType === entryTypes.ENTRY || selectedDictionary.hint">
{{
'edit-dossier-dialog.dictionary.entries'
| translate: { length: entriesToDisplay.length, hint: selectedDictionary.hint }
}}
</ng-container>
<ng-container *ngIf="activeEntryType === entryTypes.FALSE_POSITIVE && !selectedDictionary.hint">
{{
'edit-dossier-dialog.dictionary.false-positive-entries' | translate: { length: entriesToDisplay.length }
}}
</ng-container>
<ng-container *ngIf="activeEntryType === entryTypes.FALSE_RECOMMENDATION && !selectedDictionary.hint">
{{
'edit-dossier-dialog.dictionary.false-recommendation-entries'
| translate: { length: entriesToDisplay.length }
}}
</ng-container>
</div>
</div>
</div>
</div>
<div class="heading flex-align-items-center">
{{ selectedDictionary?.label }}
<iqser-circle-button
(action)="openEditDictionaryModal()"
[size]="20"
[tooltip]="'edit-dossier-dialog.dictionary.edit-button-tooltip' | translate"
class="p-left-8"
icon="iqser:edit"
></iqser-circle-button>
</div>
<redaction-dictionary-manager
@ -85,7 +56,7 @@
[withFloatingActions]="false"
>
<ng-container slot="typeSwitch">
<div *ngIf="!selectedDictionary.hint" [class.read-only]="!canEdit" class="header-right flex">
<div *ngIf="!selectedDictionary.hint" class="flex">
<iqser-icon-button
(click)="selectEntryType(entryTypes.ENTRY)"
[active]="activeEntryType === entryTypes.ENTRY"

33
apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.scss
View File

@ -11,13 +11,14 @@
.dictionaries {
border-right: 1px solid var(--iqser-separator);
overflow-y: scroll;
overflow-y: auto;
width: 200px;
@include common-mixins.scroll-bar;
.dictionary {
height: 40px;
padding: 15px;
border: 1px solid var(--iqser-separator);
border-bottom: 1px solid var(--iqser-separator);
display: flex;
gap: 10px;
cursor: pointer;
@ -43,33 +44,7 @@
.entries {
flex-grow: 1;
padding: 16px 0 16px 12px;
.header-wrapper {
display: flex;
justify-content: space-between;
.header-left {
display: flex;
.iqser-input-group {
margin-left: 24px;
}
}
.read-only {
padding-right: 100px;
}
.display-name {
display: flex;
align-items: center;
margin-bottom: 24px;
> div {
font-weight: 600;
}
}
}
overflow: hidden;
}
}

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

@ -13,7 +13,8 @@
></iqser-circle-button>
<iqser-circle-button
(action)="editor.openFindPanel()"
(action)="editor.toggleFindPanel()"
[attr.aria-expanded]="_isSearchOpen()"
[matTooltip]="'dictionary-overview.search' | translate"
class="ml-8"
icon="iqser:search"
@ -92,6 +93,7 @@
<div class="editor-container">
<redaction-editor
[(isSearchOpen)]="_isSearchOpen"
[canEdit]="canEdit"
[diffEditorText]="diffEditorText"
[initialEntries]="initialEntries"

14
apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
View File

@ -1,4 +1,15 @@
import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
import {
ChangeDetectorRef,
Component,
EventEmitter,
Input,
OnChanges,
OnInit,
Output,
signal,
SimpleChanges,
ViewChild,
} from '@angular/core';
import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, LoadingService } from '@iqser/common-ui';
import { Dictionary, DictionaryEntryType, DictionaryEntryTypes, DictionaryType, Dossier, DossierTemplate, IDictionary } from '@red/domain';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
@ -77,6 +88,7 @@ export class DictionaryManagerComponent implements OnChanges, OnInit {
selectDossierTemplate = { name: _('dictionary-overview.compare.select-dossier-template') } as DossierTemplate;
compare = false;
dictionaries: List<Dictionary> = this.#dictionaries;
protected readonly _isSearchOpen = signal(false);
protected initialDossierTemplateId: string;
readonly #currentTab = window.location.href.split('/').pop();
#dossierTemplate = this.dossierTemplatesService.all[0];

23
apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { Component, Input, model, OnChanges, OnInit, SimpleChanges, untracked } from '@angular/core';
import { LoadingService } from '@iqser/common-ui';
import { EditorThemeService } from '@services/editor-theme.service';
import { Subject } from 'rxjs';
@ -39,6 +39,7 @@ export class EditorComponent implements OnInit, OnChanges {
@Input() diffEditorText: string;
@Input() @OnChange<List, EditorComponent>('revert') initialEntries: List;
@Input() canEdit = false;
readonly isSearchOpen = model.required<boolean>();
/**
* Used as [modified] input on diff editor
* Shouldn't be updated when editing in diff editor.
@ -84,9 +85,14 @@ export class EditorComponent implements OnInit, OnChanges {
return this.currentEntries.length;
}
async openFindPanel(): Promise<void> {
async toggleFindPanel(): Promise<void> {
const isFindPanelOpen = untracked(this.isSearchOpen);
const editor = this.showDiffEditor ? this._diffEditor.getOriginalEditor() : this.codeEditor;
await editor.getAction('actions.find').run();
if (isFindPanelOpen) {
await (editor.getContribution('editor.contrib.findController') as any).closeFindWidget();
} else {
await editor.getAction('actions.find').run();
}
}
onPaste(event: ClipboardEvent) {
@ -127,11 +133,13 @@ export class EditorComponent implements OnInit, OnChanges {
this._diffEditor.getModifiedEditor().onDidChangeModelContent(() => {
this.value = this._diffEditor.getModel().modified.getValue();
});
this._initializeFindWidget(editor.getOriginalEditor());
this.#setTheme();
}
onCodeEditorInit(editor: MonacoStandaloneCodeEditor): void {
this.codeEditor = editor;
this._initializeFindWidget(editor);
this.#setTheme();
}
@ -143,6 +151,15 @@ export class EditorComponent implements OnInit, OnChanges {
this._editorTextChanged$.next(this.value);
}
private _initializeFindWidget(editor: MonacoStandaloneCodeEditor): void {
this.isSearchOpen.set(false);
(editor.getContribution('editor.contrib.findController') as any).getState().onFindReplaceStateChange(event => {
if (event.isRevealed) {
this.isSearchOpen.update(v => !v);
}
});
}
#getDecorations(newText: string) {
const currentEntries = newText.split('\n');
const newDecorations: IModelDeltaDecoration[] = [];