diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html index 75ba45ef2..c208d28f9 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html @@ -47,8 +47,11 @@
- - +
+ {{ currentMatch + '/' + searchPositions.length }} +
+ +
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.scss b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.scss index 7cf9df5db..dcf9b1926 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.scss +++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.scss @@ -80,9 +80,20 @@ ace-editor { position: absolute; right: 12px; top: 8px; + color: $grey-1; + + .with-input { + display: flex; + justify-content: center; + align-items: center; + + .search-match-text { + } + } mat-icon { max-width: 14px; + margin-left: 8px; &.transform-180 { transform: rotate(180deg); diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts index 6cc66c05d..b41cfe3bc 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts +++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts @@ -25,14 +25,18 @@ export class DictionaryOverviewScreenComponent { dictionary: TypeValue; activeEditMarkers: any[] = []; + activeSearchMarkers: any[] = []; + searchPositions: any[] = []; + currentMatch: number = 1; + initialDictionaryEntries: string[] = []; currentDictionaryEntries: string[] = []; changedLines: number[] = []; dictionaryEntriesAsText: string; aceOptions = { showPrintMargin: false }; - searchText: string = ''; + searchText = ''; constructor( public readonly permissionsService: PermissionsService, @@ -81,16 +85,18 @@ export class DictionaryOverviewScreenComponent { searchChanged(text: string) { this.searchText = text.toLowerCase(); this._applySearchMarkers(); + this.currentMatch = 0; + this.nextSearchMatch(); } private _applySearchMarkers() { - const positions = this._getSearchPositions(); + this.searchPositions = this._getSearchPositions(); this.activeSearchMarkers.forEach((am) => { this.editorComponent.getEditor().getSession().removeMarker(am); }); this.activeSearchMarkers = []; - for (let position of positions) { + for (const position of this.searchPositions) { this.activeSearchMarkers.push( this.editorComponent .getEditor() @@ -156,6 +162,8 @@ export class DictionaryOverviewScreenComponent { await this._dictionaryControllerService.deleteEntries(entriesToDelete, this.dictionary.type).toPromise(); } this._initialize(); + + // .ace_marker-layer .search-marker } revert() { @@ -163,4 +171,24 @@ export class DictionaryOverviewScreenComponent { this.editorComponent.getEditor().setValue(this.dictionaryEntriesAsText); this.editorComponent.getEditor().clearSelection(); } + + nextSearchMatch() { + if (this.searchPositions.length > 0) { + this.currentMatch = this.currentMatch < this.searchPositions.length ? this.currentMatch + 1 : 1; + this._gotoLine(); + } + } + + previousSearchMatch() { + if (this.searchPositions.length > 0) { + this.currentMatch = this.currentMatch > 1 ? this.currentMatch - 1 : this.searchPositions.length - 1; + this._gotoLine(); + } + } + + private _gotoLine() { + const position = this.searchPositions[this.currentMatch - 1]; + this.editorComponent.getEditor().scrollToLine(position.row, true, true, () => {}); + this.editorComponent.getEditor().gotoLine(position.row + 1, position.column, true); + } }