mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
Profile creation part done.
This commit is contained in:
Anish Gurung
parent
39385049e5
commit
f75e93e3eb
10 changed files with 1000 additions and 486 deletions
|
|
@ -3,24 +3,37 @@
|
|||
<a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
|
||||
<nb-icon icon="menu-2-outline"></nb-icon>
|
||||
</a>
|
||||
<a class="logo" href="#" (click)="navigateHome()"><span><img src="assets/images/thread.png" alt="My Logo"></span>Resume Tailor</a>
|
||||
<a class="logo" href="#" (click)="navigateHome()"
|
||||
><span><img src="assets/images/thread.png" alt="My Logo" /></span>Resume
|
||||
Tailor</a
|
||||
>
|
||||
</div>
|
||||
<div class="spc"> </div>
|
||||
<nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
|
||||
<nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
|
||||
<div class="spc"></div>
|
||||
<nb-select
|
||||
[selected]="currentTheme"
|
||||
(selectedChange)="changeTheme($event)"
|
||||
status="primary"
|
||||
>
|
||||
<nb-option *ngFor="let theme of themes" [value]="theme.value">
|
||||
{{ theme.name }}</nb-option
|
||||
>
|
||||
</nb-select>
|
||||
</div>
|
||||
|
||||
<div class="header-container">
|
||||
<nb-actions size="small">
|
||||
|
||||
<nb-action class="control-item">
|
||||
<nb-search type="rotate-layout"></nb-search>
|
||||
</nb-action>
|
||||
<nb-action class="control-item" icon="email-outline"></nb-action>
|
||||
<nb-action class="control-item" icon="bell-outline"></nb-action>
|
||||
<nb-action class="user-action" *nbIsGranted="['view', 'user']">
|
||||
<nb-user [nbContextMenu]="userMenu" [onlyPicture]="userPictureOnly" [name]="user?.name" [picture]="user?.picture">
|
||||
<nb-user
|
||||
[nbContextMenu]="userMenu"
|
||||
[onlyPicture]="userPictureOnly"
|
||||
[name]="user?.name"
|
||||
[picture]="user?.picture"
|
||||
>
|
||||
</nb-user>
|
||||
</nb-action>
|
||||
</nb-actions>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
|
||||
import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService, NbMenuItem } from '@nebular/theme';
|
||||
|
||||
import { UserData } from '../../../@core/data/users';
|
||||
import { LayoutService } from '../../../@core/utils';
|
||||
import { map, takeUntil } from 'rxjs/operators';
|
||||
import { Subject } from 'rxjs';
|
||||
import { AuthService } from '../../../service/auth.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-header',
|
||||
|
|
@ -26,14 +27,14 @@ export class HeaderComponent implements OnInit, OnDestroy {
|
|||
value: 'dark',
|
||||
name: 'Dark',
|
||||
},
|
||||
{
|
||||
value: 'cosmic',
|
||||
name: 'Cosmic',
|
||||
},
|
||||
{
|
||||
value: 'corporate',
|
||||
name: 'Corporate',
|
||||
},
|
||||
// {
|
||||
// value: 'cosmic',
|
||||
// name: 'Cosmic',
|
||||
// },
|
||||
// {
|
||||
// value: 'corporate',
|
||||
// name: 'Corporate',
|
||||
// },
|
||||
];
|
||||
|
||||
currentTheme = 'default';
|
||||
|
|
@ -45,7 +46,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
|
|||
private themeService: NbThemeService,
|
||||
private userService: UserData,
|
||||
private layoutService: LayoutService,
|
||||
private breakpointService: NbMediaBreakpointsService) {
|
||||
private breakpointService: NbMediaBreakpointsService,
|
||||
private authService: AuthService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
|
@ -69,6 +71,12 @@ export class HeaderComponent implements OnInit, OnDestroy {
|
|||
takeUntil(this.destroy$),
|
||||
)
|
||||
.subscribe(themeName => this.currentTheme = themeName);
|
||||
|
||||
this.menuService.onItemClick().subscribe((event: { item: NbMenuItem }) => {
|
||||
if (event.item.title === 'Log out') {
|
||||
this.logout();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
|
|
@ -91,4 +99,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
|
|||
this.menuService.navigateHome();
|
||||
return false;
|
||||
}
|
||||
|
||||
logout(): void {
|
||||
this.authService.logout();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {
|
|||
NbSidebarModule,
|
||||
NbToastrModule,
|
||||
NbWindowModule,
|
||||
NbCheckboxModule
|
||||
} from '@nebular/theme';
|
||||
import { environment } from '../environments/environment';
|
||||
import { CoreModule } from './@core/core.module';
|
||||
|
|
@ -41,6 +42,7 @@ import { AuthGuard } from './service/auth-guard.service';
|
|||
}),
|
||||
CoreModule.forRoot(),
|
||||
ThemeModule.forRoot(),
|
||||
NbCheckboxModule
|
||||
],
|
||||
providers: [
|
||||
AuthGuard
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { AccordionComponent } from './accordion/accordion.component';
|
|||
import { InfiniteListComponent } from './infinite-list/infinite-list.component';
|
||||
import { ListComponent } from './list/list.component';
|
||||
import { StepperComponent } from './stepper/stepper.component';
|
||||
import { ProfileComponent } from './stepper/profile/profile.component';
|
||||
|
||||
const routes: Routes = [{
|
||||
path: '',
|
||||
|
|
@ -16,6 +17,10 @@ const routes: Routes = [{
|
|||
path: 'stepper',
|
||||
component: StepperComponent,
|
||||
},
|
||||
{
|
||||
path: 'stepper/profile',
|
||||
component: ProfileComponent,
|
||||
},
|
||||
{
|
||||
path: 'list',
|
||||
component: ListComponent,
|
||||
|
|
|
|||
|
|
@ -1 +1,97 @@
|
|||
<p>profile works!</p>
|
||||
<nb-card>
|
||||
<nb-card-header>User Profile</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="profile-details">
|
||||
<div class="personal-details">
|
||||
<h2>Personal Details</h2>
|
||||
<p><strong>Username:</strong> {{ userDetails.username }}</p>
|
||||
<p><strong>Email:</strong> {{ userDetails.email }}</p>
|
||||
<p><strong>Phone:</strong> {{ userDetails.phone }}</p>
|
||||
<p>
|
||||
<strong>Address:</strong> {{ userDetails.address1 }},
|
||||
{{ userDetails.address2 }}, {{ userDetails.city }},
|
||||
{{ userDetails.state }}, {{ userDetails.zip }}
|
||||
</p>
|
||||
<p>
|
||||
<strong>LinkedIn:</strong>
|
||||
<a href="{{ userDetails.linkedinLink }}" target="_blank">{{
|
||||
userDetails.linkedinLink
|
||||
}}</a>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Portfolio:</strong>
|
||||
<a href="{{ userDetails.portfolioLink }}" target="_blank">{{
|
||||
userDetails.portfolioLink
|
||||
}}</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="professional-summary">
|
||||
<h2>Professional Summary</h2>
|
||||
<p>{{ userDetails.professionalSummary }}</p>
|
||||
</div>
|
||||
<div class="experience">
|
||||
<h2>Experience</h2>
|
||||
<ul>
|
||||
<li *ngFor="let exp of userExperiences">
|
||||
<p><strong>Position:</strong> {{ exp.position }}</p>
|
||||
<p><strong>Employer:</strong> {{ exp.employer }}</p>
|
||||
<p><strong>Location:</strong> {{ exp.location }}</p>
|
||||
<p><strong>Start Date:</strong> {{ exp.startDate }}</p>
|
||||
<p><strong>End Date:</strong> {{ exp.endDate }}</p>
|
||||
<p><strong>Description:</strong> {{ exp.description }}</p>
|
||||
<div *ngIf="exp.projects && exp.projects.length > 0">
|
||||
<p><strong>Projects:</strong></p>
|
||||
<ul>
|
||||
<li *ngFor="let project of exp.projects">
|
||||
<p><strong>Name:</strong> {{ project.name }}</p>
|
||||
<p><strong>Description:</strong> {{ project.description }}</p>
|
||||
<p>
|
||||
<strong>Link:</strong>
|
||||
<a href="{{ project.link }}" target="_blank">{{
|
||||
project.link
|
||||
}}</a>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="education">
|
||||
<h2>Education</h2>
|
||||
<ul>
|
||||
<li *ngFor="let edu of userEducation">
|
||||
<p><strong>Degree Name:</strong> {{ edu.degreeName }}</p>
|
||||
<p><strong>School:</strong> {{ edu.school }}</p>
|
||||
<p><strong>Location:</strong> {{ edu.location }}</p>
|
||||
<p><strong>Major:</strong> {{ edu.major }}</p>
|
||||
<p><strong>Minor:</strong> {{ edu.minor }}</p>
|
||||
<p><strong>Start Date:</strong> {{ edu.startDate }}</p>
|
||||
<p><strong>End Date:</strong> {{ edu.endDate }}</p>
|
||||
<p><strong>Grade:</strong> {{ edu.grade }}</p>
|
||||
<p><strong>Description:</strong> {{ edu.description }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="certifications">
|
||||
<h2>Certifications</h2>
|
||||
<ul>
|
||||
<li *ngFor="let cert of userCertificates">
|
||||
<p><strong>Certificate Name:</strong> {{ cert.certificateName }}</p>
|
||||
<p><strong>Issuer:</strong> {{ cert.certificateIssuer }}</p>
|
||||
<p><strong>Year:</strong> {{ cert.certificateYear }}</p>
|
||||
<p><strong>Relevance:</strong> {{ cert.certificateRelevance }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="skills">
|
||||
<h2>Skills</h2>
|
||||
<ul>
|
||||
<li *ngFor="let skill of userSkills">
|
||||
<p><strong>Name:</strong> {{ skill.name }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,46 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { UserAPI } from '../../../../service/api/user-api.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-profile',
|
||||
templateUrl: './profile.component.html',
|
||||
styleUrls: ['./profile.component.scss']
|
||||
styleUrls: ['./profile.component.scss'],
|
||||
})
|
||||
export class ProfileComponent {
|
||||
export class ProfileComponent implements OnInit {
|
||||
userDetails: any = {};
|
||||
userExperiences: any[] = [];
|
||||
userEducation: any[] = [];
|
||||
userProjects: any[] = [];
|
||||
userSkills: any[] = [];
|
||||
userCertificates: any[] = [];
|
||||
// userResumes: any[] = [];
|
||||
// userCoverLetters: any[] = [];
|
||||
|
||||
constructor(private route: ActivatedRoute, private userAPI: UserAPI) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.route.queryParams.subscribe((params) => {
|
||||
const userId = params['userId']; // Get the userId from query params
|
||||
|
||||
if (userId) {
|
||||
this.userAPI.getUserDetails(userId).subscribe((response) => {
|
||||
if (response.success) {
|
||||
this.userDetails = response.data;
|
||||
this.userExperiences = this.userDetails.experiences || [];
|
||||
this.userEducation = this.userDetails.education || [];
|
||||
this.userProjects = this.userDetails.projects || [];
|
||||
this.userSkills = this.userDetails.skills || [];
|
||||
this.userCertificates = this.userDetails.certificates || [];
|
||||
// this.userResumes = this.userDetails.resumes || [];
|
||||
// this.userCoverLetters = this.userDetails.coverLetters || [];
|
||||
} else {
|
||||
console.error('Failed to retrieve user details:', response.message);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error('User ID not found in query parameters.');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<nb-step [label]="labelOne">
|
||||
<ng-template #labelOne>Personal details</ng-template>
|
||||
|
||||
<form [formGroup]="personalDetails">
|
||||
<!-- Start of form -->
|
||||
<nb-card>
|
||||
<nb-card-header> <h3>Personal Details</h3></nb-card-header>
|
||||
|
|
@ -13,39 +14,33 @@
|
|||
<div class="col-md-6">
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="fullName"
|
||||
for="username"
|
||||
class="text-muted font-weight-bold small"
|
||||
>Full Name</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="fullName"
|
||||
id="username"
|
||||
placeholder="Full name"
|
||||
formControlName="username"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group text-left">
|
||||
<label for="email" class="text-muted font-weight-bold small"
|
||||
>Email Address</label
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
class="form-control bg-light"
|
||||
id="email"
|
||||
placeholder="Email address"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group text-left">
|
||||
<label for="phone" class="text-muted font-weight-bold small"
|
||||
<label
|
||||
for="phone"
|
||||
class="text-muted font-weight-bold small"
|
||||
>Phone Number</label
|
||||
>
|
||||
<input
|
||||
type="tel"
|
||||
class="form-control bg-light"
|
||||
id="phone"
|
||||
formControlName="phone"
|
||||
placeholder="Phone number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="linkedin"
|
||||
|
|
@ -56,35 +51,117 @@
|
|||
type="url"
|
||||
class="form-control bg-light"
|
||||
id="linkedin"
|
||||
formControlName="linkedinLink"
|
||||
placeholder="LinkedIn URL"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="email"
|
||||
class="text-muted font-weight-bold small"
|
||||
>Email Address</label
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
class="form-control bg-light"
|
||||
id="email"
|
||||
formControlName="email"
|
||||
placeholder="Email address"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="website"
|
||||
class="text-muted font-weight-bold small"
|
||||
>Personal Website or Relevant Link</label
|
||||
>Portfolio Link / Website</label
|
||||
>
|
||||
<input
|
||||
type="url"
|
||||
class="form-control bg-light"
|
||||
id="website"
|
||||
formControlName="portfolioLink"
|
||||
placeholder="Website link"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12">
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="country"
|
||||
for="address1"
|
||||
class="text-muted font-weight-bold small"
|
||||
>Country</label
|
||||
>Street Address</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="country"
|
||||
placeholder="Country"
|
||||
id="address1"
|
||||
formControlName="address1"
|
||||
placeholder="Address 1"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="city"
|
||||
class="text-muted font-weight-bold small"
|
||||
>City</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="city"
|
||||
formControlName="city"
|
||||
placeholder="City"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-left">
|
||||
<label for="zip" class="text-muted font-weight-bold small"
|
||||
>Zip</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="zip"
|
||||
formControlName="zip"
|
||||
placeholder="Zip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="address2"
|
||||
class="text-muted font-weight-bold small"
|
||||
>Address 2</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="address2"
|
||||
formControlName="address2"
|
||||
placeholder="Address 2"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="state"
|
||||
class="text-muted font-weight-bold small"
|
||||
>State</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="state"
|
||||
formControlName="state"
|
||||
placeholder="State"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -92,13 +169,15 @@
|
|||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<!-- end of form -->
|
||||
<button nbButton disabled nbStepperNext>prev</button>
|
||||
</form>
|
||||
|
||||
<!-- <button nbButton disabled nbStepperNext>prev</button> -->
|
||||
<button nbButton nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
|
||||
<nb-step label="Experience">
|
||||
<form [formGroup]="experience">
|
||||
<!-- Start of form -->
|
||||
<nb-card>
|
||||
<nb-card-header><h3>Experience</h3></nb-card-header>
|
||||
|
|
@ -107,52 +186,20 @@
|
|||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group text-left">
|
||||
<label for="role" class="text-muted font-weight-bold small"
|
||||
<label
|
||||
for="role"
|
||||
class="text-muted font-weight-bold small"
|
||||
>What was your role at the company?</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="role"
|
||||
formControlName="position"
|
||||
placeholder="Your role at the company"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="company"
|
||||
class="text-muted font-weight-bold small"
|
||||
>For which company did you work?</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="company"
|
||||
placeholder="Company name"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="duration"
|
||||
class="text-muted font-weight-bold small"
|
||||
>How long were you with the company?</label
|
||||
>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="duration"
|
||||
placeholder="Start date"
|
||||
/>
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">-</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
placeholder="End date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="location"
|
||||
|
|
@ -163,11 +210,85 @@
|
|||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="location"
|
||||
formControlName="location"
|
||||
placeholder="Company location"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="duration"
|
||||
class="text-muted font-weight-bold small"
|
||||
>How long were you with the company?</label
|
||||
>
|
||||
<div class="input-group">
|
||||
<input
|
||||
nbInput
|
||||
type="date"
|
||||
class="form-control bg-light"
|
||||
id="duration"
|
||||
formControlName="startDate"
|
||||
placeholder="Start date"
|
||||
/>
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">-</span>
|
||||
</div>
|
||||
<input
|
||||
type="date"
|
||||
formControlName="endDate"
|
||||
class="form-control bg-light"
|
||||
placeholder="End date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="company"
|
||||
class="text-muted font-weight-bold small"
|
||||
>For which company did you work?</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="company"
|
||||
formControlName="employer"
|
||||
placeholder="Company name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="location"
|
||||
class="text-muted font-weight-bold small"
|
||||
>Company Website</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="location"
|
||||
formControlName="companyLink"
|
||||
placeholder="Website of the company.."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="location"
|
||||
class="text-muted font-weight-bold small"
|
||||
>Current Job</label
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-control bg-light"
|
||||
id="Current company"
|
||||
formControlName="currentJob"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="responsibilities"
|
||||
|
|
@ -178,6 +299,7 @@
|
|||
class="form-control bg-light"
|
||||
id="responsibilities"
|
||||
rows="5"
|
||||
formControlName="description"
|
||||
placeholder="Enter your responsibilities"
|
||||
></textarea>
|
||||
</div>
|
||||
|
|
@ -187,12 +309,14 @@
|
|||
</nb-card-body>
|
||||
</nb-card>
|
||||
<!-- end of form -->
|
||||
</form>
|
||||
|
||||
<button nbButton nbStepperPrevious>prev</button>
|
||||
<button nbButton nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
<nb-step label="Project">
|
||||
|
||||
<nb-step label="Project">
|
||||
<form [formGroup]="project">
|
||||
<!-- Start of form -->
|
||||
<nb-card>
|
||||
<nb-card-header><h3>Project</h3></nb-card-header>
|
||||
|
|
@ -210,9 +334,39 @@
|
|||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="projectTitle"
|
||||
formControlName="name"
|
||||
placeholder="Project title"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="projectDuration"
|
||||
class="text-muted font-weight-bold small"
|
||||
>When did you do your project?</label
|
||||
>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="date"
|
||||
class="form-control bg-light"
|
||||
id="projectDuration"
|
||||
formControlName="startDate"
|
||||
placeholder="Start date"
|
||||
/>
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">-</span>
|
||||
</div>
|
||||
<input
|
||||
type="date"
|
||||
formControlName="endDate"
|
||||
class="form-control bg-light"
|
||||
placeholder="End date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="organization"
|
||||
|
|
@ -223,32 +377,10 @@
|
|||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="organization"
|
||||
formControlName="employer"
|
||||
placeholder="Organization name"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="projectDuration"
|
||||
class="text-muted font-weight-bold small"
|
||||
>When did you do your project?</label
|
||||
>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="projectDuration"
|
||||
placeholder="Start date"
|
||||
/>
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">-</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
placeholder="End date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="projectURL"
|
||||
|
|
@ -259,11 +391,12 @@
|
|||
type="url"
|
||||
class="form-control bg-light"
|
||||
id="projectURL"
|
||||
formControlName="link"
|
||||
placeholder="Project URL"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="projectDescription"
|
||||
|
|
@ -274,6 +407,7 @@
|
|||
class="form-control bg-light"
|
||||
id="projectDescription"
|
||||
rows="5"
|
||||
formControlName="description"
|
||||
placeholder="Describe your project"
|
||||
></textarea>
|
||||
</div>
|
||||
|
|
@ -283,12 +417,14 @@
|
|||
</nb-card-body>
|
||||
</nb-card>
|
||||
<!-- end of form -->
|
||||
</form>
|
||||
|
||||
<button nbButton nbStepperPrevious>prev</button>
|
||||
<button nbButton nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
<nb-step label="Education">
|
||||
|
||||
<nb-step label="Education">
|
||||
<form [formGroup]="education">
|
||||
<!-- Start of form -->
|
||||
<nb-card>
|
||||
<nb-card-header><h3>Education</h3></nb-card-header>
|
||||
|
|
@ -300,16 +436,21 @@
|
|||
<label
|
||||
for="degree"
|
||||
class="text-muted font-weight-bold small"
|
||||
>What is your degree or other qualification and
|
||||
major?</label
|
||||
>What is your degree earned?</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="degree"
|
||||
formControlName="degreeName"
|
||||
placeholder="Your degree and major"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6"></div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="institution"
|
||||
|
|
@ -320,9 +461,53 @@
|
|||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="institution"
|
||||
formControlName="school"
|
||||
placeholder="Institution name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="degree"
|
||||
class="text-muted font-weight-bold small"
|
||||
>What is your major field of study?</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="degree"
|
||||
formControlName="major"
|
||||
placeholder="Your major"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="graduationYear"
|
||||
class="text-muted font-weight-bold small"
|
||||
>When did you earn your degree/qualification?</label
|
||||
>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="date"
|
||||
class="form-control bg-light"
|
||||
id="educationDuration"
|
||||
formControlName="startDate"
|
||||
placeholder="Start date"
|
||||
/>
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">-</span>
|
||||
</div>
|
||||
<input
|
||||
type="date"
|
||||
formControlName="endDate"
|
||||
class="form-control bg-light"
|
||||
placeholder="End date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="institutionLocation"
|
||||
|
|
@ -333,32 +518,21 @@
|
|||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="institutionLocation"
|
||||
formControlName="location"
|
||||
placeholder="Institution location"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="graduationYear"
|
||||
for="minor"
|
||||
class="text-muted font-weight-bold small"
|
||||
>When did you earn your degree/qualification?</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="graduationYear"
|
||||
placeholder="Graduation year"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group text-left">
|
||||
<label for="minor" class="text-muted font-weight-bold small"
|
||||
>Did you minor in anything?</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="minor"
|
||||
formControlName="minor"
|
||||
placeholder="Minor subject"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -370,9 +544,13 @@
|
|||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="gpa"
|
||||
formControlName="grade"
|
||||
placeholder="Your GPA"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="additionalInfo"
|
||||
|
|
@ -383,6 +561,7 @@
|
|||
class="form-control bg-light"
|
||||
id="additionalInfo"
|
||||
rows="5"
|
||||
formControlName="description"
|
||||
placeholder="Additional information"
|
||||
></textarea>
|
||||
</div>
|
||||
|
|
@ -392,12 +571,14 @@
|
|||
</nb-card-body>
|
||||
</nb-card>
|
||||
<!-- end of form -->
|
||||
</form>
|
||||
|
||||
<button nbButton nbStepperPrevious>prev</button>
|
||||
<button nbButton nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
<nb-step label="Certifications">
|
||||
|
||||
<nb-step label="Certifications">
|
||||
<form [formGroup]="certifications">
|
||||
<!-- Start of form -->
|
||||
<nb-card>
|
||||
<nb-card-header> <h3>Certifications</h3></nb-card-header>
|
||||
|
|
@ -415,9 +596,39 @@
|
|||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="certificateName"
|
||||
formControlName="name"
|
||||
placeholder="Certificate name"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="certificateYear"
|
||||
class="text-muted font-weight-bold small"
|
||||
>When did you get the certificate?</label
|
||||
>
|
||||
<div class="input-group">
|
||||
<input
|
||||
nbInput
|
||||
type="date"
|
||||
class="form-control bg-light"
|
||||
id="duration"
|
||||
formControlName="startDate"
|
||||
placeholder="Start date"
|
||||
/>
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">-</span>
|
||||
</div>
|
||||
<input
|
||||
type="date"
|
||||
formControlName="endDate"
|
||||
class="form-control bg-light"
|
||||
placeholder="End date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="certificateIssuer"
|
||||
|
|
@ -428,22 +639,13 @@
|
|||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="certificateIssuer"
|
||||
formControlName="issuer"
|
||||
placeholder="Certificate issuer"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="certificateYear"
|
||||
class="text-muted font-weight-bold small"
|
||||
>When did you get the certificate?</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control bg-light"
|
||||
id="certificateYear"
|
||||
placeholder="Certificate year"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="certificateRelevance"
|
||||
|
|
@ -454,6 +656,7 @@
|
|||
class="form-control bg-light"
|
||||
id="certificateRelevance"
|
||||
rows="5"
|
||||
formControlName="description"
|
||||
placeholder="Certificate relevance"
|
||||
></textarea>
|
||||
</div>
|
||||
|
|
@ -463,12 +666,14 @@
|
|||
</nb-card-body>
|
||||
</nb-card>
|
||||
<!-- end of form -->
|
||||
</form>
|
||||
|
||||
<button nbButton nbStepperPrevious>prev</button>
|
||||
<button nbButton nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
<nb-step label="Skills">
|
||||
|
||||
<nb-step label="Skills">
|
||||
<form [formGroup]="skills">
|
||||
<!-- Start of form -->
|
||||
<nb-card>
|
||||
<nb-card-header><h3>Skills</h3></nb-card-header>
|
||||
|
|
@ -476,19 +681,18 @@
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="skills"
|
||||
class="text-muted font-weight-bold small"
|
||||
>Enter the skills you possess</label
|
||||
>
|
||||
<textarea
|
||||
<input
|
||||
type="text"
|
||||
formControlName="name"
|
||||
class="form-control bg-light"
|
||||
id="skills"
|
||||
rows="5"
|
||||
placeholder="Enter your skills"
|
||||
></textarea>
|
||||
placeholder="Write skill name..Eg; Python"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -496,21 +700,23 @@
|
|||
</nb-card-body>
|
||||
</nb-card>
|
||||
<!-- end of form -->
|
||||
</form>
|
||||
|
||||
<button nbButton nbStepperPrevious>prev</button>
|
||||
<button nbButton nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
|
||||
<nb-step [label]="labelFour">
|
||||
<ng-template #labelFour>Summary</ng-template>
|
||||
|
||||
<form [formGroup]="professionalSummary">
|
||||
<!-- Start of form -->
|
||||
<nb-card>
|
||||
<nb-card-header><h3>Summary</h3></nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="form-group text-left">
|
||||
<label
|
||||
for="professionalSummary"
|
||||
|
|
@ -521,6 +727,7 @@
|
|||
class="form-control bg-light"
|
||||
id="professionalSummary"
|
||||
rows="5"
|
||||
formControlName="professionalSummary"
|
||||
placeholder="Write your professional summary"
|
||||
></textarea>
|
||||
</div>
|
||||
|
|
@ -530,11 +737,11 @@
|
|||
</nb-card-body>
|
||||
</nb-card>
|
||||
<!-- end of form -->
|
||||
</form>
|
||||
|
||||
<button nbButton nbStepperPrevious>prev</button>
|
||||
<button nbButton disabled nbStepperNext>next</button>
|
||||
<button nbButton (click)="submitForms()">Submit</button>
|
||||
</nb-step>
|
||||
</nb-stepper>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { Router, NavigationExtras } from '@angular/router';
|
||||
|
||||
import { UserAPI } from '../../../service/api/user-api.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-stepper',
|
||||
|
|
@ -8,36 +11,117 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
|
|||
})
|
||||
export class StepperComponent implements OnInit {
|
||||
|
||||
firstForm: UntypedFormGroup;
|
||||
secondForm: UntypedFormGroup;
|
||||
thirdForm: UntypedFormGroup;
|
||||
personalDetails: FormGroup;
|
||||
experience: FormGroup;
|
||||
project: FormGroup;
|
||||
education: FormGroup;
|
||||
certifications: FormGroup;
|
||||
skills: FormGroup;
|
||||
professionalSummary: FormGroup;
|
||||
userId: string
|
||||
|
||||
constructor(private fb: UntypedFormBuilder) {
|
||||
constructor(private fb: FormBuilder, private userAPI: UserAPI, private router: Router) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.firstForm = this.fb.group({
|
||||
firstCtrl: ['', Validators.required],
|
||||
this.personalDetails = this.fb.group({
|
||||
username: [''],
|
||||
email: [''],
|
||||
phone: [''],
|
||||
address1: [''],
|
||||
address2: [''],
|
||||
city: [''],
|
||||
state: [''],
|
||||
zip: [''],
|
||||
linkedinLink: [''],
|
||||
portfolioLink: [''],
|
||||
});
|
||||
|
||||
this.secondForm = this.fb.group({
|
||||
secondCtrl: ['', Validators.required],
|
||||
this.experience = this.fb.group({
|
||||
position: [''],
|
||||
employer: [''],
|
||||
location: [''],
|
||||
startDate: [''],
|
||||
endDate: [''],
|
||||
currentJob: [''],
|
||||
companyLink: [''],
|
||||
description: [''],
|
||||
});
|
||||
|
||||
this.thirdForm = this.fb.group({
|
||||
thirdCtrl: ['', Validators.required],
|
||||
this.project = this.fb.group({
|
||||
name: [''],
|
||||
link: [''],
|
||||
employer: [''],
|
||||
description: [''],
|
||||
startDate: [''],
|
||||
endDate: [''],
|
||||
});
|
||||
|
||||
this.education = this.fb.group({
|
||||
degreeName: [''],
|
||||
school: [''],
|
||||
location: [''],
|
||||
major: [''],
|
||||
minor: [''],
|
||||
startDate: [''],
|
||||
endDate: [''],
|
||||
grade: [''],
|
||||
description: [''],
|
||||
});
|
||||
|
||||
this.certifications = this.fb.group({
|
||||
name: [''],
|
||||
issuer: [''],
|
||||
startDate: [''],
|
||||
endDate: [''],
|
||||
description: [''],
|
||||
});
|
||||
|
||||
this.skills = this.fb.group({
|
||||
name: [''],
|
||||
});
|
||||
|
||||
this.professionalSummary = this.fb.group({
|
||||
professionalSummary: [''],
|
||||
});
|
||||
}
|
||||
|
||||
onFirstSubmit() {
|
||||
this.firstForm.markAsDirty();
|
||||
}
|
||||
async submitForms() {
|
||||
try {
|
||||
// Combine professional summary with personal details
|
||||
const personalDetailsWithSummary = {
|
||||
...this.personalDetails.value,
|
||||
professionalSummary: this.professionalSummary.value.professionalSummary,
|
||||
password: 'password',
|
||||
role: 'USER'
|
||||
};
|
||||
|
||||
onSecondSubmit() {
|
||||
this.secondForm.markAsDirty();
|
||||
}
|
||||
// Save personal details including professional summary
|
||||
const userDetailsResponse = await this.userAPI.saveUserDetails(personalDetailsWithSummary).toPromise();
|
||||
this.userId = userDetailsResponse.data.id;
|
||||
|
||||
onThirdSubmit() {
|
||||
this.thirdForm.markAsDirty();
|
||||
console.log(this.userId)
|
||||
|
||||
// Save other details using the obtained user ID
|
||||
await Promise.all([
|
||||
this.userAPI.saveExperience(this.experience.value, this.userId).toPromise(),
|
||||
this.userAPI.saveEducation(this.education.value, this.userId).toPromise(),
|
||||
this.userAPI.saveProjects(this.project.value, this.userId).toPromise(),
|
||||
this.userAPI.saveSkills(this.skills.value, this.userId).toPromise(),
|
||||
this.userAPI.saveCertifications(this.certifications.value, this.userId).toPromise()
|
||||
]);
|
||||
|
||||
|
||||
console.log("userID: ", this.userId)
|
||||
|
||||
// Navigate to the profile page
|
||||
const navigationExtras: NavigationExtras = {
|
||||
queryParams: { userId: this.userId }
|
||||
};
|
||||
this.router.navigateByUrl('/pages/layout/stepper/profile', navigationExtras);
|
||||
} catch (error) {
|
||||
console.error('Error occurred while saving user details:', error);
|
||||
// Handle error
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
59
src/app/service/api/user-api.service.ts
Normal file
59
src/app/service/api/user-api.service.ts
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class UserAPI {
|
||||
|
||||
private baseUrl = 'http://localhost:8080/api';
|
||||
private token: string;
|
||||
|
||||
constructor(private http: HttpClient) {
|
||||
this.token = localStorage.getItem('accessToken');
|
||||
}
|
||||
|
||||
// Saving user details
|
||||
saveUserDetails(data: any): Observable<any> {
|
||||
const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`);
|
||||
return this.http.post(`${this.baseUrl}/users`, data, { headers });
|
||||
}
|
||||
|
||||
// Get single user
|
||||
getUserDetails(userId: string): Observable<any> {
|
||||
console.log(userId)
|
||||
const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`);
|
||||
return this.http.get<any>(`${this.baseUrl}/users/${userId}`, { headers });
|
||||
}
|
||||
|
||||
saveExperience(data: any, userId: string): Observable<any> {
|
||||
console.log(userId)
|
||||
const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`);
|
||||
return this.http.post(`${this.baseUrl}/experiences?userId=${userId}`, data, { headers });
|
||||
}
|
||||
|
||||
saveEducation(data: any, userId: string): Observable<any> {
|
||||
console.log(userId)
|
||||
const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`);
|
||||
return this.http.post(`${this.baseUrl}/education?userId=${userId}`, data, { headers });
|
||||
}
|
||||
|
||||
saveProjects(data: any, userId: string): Observable<any> {
|
||||
console.log(userId)
|
||||
const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`);
|
||||
return this.http.post(`${this.baseUrl}/projects?userId=${userId}`, data, { headers });
|
||||
}
|
||||
|
||||
saveSkills(data: any, userId: string): Observable<any> {
|
||||
console.log(userId)
|
||||
const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`);
|
||||
return this.http.post(`${this.baseUrl}/skills?userId=${userId}`, data, { headers });
|
||||
}
|
||||
|
||||
saveCertifications(data: any, userId: string): Observable<any> {
|
||||
console.log(userId)
|
||||
const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`);
|
||||
return this.http.post(`${this.baseUrl}/certifications?userId=${userId}`, data, { headers });
|
||||
}
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@ export class AuthService {
|
|||
await this.fireAuth.signOut();
|
||||
localStorage.removeItem('accessToken');
|
||||
localStorage.removeItem('accessTokenExpiresIn');
|
||||
this.router.navigate(['dashboard'], { queryParams: { logout: true } });
|
||||
this.router.navigate(['auth/login'], { queryParams: { logout: true } });
|
||||
} catch (error: any) {
|
||||
throw error;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue