mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
UI changes- modified profile component, ai-resume generate component
This commit is contained in:
dawit-kiros
parent
aeb832526c
commit
fd8e3b06fa
15 changed files with 1136 additions and 1003 deletions
33
src/app/pages/forms/ai-resume/ai-resume.component.html
Normal file
33
src/app/pages/forms/ai-resume/ai-resume.component.html
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-12">
|
||||||
|
<nb-card>
|
||||||
|
<nb-card-header>Create AI Resume</nb-card-header>
|
||||||
|
<nb-card-body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4">
|
||||||
|
<form><textarea
|
||||||
|
class="form-control bg-light"
|
||||||
|
id="professionalSummary"
|
||||||
|
rows="15"
|
||||||
|
|
||||||
|
placeholder="Write Job Description"
|
||||||
|
></textarea></form>
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<button nbButton [status]=status outline [size]="size">
|
||||||
|
AI Generate
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div>--- placeholder for viewer ---</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
20
src/app/pages/forms/ai-resume/ai-resume.component.scss
Normal file
20
src/app/pages/forms/ai-resume/ai-resume.component.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
@import '../../../@theme/styles/themes';
|
||||||
|
|
||||||
|
@include nb-install-component() {
|
||||||
|
.buttons-row {
|
||||||
|
margin: -0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button[nbButton] {
|
||||||
|
margin: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-icon {
|
||||||
|
@include nb-ltr(margin-right, 0.5rem);
|
||||||
|
@include nb-rtl(margin-left, 0.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-card {
|
||||||
|
height: 8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
13
src/app/pages/forms/ai-resume/ai-resume.component.ts
Normal file
13
src/app/pages/forms/ai-resume/ai-resume.component.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-buttons',
|
||||||
|
styleUrls: ['./ai-resume.component.scss'],
|
||||||
|
templateUrl: './ai-resume.component.html',
|
||||||
|
})
|
||||||
|
export class AiResumeComponent {
|
||||||
|
status: NbComponentStatus = 'primary' ;
|
||||||
|
shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
|
||||||
|
size: NbComponentSize = 'tiny';
|
||||||
|
}
|
||||||
|
|
@ -6,6 +6,7 @@ import { FormInputsComponent } from './form-inputs/form-inputs.component';
|
||||||
import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
|
import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
|
||||||
import { DatepickerComponent } from './datepicker/datepicker.component';
|
import { DatepickerComponent } from './datepicker/datepicker.component';
|
||||||
import { ButtonsComponent } from './buttons/buttons.component';
|
import { ButtonsComponent } from './buttons/buttons.component';
|
||||||
|
import { AiResumeComponent } from './ai-resume/ai-resume.component';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{
|
{
|
||||||
|
|
@ -28,6 +29,10 @@ const routes: Routes = [
|
||||||
path: 'buttons',
|
path: 'buttons',
|
||||||
component: ButtonsComponent,
|
component: ButtonsComponent,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'ai-resume',
|
||||||
|
component: AiResumeComponent,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'datepicker',
|
path: 'datepicker',
|
||||||
component: DatepickerComponent,
|
component: DatepickerComponent,
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@ import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
|
||||||
import { DatepickerComponent } from './datepicker/datepicker.component';
|
import { DatepickerComponent } from './datepicker/datepicker.component';
|
||||||
import { ButtonsComponent } from './buttons/buttons.component';
|
import { ButtonsComponent } from './buttons/buttons.component';
|
||||||
import { FormsModule as ngFormsModule } from '@angular/forms';
|
import { FormsModule as ngFormsModule } from '@angular/forms';
|
||||||
|
import { AiResumeComponent } from './ai-resume/ai-resume.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
|
@ -39,6 +40,7 @@ import { FormsModule as ngFormsModule } from '@angular/forms';
|
||||||
declarations: [
|
declarations: [
|
||||||
FormsComponent,
|
FormsComponent,
|
||||||
ButtonsComponent,
|
ButtonsComponent,
|
||||||
|
AiResumeComponent,
|
||||||
FormInputsComponent,
|
FormInputsComponent,
|
||||||
FormLayoutsComponent,
|
FormLayoutsComponent,
|
||||||
DatepickerComponent,
|
DatepickerComponent,
|
||||||
|
|
|
||||||
|
|
@ -1,99 +1,781 @@
|
||||||
<nb-card>
|
<nb-card class="col-md-12 col-lg-12 col-xxxl-12">
|
||||||
<nb-card-header>User Profile</nb-card-header>
|
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<div class="profile-details">
|
<nb-stepper orientation="horizontal">
|
||||||
<div class="personal-details">
|
<nb-step [label]="labelOne">
|
||||||
<h2>Personal Details</h2>
|
<ng-template #labelOne>Personal details</ng-template>
|
||||||
<p><strong>Username:</strong> {{ userDetails.username }}</p>
|
|
||||||
<p><strong>Email:</strong> {{ userDetails.email }}</p>
|
<form [formGroup]="personalDetails">
|
||||||
<p><strong>Phone:</strong> {{ userDetails.phone }}</p>
|
<!-- Start of form -->
|
||||||
<p>
|
<nb-card>
|
||||||
<strong>Address:</strong> {{ userDetails.address1 }},
|
<nb-card-header> <h3>Personal Details</h3></nb-card-header>
|
||||||
{{ userDetails.address2 }}, {{ userDetails.city }},
|
<nb-card-body>
|
||||||
{{ userDetails.state }}, {{ userDetails.zip }}
|
<div class="container">
|
||||||
</p>
|
<div class="row">
|
||||||
<p>
|
<div class="col-md-6">
|
||||||
<strong>LinkedIn:</strong>
|
<div class="form-group text-left">
|
||||||
<a href="{{ userDetails.linkedinLink }}" target="_blank">{{
|
<label
|
||||||
userDetails.linkedinLink
|
for="username"
|
||||||
}}</a>
|
class="text-muted font-weight-bold small"
|
||||||
</p>
|
>Full Name</label
|
||||||
<p>
|
>
|
||||||
<strong>Portfolio:</strong>
|
<input
|
||||||
<a href="{{ userDetails.portfolioLink }}" target="_blank">{{
|
type="text"
|
||||||
userDetails.portfolioLink
|
class="form-control bg-light"
|
||||||
}}</a>
|
id="username"
|
||||||
</p>
|
placeholder="Full name"
|
||||||
</div>
|
formControlName="username"
|
||||||
<div class="professional-summary">
|
/>
|
||||||
<h2>Professional Summary</h2>
|
</div>
|
||||||
<p>{{ userDetails.professionalSummary }}</p>
|
<div class="form-group text-left">
|
||||||
</div>
|
<label
|
||||||
<div class="experience">
|
for="phone"
|
||||||
<h2>Experience</h2>
|
class="text-muted font-weight-bold small"
|
||||||
<ul>
|
>Phone Number</label
|
||||||
<li *ngFor="let exp of userExperiences">
|
>
|
||||||
<p><strong>Position:</strong> {{ exp.position }}</p>
|
<input
|
||||||
<p><strong>Employer:</strong> {{ exp.employer }}</p>
|
type="tel"
|
||||||
<p><strong>Location:</strong> {{ exp.location }}</p>
|
class="form-control bg-light"
|
||||||
<p><strong>Start Date:</strong> {{ exp.startDate }}</p>
|
id="phone"
|
||||||
<p><strong>End Date:</strong> {{ exp.endDate }}</p>
|
formControlName="phone"
|
||||||
<p><strong>Description:</strong> {{ exp.description }}</p>
|
placeholder="Phone number"
|
||||||
<div *ngIf="exp.projects && exp.projects.length > 0">
|
/>
|
||||||
<p><strong>Projects:</strong></p>
|
</div>
|
||||||
<ul>
|
|
||||||
<li *ngFor="let project of exp.projects">
|
<div class="form-group text-left">
|
||||||
<p><strong>Name:</strong> {{ project.name }}</p>
|
<label
|
||||||
<p><strong>Description:</strong> {{ project.description }}</p>
|
for="linkedin"
|
||||||
<p>
|
class="text-muted font-weight-bold small"
|
||||||
<strong>Link:</strong>
|
>LinkedIn URL</label
|
||||||
<a href="{{ project.link }}" target="_blank">{{
|
>
|
||||||
project.link
|
<input
|
||||||
}}</a>
|
type="url"
|
||||||
</p>
|
class="form-control bg-light"
|
||||||
</li>
|
id="linkedin"
|
||||||
</ul>
|
formControlName="linkedinLink"
|
||||||
</div>
|
placeholder="LinkedIn URL"
|
||||||
</li>
|
/>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="education">
|
<div class="col-md-6">
|
||||||
<h2>Education</h2>
|
<div class="form-group text-left">
|
||||||
<ul>
|
<label
|
||||||
<li *ngFor="let edu of userEducation">
|
for="email"
|
||||||
<p><strong>Degree Name:</strong> {{ edu.degreeName }}</p>
|
class="text-muted font-weight-bold small"
|
||||||
<p><strong>School:</strong> {{ edu.school }}</p>
|
>Email Address</label
|
||||||
<p><strong>Location:</strong> {{ edu.location }}</p>
|
>
|
||||||
<p><strong>Major:</strong> {{ edu.major }}</p>
|
<input
|
||||||
<p><strong>Minor:</strong> {{ edu.minor }}</p>
|
type="email"
|
||||||
<p><strong>Start Date:</strong> {{ edu.startDate }}</p>
|
class="form-control bg-light"
|
||||||
<p><strong>End Date:</strong> {{ edu.endDate }}</p>
|
id="email"
|
||||||
<p><strong>Grade:</strong> {{ edu.grade }}</p>
|
formControlName="email"
|
||||||
<p><strong>Description:</strong> {{ edu.description }}</p>
|
placeholder="Email address"
|
||||||
</li>
|
/>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
<div class="form-group text-left">
|
||||||
<div class="certifications">
|
<label
|
||||||
<h2>Certifications</h2>
|
for="website"
|
||||||
<ul>
|
class="text-muted font-weight-bold small"
|
||||||
<li *ngFor="let cert of userCertificates">
|
>Portfolio Link / Website</label
|
||||||
<p><strong>Certificate Name:</strong> {{ cert.name }}</p>
|
>
|
||||||
<p><strong>Issuer:</strong> {{ cert.issuer }}</p>
|
<input
|
||||||
<p>
|
type="url"
|
||||||
<strong>Date:</strong> {{ cert.startDate }} - {{ cert.endDate }}
|
class="form-control bg-light"
|
||||||
</p>
|
id="website"
|
||||||
<p><strong>Relevance:</strong> {{ cert.description }}</p>
|
formControlName="portfolioLink"
|
||||||
</li>
|
placeholder="Website link"
|
||||||
</ul>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="skills">
|
</div>
|
||||||
<h2>Skills</h2>
|
|
||||||
<ul>
|
<div class="col-md-12">
|
||||||
<li *ngFor="let skill of userSkills">
|
<hr />
|
||||||
<p><strong>Name:</strong> {{ skill.name }}</p>
|
</div>
|
||||||
</li>
|
|
||||||
</ul>
|
<div class="col-md-6">
|
||||||
</div>
|
<div class="form-group text-left">
|
||||||
</div>
|
<label
|
||||||
|
for="address1"
|
||||||
|
class="text-muted font-weight-bold small"
|
||||||
|
>Street Address</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control bg-light"
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
|
<!-- end of form -->
|
||||||
|
</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>
|
||||||
|
<nb-card-body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="form-group text-left">
|
||||||
|
<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="location"
|
||||||
|
class="text-muted font-weight-bold small"
|
||||||
|
>Where was the company located?</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
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">
|
||||||
|
<div><label
|
||||||
|
for="responsibilities"
|
||||||
|
class="text-muted font-weight-bold small"
|
||||||
|
>What did you do at the company?</label
|
||||||
|
> <button nbButton [status]=status outline [size]=size>
|
||||||
|
AI Generate
|
||||||
|
</button></div>
|
||||||
|
<textarea
|
||||||
|
class="form-control bg-light"
|
||||||
|
id="responsibilities"
|
||||||
|
rows="5"
|
||||||
|
formControlName="description"
|
||||||
|
placeholder="Enter your responsibilities"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<form [formGroup]="project">
|
||||||
|
<!-- Start of form -->
|
||||||
|
<nb-card>
|
||||||
|
<nb-card-header><h3>Project</h3></nb-card-header>
|
||||||
|
<nb-card-body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="form-group text-left">
|
||||||
|
<label
|
||||||
|
for="projectTitle"
|
||||||
|
class="text-muted font-weight-bold small"
|
||||||
|
>Give your project a title</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
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"
|
||||||
|
class="text-muted font-weight-bold small"
|
||||||
|
>In which organization did you do your project?</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control bg-light"
|
||||||
|
id="organization"
|
||||||
|
formControlName="employer"
|
||||||
|
placeholder="Organization name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="form-group text-left">
|
||||||
|
<label
|
||||||
|
for="projectURL"
|
||||||
|
class="text-muted font-weight-bold small"
|
||||||
|
>Project URL</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
class="form-control bg-light"
|
||||||
|
id="projectURL"
|
||||||
|
formControlName="link"
|
||||||
|
placeholder="Project URL"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="form-group text-left">
|
||||||
|
<div><label
|
||||||
|
for="projectDescription"
|
||||||
|
class="text-muted font-weight-bold small"
|
||||||
|
>
|
||||||
|
Now describe what you did</label
|
||||||
|
> <button nbButton [status]=status outline [size]=size>
|
||||||
|
AI Generate
|
||||||
|
</button></div>
|
||||||
|
<textarea
|
||||||
|
class="form-control bg-light"
|
||||||
|
id="projectDescription"
|
||||||
|
rows="5"
|
||||||
|
formControlName="description"
|
||||||
|
placeholder="Describe your project"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<form [formGroup]="education">
|
||||||
|
<!-- Start of form -->
|
||||||
|
<nb-card>
|
||||||
|
<nb-card-header><h3>Education</h3></nb-card-header>
|
||||||
|
<nb-card-body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="form-group text-left">
|
||||||
|
<label
|
||||||
|
for="degree"
|
||||||
|
class="text-muted font-weight-bold small"
|
||||||
|
>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"
|
||||||
|
class="text-muted font-weight-bold small"
|
||||||
|
>Where did you earn your degree/qualification?</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
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"
|
||||||
|
class="text-muted font-weight-bold small"
|
||||||
|
>Where is the institution located?</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control bg-light"
|
||||||
|
id="institutionLocation"
|
||||||
|
formControlName="location"
|
||||||
|
placeholder="Institution location"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
<div class="form-group text-left">
|
||||||
|
<label for="gpa" class="text-muted font-weight-bold small"
|
||||||
|
>GPA (if applicable)</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
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"
|
||||||
|
class="text-muted font-weight-bold small"
|
||||||
|
>Open field for additional information</label
|
||||||
|
>
|
||||||
|
<textarea
|
||||||
|
class="form-control bg-light"
|
||||||
|
id="additionalInfo"
|
||||||
|
rows="5"
|
||||||
|
formControlName="description"
|
||||||
|
placeholder="Additional information"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<form [formGroup]="certifications">
|
||||||
|
<!-- Start of form -->
|
||||||
|
<nb-card>
|
||||||
|
<nb-card-header> <h3>Certifications</h3></nb-card-header>
|
||||||
|
<nb-card-body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="form-group text-left">
|
||||||
|
<label
|
||||||
|
for="certificateName"
|
||||||
|
class="text-muted font-weight-bold small"
|
||||||
|
>What was the certificate name?</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
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"
|
||||||
|
class="text-muted font-weight-bold small"
|
||||||
|
>Where did you get the certificate?</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control bg-light"
|
||||||
|
id="certificateIssuer"
|
||||||
|
formControlName="issuer"
|
||||||
|
placeholder="Certificate issuer"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="form-group text-left">
|
||||||
|
<label
|
||||||
|
for="certificateRelevance"
|
||||||
|
class="text-muted font-weight-bold small"
|
||||||
|
>How is the certificate relevant?</label
|
||||||
|
>
|
||||||
|
<textarea
|
||||||
|
class="form-control bg-light"
|
||||||
|
id="certificateRelevance"
|
||||||
|
rows="5"
|
||||||
|
formControlName="description"
|
||||||
|
placeholder="Certificate relevance"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<form [formGroup]="skills">
|
||||||
|
<!-- Start of form -->
|
||||||
|
<nb-card>
|
||||||
|
<nb-card-header><h3>Skills</h3></nb-card-header>
|
||||||
|
<nb-card-body>
|
||||||
|
<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
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
formControlName="name"
|
||||||
|
class="form-control bg-light"
|
||||||
|
placeholder="Write skill name..Eg; Python"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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-12">
|
||||||
|
<div class="form-group text-left">
|
||||||
|
<div><label
|
||||||
|
for="professionalSummary"
|
||||||
|
class="text-muted font-weight-bold small"
|
||||||
|
>Write a professional summary</label
|
||||||
|
><button nbButton [status]=status outline [size]=size>
|
||||||
|
AI Generate
|
||||||
|
</button></div>
|
||||||
|
<textarea
|
||||||
|
class="form-control bg-light"
|
||||||
|
id="professionalSummary"
|
||||||
|
rows="5"
|
||||||
|
formControlName="professionalSummary"
|
||||||
|
placeholder="Write your professional summary"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
|
<!-- end of form -->
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<button nbButton nbStepperPrevious>prev</button>
|
||||||
|
<button nbButton nbStepperNext>next</button>
|
||||||
|
<button nbButton (click)="submitForms()">Submit</button>
|
||||||
|
</nb-step>
|
||||||
|
|
||||||
|
<nb-step [label]="labelFive">
|
||||||
|
<ng-template #labelFive>Preview</ng-template>
|
||||||
|
|
||||||
|
<form [formGroup]="labelFive">
|
||||||
|
<!-- Start of form -->
|
||||||
|
<nb-card>
|
||||||
|
<nb-card-header><h3>Preview</h3></nb-card-header>
|
||||||
|
<nb-card-body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="form-group text-left">
|
||||||
|
<div>--- placeholder for viewer ---</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
|
<!-- end of form -->
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<button nbButton nbStepperPrevious>prev</button>
|
||||||
|
|
||||||
|
</nb-step>
|
||||||
|
</nb-stepper>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
:host ::ng-deep nb-stepper .step-content {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { ProfileComponent } from './profile.component';
|
|
||||||
|
|
||||||
describe('ProfileComponent', () => {
|
|
||||||
let component: ProfileComponent;
|
|
||||||
let fixture: ComponentFixture<ProfileComponent>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
declarations: [ ProfileComponent ]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
|
|
||||||
fixture = TestBed.createComponent(ProfileComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,49 +1,123 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { ActivatedRoute } from '@angular/router';
|
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme';
|
||||||
|
|
||||||
import { UserAPI } from '../../../../service/api/user-api.service';
|
import { UserAPI } from '../../../../service/api/user-api.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-profile',
|
selector: 'ngx-profile',
|
||||||
templateUrl: './profile.component.html',
|
templateUrl: 'profile.component.html',
|
||||||
styleUrls: ['./profile.component.scss'],
|
styleUrls: ['profile.component.scss'],
|
||||||
})
|
})
|
||||||
export class ProfileComponent implements OnInit {
|
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) {}
|
personalDetails: FormGroup;
|
||||||
|
experience: FormGroup;
|
||||||
|
project: FormGroup;
|
||||||
|
education: FormGroup;
|
||||||
|
certifications: FormGroup;
|
||||||
|
skills: FormGroup;
|
||||||
|
professionalSummary: FormGroup;
|
||||||
|
userId: string
|
||||||
|
|
||||||
ngOnInit(): void {
|
status: NbComponentStatus = 'primary' ;
|
||||||
this.route.queryParams.subscribe((params) => {
|
shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
|
||||||
const userId = params['userId']; // Get the userId from query params
|
size: NbComponentSize = 'tiny';
|
||||||
|
constructor(private fb: FormBuilder, private userAPI: UserAPI, private router: Router) {
|
||||||
|
}
|
||||||
|
|
||||||
console.log(userId);
|
ngOnInit() {
|
||||||
|
this.personalDetails = this.fb.group({
|
||||||
|
username: [''],
|
||||||
|
email: [''],
|
||||||
|
phone: [''],
|
||||||
|
address1: [''],
|
||||||
|
address2: [''],
|
||||||
|
city: [''],
|
||||||
|
state: [''],
|
||||||
|
zip: [''],
|
||||||
|
linkedinLink: [''],
|
||||||
|
portfolioLink: [''],
|
||||||
|
});
|
||||||
|
|
||||||
if (userId) {
|
this.experience = this.fb.group({
|
||||||
this.userAPI.getUserDetails(userId).subscribe((response) => {
|
position: [''],
|
||||||
if (response.success) {
|
employer: [''],
|
||||||
this.userDetails = response.data;
|
location: [''],
|
||||||
console.log(this.userDetails)
|
startDate: [''],
|
||||||
this.userExperiences = this.userDetails.experiences || [];
|
endDate: [''],
|
||||||
this.userEducation = this.userDetails.education || [];
|
currentJob: [''],
|
||||||
this.userProjects = this.userDetails.projects || [];
|
companyLink: [''],
|
||||||
this.userSkills = this.userDetails.skills || [];
|
description: [''],
|
||||||
this.userCertificates = this.userDetails.certificates || [];
|
});
|
||||||
// this.userResumes = this.userDetails.resumes || [];
|
|
||||||
// this.userCoverLetters = this.userDetails.coverLetters || [];
|
this.project = this.fb.group({
|
||||||
} else {
|
name: [''],
|
||||||
console.error('Failed to retrieve user details:', response.message);
|
link: [''],
|
||||||
}
|
employer: [''],
|
||||||
});
|
description: [''],
|
||||||
} else {
|
startDate: [''],
|
||||||
console.error('User ID not found in query parameters.');
|
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: [''],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async submitForms() {
|
||||||
|
try {
|
||||||
|
// Combine professional summary with personal details
|
||||||
|
const personalDetailsWithSummary = {
|
||||||
|
...this.personalDetails.value,
|
||||||
|
professionalSummary: this.professionalSummary.value.professionalSummary,
|
||||||
|
password: 'password',
|
||||||
|
role: 'USER'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Save personal details including professional summary
|
||||||
|
const userDetailsResponse = await this.userAPI.saveUserDetails(personalDetailsWithSummary).toPromise();
|
||||||
|
this.userId = userDetailsResponse.data.id;
|
||||||
|
|
||||||
|
// Save other details using the obtained user ID
|
||||||
|
await this.userAPI.saveExperience(this.experience.value, this.userId).toPromise();
|
||||||
|
await this.userAPI.saveEducation(this.education.value, this.userId).toPromise();
|
||||||
|
await this.userAPI.saveProjects(this.project.value, this.userId).toPromise();
|
||||||
|
await this.userAPI.saveSkills(this.skills.value, this.userId).toPromise();
|
||||||
|
await this.userAPI.saveCertifications(this.certifications.value, this.userId).toPromise();
|
||||||
|
|
||||||
|
|
||||||
|
console.log("userID: ", this.userId)
|
||||||
|
|
||||||
|
this.router.navigateByUrl(`/pages/layout/stepper/profile?userId=${this.userId}`);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error occurred while saving user details:', error);
|
||||||
|
// Handle error
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,746 +2,142 @@
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<nb-stepper orientation="horizontal">
|
<nb-stepper orientation="horizontal">
|
||||||
<nb-step [label]="labelOne">
|
<nb-step [label]="labelOne">
|
||||||
<ng-template #labelOne>Personal details</ng-template>
|
<ng-template #labelOne>First step</ng-template>
|
||||||
|
<h3>Step content #1</h3>
|
||||||
<form [formGroup]="personalDetails">
|
<button nbButton disabled nbStepperNext>prev</button>
|
||||||
<!-- Start of form -->
|
|
||||||
<nb-card>
|
|
||||||
<nb-card-header> <h3>Personal Details</h3></nb-card-header>
|
|
||||||
<nb-card-body>
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="form-group text-left">
|
|
||||||
<label
|
|
||||||
for="username"
|
|
||||||
class="text-muted font-weight-bold small"
|
|
||||||
>Full Name</label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control bg-light"
|
|
||||||
id="username"
|
|
||||||
placeholder="Full name"
|
|
||||||
formControlName="username"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="form-group text-left">
|
|
||||||
<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"
|
|
||||||
class="text-muted font-weight-bold small"
|
|
||||||
>LinkedIn URL</label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
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"
|
|
||||||
>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="address1"
|
|
||||||
class="text-muted font-weight-bold small"
|
|
||||||
>Street Address</label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control bg-light"
|
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
<!-- end of form -->
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- <button nbButton disabled nbStepperNext>prev</button> -->
|
|
||||||
<button nbButton nbStepperNext>next</button>
|
<button nbButton nbStepperNext>next</button>
|
||||||
</nb-step>
|
</nb-step>
|
||||||
|
<nb-step [label]="labelTwo">
|
||||||
<nb-step label="Experience">
|
<ng-template #labelTwo>Second step</ng-template>
|
||||||
<form [formGroup]="experience">
|
<h3>Step content #2</h3>
|
||||||
<!-- Start of form -->
|
|
||||||
<nb-card>
|
|
||||||
<nb-card-header><h3>Experience</h3></nb-card-header>
|
|
||||||
<nb-card-body>
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="form-group text-left">
|
|
||||||
<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="location"
|
|
||||||
class="text-muted font-weight-bold small"
|
|
||||||
>Where was the company located?</label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
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"
|
|
||||||
class="text-muted font-weight-bold small"
|
|
||||||
>What did you do at the company?</label
|
|
||||||
>
|
|
||||||
<textarea
|
|
||||||
class="form-control bg-light"
|
|
||||||
id="responsibilities"
|
|
||||||
rows="5"
|
|
||||||
formControlName="description"
|
|
||||||
placeholder="Enter your responsibilities"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
<!-- end of form -->
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<button nbButton nbStepperPrevious>prev</button>
|
<button nbButton nbStepperPrevious>prev</button>
|
||||||
<button nbButton nbStepperNext>next</button>
|
<button nbButton nbStepperNext>next</button>
|
||||||
</nb-step>
|
</nb-step>
|
||||||
|
<nb-step label="Third step">
|
||||||
<nb-step label="Project">
|
<h3>Step content #3</h3>
|
||||||
<form [formGroup]="project">
|
|
||||||
<!-- Start of form -->
|
|
||||||
<nb-card>
|
|
||||||
<nb-card-header><h3>Project</h3></nb-card-header>
|
|
||||||
<nb-card-body>
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="form-group text-left">
|
|
||||||
<label
|
|
||||||
for="projectTitle"
|
|
||||||
class="text-muted font-weight-bold small"
|
|
||||||
>Give your project a title</label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
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"
|
|
||||||
class="text-muted font-weight-bold small"
|
|
||||||
>In which organization did you do your project?</label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control bg-light"
|
|
||||||
id="organization"
|
|
||||||
formControlName="employer"
|
|
||||||
placeholder="Organization name"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="form-group text-left">
|
|
||||||
<label
|
|
||||||
for="projectURL"
|
|
||||||
class="text-muted font-weight-bold small"
|
|
||||||
>Project URL</label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="url"
|
|
||||||
class="form-control bg-light"
|
|
||||||
id="projectURL"
|
|
||||||
formControlName="link"
|
|
||||||
placeholder="Project URL"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-12">
|
|
||||||
<div class="form-group text-left">
|
|
||||||
<label
|
|
||||||
for="projectDescription"
|
|
||||||
class="text-muted font-weight-bold small"
|
|
||||||
>Now describe what you did</label
|
|
||||||
>
|
|
||||||
<textarea
|
|
||||||
class="form-control bg-light"
|
|
||||||
id="projectDescription"
|
|
||||||
rows="5"
|
|
||||||
formControlName="description"
|
|
||||||
placeholder="Describe your project"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
<!-- end of form -->
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<button nbButton nbStepperPrevious>prev</button>
|
<button nbButton nbStepperPrevious>prev</button>
|
||||||
<button nbButton nbStepperNext>next</button>
|
<button nbButton nbStepperNext>next</button>
|
||||||
</nb-step>
|
</nb-step>
|
||||||
|
|
||||||
<nb-step label="Education">
|
|
||||||
<form [formGroup]="education">
|
|
||||||
<!-- Start of form -->
|
|
||||||
<nb-card>
|
|
||||||
<nb-card-header><h3>Education</h3></nb-card-header>
|
|
||||||
<nb-card-body>
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="form-group text-left">
|
|
||||||
<label
|
|
||||||
for="degree"
|
|
||||||
class="text-muted font-weight-bold small"
|
|
||||||
>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"
|
|
||||||
class="text-muted font-weight-bold small"
|
|
||||||
>Where did you earn your degree/qualification?</label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
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"
|
|
||||||
class="text-muted font-weight-bold small"
|
|
||||||
>Where is the institution located?</label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control bg-light"
|
|
||||||
id="institutionLocation"
|
|
||||||
formControlName="location"
|
|
||||||
placeholder="Institution location"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
<div class="form-group text-left">
|
|
||||||
<label for="gpa" class="text-muted font-weight-bold small"
|
|
||||||
>GPA (if applicable)</label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
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"
|
|
||||||
class="text-muted font-weight-bold small"
|
|
||||||
>Open field for additional information</label
|
|
||||||
>
|
|
||||||
<textarea
|
|
||||||
class="form-control bg-light"
|
|
||||||
id="additionalInfo"
|
|
||||||
rows="5"
|
|
||||||
formControlName="description"
|
|
||||||
placeholder="Additional information"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</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">
|
|
||||||
<form [formGroup]="certifications">
|
|
||||||
<!-- Start of form -->
|
|
||||||
<nb-card>
|
|
||||||
<nb-card-header> <h3>Certifications</h3></nb-card-header>
|
|
||||||
<nb-card-body>
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="form-group text-left">
|
|
||||||
<label
|
|
||||||
for="certificateName"
|
|
||||||
class="text-muted font-weight-bold small"
|
|
||||||
>What was the certificate name?</label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
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"
|
|
||||||
class="text-muted font-weight-bold small"
|
|
||||||
>Where did you get the certificate?</label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control bg-light"
|
|
||||||
id="certificateIssuer"
|
|
||||||
formControlName="issuer"
|
|
||||||
placeholder="Certificate issuer"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-12">
|
|
||||||
<div class="form-group text-left">
|
|
||||||
<label
|
|
||||||
for="certificateRelevance"
|
|
||||||
class="text-muted font-weight-bold small"
|
|
||||||
>How is the certificate relevant?</label
|
|
||||||
>
|
|
||||||
<textarea
|
|
||||||
class="form-control bg-light"
|
|
||||||
id="certificateRelevance"
|
|
||||||
rows="5"
|
|
||||||
formControlName="description"
|
|
||||||
placeholder="Certificate relevance"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</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">
|
|
||||||
<form [formGroup]="skills">
|
|
||||||
<!-- Start of form -->
|
|
||||||
<nb-card>
|
|
||||||
<nb-card-header><h3>Skills</h3></nb-card-header>
|
|
||||||
<nb-card-body>
|
|
||||||
<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
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
formControlName="name"
|
|
||||||
class="form-control bg-light"
|
|
||||||
placeholder="Write skill name..Eg; Python"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</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">
|
<nb-step [label]="labelFour">
|
||||||
<ng-template #labelFour>Summary</ng-template>
|
<ng-template #labelFour>Fourth step</ng-template>
|
||||||
|
<h3>Step content #4</h3>
|
||||||
<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-12">
|
|
||||||
<div class="form-group text-left">
|
|
||||||
<label
|
|
||||||
for="professionalSummary"
|
|
||||||
class="text-muted font-weight-bold small"
|
|
||||||
>Write a professional summary</label
|
|
||||||
>
|
|
||||||
<textarea
|
|
||||||
class="form-control bg-light"
|
|
||||||
id="professionalSummary"
|
|
||||||
rows="5"
|
|
||||||
formControlName="professionalSummary"
|
|
||||||
placeholder="Write your professional summary"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
<!-- end of form -->
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<button nbButton nbStepperPrevious>prev</button>
|
<button nbButton nbStepperPrevious>prev</button>
|
||||||
<button nbButton (click)="submitForms()">Submit</button>
|
<button nbButton disabled nbStepperNext>next</button>
|
||||||
</nb-step>
|
</nb-step>
|
||||||
</nb-stepper>
|
</nb-stepper>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
|
|
||||||
|
<div class="steppers-container row">
|
||||||
|
<div class="col-md-12 col-lg-6 col-xxxl-6">
|
||||||
|
<nb-card>
|
||||||
|
<nb-card-body>
|
||||||
|
<nb-stepper #stepper>
|
||||||
|
<nb-step [stepControl]="firstForm" label="First step">
|
||||||
|
<form [formGroup]="firstForm" (ngSubmit)="onFirstSubmit()" class="step-container">
|
||||||
|
<p class="lorem">
|
||||||
|
Lorizzle ipsum dolizzle stuff fizzle, consectetuer adipiscing break it down. Nullizzle sapien velizzle,
|
||||||
|
my shizz pimpin', shizzle my nizzle crocodizzle shut the shizzle up, gravida vizzle, dang.
|
||||||
|
</p>
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" placeholder="Enter your name" class="form-control" formControlName="firstCtrl"
|
||||||
|
[ngClass]="{'form-control-danger': firstForm.invalid && (firstForm.dirty || firstForm.touched)}">
|
||||||
|
</div>
|
||||||
|
<button nbButton nbStepperNext>next</button>
|
||||||
|
</form>
|
||||||
|
</nb-step>
|
||||||
|
<nb-step [stepControl]="secondForm" label="Second step">
|
||||||
|
<form [formGroup]="secondForm" (ngSubmit)="onSecondSubmit()" class="step-container">
|
||||||
|
<p class="lorem">
|
||||||
|
Pellentesque we gonna chung tortor.
|
||||||
|
Sizzle pizzle. Fizzle izzle dolor dapibus fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempus tempor.
|
||||||
|
Maurizzle cool nibh owned turpizzle. My shizz fo shizzle tortor.
|
||||||
|
</p>
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" placeholder="Enter favorite movie" class="form-control" formControlName="secondCtrl"
|
||||||
|
[ngClass]="{'form-control-danger': secondForm.invalid && (secondForm.dirty || secondForm.touched)}">
|
||||||
|
</div>
|
||||||
|
<button nbButton nbStepperPrevious>prev</button>
|
||||||
|
<button nbButton nbStepperNext>next</button>
|
||||||
|
</form>
|
||||||
|
</nb-step>
|
||||||
|
<nb-step [stepControl]="thirdForm" label="Third step">
|
||||||
|
<form [formGroup]="thirdForm" (ngSubmit)="onThirdSubmit()" class="step-container">
|
||||||
|
<p class="lorem">
|
||||||
|
Things boom shackalack rhoncus yo. In fo shizzle my nizzle gangsta platea dictumst. Check it out pot.
|
||||||
|
</p>
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" placeholder="Enter something" class="form-control" formControlName="thirdCtrl"
|
||||||
|
[ngClass]="{'form-control-danger': thirdForm.invalid && (thirdForm.dirty || thirdForm.touched)}">
|
||||||
|
</div>
|
||||||
|
<button nbButton nbStepperPrevious>prev</button>
|
||||||
|
<button nbButton nbStepperNext>Confirm</button>
|
||||||
|
</form>
|
||||||
|
</nb-step>
|
||||||
|
<nb-step [stepControl]="thirdForm" [hidden]="true" label="Third step">
|
||||||
|
<div class="step-container">
|
||||||
|
<h3>Wizard completed!</h3>
|
||||||
|
<button nbButton (click)="stepper.reset()">Try again</button>
|
||||||
|
</div>
|
||||||
|
</nb-step>
|
||||||
|
</nb-stepper>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-12 col-lg-6 col-xxxl-6">
|
||||||
|
<nb-card size="medium">
|
||||||
|
<nb-card-body>
|
||||||
|
<nb-stepper orientation="vertical">
|
||||||
|
<nb-step label="First step">
|
||||||
|
<h3>Step content #1</h3>
|
||||||
|
<p class="lorem">
|
||||||
|
Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum,
|
||||||
|
sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
|
||||||
|
viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel
|
||||||
|
placerat quis, lobortis in ligula.
|
||||||
|
</p>
|
||||||
|
<button nbButton disabled nbStepperNext>prev</button>
|
||||||
|
<button nbButton nbStepperNext>next</button>
|
||||||
|
</nb-step>
|
||||||
|
<nb-step label="Second step">
|
||||||
|
<h3>Step content #2</h3>
|
||||||
|
<p class="lorem">
|
||||||
|
Curabitur luctus mattis risus nec condimentum. Donec at dui turpis. Sed vehicula fringilla rutrum. Nullam
|
||||||
|
sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
|
||||||
|
eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
|
||||||
|
</p>
|
||||||
|
<button nbButton nbStepperPrevious>prev</button>
|
||||||
|
<button nbButton nbStepperNext>next</button>
|
||||||
|
</nb-step>
|
||||||
|
<nb-step label="Third step">
|
||||||
|
<h3>Step content #3</h3>
|
||||||
|
<p class="lorem">
|
||||||
|
Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum,
|
||||||
|
sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
|
||||||
|
viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel
|
||||||
|
placerat quis, lobortis in ligula.
|
||||||
|
</p>
|
||||||
|
<p class="lorem">
|
||||||
|
Curabitur luctus mattis risus nec condimentum. Donec at dui turpis. Sed vehicula fringilla rutrum. Nullam
|
||||||
|
sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
|
||||||
|
eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
|
||||||
|
</p>
|
||||||
|
<button nbButton nbStepperPrevious>prev</button>
|
||||||
|
<button nbButton nbStepperNext>next</button>
|
||||||
|
</nb-step>
|
||||||
|
<nb-step label="Fourth step">
|
||||||
|
<h3>Step content #4</h3>
|
||||||
|
<p class="lorem">
|
||||||
|
Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum,
|
||||||
|
sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
|
||||||
|
viverra ex.
|
||||||
|
</p>
|
||||||
|
<button nbButton nbStepperPrevious>prev</button>
|
||||||
|
<button nbButton disabled nbStepperNext>next</button>
|
||||||
|
</nb-step>
|
||||||
|
</nb-stepper>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -1,8 +1,5 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
|
||||||
import { Router } from '@angular/router';
|
|
||||||
|
|
||||||
import { UserAPI } from '../../../service/api/user-api.service';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-stepper',
|
selector: 'ngx-stepper',
|
||||||
|
|
@ -11,109 +8,36 @@ import { UserAPI } from '../../../service/api/user-api.service';
|
||||||
})
|
})
|
||||||
export class StepperComponent implements OnInit {
|
export class StepperComponent implements OnInit {
|
||||||
|
|
||||||
personalDetails: FormGroup;
|
firstForm: UntypedFormGroup;
|
||||||
experience: FormGroup;
|
secondForm: UntypedFormGroup;
|
||||||
project: FormGroup;
|
thirdForm: UntypedFormGroup;
|
||||||
education: FormGroup;
|
|
||||||
certifications: FormGroup;
|
|
||||||
skills: FormGroup;
|
|
||||||
professionalSummary: FormGroup;
|
|
||||||
userId: string
|
|
||||||
|
|
||||||
constructor(private fb: FormBuilder, private userAPI: UserAPI, private router: Router) {
|
constructor(private fb: UntypedFormBuilder) {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.personalDetails = this.fb.group({
|
this.firstForm = this.fb.group({
|
||||||
username: [''],
|
firstCtrl: ['', Validators.required],
|
||||||
email: [''],
|
|
||||||
phone: [''],
|
|
||||||
address1: [''],
|
|
||||||
address2: [''],
|
|
||||||
city: [''],
|
|
||||||
state: [''],
|
|
||||||
zip: [''],
|
|
||||||
linkedinLink: [''],
|
|
||||||
portfolioLink: [''],
|
|
||||||
});
|
});
|
||||||
|
|
||||||
this.experience = this.fb.group({
|
this.secondForm = this.fb.group({
|
||||||
position: [''],
|
secondCtrl: ['', Validators.required],
|
||||||
employer: [''],
|
|
||||||
location: [''],
|
|
||||||
startDate: [''],
|
|
||||||
endDate: [''],
|
|
||||||
currentJob: [''],
|
|
||||||
companyLink: [''],
|
|
||||||
description: [''],
|
|
||||||
});
|
});
|
||||||
|
|
||||||
this.project = this.fb.group({
|
this.thirdForm = this.fb.group({
|
||||||
name: [''],
|
thirdCtrl: ['', Validators.required],
|
||||||
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: [''],
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async submitForms() {
|
onFirstSubmit() {
|
||||||
try {
|
this.firstForm.markAsDirty();
|
||||||
// Combine professional summary with personal details
|
|
||||||
const personalDetailsWithSummary = {
|
|
||||||
...this.personalDetails.value,
|
|
||||||
professionalSummary: this.professionalSummary.value.professionalSummary,
|
|
||||||
password: 'password',
|
|
||||||
role: 'USER'
|
|
||||||
};
|
|
||||||
|
|
||||||
// Save personal details including professional summary
|
|
||||||
const userDetailsResponse = await this.userAPI.saveUserDetails(personalDetailsWithSummary).toPromise();
|
|
||||||
this.userId = userDetailsResponse.data.id;
|
|
||||||
|
|
||||||
// Save other details using the obtained user ID
|
|
||||||
await this.userAPI.saveExperience(this.experience.value, this.userId).toPromise();
|
|
||||||
await this.userAPI.saveEducation(this.education.value, this.userId).toPromise();
|
|
||||||
await this.userAPI.saveProjects(this.project.value, this.userId).toPromise();
|
|
||||||
await this.userAPI.saveSkills(this.skills.value, this.userId).toPromise();
|
|
||||||
await this.userAPI.saveCertifications(this.certifications.value, this.userId).toPromise();
|
|
||||||
|
|
||||||
|
|
||||||
console.log("userID: ", this.userId)
|
|
||||||
|
|
||||||
this.router.navigateByUrl(`/pages/layout/stepper/profile?userId=${this.userId}`);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error occurred while saving user details:', error);
|
|
||||||
// Handle error
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
onSecondSubmit() {
|
||||||
|
this.secondForm.markAsDirty();
|
||||||
|
}
|
||||||
|
|
||||||
|
onThirdSubmit() {
|
||||||
|
this.thirdForm.markAsDirty();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,44 +1,43 @@
|
||||||
import { NbMenuItem } from '@nebular/theme';
|
import { NbMenuItem } from "@nebular/theme";
|
||||||
|
|
||||||
export const MENU_ITEMS: NbMenuItem[] = [
|
export const MENU_ITEMS: NbMenuItem[] = [
|
||||||
{
|
{
|
||||||
title: 'Home',
|
title: "Home",
|
||||||
icon: 'home-outline',
|
icon: "home-outline",
|
||||||
link: '/pages/dashboard',
|
link: "/pages/dashboard",
|
||||||
home: true,
|
home: true,
|
||||||
hidden: true
|
hidden: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'FEATURES',
|
title: "FEATURES",
|
||||||
group: true,
|
group: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Create',
|
title: "Create",
|
||||||
icon: 'layout-outline',
|
icon: "layout-outline",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
title: 'Resume',
|
title: "Resume",
|
||||||
link: '/pages/layout/stepper',
|
link: "/pages/layout/stepper/profile",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Cover Letter',
|
title: "Cover Letter",
|
||||||
link: '',
|
link: "",
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'AI',
|
title: "AI",
|
||||||
icon: 'keypad-outline',
|
icon: "keypad-outline",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
title: 'AI Resume',
|
title: "AI Resume",
|
||||||
link: '',
|
link: "/pages/forms/ai-resume",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'AI Cover Letter',
|
title: "AI Cover Letter",
|
||||||
link: '',
|
link: "",
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
|
||||||
BIN
src/assets/images/preview.png
Normal file
BIN
src/assets/images/preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
src/assets/images/preview2.png
Normal file
BIN
src/assets/images/preview2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
|
|
@ -2,7 +2,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>ngx-admin Demo Application</title>
|
<title>Resume Tailor Application</title>
|
||||||
|
|
||||||
<base href="/">
|
<base href="/">
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue