[master | DONE | CHANGED]: harvester.component.ts & harvester.component.html: Added steps in harvest modal - first step is for user harvest options and second step is for user email.

This commit is contained in:
Konstantina Galouni 2023-11-21 13:03:09 +02:00
parent 5c06e1c690
commit 64f237eb48
2 changed files with 27 additions and 7 deletions

View File

@ -90,9 +90,10 @@
</div>
</div>
<modal-alert #modal (alertOutput)="harvest()" [okDisabled]="(form.invalid || sending)">
<modal-alert #modal (alertOutput)="harvest()" (cancelOutput)="previousModalClicked()"
[okDisabled]="(!modalShowNext && (form.invalid || sending))" [classBody]="'uk-height-large'">
<div *ngIf="modalClicked" [formGroup]="form">
<div class="uk-flex uk-flex-column">
<div *ngIf="modalShowNext" class="uk-flex uk-flex-column">
<div class="uk-margin-bottom">
<span> Define the number of record to validate</span>
<div class="uk-margin-xsmall-left uk-margin-top uk-margin-small-bottom">
@ -121,14 +122,14 @@
<!-- </div>-->
</div>
<hr class="uk-margin-xlarge-top uk-margin-xlarge-bottom">
<!-- <hr class="uk-margin-xlarge-top uk-margin-xlarge-bottom">-->
<div class="uk-flex uk-flex-column uk-flex-middle">
<div *ngIf="!modalShowNext" class="uk-flex uk-flex-column uk-flex-middle">
<div>Want feedback on the harvest status?</div>
<div>Please provide us with your email address and click the <i class="uk-text-bold">harvest</i> button.</div>
<div class="uk-margin-small-top">Otherwise, simply click the <i class="uk-text-bold">harvest</i> button to continue.</div>
<div input class="uk-width-2-3 uk-margin-medium-top uk-margin-medium-bottom"
<div input class="uk-width-2-3 uk-margin-medium-top"
[formInput]="form.get('email')" placeholder="E-mail">
<span note>(Optional)</span>
</div>

View File

@ -31,6 +31,7 @@ export class HarvesterComponent {
public sending: boolean = false;
public form: UntypedFormGroup;
public modalClicked: boolean = false;
public modalShowNext: boolean = true;
@ViewChild('modal') modal;
@ViewChild('customRecordsNum') customRecordsNum;
@ -162,15 +163,18 @@ export class HarvesterComponent {
}
public openModal(name: string = "", baseUrl: string = "") {
this.modalShowNext = true;
this.modalClicked = true;
this.selectedBaseUrl = baseUrl;
this.sending = false;
this.initForm();
this.modal.previousButton = false;
this.modal.cancelButton = false;
this.modal.okButton = true;
this.modal.okButtonText = "Harvest";
this.modal.okButtonText = "Next";
this.modal.stayOpen = true;
// this.modal.alertTitle = "Provide your email to get feedback";
this.modal.alertTitle = name ? name : "Harvest";
this.modal.open();
@ -197,7 +201,14 @@ export class HarvesterComponent {
this.cdr.detectChanges();
})
}
previousModalClicked() {
this.modalShowNext=true;
this.modal.previousButton = false;
this.modal.stayOpen = true;
this.modal.okButtonText = "Next";
}
updateRecordsNum(increase: boolean = true) {
this.recordsNum = this.recordsNum + (increase ? 1000 : -1000);
this.form.get('recordsNum').setValue(this.recordsNum);
@ -206,6 +217,14 @@ export class HarvesterComponent {
}
public harvest() {
if(this.modalShowNext) {
this.modalShowNext = false;
this.modal.previousButton = true;
this.modal.stayOpen = false;
this.modal.okButtonText = "Harvest";
return;
}
this.sending = true;
let email: string = this.form.get("email").value;
if(!StringUtils.validateEmails(email)) {