UI issues resloved for work-style & perferences

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

@@ -6,6 +6,7 @@ import { takeUntil } from 'rxjs/operators';
 import * as moment from 'moment';
 import { DiversityProfileQuestionModel } from '../../models/diversity-profile-question.model';
 import { UtilsService } from '../../../oneit/services/utils.service';
+import { ToasterService } from '../../services/toaster.service';
 
 @Component({
     selector: 'app-diversity-profile',
@@ -24,6 +25,7 @@ export class DiversityProfileComponent extends BaseComponent implements OnInit {
     constructor(
         private assessmentService: AssessmentService,
         private utilsService: UtilsService,
+        private toasterService: ToasterService,
         private router: Router
     ) {
         super();
@@ -73,6 +75,7 @@ export class DiversityProfileComponent extends BaseComponent implements OnInit {
             .pipe(takeUntil(this.componentInView))
             .subscribe(() => {
                 this.isSaving = false;
+                this.toasterService.success('Preferences updated!');
                 this.router.navigate(['/my-career-web/dashboard/home']);
             }, err => {
                 this.isSaving = false;

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

@@ -7,6 +7,7 @@ import { AssessmentService } from '../../services/assessment.service';
 import { Router } from '@angular/router';
 import { QuestionModel } from '../../models/question.model';
 import { UtilsService } from '../../../oneit/services/utils.service';
+import { ToasterService } from '../../services/toaster.service';
 
 @Component({
     selector: 'app-work-preference',
@@ -18,6 +19,7 @@ export class WorkPreferenceComponent extends BaseComponent implements OnInit, On
 
     workPreferenceQuestion = new WorkPreferenceQuestionModel();
     assocs = ['CultureElement', 'CultureElement.Questions'];
+    wasUpdated = false;
     autoSaveInterval;
     autoSavedOn;
     autoSaveLabel = 'a few seconds ago';
@@ -25,6 +27,7 @@ export class WorkPreferenceComponent extends BaseComponent implements OnInit, On
     constructor(
         private assessmentService: AssessmentService,
         private utilService: UtilsService,
+        private toasterService: ToasterService,
         private router: Router
     ) {
         super();
@@ -43,6 +46,7 @@ export class WorkPreferenceComponent extends BaseComponent implements OnInit, On
                 this.isLoading = false;
                 this.autoSavedOn = new Date();
                 this.autoSave();
+                this.wasUpdated = true;
                 if (response.length > 0) {
                     this.workPreferenceQuestion = response[0];
                 } else {
@@ -67,6 +71,9 @@ export class WorkPreferenceComponent extends BaseComponent implements OnInit, On
     }
 
     exit(): void {
+        if (this.wasUpdated) {
+            this.toasterService.success('Preferences updated!');
+        }
         this.router.navigate(['/my-career-web/dashboard/home']);
     }
 

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

@@ -36,16 +36,23 @@
 
                 <div class="question-tag">{{workStyleQuestion.Question?.Description}}</div>
 
-                <div class="answer-wrapper">
+                <div class="answer-wrapper" *ngIf="!isMobileView">
                     <span class="extreme-label-left">{{workStyleQuestion.LeftScaleText}}</span>
-
                     <div class="answer-options">
                         <span class="option-value" *ngFor="let scale of answerScales;" (click)="submitAnswer(scale)">{{scale}}</span>
                     </div>
-
-
                     <span class="extreme-label-right">{{workStyleQuestion.RightScaleText}}</span>
                 </div>
+
+                <div class="answer-wrapper" *ngIf="isMobileView">
+                    <div class="answer-options">
+                        <span class="option-value" *ngFor="let scale of answerScales;" (click)="submitAnswer(scale)">{{scale}}</span>
+                    </div>
+                    <div class="answer-option-labels">
+                        <span class="extreme-label-left">{{workStyleQuestion.LeftScaleText}}</span>
+                        <span class="extreme-label-right">{{workStyleQuestion.RightScaleText}}</span>
+                    </div>
+                </div>
             </div>
         </div>
     </div>

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

@@ -125,6 +125,14 @@
                         font-size: 18px;
                     }
 
+                    .extreme-label-left {
+                        margin-right: 10px;
+                    }
+
+                    .extreme-label-right {
+                        margin-left: 10px;
+                    }
+
                     .answer-options {
                         display: flex;
                         align-items: center;
@@ -227,20 +235,18 @@
 
             .answer-wrapper {
                 position: relative;
+                display: block !important;
 
-                .extreme-label-right, .extreme-label-left {
-                    font-size: 12px !important;
-                    font-family: $bodyFont;
-                    position: absolute;
-                    bottom: -24px;
-                }
-
-                .extreme-label-right {
-                    right: 0;
-                }
+                .answer-option-labels {
+                    display: flex;
+                    justify-content: space-between;
 
-                .extreme-label-left {
-                    left: 0;
+                    .extreme-label-right, .extreme-label-left {
+                        font-size: 12px !important;
+                        font-family: $bodyFont;
+                        flex: 0.8;
+                        max-width: 140px;
+                    }
                 }
 
                 .answer-options {

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

@@ -6,6 +6,7 @@ import { WorkStyleQuestionModel } from '../../models/work-style-question.model';
 import { Router } from '@angular/router';
 import * as moment from 'moment';
 import { UtilsService } from '../../../oneit/services/utils.service';
+import { ToasterService } from '../../services/toaster.service';
 
 @Component({
     selector: 'app-work-style',
@@ -20,10 +21,12 @@ export class WorkStyleComponent extends BaseComponent implements OnInit, OnDestr
     autoSaveInterval;
     autoSavedOn;
     autoSaveLabel = 'a few seconds ago';
+    wasUpdated = false;
 
     constructor(
         private assessmentService: AssessmentService,
         private utilService: UtilsService,
+        private toasterService: ToasterService,
         private router: Router
     ) {
         super();
@@ -48,8 +51,8 @@ export class WorkStyleComponent extends BaseComponent implements OnInit, OnDestr
                 this.setAnswerScales();
             }, err => {
                 this.isLoading = false;
+                this.utilService.handleError(err);
                 this.exit();
-                // this.hs.handleHttpError(err);
             });
     }
 
@@ -74,6 +77,7 @@ export class WorkStyleComponent extends BaseComponent implements OnInit, OnDestr
                 this.isLoading = false;
                 this.autoSavedOn = new Date();
                 this.autoSave();
+                this.wasUpdated = true;
                 if (response.NextQuestion) {
                     this.workStyleQuestion = response.NextQuestion;
                     this.setAnswerScales();
@@ -87,6 +91,9 @@ export class WorkStyleComponent extends BaseComponent implements OnInit, OnDestr
     }
 
     exit(): void {
+        if (this.wasUpdated) {
+            this.toasterService.success('Profile updated!');
+        }
         this.router.navigate(['/my-career-web/dashboard/home']);
     }