Skip to content

P
PERFORMA_REPLICA
Commit 041acfcf by Muhammad Usman
Options

personal details component refactored to add in career builder

parent fac6ab7b
Showing with 70 additions and 127 deletions
frontend/angular/src/app/components/my-career-web/career-history/career-history.module.ts
...@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common'; ...@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
import { CareerHistoryRouting } from './career-history.routing'; import { CareerHistoryRouting } from './career-history.routing';
import { CareerHistoryComponent } from './career-history/career-history.component'; 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'; import { McSharedModule } from '../mc-shared/mc-shared.module';
import { WorkHistoryComponent } from './career-history/work-history/work-history.component'; import { WorkHistoryComponent } from './career-history/work-history/work-history.component';
import { EducationComponent } from './career-history/education/education.component'; import { EducationComponent } from './career-history/education/education.component';
...@@ -19,7 +18,6 @@ import { TemplatesComponent } from './career-history/templates/templates.compone ...@@ -19,7 +18,6 @@ import { TemplatesComponent } from './career-history/templates/templates.compone
], ],
declarations: [ declarations: [
CareerHistoryComponent, CareerHistoryComponent,
PersonalDataComponent,
WorkHistoryComponent, WorkHistoryComponent,
EducationComponent, EducationComponent,
SkillsComponent, SkillsComponent,
......
frontend/angular/src/app/components/my-career-web/career-history/career-history/career-history.component.html
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<div class="assessment-body-tabs mc-card career-builder"> <div class="assessment-body-tabs mc-card career-builder">
<p-tabView> <p-tabView>
<p-tabPanel header="1{{isMobileView ? '' : '. Personal Data'}}" [selected]="activeTab === 'personal-data'"> <p-tabPanel header="1{{isMobileView ? '' : '. Personal Data'}}" [selected]="activeTab === 'personal-data'">
<app-personal-data></app-personal-data> <app-personal-details [asChildComponent]="true" (detailsSaved)="activeTab = 'work-history'"></app-personal-details>
</p-tabPanel> </p-tabPanel>
<p-tabPanel header="2{{isMobileView ? '' : '. Work History'}}" [selected]="activeTab === 'work-history'"> <p-tabPanel header="2{{isMobileView ? '' : '. Work History'}}" [selected]="activeTab === 'work-history'">
<app-work-history></app-work-history> <app-work-history></app-work-history>
......
frontend/angular/src/app/components/my-career-web/career-history/career-history/personal-data/personal-data.component.html deleted 100644 → 0
<h4 class="tab-heading">Enter your basic profile information </h4>
<div class="row" style="margin-bottom: 16px;">
<div class="col-md-4 col-md-offset-4">
<div class="info-label">
This will update your personal details as well
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label>First Name</label>
<!-- <app-form-control>-->
<input type="text" class="form-control" placeholder="First Name" required name="FirstName">
<!-- </app-form-control>-->
</div>
<div class="col-md-6 form-group">
<label>Last Name</label>
<!-- <app-form-control>-->
<input type="text" class="form-control" placeholder="Last Name" required name="FirstName">
<!-- </app-form-control>-->
</div>
<div class="col-md-6 form-group">
<label>Email</label>
<!-- <app-form-control>-->
<input type="text" class="form-control" placeholder="Email" required name="FirstName">
<!-- </app-form-control>-->
</div>
<div class="col-md-6 form-group">
<label>Mobile</label>
<!-- <app-form-control>-->
<p-inputMask slotChar="-" [unmask]="true" [autoClear]="true" mask="9999 999 9999" styleClass="form-control" placeholder="Mobile No" name="Mobile">
</p-inputMask>
<!-- </app-form-control>-->
</div>
<div class="col-md-12 form-group">
<label>Address</label>
<!-- <app-form-control>-->
<input type="text" appGooglePlacesAutocomplete class="form-control" placeholder="Address" required name="Address">
<!-- </app-form-control>-->
</div>
<div class="col-md-6 form-group">
<label>Skype</label>
<!-- <app-form-control>-->
<input type="text" class="form-control" placeholder="Skype" name="Skype">
<!-- </app-form-control>-->
</div>
<div class="col-md-12 form-group">
<label>Personal Statement</label>
<!-- <app-form-control>-->
<textarea class="form-control"></textarea>
<!-- </app-form-control>-->
</div>
<div class="col-md-12 form-group">
<label>Achievements</label>
<!-- <app-form-control>-->
<textarea class="form-control"></textarea>
<!-- </app-form-control>-->
</div>
</div>
<div class="d-flex justify-content-center" style="margin-top: 48px;">
<button pButton label="Next Section" class="ui-button-info next-section"></button>
</div>
frontend/angular/src/app/components/my-career-web/career-history/career-history/personal-data/personal-data.component.ts deleted 100644 → 0
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.module.ts
...@@ -7,7 +7,6 @@ import { DashboardComponent } from './dashboard/dashboard.component'; ...@@ -7,7 +7,6 @@ import { DashboardComponent } from './dashboard/dashboard.component';
import { HomeComponent } from './home/home.component'; import { HomeComponent } from './home/home.component';
import { LeftSidebarComponent } from './left-sidebar/left-sidebar.component'; import { LeftSidebarComponent } from './left-sidebar/left-sidebar.component';
import { ProfileTasksComponent } from './profile-tasks/profile-tasks.component'; import { ProfileTasksComponent } from './profile-tasks/profile-tasks.component';
import { PersonalDetailsComponent } from './personal-details/personal-details.component';
import { GoPremiumComponent } from './go-premium/go-premium.component'; import { GoPremiumComponent } from './go-premium/go-premium.component';
@NgModule({ @NgModule({
...@@ -21,7 +20,6 @@ import { GoPremiumComponent } from './go-premium/go-premium.component'; ...@@ -21,7 +20,6 @@ import { GoPremiumComponent } from './go-premium/go-premium.component';
HomeComponent, HomeComponent,
LeftSidebarComponent, LeftSidebarComponent,
ProfileTasksComponent, ProfileTasksComponent,
PersonalDetailsComponent,
GoPremiumComponent GoPremiumComponent
] ]
}) })
......
frontend/angular/src/app/components/my-career-web/dashboard/dashboard.routing.ts
...@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'; ...@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component'; import { DashboardComponent } from './dashboard/dashboard.component';
import { HomeComponent } from './home/home.component'; import { HomeComponent } from './home/home.component';
import { PersonalDetailsComponent } from './personal-details/personal-details.component'; import { PersonalDetailsComponent } from '../mc-shared/personal-details/personal-details.component';
import { GoPremiumComponent } from './go-premium/go-premium.component'; import { GoPremiumComponent } from './go-premium/go-premium.component';
const routes: Routes = [ const routes: Routes = [
......
frontend/angular/src/app/components/my-career-web/dashboard/profile-tasks/profile-tasks.component.ts
...@@ -21,8 +21,8 @@ export class ProfileTasksComponent extends BaseComponent { ...@@ -21,8 +21,8 @@ export class ProfileTasksComponent extends BaseComponent {
{label: 'Personal Details', link: '/my-career-web/dashboard/personal-details', key: 'CompletedPercentage', active: false}, {label: 'Personal Details', link: '/my-career-web/dashboard/personal-details', key: 'CompletedPercentage', active: false},
{label: 'Work Strengths', link: '/my-career-web/assessments/work-style', key: 'CompletedPercentageWS', active: false, allowEditField: 'AllowResubmitWS'}, {label: 'Work Strengths', link: '/my-career-web/assessments/work-style', key: 'CompletedPercentageWS', active: false, allowEditField: 'AllowResubmitWS'},
{label: 'Career Values', link: '/my-career-web/assessments/work-preference', key: 'CompletedPercentageWP', active: false, allowEditField: 'AllowResubmitWP'}, {label: 'Career Values', link: '/my-career-web/assessments/work-preference', key: 'CompletedPercentageWP', active: false, allowEditField: 'AllowResubmitWP'},
{label: 'Career History', link: '/my-career-web/work-history/personal-data', key: '', active: false}, {label: 'Career History', link: '/my-career-web/career-history/personal-data', key: '', active: false},
{label: 'Diversity', link: '', key: '', active: false} {label: 'Diversity', link: '/my-career-web/assessments/diversity-profile', key: '', active: false}
]; ];
constructor( constructor(
...@@ -61,7 +61,6 @@ export class ProfileTasksComponent extends BaseComponent { ...@@ -61,7 +61,6 @@ export class ProfileTasksComponent extends BaseComponent {
this.profileTasks.forEach(t => t.active = false); this.profileTasks.forEach(t => t.active = false);
const currentTask = this.profileTasks.find(t => this.careerProfile[t.key] !== 100); const currentTask = this.profileTasks.find(t => this.careerProfile[t.key] !== 100);
currentTask.active = true; currentTask.active = true;
console.log(this.careerProfile);
// const percentage = (this.careerProfile.CompletedPercentage || 0) * 3.6; // const percentage = (this.careerProfile.CompletedPercentage || 0) * 3.6;
// for (let i = 0; i <= percentage; i++) { // for (let i = 0; i <= percentage; i++) {
// if (percentage === 360) { // if (percentage === 360) {
......
frontend/angular/src/app/components/my-career-web/mc-shared/mc-shared.module.ts
...@@ -23,6 +23,7 @@ import { TabViewModule } from 'primeng/tabview'; ...@@ -23,6 +23,7 @@ import { TabViewModule } from 'primeng/tabview';
import { CalendarModule } from 'primeng/calendar'; import { CalendarModule } from 'primeng/calendar';
import { FileUploadModule } from 'primeng/fileupload'; import { FileUploadModule } from 'primeng/fileupload';
import { SelectButtonModule } from 'primeng/selectbutton'; import { SelectButtonModule } from 'primeng/selectbutton';
import { PersonalDetailsComponent } from './personal-details/personal-details.component';
const MODULES = [ const MODULES = [
ReactiveFormsModule, ReactiveFormsModule,
...@@ -45,7 +46,8 @@ const MODULES = [ ...@@ -45,7 +46,8 @@ const MODULES = [
const COMPONENTS = [ const COMPONENTS = [
FormControlComponent, FormControlComponent,
OverlayComponent OverlayComponent,
PersonalDetailsComponent
]; ];
const DIRECTIVES = [ const DIRECTIVES = [
......
frontend/angular/src/app/components/my-career-web/dashboard/personal-details/personal-details.component.html → frontend/angular/src/app/components/my-career-web/mc-shared/personal-details/personal-details.component.html
<div class="mc-page-header"> <div class="mc-page-header" *ngIf="!asChildComponent">
Personal Information Personal Information
</div> </div>
<div class="personal-details"> <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>
<div [ngClass]="{'personal-details': !asChildComponent}" [ngStyle]="{marginTop: asChildComponent ? '20px' : ''}">
<app-overlay [isActive]="isLoading"></app-overlay> <app-overlay [isActive]="isLoading"></app-overlay>
<form class="row" #form="ngForm"> <form class="row" #form="ngForm">
<div class="col-md-6 form-group"> <div class="col-md-6 form-group">
...@@ -22,7 +31,7 @@ ...@@ -22,7 +31,7 @@
<div class="col-md-6 form-group"> <div class="col-md-6 form-group">
<label>Email</label> <label>Email</label>
<app-form-control> <app-form-control>
<input type="email" email="" class="form-control" placeholder="Email Address" required name="Email" <input type="email" email="" class="form-control" placeholder="Email Address" required name="Email"
[(ngModel)]="careerProfile.Candidate.User.Email"> [(ngModel)]="careerProfile.Candidate.User.Email">
</app-form-control> </app-form-control>
</div> </div>
...@@ -30,7 +39,7 @@ ...@@ -30,7 +39,7 @@
<div class="col-md-6 form-group"> <div class="col-md-6 form-group">
<label>Mobile</label> <label>Mobile</label>
<app-form-control> <app-form-control>
<p-inputMask (focusout)="checkMobilePattern()" slotChar="-" [unmask]="true" [autoClear]="true" mask="9999 999 9999" <p-inputMask (focusout)="checkMobilePattern()" slotChar="-" [unmask]="true" [autoClear]="true" mask="9999 999 9999"
styleClass="form-control" placeholder="Mobile No" [(ngModel)]="careerProfile.Mobile" name="Mobile"> styleClass="form-control" placeholder="Mobile No" [(ngModel)]="careerProfile.Mobile" name="Mobile">
</p-inputMask> </p-inputMask>
</app-form-control> </app-form-control>
...@@ -42,7 +51,7 @@ ...@@ -42,7 +51,7 @@
<div class="col-md-12 form-group"> <div class="col-md-12 form-group">
<label>Address</label> <label>Address</label>
<app-form-control> <app-form-control>
<input type="text" appGooglePlacesAutocomplete (change)="changedAddress()" (addressSelected)="updateAddress($event)" <input type="text" appGooglePlacesAutocomplete (change)="changedAddress()" (addressSelected)="updateAddress($event)"
class="form-control" placeholder="Address" required [(ngModel)]="careerProfile.GoogleAddress" name="Address"> class="form-control" placeholder="Address" required [(ngModel)]="careerProfile.GoogleAddress" name="Address">
</app-form-control> </app-form-control>
</div> </div>
...@@ -55,19 +64,19 @@ ...@@ -55,19 +64,19 @@
</app-form-control> </app-form-control>
</div> </div>
<div class="col-md-6 form-group"> <div class="col-md-6 form-group" *ngIf="!asChildComponent">
<label>Occupation Preference</label> <label>Occupation Preference</label>
<p-autoComplete placeholder="Occupation Preference" (completeMethod)="getJobTitles($event)" [forceSelection]="true" field="JobTitle" <p-autoComplete placeholder="Occupation Preference" (completeMethod)="getJobTitles($event)" [forceSelection]="true" field="JobTitle"
[suggestions]="jobTitles" name="OccupationPreference" [(ngModel)]="careerProfile.Candidate.OccupationPreference" dataKey="ObjectID"> [suggestions]="jobTitles" name="OccupationPreference" [(ngModel)]="careerProfile.Candidate.OccupationPreference" dataKey="ObjectID">
</p-autoComplete> </p-autoComplete>
</div> </div>
<div class="col-md-6 form-group"> <div class="col-md-6 form-group" *ngIf="!asChildComponent">
<label>Employment Preference</label> <label>Employment Preference</label>
<div class="row"> <div class="row">
<div class="col-sm-12" *ngIf="isLoadingPreferences"><i class="pi pi-spin pi-spinner"></i></div> <div class="col-sm-12" *ngIf="isLoadingPreferences"><i class="pi pi-spin pi-spinner"></i></div>
<div class="col-sm-6" *ngFor="let preference of employmentPreferences; let i = index;"> <div class="col-sm-6" *ngFor="let preference of employmentPreferences; let i = index;">
<p-checkbox [label]="preference.Description" [value]="preference.Value" [(ngModel)]="careerProfile.Candidate.EmploymentPreference" <p-checkbox [label]="preference.Description" [value]="preference.Value" [(ngModel)]="careerProfile.Candidate.EmploymentPreference"
name="pref-{{i}}"> name="pref-{{i}}">
</p-checkbox> </p-checkbox>
</div> </div>
...@@ -75,15 +84,15 @@ ...@@ -75,15 +84,15 @@
</div> </div>
<div class="col-md-6 form-group"> <div class="col-md-6 form-group" *ngIf="!asChildComponent">
<label>Employment Status</label> <label>Employment Status</label>
<p-dropdown placeholder="Employment Status" [options]="employmentStatuses" <p-dropdown placeholder="Employment Status" [options]="employmentStatuses"
[dropdownIcon]="isLoadingStatuses ? 'pi pi-spin pi-spinner' : 'pi pi-chevron-down'" [dropdownIcon]="isLoadingStatuses ? 'pi pi-spin pi-spinner' : 'pi pi-chevron-down'"
optionLabel="Description" name="EmploymentStatus" [(ngModel)]="careerProfile.Candidate.EmploymentStatus" dataKey="Value"> optionLabel="Description" name="EmploymentStatus" [(ngModel)]="careerProfile.Candidate.EmploymentStatus" dataKey="Value">
</p-dropdown> </p-dropdown>
</div> </div>
<div class="col-md-12"> <div class="col-md-12" *ngIf="!asChildComponent">
<div class="row"> <div class="row">
<div class="col-md-6 form-group new-opportunity"> <div class="col-md-6 form-group new-opportunity">
<label>I am interested in new opportunities</label> <label>I am interested in new opportunities</label>
...@@ -93,21 +102,45 @@ ...@@ -93,21 +102,45 @@
</div> </div>
</div> </div>
<div class="col-md-6 mt-4 d-flex justify-content-center">
<button type="button" pButton label="Connect With Google" class="ui-button-google" (click)="connectWithSocial('GOOGLE')" <div class="col-md-12 form-group" *ngIf="asChildComponent">
<label>Personal Statement</label>
<app-form-control>
<textarea class="form-control" [(ngModel)]="careerProfile.PersonalStatement" name="PersonalStatement"></textarea>
</app-form-control>
</div>
<div class="col-md-12 form-group" *ngIf="asChildComponent">
<label>Achievements</label>
<app-form-control>
<textarea class="form-control" [(ngModel)]="careerProfile.Achievements" name="Achievements"></textarea>
</app-form-control>
</div>
<div class="col-md-6 mt-4 d-flex justify-content-center" *ngIf="!asChildComponent">
<button type="button" pButton label="Connect With Google" class="ui-button-google" (click)="connectWithSocial('GOOGLE')"
*ngIf="!careerProfile.IsGoogleConnected"></button> *ngIf="!careerProfile.IsGoogleConnected"></button>
</div> </div>
<div class="col-md-6 mt-4 d-flex justify-content-center"> <div class="col-md-6 mt-4 d-flex justify-content-center" *ngIf="!asChildComponent">
<button type="button" pButton label="Connect With LinkedIn" class="ui-button-facebook" (click)="connectWithSocial('LINKEDIN')" <button type="button" pButton label="Connect With LinkedIn" class="ui-button-facebook" (click)="connectWithSocial('LINKEDIN')"
*ngIf="!careerProfile.IsLinkedInConnected"></button> *ngIf="!careerProfile.IsLinkedInConnected"></button>
</div> </div>
<div class="col-md-12 d-flex justify-content-end mt-5"> <div class="col-md-12 d-flex justify-content-end mt-5" *ngIf="!asChildComponent">
<button (click)="updateProfile()" pButton [icon]="isSaving ? 'pi pi-spin pi-spinner' : 'pi pi-save'" label="Update Information" <button (click)="updateProfile()" pButton [icon]="isSaving ? 'pi pi-spin pi-spinner' : 'pi pi-save'" label="Update Information"
class="ui-button-info update-info" [disabled]="isLoading || isSaving"> class="ui-button-info update-info" [disabled]="isLoading || isSaving">
</button> </button>
</div> </div>
<div class="col-md-12" style="margin-top: 48px;" *ngIf="asChildComponent">
<div class="d-flex justify-content-center">
<button pButton label="Next Section" (click)="updateProfile()" class="ui-button-info next-section" [disabled]="isLoading || isSaving">
</button>
</div>
</div>
</form> </form>
</div> </div>
frontend/angular/src/app/components/my-career-web/dashboard/personal-details/personal-details.component.ts → frontend/angular/src/app/components/my-career-web/mc-shared/personal-details/personal-details.component.ts
import { Component, OnInit, ViewChild } from '@angular/core'; import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms'; import { NgForm } from '@angular/forms';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { AppService } from '../../../../app.service'; import { AppService } from '../../../../app.service';
...@@ -24,6 +24,8 @@ export class PersonalDetailsComponent extends BaseComponent implements OnInit { ...@@ -24,6 +24,8 @@ export class PersonalDetailsComponent extends BaseComponent implements OnInit {
jobTitles = []; jobTitles = [];
careerProfile = new CareerProfileModel(); careerProfile = new CareerProfileModel();
assocs = ['Candidate.User', 'Candidate.OccupationPreference']; assocs = ['Candidate.User', 'Candidate.OccupationPreference'];
@Input() asChildComponent = false;
@Output() detailsSaved = new EventEmitter();
@ViewChild('form') form: NgForm; @ViewChild('form') form: NgForm;
...@@ -113,7 +115,11 @@ export class PersonalDetailsComponent extends BaseComponent implements OnInit { ...@@ -113,7 +115,11 @@ export class PersonalDetailsComponent extends BaseComponent implements OnInit {
this.hs.oneItHttpResponse(res); this.hs.oneItHttpResponse(res);
this.ps.careerProfileUpdated = this.careerProfile; this.ps.careerProfileUpdated = this.careerProfile;
this.ts.success('Profile updated.'); this.ts.success('Profile updated.');
this.r.navigate(['/my-career-web/dashboard/home']); if (!this.asChildComponent) {
this.r.navigate(['/my-career-web/dashboard/home']);
} else {
this.detailsSaved.emit();
}
}, err => { }, err => {
this.hs.handleHttpError(err); this.hs.handleHttpError(err);
this.isSaving = false; this.isSaving = false;
......
frontend/angular/src/app/components/my-career-web/models/career-profile.model.ts
...@@ -9,6 +9,8 @@ export class CareerProfileModel extends BaseModel { ...@@ -9,6 +9,8 @@ export class CareerProfileModel extends BaseModel {
Skype: string; Skype: string;
Candidate = new CandidateModel(); Candidate = new CandidateModel();
CompletedPercentage: number; CompletedPercentage: number;
PersonalStatement: string;
Achievements: string;
IsGoogleConnected: boolean; IsGoogleConnected: boolean;
IsLinkedInConnected: boolean; IsLinkedInConnected: boolean;
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment