From ae74cf2332275aa4da9cd08e4090468edd572b20 Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Thu, 4 Jul 2024 14:23:44 +0700 Subject: [PATCH] integrasi user profil --- .../hemat-app/service/login.service.ts | 21 +++++ .../profil-information.component.html | 6 +- .../profil-information.component.ts | 86 +++++++++++++++---- 3 files changed, 95 insertions(+), 18 deletions(-) diff --git a/src/app/content/hemat-app/service/login.service.ts b/src/app/content/hemat-app/service/login.service.ts index 7805c07..6e3d42a 100644 --- a/src/app/content/hemat-app/service/login.service.ts +++ b/src/app/content/hemat-app/service/login.service.ts @@ -19,4 +19,25 @@ export class LoginService { }); return this.http.put(url, data, { headers }); } + + getDataProfil(id): Observable { + const endpoint = `/users`; + const url = `${BASE_URL}${endpoint}/byUserid/${id}`; + const headers = new HttpHeaders({ + "Content-Type": "application/json", + "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT", + }); + return this.http.get(url, { headers }); + } + + updateProfile(data: any, userId: string): Observable { + const endpoint = `/users`; + const url = `${BASE_URL}${endpoint}/update/${userId}`; + const headers = new HttpHeaders({ + "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT", + }); + + return this.http.post(`${url}`, data, { headers }); + } + } 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 index 9cffecc..dcbed6a 100644 --- 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 @@ -97,7 +97,7 @@
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 index 39684d3..821fae1 100644 --- 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 @@ -1,6 +1,7 @@ import { Component, ViewChild } from "@angular/core"; import { FormBuilder, FormGroup, NgForm, Validators } from "@angular/forms"; -import { ActivatedRoute, Router } from "@angular/router"; +import { LoginService } from "../../service/login.service"; +import { ToastrService } from "ngx-toastr"; @Component({ selector: "app-profil-information", templateUrl: "./profil-information.component.html", @@ -12,34 +13,55 @@ export class ProfilInformationComponent { profilInfo: FormGroup; activeTab: string = "profile-info2"; submitted = false; + storedData: any; + disableButton: boolean = false url: any = ''; + fileSelected: any = null; constructor( private formBuilder: FormBuilder, - private router: Router, - private route: ActivatedRoute + private authService: LoginService, + private toastr: ToastrService, ) {} ngOnInit(): void { + this.storedData = JSON.parse(localStorage.getItem("account_info")); this.profilInfo = this.formBuilder.group({ firstName: ["", Validators.required], lastName: ["", Validators.required], email: ["", Validators.required], phone: ["", Validators.required], - profilePicture: [null] + image: [null] }); + this.dataProfil(this.storedData.sub) + } + + dataProfil(userId){ + this.authService.getDataProfil(userId).subscribe(data => { + this.profilInfo.patchValue({ + firstName: data.data.firstname, + lastName: data.data.lastname, + email: data.data.email, + phone: data.data.phone, + image: [null] + }); + this.url = data.data.image_path + }); + } onSelectFile(event) { if (event.target.files && event.target.files[0]) { const file = event.target.files[0]; - - // Check if selected file is an image + this.fileSelected = file; if (!file.type.startsWith('image')) { - alert('Please select an image file.'); + this.toastr.error("Warning", "Please select an image file.", { + timeOut: 5000, + closeButton: true, + }); this.profilInfo.patchValue({ - profilePicture: null + image: null }); return; } @@ -53,12 +75,16 @@ export class ProfilInformationComponent { } } - public delete() { + public deleteImage() { this.url = null; - this.profilInfo.patchValue({ profilePicture: null }); + if (this.url === null) { + this.disableButton = true + } else{ + this.disableButton = false + } + this.profilInfo.patchValue({ image: null }); } - selectTab(tabName: string) { this.activeTab = tabName; } @@ -69,11 +95,41 @@ export class ProfilInformationComponent { onProjectInfoSubmit() { this.submitted = true; + if (this.profilInfo.invalid) { + return; + } + + const formData = new FormData(); + formData.append("firstname", this.profilInfo.get("firstName").value); + formData.append("lastname", this.profilInfo.get("lastName").value); + formData.append("email", this.profilInfo.get("email").value); + formData.append("phone", this.profilInfo.get("phone").value); + formData.append("statusId", "2"); + formData.append("buildingId", "4"); + formData.append("image", this.fileSelected); + + this.authService.updateProfile(formData, this.storedData.sub).subscribe( + (response) => { + console.log("Profile updated successfully:", response); + this.toastr.success("success", "Profile updated successfully.", { + timeOut: 5000, + closeButton: true, + }); + // Handle success response + }, + (error) => { + console.error("Profile update failed:", error); + this.toastr.error("Error", "Profile update failed.", { + timeOut: 5000, + closeButton: true, + }); + // Handle error response + } + ); } - cancel() {} - - saveEdit() { - console.log("save"); + cancel() { + this.dataProfil(this.storedData.sub); + this.disableButton = false } }