Skip to content

P
PERFORMA_REPLICA
Commit e01b02b7 by Muhammad Usman
Options

job profile & account & billing view added

parent e5295b93
Showing with 251 additions and 11 deletions
frontend/angular/src/app/my-career-web/dashboard/account/account.component.html
...@@ -7,17 +7,104 @@ ...@@ -7,17 +7,104 @@
<app-overlay [isActive]="isLoading"></app-overlay> <app-overlay [isActive]="isLoading"></app-overlay>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6 subscription-details">
<h4>Subscription Details</h4> <h4>Subscription Details</h4>
<div class="row mb-1">
<div class="col-md-9"><span class="info-label">Current Status</span></div>
<div class="col-md-3"><span class="info-value">Active</span></div>
</div>
<div class="row mb-1">
<div class="col-md-9"><span class="info-label">Expiry</span></div>
<div class="col-md-3"><span class="info-value">20/03/2021</span></div>
</div>
<div class="row mb-1">
<div class="col-md-9"><span class="info-label">Annual Charge</span></div>
<div class="col-md-3"><span class="info-value">AUD $59.00</span></div>
</div>
<div class="row mb-2">
<div class="col-md-9"><span class="info-label">Coupon code:</span></div>
<div class="col-md-3"><span class="info-value">EARLYBIRD50</span></div>
</div>
<div class="row">
<div class="col-md-12 d-flex">
<div class="info-action">Edit coupon code</div>
<span style="margin: 0 10px;">|</span>
<div class="info-action">Cancel subscription</div>
</div>
</div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<h4>Card Details</h4> <h4>Card Details</h4>
<div class="row mb-1">
<div class="col-md-8"><span class="info-label">Card Number:</span></div>
<div class="col-md-4"><span class="info-value">xxxx-xxxx-xxxx-4378</span></div>
</div>
<div class="row mb-1">
<div class="col-md-8"><span class="info-label">Expiry</span></div>
<div class="col-md-4"><span class="info-value">08/22</span></div>
</div>
<div class="row">
<div class="col-md-12 d-flex">
<div class="info-action" (click)="showCardPopup = true;">Edit card</div>
<span style="margin: 0 10px;">|</span>
<div class="info-action" (click)="showCardPopup = true;">Add card</div>
<span style="margin: 0 10px;">|</span>
<div class="info-action">Remove card</div>
</div>
</div>
</div> </div>
<div class="col-md-12 mt-3"> <div class="col-md-12 mt-3">
<h4>Card Details</h4> <h4>Transaction History</h4>
<div class="transaction-history mt-1">
<div class="transaction-row">
<div class="info-label">Date</div>
<div class="info-label">Transaction</div>
<div class="info-label">Amount</div>
<div class="info-label">Coupon Code</div>
<div class="info-label">Card</div>
</div>
<div class="transaction-row">
<!-- <div class="info-value">Date</div>-->
<!-- <div class="info-label">Transaction</div>-->
<!-- <div class="info-label">Amount</div>-->
<!-- <div class="info-label">Coupon Code</div>-->
<!-- <div class="info-label">Card</div>-->
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<p-dialog [(visible)]="showCardPopup" [modal]="true" [width]="720" [focusOnShow]="false" header="Card Details">
<div class="row">
<div class="col-md-6 form-group">
<label>Card Number</label>
<input type="text" class="form-control" placeholder="First Name" required name="FirstName">
</div>
<div class="col-md-6 form-group">
<label>Name on Card</label>
<input type="text" class="form-control" placeholder="First Name" required name="FirstName">
</div>
<div class="col-md-6 form-group">
<label>Expiry</label>
<input type="text" class="form-control" placeholder="First Name" required name="FirstName">
</div>
<div class="col-md-6 form-group">
<label>CCV</label>
<input type="text" class="form-control" placeholder="First Name" required name="FirstName">
</div>
</div>
</p-dialog>
frontend/angular/src/app/my-career-web/dashboard/account/account.component.scss
@import "../../../../styles/my-career-styles/variables"; @import "../../../../styles/my-career-styles/variables";
.mc-page-header-text {
height: 120px;
padding: 30px 8%;
}
.account-wrapper { .account-wrapper {
padding: 0 8%; padding: 0 8%;
...@@ -26,5 +31,37 @@ ...@@ -26,5 +31,37 @@
border: 1px solid #F37124; border: 1px solid #F37124;
} }
} }
.subscription-details {
}
.info-label, .info-value {
}
.info-value {
}
.info-label {
font-weight: 600;
}
.info-action {
font-size: 14px;
color: $primaryColor;
text-decoration: underline;
cursor: pointer;
}
.transaction-history {
.transaction-row {
display: flex;
justify-content: space-between;
}
}
} }
} }
frontend/angular/src/app/my-career-web/dashboard/account/account.component.ts
...@@ -9,6 +9,8 @@ import { BaseComponent } from '../../base/base.component'; ...@@ -9,6 +9,8 @@ import { BaseComponent } from '../../base/base.component';
}) })
export class AccountComponent extends BaseComponent implements OnInit, OnDestroy { export class AccountComponent extends BaseComponent implements OnInit, OnDestroy {
showCardPopup = false;
constructor( constructor(
private helperService: HelperService private helperService: HelperService
) { ) {
......
frontend/angular/src/app/my-career-web/dashboard/dashboard/dashboard.component.ts
import { Component, OnInit } from '@angular/core'; import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { BaseComponent } from '../../base/base.component'; import { BaseComponent } from '../../base/base.component';
import { AuthService } from '../../services/auth.service'; import { AuthService } from '../../services/auth.service';
...@@ -24,6 +24,7 @@ export class DashboardComponent extends BaseComponent implements OnInit { ...@@ -24,6 +24,7 @@ export class DashboardComponent extends BaseComponent implements OnInit {
private authService: AuthService, private authService: AuthService,
private router: Router, private router: Router,
private helperService: HelperService, private helperService: HelperService,
private changeDetectorRef: ChangeDetectorRef,
private personalDetailsService: PersonalDetailsService private personalDetailsService: PersonalDetailsService
) { ) {
super(); super();
...@@ -34,7 +35,7 @@ export class DashboardComponent extends BaseComponent implements OnInit { ...@@ -34,7 +35,7 @@ export class DashboardComponent extends BaseComponent implements OnInit {
.pipe(takeUntil(this.componentInView)) .pipe(takeUntil(this.componentInView))
.subscribe(response => { .subscribe(response => {
this.hideTaskBar = response; this.hideTaskBar = response;
this.changeDetectorRef.detectChanges();
}); });
this.personalDetailsService.careerProfileUpdated$ this.personalDetailsService.careerProfileUpdated$
.pipe(takeUntil(this.componentInView)) .pipe(takeUntil(this.componentInView))
......
frontend/angular/src/app/my-career-web/jobs/job/job-details/job-details.component.html
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<div class="row mt-3"> <div class="row mt-3">
<div class="col-md-6 form-group"> <div class="col-md-6 form-group">
<label>Job Title</label> <label>Job Title</label>
<app-form-control>` <app-form-control>
<input type="text" class="form-control" placeholder="Enter job title" required name="JobTitle" <input type="text" class="form-control" placeholder="Enter job title" required name="JobTitle"
[(ngModel)]="applicantJob.JobTitle"> [(ngModel)]="applicantJob.JobTitle">
</app-form-control> </app-form-control>
......
frontend/angular/src/app/my-career-web/jobs/job/job-profile/job-profile.component.html
<p> <div class="mc-page">
job-profile works!
</p> <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 class="mc-page-body-heading">Select a profile for the job </div>
<h5 class="mt-2">Would you like use the existing career Profile or create a custom profile?</h5>
<div class="row">
<div class="col-md-6 profile-option-wrapper">
<div class="profile-option selected">
<div class="mb-4">Use My Profile</div>
<button class="mc-btn-secondary" pButton label="Preview Profile"></button>
</div>
</div>
<div class="col-md-6 profile-option-wrapper">
<div class="profile-option">
Customize My Profile
</div>
</div>
<div class="col-md-12 mt-4 profile-actions">
<button class="mc-btn-primary" pButton label="Save and Exit"></button>
<button class="mc-btn-primary" pButton label="Next"></button>
</div>
</div>
</div>
</div>
</div>
frontend/angular/src/app/my-career-web/jobs/job/job-profile/job-profile.component.scss
@import "../../../../../styles/my-career-styles/variables";
.profile-option-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin: 10% 0;
}
.profile-option {
border: 2px solid $greyBorder;
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 250px;
flex-direction: column;
transition: .3s;
cursor: pointer;
border-radius: 8px;
&.selected {
box-shadow: 0 0 18px 0 rgba(18, 168, 222, 0.6);
border-color: $primaryColor;
background: $primaryColor;
color: $white;
.mc-btn-secondary {
border-color: $white;
background: $primaryColor !important;
color: $white !important;
}
}
&:hover {
box-shadow: 0 0 18px 0 rgba(229, 232, 235, 0.6);
}
}
.profile-actions {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 1024px) {
.profile-actions {
flex-direction: column;
justify-content: center;
text-align: center;
.mc-btn-primary {
margin: 20px auto;
}
}
}
frontend/angular/src/app/my-career-web/jobs/job/job-profile/job-profile.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { BaseComponent } from '../../../base/base.component';
@Component({ @Component({
selector: 'app-job-profile', selector: 'app-job-profile',
templateUrl: './job-profile.component.html', templateUrl: './job-profile.component.html',
styleUrls: ['./job-profile.component.scss'] styleUrls: ['./job-profile.component.scss']
}) })
export class JobProfileComponent implements OnInit {
constructor() { } export class JobProfileComponent extends BaseComponent implements OnInit {
constructor() {
super();
}
ngOnInit() { ngOnInit() {
} }
......
frontend/angular/src/app/my-career-web/jobs/jobs.routing.ts
...@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core'; ...@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import { JobsComponent } from './jobs/jobs.component'; import { JobsComponent } from './jobs/jobs.component';
import { JobDetailsComponent } from './job/job-details/job-details.component'; import { JobDetailsComponent } from './job/job-details/job-details.component';
import { JobProfileComponent } from './job/job-profile/job-profile.component';
const routes: Routes = [ const routes: Routes = [
{ {
...@@ -15,6 +16,10 @@ const routes: Routes = [ ...@@ -15,6 +16,10 @@ const routes: Routes = [
{ {
path: ':id', path: ':id',
component: JobDetailsComponent component: JobDetailsComponent
},
{
path: ':id/profile',
component: JobProfileComponent
} }
]; ];
......
frontend/angular/src/app/my-career-web/mc-shared/personal-details/personal-details.component.scss
@import "../../../../styles/my-career-styles/variables"; @import "../../../../styles/my-career-styles/variables";
.personal-details { .personal-details {
margin: -2% 4%; margin: -2% 4%;
background: #FFFFFF; background: #FFFFFF;
......
frontend/angular/src/styles/my-career-styles/_flex-helpers.scss
...@@ -49,4 +49,17 @@ ...@@ -49,4 +49,17 @@
&t-4 { margin-top: 2em; } &t-4 { margin-top: 2em; }
&t-5 { margin-top: 3em; } &t-5 { margin-top: 3em; }
&b-0 { margin-bottom: 0; }
&b-1 { margin-bottom: 0.5em; }
&b-2 { margin-bottom: 1em; }
&b-3 { margin-bottom: 1.5em; }
&b-4 { margin-bottom: 2em; }
&b-5 { margin-bottom: 3em; }
} }
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