diff --git a/src/app/content/hemat-app/user-profile/profil-info/profil-info.component.css b/src/app/content/hemat-app/user-profile/profil-info/profil-info.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/content/hemat-app/user-profile/profil-info/profil-info.component.html b/src/app/content/hemat-app/user-profile/profil-info/profil-info.component.html new file mode 100644 index 0000000..dd2ff50 --- /dev/null +++ b/src/app/content/hemat-app/user-profile/profil-info/profil-info.component.html @@ -0,0 +1,2 @@ +

Profile Information

+

Display user profile information here.

\ No newline at end of file diff --git a/src/app/content/hemat-app/user-profile/profil-info/profil-info.component.spec.ts b/src/app/content/hemat-app/user-profile/profil-info/profil-info.component.spec.ts new file mode 100644 index 0000000..e0cbb26 --- /dev/null +++ b/src/app/content/hemat-app/user-profile/profil-info/profil-info.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProfilInfoComponent } from './profil-info.component'; + +describe('ProfilInfoComponent', () => { + let component: ProfilInfoComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ProfilInfoComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ProfilInfoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/user-profile/profil-info/profil-info.component.ts b/src/app/content/hemat-app/user-profile/profil-info/profil-info.component.ts new file mode 100644 index 0000000..a5dd720 --- /dev/null +++ b/src/app/content/hemat-app/user-profile/profil-info/profil-info.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-profil-info', + templateUrl: './profil-info.component.html', + styleUrls: ['./profil-info.component.css'] +}) +export class ProfilInfoComponent { + +} diff --git a/src/app/content/hemat-app/user-profile/profil-information/profil-information.component.css b/src/app/content/hemat-app/user-profile/profil-information/profil-information.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/content/hemat-app/user-profile/profil-information/profil-information.component.html b/src/app/content/hemat-app/user-profile/profil-information/profil-information.component.html new file mode 100644 index 0000000..aac4982 --- /dev/null +++ b/src/app/content/hemat-app/user-profile/profil-information/profil-information.component.html @@ -0,0 +1,78 @@ +
+
+
+

+ +

+
+
+
+
+
+
+
+ + + +
+ Full Name is required +
+ +
+
+
+ +
+
+
+
+ + +
+
+
+
+
\ No newline at end of file diff --git a/src/app/content/hemat-app/user-profile/profil-information/profil-information.component.spec.ts b/src/app/content/hemat-app/user-profile/profil-information/profil-information.component.spec.ts new file mode 100644 index 0000000..4c295b3 --- /dev/null +++ b/src/app/content/hemat-app/user-profile/profil-information/profil-information.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProfilInformationComponent } from './profil-information.component'; + +describe('ProfilInformationComponent', () => { + let component: ProfilInformationComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ProfilInformationComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ProfilInformationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/user-profile/profil-information/profil-information.component.ts b/src/app/content/hemat-app/user-profile/profil-information/profil-information.component.ts new file mode 100644 index 0000000..3722745 --- /dev/null +++ b/src/app/content/hemat-app/user-profile/profil-information/profil-information.component.ts @@ -0,0 +1,46 @@ +import { Component, ViewChild } from "@angular/core"; +import { FormBuilder, FormGroup, NgForm, Validators } from "@angular/forms"; +import { ActivatedRoute, Router } from "@angular/router"; +@Component({ + selector: "app-profil-information", + templateUrl: "./profil-information.component.html", + styleUrls: ["./profil-information.component.css"], +}) +export class ProfilInformationComponent { + @ViewChild("f", { read: true }) userProfileForm: NgForm; + public breadcrumb: any; + profilInfo: FormGroup; + activeTab: string = "profile-info2"; + submitted = false; + + constructor( + private formBuilder: FormBuilder, + private router: Router, + private route: ActivatedRoute + ) {} + + ngOnInit(): void { + this.profilInfo = this.formBuilder.group({ + name: ["", Validators.required], + }); + } + + selectTab(tabName: string) { + this.activeTab = tabName; + } + + get f() { + return this.profilInfo.controls; + } + + onProjectInfoSubmit() { + this.submitted = true; + } + + cancel() {} + + saveEdit() { + console.log('save'); + + } +} diff --git a/src/app/content/hemat-app/user-profile/update-password/update-password.component.css b/src/app/content/hemat-app/user-profile/update-password/update-password.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/content/hemat-app/user-profile/update-password/update-password.component.html b/src/app/content/hemat-app/user-profile/update-password/update-password.component.html new file mode 100644 index 0000000..bfe78b7 --- /dev/null +++ b/src/app/content/hemat-app/user-profile/update-password/update-password.component.html @@ -0,0 +1 @@ +

update-password works!

diff --git a/src/app/content/hemat-app/user-profile/update-password/update-password.component.spec.ts b/src/app/content/hemat-app/user-profile/update-password/update-password.component.spec.ts new file mode 100644 index 0000000..8d1334d --- /dev/null +++ b/src/app/content/hemat-app/user-profile/update-password/update-password.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UpdatePasswordComponent } from './update-password.component'; + +describe('UpdatePasswordComponent', () => { + let component: UpdatePasswordComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ UpdatePasswordComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(UpdatePasswordComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/user-profile/update-password/update-password.component.ts b/src/app/content/hemat-app/user-profile/update-password/update-password.component.ts new file mode 100644 index 0000000..582c57e --- /dev/null +++ b/src/app/content/hemat-app/user-profile/update-password/update-password.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-update-password', + templateUrl: './update-password.component.html', + styleUrls: ['./update-password.component.css'] +}) +export class UpdatePasswordComponent { + +} diff --git a/src/app/content/hemat-app/user-profile/user-profile.component.css b/src/app/content/hemat-app/user-profile/user-profile.component.css index cef2f54..fddb888 100644 --- a/src/app/content/hemat-app/user-profile/user-profile.component.css +++ b/src/app/content/hemat-app/user-profile/user-profile.component.css @@ -1,4 +1,33 @@ -:host ::ng-deep .nav.nav-tabs .nav-item .nav-link { - padding: 1.5rem 0.7rem !important; - display: inline-flex; -} \ No newline at end of file +.tabs { + display: flex; + border-bottom: 1px solid #ccc; +} + +.tab-link { + background-color: #333; + color: #fff; + padding: 10px 20px; + cursor: pointer; + border: none; + outline: none; + transition: background-color 0.3s ease; +} + +.tab-link:hover, +.tab-link.active { + background-color: #555; +} + +.tab-content { + padding: 20px; + background-color: #111; + color: #fff; + border-top: none; +} + +@media screen and (max-width: 600px) { + .tab-link { + padding: 10px; + font-size: 14px; + } +} diff --git a/src/app/content/hemat-app/user-profile/user-profile.component.html b/src/app/content/hemat-app/user-profile/user-profile.component.html index 811879e..3d21d0b 100644 --- a/src/app/content/hemat-app/user-profile/user-profile.component.html +++ b/src/app/content/hemat-app/user-profile/user-profile.component.html @@ -5,7 +5,22 @@
- +
+ + + + +
+ + +
+ +
+
+ +
diff --git a/src/app/content/hemat-app/user-profile/user-profile.component.ts b/src/app/content/hemat-app/user-profile/user-profile.component.ts index 49f8d71..a7b0c06 100644 --- a/src/app/content/hemat-app/user-profile/user-profile.component.ts +++ b/src/app/content/hemat-app/user-profile/user-profile.component.ts @@ -1,10 +1,20 @@ -import { Component } from '@angular/core'; +import { Component } from "@angular/core"; @Component({ - selector: 'app-user-profile', - templateUrl: './user-profile.component.html', - styleUrls: ['./user-profile.component.css'] + selector: "app-user-profile", + templateUrl: "./user-profile.component.html", + styleUrls: ["./user-profile.component.css"], }) export class UserProfileComponent { public breadcrumb: any; + + activeTab: string = "profile-info2"; + + constructor() {} + + ngOnInit(): void {} + + selectTab(tabName: string) { + this.activeTab = tabName; + } } diff --git a/src/app/content/hemat-app/user-profile/user-profile.module.ts b/src/app/content/hemat-app/user-profile/user-profile.module.ts index b1265ff..ae3600c 100644 --- a/src/app/content/hemat-app/user-profile/user-profile.module.ts +++ b/src/app/content/hemat-app/user-profile/user-profile.module.ts @@ -1,24 +1,35 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { UserProfileComponent } from './user-profile.component'; -import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; -import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module'; -import { RouterModule } from '@angular/router'; - - +import { NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { UserProfileComponent } from "./user-profile.component"; +import { NgbModule } from "@ng-bootstrap/ng-bootstrap"; +import { BreadcrumbModule } from "src/app/_layout/breadcrumb/breadcrumb.module"; +import { RouterModule } from "@angular/router"; +import { ProfilInfoComponent } from "./profil-info/profil-info.component"; +import { UpdatePasswordComponent } from "./update-password/update-password.component"; +import { ProfilInformationComponent } from './profil-information/profil-information.component'; +import { FormsModule, ReactiveFormsModule } from "@angular/forms"; +import { NgSelectModule } from "@ng-select/ng-select"; @NgModule({ - declarations: [UserProfileComponent], + declarations: [ + UserProfileComponent, + ProfilInfoComponent, + UpdatePasswordComponent, + ProfilInformationComponent, + ], imports: [ CommonModule, NgbModule, BreadcrumbModule, + NgSelectModule, + FormsModule, + ReactiveFormsModule, RouterModule.forChild([ { - path: '', - component: UserProfileComponent + path: "", + component: UserProfileComponent, }, - ]) - ] + ]), + ], }) -export class UserProfileModule { } +export class UserProfileModule {} diff --git a/src/app/interceptors/http-error-interceptor.service.ts b/src/app/interceptors/http-error-interceptor.service.ts index 5c78a73..921b80a 100644 --- a/src/app/interceptors/http-error-interceptor.service.ts +++ b/src/app/interceptors/http-error-interceptor.service.ts @@ -1,6 +1,7 @@ import { HttpErrorResponse, HttpEvent, HttpHandler, HttpRequest } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Router } from '@angular/router'; +import { ToastrService } from 'ngx-toastr'; import { Observable, catchError, throwError } from 'rxjs'; @Injectable({ @@ -8,18 +9,34 @@ import { Observable, catchError, throwError } from 'rxjs'; }) export class HttpErrorInterceptorService { - constructor(private router: Router) { } + constructor(private router: Router, private toastr: ToastrService) { } intercept(req: HttpRequest, next: HttpHandler): Observable> { return next.handle(req).pipe( catchError((error: HttpErrorResponse) => { if (error.status === 403) { - this.router.navigate(['/error/error403']); + this.toastr.error("Error", error.message, { + timeOut: 3000, + closeButton: true, + }); + // this.router.navigate(['/error/error403']); } else if (error.status === 404) { - this.router.navigate(['/error/error404']); + this.toastr.error("Error", error.message, { + timeOut: 3000, + closeButton: true, + }); + // this.router.navigate(['/error/error404']); } else if (error.status === 500) { - this.router.navigate(['/error/error500']); + this.toastr.error("Error", error.message, { + timeOut: 3000, + closeButton: true, + }); + // this.router.navigate(['/error/error500']); } else if (error.status === 502) { - this.router.navigate(['/error/error500']); + this.toastr.error("Error", error.message, { + timeOut: 3000, + closeButton: true, + }); + // this.router.navigate(['/error/error500']); } return throwError(error); })