Disable dict save button on too short lines

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

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>
<span [translate]="text"></span>
</button>

View File

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

View File

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

View File

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

View File

@ -500,7 +500,7 @@
},
"dictionary-overview": {
"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...",
"save-changes": "Änderungen speichern",

View File

@ -504,7 +504,7 @@
},
"dictionary-overview": {
"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!"
},
"success": {

View File

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