fixed dmp editor first step validation

This commit is contained in:
Sofia Papacharalampous 2024-04-04 18:27:59 +03:00
parent 805702459f
commit 3e86a43fb0
3 changed files with 40 additions and 8 deletions

View File

@ -1,6 +1,7 @@
import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit } from "@angular/core";
import { FormControl } from "@angular/forms"; import { FormControl } from "@angular/forms";
import { AngularEditorConfig } from "@kolkov/angular-editor"; import { AngularEditorConfig } from "@kolkov/angular-editor";
import { Subscription } from "rxjs";
@Component({ @Component({
selector: 'rich-text-editor-component', selector: 'rich-text-editor-component',
@ -21,7 +22,7 @@ import { AngularEditorConfig } from "@kolkov/angular-editor";
// TODO: performance issue with this control. changed the change detection strategy in case it improves // TODO: performance issue with this control. changed the change detection strategy in case it improves
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class RichTextEditorComponent { export class RichTextEditorComponent implements OnInit, OnDestroy {
@Input() form: FormControl; @Input() form: FormControl;
@Input() id: string = "editor1"; @Input() id: string = "editor1";
@Input() placeholder: string = "Enter text"; @Input() placeholder: string = "Enter text";
@ -29,6 +30,9 @@ export class RichTextEditorComponent {
@Input() wrapperClasses: string = ""; @Input() wrapperClasses: string = "";
@Input() editable: boolean = true; @Input() editable: boolean = true;
@Input() formTouchEvent: EventEmitter<any>;
private formTouchSubscription: Subscription;
editorConfig: AngularEditorConfig = { editorConfig: AngularEditorConfig = {
editable: this.editable, editable: this.editable,
spellcheck: true, spellcheck: true,
@ -72,8 +76,16 @@ export class RichTextEditorComponent {
}; };
ngOnInit() { ngOnInit(): void {
console.log('ngOnInit: '); if (this.formTouchEvent) {
this.observeFormStatus();
}
}
ngOnDestroy(): void {
if (this.formTouchSubscription) {
this.formTouchSubscription.unsubscribe();
}
} }
ngAfterContentInit() { ngAfterContentInit() {
@ -85,4 +97,16 @@ export class RichTextEditorComponent {
const text = $event.clipboardData.getData("text/plain"); const text = $event.clipboardData.getData("text/plain");
window.document.execCommand("insertText", false, text); window.document.execCommand("insertText", false, text);
} }
private observeFormStatus(): void {
this.formTouchSubscription = this.formTouchEvent
.subscribe(
next => {
if(next) {
this.form.markAsTouched();
this.form.updateValueAndValidity();
}
}
);
}
} }

View File

@ -47,7 +47,7 @@
<div class="row"> <div class="row">
<div class="heading2 col-12">{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}} *</div> <div class="heading2 col-12">{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}} *</div>
<div class="col-12"> <div class="col-12">
<rich-text-editor-component [form]="formGroup.get('description')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" [required]="true"> <rich-text-editor-component [form]="formGroup.get('description')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" [required]="true" [formTouchObservable]="formTouchObservable">
</rich-text-editor-component> </rich-text-editor-component>
</div> </div>
</div> </div>

View File

@ -1,6 +1,6 @@
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { DatePipe } from '@angular/common'; import { DatePipe } from '@angular/common';
import { Component, OnInit } from '@angular/core'; import { Component, EventEmitter, OnInit } from '@angular/core';
import { FormArray, UntypedFormArray, UntypedFormGroup } from '@angular/forms'; import { FormArray, UntypedFormArray, UntypedFormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
@ -45,7 +45,7 @@ import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/
import { FilterService } from '@common/modules/text-filter/filter-service'; import { FilterService } from '@common/modules/text-filter/filter-service';
import { Guid } from '@common/types/guid'; import { Guid } from '@common/types/guid';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { interval } from 'rxjs'; import { Observable, interval, of } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators'; import { map, takeUntil } from 'rxjs/operators';
import { DmpEditorModel } from './dmp-editor.model'; import { DmpEditorModel } from './dmp-editor.model';
import { DmpEditorResolver } from './dmp-editor.resolver'; import { DmpEditorResolver } from './dmp-editor.resolver';
@ -65,6 +65,7 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
item: Dmp; item: Dmp;
selectedBlueprint: DmpBlueprint; selectedBlueprint: DmpBlueprint;
step: number = 0; step: number = 0;
formTouchEvent: EventEmitter<any> = new EventEmitter<any>();
//Enums //Enums
descriptionStatusEnum = DescriptionStatus; descriptionStatusEnum = DescriptionStatus;
@ -333,7 +334,14 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
}); });
} }
selectDefaultBlueprint() { selectDefaultBlueprint(): void {
if (!(this.formGroup.get('label').value && this.formGroup.get('description').value && this.formGroup.get('blueprint').value)) {
this.formGroup.get('label').markAsTouched();
this.formGroup.get('blueprint').markAsTouched();
this.formTouchEvent.emit(true);
return;
}
this.dmpBlueprintService.getSingle(this.configurationService.defaultBlueprintId, DmpEditorResolver.blueprintLookupFields()).pipe(takeUntil(this._destroyed)).subscribe(data => { this.dmpBlueprintService.getSingle(this.configurationService.defaultBlueprintId, DmpEditorResolver.blueprintLookupFields()).pipe(takeUntil(this._destroyed)).subscribe(data => {
this.selectedBlueprint = data; this.selectedBlueprint = data;
this.formGroup.get('blueprint').setValue(this.selectedBlueprint.id); this.formGroup.get('blueprint').setValue(this.selectedBlueprint.id);