editor search

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

@@ -39,6 +39,20 @@
 
     <div class="flex red-content-inner">
         <div class="left-container">
+            <div class="red-input-group">
+                <input type="text" (keyup)="searchChanged(inputElement.value)" #inputElement placeholder="{{ 'dictionary-overview.search' | translate }}" />
+
+                <div class="input-icons">
+                    <div class="no-input" *ngIf="searchText.length === 0">
+                        <mat-icon svgIcon="red:search"></mat-icon>
+                    </div>
+                    <div class="with-input" *ngIf="searchText.length > 0">
+                        <!--                        <mat-icon svgIcon="red:arrow-down" class="transform-180"></mat-icon>-->
+                        <!--                        <mat-icon svgIcon="red:arrow-down"></mat-icon>-->
+                        <mat-icon svgIcon="red:close" (click)="searchChanged(''); inputElement.value = ''; inputElement.focus()" class="pointer"></mat-icon>
+                    </div>
+                </div>
+            </div>
             <div class="editor-container">
                 <ace-editor
                     #editorComponent

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

@@ -2,7 +2,7 @@
 @import '../../../../assets/styles/red-mixins';
 
 .editor-container {
-    height: 100%;
+    height: calc(100% - 50px);
     width: 100%;
 
     ace-editor {
@@ -67,3 +67,26 @@ ace-editor {
         margin-right: 8px;
     }
 }
+
+.red-input-group {
+    margin-bottom: 16px;
+    max-width: 450px;
+
+    input {
+        padding-right: 32px;
+    }
+
+    .input-icons {
+        position: absolute;
+        right: 12px;
+        top: 8px;
+
+        mat-icon {
+            max-width: 14px;
+
+            &.transform-180 {
+                transform: rotate(180deg);
+            }
+        }
+    }
+}

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

@@ -7,6 +7,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { AceEditorComponent } from 'ng2-ace-editor';
 import * as aceModule from 'ace-builds/src-noconflict/ace';
 import { reference } from '../../../utils/functions';
+import { debounce } from '../../../utils/debounce';
 
 declare var ace;
 
@@ -22,12 +23,16 @@ export class DictionaryOverviewScreenComponent {
     editorComponent: AceEditorComponent;
 
     dictionary: TypeValue;
-    activeMarkers: any[] = [];
+
+    activeEditMarkers: any[] = [];
+    activeSearchMarkers: any[] = [];
+
     initialDictionaryEntries: string[] = [];
     currentDictionaryEntries: string[] = [];
     changedLines: number[] = [];
     dictionaryEntriesAsText: string;
     aceOptions = { showPrintMargin: false };
+    searchText: string = '';
 
     constructor(
         public readonly permissionsService: PermissionsService,
@@ -72,13 +77,47 @@ export class DictionaryOverviewScreenComponent {
         });
     }
 
+    @debounce()
+    searchChanged(text: string) {
+        this.searchText = text.toLowerCase();
+        this._applySearchMarkers();
+    }
+
+    private _applySearchMarkers() {
+        const positions = this._getSearchPositions();
+        this.activeSearchMarkers.forEach((am) => {
+            this.editorComponent.getEditor().getSession().removeMarker(am);
+        });
+        this.activeSearchMarkers = [];
+
+        for (let position of positions) {
+            this.activeSearchMarkers.push(
+                this.editorComponent
+                    .getEditor()
+                    .getSession()
+                    .addMarker(new Range(position.row, position.column, position.row, position.column + position.length), 'search-marker', 'text')
+            );
+        }
+    }
+
+    private _getSearchPositions() {
+        return this.currentDictionaryEntries
+            .map((val, index) => {
+                const columnIndex = val.toLowerCase().indexOf(this.searchText);
+                if (columnIndex >= 0) {
+                    return { row: index, column: columnIndex, length: this.searchText.length };
+                }
+            })
+            .filter((entry) => !!entry);
+    }
+
     textChanged($event: any) {
         this.currentDictionaryEntries = $event.split('\n');
         this.changedLines = [];
-        this.activeMarkers.forEach((am) => {
+        this.activeEditMarkers.forEach((am) => {
             this.editorComponent.getEditor().getSession().removeMarker(am);
         });
-        this.activeMarkers = [];
+        this.activeEditMarkers = [];
 
         for (let i = 0; i < this.currentDictionaryEntries.length; i++) {
             const currentEntry = this.currentDictionaryEntries[i];
@@ -88,7 +127,7 @@ export class DictionaryOverviewScreenComponent {
         }
 
         for (const i of this.changedLines) {
-            this.activeMarkers.push(this.editorComponent.getEditor().getSession().addMarker(new Range(i, 0, i, 1), 'changed-row-marker', 'fullLine'));
+            this.activeEditMarkers.push(this.editorComponent.getEditor().getSession().addMarker(new Range(i, 0, i, 1), 'changed-row-marker', 'fullLine'));
         }
     }
 

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

@@ -499,6 +499,7 @@
         "save": "Save Dictionary"
     },
     "dictionary-overview": {
+        "search": "Search...",
         "save-changes": "Save Changes",
         "revert-changes": "Revert"
     },

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

@@ -6,3 +6,9 @@
     background: rgba($primary, 0.2);
     z-index: 20;
 }
+
+.search-marker {
+    position: absolute;
+    background: rgba($yellow-1, 0.3);
+    z-index: 20;
+}