referees saved

frontend/angular/src/app/components/my-career-web/career-history/career-history/career-history.component.html

@@ -28,23 +28,23 @@
 
 
             <div class="assessment-body-tabs mc-card career-builder">
-                <p-tabView>
+                <p-tabView (onChange)="tabChanged($event)">
                     <p-tabPanel header="1{{isMobileView ? '' : '. Personal Data'}}" [selected]="activeTab === 'personal-data'">
-                        <app-personal-details [asChildComponent]="true" (detailsSaved)="activeTab = 'work-history'">
+                        <app-personal-details [asChildComponent]="true" (detailsSaved)="tabChanged({index: 1})">
                         </app-personal-details>
                     </p-tabPanel>
                     <p-tabPanel header="2{{isMobileView ? '' : '. Work History'}}" [selected]="activeTab === 'work-history'">
-                        <app-work-history (workSaved)="careerHistory()">
+                        <app-work-history (workSaved)="tabChanged({index: 2})">
                         </app-work-history>
                     </p-tabPanel>
                     <p-tabPanel header="3{{isMobileView ? '' : '. Education'}}" [selected]="activeTab === 'education'">
-                        <app-education></app-education>
+                        <app-education (educationSaved)="tabChanged({index: 3})"></app-education>
                     </p-tabPanel>
                     <p-tabPanel header="4{{isMobileView ? '' : '. Skills'}}" [selected]="activeTab === 'skills'">
-                        <app-skills></app-skills>
+                        <app-skills (skillsSaved)="tabChanged({index: 4})"></app-skills>
                     </p-tabPanel>
                     <p-tabPanel header="5{{isMobileView ? '' : '. References'}}" [selected]="activeTab === 'references'">
-                        <app-references></app-references>
+                        <app-references (refereeSaved)="tabChanged({index: 5})"></app-references>
                     </p-tabPanel>
                     <p-tabPanel header="6{{isMobileView ? '' : '. Templates'}}" [selected]="activeTab === 'templates'">
                         <app-templates></app-templates>

frontend/angular/src/app/components/my-career-web/career-history/career-history/career-history.component.ts

@@ -10,6 +10,7 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class CareerHistoryComponent extends BaseComponent implements OnInit {
 
+    tabs = ['personal-data', 'work-history', 'education', 'skills', 'references', 'templates'];
     activeTab = '';
 
     constructor(
@@ -33,8 +34,8 @@ export class CareerHistoryComponent extends BaseComponent implements OnInit {
         this.r.navigate(['/my-career-web/dashboard/home']);
     }
 
-    careerHistory(): void {
-        this.activeTab = 'education';
+    tabChanged($event): void {
+        this.r.navigate([`/my-career-web/career-history/${this.tabs[$event.index]}`]);
     }
 
 }

frontend/angular/src/app/components/my-career-web/career-history/career-history/education/education.component.html

@@ -14,7 +14,7 @@
         </div>
     </div>
 
-    <form #form="ngForm" *ngIf="!careerProfile.NoEducationQualification">
+    <form #form="ngForm" *ngIf="!careerProfile.NoEducationQualification" style="margin-top: 15px;">
 
         <div class="row education-wrapper" *ngFor="let education of careerProfile.EducationCertificates; let i = index;">
 

frontend/angular/src/app/components/my-career-web/career-history/career-history/education/education.component.ts

@@ -20,7 +20,7 @@ export class EducationComponent extends BaseComponent implements OnInit {
     careerProfile = new CareerProfileModel();
 
     @ViewChild('form') form: NgForm;
-    @Output() workSaved = new EventEmitter();
+    @Output() educationSaved = new EventEmitter();
 
     constructor(
         private ps: PersonalDetailsService,
@@ -89,7 +89,7 @@ export class EducationComponent extends BaseComponent implements OnInit {
             .subscribe(res => {
                 this.isSaving = false;
                 this.hs.oneItHttpResponse(res);
-                this.workSaved.emit();
+                this.educationSaved.emit();
             }, err => {
                 this.hs.handleHttpError(err);
                 this.isSaving = false;

frontend/angular/src/app/components/my-career-web/career-history/career-history/references/references.component.html

-<h4 class="tab-heading">Tell us about your referees</h4>
+<div class="position-relative">
+    <app-overlay [isActive]="isLoading || isSaving"></app-overlay>
 
-<div class="row" style="margin-top: 24px;">
-    <div class="col-md-12 form-group">
-        <p-checkbox label="I don't have any referees to record"></p-checkbox>
+    <h4 class="tab-heading">Tell us about your referees</h4>
+
+    <div class="row" style="margin-top: 24px;" *ngIf="!careerProfile?.Referees[0]?.RefereeName && careerProfile?.Referees?.length <= 1">
+        <div class="col-md-12 form-group">
+            <p-checkbox label="I don't have any referees to record" [binary]="true" [(ngModel)]="careerProfile.NoReference"></p-checkbox>
+        </div>
     </div>
-</div>
 
+    <form #form="ngForm" *ngIf="!careerProfile?.NoReference" style="margin-top: 15px;">
 
-<div class="row reference-wrapper">
+        <div class="row reference-wrapper" *ngFor="let referee of careerProfile.Referees; let i = index;">
 
-    <div class="col-md-9">
-        <div class="row">
-            <div class="col-md-6 form-group">
-                <label>Referee Name</label>
-                <input type="text" class="form-control" placeholder="Employeer name" name="Skype">
+            <div class="remove-record">
+                <i class="fa fa-remove" (click)="removeReferee(referee)"></i>
             </div>
-        </div>
 
-        <div class="row">
-            <div class="col-md-6 form-group">
-                <label>Email</label>
-                <input type="text" class="form-control" placeholder="Email address" name="Skype">
-            </div>
+            <div class="col-md-9">
+                <div class="row">
+                    <div class="col-md-6 form-group">
+                        <label>Referee Name</label>
+                        <app-form-control>
+                            <input type="text" class="form-control" placeholder="Referee Name" name="RefereeName{{i}}" [(ngModel)]="referee.RefereeName">
+                        </app-form-control>
+                    </div>
+                </div>
+
+                <div class="row">
+                    <div class="col-md-6 form-group">
+                        <label>Email</label>
+                        <app-form-control>
+                            <input type="text" class="form-control" placeholder="Email address" name="Email{{i}}" [(ngModel)]="referee.Email" email>
+                        </app-form-control>
+                    </div>
+
+                    <div class="col-md-6 form-group">
+                        <label>Phone</label>
+                        <app-form-control>
+                            <p-inputMask (focusout)="checkMobilePattern(referee)" slotChar="-" [unmask]="true" [autoClear]="true" mask="9999 999 9999"
+                                         styleClass="form-control" placeholder="Mobile No" [(ngModel)]="referee.Phone" name="Mobile{{i}}">
+                            </p-inputMask>
+                        </app-form-control>
+                    </div>
+                </div>
+
+                <div class="row">
+                    <div class="col-md-6 form-group">
+                        <label>Role</label>
+                        <app-form-control>
+                            <input type="text" class="form-control" placeholder="Role" name="Role{{i}}" [(ngModel)]="referee.Role">
+                        </app-form-control>
+                    </div>
+
+                    <div class="col-md-3 col-md-offset-3 form-group">
+                        <label>Written Reference</label>
+                        <p-fileUpload mode="basic" name="Upload your Cover Letter" withCredentials="true" auto="true"
+                                      chooseLabel="Browse"></p-fileUpload>
+                    </div>
+                </div>
 
-            <div class="col-md-6 form-group">
-                <label>Phone</label>
-                <input type="text" class="form-control" placeholder="Phone" name="Skype">
             </div>
-        </div>
 
-        <div class="row">
-            <div class="col-md-6 form-group">
-                <label>Role</label>
-                <input type="text" class="form-control" placeholder="Role" name="Skype">
-            </div>
 
-            <div class="col-md-3 col-md-offset-3 form-group">
-                <label>Written Reference</label>
-                <p-fileUpload mode="basic" name="Upload your Cover Letter" withCredentials="true" auto="true" chooseLabel="Browse"></p-fileUpload>
-            </div>
         </div>
 
-    </div>
 
+        <div class="row">
+            <div class="col-md-12">
+                <button pButton class="btn btn-info-outline add-more" label="Add Reference +" (click)="addReferee()">
+                </button>
+            </div>
+        </div>
 
-</div>
+    </form>
 
 
-<div class="row">
-    <div class="col-md-12">
-        <button pButton class="btn btn-info-outline add-more" label="Add Reference +"></button>
+    <div class="d-flex justify-content-center" style="margin-top: 48px;">
+        <button pButton label="Next Section" class="ui-button-info next-section" [disabled]="isSaving" (click)="saveReferees()"></button>
     </div>
-</div>
-
 
-
-<div class="d-flex justify-content-center" style="margin-top: 48px;">
-    <button pButton label="Next Section" class="ui-button-info next-section"></button>
 </div>
-

frontend/angular/src/app/components/my-career-web/career-history/career-history/references/references.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
+import { PersonalDetailsService } from '../../../services/personal-details.service';
+import { HelperService } from '../../../services/helper.service';
+import { CareerProfileModel } from '../../../models/career-profile.model';
+import { UtilsService } from '../../../../../oneit/services/utils.service';
+import { ConfirmationService } from 'primeng/api';
+import { NgForm } from '@angular/forms';
+import { BaseComponent } from '../../../base/base.component';
+import { takeUntil } from 'rxjs/operators';
+import { RefereeModel } from '../../../models/referee.model';
 
 @Component({
   selector: 'app-references',
   templateUrl: './references.component.html',
   styleUrls: ['./references.component.scss']
 })
-export class ReferencesComponent implements OnInit {
+export class ReferencesComponent extends BaseComponent implements OnInit {
 
-  constructor() { }
+    assocs = ['Referees'];
+    careerProfile = new CareerProfileModel();
 
-  ngOnInit() {
-  }
+    @ViewChild('form') form: NgForm;
+    @Output() refereeSaved = new EventEmitter();
+
+    constructor(
+        private ps: PersonalDetailsService,
+        private us: UtilsService,
+        private cs: ConfirmationService,
+        private hs: HelperService
+    ) {
+        super();
+    }
+
+    ngOnInit() {
+        this.getCareerProfile();
+    }
+
+    getCareerProfile(): void {
+        this.isLoading = true;
+        this.ps.getCareerProfile(this.assocs)
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(response => {
+                this.isLoading = false;
+                this.careerProfile = response;
+                this.us.addObjsToJSONByObjectID(this.updatedObjs, this.careerProfile.Referees);
+                this.addReferee(true);
+                this.isLoading = false;
+            }, err => {
+                this.hs.handleHttpError(err);
+                this.isLoading = false;
+            })
+    }
+
+    checkMobilePattern(referee) {
+        if (referee.Mobile && referee.Mobile.length < 11) {
+            referee.Mobile = '';
+        }
+    }
+
+    addReferee(initLoad = false): void {
+        const newModel = new RefereeModel();
+        newModel.CareerProfile = this.careerProfile.ObjectID;
+        if (initLoad && (!this.careerProfile.Referees || this.careerProfile.Referees.length === 0)) {
+            this.us.addMultiRefObject(newModel, this.careerProfile, 'Referees', this.createdObjs);
+        } else if (!initLoad) {
+            this.us.addMultiRefObject(newModel, this.careerProfile, 'Referees', this.createdObjs);
+        }
+        console.log(newModel);
+    }
+
+    removeReferee(ref): void {
+        this.cs.confirm({
+            message:'Are you sure you want to remove this skill?',
+            accept: () => {
+                this.us.removeMultiRefObject(ref, this.careerProfile, 'Referees', this.createdObjs, this.updatedObjs, this.deletedObjs);
+            }
+        })
+    }
+
+    saveReferees(): void {
+        this.hs.validateAllFormFields(this.form);
+        if (this.form.invalid) {
+            return ;
+        }
+        this.isSaving = true;
+        this.ps.saveProfile(this.createdObjs, this.updatedObjs, this.deletedObjs)
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(res => {
+                this.isSaving = false;
+                this.hs.oneItHttpResponse(res);
+                this.refereeSaved.emit();
+            }, err => {
+                this.hs.handleHttpError(err);
+                this.isSaving = false;
+            })
+    }
 
 }

frontend/angular/src/app/components/my-career-web/career-history/career-history/work-history/work-history.component.html

@@ -10,7 +10,7 @@
         </div>
     </div>
 
-    <form #form="ngForm" *ngIf="!careerProfile.NoWorkExperience">
+    <form #form="ngForm" *ngIf="!careerProfile.NoWorkExperience" style="margin-top: 15px;">
 
         <div class="row experience-wrapper" *ngFor="let experience of careerProfile.WorkExperiences; let i = index;">
 

frontend/angular/src/app/components/my-career-web/config/constants.ts

@@ -24,7 +24,8 @@ export const CLASSES = {
     EDUCATION: 'performa.orm.EducationCertificate',
     QUESTION: 'performa.orm.Question',
     CAREER_SKILL: 'performa.orm.CareerProfileSkill',
-    SKILL: 'performa.orm.Skill'
+    SKILL: 'performa.orm.Skill',
+    REFEREE: 'performa.orm.Referee'
 };
 
 export const SERVICES = {

frontend/angular/src/app/components/my-career-web/dashboard/profile-tasks/profile-tasks.component.ts

@@ -68,7 +68,6 @@ export class ProfileTasksComponent extends BaseComponent {
                 t.inProgress = true;
             }
         });
-        console.log(this.profileTasks);
         const currentTask = this.profileTasks.find(t => !this.careerProfile[t.key]);
         currentTask.started = true;
         // const percentage =  (this.careerProfile.CompletedPercentage || 0) * 3.6;

frontend/angular/src/app/components/my-career-web/models/career-profile.model.ts

@@ -4,6 +4,7 @@ import { CLASSES } from '../config/constants';
 import { WorkExperienceModel } from './work-experience.model';
 import { EducationModel } from './education.model';
 import { CareerSkillModel } from './career-skill.model';
+import { RefereeModel } from './referee.model';
 
 export class CareerProfileModel extends BaseModel {
     ObjectClass = CLASSES.CAREER_PROFILE;
@@ -19,6 +20,8 @@ export class CareerProfileModel extends BaseModel {
     WorkExperiences: WorkExperienceModel[] = [];
     EducationCertificates: EducationModel[] = [];
     Skills: CareerSkillModel[] = [];
+    Referees: RefereeModel[] = [];
     NoWorkExperience: boolean;
     NoEducationQualification: boolean;
+    NoReference: boolean;
 }

frontend/angular/src/app/components/my-career-web/models/referee.model.ts

+import { BaseModel } from './base.model';
+import { CLASSES } from '../config/constants';
+
+export class RefereeModel extends BaseModel {
+    ObjectClass = CLASSES.REFEREE;
+    RefereeName: string;
+    Email: string;
+    Phone: string;
+    Role: string;
+    WrittenReference: any;
+    CareerProfile: string;
+}

frontend/angular/src/styles/my-career-styles/_profile-builder.scss

@@ -37,6 +37,7 @@
             right: 0;
             cursor: pointer;
             top: 0;
+            z-index: 1000;
         }
     }