connect profile info to update user api

Author: kflemin

src/@seed/api/user/user.service.ts

@@ -1,8 +1,9 @@
+import type { HttpErrorResponse } from '@angular/common/http'
 import { HttpClient } from '@angular/common/http'
 import { inject, Injectable } from '@angular/core'
 import type { Observable } from 'rxjs'
-import { distinctUntilChanged, ReplaySubject, switchMap, take, tap } from 'rxjs'
-import type { CurrentUser, SetDefaultOrganizationResponse } from '@seed/api/user'
+import { catchError, distinctUntilChanged, ReplaySubject, switchMap, take, tap } from 'rxjs'
+import type { CurrentUser, SetDefaultOrganizationResponse, UserUpdateRequest } from '@seed/api/user'
 
 @Injectable({ providedIn: 'root' })
 export class UserService {
@@ -42,4 +43,19 @@ export class UserService {
       }),
     )
   }
+
+  /**
+   * Update user
+   */
+  updateUser(userId: number, params: UserUpdateRequest): Observable<CurrentUser> {
+    return this._httpClient.put<CurrentUser>(`api/v3/users/${userId}/`, params).pipe(
+      tap((user) => {
+        this._currentUser.next(user)
+      }),
+      catchError((error: HttpErrorResponse) => {
+        console.error('Error occurred while updating user:', error.error)
+        return this._currentUser
+      }),
+    )
+  }
 }

src/@seed/api/user/user.types.ts

@@ -18,6 +18,12 @@ export type CurrentUser = {
   api_key: string;
 }
 
+export type UserUpdateRequest = {
+  first_name: string;
+  last_name: string;
+  email: string;
+}
+
 export type SetDefaultOrganizationResponse = {
   status: string;
   user: {

src/app/layout/common/user/user.component.ts

@@ -55,7 +55,6 @@ export class UserComponent implements OnInit, OnDestroy {
   }
 
   goToProfile() {
-    console.log('hi!')
     void this._router.navigate(['/profile'])
   }
 }

src/app/modules/profile/info/info.component.html

@@ -4,43 +4,39 @@ <h2 class="mb-6 flex items-center text-center text-2xl">
       <mat-icon class="mr-2" svgIcon="fa-solid:circle-user"></mat-icon>Profile Information
     </h2>
 
-    <form class="bg-card mt-8 flex flex-col overflow-hidden rounded-2xl p-8 pb-4 shadow">
+    <form [formGroup]="profileForm" (ngSubmit)="onSubmit()" class="bg-card mt-8 flex flex-col overflow-hidden rounded-2xl p-8 pb-4 shadow">
       <div class="gt-xs:flex-row flex flex-col">
         <mat-form-field class="gt-xs:pr-3 flex-auto">
           <mat-label>{{ t('First Name') }}</mat-label>
-          <input matInput />
+          <input matInput [formControlName]="'firstName'" />
           <mat-icon class="icon-size-5" matPrefix [svgIcon]="'fa-solid:circle-user'"></mat-icon>
         </mat-form-field>
         <mat-form-field class="gt-xs:pl-3 flex-auto">
           <mat-label>{{ t('Last Name') }}</mat-label>
-          <input matInput />
+          <input matInput [formControlName]="'lastName'" />
           <mat-icon class="icon-size-5" matPrefix [svgIcon]="'fa-solid:circle-user'"></mat-icon>
         </mat-form-field>
       </div>
       <div class="flex">
-        <!-- <mat-form-field
-            class="flex-auto"
-        >
-            <mat-label>{{ t('Email') }}</mat-label>
-            <input matInput/>
-            <mat-icon
-                class="icon-size-5"
-                matSuffix
-                [svgIcon]="'fa-solid:envelope'"
-            ></mat-icon>
-        </mat-form-field> -->
-
         <mat-form-field class="w-full">
           <mat-label>Email</mat-label>
           <mat-icon class="icon-size-5" [svgIcon]="'fa-solid:envelope'" matPrefix></mat-icon>
           <input [formControlName]="'email'" matInput />
         </mat-form-field>
       </div>
       <div class="flex justify-center">
-        <a mat-flat-button color="primary">
+        <button mat-flat-button color="primary">
           <span class="ml-2">{{ t('Update') }}</span>
-        </a>
+        </button>
       </div>
+      <!-- Alert -->
+      @if (showAlert) {
+        <div class="mb-4 mt-0">
+          <seed-alert class="-mb-4 mt-8" appearance="outline" [showIcon]="false" [type]="alert.type">
+            {{ alert.message }}
+          </seed-alert>
+        </div>
+      }
     </form>
   </div>
 </div>

src/app/modules/profile/info/info.component.ts

@@ -1,26 +1,94 @@
-import { Component, ViewEncapsulation } from '@angular/core'
-import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'
+import type { OnDestroy, OnInit } from '@angular/core'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, ViewEncapsulation } from '@angular/core'
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'
 import { MatButtonModule } from '@angular/material/button'
 import { MatFormFieldModule } from '@angular/material/form-field'
 import { MatIconModule } from '@angular/material/icon'
 import { MatInputModule } from '@angular/material/input'
+import { Subject, takeUntil } from 'rxjs'
+import type { CurrentUser, UserUpdateRequest } from '@seed/api/user'
+import { UserService } from '@seed/api/user'
+import type { Alert } from '@seed/components'
+import { AlertComponent } from '@seed/components'
 import { SharedImports } from '@seed/directives'
-
 @Component({
   selector: 'seed-profile-info',
   templateUrl: './info.component.html',
   encapsulation: ViewEncapsulation.None,
-  imports: [MatIconModule, FormsModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, MatButtonModule, SharedImports],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    AlertComponent,
+    MatIconModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    SharedImports,
+  ],
 })
-export class ProfileInfoComponent {
-  firstName: FormControl = new FormControl('', [Validators.required])
+export class ProfileInfoComponent implements OnInit, OnDestroy {
+  private _userService = inject(UserService)
+  private _changeDetectorRef = inject(ChangeDetectorRef)
+
+  alert: Alert
+  showAlert = false
+  user: CurrentUser
+
+  profileForm = new FormGroup({
+    firstName: new FormControl('', [Validators.required]),
+    lastName: new FormControl('', [Validators.required]),
+    email: new FormControl('', [Validators.required]),
+  })
+
+  private readonly _unsubscribeAll$ = new Subject<void>()
+
+  ngOnInit(): void {
+    // Subscribe to user changes
+    this._userService.currentUser$.pipe(takeUntil(this._unsubscribeAll$)).subscribe((currentUser) => {
+      this.user = currentUser
 
-  lastName: FormControl = new FormControl('', [Validators.required])
+      // pre-populate form (here?)
+      if (this.user.first_name) this.profileForm.get('firstName')?.setValue(this.user.first_name)
+      if (this.user.last_name) this.profileForm.get('lastName')?.setValue(this.user.last_name)
+      if (this.user.email) this.profileForm.get('email')?.setValue(this.user.email)
+
+      // Mark for check
+      this._changeDetectorRef.markForCheck()
+    })
+  }
+
+  ngOnDestroy(): void {
+    this._unsubscribeAll$.next()
+    this._unsubscribeAll$.complete()
+  }
 
-  email: FormControl = new FormControl('', [Validators.required])
+  onSubmit(): void {
+    // Handle form submission
+    if (this.profileForm.valid) {
+      const userData = {
+        first_name: this.profileForm.value.firstName,
+        last_name: this.profileForm.value.lastName,
+        email: this.profileForm.value.email,
+      } as UserUpdateRequest
 
-  onSubmit() {
-    // Handle form submission (e.g., send the form data to an API)
-    console.log('Form Submitted', { firstName: this.firstName, lastName: this.lastName, email: this.email })
+      this._userService.updateUser(this.user.id, userData).subscribe({
+        error: (error) => {
+          console.error('Error:', error)
+          this.alert = {
+            type: 'error',
+            message: 'Update User Unsuccessful...',
+          }
+          this.showAlert = true
+        },
+        complete: () => {
+          this.alert = {
+            type: 'success',
+            message: 'Changes saved!',
+          }
+          this.showAlert = true
+        },
+      })
+    }
   }
 }