mobile navigation ifxes

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

 import { Component, OnInit } from '@angular/core';
 import { BaseComponent } from '../../base/base.component';
+import { AssessmentService } from '../../services/assessment.service';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-work-style',
@@ -8,11 +10,14 @@ import { BaseComponent } from '../../base/base.component';
 })
 export class WorkStyleComponent extends BaseComponent implements OnInit {
 
-  constructor() {
+  constructor(
+      private as: AssessmentService
+  ) {
       super();
   }
 
   ngOnInit() {
+      //
   }
 
 }

frontend/angular/src/app/components/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 <= 600;
+            this.isMobileView = document.body.getBoundingClientRect().width <= 768;
         }), 500);
     }
 
     ngAfterViewInit(): void {
         setTimeout(() => {
-            this.isMobileView = document.body.getBoundingClientRect().width <= 600;
+            this.isMobileView = document.body.getBoundingClientRect().width <= 768;
         }, 100);
     }
 

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

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CareerHistoryRouting } from './career-history.routing';
+import { CareerHistoryComponent } from './career-history/career-history.component';
+import { PersonalDataComponent } from './career-history/personal-data/personal-data.component';
+import { McSharedModule } from '../mc-shared/mc-shared.module';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        McSharedModule,
+        CareerHistoryRouting
+    ],
+    declarations: [
+        CareerHistoryComponent,
+        PersonalDataComponent
+    ]
+})
+export class CareerHistoryModule {
+}

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
+            }
+        ]
+    }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CareerHistoryRouting { }

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

+<div class="assessment-wrapper row">
+
+    <div class="col-12" style="padding: 0;">
+        <div class="assessment-header">
+            <div class="header-logo" *ngIf="!isMobileView">
+                <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
+            </div>
+
+            <div class="header-actions">
+                <span class="auto-saved">Auto saved 1 min ago</span>
+
+                <button pButton label="Save & exit" class="ui-button-info"></button>
+            </div>
+        </div>
+        <p-progressBar [value]="20"></p-progressBar>
+
+        <div class="assessment-body container">
+
+            <div class="assessment-body-header">
+                <div class="assessment-heading">Career History</div>
+
+                <span class="assessment-estimation"> <i class="fa fa-clock-o"></i> <strong>Estimated time to complete</strong>: 20 mins</span>
+            </div>
+
+            <div class="assessment-body-description">
+                Fill out each of these sections to complete your profile and start job hunting.
+            </div>
+
+
+            <div class="assessment-body-tabs mc-card">
+
+
+            </div>
+        </div>
+    </div>
+
+</div>

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

+@import "~styles/my-career-styles/variables";
+
+.assessment-wrapper {
+    background: #FAFCFD;
+    min-height: 100vh;
+
+    .assessment {
+
+        &-header {
+            height: 76px;
+            background: $darkColor;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .header-logo {
+                width: 260px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: #fff;
+                height: 100%;
+
+                img {
+                    width: 164px;
+                    height: 32px;
+                }
+            }
+
+            .header-actions {
+                padding: 0 24px;
+                font-weight: 600;
+
+                .auto-saved {
+                    color: #FFFFFF;
+                    font-family: $bodyFont;
+                    font-size: 14px;
+                }
+
+                button {
+                    margin-left: 24px;
+                }
+            }
+        }
+
+        &-body {
+            margin-top: 32px;
+
+            &-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 8px;
+
+                .assessment-heading {
+                    color: $darkColor;
+                    font-family: $headingFont;
+                    font-size: 24px;
+                    font-weight: bold;
+                }
+
+                .assessment-estimation {
+                    color: $darkColor;
+                    font-family: $bodyFont;
+                    font-size: 14px;
+
+                    .fa {
+                        font-size: 16px;
+                        color: $primaryColor;
+                        margin-right: 8px;
+                    }
+                }
+            }
+
+
+            &-description {
+                color: $darkColor;
+                font-family: $bodyFont;
+                font-size: 18px;
+            }
+
+
+            &-question-wrapper {
+                margin-top: 32px;
+                position: relative;
+
+
+                .question {
+
+                    &-title, &-completed, &-tag {
+                        color: $darkColor;
+                        font-family: $bodyFont;
+                        font-size: 18px;
+                    }
+
+                    &-title {
+                        margin-bottom: 32px;
+                    }
+
+                    &-tag {
+                        color: $white;
+                        text-align: center;
+                        font-weight: 600;
+                        background: $primaryColor;
+                        padding: 12px;
+                        margin-bottom: 56px;
+                    }
+
+                    &-completed {
+                        position: absolute;
+                        right: 24px;
+                        top: 24px;
+                    }
+                }
+
+                .answer-wrapper {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    span {
+                        color: $darkColor;
+                        font-family: $bodyFont;
+                        font-size: 18px;
+                    }
+
+                    .answer-options {
+                        display: flex;
+                        align-items: center;
+
+                        .option-value {
+                            width: 40px;
+                            height: 40px;
+                            border: 1px solid $primaryColor;
+                            border-radius: 3px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            transition: .3s;
+                            font-weight: 600;
+                            color: $darkColor;
+                            cursor: pointer;
+
+                            &:not(:last-child) {
+                                margin-right: 23px;
+                            }
+
+                            &:hover, &.selected {
+                                background: $primaryColor;
+                                color: $white;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+
+
+
+@media only screen and (max-width: 600px) {
+
+    .header-actions {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 12px;
+        width: 100%;
+    }
+
+
+    .assessment-body {
+        margin-top: 16px !important;
+
+        &-header {
+            padding: 0 4px;
+            margin-bottom: 16px !important;
+
+            .assessment-heading {
+                white-space: nowrap;
+            }
+
+            .assessment-estimation {
+                margin-left: 32px;
+                text-align: center;
+                position: relative;
+
+                .fa {
+                    position: absolute;
+                    left: -16px;
+                }
+            }
+        }
+
+        &-description {
+            text-align: center;
+        }
+
+    }
+
+}

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';
+
+@Component({
+  selector: 'app-career-history',
+  templateUrl: './career-history.component.html',
+  styleUrls: ['./career-history.component.scss']
+})
+export class CareerHistoryComponent  extends BaseComponent implements OnInit {
+
+  constructor() {
+      super();
+  }
+
+  ngOnInit() {
+  }
+
+}

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

+<p>
+  personal-data works!
+</p>

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

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

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

@@ -16,15 +16,6 @@
 </div>
 
 
-
-
-
-
-
-
-
-
-
 <!--    Mobile Navigation   -->
 <div class="row" *ngIf="isMobileView">
     <div class="col-12" style="padding: 0;">
@@ -48,11 +39,19 @@
                     <i class="fa fa-times" (click)="showMobileNav = false;"></i>
 
                     <div class="mobile-nav-links">
-                        <div class="mobile-nav-link"><i class="fa fa-home"></i> Home</div>
+                        <div class="mobile-nav-link" (click)="goToPage('/my-career-web/dashboard/home')"><i
+                            class="fa fa-home"></i> Home
+                        </div>
                         <div class="mobile-nav-link"><i class="fa fa-lock"></i> My Career Profile</div>
                         <div class="mobile-nav-link"><i class="fa fa-document"></i> My Reports</div>
                         <div class="mobile-nav-link"><i class="fa fa-gear"></i> My Account</div>
-                        <div class="mobile-nav-link"><i class="fa fa-sign-out"></i> Logout</div>
+
+
+                        <div class="go-premium">
+                            <img src="assets/my-career-web/images/go-premium-temp.png" alt="">
+                        </div>
+
+                        <div class="mobile-nav-link" style="margin-top: 40px;" (click)="logout()"><i [ngClass]="isLoading ? 'fa fa-spin fa-spinner' : 'fa fa-sign-out'"></i> Logout</div>
                     </div>
                 </div>
             </div>

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

@@ -113,3 +113,14 @@
         }
     }
 }
+
+.go-premium {
+    border: 2px solid #1DBA3C;
+    border-radius: 4px;
+    cursor: pointer;
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}

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

 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { takeUntil } from 'rxjs/operators';
 import { BaseComponent } from '../../base/base.component';
 import { AuthService } from '../../services/auth.service';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'app-dashboard',
@@ -23,4 +23,19 @@ export class DashboardComponent extends BaseComponent implements OnInit {
         //
     }
 
+    goToPage(route): void {
+        this.r.navigate([route]);
+        this.showMobileNav = false;
+    }
+
+    logout(): void {
+        this.isLoading = true;
+        this.as.logout()
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(() => {
+                this.r.navigate(['/my-career-web/auth/login']);
+                this.isLoading = false;
+            });
+    }
+
 }

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

 <div class="home-wrapper position-relative" *ngIf="!isMobileView">
     <app-overlay [isActive]="isLoading"></app-overlay>
     <div class="home-header">
-        <div class="home-header-heading">Hey {{careerProfile?.Candidate?.User?.FirstName}}, Welcome to Matchd Career.</div>
+        <div class="home-header-heading">Hey {{careerProfile?.Candidate?.User?.FirstName | truncate : 10}}, Welcome to Matchd Career.</div>
         <div class="home-header-card">
             <div class="home-header-card-content">
                 We need some information from you so you can fill out your career profile and get job hunting.
@@ -71,7 +71,7 @@
     <div class="mobile-tab-content" *ngIf="selectedMobileTab === 'dashboard'">
 
         <div class="home-mobile-header">
-            <div class="mobile-header-heading">Hey {{careerProfile?.Candidate?.User?.FirstName}}, Welcome to Matchd Career.</div>
+            <div class="mobile-header-heading">Hey {{careerProfile?.Candidate?.User?.FirstName | truncate : 10}}, Welcome to Matchd Career.</div>
             <div class="mobile-header-card">
                 We need some information from you so you can fill out your career profile and get job hunting.
                 <div class="mobile-header-card-action" routerLink="/my-career-web/dashboard/personal-details">I'm ready to get started</div>

frontend/angular/src/app/components/my-career-web/dashboard/left-sidebar/left-sidebar.component.scss

@@ -85,8 +85,4 @@
         font-size: 11px;
         bottom: 10px;
     }
-
-    .go-premium-wrapper {
-
-    }
 }

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

@@ -110,10 +110,11 @@ export class PersonalDetailsComponent extends BaseComponent implements OnInit {
         this.isSaving = true;
         this.ps.saveProfile(this.createdObjs, this.updatedObjs, this.deletedObjs)
             .pipe(takeUntil(this.componentInView))
-            .subscribe(() => {
+            .subscribe(res => {
+                this.isSaving = false;
+                this.hs.oneItHttpResponse(res);
                 this.ps.careerProfileUpdated = this.careerProfile;
                 this.ts.success('Profile updated.');
-                this.isSaving = false;
             }, err => {
                 this.hs.handleHttpError(err);
                 this.isSaving = false;

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

 <div class="right-sidebar">
+    <app-overlay [isActive]="isLoading"></app-overlay>
     <div class="user-profile">
         <i class="fa fa-bell" *ngIf="!isMobileView"></i>
         <div class="user-profile-avatar-wrapper" [ngStyle]="{backgroundImage: avatarBorder, backgroundColor: backgroundColor}">

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

@@ -4,6 +4,7 @@ import { PersonalDetailsService } from '../../services/personal-details.service'
 import { takeUntil } from 'rxjs/operators';
 import { UtilsService } from '../../../../oneit/services/utils.service';
 import { CareerProfileModel } from '../../models/career-profile.model';
+import { HelperService } from '../../services/helper.service';
 
 @Component({
     selector: 'app-profile-tasks',
@@ -15,9 +16,11 @@ export class ProfileTasksComponent extends BaseComponent {
     careerProfile = new CareerProfileModel();
     avatarBorder = 'linear-gradient(90deg, transparent 50%, #EAECEE 50%), linear-gradient(90deg, #EAECEE 50%, transparent 50%)';
     backgroundColor = '#1469A2';
+    assocs = ['Candidate.User', 'Candidate.OccupationPreference'];
 
     constructor(
         private ps: PersonalDetailsService,
+        private hs: HelperService,
         private us: UtilsService
     ) {
         super();
@@ -28,8 +31,23 @@ export class ProfileTasksComponent extends BaseComponent {
             .pipe(takeUntil(this.componentInView))
             .subscribe(profile => {
                 this.careerProfile = this.us.cloneObject(profile);
-                this.setProfileCompletion();
+                this.getCareerProfile();
             });
+        this.getCareerProfile();
+    }
+
+    getCareerProfile(): void {
+        this.isLoading = true;
+        this.ps.getCareerProfile(this.assocs)
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(response => {
+                this.isLoading = false;
+                this.careerProfile = response;
+                this.setProfileCompletion();
+            }, err => {
+                this.isLoading = false;
+                this.hs.handleHttpError(err);
+            })
     }
 
     setProfileCompletion(): void {

frontend/angular/src/app/components/my-career-web/mc-shared/mc-shared.module.ts

@@ -16,6 +16,8 @@ import { ButtonModule } from 'primeng/button';
 import { GooglePlacesAutocompleteDirective } from './google-places-autocomplete.directive';
 import { InputMaskModule } from 'primeng/inputmask';
 import { ProgressBarModule } from 'primeng/progressbar';
+import { AssessmentService } from '../services/assessment.service';
+import { TruncatePipe } from './truncate.pipe';
 
 const MODULES = [
     ReactiveFormsModule,
@@ -40,6 +42,10 @@ const DIRECTIVES = [
     GooglePlacesAutocompleteDirective
 ];
 
+const PIPES = [
+    TruncatePipe
+];
+
 @NgModule({
     imports: [
         CommonModule,
@@ -48,16 +54,19 @@ const DIRECTIVES = [
     exports: [
         ...MODULES,
         ...COMPONENTS,
-        ...DIRECTIVES
+        ...DIRECTIVES,
+        ...PIPES
     ],
     providers: [
         ToasterService,
         HelperService,
-        PersonalDetailsService
+        PersonalDetailsService,
+        AssessmentService
     ],
     declarations: [
         ...COMPONENTS,
-        ...DIRECTIVES
+        ...DIRECTIVES,
+        ...PIPES
     ]
 })
 export class McSharedModule {

frontend/angular/src/app/components/my-career-web/mc-shared/truncate.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'truncate'
+})
+export class TruncatePipe implements PipeTransform {
+
+  transform(value, length): string {
+    if (!value) {
+      return '';
+    }
+
+    return value.length > length ? `${value.substring(0, length - 3)} ...` : value;
+  }
+
+}

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

@@ -25,6 +25,11 @@ const routes: Routes = [
                 loadChildren: './assessment/assessment.module#AssessmentModule',
                 canActivate: [HomeGuard]
             },
+            {
+                path: 'career-history',
+                loadChildren: './career-history/career-history.module#CareerHistoryModule',
+                canActivate: [HomeGuard]
+            },
             {path: '', component: WelcomeComponent, canActivate: [PublicGuard]}
         ]
     }

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';
+
+@Injectable()
+export class AssessmentService {
+
+  constructor(
+      private as: ApiService,
+      private ss: SearchService
+  ) { }
+
+  getWorkStyles(): Observable<any> {
+      return this.ss.getObjects('WorkStyle', 'ALL', '', [], null, null, null, null)
+  }
+
+
+}

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

@@ -61,7 +61,8 @@ export class HelperService {
 
     oneItHttpResponse(response): void {
         if (response.status === 'error') {
-            this.ts.error(response.errorDetails[0], 'Error');
+            this.ts.error(response.errorDetails[0]);
+            throw new Error('Error on success response');
         }
     }
 

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

@@ -56,7 +56,7 @@ export class PersonalDetailsService {
     }
 
     saveProfile(createdObjs, updatedObjs, deletedObjs): Observable<any> {
-        return this.svs.saveObjectsWithDefaultSvc(createdObjs, updatedObjs, deletedObjs);
+        return this.svs.saveObjectsWithDefaultSvc(createdObjs, updatedObjs, deletedObjs, true);
     }
 
 }

frontend/angular/src/app/oneit/services/save.service.ts

@@ -15,11 +15,11 @@ export class SaveService {
 
     }
 
-    saveObjectsWithDefaultSvc(createdObjs: any, updatedObjs: any, deletedObjs: any): Observable<any> {
-        return this.saveObjects('svc/Save', createdObjs, updatedObjs, deletedObjs);
+    saveObjectsWithDefaultSvc(createdObjs: any, updatedObjs: any, deletedObjs: any, rawResponse = false): Observable<any> {
+        return this.saveObjects('svc/Save', createdObjs, updatedObjs, deletedObjs, rawResponse);
     }
 
-    saveObjects(serviceName: string, createdObjs: any, updatedObjs: any, deletedObjs: any): Observable<any> {
+    saveObjects(serviceName: string, createdObjs: any, updatedObjs: any, deletedObjs: any, rawResponse = false): Observable<any> {
         let params: any = {
             environment: environment.envName
         }
@@ -49,9 +49,13 @@ export class SaveService {
         return this.apiService.post(serviceName, params)
             .map(
                 data => {
+                    if (!rawResponse) {
                         if (this.utilsService.isSuccessfulResponse(data)) {
                             return data;
                         }
+                    } else {
+                        return data;
+                    }
                 }
             );
     }