Skip to content

P
PERFORMA_REPLICA
Commit fac6ab7b by Muhammad Usman
Options

dashboard view fixes

parent 7fe7a4bc
Showing with 140 additions and 76 deletions
frontend/angular/src/app/components/my-career-web/assessment/diversity-profile/diversity-profile.component.html
......@@ -7,9 +7,9 @@
</div>
<div class="header-actions">
<span class="auto-saved">Auto saved 1 min ago</span>
<span class="auto-saved" *ngIf="autoSaveLabel">Auto saved {{autoSaveLabel}}</span>
<button pButton label="Save & exit" class="ui-button-info"></button>
<button pButton label="Save & exit" (click)="exit()" class="ui-button-info"></button>
</div>
</div>
<p-progressBar [value]="20"></p-progressBar>
......@@ -28,54 +28,24 @@
<div class="assessment-body-question-wrapper mc-card">
<app-overlay [isActive]="isLoading"></app-overlay>
<div class="question-wrapper">
<div class="question-title">How important to you is the following in your work life?</div>
<div class="question-wrapper" *ngFor="let diversity of diversityProfiles;">
<div class="question-title">{{diversity.QuestionText}}?</div>
<div class="answer-options">
<div class="answer-option">
<p-radioButton label="I am a very practical person"></p-radioButton>
</div>
<div class="answer-option">
<p-radioButton label="I am a somewhat practical person"></p-radioButton>
</div>
<div class="answer-option">
<p-radioButton label="I am not generally idealistic"></p-radioButton>
<div class="answer-options" *ngIf="!diversity.MultipleAnswers">
<div class="answer-option" *ngFor="let answer of diversity.Answers;">
<p-radioButton [label]="answer.Answer"></p-radioButton>
</div>
</div>
</div>
<div class="question-wrapper">
<div class="question-title">How important to you is the following in your work life?</div>
<div class="answer-options">
<div class="answer-option">
<p-radioButton label="I am a very practical person"></p-radioButton>
</div>
<div class="answer-option">
<p-radioButton label="I am a somewhat practical person"></p-radioButton>
</div>
<div class="answer-option">
<p-radioButton label="I am not generally idealistic"></p-radioButton>
<div class="answer-options" *ngIf="diversity.MultipleAnswers">
<div class="answer-option" *ngFor="let answer of diversity.Answers;">
<p-checkbox [label]="answer.Answer" [binary]="true" [(ngModel)]="answer.IsSelected"></p-checkbox>
</div>
</div>
</div>
<div class="question-wrapper">
<div class="question-title">How important to you is the following in your work life?</div>
<div class="answer-options">
<div class="answer-option">
<p-radioButton label="I am a very practical person"></p-radioButton>
</div>
<div class="answer-option">
<p-radioButton label="I am a somewhat practical person"></p-radioButton>
</div>
<div class="answer-option">
<p-radioButton label="I am not generally idealistic"></p-radioButton>
</div>
</div>
</div>
</div>
</div>
</div>
......
frontend/angular/src/app/components/my-career-web/assessment/diversity-profile/diversity-profile.component.scss
......@@ -101,7 +101,7 @@
.answer-option {
margin-bottom: 10px;
p-radioButton {
p-radioButton, p-checkbox {
color: $darkColor;
font-family: $bodyFont;
cursor: pointer;
......
frontend/angular/src/app/components/my-career-web/assessment/diversity-profile/diversity-profile.component.ts
import { Component, OnInit } from '@angular/core';
import { BaseComponent } from '../../base/base.component';
import { AssessmentService } from '../../services/assessment.service';
import { HelperService } from '../../services/helper.service';
import { Router } from '@angular/router';
import { takeUntil } from 'rxjs/operators';
import * as moment from 'moment';
import { DiversityProfileQuestionModel } from '../../models/diversity-profile-question.model';
@Component({
selector: 'app-diversity-profile',
templateUrl: './diversity-profile.component.html',
styleUrls: ['./diversity-profile.component.scss']
selector: 'app-diversity-profile',
templateUrl: './diversity-profile.component.html',
styleUrls: ['./diversity-profile.component.scss']
})
export class DiversityProfileComponent extends BaseComponent implements OnInit {
constructor() {
super();
}
diversityProfiles: DiversityProfileQuestionModel[] = [];
assocs = ['Answers'];
autoSaveInterval;
autoSavedOn;
autoSaveLabel = '';
ngOnInit() {
}
constructor(
private as: AssessmentService,
private hs: HelperService,
private r: Router
) {
super();
}
ngOnInit() {
this.initiateDiversityProfile();
this.setAutoSaveInterval();
}
initiateDiversityProfile(): void {
this.isLoading = true;
this.as.getDiversityProfile(this.assocs)
.pipe(takeUntil(this.componentInView))
.subscribe(response => {
this.isLoading = false;
this.autoSavedOn = new Date();
this.diversityProfiles = response;
console.log(this.diversityProfiles);
}, err => {
this.isLoading = false;
this.hs.handleHttpError(err);
});
}
exit(): void {
this.r.navigate(['/my-career-web/dashboard/home']);
}
setAutoSaveInterval(): void {
if (!this.autoSaveInterval) {
setInterval(() => {
this.autoSave();
}, 60000);
}
}
autoSave(): void {
this.autoSaveLabel = moment(this.autoSavedOn).fromNow();
}
}
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
}
]
path: ':screen',
component: CareerHistoryComponent
}
];
......
frontend/angular/src/app/components/my-career-web/career-history/career-history/career-history.component.html
......@@ -29,22 +29,22 @@
<div class="assessment-body-tabs mc-card career-builder">
<p-tabView>
<p-tabPanel header="1{{isMobileView ? '' : '. Personal Data'}}">
<p-tabPanel header="1{{isMobileView ? '' : '. Personal Data'}}" [selected]="activeTab === 'personal-data'">
<app-personal-data></app-personal-data>
</p-tabPanel>
<p-tabPanel header="2{{isMobileView ? '' : '. Work History'}}">
<p-tabPanel header="2{{isMobileView ? '' : '. Work History'}}" [selected]="activeTab === 'work-history'">
<app-work-history></app-work-history>
</p-tabPanel>
<p-tabPanel header="3{{isMobileView ? '' : '. Education'}}">
<p-tabPanel header="3{{isMobileView ? '' : '. Education'}}" [selected]="activeTab === 'education'">
<app-education></app-education>
</p-tabPanel>
<p-tabPanel header="4{{isMobileView ? '' : '. Skills'}}">
<p-tabPanel header="4{{isMobileView ? '' : '. Skills'}}" [selected]="activeTab === 'skills'">
<app-skills></app-skills>
</p-tabPanel>
<p-tabPanel header="5{{isMobileView ? '' : '. References'}}">
<p-tabPanel header="5{{isMobileView ? '' : '. References'}}" [selected]="activeTab === 'references'">
<app-references></app-references>
</p-tabPanel>
<p-tabPanel header="6{{isMobileView ? '' : '. Templates'}}">
<p-tabPanel header="6{{isMobileView ? '' : '. Templates'}}" [selected]="activeTab === 'templates'">
<app-templates></app-templates>
</p-tabPanel>
</p-tabView>
......
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';
import { Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'app-career-history',
......@@ -9,17 +10,27 @@ import { Router } from '@angular/router';
})
export class CareerHistoryComponent extends BaseComponent implements OnInit {
activeTab = '';
constructor(
private r: Router
private r: Router,
private ar: ActivatedRoute
) {
super();
}
exit(): void {
this.r.navigate(['/my-career-web/dashboard/home']);
ngOnInit() {
this.ar.params
.pipe(takeUntil(this.componentInView))
.subscribe(params => {
if (params.screen) {
this.activeTab = params.screen;
}
})
}
ngOnInit() {
exit(): void {
this.r.navigate(['/my-career-web/dashboard/home']);
}
}
frontend/angular/src/app/components/my-career-web/career-history/career-history/templates/templates.component.html
<p>
templates works!
</p>
<h4 class="tab-heading">Select the design template for your Career Profile</h4>
frontend/angular/src/app/components/my-career-web/config/constants.ts
......@@ -17,6 +17,8 @@ export const CLASSES = {
CAREER_PROFILE: 'performa.orm.CareerProfile',
WORK_STYLE_QUESTION: 'performa.orm.WorkStyleQuestionNP',
WORK_PREFERENCE_QUESTION: 'performa.orm.WorkPreferencesQuestionNP',
DIVERSITY_QUESTION: 'performa.orm.DiversityQuestion',
DIVERSITY_ANSWER: 'performa.orm.DiversityAnswer',
QUESTION: 'performa.orm.Question'
};
......
frontend/angular/src/app/components/my-career-web/dashboard/personal-details/personal-details.component.ts
......@@ -7,6 +7,7 @@ import { CareerProfileModel } from '../../models/career-profile.model';
import { HelperService } from '../../services/helper.service';
import { PersonalDetailsService } from '../../services/personal-details.service';
import { ToasterService } from '../../services/toaster.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-personal-details',
......@@ -31,6 +32,7 @@ export class PersonalDetailsComponent extends BaseComponent implements OnInit {
private ts: ToasterService,
private hs: HelperService,
private aps: AppService,
private r: Router
) {
super();
}
......@@ -111,6 +113,7 @@ export class PersonalDetailsComponent extends BaseComponent implements OnInit {
this.hs.oneItHttpResponse(res);
this.ps.careerProfileUpdated = this.careerProfile;
this.ts.success('Profile updated.');
this.r.navigate(['/my-career-web/dashboard/home']);
}, err => {
this.hs.handleHttpError(err);
this.isSaving = false;
......
frontend/angular/src/app/components/my-career-web/dashboard/profile-tasks/profile-tasks.component.html
......@@ -29,7 +29,7 @@
<button pButton label="Get Started" [routerLink]="task.link" class="ui-button-info section-start">
</button>
<div class="section-edit" [routerLink]="task.link" *ngIf="careerProfile[task.key] === 100">
<div class="section-edit" [routerLink]="task.link" *ngIf="careerProfile[task.key] === 100" [ngClass]="{disabled: careerProfile[task.allowEditField] === false}">
<i class="fa fa-edit"></i> Edit
</div>
......
frontend/angular/src/app/components/my-career-web/dashboard/profile-tasks/profile-tasks.component.scss
......@@ -105,10 +105,16 @@
font-size: 14px;
font-family: $bodyFont;
font-weight: normal;
width: 50px;
.fa-edit {
margin-left: 5px;
}
&.disabled {
color: #688894;
pointer-events: none;
}
}
&.active {
......
frontend/angular/src/app/components/my-career-web/dashboard/profile-tasks/profile-tasks.component.ts
......@@ -19,8 +19,8 @@ export class ProfileTasksComponent extends BaseComponent {
assocs = ['Candidate.User', 'Candidate.OccupationPreference'];
profileTasks = [
{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},
{label: 'Career Values', link: '/my-career-web/assessments/work-preference', key: 'CompletedPercentageWP', active: false},
{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 History', link: '/my-career-web/work-history/personal-data', key: '', active: false},
{label: 'Diversity', link: '', key: '', active: false}
];
......@@ -61,6 +61,7 @@ export class ProfileTasksComponent extends BaseComponent {
this.profileTasks.forEach(t => t.active = false);
const currentTask = this.profileTasks.find(t => this.careerProfile[t.key] !== 100);
currentTask.active = true;
console.log(this.careerProfile);
// const percentage = (this.careerProfile.CompletedPercentage || 0) * 3.6;
// for (let i = 0; i <= percentage; i++) {
// if (percentage === 360) {
......
frontend/angular/src/app/components/my-career-web/models/diversity-profile-question.model.ts 0 → 100644
import { CLASSES } from '../config/constants';
import { BaseModel } from './base.model';
export class DiversityProfileQuestionModel extends BaseModel {
ObjectClass = CLASSES.DIVERSITY_QUESTION;
Code: string;
QuestionText: string;
MultipleAnswers: boolean;
Answers: DiversityAnswerModel[];
}
class DiversityAnswerModel extends BaseModel {
ObjectClass = CLASSES.DIVERSITY_ANSWER;
Answer: string;
IsSelected: boolean;
}
frontend/angular/src/app/components/my-career-web/services/assessment.service.ts
......@@ -29,6 +29,15 @@ export class AssessmentService {
)
}
getDiversityProfile(assocs = []): Observable<any> {
return this.ss.getObjects('DiversityProfile', 'All', '', assocs, null, null, null, null)
.map(
data => {
return this.us.convertResponseToObjects(data, assocs);
}
)
}
saveWorkStyle(params): Observable<any> {
return this.us.processObjects('SaveWorkStyle', params);
}
......
frontend/angular/src/styles/my-career-styles/primeng/_autocomplete.scss
......@@ -26,5 +26,11 @@ p-autoComplete {
border: 2px solid #12A8DE !important;
}
}
&-panel {
.ui-autocomplete-list-item {
transition: .2s !important;
}
}
}
}
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