diff --git a/src/app/@theme/components/header/header.component.html b/src/app/@theme/components/header/header.component.html index cd2015fc..d70617e1 100644 --- a/src/app/@theme/components/header/header.component.html +++ b/src/app/@theme/components/header/header.component.html @@ -3,24 +3,37 @@ - + -
- - {{ theme.name }} +
+ + + {{ theme.name }}
- - + diff --git a/src/app/@theme/components/header/header.component.ts b/src/app/@theme/components/header/header.component.ts index bfe2b9bc..4ab086a4 100644 --- a/src/app/@theme/components/header/header.component.ts +++ b/src/app/@theme/components/header/header.component.ts @@ -1,10 +1,11 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; -import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme'; +import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService, NbMenuItem } from '@nebular/theme'; import { UserData } from '../../../@core/data/users'; import { LayoutService } from '../../../@core/utils'; import { map, takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; +import { AuthService } from '../../../service/auth.service'; @Component({ selector: 'ngx-header', @@ -26,14 +27,14 @@ export class HeaderComponent implements OnInit, OnDestroy { value: 'dark', name: 'Dark', }, - { - value: 'cosmic', - name: 'Cosmic', - }, - { - value: 'corporate', - name: 'Corporate', - }, + // { + // value: 'cosmic', + // name: 'Cosmic', + // }, + // { + // value: 'corporate', + // name: 'Corporate', + // }, ]; currentTheme = 'default'; @@ -45,7 +46,8 @@ export class HeaderComponent implements OnInit, OnDestroy { private themeService: NbThemeService, private userService: UserData, private layoutService: LayoutService, - private breakpointService: NbMediaBreakpointsService) { + private breakpointService: NbMediaBreakpointsService, + private authService: AuthService) { } ngOnInit() { @@ -69,6 +71,12 @@ export class HeaderComponent implements OnInit, OnDestroy { takeUntil(this.destroy$), ) .subscribe(themeName => this.currentTheme = themeName); + + this.menuService.onItemClick().subscribe((event: { item: NbMenuItem }) => { + if (event.item.title === 'Log out') { + this.logout(); + } + }); } ngOnDestroy() { @@ -91,4 +99,8 @@ export class HeaderComponent implements OnInit, OnDestroy { this.menuService.navigateHome(); return false; } + + logout(): void { + this.authService.logout(); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1ce3a588..e47cd40d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,6 +11,7 @@ import { NbSidebarModule, NbToastrModule, NbWindowModule, + NbCheckboxModule } from '@nebular/theme'; import { environment } from '../environments/environment'; import { CoreModule } from './@core/core.module'; @@ -41,6 +42,7 @@ import { AuthGuard } from './service/auth-guard.service'; }), CoreModule.forRoot(), ThemeModule.forRoot(), + NbCheckboxModule ], providers: [ AuthGuard diff --git a/src/app/pages/layout/layout-routing.module.ts b/src/app/pages/layout/layout-routing.module.ts index ddf0425d..92be2af0 100644 --- a/src/app/pages/layout/layout-routing.module.ts +++ b/src/app/pages/layout/layout-routing.module.ts @@ -7,6 +7,7 @@ import { AccordionComponent } from './accordion/accordion.component'; import { InfiniteListComponent } from './infinite-list/infinite-list.component'; import { ListComponent } from './list/list.component'; import { StepperComponent } from './stepper/stepper.component'; +import { ProfileComponent } from './stepper/profile/profile.component'; const routes: Routes = [{ path: '', @@ -16,6 +17,10 @@ const routes: Routes = [{ path: 'stepper', component: StepperComponent, }, + { + path: 'stepper/profile', + component: ProfileComponent, + }, { path: 'list', component: ListComponent, diff --git a/src/app/pages/layout/stepper/profile/profile.component.html b/src/app/pages/layout/stepper/profile/profile.component.html index 9df0576d..87bd1fec 100644 --- a/src/app/pages/layout/stepper/profile/profile.component.html +++ b/src/app/pages/layout/stepper/profile/profile.component.html @@ -1 +1,97 @@ -

profile works!

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

    +

    Issuer: {{ cert.certificateIssuer }}

    +

    Year: {{ cert.certificateYear }}

    +

    Relevance: {{ cert.certificateRelevance }}

    +
    • +
+
+
+

Skills

+
    +
  • +

    Name: {{ skill.name }}

    +
    • +
+
+
+ + diff --git a/src/app/pages/layout/stepper/profile/profile.component.ts b/src/app/pages/layout/stepper/profile/profile.component.ts index 6e4833d8..1779994e 100644 --- a/src/app/pages/layout/stepper/profile/profile.component.ts +++ b/src/app/pages/layout/stepper/profile/profile.component.ts @@ -1,10 +1,46 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { UserAPI } from '../../../../service/api/user-api.service'; @Component({ selector: 'ngx-profile', templateUrl: './profile.component.html', - styleUrls: ['./profile.component.scss'] + styleUrls: ['./profile.component.scss'], }) -export class ProfileComponent { +export class ProfileComponent implements OnInit { + userDetails: any = {}; + userExperiences: any[] = []; + userEducation: any[] = []; + userProjects: any[] = []; + userSkills: any[] = []; + userCertificates: any[] = []; + // userResumes: any[] = []; + // userCoverLetters: any[] = []; + constructor(private route: ActivatedRoute, private userAPI: UserAPI) {} + + ngOnInit(): void { + this.route.queryParams.subscribe((params) => { + const userId = params['userId']; // Get the userId from query params + + if (userId) { + this.userAPI.getUserDetails(userId).subscribe((response) => { + if (response.success) { + this.userDetails = response.data; + this.userExperiences = this.userDetails.experiences || []; + this.userEducation = this.userDetails.education || []; + this.userProjects = this.userDetails.projects || []; + this.userSkills = this.userDetails.skills || []; + this.userCertificates = this.userDetails.certificates || []; + // this.userResumes = this.userDetails.resumes || []; + // this.userCoverLetters = this.userDetails.coverLetters || []; + } else { + console.error('Failed to retrieve user details:', response.message); + } + }); + } else { + console.error('User ID not found in query parameters.'); + } + }); + } } diff --git a/src/app/pages/layout/stepper/stepper.component.html b/src/app/pages/layout/stepper/stepper.component.html index bad6d9fc..74b7b276 100644 --- a/src/app/pages/layout/stepper/stepper.component.html +++ b/src/app/pages/layout/stepper/stepper.component.html @@ -4,537 +4,744 @@ Personal details - - -

Personal Details

 - -
-
-
-
- - +
+ + +

Personal Details

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

Experience

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

Experience

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

Project

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

Project

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

Education

 - -
-
-
-
- - +
+ + +

Education

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

Certifications

 - -
-
-
-
- - +
+ + +

Certifications

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

Skills

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

Skills

 + +
+
+
+
+ + +
-
- - - + + + + + Summary - - - -

Summary

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

Summary

 + +
+
+
+
+ + +
-
- - - + + + + - + - diff --git a/src/app/pages/layout/stepper/stepper.component.ts b/src/app/pages/layout/stepper/stepper.component.ts index aeafbc8b..3343b95e 100644 --- a/src/app/pages/layout/stepper/stepper.component.ts +++ b/src/app/pages/layout/stepper/stepper.component.ts @@ -1,5 +1,8 @@ import { Component, OnInit } from '@angular/core'; -import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { Router, NavigationExtras } from '@angular/router'; + +import { UserAPI } from '../../../service/api/user-api.service'; @Component({ selector: 'ngx-stepper', @@ -8,36 +11,117 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms }) export class StepperComponent implements OnInit { - firstForm: UntypedFormGroup; - secondForm: UntypedFormGroup; - thirdForm: UntypedFormGroup; + personalDetails: FormGroup; + experience: FormGroup; + project: FormGroup; + education: FormGroup; + certifications: FormGroup; + skills: FormGroup; + professionalSummary: FormGroup; + userId: string - constructor(private fb: UntypedFormBuilder) { + constructor(private fb: FormBuilder, private userAPI: UserAPI, private router: Router) { } ngOnInit() { - this.firstForm = this.fb.group({ - firstCtrl: ['', Validators.required], + this.personalDetails = this.fb.group({ + username: [''], + email: [''], + phone: [''], + address1: [''], + address2: [''], + city: [''], + state: [''], + zip: [''], + linkedinLink: [''], + portfolioLink: [''], }); - this.secondForm = this.fb.group({ - secondCtrl: ['', Validators.required], + this.experience = this.fb.group({ + position: [''], + employer: [''], + location: [''], + startDate: [''], + endDate: [''], + currentJob: [''], + companyLink: [''], + description: [''], }); - this.thirdForm = this.fb.group({ - thirdCtrl: ['', Validators.required], + this.project = this.fb.group({ + name: [''], + link: [''], + employer: [''], + description: [''], + startDate: [''], + endDate: [''], + }); + + this.education = this.fb.group({ + degreeName: [''], + school: [''], + location: [''], + major: [''], + minor: [''], + startDate: [''], + endDate: [''], + grade: [''], + description: [''], + }); + + this.certifications = this.fb.group({ + name: [''], + issuer: [''], + startDate: [''], + endDate: [''], + description: [''], + }); + + this.skills = this.fb.group({ + name: [''], + }); + + this.professionalSummary = this.fb.group({ + professionalSummary: [''], }); } - onFirstSubmit() { - this.firstForm.markAsDirty(); - } + async submitForms() { + try { + // Combine professional summary with personal details + const personalDetailsWithSummary = { + ...this.personalDetails.value, + professionalSummary: this.professionalSummary.value.professionalSummary, + password: 'password', + role: 'USER' + }; + + // Save personal details including professional summary + const userDetailsResponse = await this.userAPI.saveUserDetails(personalDetailsWithSummary).toPromise(); + this.userId = userDetailsResponse.data.id; - onSecondSubmit() { - this.secondForm.markAsDirty(); - } + console.log(this.userId) + + // Save other details using the obtained user ID + await Promise.all([ + this.userAPI.saveExperience(this.experience.value, this.userId).toPromise(), + this.userAPI.saveEducation(this.education.value, this.userId).toPromise(), + this.userAPI.saveProjects(this.project.value, this.userId).toPromise(), + this.userAPI.saveSkills(this.skills.value, this.userId).toPromise(), + this.userAPI.saveCertifications(this.certifications.value, this.userId).toPromise() + ]); - onThirdSubmit() { - this.thirdForm.markAsDirty(); + + console.log("userID: ", this.userId) + + // Navigate to the profile page + const navigationExtras: NavigationExtras = { + queryParams: { userId: this.userId } + }; + this.router.navigateByUrl('/pages/layout/stepper/profile', navigationExtras); + } catch (error) { + console.error('Error occurred while saving user details:', error); + // Handle error + } } } diff --git a/src/app/service/api/user-api.service.ts b/src/app/service/api/user-api.service.ts new file mode 100644 index 00000000..e94d7c55 --- /dev/null +++ b/src/app/service/api/user-api.service.ts @@ -0,0 +1,59 @@ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Observable } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class UserAPI { + + private baseUrl = 'http://localhost:8080/api'; + private token: string; + + constructor(private http: HttpClient) { + this.token = localStorage.getItem('accessToken'); + } + + // Saving user details + saveUserDetails(data: any): Observable { + const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`); + return this.http.post(`${this.baseUrl}/users`, data, { headers }); + } + + // Get single user + getUserDetails(userId: string): Observable { + console.log(userId) + const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`); + return this.http.get(`${this.baseUrl}/users/${userId}`, { headers }); + } + + saveExperience(data: any, userId: string): Observable { + console.log(userId) + const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`); + return this.http.post(`${this.baseUrl}/experiences?userId=${userId}`, data, { headers }); + } + + saveEducation(data: any, userId: string): Observable { + console.log(userId) + const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`); + return this.http.post(`${this.baseUrl}/education?userId=${userId}`, data, { headers }); + } + + saveProjects(data: any, userId: string): Observable { + console.log(userId) + const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`); + return this.http.post(`${this.baseUrl}/projects?userId=${userId}`, data, { headers }); + } + + saveSkills(data: any, userId: string): Observable { + console.log(userId) + const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`); + return this.http.post(`${this.baseUrl}/skills?userId=${userId}`, data, { headers }); + } + + saveCertifications(data: any, userId: string): Observable { + console.log(userId) + const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`); + return this.http.post(`${this.baseUrl}/certifications?userId=${userId}`, data, { headers }); + } +} diff --git a/src/app/service/auth.service.ts b/src/app/service/auth.service.ts index 4273f091..c097ef6e 100644 --- a/src/app/service/auth.service.ts +++ b/src/app/service/auth.service.ts @@ -22,7 +22,7 @@ export class AuthService { await this.fireAuth.signOut(); localStorage.removeItem('accessToken'); localStorage.removeItem('accessTokenExpiresIn'); - this.router.navigate(['dashboard'], { queryParams: { logout: true } }); + this.router.navigate(['auth/login'], { queryParams: { logout: true } }); } catch (error: any) { throw error; }