diff --git a/src/app/pages/forms/ai-resume/ai-resume.component.html b/src/app/pages/forms/ai-resume/ai-resume.component.html new file mode 100644 index 00000000..21fa3161 --- /dev/null +++ b/src/app/pages/forms/ai-resume/ai-resume.component.html @@ -0,0 +1,33 @@ +
+
+ + Create AI Resume + +
+
+
+
+
+
+ +
+
+
--- placeholder for viewer ---
+
+
+
+ + + + + +
+
diff --git a/src/app/pages/forms/ai-resume/ai-resume.component.scss b/src/app/pages/forms/ai-resume/ai-resume.component.scss new file mode 100644 index 00000000..71df8954 --- /dev/null +++ b/src/app/pages/forms/ai-resume/ai-resume.component.scss @@ -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; + } +} diff --git a/src/app/pages/forms/ai-resume/ai-resume.component.ts b/src/app/pages/forms/ai-resume/ai-resume.component.ts new file mode 100644 index 00000000..1b268ff2 --- /dev/null +++ b/src/app/pages/forms/ai-resume/ai-resume.component.ts @@ -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'; +} diff --git a/src/app/pages/forms/forms-routing.module.ts b/src/app/pages/forms/forms-routing.module.ts index a50d05a7..9f17bcdf 100644 --- a/src/app/pages/forms/forms-routing.module.ts +++ b/src/app/pages/forms/forms-routing.module.ts @@ -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, diff --git a/src/app/pages/forms/forms.module.ts b/src/app/pages/forms/forms.module.ts index a7b93962..3fefa70b 100644 --- a/src/app/pages/forms/forms.module.ts +++ b/src/app/pages/forms/forms.module.ts @@ -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, diff --git a/src/app/pages/layout/stepper/profile/profile.component.html b/src/app/pages/layout/stepper/profile/profile.component.html index 59dd87a4..acf7fa4b 100644 --- a/src/app/pages/layout/stepper/profile/profile.component.html +++ b/src/app/pages/layout/stepper/profile/profile.component.html @@ -1,99 +1,781 @@ - - User Profile + -
-
-

Personal Details

-

Username: {{ userDetails.username }}

-

Email: {{ userDetails.email }}

-

Phone: {{ userDetails.phone }}

-

- Address: {{ userDetails.address1 }}, - {{ userDetails.address2 }}, {{ userDetails.city }}, - {{ userDetails.state }}, {{ userDetails.zip }} -

-

- LinkedIn: - {{ - userDetails.linkedinLink - }} -

-

- Portfolio: - {{ - userDetails.portfolioLink - }} -

-
-
-

Professional Summary

-

{{ userDetails.professionalSummary }}

-
-
-

Experience

-
    -
  • -

    Position: {{ exp.position }}

    -

    Employer: {{ exp.employer }}

    -

    Location: {{ exp.location }}

    -

    Start Date: {{ exp.startDate }}

    -

    End Date: {{ exp.endDate }}

    -

    Description: {{ exp.description }}

    -
    -

    Projects:

    -
      -
    • -

      Name: {{ project.name }}

      -

      Description: {{ project.description }}

      -

      - Link: - {{ - project.link - }} -

      -
      • -
    -
    -
    • -
-
-
-

Education

-
    -
  • -

    Degree Name: {{ edu.degreeName }}

    -

    School: {{ edu.school }}

    -

    Location: {{ edu.location }}

    -

    Major: {{ edu.major }}

    -

    Minor: {{ edu.minor }}

    -

    Start Date: {{ edu.startDate }}

    -

    End Date: {{ edu.endDate }}

    -

    Grade: {{ edu.grade }}

    -

    Description: {{ edu.description }}

    -
    • -
-
-
-

Certifications

-
    -
  • -

    Certificate Name: {{ cert.name }}

    -

    Issuer: {{ cert.issuer }}

    -

    - Date: {{ cert.startDate }} - {{ cert.endDate }} -

    -

    Relevance: {{ cert.description }}

    -
    • -
-
-
-

Skills

-
    -
  • -

    Name: {{ skill.name }}

    -
    • -
-
-
+ + + Personal details + +
+ + +

Personal Details

 + +
+
+
+
+ + +
+
+ + +
+ +
+ + +
+
+
+
+ + +
+
+ + +
+
+ +
+
+
+ +
+
+ + +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+
+ + +
+
+
+
+ + + +
+ + + + + + +
+ + +

Experience

 + +
+
+
+
+ + +
+ +
+ + +
+ +
+ +
+ +
+ - +
+ +
+
+
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+
+
+ +
+
+
+
+ + + +
+ + + + + + +
+ + +

Project

 + +
+
+
+
+ + +
+ +
+ +
+ +
+ - +
+ +
+
+
+ +
+
+ + +
+
+ + +
+
+
+
+
+ +
+
+
+
+ + + +
+ + + + + + +
+ + +

Education

 + +
+
+
+
+ + +
+
+ +
+ +
+
+ + +
+ +
+ + +
+ +
+ +
+ +
+ - +
+ +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+
+
+ + + +
+ + + + + + +
+ + +

Certifications

 + +
+
+
+
+ + +
+
+ +
+ +
+ - +
+ +
+
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+
+ + + +
+ + + + + + +
+ + +

Skills

 + +
+
+
+
+ + +
+
+
+
+ + + +
+ + + + + + + Summary + +
+ + +

Summary

 + +
+
+
+
+
+ +
+
+
+
+ + + +
+ + + + + + + + Preview + +
+ + +

Preview

 + +
+
+
+
+
--- placeholder for viewer ---
+
+
+
+
+ + + +
+ + + + + diff --git a/src/app/pages/layout/stepper/profile/profile.component.scss b/src/app/pages/layout/stepper/profile/profile.component.scss index e69de29b..0d2565db 100644 --- a/src/app/pages/layout/stepper/profile/profile.component.scss +++ b/src/app/pages/layout/stepper/profile/profile.component.scss @@ -0,0 +1,8 @@ +:host ::ng-deep nb-stepper .step-content { + text-align: center; + + button { + cursor: pointer; + margin: 0.5rem; + } +} \ No newline at end of file diff --git a/src/app/pages/layout/stepper/profile/profile.component.spec.ts b/src/app/pages/layout/stepper/profile/profile.component.spec.ts deleted file mode 100644 index 246039d7..00000000 --- a/src/app/pages/layout/stepper/profile/profile.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ProfileComponent } from './profile.component'; - -describe('ProfileComponent', () => { - let component: ProfileComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ProfileComponent ] - }) - .compileComponents(); - - fixture = TestBed.createComponent(ProfileComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/layout/stepper/profile/profile.component.ts b/src/app/pages/layout/stepper/profile/profile.component.ts index 01726b21..ca409f0a 100644 --- a/src/app/pages/layout/stepper/profile/profile.component.ts +++ b/src/app/pages/layout/stepper/profile/profile.component.ts @@ -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 + } + } } diff --git a/src/app/pages/layout/stepper/stepper.component.html b/src/app/pages/layout/stepper/stepper.component.html index 74b7b276..84edb7f3 100644 --- a/src/app/pages/layout/stepper/stepper.component.html +++ b/src/app/pages/layout/stepper/stepper.component.html @@ -2,746 +2,142 @@ - Personal details - -
- - -

Personal Details

 - -
-
-
-
- - -
-
- - -
- -
- - -
-
-
-
- - -
-
- - -
-
- -
-
-
- -
-
- - -
-
- - -
- -
- - -
-
- -
-
- - -
-
- - -
-
-
-
- - - -
- - + First step +

Step content #1

+ - - -
- - -

Experience

 - -
-
-
-
- - -
- -
- - -
- -
- -
- -
- - -
- -
-
-
- -
-
- - -
- -
- - -
- -
- - -
-
-
-
- - -
-
-
-
- - - -
- + + Second step +

Step content #2

 - - -
- - -

Project

 - -
-
-
-
- - -
- -
- -
- -
- - -
- -
-
-
- -
-
- - -
-
- - -
-
-
-
- - -
-
-
-
- - - -
- + +

Step content #3

 - - -
- - -

Education

 - -
-
-
-
- - -
-
- -
- -
-
- - -
- -
- - -
- -
- -
- -
- - -
- -
-
-
-
-
- - -
-
- - -
-
- - -
-
- -
-
- - -
-
-
-
- - - -
- - - - - - -
- - -

Certifications

 - -
-
-
-
- - -
-
- -
- -
- - -
- -
-
-
- -
-
- - -
-
- -
-
- - -
-
-
-
- - - -
- - - - - - -
- - -

Skills

 - -
-
-
-
- - -
-
-
-
- - - -
- - - - - - Summary - -
- - -

Summary

 - -
-
-
-
- - -
-
-
-
- - - -
- + Fourth step +

Step content #4

- + + +
+
+ + + + +
+

+ 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. +

+
+ +
+ +
+ + +
+

+ 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. +

+
+ +
+ + +
+ + +
+

+ Things boom shackalack rhoncus yo. In fo shizzle my nizzle gangsta platea dictumst. Check it out pot. +

+
+ +
+ + +
+ + +
+

Wizard completed!

+ +
+ + + + +
+ +
+ + + + +

Step content #1

+

+ 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. +

+ + + + +

Step content #2

+

+ 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. +

+ + + + +

Step content #3

+

+ 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. +

+

+ 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. +

+ + + + +

Step content #4

+

+ 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. +

+ + + + + + +
+
\ No newline at end of file diff --git a/src/app/pages/layout/stepper/stepper.component.ts b/src/app/pages/layout/stepper/stepper.component.ts index 8c5c231a..869cf5f0 100644 --- a/src/app/pages/layout/stepper/stepper.component.ts +++ b/src/app/pages/layout/stepper/stepper.component.ts @@ -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(); + } +} \ No newline at end of file diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts index baaee549..3b814930 100644 --- a/src/app/pages/pages-menu.ts +++ b/src/app/pages/pages-menu.ts @@ -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: "", + }, ], }, - ]; diff --git a/src/assets/images/preview.png b/src/assets/images/preview.png new file mode 100644 index 00000000..5d4d4197 Binary files /dev/null and b/src/assets/images/preview.png differ diff --git a/src/assets/images/preview2.png b/src/assets/images/preview2.png new file mode 100644 index 00000000..c2489873 Binary files /dev/null and b/src/assets/images/preview2.png differ diff --git a/src/index.html b/src/index.html index 5192560c..b6dbe951 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - ngx-admin Demo Application + Resume Tailor Application