Skip to content

P
PERFORMA_REPLICA
Commit ca6c3a04 by Muhammad Usman
Options

Sprint 1 Issues: 

-	Get started button text change on dynamic
- 	Header section change text dynamically.
parent f52a0718
Showing with 260 additions and 56 deletions
frontend/angular/src/app/components/my-career-web/career-history/career-history/education/education.component.html
...@@ -78,14 +78,14 @@ ...@@ -78,14 +78,14 @@
</div> </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="row">
<div class="col-md-12">
<button pButton class="btn btn-info-outline add-more" label="Add Education +" (click)="addEducation()"></button>
</div>
</div>
<div class="d-flex justify-content-center" style="margin-top: 48px;"> <div class="d-flex justify-content-center" style="margin-top: 48px;">
......
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="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 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>
</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="remove-record">
<div class="skill-name">New Product Launch</div> <i class="fa fa-remove" (click)="removeSkill(skill)"></i>
</div> </div>
<div class="col-md-6"> <div class="col-md-12 form-group">
<p-selectButton [options]="options"></p-selectButton> <app-form-control>
</div> <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> <div class="col-md-6">
<app-form-control>
<p-selectButton [options]="ratings" name="Rating{{i}}" optionLabel="Description" [(ngModel)]="skill.SkillRating" required>
</p-selectButton>
</app-form-control>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button pButton class="btn btn-info-outline add-more" label="Add Skill +"></button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button pButton class="btn btn-info-outline add-more" label="Add Skill +" (click)="addSkill()"></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"></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 { .skill-wrapper {
margin: 24px 0 32px; 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({ @Component({
selector: 'app-skills', selector: 'app-skills',
templateUrl: './skills.component.html', templateUrl: './skills.component.html',
styleUrls: ['./skills.component.scss'] styleUrls: ['./skills.component.scss']
}) })
export class SkillsComponent implements OnInit { export class SkillsComponent extends BaseComponent implements OnInit {
options = [ assocs = ['Skills.Skill'];
{label: 'New York', value: {id: 1, name: 'New York', code: 'NY'}}, skills: SkillModel[] = [];
{label: 'Rome', value: {id: 2, name: 'Rome', code: 'RM'}}, careerProfile = new CareerProfileModel();
{label: 'London', value: {id: 3, name: 'London', code: 'LDN'}}, ratings = [];
{label: 'Istanbul', value: {id: 4, name: 'Istanbul', code: 'IST'}},
{label: 'Paris', value: {id: 5, name: 'Paris', code: 'PRS'}}
];
constructor() { @ViewChild('form') form: NgForm;
@Output() skillsSaved = new EventEmitter();
constructor(
private ps: PersonalDetailsService,
private us: UtilsService,
private cs: ConfirmationService,
private hs: HelperService
) {
super();
} }
ngOnInit() { 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 = { ...@@ -22,7 +22,9 @@ export const CLASSES = {
WORK_EXPERIENCE: 'performa.orm.WorkExperience', WORK_EXPERIENCE: 'performa.orm.WorkExperience',
CERTIFICATION: 'performa.orm.Certification', CERTIFICATION: 'performa.orm.Certification',
EDUCATION: 'performa.orm.EducationCertificate', EDUCATION: 'performa.orm.EducationCertificate',
QUESTION: 'performa.orm.Question' QUESTION: 'performa.orm.Question',
CAREER_SKILL: 'performa.orm.CareerProfileSkill',
SKILL: 'performa.orm.Skill'
}; };
export const SERVICES = { export const SERVICES = {
...@@ -34,6 +36,7 @@ export const SERVICES = { ...@@ -34,6 +36,7 @@ export const SERVICES = {
SAVE: 'Save', SAVE: 'Save',
CAREER_PROFILES: 'CareerProfiles', CAREER_PROFILES: 'CareerProfiles',
JOB_TITLES: 'JobTitles', JOB_TITLES: 'JobTitles',
SKILLS: 'Skills',
LOGIN_LINKEDIN: 'LoginWithLinkedIn', LOGIN_LINKEDIN: 'LoginWithLinkedIn',
LOGIN_GOOGLE: 'LoginWithGoogle', LOGIN_GOOGLE: 'LoginWithGoogle',
}; };
......
frontend/angular/src/app/components/my-career-web/dashboard/home/home.component.html
<div class="home-wrapper position-relative" *ngIf="!isMobileView"> <div class="home-wrapper position-relative" *ngIf="!isMobileView">
<app-overlay [isActive]="isLoading"></app-overlay> <app-overlay [isActive]="isLoading"></app-overlay>
<div class="home-header"> <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">
<div class="home-header-card-content"> <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>
<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> </div>
<div class="home-body"> <div class="home-body">
...@@ -71,11 +84,23 @@ ...@@ -71,11 +84,23 @@
<div class="mobile-tab-content" *ngIf="selectedMobileTab === 'dashboard'"> <div class="mobile-tab-content" *ngIf="selectedMobileTab === 'dashboard'">
<div class="home-mobile-header"> <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"> <div class="mobile-header-card">
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>
<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 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>
</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 { ...@@ -16,6 +16,14 @@ export class HomeComponent extends BaseComponent implements OnInit {
selectedMobileTab = 'dashboard'; selectedMobileTab = 'dashboard';
careerProfile = new CareerProfileModel(); careerProfile = new CareerProfileModel();
assocs = ['Candidate.User', 'Candidate.OccupationPreference']; 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( constructor(
private ps: PersonalDetailsService, private ps: PersonalDetailsService,
...@@ -42,10 +50,15 @@ export class HomeComponent extends BaseComponent implements OnInit { ...@@ -42,10 +50,15 @@ export class HomeComponent extends BaseComponent implements OnInit {
this.careerProfile = response; this.careerProfile = response;
this.ps.careerProfileUpdated = this.careerProfile; this.ps.careerProfileUpdated = this.careerProfile;
this.isLoading = false; this.isLoading = false;
this.setActiveSection();
}, err => { }, err => {
this.hs.handleHttpError(err); this.hs.handleHttpError(err);
this.isLoading = false; 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 @@ ...@@ -18,18 +18,18 @@
<div class="user-profile-completion"> <div class="user-profile-completion">
<div class="user-profile-sections"> <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> <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> <i class="fa fa-check"></i>
</div> </div>
<span class="section-percentage">{{careerProfile[task.key] || 0}}%</span> <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> </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 <i class="fa fa-edit"></i> Edit
</div> </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 { ...@@ -18,11 +18,11 @@ export class ProfileTasksComponent extends BaseComponent {
backgroundColor = '#1469A2'; backgroundColor = '#1469A2';
assocs = ['Candidate.User', 'Candidate.OccupationPreference']; assocs = ['Candidate.User', 'Candidate.OccupationPreference'];
profileTasks = [ profileTasks = [
{label: 'Personal Details', link: '/my-career-web/dashboard/personal-details', key: 'CompletedPercentage', 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', active: false, allowEditField: 'AllowResubmitWS'}, {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', active: false, allowEditField: 'AllowResubmitWP'}, {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: '', active: 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: '', active: false} {label: 'Diversity', link: '/my-career-web/assessments/diversity-profile', key: 'CompletedPercentageDiv', inProgress: false, completed: false, started: false}
]; ];
constructor( constructor(
...@@ -58,9 +58,19 @@ export class ProfileTasksComponent extends BaseComponent { ...@@ -58,9 +58,19 @@ export class ProfileTasksComponent extends BaseComponent {
} }
setProfileCompletion(): void { setProfileCompletion(): void {
this.profileTasks.forEach(t => t.active = false); this.profileTasks.forEach(t => {
const currentTask = this.profileTasks.find(t => this.careerProfile[t.key] !== 100); t.completed = false;
currentTask.active = true; 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; // const percentage = (this.careerProfile.CompletedPercentage || 0) * 3.6;
// for (let i = 0; i <= percentage; i++) { // for (let i = 0; i <= percentage; i++) {
// if (percentage === 360) { // if (percentage === 360) {
......
frontend/angular/src/app/components/my-career-web/models/candidate.model.ts
...@@ -22,6 +22,7 @@ export class CandidateModel extends BaseModel { ...@@ -22,6 +22,7 @@ export class CandidateModel extends BaseModel {
PrivacyPolicyAgreed: boolean; PrivacyPolicyAgreed: boolean;
ConditionsAgreed: boolean; ConditionsAgreed: boolean;
HasValidAddress: boolean; HasValidAddress: boolean;
IsFirstTime: boolean;
User = new UserModel(); User = new UserModel();
TestInput: string; TestInput: string;
TestAnalysises: Array<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'; ...@@ -3,6 +3,7 @@ import { CandidateModel } from './candidate.model';
import { CLASSES } from '../config/constants'; import { CLASSES } from '../config/constants';
import { WorkExperienceModel } from './work-experience.model'; import { WorkExperienceModel } from './work-experience.model';
import { EducationModel } from './education.model'; import { EducationModel } from './education.model';
import { CareerSkillModel } from './career-skill.model';
export class CareerProfileModel extends BaseModel { export class CareerProfileModel extends BaseModel {
ObjectClass = CLASSES.CAREER_PROFILE; ObjectClass = CLASSES.CAREER_PROFILE;
...@@ -17,6 +18,7 @@ export class CareerProfileModel extends BaseModel { ...@@ -17,6 +18,7 @@ export class CareerProfileModel extends BaseModel {
IsLinkedInConnected: boolean; IsLinkedInConnected: boolean;
WorkExperiences: WorkExperienceModel[] = []; WorkExperiences: WorkExperienceModel[] = [];
EducationCertificates: EducationModel[] = []; EducationCertificates: EducationModel[] = [];
Skills: CareerSkillModel[] = [];
NoWorkExperience: boolean; NoWorkExperience: boolean;
NoEducationQualification: boolean; NoEducationQualification: boolean;
} }
frontend/angular/src/app/components/my-career-web/models/career-skill.model.ts 0 → 100644
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 { ...@@ -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> { getCareerProfile(assocs = []): Observable<CareerProfileModel> {
return this.ss.getObjects(SERVICES.CAREER_PROFILES, 'All', {}, assocs, null, null, null, null) return this.ss.getObjects(SERVICES.CAREER_PROFILES, 'All', {}, assocs, null, null, null, null)
.map( .map(
......
frontend/angular/src/styles/my-career-styles/_form.scss
...@@ -39,6 +39,13 @@ ...@@ -39,6 +39,13 @@
} }
} }
.is-invalid {
input {
border: 1px solid #e62a10 !important;
}
}
textarea { textarea {
resize: none; resize: none;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment