fuzi_fauzia
/
hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perbaikan interceptor

This commit is contained in:
Fuzi_fauzia 2024-06-26 14:26:15 +07:00
parent 4630bd2265
commit b5c35ab541
17 changed files with 326 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/app/content/hemat-app/user-profile/profil-info/profil-info.component.css Normal file
View File

2
src/app/content/hemat-app/user-profile/profil-info/profil-info.component.html Normal file
View File

@ -0,0 +1,2 @@
<h2>Profile Information</h2>
<p>Display user profile information here.</p>

23
src/app/content/hemat-app/user-profile/profil-info/profil-info.component.spec.ts Normal file
View File

@ -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<ProfilInfoComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ProfilInfoComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ProfilInfoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

10
src/app/content/hemat-app/user-profile/profil-info/profil-info.component.ts Normal file
View File

@ -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 {
}

0
src/app/content/hemat-app/user-profile/profil-information/profil-information.component.css Normal file
View File

78
src/app/content/hemat-app/user-profile/profil-information/profil-information.component.html Normal file
View File

@ -0,0 +1,78 @@
<div class="card" style="background-color: #252525 !important">
<div class="card-content">
<div
class="card-header"
style="background-color: #252525 !important"
>
<h2 style="color: #ffffff">
</h2>
</div>
<div class="card-body">
<form
[formGroup]="profilInfo"
(ngSubmit)="onProjectInfoSubmit()"
>
<div class="form-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name" style="color: #ffffff"
>Full Name</label
>
<input
type="text"
id="name"
class="form-control"
formControlName="name"
placeholder="Device Name"
[ngClass]="{
'is-invalid': submitted && f.name.errors
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.name.errors"
class="invalid-feedback"
>
<div *ngIf="f.name.errors.required">
Full Name is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="form-actions">
<button
type="button"
class="btn btn-warning mr-1"
style="
color: #c3f164 !important;
background-color: #000000 !important;
border-color: #c3f164 !important;
"
(click)="cancel()"
>
<i class="feather ft-x"></i>
Edit
</button>
<button
type="submit"
class="btn btn-primary"
style="
color: #000000 !important;
background-color: #c3f164 !important;
"
(click)="saveEdit()"
>
<i class="la la-check"></i> Save
</button>
</div>
</form>
</div>
</div>
</div>

23
src/app/content/hemat-app/user-profile/profil-information/profil-information.component.spec.ts Normal file
View File

@ -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<ProfilInformationComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ProfilInformationComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ProfilInformationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

46
src/app/content/hemat-app/user-profile/profil-information/profil-information.component.ts Normal file
View File

@ -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');
}
}

0
src/app/content/hemat-app/user-profile/update-password/update-password.component.css Normal file
View File

1
src/app/content/hemat-app/user-profile/update-password/update-password.component.html Normal file
View File

@ -0,0 +1 @@
<p>update-password works!</p>

23
src/app/content/hemat-app/user-profile/update-password/update-password.component.spec.ts Normal file
View File

@ -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<UpdatePasswordComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ UpdatePasswordComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(UpdatePasswordComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

10
src/app/content/hemat-app/user-profile/update-password/update-password.component.ts Normal file
View File

@ -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 {
}

35
src/app/content/hemat-app/user-profile/user-profile.component.css
View File

@ -1,4 +1,33 @@
:host ::ng-deep .nav.nav-tabs .nav-item .nav-link {
padding: 1.5rem 0.7rem !important;
display: inline-flex;
.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;
}
}

15
src/app/content/hemat-app/user-profile/user-profile.component.html
View File

@ -5,7 +5,22 @@
</div>
<div class="content-body">
<section id="user-profile">
<div class="tabs">
<button class="tab-link hidden" (click)="selectTab('profile-info')" [class.active]="activeTab === 'profile-info'">Profile Information</button>
<button class="tab-link" (click)="selectTab('profile-info2')" [class.active]="activeTab === 'profile-info2'">Profile Information</button>
<button class="tab-link" (click)="selectTab('update-password')" [class.active]="activeTab === 'update-password'">Update Password</button>
</div>
<div *ngIf="activeTab === 'profile-info'" class="hidden">
<app-profile-info></app-profile-info>
</div>
<div *ngIf="activeTab === 'profile-info2'">
<app-profil-information></app-profil-information>
</div>
<div *ngIf="activeTab === 'update-password'">
<app-update-password></app-update-password>
</div>
</section>
</div>
</div>

18
src/app/content/hemat-app/user-profile/user-profile.component.ts
View File

@ -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;
}
}

39
src/app/content/hemat-app/user-profile/user-profile.module.ts
View File

@ -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 {}

27
src/app/interceptors/http-error-interceptor.service.ts
View File

@ -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<any>, next: HttpHandler): Observable<HttpEvent<any>> {
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);
})