work history completed

frontend/angular/src/app/components/my-career-web/auth/register/register.component.scss

@@ -11,7 +11,7 @@
 
 @media only screen and (max-width: 768px) {
     .was-referred {
-        display: block;
+        display: block !important;
     }
 
     .mt-sm-top {

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

@@ -30,10 +30,12 @@
             <div class="assessment-body-tabs mc-card career-builder">
                 <p-tabView>
                     <p-tabPanel header="1{{isMobileView ? '' : '. Personal Data'}}" [selected]="activeTab === 'personal-data'">
-                        <app-personal-details [asChildComponent]="true" (detailsSaved)="activeTab = 'work-history'"></app-personal-details>
+                        <app-personal-details [asChildComponent]="true" (detailsSaved)="activeTab = 'work-history'">
+                        </app-personal-details>
                     </p-tabPanel>
                     <p-tabPanel header="2{{isMobileView ? '' : '. Work History'}}" [selected]="activeTab === 'work-history'">
-                        <app-work-history></app-work-history>
+                        <app-work-history (workSaved)="careerHistory()">
+                        </app-work-history>
                     </p-tabPanel>
                     <p-tabPanel header="3{{isMobileView ? '' : '. Education'}}" [selected]="activeTab === 'education'">
                         <app-education></app-education>

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

@@ -33,4 +33,8 @@ export class CareerHistoryComponent extends BaseComponent implements OnInit {
         this.r.navigate(['/my-career-web/dashboard/home']);
     }
 
+    careerHistory(): void {
+        this.activeTab = 'education';
+    }
+
 }

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

@@ -7,7 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class EducationComponent implements OnInit {
 
-  constructor() { }
+    constructor() {
+    }
 
     ngOnInit() {
     }

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

-<h4 class="tab-heading">Tell us about your most recent job</h4>
+<div class="position-relative">
+    <app-overlay [isActive]="isLoading"></app-overlay>
 
-<div class="row" style="margin-top: 24px;">
+    <h4 class="tab-heading">Tell us about your most recent job</h4>
+
+    <div class="row" style="margin-top: 24px;" *ngIf="!careerProfile?.WorkExperiences[0]?.Employer && careerProfile?.WorkExperiences?.length <= 1">
         <div class="col-md-12 form-group">
-        <p-checkbox label="I don't have any work experience"></p-checkbox>
+            <p-checkbox label="I don't have any work experience" [binary]="true" [(ngModel)]="careerProfile.NoWorkExperience">
+            </p-checkbox>
+        </div>
     </div>
-</div>
 
+    <form #form="ngForm" *ngIf="!careerProfile.NoWorkExperience">
 
-<div class="row experience-wrapper">
+        <div class="row experience-wrapper" *ngFor="let experience of careerProfile.WorkExperiences; let i = index;">
+
+            <div class="remove-record">
+                <i class="fa fa-remove" (click)="removeExperience(experience)"></i>
+            </div>
 
             <div class="col-md-9">
                 <div class="row">
                     <div class="col-md-6 form-group">
                         <label>Employer</label>
-                <input type="text" class="form-control" placeholder="Employeer name" name="Skype">
+                        <app-form-control>
+                            <input type="text" class="form-control" placeholder="Employeer name" name="Employer{{i}}" [(ngModel)]="experience.Employer" required>
+                        </app-form-control>
                     </div>
                     <div class="col-md-4">
                         <div class="row">
                             <div class="col-md-6 form-group">
                                 <label>Start</label>
-                        <p-calendar></p-calendar>
+                                <app-form-control>
+                                    <p-calendar placeholder="MM/YYYY" dateFormat="mm/yy" view="month" [icon]="true" [(ngModel)]="experience.StartMonthField" required name="StartMonth{{i}}">
+                                    </p-calendar>
+                                </app-form-control>
                             </div>
 
-                    <div class="col-md-6 form-group">
+                            <div class="col-md-6 form-group" *ngIf="!experience.StillInRole">
                                 <label>End</label>
-                        <p-calendar></p-calendar>
+                                <app-form-control>
+                                    <p-calendar placeholder="MM/YYYY" dateFormat="mm/yy" view="month" [icon]="true" [(ngModel)]="experience.EndMonthField" required name="EndMonth{{i}}">
+                                    </p-calendar>
+                                </app-form-control>
                             </div>
                         </div>
                     </div>
                     <div class="col-md-2 currently-work-checkbox">
-                <p-checkbox label="I currently work here"></p-checkbox>
+                        <p-checkbox label="I currently work here" [binary]="true" [(ngModel)]="experience.StillInRole" name="StillInRole{{i}}">
+                        </p-checkbox>
                     </div>
                 </div>
             </div>
@@ -38,36 +56,52 @@
                 <div class="row">
                     <div class="col-md-6 form-group">
                         <label>Actual job title</label>
-                <input type="text" class="form-control" placeholder="Actual Title" name="Skype">
+                        <app-form-control>
+                            <input type="text" class="form-control" placeholder="Actual Title" name="ActualJobTitle{{i}}" [(ngModel)]="experience.ActualJobTitle">
+                        </app-form-control>
                     </div>
                     <div class="col-md-6 form-group">
                         <label>ILO job title</label>
-                <input type="text" class="form-control" placeholder="ILO Title" name="Skype">
+                        <app-form-control>
+                            <p-autoComplete [suggestions]="jobTitles" name="ILOJobTitle{{i}}" [(ngModel)]="experience.ILOJobTitle" placeholder="ILO Job Title"
+                                            (completeMethod)="getJobTitles($event)" [forceSelection]="true" dataKey="ObjectID" field="JobTitle">
+                            </p-autoComplete>
+                        </app-form-control>
                     </div>
                 </div>
             </div>
 
             <div class="col-md-6 form-group">
                 <label>Reason for Leaving (OPTIONAL)</label>
-        <textarea class="form-control"></textarea>
+                <app-form-control>
+                    <textarea class="form-control" [(ngModel)]="experience.ReasonForLeaving" name="ReasonForLeaving{{i}}"></textarea>
+                </app-form-control>
             </div>
+
             <div class="col-md-6 form-group">
                 <label>Duties and Responsibilities</label>
-        <textarea class="form-control"></textarea>
+                <app-form-control>
+                    <textarea class="form-control" [(ngModel)]="experience.JobRoleSummary" name="JobRoleSummary{{i}}"></textarea>
+                </app-form-control>
             </div>
 
-</div>
-
+        </div>
 
-<div class="row">
+        <div class="row">
             <div class="col-md-12">
-        <button pButton class="btn btn-info-outline add-more" label="Add Experience +"></button>
+                <button pButton class="btn btn-info-outline add-more" label="Add Experience +" (click)="addWorkExperience()"></button>
+            </div>
         </div>
-</div>
 
+    </form>
 
-<div class="d-flex justify-content-center" style="margin-top: 48px;">
-    <button pButton label="Next Section" class="ui-button-info next-section"></button>
-</div>
 
 
+    <div class="d-flex justify-content-center" style="margin-top: 48px;">
+        <button pButton label="Next Section" class="ui-button-info next-section" (click)="saveWorkHistory()" [disabled]="isSaving">
+        </button>
+    </div>
+
+
+
+</div>

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

-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
+import { BaseComponent } from '../../../base/base.component';
+import { takeUntil } from 'rxjs/operators';
+import { CareerProfileModel } from '../../../models/career-profile.model';
+import { PersonalDetailsService } from '../../../services/personal-details.service';
+import { HelperService } from '../../../services/helper.service';
+import { UtilsService } from '../../../../../oneit/services/utils.service';
+import { WorkExperienceModel } from '../../../models/work-experience.model';
+import { NgForm } from '@angular/forms';
+import { ConfirmationService } from 'primeng/api';
 
 @Component({
     selector: 'app-work-history',
     templateUrl: './work-history.component.html',
     styleUrls: ['./work-history.component.scss']
 })
-export class WorkHistoryComponent implements OnInit {
+export class WorkHistoryComponent extends BaseComponent implements OnInit {
 
-  constructor() { }
+    assocs = ['WorkExperiences.ILOJobTitle'];
+    careerProfile = new CareerProfileModel();
+    jobTitles = [];
+
+    @ViewChild('form') form: NgForm;
+    @Output() workSaved = 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;
+                if (this.careerProfile.WorkExperiences) {
+                    this.careerProfile.WorkExperiences.forEach(exp => {
+                        exp.StartMonthField = UtilsService.convertStringToDate(exp.StartMonth);
+                        exp.EndMonthField = UtilsService.convertStringToDate(exp.EndMonth);
+                    })
+                }
+                this.us.addObjsToJSONByObjectID(this.updatedObjs, this.careerProfile.WorkExperiences);
+                this.addWorkExperience(true);
+            }, err => {
+                this.hs.handleHttpError(err);
+                this.isLoading = false;
+            })
+    }
+
+    addWorkExperience(initLoad = false): void {
+        const newModel = new WorkExperienceModel();
+        newModel.CareerProfile = this.careerProfile.ObjectID;
+        if (initLoad && (!this.careerProfile.WorkExperiences || this.careerProfile.WorkExperiences.length === 0)) {
+            this.us.addMultiRefObject(newModel, this.careerProfile, 'WorkExperiences', this.createdObjs);
+        } else if (!initLoad) {
+            this.us.addMultiRefObject(newModel, this.careerProfile, 'WorkExperiences', this.createdObjs);
+        }
+    }
+
+    getJobTitles($event): void {
+        this.ps.getJobTitles({JobTitle: $event.query})
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(response => {
+                this.jobTitles = response.filter(r => r.JobTitle);
+            }, err => {
+                this.hs.handleHttpError(err);
+            })
+    }
+
+    removeExperience(exp): void {
+        this.cs.confirm({
+            message:'Are you sure you want to remove this experience?',
+            accept: () => {
+                this.us.removeMultiRefObject(exp, this.careerProfile, 'WorkExperiences', this.createdObjs, this.updatedObjs, this.deletedObjs);
+            }
+        })
+    }
+
+    saveWorkHistory(): void {
+        this.hs.validateAllFormFields(this.form);
+        if (this.form.invalid) {
+            return ;
+        }
+        this.careerProfile.WorkExperiences.forEach(exp => {
+            exp.StartMonth = UtilsService.convertDateToString(exp.StartMonthField);
+            exp.EndMonth = UtilsService.convertDateToString(exp.EndMonthField);
+        });
+        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.workSaved.emit();
+                console.log('SENT');
+            }, err => {
+                this.hs.handleHttpError(err);
+                this.isSaving = false;
+            })
     }
 
 }

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

@@ -19,6 +19,7 @@ export const CLASSES = {
     WORK_PREFERENCE_QUESTION: 'performa.orm.WorkPreferencesQuestionNP',
     DIVERSITY_QUESTION: 'performa.orm.DiversityQuestion',
     DIVERSITY_ANSWER: 'performa.orm.DiversityAnswer',
+    WORK_EXPERIENCE: 'performa.orm.WorkExperience',
     QUESTION: 'performa.orm.Question'
 };
 

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

 <div class="my-career-app container-fluid" [@routeAnimations]="o.isActivated ? o.activatedRoute : ''">
 
+    <p-confirmDialog header="Confirmation"></p-confirmDialog>
+
     <p-toast>
         <ng-template let-message pTemplate="message">
             <div class="mc-toast-msg">

frontend/angular/src/app/components/my-career-web/mc-shared/mc-shared.module.ts

@@ -24,6 +24,7 @@ import { CalendarModule } from 'primeng/calendar';
 import { FileUploadModule } from 'primeng/fileupload';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { PersonalDetailsComponent } from './personal-details/personal-details.component';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
 
 const MODULES = [
     ReactiveFormsModule,
@@ -41,7 +42,8 @@ const MODULES = [
     TabViewModule,
     CalendarModule,
     FileUploadModule,
-    SelectButtonModule
+    SelectButtonModule,
+    ConfirmDialogModule
 ];
 
 const COMPONENTS = [

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

 import { BaseModel } from './base.model';
 import { CandidateModel } from './candidate.model';
 import { CLASSES } from '../config/constants';
+import { WorkExperienceModel } from './work-experience.model';
 
 export class CareerProfileModel extends BaseModel {
     ObjectClass = CLASSES.CAREER_PROFILE;
@@ -13,4 +14,6 @@ export class CareerProfileModel extends BaseModel {
     Achievements: string;
     IsGoogleConnected: boolean;
     IsLinkedInConnected: boolean;
+    WorkExperiences: WorkExperienceModel[] = [];
+    NoWorkExperience: boolean;
 }

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

+import { CLASSES } from '../config/constants';
+import { BaseModel } from './base.model';
+
+export class WorkExperienceModel extends BaseModel {
+    ObjectClass = CLASSES.WORK_EXPERIENCE;
+    Employer: string;
+    StartMonth: string;
+    StartMonthField: Date;
+    EndMonth: string;
+    EndMonthField: Date;
+    StillInRole: boolean;
+    ActualJobTitle: boolean;
+    ReasonForLeaving: boolean;
+    JobRoleSummary: boolean;
+    ILOJobTitle: any;
+    CareerProfile: string;
+}