Sprint 1 Issues:

-	Get started button text change on dynamic
- 	Header section change text dynamically.

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

@@ -78,15 +78,15 @@
 
         </div>
 
-    </form>
-
-
         <div class="row">
             <div class="col-md-12">
                 <button pButton class="btn btn-info-outline add-more" label="Add Education +" (click)="addEducation()"></button>
             </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" (click)="saveEducation()"></button>

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

-<h4 class="tab-heading">Tell us about your Skills</h4>
+<div class="position-relative">
+    <app-overlay [isActive]="isLoading || isSaving"></app-overlay>
 
-<div class="row" style="margin-top: 24px;">
+    <h4 class="tab-heading">Tell us about your Skills</h4>
+
+    <div class="row" style="margin-top: 24px;">
         <div class="col-md-12">
             <span>We have identified the following skills based on your Work experience, Educational qualifications or certification. How would you rate yourself? </span>
         </div>
-</div>
+    </div>
 
+    <form #form="ngForm">
 
-<div class="row skill-wrapper">
+        <div class="row skill-wrapper" *ngFor="let skill of careerProfile?.Skills; let i = index;"
+             style="padding-bottom: 16px;">
 
-    <div class="col-md-12">
-        <div class="skill-name">New Product Launch</div>
+            <div class="remove-record">
+                <i class="fa fa-remove" (click)="removeSkill(skill)"></i>
+            </div>
+
+            <div class="col-md-12 form-group">
+                <app-form-control>
+                    <p-autoComplete [suggestions]="skills" name="Skill{{i}}" [(ngModel)]="skill.Skill" placeholder="Enter Skill" required
+                                    (completeMethod)="getSkills($event)" [forceSelection]="true" dataKey="ObjectID" field="Description">
+                    </p-autoComplete>
+                </app-form-control>
             </div>
 
             <div class="col-md-6">
-        <p-selectButton [options]="options"></p-selectButton>
+                <app-form-control>
+                    <p-selectButton [options]="ratings" name="Rating{{i}}" optionLabel="Description" [(ngModel)]="skill.SkillRating" required>
+                    </p-selectButton>
+                </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 Skill +"></button>
+                <button pButton class="btn btn-info-outline add-more" label="Add Skill +" (click)="addSkill()"></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" [disabled]="isSaving" (click)="saveSkill()"></button>
+    </div>
 
+</div>

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

 .skill-wrapper {
     margin: 24px 0 32px;
+
+    ::ng-deep {
+        .ui-autocomplete {
+            width: 80%;
+        }
+    }
 }

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

-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
+import { BaseComponent } from '../../../base/base.component';
+import { CareerProfileModel } from '../../../models/career-profile.model';
+import { NgForm } from '@angular/forms';
+import { PersonalDetailsService } from '../../../services/personal-details.service';
+import { UtilsService } from '../../../../../oneit/services/utils.service';
+import { ConfirmationService } from 'primeng/api';
+import { HelperService } from '../../../services/helper.service';
+import { takeUntil } from 'rxjs/operators';
+import { CareerSkillModel, SkillModel } from '../../../models/career-skill.model';
 
 @Component({
     selector: 'app-skills',
     templateUrl: './skills.component.html',
     styleUrls: ['./skills.component.scss']
 })
-export class SkillsComponent implements OnInit {
+export class SkillsComponent extends BaseComponent implements OnInit {
 
-    options = [
-        {label: 'New York', value: {id: 1, name: 'New York', code: 'NY'}},
-        {label: 'Rome', value: {id: 2, name: 'Rome', code: 'RM'}},
-        {label: 'London', value: {id: 3, name: 'London', code: 'LDN'}},
-        {label: 'Istanbul', value: {id: 4, name: 'Istanbul', code: 'IST'}},
-        {label: 'Paris', value: {id: 5, name: 'Paris', code: 'PRS'}}
-    ];
+    assocs = ['Skills.Skill'];
+    skills: SkillModel[] = [];
+    careerProfile = new CareerProfileModel();
+    ratings = [];
 
-    constructor() {
+    @ViewChild('form') form: NgForm;
+    @Output() skillsSaved = new EventEmitter();
+
+    constructor(
+        private ps: PersonalDetailsService,
+        private us: UtilsService,
+        private cs: ConfirmationService,
+        private hs: HelperService
+    ) {
+        super();
     }
 
     ngOnInit() {
+        this.getCareerProfile();
+        this.getSkillRatings();
+    }
+
+    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.Skills);
+                this.addSkill(true);
+                this.isLoading = false;
+            }, err => {
+                this.hs.handleHttpError(err);
+                this.isLoading = false;
+            })
+    }
+
+    getSkills($event): void {
+        this.ps.getSkills({JobTitle: $event.query})
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(response => {
+                this.skills = response;
+            }, err => {
+                this.hs.handleHttpError(err);
+            })
+    }
+
+    getSkillRatings(): void {
+        this.ps.getSkillRatings()
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(response => {
+                this.ratings = response;
+            }, err => {
+                this.hs.handleHttpError(err);
+            })
+    }
+
+    addSkill(initLoad = false): void {
+        const newModel = new CareerSkillModel();
+        newModel.CareerProfile = this.careerProfile.ObjectID;
+        if (initLoad && (!this.careerProfile.Skills || this.careerProfile.Skills.length === 0)) {
+            this.us.addMultiRefObject(newModel, this.careerProfile, 'Skills', this.createdObjs);
+        } else if (!initLoad) {
+            this.us.addMultiRefObject(newModel, this.careerProfile, 'Skills', this.createdObjs);
+        }
+    }
+
+    removeSkill(exp): void {
+        this.cs.confirm({
+            message:'Are you sure you want to remove this skill?',
+            accept: () => {
+                this.us.removeMultiRefObject(exp, this.careerProfile, 'Skills', this.createdObjs, this.updatedObjs, this.deletedObjs);
+            }
+        })
+    }
+
+    saveSkill(): 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.skillsSaved.emit();
+            }, err => {
+                this.hs.handleHttpError(err);
+                this.isSaving = false;
+            })
     }
 
 }

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

@@ -22,7 +22,9 @@ export const CLASSES = {
     WORK_EXPERIENCE: 'performa.orm.WorkExperience',
     CERTIFICATION: 'performa.orm.Certification',
     EDUCATION: 'performa.orm.EducationCertificate',
-    QUESTION: 'performa.orm.Question'
+    QUESTION: 'performa.orm.Question',
+    CAREER_SKILL: 'performa.orm.CareerProfileSkill',
+    SKILL: 'performa.orm.Skill'
 };
 
 export const SERVICES = {
@@ -34,6 +36,7 @@ export const SERVICES = {
     SAVE: 'Save',
     CAREER_PROFILES: 'CareerProfiles',
     JOB_TITLES: 'JobTitles',
+    SKILLS: 'Skills',
     LOGIN_LINKEDIN: 'LoginWithLinkedIn',
     LOGIN_GOOGLE: 'LoginWithGoogle',
 };

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

 <div class="home-wrapper position-relative" *ngIf="!isMobileView">
     <app-overlay [isActive]="isLoading"></app-overlay>
     <div class="home-header">
-        <div class="home-header-heading">Hey {{careerProfile?.Candidate?.User?.FirstName | truncate : 10}}, Welcome to Matchd Career.</div>
+
+        <div class="home-header-heading">
+            <span *ngIf="careerProfile?.Candidate?.IsFirstTime">Hey {{careerProfile?.Candidate?.User?.FirstName | truncate : 10}}, Welcome to Matchd Career.</span>
+            <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">Hi {{careerProfile?.Candidate?.User?.FirstName | truncate : 10}}, Welcome back.</span>
+        </div>
+
         <div class="home-header-card">
+
             <div class="home-header-card-content">
-                We need some information from you so you can fill out your career profile and get job hunting.
+                <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">We need you to fill out your Career Profile so you can apply to the jobs that you’ve been matched to below.</span>
+                <span *ngIf="careerProfile?.Candidate?.IsFirstTime">We need some information from you so you can fill out your career profile and get job hunting.</span>
             </div>
-            <div class="home-header-card-action" routerLink="/my-career-web/dashboard/personal-details">I'm ready to get started</div>
+
+            <div class="home-header-card-action" [routerLink]="activeSection?.link">
+                <span *ngIf="careerProfile?.Candidate?.IsFirstTime">I'm ready to get started</span>
+                <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">Get Started</span>
+            </div>
+
         </div>
+
     </div>
     <div class="home-body">
 
@@ -71,11 +84,23 @@
     <div class="mobile-tab-content" *ngIf="selectedMobileTab === 'dashboard'">
 
         <div class="home-mobile-header">
-            <div class="mobile-header-heading">Hey {{careerProfile?.Candidate?.User?.FirstName | truncate : 10}}, Welcome to Matchd Career.</div>
+
+            <div class="mobile-header-heading">
+                <span *ngIf="careerProfile?.Candidate?.IsFirstTime">Hey {{careerProfile?.Candidate?.User?.FirstName | truncate : 10}}, Welcome to Matchd Career.</span>
+                <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">Hi {{careerProfile?.Candidate?.User?.FirstName | truncate : 10}}, Welcome back.</span>
+            </div>
+
             <div class="mobile-header-card">
-                We need some information from you so you can fill out your career profile and get job hunting.
-                <div class="mobile-header-card-action" routerLink="/my-career-web/dashboard/personal-details">I'm ready to get started</div>
+                <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">We need you to fill out your Career Profile so you can apply to the jobs that you’ve been matched to below.</span>
+                <span *ngIf="careerProfile?.Candidate?.IsFirstTime">We need some information from you so you can fill out your career profile and get job hunting.</span>
+
+                <div class="mobile-header-card-action" [routerLink]="activeSection.link">
+                    <span *ngIf="careerProfile?.Candidate?.IsFirstTime">I'm ready to get started</span>
+                    <span *ngIf="!careerProfile?.Candidate?.IsFirstTime">Get Started</span>
                 </div>
+
+            </div>
+
         </div>
 
 

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

@@ -16,6 +16,14 @@ export class HomeComponent extends BaseComponent implements OnInit {
     selectedMobileTab = 'dashboard';
     careerProfile = new CareerProfileModel();
     assocs = ['Candidate.User', 'Candidate.OccupationPreference'];
+    sections = [
+        {link: '/my-career-web/dashboard/personal-details', key: 'CompletedPercentage'},
+        {link: '/my-career-web/assessments/work-style', key: 'CompletedPercentageWS'},
+        {link: '/my-career-web/assessments/work-preference', key: 'CompletedPercentageWP'},
+        {link: '/my-career-web/career-history/personal-data', key: 'CompletedPercentageCH'},
+        {link: '/my-career-web/assessments/diversity-profile', key: 'CompletedPercentageDiv'}
+    ];
+    activeSection;
 
     constructor(
         private ps: PersonalDetailsService,
@@ -42,10 +50,15 @@ export class HomeComponent extends BaseComponent implements OnInit {
                 this.careerProfile = response;
                 this.ps.careerProfileUpdated = this.careerProfile;
                 this.isLoading = false;
+                this.setActiveSection();
             }, err => {
                 this.hs.handleHttpError(err);
                 this.isLoading = false;
             })
     }
 
+    setActiveSection(): void {
+        this.activeSection  = this.sections.find(s => this.careerProfile[s.key] !== 100);
+    }
+
 }

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

@@ -18,18 +18,18 @@
         <div class="user-profile-completion">
             <div class="user-profile-sections">
 
-                <div class="user-profile-section" *ngFor="let task of profileTasks;" [ngClass]="{completed: careerProfile[task.key] === 100, active: task.active}">
+                <div class="user-profile-section" *ngFor="let task of profileTasks;" [ngClass]="{completed: task.completed, active: task.inProgress || task.started}">
                     <span>{{task.label}}</span>
 
-                    <div class="section-completed-mark" *ngIf="careerProfile[task.key] === 100">
+                    <div class="section-completed-mark" *ngIf="task.completed">
                         <i class="fa fa-check"></i>
                     </div>
                     <span class="section-percentage">{{careerProfile[task.key] || 0}}%</span>
 
-                    <button pButton label="Get Started" [routerLink]="task.link" class="ui-button-info section-start">
+                    <button pButton label="Get Started" *ngIf="task.started" [routerLink]="task.link" class="ui-button-info section-start">
                     </button>
 
-                    <div class="section-edit" [routerLink]="task.link" *ngIf="careerProfile[task.key] === 100" [ngClass]="{disabled: careerProfile[task.allowEditField] === false}">
+                    <div class="section-edit" [routerLink]="task.link" *ngIf="!task.started && (task.inProgress || task.completed)" [ngClass]="{disabled: careerProfile[task.allowEditField] === false}">
                         <i class="fa fa-edit"></i> Edit
                     </div>
 

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

@@ -18,11 +18,11 @@ export class ProfileTasksComponent extends BaseComponent {
     backgroundColor = '#1469A2';
     assocs = ['Candidate.User', 'Candidate.OccupationPreference'];
     profileTasks = [
-        {label: 'Personal Details', link: '/my-career-web/dashboard/personal-details', key: 'CompletedPercentage', active: false},
-        {label: 'Work Strengths', link: '/my-career-web/assessments/work-style', key: 'CompletedPercentageWS', active: false, allowEditField: 'AllowResubmitWS'},
-        {label: 'Career Values', link: '/my-career-web/assessments/work-preference', key: 'CompletedPercentageWP', active: false, allowEditField: 'AllowResubmitWP'},
-        {label: 'Career History', link: '/my-career-web/career-history/personal-data', key: '', active: false},
-        {label: 'Diversity', link: '/my-career-web/assessments/diversity-profile', key: '', active: false}
+        {label: 'Personal Details', link: '/my-career-web/dashboard/personal-details', key: 'CompletedPercentage', inProgress: false, completed: false, started: false},
+        {label: 'Work Strengths', link: '/my-career-web/assessments/work-style', key: 'CompletedPercentageWS', inProgress: false, completed: false, allowEditField: 'AllowResubmitWS', started: false},
+        {label: 'Career Values', link: '/my-career-web/assessments/work-preference', key: 'CompletedPercentageWP', inProgress: false, completed: false, allowEditField: 'AllowResubmitWP', started: false},
+        {label: 'Career History', link: '/my-career-web/career-history/personal-data', key: 'CompletedPercentageCH', inProgress: false, completed: false, started: false},
+        {label: 'Diversity', link: '/my-career-web/assessments/diversity-profile', key: 'CompletedPercentageDiv', inProgress: false, completed: false, started: false}
     ];
 
     constructor(
@@ -58,9 +58,19 @@ export class ProfileTasksComponent extends BaseComponent {
     }
 
     setProfileCompletion(): void {
-        this.profileTasks.forEach(t => t.active = false);
-        const currentTask = this.profileTasks.find(t => this.careerProfile[t.key] !== 100);
-        currentTask.active = true;
+        this.profileTasks.forEach(t => {
+            t.completed = false;
+            t.inProgress = false;
+            t.started = false;
+            if (this.careerProfile[t.key] === 100) {
+                t.completed = true;
+            } else if (this.careerProfile[t.key] > 0 && this.careerProfile[t.key] <= 100) {
+                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;
         // for (let i = 0; i <= percentage; i++) {
         //     if (percentage === 360) {

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

@@ -22,6 +22,7 @@ export class CandidateModel extends BaseModel {
     PrivacyPolicyAgreed: boolean;
     ConditionsAgreed: boolean;
     HasValidAddress: boolean;
+    IsFirstTime: boolean;
     User = new UserModel();
     TestInput: string;
     TestAnalysises: Array<string>;

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

@@ -3,6 +3,7 @@ import { CandidateModel } from './candidate.model';
 import { CLASSES } from '../config/constants';
 import { WorkExperienceModel } from './work-experience.model';
 import { EducationModel } from './education.model';
+import { CareerSkillModel } from './career-skill.model';
 
 export class CareerProfileModel extends BaseModel {
     ObjectClass = CLASSES.CAREER_PROFILE;
@@ -17,6 +18,7 @@ export class CareerProfileModel extends BaseModel {
     IsLinkedInConnected: boolean;
     WorkExperiences: WorkExperienceModel[] = [];
     EducationCertificates: EducationModel[] = [];
+    Skills: CareerSkillModel[] = [];
     NoWorkExperience: boolean;
     NoEducationQualification: boolean;
 }

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

+import { BaseModel } from './base.model';
+import { CLASSES } from '../config/constants';
+
+export class CareerSkillModel extends BaseModel {
+    ObjectClass = CLASSES.CAREER_SKILL;
+    IsIncluded: boolean;
+    SkillRating: string;
+    Skill: SkillModel;
+    CareerProfile?: string;
+}
+
+
+export class SkillModel extends BaseModel {
+    ObjectClass = CLASSES.SKILL;
+    Description: string;
+}

frontend/angular/src/app/components/my-career-web/services/personal-details.service.ts

@@ -46,6 +46,19 @@ export class PersonalDetailsService {
             )
     }
 
+    getSkills(queryParams = {}, assocs = []): Observable<any> {
+        return this.ss.getObjects(SERVICES.SKILLS, 'All', queryParams, assocs, null, null, null, null)
+          .map(
+            data => {
+                return this.us.convertResponseToObjects(data, assocs);
+            }
+          )
+    }
+
+    getSkillRatings(): Observable<any> {
+        return this.es.getEnums('SkillRatings', true);
+    }
+
     getCareerProfile(assocs = []): Observable<CareerProfileModel> {
         return this.ss.getObjects(SERVICES.CAREER_PROFILES, 'All', {}, assocs, null, null, null, null)
             .map(

frontend/angular/src/styles/my-career-styles/_form.scss

@@ -39,6 +39,13 @@
     }
 }
 
+
+.is-invalid {
+    input {
+        border: 1px solid #e62a10 !important;
+    }
+}
+
 textarea {
     resize: none;