Skip to content

P
PERFORMA_REPLICA
Commit f8abd873 by Muhammad Usman
Options

UI button responsiveness issue

parent 7d2da612
Showing with 309 additions and 53 deletions
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 0 → 100644
<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 0 → 100644
@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 0 → 100644
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,15 +65,13 @@ 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%)`;
// } else if (percentage<=180){
// this.avatarBorder = `linear-gradient(${90 + percentage}deg, transparent 50%, #EAECEE 50%),linear-gradient(90deg, #EAECEE 50%, transparent 50%)`;
// } else {
// this.avatarBorder = `linear-gradient(${percentage - 90}deg, transparent 50%, #1469A2 50%),linear-gradient(90deg, #EAECEE 50%, transparent 50%)`;
// }
// if (percentage === 360) {
// this.backgroundColor = '#1DBA3C';
// this.avatarBorder = `linear-gradient(${90 + percentage}deg, transparent 50%, #1DBA3C 50%),linear-gradient(90deg, #1DBA3C 50%, transparent 50%)`;
// } else if (percentage<=180){
// this.avatarBorder = `linear-gradient(${90 + percentage}deg, transparent 50%, #EAECEE 50%),linear-gradient(90deg, #EAECEE 50%, transparent 50%)`;
// } 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.ts deleted 100644 → 0
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 0 → 100644
.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;
}
}
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