dashboard view fixes

frontend/angular/src/app/components/my-career-web/assessment/diversity-profile/diversity-profile.component.html

@@ -7,9 +7,9 @@
             </div>
 
             <div class="header-actions">
-                <span class="auto-saved">Auto saved 1 min ago</span>
+                <span class="auto-saved" *ngIf="autoSaveLabel">Auto saved {{autoSaveLabel}}</span>
 
-                <button pButton label="Save & exit" class="ui-button-info"></button>
+                <button pButton label="Save & exit" (click)="exit()" class="ui-button-info"></button>
             </div>
         </div>
         <p-progressBar [value]="20"></p-progressBar>
@@ -28,54 +28,24 @@
 
 
             <div class="assessment-body-question-wrapper mc-card">
+                <app-overlay [isActive]="isLoading"></app-overlay>
 
-                <div class="question-wrapper">
-                    <div class="question-title">How important to you is the following in your work life?</div>
+                <div class="question-wrapper" *ngFor="let diversity of diversityProfiles;">
+                    <div class="question-title">{{diversity.QuestionText}}?</div>
 
-                    <div class="answer-options">
-                        <div class="answer-option">
-                            <p-radioButton label="I am a very practical person"></p-radioButton>
-                        </div>
-                        <div class="answer-option">
-                            <p-radioButton label="I am a somewhat practical person"></p-radioButton>
-                        </div>
-                        <div class="answer-option">
-                            <p-radioButton label="I am not generally idealistic"></p-radioButton>
+                    <div class="answer-options" *ngIf="!diversity.MultipleAnswers">
+                        <div class="answer-option" *ngFor="let answer of diversity.Answers;">
+                            <p-radioButton [label]="answer.Answer"></p-radioButton>
                         </div>
                     </div>
-                </div>
 
-                <div class="question-wrapper">
-                    <div class="question-title">How important to you is the following in your work life?</div>
-
-                    <div class="answer-options">
-                        <div class="answer-option">
-                            <p-radioButton label="I am a very practical person"></p-radioButton>
-                        </div>
-                        <div class="answer-option">
-                            <p-radioButton label="I am a somewhat practical person"></p-radioButton>
-                        </div>
-                        <div class="answer-option">
-                            <p-radioButton label="I am not generally idealistic"></p-radioButton>
+                    <div class="answer-options" *ngIf="diversity.MultipleAnswers">
+                        <div class="answer-option" *ngFor="let answer of diversity.Answers;">
+                            <p-checkbox [label]="answer.Answer" [binary]="true" [(ngModel)]="answer.IsSelected"></p-checkbox>
                         </div>
                     </div>
                 </div>
 
-                <div class="question-wrapper">
-                    <div class="question-title">How important to you is the following in your work life?</div>
-
-                    <div class="answer-options">
-                        <div class="answer-option">
-                            <p-radioButton label="I am a very practical person"></p-radioButton>
-                        </div>
-                        <div class="answer-option">
-                            <p-radioButton label="I am a somewhat practical person"></p-radioButton>
-                        </div>
-                        <div class="answer-option">
-                            <p-radioButton label="I am not generally idealistic"></p-radioButton>
-                        </div>
-                    </div>
-                </div>
             </div>
         </div>
     </div>

frontend/angular/src/app/components/my-career-web/assessment/diversity-profile/diversity-profile.component.scss

@@ -101,7 +101,7 @@
                     .answer-option {
                         margin-bottom: 10px;
 
-                        p-radioButton {
+                        p-radioButton, p-checkbox {
                             color: $darkColor;
                             font-family: $bodyFont;
                             cursor: pointer;

frontend/angular/src/app/components/my-career-web/assessment/diversity-profile/diversity-profile.component.ts

 import { Component, OnInit } from '@angular/core';
 import { BaseComponent } from '../../base/base.component';
+import { AssessmentService } from '../../services/assessment.service';
+import { HelperService } from '../../services/helper.service';
+import { Router } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
+import * as moment from 'moment';
+import { DiversityProfileQuestionModel } from '../../models/diversity-profile-question.model';
 
 @Component({
-  selector: 'app-diversity-profile',
-  templateUrl: './diversity-profile.component.html',
-  styleUrls: ['./diversity-profile.component.scss']
+    selector: 'app-diversity-profile',
+    templateUrl: './diversity-profile.component.html',
+    styleUrls: ['./diversity-profile.component.scss']
 })
 export class DiversityProfileComponent extends BaseComponent implements OnInit {
 
-  constructor() {
-      super();
-  }
+    diversityProfiles: DiversityProfileQuestionModel[] = [];
+    assocs = ['Answers'];
+    autoSaveInterval;
+    autoSavedOn;
+    autoSaveLabel = '';
 
-  ngOnInit() {
-  }
+    constructor(
+        private as: AssessmentService,
+        private hs: HelperService,
+        private r: Router
+    ) {
+        super();
+    }
+
+    ngOnInit() {
+        this.initiateDiversityProfile();
+        this.setAutoSaveInterval();
+    }
+
+    initiateDiversityProfile(): void {
+        this.isLoading = true;
+        this.as.getDiversityProfile(this.assocs)
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(response => {
+                this.isLoading = false;
+                this.autoSavedOn = new Date();
+                this.diversityProfiles = response;
+                console.log(this.diversityProfiles);
+            }, err => {
+                this.isLoading = false;
+                this.hs.handleHttpError(err);
+            });
+    }
+
+    exit(): void {
+        this.r.navigate(['/my-career-web/dashboard/home']);
+    }
+
+    setAutoSaveInterval(): void {
+        if (!this.autoSaveInterval) {
+            setInterval(() => {
+                this.autoSave();
+            }, 60000);
+        }
+    }
+
+    autoSave(): void {
+        this.autoSaveLabel = moment(this.autoSavedOn).fromNow();
+    }
 
 }

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

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { CareerHistoryComponent } from './career-history/career-history.component';
-import { PersonalDataComponent } from './career-history/personal-data/personal-data.component';
 
 const routes: Routes = [
     {
-        path: '',
-        component: CareerHistoryComponent,
-        children: [
-            {
-                path: 'personal-data',
-                component: PersonalDataComponent
-            }
-        ]
+        path: ':screen',
+        component: CareerHistoryComponent
     }
 ];
 

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

@@ -29,22 +29,22 @@
 
             <div class="assessment-body-tabs mc-card career-builder">
                 <p-tabView>
-                    <p-tabPanel header="1{{isMobileView ? '' : '. Personal Data'}}">
+                    <p-tabPanel header="1{{isMobileView ? '' : '. Personal Data'}}" [selected]="activeTab === 'personal-data'">
                         <app-personal-data></app-personal-data>
                     </p-tabPanel>
-                    <p-tabPanel header="2{{isMobileView ? '' : '. Work History'}}">
+                    <p-tabPanel header="2{{isMobileView ? '' : '. Work History'}}" [selected]="activeTab === 'work-history'">
                         <app-work-history></app-work-history>
                     </p-tabPanel>
-                    <p-tabPanel header="3{{isMobileView ? '' : '. Education'}}">
+                    <p-tabPanel header="3{{isMobileView ? '' : '. Education'}}" [selected]="activeTab === 'education'">
                         <app-education></app-education>
                     </p-tabPanel>
-                    <p-tabPanel header="4{{isMobileView ? '' : '. Skills'}}">
+                    <p-tabPanel header="4{{isMobileView ? '' : '. Skills'}}" [selected]="activeTab === 'skills'">
                         <app-skills></app-skills>
                     </p-tabPanel>
-                    <p-tabPanel header="5{{isMobileView ? '' : '. References'}}">
+                    <p-tabPanel header="5{{isMobileView ? '' : '. References'}}" [selected]="activeTab === 'references'">
                         <app-references></app-references>
                     </p-tabPanel>
-                    <p-tabPanel header="6{{isMobileView ? '' : '. Templates'}}">
+                    <p-tabPanel header="6{{isMobileView ? '' : '. Templates'}}" [selected]="activeTab === 'templates'">
                         <app-templates></app-templates>
                     </p-tabPanel>
                 </p-tabView>

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

 import { Component, OnInit } from '@angular/core';
 import { BaseComponent } from '../../base/base.component';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'app-career-history',
@@ -9,17 +10,27 @@ import { Router } from '@angular/router';
 })
 export class CareerHistoryComponent extends BaseComponent implements OnInit {
 
+    activeTab = '';
+
     constructor(
-        private r: Router
+        private r: Router,
+        private ar: ActivatedRoute
     ) {
         super();
     }
 
-    exit(): void {
-        this.r.navigate(['/my-career-web/dashboard/home']);
+    ngOnInit() {
+        this.ar.params
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(params => {
+                if (params.screen) {
+                    this.activeTab = params.screen;
+                }
+            })
     }
 
-    ngOnInit() {
+    exit(): void {
+        this.r.navigate(['/my-career-web/dashboard/home']);
     }
 
 }

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

-<p>
-  templates works!
-</p>
+<h4 class="tab-heading">Select the design template for your Career Profile</h4>

frontend/angular/src/app/components/my-career-web/config/constants.ts

@@ -17,6 +17,8 @@ export const CLASSES = {
     CAREER_PROFILE: 'performa.orm.CareerProfile',
     WORK_STYLE_QUESTION: 'performa.orm.WorkStyleQuestionNP',
     WORK_PREFERENCE_QUESTION: 'performa.orm.WorkPreferencesQuestionNP',
+    DIVERSITY_QUESTION: 'performa.orm.DiversityQuestion',
+    DIVERSITY_ANSWER: 'performa.orm.DiversityAnswer',
     QUESTION: 'performa.orm.Question'
 };
 

frontend/angular/src/app/components/my-career-web/dashboard/personal-details/personal-details.component.ts

@@ -7,6 +7,7 @@ import { CareerProfileModel } from '../../models/career-profile.model';
 import { HelperService } from '../../services/helper.service';
 import { PersonalDetailsService } from '../../services/personal-details.service';
 import { ToasterService } from '../../services/toaster.service';
+import { Router } from '@angular/router';
 
 @Component({
     selector: 'app-personal-details',
@@ -31,6 +32,7 @@ export class PersonalDetailsComponent extends BaseComponent implements OnInit {
         private ts: ToasterService,
         private hs: HelperService,
         private aps: AppService,
+        private r: Router
     ) {
         super();
     }
@@ -111,6 +113,7 @@ export class PersonalDetailsComponent extends BaseComponent implements OnInit {
                 this.hs.oneItHttpResponse(res);
                 this.ps.careerProfileUpdated = this.careerProfile;
                 this.ts.success('Profile updated.');
+                this.r.navigate(['/my-career-web/dashboard/home']);
             }, err => {
                 this.hs.handleHttpError(err);
                 this.isSaving = false;

frontend/angular/src/app/components/my-career-web/dashboard/profile-tasks/profile-tasks.component.html

@@ -29,7 +29,7 @@
                     <button pButton label="Get Started" [routerLink]="task.link" class="ui-button-info section-start">
                     </button>
 
-                    <div class="section-edit" [routerLink]="task.link" *ngIf="careerProfile[task.key] === 100">
+                    <div class="section-edit" [routerLink]="task.link" *ngIf="careerProfile[task.key] === 100" [ngClass]="{disabled: careerProfile[task.allowEditField] === false}">
                         <i class="fa fa-edit"></i> Edit
                     </div>
 

frontend/angular/src/app/components/my-career-web/dashboard/profile-tasks/profile-tasks.component.scss

@@ -105,10 +105,16 @@
                         font-size: 14px;
                         font-family: $bodyFont;
                         font-weight: normal;
+                        width: 50px;
 
                         .fa-edit {
                             margin-left: 5px;
                         }
+
+                        &.disabled {
+                            color: #688894;
+                            pointer-events: none;
+                        }
                     }
 
                     &.active {

frontend/angular/src/app/components/my-career-web/dashboard/profile-tasks/profile-tasks.component.ts

@@ -19,8 +19,8 @@ export class ProfileTasksComponent extends BaseComponent {
     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/assessments/work-style', key: 'CompletedPercentageWS', active: false},
-        {label: 'Career Values', link: '/my-career-web/assessments/work-preference', key: 'CompletedPercentageWP', active: false},
+        {label: 'Work Strengths', link: '/my-career-web/assessments/work-style', key: 'CompletedPercentageWS', active: false, allowEditField: 'AllowResubmitWS'},
+        {label: 'Career Values', link: '/my-career-web/assessments/work-preference', key: 'CompletedPercentageWP', active: false, allowEditField: 'AllowResubmitWP'},
         {label: 'Career History', link: '/my-career-web/work-history/personal-data', key: '', active: false},
         {label: 'Diversity', link: '', key: '', active: false}
     ];
@@ -61,6 +61,7 @@ export class ProfileTasksComponent extends BaseComponent {
         this.profileTasks.forEach(t => t.active = false);
         const currentTask = this.profileTasks.find(t => this.careerProfile[t.key] !== 100);
         currentTask.active = true;
+        console.log(this.careerProfile);
         // const percentage =  (this.careerProfile.CompletedPercentage || 0) * 3.6;
         // for (let i = 0; i <= percentage; i++) {
         //     if (percentage === 360) {

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

+import { CLASSES } from '../config/constants';
+import { BaseModel } from './base.model';
+
+export class DiversityProfileQuestionModel extends BaseModel {
+    ObjectClass = CLASSES.DIVERSITY_QUESTION;
+    Code: string;
+    QuestionText: string;
+    MultipleAnswers: boolean;
+    Answers: DiversityAnswerModel[];
+}
+
+class DiversityAnswerModel extends BaseModel {
+    ObjectClass = CLASSES.DIVERSITY_ANSWER;
+    Answer: string;
+    IsSelected: boolean;
+}

frontend/angular/src/app/components/my-career-web/services/assessment.service.ts

@@ -29,6 +29,15 @@ export class AssessmentService {
           )
   }
 
+    getDiversityProfile(assocs = []): Observable<any> {
+        return this.ss.getObjects('DiversityProfile', 'All', '', assocs, null, null, null, null)
+            .map(
+                data => {
+                    return this.us.convertResponseToObjects(data, assocs);
+                }
+            )
+    }
+
   saveWorkStyle(params): Observable<any> {
       return this.us.processObjects('SaveWorkStyle', params);
   }

frontend/angular/src/styles/my-career-styles/primeng/_autocomplete.scss

@@ -26,5 +26,11 @@ p-autoComplete {
                 border: 2px solid #12A8DE !important;
             }
         }
+
+        &-panel {
+            .ui-autocomplete-list-item {
+                transition: .2s !important;
+            }
+        }
     }
 }