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

Disable dict save button on too short lines

Browse Source
This commit is contained in:
Adina Țeudan 2020-12-07 12:29:29 +02:00
parent eb5770af0f
commit 76c1b59b48
7 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html
View File

@ -1,4 +1,4 @@
<button mat-button [class.overlay]="showDot" [class.primary]="primary" (click)="action.emit($event)" [class.link-button]="linkButton"> <button mat-button [class.overlay]="showDot" [class.primary]="primary" (click)="action.emit($event)" [class.link-button]="linkButton" [disabled]="disabled">
<mat-icon [svgIcon]="icon" *ngIf="icon"></mat-icon> <mat-icon [svgIcon]="icon" *ngIf="icon"></mat-icon>
<span [translate]="text"></span> <span [translate]="text"></span>
</button> </button>

1
apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts
View File

@ -11,6 +11,7 @@ export class IconButtonComponent implements OnInit {
@Input() showDot = false; @Input() showDot = false;
@Input() primary = false; @Input() primary = false;
@Input() linkButton = false; @Input() linkButton = false;
@Input() disabled = false;
@Output() action = new EventEmitter<any>(); @Output() action = new EventEmitter<any>();
constructor() {} constructor() {}

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

@ -84,6 +84,7 @@
(action)="saveEntries()" (action)="saveEntries()"
text="dictionary-overview.save-changes" text="dictionary-overview.save-changes"
[primary]="true" [primary]="true"
[disabled]="hasErrors"
></redaction-icon-button> ></redaction-icon-button>
<redaction-icon-button <redaction-icon-button
*ngIf="permissionsService.isAdmin()" *ngIf="permissionsService.isAdmin()"

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

@ -18,7 +18,7 @@ declare var ace;
styleUrls: ['./dictionary-overview-screen.component.scss'] styleUrls: ['./dictionary-overview-screen.component.scss']
}) })
export class DictionaryOverviewScreenComponent { export class DictionaryOverviewScreenComponent {
static readonly MIN_WORD_LENGTH: number = 2; static readonly MIN_WORD_LENGTH: number = 3;
@ViewChild('editorComponent') @ViewChild('editorComponent')
editorComponent: AceEditorComponent; editorComponent: AceEditorComponent;
@ -153,8 +153,8 @@ export class DictionaryOverviewScreenComponent {
this.activeEditMarkers.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'));
} }
if (entry?.trim().length > 0 && entry.trim().length < DictionaryOverviewScreenComponent.MIN_WORD_LENGTH) { if (entry?.trim().length > 0 && entry.trim().length < DictionaryOverviewScreenComponent.MIN_WORD_LENGTH) {
// show lines that are to short // show lines that are too short
this.activeEditMarkers.push(this.editorComponent.getEditor().getSession().addMarker(new Range(i, 0, i, 1), 'to-short-marker', 'fullLine')); this.activeEditMarkers.push(this.editorComponent.getEditor().getSession().addMarker(new Range(i, 0, i, 1), 'too-short-marker', 'fullLine'));
} }
} }
} }
@ -166,6 +166,10 @@ export class DictionaryOverviewScreenComponent {
); );
} }
get hasErrors(): boolean {
return this.currentDictionaryEntries.filter((e) => e.length < DictionaryOverviewScreenComponent.MIN_WORD_LENGTH).length > 0;
}
async saveEntries() { async saveEntries() {
let entriesToAdd = []; let entriesToAdd = [];
this.currentDictionaryEntries.forEach((currentEntry) => { this.currentDictionaryEntries.forEach((currentEntry) => {
@ -204,7 +208,7 @@ export class DictionaryOverviewScreenComponent {
); );
} else { } else {
this._notificationService.showToastNotification( this._notificationService.showToastNotification(
this._translateService.instant('dictionary-overview.error.entries-to-short'), this._translateService.instant('dictionary-overview.error.entries-too-short'),
null, null,
NotificationType.ERROR NotificationType.ERROR
); );

2
apps/red-ui/src/assets/i18n/de.json
View File

@ -500,7 +500,7 @@
}, },
"dictionary-overview": { "dictionary-overview": {
"error": { "error": {
"entries-to-short": "Einige Einträge des Wörterbuchs liegen unter der Mindestlänge von 2. Diese sind rot hervorgehoben!" "entries-too-short": "Einige Einträge des Wörterbuchs liegen unter der Mindestlänge von 2. Diese sind rot hervorgehoben!"
}, },
"search": "Suche...", "search": "Suche...",
"save-changes": "Änderungen speichern", "save-changes": "Änderungen speichern",

2
apps/red-ui/src/assets/i18n/en.json
View File

@ -504,7 +504,7 @@
}, },
"dictionary-overview": { "dictionary-overview": {
"error": { "error": {
"entries-to-short": "Some entries of the dictionary are below the minimum length of 2. These are highlighted with red!", "entries-too-short": "Some entries of the dictionary are below the minimum length of 2. These are highlighted with red!",
"generic": "Something went wrong... Dictionary update failed!" "generic": "Something went wrong... Dictionary update failed!"
}, },
"success": { "success": {

2
apps/red-ui/src/assets/styles/red-editor.scss
View File

@ -7,7 +7,7 @@
z-index: 20; z-index: 20;
} }
.to-short-marker { .too-short-marker {
position: absolute; position: absolute;
background: rgba($primary, 0.5); background: rgba($primary, 0.5);
z-index: 30; z-index: 30;