mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 07:30:12 +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 { DatepickerComponent } from './datepicker/datepicker.component';
|
||||
import { ButtonsComponent } from './buttons/buttons.component';
|
||||
import { AiResumeComponent } from './ai-resume/ai-resume.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
|
|
@ -28,6 +29,10 @@ const routes: Routes = [
|
|||
path: 'buttons',
|
||||
component: ButtonsComponent,
|
||||
},
|
||||
{
|
||||
path: 'ai-resume',
|
||||
component: AiResumeComponent,
|
||||
},
|
||||
{
|
||||
path: 'datepicker',
|
||||
component: DatepickerComponent,
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
|
|||
import { DatepickerComponent } from './datepicker/datepicker.component';
|
||||
import { ButtonsComponent } from './buttons/buttons.component';
|
||||
import { FormsModule as ngFormsModule } from '@angular/forms';
|
||||
import { AiResumeComponent } from './ai-resume/ai-resume.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -39,6 +40,7 @@ import { FormsModule as ngFormsModule } from '@angular/forms';
|
|||
declarations: [
|
||||
FormsComponent,
|
||||
ButtonsComponent,
|
||||
AiResumeComponent,
|
||||
FormInputsComponent,
|
||||
FormLayoutsComponent,
|
||||
DatepickerComponent,
|
||||
|
|
|
|||
|
|
@ -1,99 +1,781 @@
|
|||
<nb-card>
|
||||
<nb-card-header>User Profile</nb-card-header>
|
||||
<nb-card class="col-md-12 col-lg-12 col-xxxl-12">
|
||||
<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.name }}</p>
|
||||
<p><strong>Issuer:</strong> {{ cert.issuer }}</p>
|
||||
<p>
|
||||
<strong>Date:</strong> {{ cert.startDate }} - {{ cert.endDate }}
|
||||
</p>
|
||||
<p><strong>Relevance:</strong> {{ cert.description }}</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-stepper orientation="horizontal">
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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 { 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';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-profile',
|
||||
templateUrl: './profile.component.html',
|
||||
styleUrls: ['./profile.component.scss'],
|
||||
templateUrl: 'profile.component.html',
|
||||
styleUrls: ['profile.component.scss'],
|
||||
})
|
||||
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 {
|
||||
this.route.queryParams.subscribe((params) => {
|
||||
const userId = params['userId']; // Get the userId from query params
|
||||
status: NbComponentStatus = 'primary' ;
|
||||
shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
|
||||
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.userAPI.getUserDetails(userId).subscribe((response) => {
|
||||
if (response.success) {
|
||||
this.userDetails = response.data;
|
||||
console.log(this.userDetails)
|
||||
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.');
|
||||
}
|
||||
this.experience = this.fb.group({
|
||||
position: [''],
|
||||
employer: [''],
|
||||
location: [''],
|
||||
startDate: [''],
|
||||
endDate: [''],
|
||||
currentJob: [''],
|
||||
companyLink: [''],
|
||||
description: [''],
|
||||
});
|
||||
|
||||
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: [''],
|
||||
});
|
||||
}
|
||||
|
||||
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-stepper orientation="horizontal">
|
||||
<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>
|
||||
<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> -->
|
||||
<ng-template #labelOne>First step</ng-template>
|
||||
<h3>Step content #1</h3>
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<nb-step [label]="labelTwo">
|
||||
<ng-template #labelTwo>Second step</ng-template>
|
||||
<h3>Step content #2</h3>
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<nb-step label="Third step">
|
||||
<h3>Step content #3</h3>
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<ng-template #labelFour>Fourth step</ng-template>
|
||||
<h3>Step content #4</h3>
|
||||
<button nbButton nbStepperPrevious>prev</button>
|
||||
<button nbButton (click)="submitForms()">Submit</button>
|
||||
<button nbButton disabled nbStepperNext>next</button>
|
||||
</nb-step>
|
||||
</nb-stepper>
|
||||
</nb-card-body>
|
||||
</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 { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { UserAPI } from '../../../service/api/user-api.service';
|
||||
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-stepper',
|
||||
|
|
@ -11,109 +8,36 @@ import { UserAPI } from '../../../service/api/user-api.service';
|
|||
})
|
||||
export class StepperComponent implements OnInit {
|
||||
|
||||
personalDetails: FormGroup;
|
||||
experience: FormGroup;
|
||||
project: FormGroup;
|
||||
education: FormGroup;
|
||||
certifications: FormGroup;
|
||||
skills: FormGroup;
|
||||
professionalSummary: FormGroup;
|
||||
userId: string
|
||||
firstForm: UntypedFormGroup;
|
||||
secondForm: UntypedFormGroup;
|
||||
thirdForm: UntypedFormGroup;
|
||||
|
||||
constructor(private fb: FormBuilder, private userAPI: UserAPI, private router: Router) {
|
||||
constructor(private fb: UntypedFormBuilder) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.personalDetails = this.fb.group({
|
||||
username: [''],
|
||||
email: [''],
|
||||
phone: [''],
|
||||
address1: [''],
|
||||
address2: [''],
|
||||
city: [''],
|
||||
state: [''],
|
||||
zip: [''],
|
||||
linkedinLink: [''],
|
||||
portfolioLink: [''],
|
||||
this.firstForm = this.fb.group({
|
||||
firstCtrl: ['', Validators.required],
|
||||
});
|
||||
|
||||
this.experience = this.fb.group({
|
||||
position: [''],
|
||||
employer: [''],
|
||||
location: [''],
|
||||
startDate: [''],
|
||||
endDate: [''],
|
||||
currentJob: [''],
|
||||
companyLink: [''],
|
||||
description: [''],
|
||||
this.secondForm = this.fb.group({
|
||||
secondCtrl: ['', 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: [''],
|
||||
this.thirdForm = this.fb.group({
|
||||
thirdCtrl: ['', Validators.required],
|
||||
});
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
onFirstSubmit() {
|
||||
this.firstForm.markAsDirty();
|
||||
}
|
||||
}
|
||||
|
||||
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[] = [
|
||||
{
|
||||
title: 'Home',
|
||||
icon: 'home-outline',
|
||||
link: '/pages/dashboard',
|
||||
title: "Home",
|
||||
icon: "home-outline",
|
||||
link: "/pages/dashboard",
|
||||
home: true,
|
||||
hidden: true
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
title: 'FEATURES',
|
||||
title: "FEATURES",
|
||||
group: true,
|
||||
},
|
||||
{
|
||||
title: 'Create',
|
||||
icon: 'layout-outline',
|
||||
title: "Create",
|
||||
icon: "layout-outline",
|
||||
children: [
|
||||
{
|
||||
title: 'Resume',
|
||||
link: '/pages/layout/stepper',
|
||||
title: "Resume",
|
||||
link: "/pages/layout/stepper/profile",
|
||||
},
|
||||
{
|
||||
title: 'Cover Letter',
|
||||
link: '',
|
||||
}
|
||||
title: "Cover Letter",
|
||||
link: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'AI',
|
||||
icon: 'keypad-outline',
|
||||
title: "AI",
|
||||
icon: "keypad-outline",
|
||||
children: [
|
||||
{
|
||||
title: 'AI Resume',
|
||||
link: '',
|
||||
title: "AI Resume",
|
||||
link: "/pages/forms/ai-resume",
|
||||
},
|
||||
{
|
||||
title: 'AI Cover Letter',
|
||||
link: '',
|
||||
}
|
||||
title: "AI Cover Letter",
|
||||
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>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>ngx-admin Demo Application</title>
|
||||
<title>Resume Tailor Application</title>
|
||||
|
||||
<base href="/">
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue