job integrated property detail

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

+import { ActivatedRoute } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
+import { UtilsService } from '../../oneit/services/utils.service';
+import { ApplicantJobModel } from '../models/applicant-job.model';
+import { JobService } from '../services/job.service';
+import { BaseComponent } from './base.component';
+
+export abstract class JobBaseComponent extends BaseComponent {
+
+    applicantJobId;
+    applicantJob: ApplicantJobModel = new ApplicantJobModel();
+    completedView = false;
+
+    constructor(
+        protected activatedRoute: ActivatedRoute,
+        protected jobService: JobService,
+        protected utilsService: UtilsService
+    ) {
+        super();
+    }
+
+    ngOnInit(): void {
+        this.activatedRoute.params
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(params => {
+                if (params.id && params.id !== 'new') {
+                    this.isEditMode = true;
+                    this.applicantJobId = params.id;
+                    this.getApplicantJob();
+                }
+            });
+        this.activatedRoute.queryParams
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(queryParams => {
+                this.completedView = !!queryParams.completed;
+            });
+    }
+
+    getApplicantJob(): void {
+        this.isLoading = true;
+        this.jobService.getApplicantJob(this.applicantJobId)
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(response => {
+                this.isLoading = false;
+                this.applicantJob = response;
+                this.updatedObjs[this.applicantJob.ObjectID] = this.applicantJob;
+                this.jobLoaded();
+            }, err => {
+                this.utilsService.handleError(err);
+                this.isLoading = false;
+            })
+    }
+
+
+    abstract jobLoaded(): void;
+
+}

frontend/angular/src/app/my-career-web/jobs/job/job-details/job-details.component.html

 <div class="mc-page">
 
-    <div class="mc-page-header">
-        <div class="mc-page-header-logo">
-            <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
-        </div>
-
-        <div class="mc-page-header-action">
-            <button pButton label="Exit" routerLink="/my-career-web/jobs" class="ui-button-info"></button>
-        </div>
-    </div>
+    <app-mc-page-header>
+    </app-mc-page-header>
 
     <div class="mc-page-body container">
         <form #form="ngForm" class="mc-card position-relative">

frontend/angular/src/app/my-career-web/jobs/job/job-details/job-details.component.ts

@@ -3,7 +3,7 @@ import { NgForm } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { takeUntil } from 'rxjs/operators';
 import { UtilsService } from '../../../../oneit/services/utils.service';
-import { BaseComponent } from '../../../base/base.component';
+import { JobBaseComponent } from '../../../base/job-base.component';
 import { ApplicantJobModel } from '../../../models/applicant-job.model';
 import { CareerProfileModel } from '../../../models/career-profile.model';
 import { HelperService } from '../../../services/helper.service';
@@ -16,7 +16,7 @@ import { ToasterService } from '../../../services/toaster.service';
     templateUrl: './job-details.component.html',
     styleUrls: ['./job-details.component.scss']
 })
-export class JobDetailsComponent extends BaseComponent implements OnInit {
+export class JobDetailsComponent extends JobBaseComponent implements OnInit {
 
     applicantJob: ApplicantJobModel = new ApplicantJobModel();
     clonedCareerProfile: CareerProfileModel = new CareerProfileModel();
@@ -31,15 +31,15 @@ export class JobDetailsComponent extends BaseComponent implements OnInit {
     @ViewChild('form') form: NgForm;
 
     constructor(
-        private activatedRoute: ActivatedRoute,
-        private jobService: JobService,
-        private utilsService: UtilsService,
+        activatedRoute: ActivatedRoute,
+        jobService: JobService,
+        utilsService: UtilsService,
         private toastService: ToasterService,
         private helperService: HelperService,
         private personalDetailsService: PersonalDetailsService,
         private router: Router
     ) {
-        super();
+        super(activatedRoute, jobService, utilsService);
     }
 
     ngOnInit() {
@@ -49,9 +49,11 @@ export class JobDetailsComponent extends BaseComponent implements OnInit {
                 if (params.id && params.id !== 'new') {
                     this.isEditMode = true;
                     this.applicantJobId = params.id;
+                    this.getApplicantJob();
+                } else {
+                    this.getCloneCareerProfileID();
                 }
             });
-        this.getCloneCareerProfileID();
         this.getJobPostLocations();
     }
 
@@ -81,27 +83,10 @@ export class JobDetailsComponent extends BaseComponent implements OnInit {
     }
 
     initiateApplicantJob(): void {
-        if (this.isEditMode) {
-            this.getApplicantJob()
-        } else {
-            this.applicantJob = new ApplicantJobModel();
-            this.applicantJob.Candidate = this.clonedCareerProfile.Candidate;
-            this.utilsService.createObject(this.applicantJob, this.createdObjs)
-        }
-    }
-
-    getApplicantJob(): void {
-        this.isLoading = true;
-        this.jobService.getApplicantJob(this.applicantJobId)
-            .pipe(takeUntil(this.componentInView))
-            .subscribe(response => {
-                this.isLoading = false;
-                this.applicantJob = response;
-                this.updatedObjs[this.applicantJob.ObjectID] = this.applicantJob;
-            }, err => {
-                this.utilsService.handleError(err);
-                this.isLoading = false;
-            })
+        this.applicantJob = new ApplicantJobModel();
+        this.applicantJob.Candidate = this.clonedCareerProfile.Candidate;
+        this.applicantJob.CareerProfile = this.clonedCareerProfile.ObjectID;
+        this.utilsService.createObject(this.applicantJob, this.createdObjs)
     }
 
     getJobPostLocations(): void {
@@ -128,6 +113,10 @@ export class JobDetailsComponent extends BaseComponent implements OnInit {
         }
     }
 
+    jobLoaded(): void {
+        // console.log(this.applicantJob);
+    }
+
     saveApplicantJob(exit = false): void {
         this.isLoading = true;
         this.jobService.saveApplicantJob(this.createdObjs, this.updatedObjs, this.deletedObjs)

frontend/angular/src/app/my-career-web/jobs/job/job-personal-details/job-personal-details.component.html

+<div class="mc-page">
+
+    <app-mc-page-header>
+    </app-mc-page-header>
+
+    <div class="mc-page-body container">
+        <div class="mc-page-body-heading" style="margin-bottom: 16px;">Career Profile for {{applicantJob?.JobTitle}} at {{applicantJob?.Employer}} </div>
+
+        <div class="mc-card position-relative">
+
+            <app-overlay [isActive]="isLoading"></app-overlay>
+
+            <app-personal-details #personalDetailsComponent *ngIf="applicantJob.CareerProfile" [asChildComponent]="true"
+                                  [willNotUpdateOriginal]="true" [forID]="applicantJob.CareerProfile">
+            </app-personal-details>
+
+
+            <div class="d-flex justify-content-between mt-3">
+                <button pButton label="Save and Exit" class="mc-btn-secondary" (click)="next('exit')">
+                </button>
+
+                <button pButton [label]="completedView ? 'Done' : 'Proceed to work history'" class="mc-btn-primary" (click)="next('proceed')">
+                </button>
+            </div>
+        </div>
+
+    </div>
+
+</div>

frontend/angular/src/app/my-career-web/jobs/job/job-personal-details/job-personal-details.component.scss

+@import "../../../../../styles/my-career-styles/variables";
+
+app-personal-details {
+    ::ng-deep {
+        .info-label {
+            padding: 8px;
+            font-size: 12px;
+            font-family: $bodyFont;
+            background: lightblue;
+            color: #12709a;
+            border-radius: 4px;
+            margin-top: 8px;
+            text-align: center;
+        }
+    }
+}

frontend/angular/src/app/my-career-web/jobs/job/job-personal-details/job-personal-details.component.ts

+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { UtilsService } from '../../../../oneit/services/utils.service';
+import { JobBaseComponent } from '../../../base/job-base.component';
+import { PersonalDetailsComponent } from '../../../mc-shared/personal-details/personal-details.component';
+import { JobService } from '../../../services/job.service';
+
+@Component({
+    selector: 'app-job-personal-details',
+    templateUrl: './job-personal-details.component.html',
+    styleUrls: ['./job-personal-details.component.scss']
+})
+export class JobPersonalDetailsComponent extends JobBaseComponent implements OnInit {
+
+    applicantJobId;
+
+    @ViewChild('personalDetailsComponent') personalDetailsComponent: PersonalDetailsComponent;
+
+    constructor(
+        activatedRoute: ActivatedRoute,
+        jobService: JobService,
+        utilsService: UtilsService
+    ) {
+        super(activatedRoute, jobService, utilsService);
+    }
+
+    jobLoaded(): void {
+        console.log('JOB LOADED', this.applicantJob);
+    }
+
+    next(action: 'exit' | 'proceed'): void {
+        const route = action === 'exit' ? '/my-career-web/jobs' : (this.completedView ? '/my-career-web/jobs' : `/my-career-web/jobs/${this.applicantJobId}/work-history`);
+        this.isLoading = true;
+        this.personalDetailsComponent.updateProfile(route);
+    }
+
+}

frontend/angular/src/app/my-career-web/jobs/job/job-profile/job-profile.component.html

-<div class="mc-page">
-
-    <div class="mc-page-header">
-        <div class="mc-page-header-logo">
-            <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
-        </div>
-    </div>
-
-    <div class="mc-page-body container">
-        <div class="mc-card position-relative">
-            <app-overlay [isActive]="isLoading"></app-overlay>
-
-
-        </div>
-    </div>
-</div>

frontend/angular/src/app/my-career-web/jobs/job/job-profile/job-profile.component.ts

-import { Component, OnInit } from '@angular/core';
-import { BaseComponent } from '../../../base/base.component';
-
-@Component({
-  selector: 'app-job-profile',
-  templateUrl: './job-profile.component.html',
-  styleUrls: ['./job-profile.component.scss']
-})
-
-export class JobProfileComponent extends BaseComponent implements OnInit {
-
-  constructor() {
-      super();
-  }
-
-  ngOnInit() {
-  }
-
-}

frontend/angular/src/app/my-career-web/jobs/jobs/jobs.component.html → frontend/angular/src/app/my-career-web/jobs/jobs-list/jobs-list.component.html

 <div class="mc-page">
 
-    <div class="mc-page-header">
-        <div class="mc-page-header-logo">
-            <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
-        </div>
-    </div>
+    <app-mc-page-header (exit)="goToHome();">
+    </app-mc-page-header>
 
     <div class="mc-page-body container">
         <div class="mc-card position-relative">

frontend/angular/src/app/my-career-web/jobs/jobs/jobs.component.ts → frontend/angular/src/app/my-career-web/jobs/jobs-list/jobs-list.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { takeUntil } from 'rxjs/operators';
 import { UtilsService } from '../../../oneit/services/utils.service';
 import { BaseComponent } from '../../base/base.component';
@@ -7,11 +8,11 @@ import { JobService } from '../../services/job.service';
 
 @Component({
     selector: 'app-jobs',
-    templateUrl: './jobs.component.html',
-    styleUrls: ['./jobs.component.scss']
+    templateUrl: './jobs-list.component.html',
+    styleUrls: ['./jobs-list.component.scss']
 })
 
-export class JobsComponent extends BaseComponent implements OnInit {
+export class JobsListComponent extends BaseComponent implements OnInit {
 
     assocs = [];
     includeCompleted = false;
@@ -19,7 +20,8 @@ export class JobsComponent extends BaseComponent implements OnInit {
 
     constructor(
         private utilsService: UtilsService,
-        private jobsService: JobService
+        private jobsService: JobService,
+        private router: Router
     ) {
         super();
     }
@@ -44,4 +46,8 @@ export class JobsComponent extends BaseComponent implements OnInit {
             })
     }
 
+    goToHome(): void {
+        this.router.navigate(['/my-career-web/dashboard/home']);
+    }
+
 }

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

@@ -3,13 +3,13 @@ import { NgModule } from '@angular/core';
 import { McSharedModule } from '../mc-shared/mc-shared.module';
 import { JobDetailsComponent } from './job/job-details/job-details.component';
 import { JobEducationComponent } from './job/job-education/job-education.component';
-import { JobProfileComponent } from './job/job-profile/job-profile.component';
 import { JobRefereesComponent } from './job/job-referees/job-referees.component';
 import { JobSkillsComponent } from './job/job-skills/job-skills.component';
 import { JobWorkHistoryComponent } from './job/job-work-history/job-work-history.component';
+import { JobsListComponent } from './jobs-list/jobs-list.component';
 
 import { JobsRouting } from './jobs.routing';
-import { JobsComponent } from './jobs/jobs.component';
+import { JobPersonalDetailsComponent } from './job/job-personal-details/job-personal-details.component';
 
 @NgModule({
     imports: [
@@ -18,13 +18,13 @@ import { JobsComponent } from './jobs/jobs.component';
         McSharedModule
     ],
     declarations: [
-        JobsComponent,
+        JobsListComponent,
         JobDetailsComponent,
-        JobProfileComponent,
         JobWorkHistoryComponent,
         JobEducationComponent,
         JobSkillsComponent,
-        JobRefereesComponent
+        JobRefereesComponent,
+        JobPersonalDetailsComponent
     ]
 })
 export class JobsModule {

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

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { JobDetailsComponent } from './job/job-details/job-details.component';
-import { JobProfileComponent } from './job/job-profile/job-profile.component';
-import { JobsComponent } from './jobs/jobs.component';
+import { JobPersonalDetailsComponent } from './job/job-personal-details/job-personal-details.component';
+import { JobWorkHistoryComponent } from './job/job-work-history/job-work-history.component';
+import { JobsListComponent } from './jobs-list/jobs-list.component';
 
 const routes: Routes = [
     {
         path: '',
-        component: JobsComponent
+        component: JobsListComponent
     },
     {
         path: 'new',
@@ -18,8 +19,12 @@ const routes: Routes = [
         component: JobDetailsComponent
     },
     {
-        path: ':id/profile',
-        component: JobProfileComponent
+        path: ':id/personal-details',
+        component: JobPersonalDetailsComponent
+    },
+    {
+        path: ':id/work-history',
+        component: JobWorkHistoryComponent
     }
 ];
 

frontend/angular/src/app/my-career-web/mc-shared/mc-page-header/mc-page-header.component.html

+<div class="mc-page-header">
+    <div class="mc-page-header-logo" *ngIf="!isMobileView">
+        <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
+    </div>
+
+    <div class="mc-page-header-action">
+        <button pButton label="Save & exit" style="font-weight: bold;" (click)="exit.emit()" class="ui-button-info"></button>
+    </div>
+</div>

frontend/angular/src/app/my-career-web/mc-shared/mc-page-header/mc-page-header.component.ts

+import { Component, EventEmitter, Output } from '@angular/core';
+import { BaseComponent } from '../../base/base.component';
+
+@Component({
+    selector: 'app-mc-page-header',
+    templateUrl: './mc-page-header.component.html',
+    styleUrls: ['./mc-page-header.component.css']
+})
+export class McPageHeaderComponent extends BaseComponent {
+
+    @Output() exit = new EventEmitter();
+}

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

@@ -14,6 +14,7 @@ import { AssessmentHeaderComponent } from './assessment-header/assessment-header
 import { FormControlComponent } from './form-control/form-control.component';
 import { GooglePlacesAutocompleteDirective } from './google-places-autocomplete.directive';
 import { IconReplacerDirective } from './icon-replacer.directive';
+import { McPageHeaderComponent } from './mc-page-header/mc-page-header.component';
 import { OverlayComponent } from './overlay/overlay.component';
 import { PersonalDetailsComponent } from './personal-details/personal-details.component';
 import { TemplatesComponent } from './templates/templates.component';
@@ -33,7 +34,8 @@ const COMPONENTS = [
     OverlayComponent,
     PersonalDetailsComponent,
     TemplatesComponent,
-    AssessmentHeaderComponent
+    AssessmentHeaderComponent,
+    McPageHeaderComponent
 ];
 
 const DIRECTIVES = [

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

@@ -2,14 +2,11 @@
     Personal Information
 </div>
 
-<div class="row" style="margin-bottom: 16px;" *ngIf="asChildComponent">
-    <div class="col-md-4 col-md-offset-4">
-        <div class="info-label">
-            This will update your personal details as well
-        </div>
-    </div>
+<div class="info-label" style="width: 500px; margin: 0 auto 16px;" *ngIf="asChildComponent">
+    {{willNotUpdateOriginal ? 'This does NOT update Personal Details overall, it is specific to this job only' : 'This will update your personal details as well'}}
 </div>
 
+<p *ngIf="forID">Enter your basic profile information </p>
 
 <div [ngClass]="{'personal-details': !asChildComponent}" [ngStyle]="{marginTop: asChildComponent ? '20px' : ''}">
     <app-overlay [isActive]="isLoading"></app-overlay>
@@ -176,7 +173,7 @@
         </div>
 
 
-        <div class="col-md-12" style="margin-top: 48px;" *ngIf="asChildComponent">
+        <div class="col-md-12" style="margin-top: 48px;" *ngIf="asChildComponent && !forID">
             <div class="d-flex justify-content-center">
                 <button pButton label="Next Section" (click)="updateProfile()" class="ui-button-info next-section"
                         [disabled]="isLoading || isSaving">

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

@@ -27,6 +27,8 @@ export class PersonalDetailsComponent extends BaseComponent implements OnInit {
     careerProfile = new CareerProfileModel();
     assocs = ['Candidate.User', 'Candidate.OccupationPreference'];
     @Input() asChildComponent = false;
+    @Input() forID = false;
+    @Input() willNotUpdateOriginal = false;
     @Output() detailsSaved = new EventEmitter();
     @Output() careerProfileLoaded = new EventEmitter<CareerProfileModel>();
 
@@ -91,10 +93,13 @@ export class PersonalDetailsComponent extends BaseComponent implements OnInit {
 
     getCareerProfile(): void {
         this.isLoading = true;
-        this.personalDetailsService.getCareerProfile(this.assocs)
+        const sub = this.forID ? this.personalDetailsService.getCareerProfileById(this.forID, this.assocs)
+            : this.personalDetailsService.getCareerProfile(this.assocs);
+        sub
             .pipe(takeUntil(this.componentInView))
             .subscribe(response => {
                 this.careerProfile = response;
+                console.log(this.careerProfile.ObjectID);
                 this.updatedObjs[this.careerProfile.ObjectID] = this.careerProfile;
                 this.updatedObjs[this.careerProfile.Candidate.ObjectID] = this.careerProfile.Candidate;
                 this.updatedObjs[this.careerProfile.Candidate.User.ObjectID] = this.careerProfile.Candidate.User;