integrasi user profil

src/app/content/hemat-app/service/login.service.ts

@@ -19,4 +19,25 @@ export class LoginService {
     });
     return this.http.put<any>(url, data, { headers });
   }
+
+  getDataProfil(id): Observable<any> {
+    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<any>(url, { headers });
+  }
+
+  updateProfile(data: any, userId: string): Observable<any> {
+    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 });
+  }
+
 }

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

@@ -97,7 +97,7 @@
               <div class="image-container text-center" style="position: relative">
                 <button
                   *ngIf="url"
-                  (click)="delete()"
+                  (click)="deleteImage()"
                   class="btn btn-danger"
                   style="
                     position: absolute;
@@ -125,7 +125,7 @@
                 <input
                   id="fileInput"
                   type="file"
-                  formControlName="profilePicture"
+                  formControlName="image"
                   class="select-profile-picture"
                   (change)="onSelectFile($event)"
                   accept="image/*"
@@ -159,7 +159,7 @@
               border-radius: 10px;
               width: 145px;
             "
-            (click)="saveEdit()"
+            [disabled]="disableButton"
           >
             Save
           </button>

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