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

search for dictionary edit

Browse Source
This commit is contained in:
Timo 2020-12-02 12:13:12 +02:00
parent c4a5ffdaa7
commit 3aa26c07b6
3 changed files with 47 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,8 +47,11 @@
<mat-icon svgIcon="red:search"></mat-icon> <mat-icon svgIcon="red:search"></mat-icon>
</div> </div>
<div class="with-input" *ngIf="searchText.length > 0"> <div class="with-input" *ngIf="searchText.length > 0">
<!-- <mat-icon svgIcon="red:arrow-down" class="transform-180"></mat-icon>--> <div class="search-match-text">
<!-- <mat-icon svgIcon="red:arrow-down"></mat-icon>--> {{ currentMatch + '/' + searchPositions.length }}
</div>
<mat-icon svgIcon="red:arrow-down" class="transform-180" (click)="nextSearchMatch()"></mat-icon>
<mat-icon svgIcon="red:arrow-down" (click)="previousSearchMatch()"></mat-icon>
<mat-icon svgIcon="red:close" (click)="searchChanged(''); inputElement.value = ''; inputElement.focus()" class="pointer"></mat-icon> <mat-icon svgIcon="red:close" (click)="searchChanged(''); inputElement.value = ''; inputElement.focus()" class="pointer"></mat-icon>
</div> </div>
</div> </div>

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

@ -80,9 +80,20 @@ ace-editor {
position: absolute; position: absolute;
right: 12px; right: 12px;
top: 8px; top: 8px;
color: $grey-1;
.with-input {
display: flex;
justify-content: center;
align-items: center;
.search-match-text {
}
}
mat-icon { mat-icon {
max-width: 14px; max-width: 14px;
margin-left: 8px;
&.transform-180 { &.transform-180 {
transform: rotate(180deg); transform: rotate(180deg);

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

@ -25,14 +25,18 @@ export class DictionaryOverviewScreenComponent {
dictionary: TypeValue; dictionary: TypeValue;
activeEditMarkers: any[] = []; activeEditMarkers: any[] = [];
activeSearchMarkers: any[] = []; activeSearchMarkers: any[] = [];
searchPositions: any[] = [];
currentMatch: number = 1;
initialDictionaryEntries: string[] = []; initialDictionaryEntries: string[] = [];
currentDictionaryEntries: string[] = []; currentDictionaryEntries: string[] = [];
changedLines: number[] = []; changedLines: number[] = [];
dictionaryEntriesAsText: string; dictionaryEntriesAsText: string;
aceOptions = { showPrintMargin: false }; aceOptions = { showPrintMargin: false };
searchText: string = ''; searchText = '';
constructor( constructor(
public readonly permissionsService: PermissionsService, public readonly permissionsService: PermissionsService,
@ -81,16 +85,18 @@ export class DictionaryOverviewScreenComponent {
searchChanged(text: string) { searchChanged(text: string) {
this.searchText = text.toLowerCase(); this.searchText = text.toLowerCase();
this._applySearchMarkers(); this._applySearchMarkers();
this.currentMatch = 0;
this.nextSearchMatch();
} }
private _applySearchMarkers() { private _applySearchMarkers() {
const positions = this._getSearchPositions(); this.searchPositions = this._getSearchPositions();
this.activeSearchMarkers.forEach((am) => { this.activeSearchMarkers.forEach((am) => {
this.editorComponent.getEditor().getSession().removeMarker(am); this.editorComponent.getEditor().getSession().removeMarker(am);
}); });
this.activeSearchMarkers = []; this.activeSearchMarkers = [];
for (let position of positions) { for (const position of this.searchPositions) {
this.activeSearchMarkers.push( this.activeSearchMarkers.push(
this.editorComponent this.editorComponent
.getEditor() .getEditor()
@ -156,6 +162,8 @@ export class DictionaryOverviewScreenComponent {
await this._dictionaryControllerService.deleteEntries(entriesToDelete, this.dictionary.type).toPromise(); await this._dictionaryControllerService.deleteEntries(entriesToDelete, this.dictionary.type).toPromise();
} }
this._initialize(); this._initialize();
// .ace_marker-layer .search-marker
} }
revert() { revert() {
@ -163,4 +171,24 @@ export class DictionaryOverviewScreenComponent {
this.editorComponent.getEditor().setValue(this.dictionaryEntriesAsText); this.editorComponent.getEditor().setValue(this.dictionaryEntriesAsText);
this.editorComponent.getEditor().clearSelection(); 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);
}
} }