perbaikan interceptor

src/app/content/hemat-app/user-profile/profil-info/profil-info.component.html

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

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

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

src/app/content/hemat-app/user-profile/profil-information/profil-information.component.html

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

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

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

src/app/content/hemat-app/user-profile/update-password/update-password.component.html

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

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

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

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 {
+.tabs {
-    padding: 1.5rem 0.7rem !important;
+  display: flex;
-    display: inline-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;
+  }
+}

src/app/content/hemat-app/user-profile/user-profile.component.html

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

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',
+  selector: "app-user-profile",
-  templateUrl: './user-profile.component.html',
+  templateUrl: "./user-profile.component.html",
-  styleUrls: ['./user-profile.component.css']
+  styleUrls: ["./user-profile.component.css"],
 })
 export class UserProfileComponent {
   public breadcrumb: any;
+
+  activeTab: string = "profile-info2";
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  selectTab(tabName: string) {
+    this.activeTab = tabName;
+  }
 }

src/app/content/hemat-app/user-profile/user-profile.module.ts

@@ -1,24 +1,35 @@
-import { NgModule } from '@angular/core';
+import { NgModule } from "@angular/core";
-import { CommonModule } from '@angular/common';
+import { CommonModule } from "@angular/common";
-import { UserProfileComponent } from './user-profile.component';
+import { UserProfileComponent } from "./user-profile.component";
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
-import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
+import { BreadcrumbModule } from "src/app/_layout/breadcrumb/breadcrumb.module";
-import { RouterModule } from '@angular/router';
+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: '',
+        path: "",
-        component: UserProfileComponent
+        component: UserProfileComponent,
       },
-    ])
+    ]),
-  ]
+  ],
 })
-export class UserProfileModule { }
+export class UserProfileModule {}

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