work style api integrated & completed

frontend/angular/src/app/components/my-career-web/assessment/work-style/work-style.component.html

@@ -7,12 +7,12 @@
             </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>
+        <p-progressBar [value]="workStyleQuestion.Percentage"></p-progressBar>
 
         <div class="assessment-body container">
 
@@ -23,33 +23,28 @@
             </div>
 
             <div class="assessment-body-description">
-                Using the scale given, indicate how important to you are the following aspects in your work life.
+                {{workStyleQuestion.IntroductoryText}}
             </div>
 
 
             <div class="assessment-body-question-wrapper mc-card">
+                <app-overlay [isActive]="isLoading"></app-overlay>
 
-                <div class="question-title">How important to you is the following in your work life?</div>
-                <div class="question-completed">0%</div>
+                <div class="question-title">{{workStyleQuestion.Title}}</div>
+                <div class="question-completed">{{workStyleQuestion.Percentage}}%</div>
 
 
-                <div class="question-tag">FLEXIBILITY AT WORK</div>
+                <div class="question-tag">{{workStyleQuestion.Question?.Description}}</div>
 
                 <div class="answer-wrapper">
-                    <span class="extreme-label-left">Not very important</span>
+                    <span class="extreme-label-left">{{workStyleQuestion.LeftScaleText}}</span>
 
                     <div class="answer-options">
-                        <span class="option-value">1</span>
-                        <span class="option-value">2</span>
-                        <span class="option-value">3</span>
-                        <span class="option-value">4</span>
-                        <span class="option-value">5</span>
-                        <span class="option-value">6</span>
-                        <span class="option-value">7</span>
+                        <span class="option-value" *ngFor="let scale of answerScales;" (click)="submitAnswer(scale)">{{scale}}</span>
                     </div>
 
 
-                    <span class="extreme-label-right">Very important</span>
+                    <span class="extreme-label-right">{{workStyleQuestion.RightScaleText}}</span>
                 </div>
             </div>
         </div>

frontend/angular/src/app/components/my-career-web/assessment/work-style/work-style.component.scss

@@ -104,6 +104,7 @@
                         background: $primaryColor;
                         padding: 12px;
                         margin-bottom: 56px;
+                        text-transform: uppercase;
                     }
 
                     &-completed {
@@ -217,6 +218,7 @@
 
             .question-tag {
                 margin-bottom: 24px !important;
+                text-transform: uppercase;
             }
 
             .answer-wrapper {

frontend/angular/src/app/components/my-career-web/assessment/work-style/work-style.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { BaseComponent } from '../../base/base.component';
 import { AssessmentService } from '../../services/assessment.service';
 import { takeUntil } from 'rxjs/operators';
+import { HelperService } from '../../services/helper.service';
+import { WorkStyleQuestionModel } from '../../models/work-style-question.model';
+import { Router } from '@angular/router';
+import * as moment from 'moment';
 
 @Component({
-  selector: 'app-work-style',
-  templateUrl: './work-style.component.html',
-  styleUrls: ['./work-style.component.scss']
+    selector: 'app-work-style',
+    templateUrl: './work-style.component.html',
+    styleUrls: ['./work-style.component.scss']
 })
-export class WorkStyleComponent extends BaseComponent implements OnInit {
+export class WorkStyleComponent extends BaseComponent implements OnInit, OnDestroy {
 
-  constructor(
-      private as: AssessmentService
-  ) {
-      super();
-  }
+    workStyleQuestion = new WorkStyleQuestionModel();
+    assocs = ['Question'];
+    answerScales = [];
+    autoSaveInterval;
+    autoSavedOn;
+    autoSaveLabel = '';
 
-  ngOnInit() {
-      //
-  }
+    constructor(
+        private as: AssessmentService,
+        private hs: HelperService,
+        private r: Router
+    ) {
+        super();
+    }
+
+    ngOnInit() {
+        this.initiateWorkStyle();
+        this.setAutoSaveInterval();
+    }
+
+    initiateWorkStyle(): void {
+        this.isLoading = true;
+        this.as.getWorkStyle(this.assocs)
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(response => {
+                this.isLoading = false;
+                this.autoSavedOn = new Date();
+                if (response.length > 0) {
+                    this.workStyleQuestion = response[0];
+                }
+                this.setAnswerScales();
+            }, err => {
+                this.isLoading = false;
+                this.hs.handleHttpError(err);
+            });
+    }
+
+    setAnswerScales(): void {
+        this.answerScales = [];
+        for (let i = 1; i <= (this.workStyleQuestion.Scalar || 1); i++) {
+            this.answerScales.push(i);
+        }
+    }
+
+    submitAnswer(scale): void {
+        const formData = {
+            Question: this.workStyleQuestion.Question.ObjectID,
+            Answer: scale,
+            Continue: true
+        };
+        this.isLoading = true;
+        this.as.saveWorkStyle(formData)
+            .subscribe(response => {
+                this.isLoading = false;
+                this.autoSavedOn = new Date();
+                this.autoSave();
+                if (response.NextQuestion) {
+                    this.workStyleQuestion = response.NextQuestion;
+                    this.setAnswerScales();
+                }
+            }, 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();
+    }
+
+    ngOnDestroy(): void {
+        super.ngOnDestroy();
+        if (this.autoSaveInterval) {
+            clearInterval(this.autoSaveInterval);
+        }
+    }
 
 }

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

@@ -14,7 +14,9 @@ export const CLASSES = {
     CANDIDATE: 'performa.orm.Candidate',
     USER: 'oneit.security.SecUser',
     JOB: 'performa.orm.Job',
-    CAREER_PROFILE: 'performa.orm.CareerProfile'
+    CAREER_PROFILE: 'performa.orm.CareerProfile',
+    WORK_STYLE_QUESTION: 'performa.orm.WorkStyleQuestionNP',
+    QUESTION: 'performa.orm.Question'
 };
 
 export const SERVICES = {

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

@@ -19,7 +19,7 @@ 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/assessment/work-style', key: '', active: false},
+        {label: 'Work Strengths', link: '/my-career-web/assessments/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}

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

+import { BaseModel } from './base.model';
+import { CLASSES } from '../config/constants';
+
+export class QuestionModel extends BaseModel {
+    Description: string;
+    ObjectClass = CLASSES.QUESTION
+}

frontend/angular/src/app/components/my-career-web/models/work-style-question.model.ts

+import { BaseModel } from './base.model';
+import { CLASSES } from '../config/constants';
+import { QuestionModel } from './question.model';
+
+export class WorkStyleQuestionModel extends BaseModel {
+    ObjectClass = CLASSES.WORK_STYLE_QUESTION;
+    QuestionNo: string;
+    Percentage: number;
+    IntroductoryText: string;
+    Title: null;
+    LeftScaleText: string;
+    RightScaleText: string;
+    Scalar: null;
+    Question: QuestionModel;
+}

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

 import { Injectable } from '@angular/core';
-import { ApiService } from '../../../oneit/services/api.service';
 import { Observable } from 'rxjs';
 import { SearchService } from '../../../oneit/services/search.service';
+import { UtilsService } from '../../../oneit/services/utils.service';
 
 @Injectable()
 export class AssessmentService {
 
   constructor(
-      private as: ApiService,
+      private us: UtilsService,
       private ss: SearchService
   ) { }
 
-  getWorkStyles(): Observable<any> {
-      return this.ss.getObjects('WorkStyle', 'ALL', '', [], null, null, null, null)
+  getWorkStyle(assocs = []): Observable<any> {
+      return this.ss.getObjects('WorkStyle', 'All', '', assocs, null, null, null, null)
+          .map(
+              data => {
+                  return this.us.convertResponseToObjects(data, assocs);
+              }
+          )
+  }
+
+  saveWorkStyle(params): Observable<any> {
+      return this.us.processObjects('SaveWorkStyle', params);
   }