Commit b9a08feb authored by rajkumar's avatar rajkumar
Browse files

New Webin Portal Dashboard Changes :

1) Adding Registration page related changes.
parent 6eb6f9d2
<div class="mat-h3 mat-tittle">Contact Details</div>
<form (ngSubmit)="doAction()" #cf="ngForm">
<div *ngIf="action!='Delete' && action!='Success' && action!='Error'">
<mat-checkbox matInput name="primaryContact" [(ngModel)]="contactObj.primaryContact">Is Primary Contact</mat-checkbox>
<mat-checkbox matInput name="consortiumContact" [(ngModel)]="contactObj.consortiumContact" style="padding-left: 20px;" >Is Consortium Contact</mat-checkbox>
<mat-form-field>
<input matInput name="email" [(ngModel)]="contactObj.email" #emailVal="ngModel" placeholder="Email Address" appUniqueContactEmail="{{emails}}|{{action}}|{{contactObj.email}}" required email/>
<mat-error *ngIf="cf.controls['email']?.errors?.nonUniqueEmail">
Email address is used by other contact
</mat-error>
<mat-error *ngIf="cf.controls['email']?.errors?.required || cf.controls['email']?.errors?.invalid ">
Please enter a valid email address
</mat-error>
</mat-form-field>
<div *ngIf="!contactObj.consortiumContact">
<mat-form-field>
<input matInput name="firstName" [(ngModel)]="contactObj.firstName" placeholder="First Name" required>
</mat-form-field>
<mat-form-field>
<input matInput name="middleName" [(ngModel)]="contactObj.middleName" placeholder="Middle Name">
</mat-form-field>
<mat-form-field>
<input matInput name="surname" [(ngModel)]="contactObj.surname" placeholder="Surame" required>
</mat-form-field>
</div>
<div *ngIf="contactObj.consortiumContact">
<mat-form-field>
<input matInput name="consortiumName" [(ngModel)]="contactObj.consortiumName" placeholder="Consortium Name" required>
</mat-form-field>
</div>
</div>
<div class="mat-body" *ngIf="action==='Delete'">
Delete will remove the contact with email "{{contactObj.email}}" from the Account. Please click the {{action}} Contact button to proceed.
</div>
<div class="mat-body" *ngIf="action==='Success'">
Successfully created subbmission account with id : {{contactObj.id}}.
</div>
<div class="mat-body" *ngIf="action==='Error'">
{{contactObj.error.errorMessage}}
</div>
<div style="text-align:center" *ngIf="action!='Error' && action!='Success'">
<button mat-raised-button color=primary [disabled]="cf.invalid">{{action}} Contact</button>
<button type="button" mat-raised-button style="margin-left: 5px;" (click)="closePopup()">Cancel</button>
</div>
<div style="text-align:center" *ngIf="action==='Error'">
<button type="button" mat-raised-button style="margin-left: 5px;" (click)="closePopup()">Ok</button>
</div>
<div style="text-align:center" *ngIf="action==='Success'">
<button type="button" mat-raised-button style="margin-left: 5px;" (click)="closePopup()" routerLink="">Ok</button>
</div>
</form>
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ContactDialogModalComponent } from './contact-dialog-modal.component';
describe('ContactDialogModalComponent', () => {
let component: ContactDialogModalComponent;
let fixture: ComponentFixture<ContactDialogModalComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ContactDialogModalComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ContactDialogModalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Optional, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import {FormControl, FormGroupDirective, NgForm, Validators, FormGroup, FormBuilder} from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';
@Component({
selector: 'app-contact-dialog-modal',
templateUrl: './contact-dialog-modal.component.html',
styleUrls: ['./contact-dialog-modal.component.css']
})
export class ContactDialogModalComponent implements OnInit {
/* Used for storing dssed emails, this will be used for validation */
emails= [];
/* Add / Update / Delete */
action: string;
contactObj={};
constructor( private formBuilder: FormBuilder, public dialogRef: MatDialogRef<ContactDialogModalComponent>,
@Optional() @Inject(MAT_DIALOG_DATA) public data: any) {
this.action = data.action;
this.emails=data.emailList;
if(this.action!="Error"){
this.copyObjectValue(data.contactObj,this.contactObj)
}else{
this.contactObj=data.contactObj;
}
}
ngOnInit() {
}
doAction(){
if(this.action==="Add") {
this.contactObj["id"]=this.getId();
}
let contact=this.updateName(this.contactObj);
this.dialogRef.close({ event: this.action, data: contact });
}
closePopup(){
this.dialogRef.close({event: 'close'});
}
getId(){
return Math.floor(1000 + Math.random() * 9000);
}
updateName(contact){
var name= contact["firstName"] + " " + contact["middleName"] + " "+ contact["surname"];
if(contact["consortiumContact"]){
name=contact["consortiumName"];
}
contact["name"]=name;
return contact;
}
copyObjectValue(from,to){
to.id=from.id;
to.email=from.email;
to.firstName=from.firstName;
to.middleName=from.middleName;
to.surname=from.surname;
to.consortiumName=from.consortiumName;
to.primaryfrom=from.primaryContact;
to.consortiumContact=from.consortiumContact;
to.name=from.name;
}
}
import { MatchPasswordDirective } from './match-password.directive';
describe('MatchPasswordDirective', () => {
it('should create an instance', () => {
const directive = new MatchPasswordDirective();
expect(directive).toBeTruthy();
});
});
import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, ValidationErrors, FormGroup } from '@angular/forms';
import { CustomValidationService } from '../validation/custom-validation.service';
@Directive({
selector: '[appMatchPassword]',
providers: [{ provide: NG_VALIDATORS, useExisting: MatchPasswordDirective, multi: true }]
})
export class MatchPasswordDirective implements Validator {
@Input('appMatchPassword') MatchPassword: string[] = [];
constructor(private customValidator: CustomValidationService) { }
validate(formGroup: FormGroup): ValidationErrors {
return this.customValidator.MatchPassword(this.MatchPassword[0], this.MatchPassword[1])(formGroup);
}
}
import { UniqueContactEmailDirective } from './unique-contact-email.directive';
describe('UniqueContactEmailDirective', () => {
it('should create an instance', () => {
const directive = new UniqueContactEmailDirective();
expect(directive).toBeTruthy();
});
});
import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, ValidationErrors, FormGroup, AbstractControl } from '@angular/forms';
import { CustomValidationService } from '../validation/custom-validation.service';
@Directive({
selector: '[appUniqueContactEmail]',
providers: [{ provide: NG_VALIDATORS, useExisting: UniqueContactEmailDirective, multi: true }]
})
export class UniqueContactEmailDirective implements Validator{
constructor(private customValidator: CustomValidationService) { }
@Input('appUniqueContactEmail') uniqueEmailsInput: string;
validate(control: AbstractControl): { [key: string]: any } | null {
return this.customValidator.UniqueEmailValidation(this.uniqueEmailsInput, control.value);
}
}
.body{
padding:10px 20px 10px 10px;
}
.container{
padding: 10px 0px 0px 0px;
}
.column {
float: left;
width: 50%;
}
mat-form-field {
width: 100%;
}
mat-card{
margin:10px;
}
mat-form-field.mat-form-field {
font-size: 14px;
font-family: Roboto;
}
mat-icon{
cursor: pointer;
}
.mat-row:nth-child(even){
background-color:#f8f8f8;
}
.mat-header-cell{
font-weight: bold;
font-size: 14px;
color: #000000c7;
}
input[type="password"]{
box-shadow: none;
height: auto;
}
input[type="password"]:focus{
border: none;
box-shadow: none;
}
\ No newline at end of file
<div class="body">
<div class="mat-h3 mat-tittle">Registration</div>
<mat-divider></mat-divider>
<form (ngSubmit)="submitAccount(f)" #f="ngForm" [appMatchPassword]="['webinPassword', 'confirmPassword']">
<div class="container">
<mat-card>
<mat-card-subtitle>Account Details</mat-card-subtitle>
<div class="row">
<div class="column">
<mat-form-field class="app-field-padding">
<input name="centerName" matInput placeholder="Center Name" required [(ngModel)]="centerName">
</mat-form-field>
<mat-form-field class="app-field-padding">
<input matInput placeholder="Laboratory Name" required [(ngModel)]="laboratoryName" name="laboratoryName">
</mat-form-field>
<mat-form-field class="app-field-padding">
<input matInput placeholder="Address" required [(ngModel)]="address" name="address">
</mat-form-field>
<!--<mat-form-field class="app-field-padding">
<input matInput placeholder="Country" required [(ngModel)]="country" name="country">
</mat-form-field>-->
<mat-form-field class="app-field-padding">
<input matInput placeholder="Country" [matAutocomplete]="auto" name="country" #countryVal="ngModel" [(ngModel)]="country" (ngModelChange)="doFilterCountry(country)">
</mat-form-field>
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let country of countries" [value]="country">
{{country}}
</mat-option>
</mat-autocomplete>
</div>
<div class="column">
<mat-form-field class="app-field-padding">
<input matInput type="password" placeholder="Password" required [(ngModel)]="webinPassword" name="webinPassword">
</mat-form-field>
<mat-form-field class="app-field-padding">
<input matInput type="password" placeholder="Confirm Password" required [(ngModel)]="confirmPassword" name="confirmPassword">
<mat-error *ngIf="f.controls['confirmPassword']?.errors?.passwordMismatch">
Password and Confirm password dose not match
</mat-error>
</mat-form-field>
</div>
</div>
</mat-card>
<mat-card class="mat-body">
<mat-card-subtitle>Contact Information</mat-card-subtitle>
<a (click)="openDialog('Add',{})">Add new contact <mat-icon>add_circle</mat-icon></a>
<table mat-table *ngIf="dataSource" #table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="firstName">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> Email </th>
<td mat-cell *matCellDef="let element"> {{element.email}} </td>
</ng-container>
<ng-container matColumnDef="primaryContact">
<th mat-header-cell *matHeaderCellDef> Primary Contact </th>
<td mat-cell *matCellDef="let element">
<mat-checkbox *ngIf="element.primaryContact" matInput [checked]=true disabled style="padding-left: 20px;"></mat-checkbox>
<mat-checkbox *ngIf="!element.primaryContact" matInput [checked]=false disabled style="padding-left: 20px;"></mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="edit">
<th mat-header-cell *matHeaderCellDef> Edit </th>
<td mat-cell *matCellDef="let element">
<mat-icon (click)="openDialog('Update',element)">edit</mat-icon>
</td>
</ng-container>
<ng-container matColumnDef="remove">
<th mat-header-cell *matHeaderCellDef> Remove </th>
<td mat-cell *matCellDef="let element">
<mat-icon (click)="openDialog('Delete',element)">delete</mat-icon>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-error *ngIf="primaryContact <= 0 ">
Please enter atlease one primary contact to save the account.
</mat-error>
</mat-card>
</div>
<div style="text-align:Center">
<button mat-raised-button color="accent" [disabled]="f.invalid || primaryContact <= 0">Save</button>
<button mat-raised-button style="margin-left: 5px;" routerLink="">Cancel</button>
</div>
</form>
</div>
/*
* Copyright 2018 EMBL - European Bioinformatics Institute
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software distributed under the
* License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
* CONDITIONS OF ANY KIND, either express or implied. See the License for the
* specific language governing permissions and limitations under the License.
*/
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { WebinAuthenticationService } from '../webin-authentication.service';
import { ReportType } from '../report-type.enum';
import { MatIconModule } from '@angular/material'
import {MatExpansionModule} from '@angular/material/expansion';
@Component({
selector: 'app-main',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DashboardComponent {
ReportType = ReportType; // Allows use in template
constructor(
private _webinAuthenticationService: WebinAuthenticationService) { }
ngOnInit() {
}
ngOnDestroy() {
}
isEga(): boolean {
return this._webinAuthenticationService.ega;
}
}
/*
* Copyright 2018 EMBL - European Bioinformatics Institute
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software distributed under the
* License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
* CONDITIONS OF ANY KIND, either express or implied. See the License for the
* specific language governing permissions and limitations under the License.
*/
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import {ContactDialogModalComponent} from '../contact-dialog-modal/contact-dialog-modal.component';
import { MatTableDataSource } from '@angular/material';
import {UtilService} from '../util/Util-services'
import { getLocaleDayNames } from '@angular/common';
import { mergeMap, catchError } from 'rxjs/operators';
@Component({
selector: 'app-main',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class RegisterComponent {
contactArray= [];
primaryContact: number;
dataSource: MatTableDataSource<any>;
displayedColumns: string[] = ['firstName', 'email','primaryContact','edit','remove'];
/* Used for storing dssed emails, this will be used for validation */
emails= [];
countries=<any>[];
constructor(public dialog: MatDialog,private util: UtilService) {
this.primaryContact=0;
}
ngOnInit() {
this.util.getCountries(null);
}
ngOnDestroy() {
}
openDialog(action,obj): void {
const dialogRef = this.dialog.open(ContactDialogModalComponent, {
width: '500px',
backdropClass: 'custom-dialog-backdrop-class',
panelClass: 'custom-dialog-panel-class',
data: {action: action, emailList:this.emails,contactObj:obj}
});
dialogRef.afterClosed().subscribe(result => {
if(result.event!='close'){
let contactObj=result.data;
if(result.event==='Add'){
this.addContactRow(contactObj);
}
if(result.event==='Update'){
this.updateContactRow(contactObj);
}
if(result.event==='Delete'){
this.deleteContactRow(contactObj);
}
this.updatePrimaryContact(contactObj)
this.dataSource = new MatTableDataSource<any>(this.contactArray);
this.updateEmailsArray();
}
});
}
addContactRow(contact){
contact=this.updateRequestFields(contact);
this.contactArray.push(contact);
}
updateContactRow(contact){
var index = this.contactArray.map(function(item) { return item.id; }).indexOf(contact.id);
this.contactArray[index].email=contact.email;
this.contactArray[index].firstName=contact.firstName;
this.contactArray[index].middleName=contact.middleName;
this.contactArray[index].surname=contact.surname;
this.contactArray[index].consortiumName=contact.consortiumName;
this.contactArray[index].primaryContact=contact.primaryContact;
this.contactArray[index].consortiumContact=contact.consortiumContact;
this.contactArray[index].name=contact.name;
this.contactArray[index].consortium=contact["consortiumName"];
this.contactArray[index].mainContact=contact["primaryContact"];
this.contactArray[index].emailAddress=contact["email"];
}
updateRequestFields(contact){
contact["consortium"]=contact["consortiumName"];
contact["mainContact"]=contact["primaryContact"];
contact["emailAddress"]=contact["email"];
return contact;
}
deleteContactRow(contact){
var index = this.contactArray.map(function(item) { return item.id; }).indexOf(contact.id);
this.contactArray.splice(index, 1);
}
updatePrimaryContact(contactObj){
if(contactObj.primaryContact){
for(var i in this.contactArray){
if(this.contactArray[i].id!=contactObj.id){
this.contactArray[i].primaryContact=false;
}
}
this.primaryContact=1;
}
}
updatePrimaryContactCount()
{
this.primaryContact=0;
for(var i in this.contactArray)
{
if(this.contactArray[i].primaryContact)
this.primaryContact++;
}
}
updateEmailsArray(){
this.emails=[];
for(var i in this.contactArray) {
this.emails.push(this.contactArray[i].email)
}
}
async submitAccount(form){
var submissionAccount=form.value;
submissionAccount["submissionContacts"]=this.contactArray;
(await this.util.saveSubmissionAccount(submissionAccount)).
subscribe((data:any) => {
this.openDialog('Success',data);