Add/Fix form error messages and loading
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@53970 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
sofia.baltzi
parent
5729dfabd4
commit
b3fbb00d8a
|
|
@ -5,8 +5,12 @@
|
|||
|
||||
<div id="invite" class=" uk-card uk-card-default uk-padding">
|
||||
<div class="uk-text-large uk-text-center uk-width-5-6@l uk-width ">Invite users to subscribe</div>
|
||||
<div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert"><span class="loading-gif uk-align-center"></span></div>
|
||||
<div *ngIf="communityId != null && !showLoading && !errorMessage">
|
||||
<div class="uk-margin-top">
|
||||
<errorMessages [status]="[status]" [type]="'community'"></errorMessages>
|
||||
</div>
|
||||
<div *ngIf="missingCommunityId" class="uk-alert uk-alert-warning" role="alert">{{missingCommunityId}}</div>
|
||||
|
||||
<div *ngIf="communityId != null && status == errorCodes.DONE">
|
||||
<!--table *ngIf="communityId != null && community != null && !showLoading && !errorMessage" class="uk-table uk-align-center"-->
|
||||
<table class="uk-table uk-align-center">
|
||||
<tbody>
|
||||
|
|
@ -20,12 +24,12 @@
|
|||
<tr>
|
||||
<td for="from" class="uk-text-bold uk-width-1-3@xl uk-width-1-3@m uk-width-1-3@s uk-text-right">From:</td>
|
||||
<td class="uk-text-left uk-width-expand">
|
||||
<input placeholder="Type your name" type="text"
|
||||
<input placeholder="Type your name" type="text" (click)="resetMessages()"
|
||||
class="form-control uk-input uk-width-large@l uk-width-medium@s" [(ngModel)] = "body.fromName" id="from">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td for="email.recipients[0]" class="uk-text-bold uk-text-right">To <span class="uk-text-danger uk-text-bold">*</span> :</td>
|
||||
<td for="recipients" class="uk-text-bold uk-text-right">To <span class="uk-text-danger uk-text-bold">*</span> :</td>
|
||||
<td class="uk-text-left">
|
||||
<!-- <div *ngIf="email.recipients && email.recipients[0] != ''">
|
||||
<div >
|
||||
|
|
@ -35,9 +39,9 @@
|
|||
class="uk-width-large uk-text-danger uk-text-small uk-margin-top"> Please add a valid email. </div> -->
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
<div *ngIf="!recipients && !areValid" class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add valid email/s.</div>
|
||||
<div *ngIf="!recipients" class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add a recipient.</div>
|
||||
<input placeholder="email" type="text"
|
||||
<div *ngIf="recipients && !areValid" class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add valid email/s.</div>
|
||||
<div *ngIf="!recipients && showAddRecipientMessage" class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add a recipient.</div>
|
||||
<input placeholder="email" type="text" (click)="resetMessages(); areValid=true"
|
||||
class="form-control uk-input uk-width-large@l uk-width-medium@s" [(ngModel)] = "recipients" id="recipients"
|
||||
required>
|
||||
<div class="uk-width-medium uk-text-muted uk-text-small style=display:none">separate multiple emails with a comma</div>
|
||||
|
|
@ -66,7 +70,7 @@
|
|||
<tr>
|
||||
<td for="email.body" class="uk-text-bold uk-text-right">Message:</td>
|
||||
<td class="uk-text-left">
|
||||
<ckeditor
|
||||
<ckeditor (click)="resetMessages()"
|
||||
class="form-control" [(ngModel)] = "body.paragraphs" id="message"
|
||||
debounce="400"
|
||||
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', removeButtons: 'Save,NewPage,DocProps,Preview,Print',
|
||||
|
|
@ -101,6 +105,8 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div *ngIf="successfulSentMessage" class="uk-alert uk-alert-success" role="alert">{{successfulSentMessage}}</div>
|
||||
<div *ngIf="inviteErrorMessage" class="uk-alert uk-alert-warning" role="alert">{{inviteErrorMessage}}</div>
|
||||
<table class="uk-table uk-align-center">
|
||||
<tbody>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {Body} from '../../../openaire
|
|||
import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
|
||||
import {EmailService} from '../../../openaireLibrary/utils/email/email.service';
|
||||
import {CommunityService} from "../../../openaireLibrary/connect/community/community.service";
|
||||
import {ErrorCodes} from '../../../openaireLibrary/utils/properties/errorCodes';
|
||||
|
||||
@Component({
|
||||
selector: 'invite',
|
||||
|
|
@ -25,8 +26,12 @@ export class InviteComponent implements OnInit {
|
|||
private properties: EnvProperties = null;
|
||||
|
||||
public community = null;
|
||||
public showLoading: boolean = true;
|
||||
//public showLoading: boolean = true;
|
||||
public errorMessage: string = '';
|
||||
public successfulSentMessage: string = '';
|
||||
public inviteErrorMessage: string = '';
|
||||
public missingCommunityId: string = '';
|
||||
public showAddRecipientMessage: boolean = false;
|
||||
|
||||
public email: Email;
|
||||
public body: Body;
|
||||
|
|
@ -40,6 +45,8 @@ export class InviteComponent implements OnInit {
|
|||
public defaultBody ='';
|
||||
|
||||
public communityIdParam = {};
|
||||
public status: number = 1;
|
||||
public errorCodes: ErrorCodes;
|
||||
|
||||
constructor (
|
||||
private element: ElementRef,
|
||||
|
|
@ -57,6 +64,8 @@ export class InviteComponent implements OnInit {
|
|||
}
|
||||
this.communityIdParam = (ConnectHelper.isProduction(document.location.hostname))?{}:{communityId:this.communityId};
|
||||
});
|
||||
this.errorCodes = new ErrorCodes();
|
||||
this.status = this.errorCodes.LOADING;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -64,7 +73,8 @@ export class InviteComponent implements OnInit {
|
|||
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
|
||||
this.properties = data.envSpecific;
|
||||
this.errorMessage = "";
|
||||
this.showLoading = true;
|
||||
this.missingCommunityId = "";
|
||||
this.status = this.errorCodes.LOADING;
|
||||
if (this.communityId != null && this.communityId != '') {
|
||||
this._communityService.getCommunity(this.properties, this.properties.communityAPI+this.communityId).subscribe (
|
||||
community => {
|
||||
|
|
@ -78,11 +88,14 @@ export class InviteComponent implements OnInit {
|
|||
this.email = {body: "", subject: "[OpenAIRE-Connect] " + community.title, recipients: []};
|
||||
this.recipients = "";
|
||||
|
||||
this.showLoading = false;
|
||||
this.status = this.errorCodes.DONE;
|
||||
},
|
||||
error => this.handleError('System error retrieving community name', error)
|
||||
error => this.handleError(error)
|
||||
);
|
||||
|
||||
} else {
|
||||
this.status = this.errorCodes.DONE;
|
||||
this.missingCommunityId = "There is no community selected!";
|
||||
}
|
||||
|
||||
this.scroll();
|
||||
|
|
@ -97,7 +110,9 @@ export class InviteComponent implements OnInit {
|
|||
}
|
||||
|
||||
public invite() {
|
||||
this.showLoading = true;
|
||||
this.successfulSentMessage = "";
|
||||
this.inviteErrorMessage = "";
|
||||
this.status = this.errorCodes.LOADING;
|
||||
if (this.recipients != "") {
|
||||
if (this.validateEmails()) {
|
||||
this.composeEmail();
|
||||
|
|
@ -106,18 +121,42 @@ export class InviteComponent implements OnInit {
|
|||
this._emailService.sendEmail(this.properties.sendMailUrl, this.email).subscribe(
|
||||
res => {
|
||||
console.log("The email has been sent successfully!");
|
||||
this.showLoading = false;
|
||||
this.status = this.errorCodes.DONE;
|
||||
console.log("Emails Sent: "+res);
|
||||
if(res > 1) {
|
||||
this.successfulSentMessage = res + " emails sent successfully!";
|
||||
} else {
|
||||
this.successfulSentMessage = res + " email sent successfully!";
|
||||
}
|
||||
|
||||
this.body = {/*salutation: "Dear Sir/Madame,",*/ fromMessage: ", on behalf of ", fromName: "", paragraphs: this.defaultBody, /*closing: "Kind regards,",*/ signature: "OpenAIRE team", ps: ""};
|
||||
this.email = {body: "", subject: "[OpenAIRE-Connect] " + this.community.title, recipients: []};
|
||||
this.recipients = "";
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
this.showLoading = false;
|
||||
this.errorMessage = "gdgd";//inviteErrorMessage
|
||||
this.status = this.errorCodes.DONE;
|
||||
//this.errorMessage = "gdgd";//inviteErrorMessage
|
||||
this.inviteErrorMessage = "There was an error sending emails. Please try again.";
|
||||
}
|
||||
);
|
||||
} else {
|
||||
this.scroll();
|
||||
this.status = this.errorCodes.DONE;
|
||||
}
|
||||
} else {
|
||||
this.showAddRecipientMessage = true;
|
||||
this.scroll();
|
||||
this.status = this.errorCodes.DONE;
|
||||
}
|
||||
}
|
||||
|
||||
public resetMessages() {
|
||||
this.errorMessage = "";
|
||||
this.successfulSentMessage = "";
|
||||
this.inviteErrorMessage = "";
|
||||
}
|
||||
|
||||
public validateEmails(): boolean {
|
||||
if (this.parseEmails()) {
|
||||
if (this.hasValidEmails()) {
|
||||
|
|
@ -190,10 +229,18 @@ export class InviteComponent implements OnInit {
|
|||
return formattedEmail;
|
||||
}
|
||||
|
||||
public handleError(message: string, error) {
|
||||
this.errorMessage = message;
|
||||
public handleError(error) {
|
||||
if(error.status == '401') {
|
||||
this.status = this.errorCodes.FORBIDDEN;
|
||||
} else if(error.status == '403') {
|
||||
this.status = this.errorCodes.FORBIDDEN;
|
||||
} else if(error.status == '404') {
|
||||
this.status = this.errorCodes.NOT_FOUND;
|
||||
} else if(error.status == '500') {
|
||||
this.status = this.errorCodes.ERROR;
|
||||
} else {
|
||||
this.status = this.errorCodes.NOT_AVAILABLE;
|
||||
}
|
||||
console.log('Server responded: ' + error);
|
||||
|
||||
this.showLoading = false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,10 +12,11 @@ import {PreviousRouteRecorder} from '../../../openaireLibrary/utils/piwik/p
|
|||
import {FreeGuard} from '../../../openaireLibrary/login/freeGuard.guard';
|
||||
import {EmailService} from '../../../openaireLibrary/utils/email/email.service';
|
||||
import {CommunityService} from '../../../openaireLibrary/connect/community/community.service';
|
||||
import {ErrorMessagesModule} from '../../../openaireLibrary/utils/errorMessages.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, RouterModule, InviteRoutingModule, CKEditorModule
|
||||
CommonModule, FormsModule, RouterModule, InviteRoutingModule, CKEditorModule, ErrorMessagesModule
|
||||
],
|
||||
declarations: [
|
||||
InviteComponent
|
||||
|
|
|
|||
Loading…
Reference in New Issue