Skip to content

P
PERFORMA_REPLICA
Commit 2b34f0d9 by Muhammad Usman
Options

mobile navigation ifxes

parent 7c5a3db1
Showing with 453 additions and 32 deletions
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 0 → 100644
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 0 → 100644
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 0 → 100644
<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 0 → 100644
@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 0 → 100644
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.ts 0 → 100644
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 0 → 100644
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 0 → 100644
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;
}
}
);
}
......
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