Skip to content

P
PERFORMA_REPLICA
Commit d7903a20 by Muhammad Usman
Options

reports completed

parent 105117bc
Showing with 698 additions and 108 deletions
frontend/angular/src/app/my-career-web/assessment/assessment.module.ts
...@@ -6,7 +6,6 @@ import { WorkStyleComponent } from './work-style/work-style.component'; ...@@ -6,7 +6,6 @@ import { WorkStyleComponent } from './work-style/work-style.component';
import { WorkPreferenceComponent } from './work-preference/work-preference.component'; import { WorkPreferenceComponent } from './work-preference/work-preference.component';
import { DiversityProfileComponent } from './diversity-profile/diversity-profile.component'; import { DiversityProfileComponent } from './diversity-profile/diversity-profile.component';
import { McSharedModule } from '../mc-shared/mc-shared.module'; import { McSharedModule } from '../mc-shared/mc-shared.module';
import { SummaryReportComponent } from './summary-report/summary-report.component';
@NgModule({ @NgModule({
imports: [ imports: [
...@@ -17,8 +16,7 @@ import { SummaryReportComponent } from './summary-report/summary-report.componen ...@@ -17,8 +16,7 @@ import { SummaryReportComponent } from './summary-report/summary-report.componen
declarations: [ declarations: [
WorkStyleComponent, WorkStyleComponent,
WorkPreferenceComponent, WorkPreferenceComponent,
DiversityProfileComponent, DiversityProfileComponent
SummaryReportComponent
] ]
}) })
export class AssessmentModule { export class AssessmentModule {
......
frontend/angular/src/app/my-career-web/assessment/assessment.routing.ts
...@@ -3,7 +3,6 @@ import { Routes, RouterModule } from '@angular/router'; ...@@ -3,7 +3,6 @@ import { Routes, RouterModule } from '@angular/router';
import { WorkStyleComponent } from './work-style/work-style.component'; import { WorkStyleComponent } from './work-style/work-style.component';
import { WorkPreferenceComponent } from './work-preference/work-preference.component'; import { WorkPreferenceComponent } from './work-preference/work-preference.component';
import { DiversityProfileComponent } from './diversity-profile/diversity-profile.component'; import { DiversityProfileComponent } from './diversity-profile/diversity-profile.component';
import { SummaryReportComponent } from './summary-report/summary-report.component';
const routes: Routes = [ const routes: Routes = [
{ {
...@@ -17,11 +16,6 @@ const routes: Routes = [ ...@@ -17,11 +16,6 @@ const routes: Routes = [
{ {
path: 'diversity-profile', path: 'diversity-profile',
component: DiversityProfileComponent component: DiversityProfileComponent
},
{
path: 'summary-report',
component: SummaryReportComponent
} }
]; ];
......
frontend/angular/src/app/my-career-web/assessment/summary-report/summary-report.component.scss deleted 100644 → 0
@import "../../../../styles/my-career-styles/variables";
.summary-report {
margin-top: 20px;
border: 2px solid $greyBorder;
border-radius: 10px;
.report-chart {
padding: 3% 5%;
.report-title {
text-align: center;
font-size: 16px;
margin-bottom: 24px;
font-weight: bold;
}
.report-circle {
margin: 0 auto;
width: 200px;
height: 200px;
background: #e5e8eb;
border-radius: 50%;
padding: 17px;
&-value {
width: 100%;
height: 100%;
border-radius: 50%;
background: $white;
font-size: 2.5em;
line-height: 166px;
text-align: center;
}
}
}
}
frontend/angular/src/app/my-career-web/career-history/career-history/skills/skills.component.html
...@@ -14,14 +14,14 @@ ...@@ -14,14 +14,14 @@
<div class="row skill-wrapper" *ngFor="let skill of careerProfile?.Skills; let i = index;" <div class="row skill-wrapper" *ngFor="let skill of careerProfile?.Skills; let i = index;"
style="padding-bottom: 16px;"> style="padding-bottom: 16px;">
<div class="remove-record"> <div class="remove-record" (click)="removeSkill(skill)">
<i class="fa fa-remove" (click)="removeSkill(skill)"></i> <i class="fa fa-remove"></i>
</div> </div>
<div class="col-md-12 form-group"> <div class="col-md-12 form-group">
<app-form-control> <app-form-control>
<p-autoComplete [suggestions]="skills" name="Skill{{i}}" [(ngModel)]="skill.Skill" placeholder="Enter Skill" required <p-autoComplete [suggestions]="skills" name="Skill{{i}}" [(ngModel)]="skill.Skill" placeholder="Enter Skill" required
(completeMethod)="getSkills($event)" [forceSelection]="true" dataKey="ObjectID" field="Description"> (completeMethod)="getSkills($event)" dataKey="ObjectID" field="Description">
</p-autoComplete> </p-autoComplete>
</app-form-control> </app-form-control>
</div> </div>
......
frontend/angular/src/app/my-career-web/career-history/career-history/skills/skills.component.ts
...@@ -100,19 +100,21 @@ export class SkillsComponent extends BaseComponent implements OnInit { ...@@ -100,19 +100,21 @@ export class SkillsComponent extends BaseComponent implements OnInit {
return this.helperService.validateAllFormFields(this.form); return this.helperService.validateAllFormFields(this.form);
} }
this.isSaving = true; this.isSaving = true;
this.personalDetailsService.saveProfile(this.createdObjs, this.updatedObjs, this.deletedObjs) console.log(this.careerProfile);
.pipe(takeUntil(this.componentInView)) // console.log(this.createdObjs, this.updatedObjs, this.deletedObjs);
.subscribe(res => { // this.personalDetailsService.saveProfile(this.createdObjs, this.updatedObjs, this.deletedObjs)
this.isSaving = false; // .pipe(takeUntil(this.componentInView))
if (customRoute) { // .subscribe(res => {
this.router.navigate([customRoute]) // this.isSaving = false;
} else { // if (customRoute) {
this.skillsSaved.emit(); // this.router.navigate([customRoute])
} // } else {
}, err => { // this.skillsSaved.emit();
this.isSaving = false; // }
this.utilsService.handleError(err); // }, err => {
}) // this.isSaving = false;
// this.utilsService.handleError(err);
// })
} }
} }
frontend/angular/src/app/my-career-web/career-history/career-history/templates/templates.component.html
<h4 class="tab-heading">Select the design template for your Career Profile</h4> <h4 class="tab-heading">Select the design template for your Career Profile</h4>
<!--<p-carousel>-->
<!-- -->
<!--</p-carousel>-->
<div class="text-center mt-3">
<button pButton label="Please choose a profile template" class="ui-button-info rounded-btn"
(click)="showTemplates()"></button>
</div>
<div class="template-picker-wrapper" [ngClass]="{show: templatesShown}">
<div class="close-templates" (click)="templatesShown = false;">
<div class="fa fa-times"></div>
</div>
<div class="templates">
<p-carousel [value]="careerProfile?.Candidate?.AllTempletes" [numVisible]="2" iconReplacer
[iconsToReplace]="['pi-arrow-circle-right', 'pi-arrow-circle-left']" [delay]="2000"
[iconsToAdd]="['pi-chevron-right', 'pi-chevron-left']" styleClass="template-picker">
<ng-template let-template pTemplate="item">
<div class="template-wrapper">
<div class="template-img-wrapper">
<div class="template-img">
<img [src]="template.ImgPath" alt="">
</div>
<div class="template-actions">
<button pButton [label]="template.CanUse ? 'Select this template' : 'Upgrade to premium'"
class="ui-button-info rounded-btn" (click)="selectTemplate(template)">
</button>
</div>
</div>
<div class="template-info">
<div class="template-title">{{template.Name}}</div>
<div class="template-description">{{template.Description}}</div>
</div>
</div>
</ng-template>
</p-carousel>
</div>
</div>
frontend/angular/src/app/my-career-web/career-history/career-history/templates/templates.component.scss
.template-picker-wrapper {
background-color: rgba(43, 44, 45, 0.89);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
&.show {
display: block;
animation: fadeIn .3s;
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
}
.close-templates {
color: #58595B;
background: #fff;
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
right: 34px;
top: 34px;
cursor: pointer;
z-index: 1000;
.fa {
font-size: 24px;
}
}
.template-img-wrapper {
background: #fff;
.template-img {
height: 560px;
img {
max-height: 100%;
}
}
.template-actions {
height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
}
.template-info {
color: #fff;
text-align: center;
margin-top: 28px;
.template-title {
font-size: 24px;
line-height: 32px;
font-weight: 600;
}
.template-description {
font-size: 18px;
line-height: 27px;
margin-top: 8px;
}
}
}
frontend/angular/src/app/my-career-web/career-history/career-history/templates/templates.component.ts
...@@ -4,6 +4,9 @@ import { CareerProfileModel } from '../../../models/career-profile.model'; ...@@ -4,6 +4,9 @@ import { CareerProfileModel } from '../../../models/career-profile.model';
import { PersonalDetailsService } from '../../../services/personal-details.service'; import { PersonalDetailsService } from '../../../services/personal-details.service';
import { UtilsService } from '../../../../oneit/services/utils.service'; import { UtilsService } from '../../../../oneit/services/utils.service';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { environment } from '../../../../../environments/environment';
import { CandidateTemplateModel } from '../../../models/candidate-template.model';
import { SaveService } from '../../../../oneit/services/save.service';
@Component({ @Component({
selector: 'app-templates', selector: 'app-templates',
...@@ -14,9 +17,16 @@ export class TemplatesComponent extends BaseComponent implements OnInit { ...@@ -14,9 +17,16 @@ export class TemplatesComponent extends BaseComponent implements OnInit {
assocs = ['Candidate', 'Candidate.CandidateTemplates']; assocs = ['Candidate', 'Candidate.CandidateTemplates'];
careerProfile = new CareerProfileModel(); careerProfile = new CareerProfileModel();
tempalteStatus = {
INCLUDED_IN_FREE: 'INCLUDED_IN_FREE',
INCLUDED_IN_PREMIUM: 'INCLUDED_IN_PREMIUM',
};
templatesShown = false;
apiBase = environment.baseUrl;
constructor( constructor(
private personalDetailsService: PersonalDetailsService, private personalDetailsService: PersonalDetailsService,
private saveService: SaveService,
private utilsService: UtilsService private utilsService: UtilsService
) { ) {
super(); super();
...@@ -33,10 +43,36 @@ export class TemplatesComponent extends BaseComponent implements OnInit { ...@@ -33,10 +43,36 @@ export class TemplatesComponent extends BaseComponent implements OnInit {
.subscribe(response => { .subscribe(response => {
this.isLoading = false; this.isLoading = false;
this.careerProfile = response; this.careerProfile = response;
if (this.careerProfile.Candidate.AllTempletes) {
this.careerProfile.Candidate.AllTempletes.map(t => {
t.CanUse = t.Availability === this.tempalteStatus.INCLUDED_IN_FREE
|| t.Availability === this.tempalteStatus.INCLUDED_IN_PREMIUM;
t.ImgPath = this.apiBase + t.FullImageURI
});
this.careerProfile.Candidate.AllTempletes.sort((t1, t2) => t1.SortOrder - t2.SortOrder);
this.utilsService.addObjsToJSONByObjectID(this.updatedObjs, this.careerProfile.Candidate.CandidateTemplates)
}
}, err => { }, err => {
this.isLoading = false; this.isLoading = false;
this.utilsService.handleError(err); this.utilsService.handleError(err);
}) })
} }
selectTemplate(template): void {
const templateModel = new CandidateTemplateModel();
templateModel.Candidate = this.careerProfile.Candidate.ObjectID;
templateModel.Template = template.Value;
this.utilsService.createObject(templateModel, this.createdObjs);
this.saveService.saveObjectsWithDefaultSvc(this.createdObjs, this.updatedObjs, this.updatedObjs)
.pipe(takeUntil(this.componentInView))
.subscribe(response => {
console.log(response);
});
}
showTemplates(): void {
this.templatesShown = true;
}
} }
frontend/angular/src/app/my-career-web/config/constants.ts
...@@ -26,6 +26,7 @@ export const CLASSES = { ...@@ -26,6 +26,7 @@ export const CLASSES = {
CAREER_SKILL: 'performa.orm.CareerProfileSkill', CAREER_SKILL: 'performa.orm.CareerProfileSkill',
SKILL: 'performa.orm.Skill', SKILL: 'performa.orm.Skill',
REFEREE: 'performa.orm.Referee', REFEREE: 'performa.orm.Referee',
CandidateTemplate: 'performa.orm.CandidateTemplate',
INTRO: 'performa.orm.IntroductionLetter' INTRO: 'performa.orm.IntroductionLetter'
}; };
......
frontend/angular/src/app/my-career-web/dashboard/dashboard.module.ts
...@@ -8,6 +8,7 @@ import { HomeComponent } from './home/home.component'; ...@@ -8,6 +8,7 @@ import { HomeComponent } from './home/home.component';
import { LeftSidebarComponent } from './left-sidebar/left-sidebar.component'; import { LeftSidebarComponent } from './left-sidebar/left-sidebar.component';
import { ProfileTasksComponent } from './profile-tasks/profile-tasks.component'; import { ProfileTasksComponent } from './profile-tasks/profile-tasks.component';
import { GoPremiumComponent } from './go-premium/go-premium.component'; import { GoPremiumComponent } from './go-premium/go-premium.component';
import { SummaryReportComponent } from './summary-report/summary-report.component';
@NgModule({ @NgModule({
imports: [ imports: [
...@@ -20,7 +21,8 @@ import { GoPremiumComponent } from './go-premium/go-premium.component'; ...@@ -20,7 +21,8 @@ import { GoPremiumComponent } from './go-premium/go-premium.component';
HomeComponent, HomeComponent,
LeftSidebarComponent, LeftSidebarComponent,
ProfileTasksComponent, ProfileTasksComponent,
GoPremiumComponent GoPremiumComponent,
SummaryReportComponent
] ]
}) })
......
frontend/angular/src/app/my-career-web/dashboard/dashboard.routing.ts
...@@ -4,6 +4,7 @@ import { DashboardComponent } from './dashboard/dashboard.component'; ...@@ -4,6 +4,7 @@ import { DashboardComponent } from './dashboard/dashboard.component';
import { HomeComponent } from './home/home.component'; import { HomeComponent } from './home/home.component';
import { PersonalDetailsComponent } from '../mc-shared/personal-details/personal-details.component'; import { PersonalDetailsComponent } from '../mc-shared/personal-details/personal-details.component';
import { GoPremiumComponent } from './go-premium/go-premium.component'; import { GoPremiumComponent } from './go-premium/go-premium.component';
import { SummaryReportComponent } from './summary-report/summary-report.component';
const routes: Routes = [ const routes: Routes = [
{ {
...@@ -23,6 +24,10 @@ const routes: Routes = [ ...@@ -23,6 +24,10 @@ const routes: Routes = [
component: GoPremiumComponent component: GoPremiumComponent
}, },
{ {
path: 'reports',
component: SummaryReportComponent
},
{
path: '', path: '',
redirectTo: 'home', redirectTo: 'home',
pathMatch: 'full' pathMatch: 'full'
......
frontend/angular/src/app/my-career-web/dashboard/left-sidebar/left-sidebar.component.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
</div> </div>
<div class="sidebar-navigation"> <div class="sidebar-navigation">
<div class="sidebar-navigation-item" routerLink="/my-career-web/dashboard" routerLinkActive="active"> <div class="sidebar-navigation-item" routerLink="/my-career-web/dashboard/home" routerLinkActive="active">
<span class="sidebar-navigation-item-icon"> <span class="sidebar-navigation-item-icon">
<i class="fa fa-home"></i> <i class="fa fa-home"></i>
</span> </span>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</span> </span>
</div> </div>
<div class="sidebar-navigation-item"> <div class="sidebar-navigation-item" routerLink="/my-career-web/dashboard/reports" routerLinkActive="active">
<span class="sidebar-navigation-item-icon"> <span class="sidebar-navigation-item-icon">
<i class="fa fa-clipboard"></i> <i class="fa fa-clipboard"></i>
</span> </span>
......
frontend/angular/src/app/my-career-web/dashboard/profile-tasks/profile-tasks.component.scss
...@@ -14,7 +14,6 @@ ...@@ -14,7 +14,6 @@
height: 112px; height: 112px;
margin: 0 auto; margin: 0 auto;
border-radius: 100%; border-radius: 100%;
background-color: #1469A2;
padding: 4px; padding: 4px;
.user-profile-avatar { .user-profile-avatar {
......
frontend/angular/src/app/my-career-web/assessment/summary-report/summary-report.component.html → frontend/angular/src/app/my-career-web/dashboard/summary-report/summary-report.component.html
<div class="summary-report container position-relative"> <div class="report-wrapper">
<div class="career-web" *ngIf="!isMobileView">
<img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
</div>
<div class="summary-report">
<app-overlay [isActive]="isLoading"></app-overlay> <app-overlay [isActive]="isLoading"></app-overlay>
<div class="row"> <div class="row">
<div class="col-md-6 report-chart">
<div class="report-title">ROLE FIT</div> <div class="col-lg-6 report-chart" *ngFor="let report of reports;" [ngClass]="{selected: selectedReport === report}">
<div class="report-circle" [ngStyle]="{backgroundImage: reportChart.role.backgroundImage, backgroundColor: reportChart.role.backgroundColor}">
<div class="report-circle-value">
54%
</div>
</div>
<div class="report-legend">
<div class="report-title">{{report.title}}</div>
<div class="report-circle" [ngStyle]="{backgroundImage: report.bgImg, backgroundColor: report.bgColor}">
<div class="report-circle-value">
{{ceil(report.report?.PercentageValue)}}%
</div> </div>
</div> </div>
<div class="col-md-6 report-chart"> <div class="report-legend">
<div class="row">
<div class="report-title">CULTURE FIT</div> <div class="col-md-6 report-dot" *ngFor="let dot of report.report?.Dots">
<div class="report-circle"> <div class="dot-div" [ngClass]="dot.DotClass"></div>
<div class="report-circle-value"> <div class="dot-label">{{dot.DotValue}}</div>
65%
</div> </div>
</div> </div>
<div class="report-legend">
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row report-bars">
<div class="col-md-12" style="padding: 0;"> <div class="col-lg-12">
<p-accordion> <p-accordion>
<p-accordionTab> <p-accordionTab *ngFor="let bar of selectedReport?.report?.Bars">
<p-header> <p-header>
<div class="mc-tab-header-text"> <div class="mc-tab-header-text">
Career Drives {{bar.Label}}
</div> </div>
<div class="mc-tab-header-content"> <div class="mc-tab-header-content">
<div class="header-percentage-value">55%</div> <div class="header-percentage-value">{{ceil(bar.RatingValue)}}%</div>
<div class="header-percentage-bar"> <div class="header-percentage-bar" [ngClass]="bar.ProgressBarClass">
<p-progressBar [value]="50"></p-progressBar> <p-progressBar [value]="bar.RatingValue"></p-progressBar>
</div> </div>
<div class="mc-accordion-icon" (click)="showBody = !showBody"> <div class="mc-accordion-icon" (click)="showBody = !showBody">
...@@ -58,6 +57,35 @@ ...@@ -58,6 +57,35 @@
</div> </div>
</div> </div>
</p-header> </p-header>
<div class="sub-bars">
<div class="sub-bar" *ngFor="let subbar of bar.SubBars;">
<div class="sub-bar-title">
{{subbar.Label}}
</div>
<div class="sub-bar-content">
<div class="sub-bar-labels">
<div class="sub-bar-label">
{{subbar.LeftAnnotation}}
</div>
<div class="sub-bar-label">
{{subbar.RightAnnotation}}
</div>
</div>
<div class="sub-bar-progresses">
<div class="sub-bar-progress" [ngClass]="res.class" *ngFor="let res of subbar.ParsedResults;" [ngStyle]="{minWidth: res.value + '%'}">
</div>
<div class="sub-bar-triangle" [ngStyle]="{left: subbar.TriangleStyleLeft + '%'}"></div>
</div>
<div class="sub-bar-content">
{{subbar.BottomDetail}}
</div>
</div>
</div>
</div>
</p-accordionTab> </p-accordionTab>
</p-accordion> </p-accordion>
...@@ -65,7 +93,7 @@ ...@@ -65,7 +93,7 @@
</div> </div>
</div> </div>
<div class="d-flex justify-content-between" style="margin: 20px 0;"> <div class="d-flex justify-content-between" style="margin: 20px 30px;">
<button pButton label="Download" class="ui-button-info"> <button pButton label="Download" class="ui-button-info">
</button> </button>
...@@ -74,4 +102,6 @@ ...@@ -74,4 +102,6 @@
</button> </button>
</div> </div>
</div>
</div> </div>
frontend/angular/src/app/my-career-web/dashboard/summary-report/summary-report.component.scss 0 → 100644
@import "../../../../styles/my-career-styles/variables";
.report-wrapper {
padding: 0 5%;
margin-top: 40px;
.career-web {
width: 300px;
margin: 0 auto;
}
.summary-report {
margin-top: 20px;
border: 2px solid $greyBorder;
border-radius: 10px;
position: relative;
background: $white;
overflow: hidden;
.report-chart {
padding: 3% 5%;
border-right: 1px solid $greyBorder;
transition: .3s;
cursor: pointer;
.report-title {
text-align: center;
font-size: 16px;
margin-bottom: 24px;
font-weight: bold;
}
.report-circle {
margin: 0 auto;
width: 150px;
height: 150px;
transition: .3s;
border-radius: 50%;
padding: 12px;
&-value {
width: 100%;
height: 100%;
border-radius: 50%;
background: $white;
font-size: 2em;
display: flex;
align-items: center;
justify-content: center;
}
}
&.selected {
background: #f5f5f5;
}
.report-legend {
margin-top: 30px;
.report-dot {
display: flex;
align-items: center;
.dot-div {
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 10px;
}
}
}
}
.report-bars {
.sub-bars {
.sub-bar {
padding: 20px 50px 10px;
border-bottom: 1px solid #e0dede;
display: flex;
align-items: center;
&-title {
flex: 0 0 30%;
text-transform: uppercase;
}
&-content {
flex: 1;
font-size: 12px;
margin-top: 5px;
.sub-bar-labels {
display: flex;
justify-content: space-between;
}
.sub-bar-progresses {
height: 12px;
background: black;
margin: 5px 0;
display: flex;
position: relative;
.sub-bar-triangle {
position: absolute;
border: 5px solid transparent;
border-bottom: 10px solid #000;
z-index: 10;
bottom: 0;
}
}
}
}
}
}
}
}
.header-percentage-bar {
&.green-b {
::ng-deep {
.ui-progressbar-value {
background: #47BBB3;
}
}
}
&.red-b {
::ng-deep {
.ui-progressbar-value {
background: #fb5d67;
}
}
}
&.yellow-b {
::ng-deep {
.ui-progressbar-value {
background: #fbc712;
}
}
}
}
.report-dot {
.red-dot{
background-color: #fabdc1;
border:1px solid #fb5d67;
}
.yellow-dot{
background-color: #fbe7a1;
border: 1px solid #fbc712;
}
.green-dot{
background-color: #8CE2DB;
border: 1px solid #47BBB3;
}
}
@media screen and (max-width: 1024px) {
.report-wrapper {
.summary-report {
.report-bars {
.sub-bars {
.sub-bar {
padding: 15px 5px 10px;
display: block;
&-title {
text-align: center;
margin-bottom: 8px;
}
}
}
}
}
}
}
frontend/angular/src/app/my-career-web/assessment/summary-report/summary-report.component.ts → frontend/angular/src/app/my-career-web/dashboard/summary-report/summary-report.component.ts
...@@ -4,6 +4,7 @@ import { HelperService } from '../../services/helper.service'; ...@@ -4,6 +4,7 @@ import { HelperService } from '../../services/helper.service';
import { AssessmentService } from '../../services/assessment.service'; import { AssessmentService } from '../../services/assessment.service';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { UtilsService } from '../../../oneit/services/utils.service'; import { UtilsService } from '../../../oneit/services/utils.service';
import { SummaryReportModel } from '../../models/summary-report.model';
@Component({ @Component({
selector: 'app-summary-report', selector: 'app-summary-report',
...@@ -13,10 +14,15 @@ import { UtilsService } from '../../../oneit/services/utils.service'; ...@@ -13,10 +14,15 @@ import { UtilsService } from '../../../oneit/services/utils.service';
export class SummaryReportComponent extends BaseComponent implements OnInit { export class SummaryReportComponent extends BaseComponent implements OnInit {
showBody = false; showBody = false;
reportChart = { colorClasses = {
role: {backgroundColor: '', backgroundImage: ''}, 'percent-yellow-b': {incompleteColor: '#e5e8eb', completeColor: '#fedd6f'}
culture: {backgroundColor: '', backgroundImage: ''}
}; };
reports: { report: SummaryReportModel, title: string, bgColor: string, bgImg: string }[] = [
{report: null, title: 'ROLE FIT', bgImg: '', bgColor: this.colorClasses['percent-yellow-b'].incompleteColor},
{report: null, title: 'CULTURE FIT', bgImg: '', bgColor: this.colorClasses['percent-yellow-b'].incompleteColor},
];
selectedReport: { report: SummaryReportModel, title: string };
ceil = Math.ceil;
constructor( constructor(
private assessmentService: AssessmentService, private assessmentService: AssessmentService,
...@@ -28,11 +34,25 @@ export class SummaryReportComponent extends BaseComponent implements OnInit { ...@@ -28,11 +34,25 @@ export class SummaryReportComponent extends BaseComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
this.isLoading = true; this.isLoading = true;
this.assessmentService.getSummaryReport() this.assessmentService.getSummaryReport(['Dots', 'Bars.SubBars'])
.pipe(takeUntil(this.componentInView)) .pipe(takeUntil(this.componentInView))
.subscribe(response => { .subscribe((response: SummaryReportModel[]) => {
console.log(response);
this.isLoading = false; this.isLoading = false;
response.forEach((r, i) => {
this.reports[i].report = r;
this.reports[i].bgImg = this.helperService.circleGradient(r.PercentageValue, this.colorClasses[r.ColorClass].completeColor, this.colorClasses[r.ColorClass].incompleteColor).backgroundImage;
this.reports[i].bgColor = this.colorClasses[r.ColorClass].completeColor;
r.Bars.forEach(b => {
b.SubBars.forEach(sb => {
sb.ParsedResults = [];
Object.keys(sb.Results).forEach(k => {
sb.ParsedResults.push({class: Object.keys(sb.Results[k])[0], value: sb.Results[k][Object.keys(sb.Results[k])[0]]});
});
})
});
});
this.selectedReport = this.reports[0];
}, err => { }, err => {
this.utilsService.handleError(err); this.utilsService.handleError(err);
this.isLoading = false; this.isLoading = false;
......
frontend/angular/src/app/my-career-web/intro-letters/intro-letter/intro-letter.component.html
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
<td> <td>
<div class="exp-row"> <div class="exp-row">
<i class="fa fa-bars" pReorderableRowHandle></i> <i class="fa fa-bars" pReorderableRowHandle></i>
<p-checkbox [value]="rowData.ObjectID" [(ngModel)]="introductionLetter.WorkExperiences" name="EXP{{index}}" [label]="rowData?.ILOJobTitle?.JobTitle"></p-checkbox> <p-checkbox [value]="rowData.ObjectID" [(ngModel)]="introductionLetter.WorkExperiences" name="EXP{{index}}" [label]="rowData?.ActualJobTitle + ' - ' + rowData?.Employer"></p-checkbox>
</div> </div>
</td> </td>
</tr> </tr>
......
frontend/angular/src/app/my-career-web/intro-letters/intro-letter/intro-letter.component.ts
...@@ -50,7 +50,7 @@ export class IntroLetterComponent extends BaseComponent implements OnInit { ...@@ -50,7 +50,7 @@ export class IntroLetterComponent extends BaseComponent implements OnInit {
getCareerProfile(): void { getCareerProfile(): void {
this.isLoadingSkillAndExp = true; this.isLoadingSkillAndExp = true;
const assocs = ['WorkExperiences', 'Skills.Skill']; const assocs = ['WorkExperiences', 'WorkExperiences.WorkExperiences', 'Skills.Skill'];
this.personalDetailsService.getCareerProfile(assocs) this.personalDetailsService.getCareerProfile(assocs)
.pipe(takeUntil(this.componentInView)) .pipe(takeUntil(this.componentInView))
.subscribe(response => { .subscribe(response => {
...@@ -61,6 +61,7 @@ export class IntroLetterComponent extends BaseComponent implements OnInit { ...@@ -61,6 +61,7 @@ export class IntroLetterComponent extends BaseComponent implements OnInit {
this.introductionLetter.Candidate = this.careerProfile.Candidate; this.introductionLetter.Candidate = this.careerProfile.Candidate;
this.utilsService.createObject(this.introductionLetter, this.createdObjs); this.utilsService.createObject(this.introductionLetter, this.createdObjs);
} }
console.log(this.careerProfile);
}, err => { }, err => {
this.isLoadingSkillAndExp = false; this.isLoadingSkillAndExp = false;
this.utilsService.handleError(err); this.utilsService.handleError(err);
......
frontend/angular/src/app/my-career-web/layouts/wrapper/wrapper.component.ts
...@@ -32,7 +32,6 @@ export class WrapperComponent extends BaseComponent implements OnInit { ...@@ -32,7 +32,6 @@ export class WrapperComponent extends BaseComponent implements OnInit {
this.msgService.errorMsgsUpdated this.msgService.errorMsgsUpdated
.pipe(takeUntil(this.componentInView)) .pipe(takeUntil(this.componentInView))
.subscribe(errors => { .subscribe(errors => {
console.log(errors);
if(Array.isArray(errors)) { if(Array.isArray(errors)) {
errors.forEach((err, i) => { errors.forEach((err, i) => {
if (i > 0) { if (i > 0) {
......
frontend/angular/src/app/my-career-web/mc-shared/icon-replacer.directive.ts 0 → 100644
import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
@Directive({
selector: '[iconReplacer]'
})
export class IconReplacerDirective implements AfterViewInit {
private readonly element: HTMLInputElement;
@Input() iconsToReplace = [];
@Input() iconsToAdd = [];
@Input() delay = 0;
constructor(
private elRef: ElementRef
) {
this.element = elRef.nativeElement;
}
ngAfterViewInit(): void {
setTimeout(() => {
this.iconsToReplace.forEach((icon, ind) => {
const el = this.element.querySelector(`.${icon}`);
if (el) {
el.classList.remove(icon);
el.classList.add(this.iconsToAdd[ind]);
}
});
}, this.delay);
}
}
frontend/angular/src/app/my-career-web/mc-shared/mc-shared.module.ts
...@@ -14,6 +14,7 @@ import { ConfirmDialogModule } from 'primeng/confirmdialog'; ...@@ -14,6 +14,7 @@ import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { TooltipModule } from 'primeng/tooltip'; import { TooltipModule } from 'primeng/tooltip';
import { IntroLetterService } from '../services/intro-letter.service'; import { IntroLetterService } from '../services/intro-letter.service';
import { TableModule } from 'primeng/table'; import { TableModule } from 'primeng/table';
import { IconReplacerDirective } from './icon-replacer.directive';
const MODULES = [ const MODULES = [
ReactiveFormsModule, ReactiveFormsModule,
...@@ -31,7 +32,8 @@ const COMPONENTS = [ ...@@ -31,7 +32,8 @@ const COMPONENTS = [
]; ];
const DIRECTIVES = [ const DIRECTIVES = [
GooglePlacesAutocompleteDirective GooglePlacesAutocompleteDirective,
IconReplacerDirective
]; ];
const PIPES = [ const PIPES = [
......
frontend/angular/src/app/my-career-web/models/candidate-template.model.ts 0 → 100644
import { BaseModel } from './base.model';
import { CLASSES } from '../config/constants';
export class CandidateTemplateModel extends BaseModel {
ObjectClass = CLASSES.CandidateTemplate;
Template: string;
Candidate: string;
}
frontend/angular/src/app/my-career-web/models/candidate.model.ts
import { UserModel } from './user.model'; import { UserModel } from './user.model';
import { CLASSES } from '../config/constants'; import { CLASSES } from '../config/constants';
import { BaseModel } from './base.model'; import { BaseModel } from './base.model';
import { CandidateTemplateModel } from './candidate-template.model';
export class CandidateModel extends BaseModel { export class CandidateModel extends BaseModel {
ObjectClass = CLASSES.CANDIDATE; ObjectClass = CLASSES.CANDIDATE;
...@@ -30,4 +31,16 @@ export class CandidateModel extends BaseModel { ...@@ -30,4 +31,16 @@ export class CandidateModel extends BaseModel {
CultureCriteriaAnswers: Array<string>; CultureCriteriaAnswers: Array<string>;
ProfileAssessmentAnswers: Array<string>; ProfileAssessmentAnswers: Array<string>;
DiversityAnswers: Array<string>; DiversityAnswers: Array<string>;
CandidateTemplates: Array<CandidateTemplateModel>;
AllTempletes: Array<{
Availability: string;
Description: string;
Disabled: boolean;
FullImageURI: string;
Name: string;
SortOrder: number;
Value: string;
ImgPath: string;
CanUse: boolean;
}>
} }
frontend/angular/src/app/my-career-web/models/summary-report.model.ts 0 → 100644
export class SummaryReportModel {
ColorClass: string;
PercentageValue: number;
Dots: { DotValue: string; DotClass: string }[];
Bars: {
Label: string;
RatingValue: number;
ProgressBarClass: string;
SubBars: {
BottomDetail: string;
Label: string;
LeftAnnotation: string;
Results: {
[key: string]: number;
}[];
ParsedResults: {
class: string;
value: number;
}[];
RightAnnotation: string;
TriangleStyleLeft: number;
}[];
}[];
}
frontend/angular/src/app/my-career-web/services/helper.service.ts
...@@ -28,15 +28,15 @@ export class HelperService { ...@@ -28,15 +28,15 @@ export class HelperService {
}); });
} }
circleGradient(value = 0, fillColor: '#f0f', emptyColor = '#EAECEE'): { backgroundImage: string, backgroundColor: string } { circleGradient(value = 0, completeColor= '#f0f', incompleteColor = '#EAECEE'): { backgroundImage: string, backgroundColor: string } {
const percentage = value * 3.6; const percentage = value * 3.6;
let grad; let grad;
if (percentage <= 180) { if (percentage <= 180) {
grad = `linear-gradient(${90 + percentage}deg, transparent 50%, ${emptyColor} 50%),linear-gradient(90deg, ${emptyColor} 50%, transparent 50%)`; grad = `linear-gradient(${90 + percentage}deg, transparent 50%, ${incompleteColor} 50%),linear-gradient(90deg, ${incompleteColor} 50%, transparent 50%)`;
} else { } else {
grad = `linear-gradient(${percentage - 90}deg, transparent 50%, ${fillColor} 50%),linear-gradient(90deg, ${emptyColor} 50%, transparent 50%)`; grad = `linear-gradient(${percentage - 90}deg, transparent 50%, ${completeColor} 50%),linear-gradient(90deg, ${incompleteColor} 50%, transparent 50%)`;
} }
return {backgroundImage: grad, backgroundColor: emptyColor}; return {backgroundImage: grad, backgroundColor: incompleteColor};
} }
} }
frontend/angular/src/app/utils/common.modules.import.ts
...@@ -9,7 +9,7 @@ import { InputTextareaModule } from 'primeng/inputtextarea'; ...@@ -9,7 +9,7 @@ import { InputTextareaModule } from 'primeng/inputtextarea';
import { import {
AccordionModule, AccordionModule,
ButtonModule, ButtonModule,
CalendarModule, CalendarModule, CarouselModule,
EditorModule, EditorModule,
FileUploadModule, FileUploadModule,
GrowlModule, GrowlModule,
...@@ -71,5 +71,6 @@ export const PrimeNGModules = [ ...@@ -71,5 +71,6 @@ export const PrimeNGModules = [
FileUploadModule, FileUploadModule,
TooltipModule, TooltipModule,
KeyFilterModule, KeyFilterModule,
AccordionModule AccordionModule,
CarouselModule
]; ];
frontend/angular/src/styles/my-career-styles/_styles.scss
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
@import "primeng/select-button"; @import "primeng/select-button";
@import "primeng/upload"; @import "primeng/upload";
@import "primeng/accordion"; @import "primeng/accordion";
@import "primeng/carousel";
} }
......
frontend/angular/src/styles/my-career-styles/primeng/_accordion.scss
...@@ -52,6 +52,8 @@ ...@@ -52,6 +52,8 @@
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 24px;
color: $textGrey; color: $textGrey;
min-width: 70px;
text-align: right;
} }
&-bar { &-bar {
...@@ -86,3 +88,64 @@ ...@@ -86,3 +88,64 @@
} }
} }
@media screen and (max-width: 1024px) {
.ui-accordion-header > a {
padding: 30px 10px !important;
.ui-accordion-toggle-icon {
bottom: 60px;
width: 25px;
height: 25px;
right: 20px;
}
p-header {
display: block;
.mc-tab-header {
&-text {
justify-content: center;
margin-bottom: 8px;
}
&-content {
display: flex;
align-self: center;
flex: 0 0 75%;
position: relative;
.header-percentage {
display: flex;
align-self: center;
&-value {
font-size: 18px;
text-align: left;
}
&-bar {
p-progressBar {
.ui-progressbar {
height: 16px;
&-value {
height: 16px;
}
}
}
}
}
}
}
}
}
&-content {
padding: 0;
}
}
frontend/angular/src/styles/my-career-styles/primeng/_button.scss
...@@ -9,6 +9,18 @@ ...@@ -9,6 +9,18 @@
&:hover { &:hover {
background-color: #1091bf !important; background-color: #1091bf !important;
} }
&.rounded-btn {
height: 50px;
width: 260px;
border-radius: 73px;
font-weight: 600;
&:hover {
background-color: #127BAD;
}
}
} }
&-google { &-google {
......
frontend/angular/src/styles/my-career-styles/primeng/_carousel.scss 0 → 100644
// Template picker
.template-picker {
&.ui-carousel {
background: transparent;
border: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
.ui-carousel-header {
background: transparent;
border: 0;
padding: 0 !important;
margin: 0;
position: fixed;
z-index: 100;
}
.ui-carousel-viewport {
width: 75%;
max-height: 90vh;
overflow: auto;
}
.ui-carousel-item {
border: 0;
background: transparent;
margin: 0 12px !important;
display: flex;
justify-content: center;
align-items: center;
}
.ui-carousel-button {
margin: 0 !important;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #12A8DE;
font-size: 24px;
color: #fff;
position: fixed;
top: calc(50% - 12px);
float: none;
&.ui-carousel-next-button {
right: 5%;
}
&.ui-carousel-prev-button {
left: 5%;
}
}
.ui-carousel-page-links {
display: 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