UI button responsiveness issue

frontend/angular/src/app/my-career-web/assessment/assessment.module.ts

@@ -6,6 +6,7 @@ import { WorkStyleComponent } from './work-style/work-style.component';
 import { WorkPreferenceComponent } from './work-preference/work-preference.component';
 import { DiversityProfileComponent } from './diversity-profile/diversity-profile.component';
 import { McSharedModule } from '../mc-shared/mc-shared.module';
+import { SummaryReportComponent } from './summary-report/summary-report.component';
 
 @NgModule({
     imports: [
@@ -16,7 +17,8 @@ import { McSharedModule } from '../mc-shared/mc-shared.module';
     declarations: [
         WorkStyleComponent,
         WorkPreferenceComponent,
-        DiversityProfileComponent
+        DiversityProfileComponent,
+        SummaryReportComponent
     ]
 })
 export class AssessmentModule {

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

@@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { WorkStyleComponent } from './work-style/work-style.component';
 import { WorkPreferenceComponent } from './work-preference/work-preference.component';
 import { DiversityProfileComponent } from './diversity-profile/diversity-profile.component';
+import { SummaryReportComponent } from './summary-report/summary-report.component';
 
 const routes: Routes = [
     {
@@ -17,6 +18,11 @@ const routes: Routes = [
         path: 'diversity-profile',
         component: DiversityProfileComponent
     },
+
+    {
+        path: 'summary-report',
+        component: SummaryReportComponent
+    }
 ];
 
 @NgModule({

frontend/angular/src/app/my-career-web/assessment/summary-report/summary-report.component.html

+<div class="summary-report container position-relative">
+
+    <app-overlay [isActive]="isLoading"></app-overlay>
+
+    <div class="row">
+
+        <div class="col-md-6 report-chart">
+
+            <div class="report-title">ROLE FIT</div>
+            <div class="report-circle" [ngStyle]="{backgroundImage: reportChart.role.backgroundImage, backgroundColor: reportChart.role.backgroundColor}">
+                <div class="report-circle-value">
+                    54%
+                </div>
+            </div>
+            <div class="report-legend">
+
+            </div>
+
+        </div>
+
+        <div class="col-md-6 report-chart">
+
+            <div class="report-title">CULTURE FIT</div>
+            <div class="report-circle">
+                <div class="report-circle-value">
+                    65%
+                </div>
+            </div>
+            <div class="report-legend">
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="row">
+        <div class="col-md-12" style="padding: 0;">
+
+            <p-accordion>
+
+                <p-accordionTab>
+                    <p-header>
+                        <div class="mc-tab-header-text">
+                            Career Drives
+                        </div>
+
+                        <div class="mc-tab-header-content">
+
+                            <div class="header-percentage-value">55%</div>
+
+                            <div class="header-percentage-bar">
+                                <p-progressBar [value]="50"></p-progressBar>
+                            </div>
+
+                            <div class="mc-accordion-icon" (click)="showBody = !showBody">
+                                <i class="pi" [ngClass]="showBody ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
+                            </div>
+                        </div>
+                    </p-header>
+                </p-accordionTab>
+
+            </p-accordion>
+
+        </div>
+    </div>
+
+    <div class="d-flex justify-content-between" style="margin: 20px 0;">
+        <button pButton label="Download" class="ui-button-info">
+
+        </button>
+
+        <button pButton label="Close" routerLink="/my-career-web/dashboard/home" class="ui-button-info">
+
+        </button>
+    </div>
+</div>

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

+@import "../../../../styles/my-career-styles/variables";
+
+.summary-report {
+    margin-top: 20px;
+    border: 2px solid $greyBorder;
+    border-radius: 10px;
+
+    .report-chart {
+        padding: 3% 5%;
+
+        .report-title {
+            text-align: center;
+            font-size: 16px;
+            margin-bottom: 24px;
+            font-weight: bold;
+        }
+
+        .report-circle {
+            margin: 0 auto;
+            width: 200px;
+            height: 200px;
+            background: #e5e8eb;
+            border-radius: 50%;
+            padding: 17px;
+
+            &-value {
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                background: $white;
+                font-size: 2.5em;
+                line-height: 166px;
+                text-align: center;
+            }
+        }
+    }
+}

frontend/angular/src/app/my-career-web/assessment/summary-report/summary-report.component.ts

+import { Component, OnInit } from '@angular/core';
+import { BaseComponent } from '../../base/base.component';
+import { HelperService } from '../../services/helper.service';
+import { AssessmentService } from '../../services/assessment.service';
+import { takeUntil } from 'rxjs/operators';
+import { UtilsService } from '../../../oneit/services/utils.service';
+
+@Component({
+    selector: 'app-summary-report',
+    templateUrl: './summary-report.component.html',
+    styleUrls: ['./summary-report.component.scss']
+})
+export class SummaryReportComponent extends BaseComponent implements OnInit {
+
+    showBody = false;
+    reportChart = {
+        role: {backgroundColor: '', backgroundImage: ''},
+        culture: {backgroundColor: '', backgroundImage: ''}
+    };
+
+    constructor(
+        private assessmentService: AssessmentService,
+        private helperService: HelperService,
+        private utilsService: UtilsService
+    ) {
+        super();
+    }
+
+    ngOnInit(): void {
+        this.isLoading = true;
+        this.assessmentService.getSummaryReport()
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(response => {
+                console.log(response);
+                this.isLoading = false;
+            }, err => {
+                this.utilsService.handleError(err);
+                this.isLoading = false;
+            });
+    }
+
+}

frontend/angular/src/app/my-career-web/auth/forgot-password/forgot-password.component.ts

@@ -34,7 +34,7 @@ export class ForgotPasswordComponent extends BaseComponent {
 
     forgot(): void {
         if (this.form.invalid) {
-            this.helperService.validateAllFormFields(this.form);
+            return this.helperService.validateAllFormFields(this.form);
         }
         this.isLoading = true;
         this.authService.forgot(this.forgotForm)

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

@@ -37,7 +37,7 @@ export class LoginComponent extends BaseComponent {
 
     login(): void {
         if (this.form.invalid) {
-            this.helperService.validateAllFormFields(this.form);
+            return this.helperService.validateAllFormFields(this.form);
         }
         this.isLoading = true;
         this.authService.login(this.loginForm)

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

@@ -44,7 +44,7 @@ export class RegisterComponent extends BaseComponent {
 
     register(): void {
         if (this.form.invalid) {
-            this.helperService.validateAllFormFields(this.form);
+            return this.helperService.validateAllFormFields(this.form);
         }
         this.registerForm.email = this.registerForm.username;
         if (!this.registerForm.was_referred) {

frontend/angular/src/app/my-career-web/auth/reset-password/reset-password.component.ts

@@ -49,7 +49,7 @@ export class ResetPasswordComponent extends BaseComponent implements OnInit {
 
     reset(): void {
         if (this.form.invalid) {
-            this.helperService.validateAllFormFields(this.form);
+            return this.helperService.validateAllFormFields(this.form);
         }
         const formData = {resetToken: this.resetToken, newPassword: this.resetForm.password};
         this.isLoading = true;

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

@@ -21,13 +21,13 @@ export class BaseComponent implements AfterViewInit, OnDestroy {
             clearTimeout(this.resizeTimeout);
         }
         this.resizeTimeout = setTimeout((() => {
-            this.isMobileView = document.body.getBoundingClientRect().width <= 768;
+            this.isMobileView = document.body.getBoundingClientRect().width <= 896;
         }), 500);
     }
 
     ngAfterViewInit(): void {
         setTimeout(() => {
-            this.isMobileView = document.body.getBoundingClientRect().width <= 768;
+            this.isMobileView = document.body.getBoundingClientRect().width <= 896;
         }, 100);
     }
 

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

@@ -43,7 +43,6 @@ export class CareerHistoryComponent extends BaseComponent implements OnInit {
     }
 
     exit(): void {
-        this.isExiting = true;
         switch (this.activeTab) {
             case 'personal-data':
                 this.personalDetailsComponent.updateProfile('/my-career-web/dashboard/home');

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

@@ -83,7 +83,7 @@ export class EducationComponent extends BaseComponent implements OnInit {
 
     saveEducation(customRoute = null): void {
         if (this.form.invalid) {
-            this.helperService.validateAllFormFields(this.form);
+            return this.helperService.validateAllFormFields(this.form);
         }
         this.careerProfile.EducationCertificates.forEach(exp => {
             if (typeof exp.Certification === 'string') {

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

@@ -9,6 +9,7 @@ import { takeUntil } from 'rxjs/operators';
 import { RefereeModel } from '../../../models/referee.model';
 import { environment } from '../../../../../environments/environment';
 import { Router } from '@angular/router';
+import { HelperService } from '../../../services/helper.service';
 
 @Component({
   selector: 'app-references',
@@ -29,6 +30,7 @@ export class ReferencesComponent extends BaseComponent implements OnInit {
         private personalDetailsService: PersonalDetailsService,
         private confirmationService: ConfirmationService,
         private utilsService: UtilsService,
+        private helperService: HelperService,
         private router: Router
     ) {
         super();
@@ -81,7 +83,7 @@ export class ReferencesComponent extends BaseComponent implements OnInit {
 
     saveReferees(customRoute = null): void {
         if (this.form.invalid) {
-            return this.utilsService.clearErrorMessages();
+            return this.helperService.validateAllFormFields(this.form);
         }
         this.isSaving = true;
         this.personalDetailsService.saveProfile(this.createdObjs, this.updatedObjs, this.deletedObjs)

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

@@ -97,7 +97,7 @@ export class SkillsComponent extends BaseComponent implements OnInit {
 
     saveSkill(customRoute = null): void {
         if (this.form.invalid) {
-            this.helperService.validateAllFormFields(this.form);
+            return this.helperService.validateAllFormFields(this.form);
         }
         this.isSaving = true;
         this.personalDetailsService.saveProfile(this.createdObjs, this.updatedObjs, this.deletedObjs)

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

@@ -90,7 +90,7 @@ export class WorkHistoryComponent extends BaseComponent implements OnInit {
 
     saveWorkHistory(customRoute = null): void {
         if (this.form.invalid) {
-            this.helperService.validateAllFormFields(this.form);
+            return this.helperService.validateAllFormFields(this.form);
         }
         this.careerProfile.WorkExperiences.forEach(exp => {
             exp.StartMonth = UtilsService.convertDateToString(exp.StartMonthField);

frontend/angular/src/app/my-career-web/dashboard/dashboard.module.ts

@@ -8,7 +8,6 @@ import { HomeComponent } from './home/home.component';
 import { LeftSidebarComponent } from './left-sidebar/left-sidebar.component';
 import { ProfileTasksComponent } from './profile-tasks/profile-tasks.component';
 import { GoPremiumComponent } from './go-premium/go-premium.component';
-import { SummaryReportComponent } from './summary-report/summary-report.component';
 
 @NgModule({
     imports: [
@@ -21,8 +20,7 @@ import { SummaryReportComponent } from './summary-report/summary-report.componen
         HomeComponent,
         LeftSidebarComponent,
         ProfileTasksComponent,
-        GoPremiumComponent,
-        SummaryReportComponent
+        GoPremiumComponent
     ]
 })
 

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

@@ -81,7 +81,7 @@
         <div class="home-mobile-tab" [ngClass]="{selected: selectedMobileTab === 'tasks'}" (click)="selectedMobileTab = 'tasks'">Tasks</div>
     </div>
 
-    <div class="mobile-tab-content" *ngIf="selectedMobileTab === 'dashboard'">
+    <div class="mobile-tab-content" [hidden]="selectedMobileTab !== 'dashboard'">
 
         <div class="home-mobile-header">
 
@@ -150,7 +150,7 @@
     </div>
 
 
-    <div class="mobile-tab-content" *ngIf="selectedMobileTab === 'tasks'">
+    <div class="mobile-tab-content" [hidden]="selectedMobileTab !== 'tasks'">
         <app-profile-tasks></app-profile-tasks>
     </div>
 

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

@@ -221,7 +221,6 @@
                 border-radius: 4px;
                 background-color: #FFFFFF;
                 box-shadow: 0 0 20px 0 rgba(128,130,133,0.13);
-                height: 207px;
                 width: 100%;
                 margin-top: 16px;
                 font-size: 20px;

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

@@ -65,7 +65,6 @@ export class ProfileTasksComponent extends BaseComponent {
         const currentTask = this.profileTasks.find(t => !this.careerProfile[t.key]);
         currentTask.started = true;
         // const percentage =  (this.careerProfile.CompletedPercentage || 0) * 3.6;
-        // for (let i = 0; i <= percentage; i++) {
         // if (percentage === 360) {
         //     this.backgroundColor = '#1DBA3C';
         //     this.avatarBorder = `linear-gradient(${90 + percentage}deg, transparent 50%, #1DBA3C 50%),linear-gradient(90deg, #1DBA3C 50%, transparent 50%)`;
@@ -74,7 +73,6 @@ export class ProfileTasksComponent extends BaseComponent {
         // } else {
         //     this.avatarBorder = `linear-gradient(${percentage - 90}deg, transparent 50%, #1469A2 50%),linear-gradient(90deg, #EAECEE 50%, transparent 50%)`;
         // }
-        // }
     }
 
 }

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

-<p>
-  summary-report works!
-</p>

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

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-summary-report',
-  templateUrl: './summary-report.component.html',
-  styleUrls: ['./summary-report.component.scss']
-})
-export class SummaryReportComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

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

@@ -83,7 +83,7 @@ export class IntroLetterComponent extends BaseComponent implements OnInit {
 
     saveIntroLetter(): void {
         if (this.form.invalid) {
-            this.helperService.validateAllFormFields(this.form);
+            return this.helperService.validateAllFormFields(this.form);
         }
         this.isLoading = true;
         this.introLetterService.saveIntroLetters(this.createdObjs, this.updatedObjs, this.deletedObjs)

frontend/angular/src/app/my-career-web/mc-shared/personal-details/personal-details.component.html

@@ -42,12 +42,11 @@
             <label>Mobile</label>
             <app-form-control>
                 <p-inputMask (focusout)="checkMobilePattern()" slotChar="-" [unmask]="true" [autoClear]="true"
-                             mask="9999 999 9999"
-                             styleClass="form-control" placeholder="Mobile No" [(ngModel)]="careerProfile.Mobile"
-                             name="Mobile">
+                             mask="9999 999 9999" styleClass="form-control" placeholder="Mobile No"
+                             [(ngModel)]="careerProfile.Mobile" name="Mobile">
                 </p-inputMask>
             </app-form-control>
-            <div class="mobile-no-msg" *ngIf="!careerProfile.Mobile || careerProfile.Mobile.length < 11">
+            <div class="mobile-no-msg" *ngIf="form.form.get('Mobile').touched && (!careerProfile.Mobile || careerProfile.Mobile.length < 11)">
                 You did not enter a mobile phone number. We occasionally try to contact you via text message.
             </div>
         </div>

frontend/angular/src/app/my-career-web/mc-shared/personal-details/personal-details.component.ts

@@ -105,7 +105,7 @@ export class PersonalDetailsComponent extends BaseComponent implements OnInit {
 
     updateProfile(customRoute = null): void {
         if (this.form.invalid) {
-            this.helperService.validateAllFormFields(this.form);
+            return this.helperService.validateAllFormFields(this.form);
         }
         this.careerProfile.Candidate.User.UserName = this.careerProfile.Candidate.User.Email;
         this.isSaving = true;

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

@@ -38,6 +38,15 @@ export class AssessmentService {
             )
     }
 
+    getSummaryReport(assocs = []): Observable<any> {
+        return this.searchService.getObjects('SummaryReport', 'All', '', assocs, null, null, null, null)
+            .map(
+                data => {
+                    return this.utilsService.convertResponseToObjects(data, assocs);
+                }
+            )
+    }
+
   saveWorkStyle(params): Observable<any> {
       return this.utilsService.processObjects('SaveWorkStyle', params);
   }

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

@@ -28,4 +28,15 @@ export class HelperService {
             });
     }
 
+    circleGradient(value = 0, fillColor: '#f0f', emptyColor = '#EAECEE'): { backgroundImage: string, backgroundColor: string } {
+        const percentage = value * 3.6;
+        let grad;
+        if (percentage <= 180) {
+            grad = `linear-gradient(${90 + percentage}deg, transparent 50%, ${emptyColor} 50%),linear-gradient(90deg, ${emptyColor} 50%, transparent 50%)`;
+        } else {
+            grad = `linear-gradient(${percentage - 90}deg, transparent 50%, ${fillColor} 50%),linear-gradient(90deg, ${emptyColor} 50%, transparent 50%)`;
+        }
+        return {backgroundImage: grad, backgroundColor: emptyColor};
+    }
+
 }

frontend/angular/src/app/utils/common.modules.import.ts

@@ -7,6 +7,7 @@ import { DropdownModule } from 'primeng/dropdown';
 import { FieldsetModule } from 'primeng/fieldset';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import {
+    AccordionModule,
     ButtonModule,
     CalendarModule,
     EditorModule,
@@ -69,5 +70,6 @@ export const PrimeNGModules = [
     ProgressBarModule,
     FileUploadModule,
     TooltipModule,
-    KeyFilterModule
+    KeyFilterModule,
+    AccordionModule
 ];

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

@@ -11,7 +11,9 @@
     @import "auth";
     @import "typography";
 
-    @import "profile-builder";
+    @import "components/profile-builder";
+    @import "components/mc-accordion";
+
     @import "primeng/radio";
     @import "primeng/checkbox";
     @import "primeng/toast";
@@ -26,6 +28,7 @@
     @import "primeng/file-upload";
     @import "primeng/select-button";
     @import "primeng/upload";
+    @import "primeng/accordion";
 
 }
 

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

@@ -4,3 +4,5 @@ $bodyFont: 'Catamaran', sans-serif;
 $white: #FFFFFF;
 $primaryColor: #12A8DE;
 $darkColor: #58595B;
+$textGrey: #7d7f83;
+$greyBorder: #e5e8eb;

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

+.ui-accordion {
+
+    &-header {
+        padding: 0 !important;
+        background-color: $white !important;
+        margin: 0;
+
+        > a {
+            padding: 30px 50px !important;
+            border: 1px solid $greyBorder;
+            border-left: 0;
+            border-right: 0;
+            position: relative;
+
+            .ui-accordion-toggle-icon {
+                position: absolute;
+                right: 50px;
+                color: $darkColor;
+                border: 1px solid $greyBorder;
+                border-radius: 50%;
+                width: 30px;
+                height: 30px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            p-header {
+                display: flex;
+                align-self: center;
+
+                .mc-tab-header {
+                    &-text {
+                        font-weight: 600;
+                        color: $darkColor;
+                        flex: 0 0 25%;
+                        display: flex;
+                        align-self: center;
+                    }
+
+                    &-content {
+                        display: flex;
+                        align-self: center;
+                        flex: 0 0 75%;
+                        position: relative;
+
+                        .header-percentage {
+                            display: flex;
+                            align-self: center;
+
+                            &-value {
+                                font-weight: bold;
+                                font-size: 24px;
+                                color: $textGrey;
+                            }
+
+                            &-bar {
+                                flex: 0 0 70%;
+                                margin-left: 3%;
+                                display: flex;
+                                align-self: center;
+
+                                p-progressBar {
+                                    width: 100%;
+
+                                    .ui-progressbar {
+                                        height: 24px;
+
+                                        &-value {
+                                            height: 24px;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
+                    }
+                }
+            }
+        }
+    }
+
+    &-content {
+        border: 0 !important;
+        background: #f2f2f2;
+
+    }
+}