career builder tab icons added

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

@@ -25,29 +25,29 @@
             </div>
 
 
-            <div class="assessment-body-tabs mc-card career-builder">
+            <div class="assessment-body-tabs mc-card career-builder position-relative">
                 <p-tabView (onChange)="tabChanged($event)">
-                    <p-tabPanel header="1{{isMobileView ? '' : '. Templates'}}" [selected]="activeTab === 'templates'">
+                    <p-tabPanel header="1{{isMobileView ? '' : '. Templates'}}" [selected]="activeTab === 'templates'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.TEMPLATES ? 'completed' : ''">
                         <app-templates></app-templates>
                     </p-tabPanel>
-                    <p-tabPanel header="2{{isMobileView ? '' : '. Personal Data'}}" [selected]="activeTab === 'personal-data'">
+                    <p-tabPanel header="2{{isMobileView ? '' : '. Personal Data'}}" [selected]="activeTab === 'personal-data'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.PERSONAL_DATA ? 'completed' : ''">
                         <app-personal-details #personalDetailsComponent [asChildComponent]="true" (detailsSaved)="tabChanged({index: 2})">
                         </app-personal-details>
                     </p-tabPanel>
-                    <p-tabPanel header="3{{isMobileView ? '' : '. Work History'}}" [selected]="activeTab === 'work-history'">
+                    <p-tabPanel header="3{{isMobileView ? '' : '. Work History'}}" [selected]="activeTab === 'work-history'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.WORK_HISTORY ? 'completed' : ''">
                         <app-work-history #workHistoryComponent (workSaved)="tabChanged({index: 3})">
                         </app-work-history>
                     </p-tabPanel>
-                    <p-tabPanel header="4{{isMobileView ? '' : '. Education'}}" [selected]="activeTab === 'education'">
+                    <p-tabPanel header="4{{isMobileView ? '' : '. Education'}}" [selected]="activeTab === 'education'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.EDUCATION ? 'completed' : ''">
                         <app-education #educationComponent (educationSaved)="tabChanged({index: 4})"></app-education>
                     </p-tabPanel>
-                    <p-tabPanel header="5{{isMobileView ? '' : '. Skills'}}" [selected]="activeTab === 'skills'">
+                    <p-tabPanel header="5{{isMobileView ? '' : '. Skills'}}" [selected]="activeTab === 'skills'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.SKILLS ? 'completed' : ''">
                         <app-skills #skillsComponent (skillsSaved)="tabChanged({index: 5})"></app-skills>
                     </p-tabPanel>
-                    <p-tabPanel header="6{{isMobileView ? '' : '. References'}}" [selected]="activeTab === 'references'">
+                    <p-tabPanel header="6{{isMobileView ? '' : '. References'}}" [selected]="activeTab === 'references'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.REFERENCES ? 'completed' : ''">
                         <app-references #referencesComponent (refereeSaved)="tabChanged({index: 6})"></app-references>
                     </p-tabPanel>
-                    <p-tabPanel header="7{{isMobileView ? '' : '. Publish'}}" [selected]="activeTab === 'publish'">
+                    <p-tabPanel header="7{{isMobileView ? '' : '. Publish'}}" [selected]="activeTab === 'publish'" rightIcon="fa fa-check" [headerStyleClass]="careerProfile?.ProfileBulderTabCompletion?.PUBLISH ? 'completed' : ''">
                         <app-publish></app-publish>
                     </p-tabPanel>
                 </p-tabView>

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

@@ -7,6 +7,9 @@ import { WorkHistoryComponent } from './work-history/work-history.component';
 import { EducationComponent } from './education/education.component';
 import { SkillsComponent } from './skills/skills.component';
 import { ReferencesComponent } from './references/references.component';
+import { CareerProfileModel } from '../../models/career-profile.model';
+import { PersonalDetailsService } from '../../services/personal-details.service';
+import { UtilsService } from '../../../oneit/services/utils.service';
 
 @Component({
     selector: 'app-career-history',
@@ -16,6 +19,7 @@ import { ReferencesComponent } from './references/references.component';
 export class CareerHistoryComponent extends BaseComponent implements OnInit {
 
     tabs = ['templates', 'personal-data', 'work-history', 'education', 'skills', 'references', 'publish'];
+    careerProfile: CareerProfileModel;
     activeTab = '';
     isExiting = false;
 
@@ -27,6 +31,8 @@ export class CareerHistoryComponent extends BaseComponent implements OnInit {
 
     constructor(
         private router: Router,
+        private personalDetailsService: PersonalDetailsService,
+        private utilsService: UtilsService,
         private activatedRoute: ActivatedRoute
     ) {
         super();
@@ -39,6 +45,20 @@ export class CareerHistoryComponent extends BaseComponent implements OnInit {
                 if (params.screen) {
                     this.activeTab = params.screen;
                 }
+            });
+        this.getCareerProfile();
+    }
+
+    getCareerProfile(): void {
+        this.isLoading = true;
+        this.personalDetailsService.getCareerProfile()
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(response => {
+                this.careerProfile = response;
+                this.isLoading = false;
+            }, err => {
+                this.isLoading = false;
+                this.utilsService.handleError(err);
             })
     }
 

frontend/angular/src/app/my-career-web/dashboard/summary-report/summary-report.component.scss

@@ -167,7 +167,6 @@
 
 @media screen and (max-width: 1024px) {
 
-
     .report-wrapper {
         .summary-report {
             .report-bars {

frontend/angular/src/app/my-career-web/intro-letters/intro-letters/intro-letters.component.scss

@@ -22,3 +22,13 @@
         }
     }
 }
+
+
+@media screen and (max-width: 1024px) {
+
+    .mc-btn-primary {
+        min-width: 100% !important;
+        margin-top: 20px;
+    }
+
+}

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

@@ -26,4 +26,13 @@ export class CareerProfileModel extends BaseModel {
     NoReference: boolean;
     PublishProfile: boolean;
     AssumedUser: boolean;
+    ProfileBulderTabCompletion: {
+        EDUCATION: boolean;
+        PERSONAL_DATA: boolean;
+        PUBLISH: boolean;
+        REFERENCES: boolean;
+        SKILLS: boolean;
+        TEMPLATES: boolean;
+        WORK_HISTORY: boolean;
+    };
 }

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

@@ -6,3 +6,4 @@ $primaryColor: #12A8DE;
 $darkColor: #58595B;
 $textGrey: #7d7f83;
 $greyBorder: #e5e8eb;
+$success: #1DBA3C;

frontend/angular/src/styles/my-career-styles/primeng/_tab-view.scss

@@ -9,6 +9,24 @@
             flex: 1;
             display: flex;
             justify-content: center;
+
+            .ui-tabview-right-icon {
+                display: none;
+            }
+
+            &.completed {
+
+
+                .ui-tabview-title {
+                    color: $success;
+                    font-weight: 600;
+                }
+
+                .ui-tabview-right-icon {
+                    display: initial;
+                    color: $success;
+                }
+            }
         }
     }
 }