Skip to content

P
PERFORMA_REPLICA
Commit 2055e014 by Muhammad Usman
Options

profile-tasks starting issue fixed

parent 2b34f0d9
Showing with 71 additions and 21 deletions
frontend/angular/src/app/components/my-career-web/dashboard/profile-tasks/profile-tasks.component.html
......@@ -17,27 +17,22 @@
<div class="user-profile-completion">
<div class="user-profile-sections">
<div class="user-profile-section active">
<span>Personal Details</span>
<span class="section-percentage">{{careerProfile.CompletedPercentage || 0}}%</span>
<button pButton label="Get Started" routerLink="/my-career-web/dashboard/personal-details" class="ui-button-info section-start">
<div class="user-profile-section" *ngFor="let task of profileTasks;" [ngClass]="{completed: careerProfile[task.key] === 100, active: task.active}">
<span>{{task.label}}</span>
<div class="section-completed-mark" *ngIf="careerProfile[task.key] === 100">
<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>
</div>
<div class="user-profile-section">
<span>Work Strengths</span>
<span class="section-percentage">0%</span>
</div>
<div class="user-profile-section">
<span>Career Values</span>
<span class="section-percentage">0%</span>
</div>
<div class="user-profile-section">
<span>Career History</span>
<span class="section-percentage">0%</span>
</div>
<div class="user-profile-section">
<span>Diversity</span>
<span class="section-percentage">0%</span>
<div class="section-edit" *ngIf="careerProfile[task.key] === 100">
<i class="fa fa-edit"></i> Edit
</div>
</div>
</div>
</div>
......
frontend/angular/src/app/components/my-career-web/dashboard/profile-tasks/profile-tasks.component.scss
......@@ -90,19 +90,36 @@
position: absolute;
right: 4px;
top: 4px;
display: none;
}
.section-start {
display: block;
display: none;
width: 100%;
margin-top: 7px;
}
.section-edit {
color: $primaryColor;
cursor: pointer;
font-size: 14px;
font-family: $bodyFont;
font-weight: normal;
.fa-edit {
margin-left: 5px;
}
}
&.active {
border-color: #12A8DE;
font-weight: bold;
color: #58595B;
.section-start, .section-percentage {
display: block !important;
}
&:before {
background: #12A8DE;
}
......@@ -112,6 +129,35 @@
}
}
&.completed {
border-color: #1DBA3C;
font-weight: bold;
color: #58595B;
&:before {
background: #1DBA3C;
}
&:after {
background: linear-gradient(0, #1DBA3C -5%, #1DBA3C 100%);
}
.section-completed-mark {
width: 24px;
height: 24px;
position: absolute;
border: 1px solid #1DBA3C;
border-radius: 50%;
color: #1DBA3C;
display: flex;
align-items: center;
justify-content: center;
top: 12px;
right: 10px;
}
}
&:before {
content: '';
position: absolute;
......
frontend/angular/src/app/components/my-career-web/dashboard/profile-tasks/profile-tasks.component.ts
......@@ -17,6 +17,13 @@ export class ProfileTasksComponent extends BaseComponent {
avatarBorder = 'linear-gradient(90deg, transparent 50%, #EAECEE 50%), linear-gradient(90deg, #EAECEE 50%, transparent 50%)';
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/assessment/work-style', key: '', active: false},
{label: 'Career Values', link: '', key: '', active: false},
{label: 'Career History', link: '', key: '', active: false},
{label: 'Diversity', link: '', key: '', active: false}
];
constructor(
private ps: PersonalDetailsService,
......@@ -51,6 +58,8 @@ export class ProfileTasksComponent extends BaseComponent {
}
setProfileCompletion(): void {
const currentTask = this.profileTasks.find(t => this.careerProfile[t.key] !== 100);
currentTask.active = true;
// const percentage = (this.careerProfile.CompletedPercentage || 0) * 3.6;
// for (let i = 0; i <= percentage; i++) {
// if (percentage === 360) {
......
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