profile-tasks starting issue fixed

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">
-                    </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 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>
-                <div class="user-profile-section">
-                    <span>Career History</span>
-                    <span class="section-percentage">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>
+
+                    <div class="section-edit" *ngIf="careerProfile[task.key] === 100">
+                        <i class="fa fa-edit"></i> Edit
                     </div>
-                <div class="user-profile-section">
-                    <span>Diversity</span>
-                    <span class="section-percentage">0%</span>
+
                 </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) {