candidate ankit verma bcbs test

src/app/app.component.ts

@@ -12,6 +12,7 @@ export class AppComponent {
   static readonly api = {
     user: {
       retrieve: `${environment.backend}/user/retrieve?size=1000`,
+      create: `${environment.backend}/user/create`
     },
   };
 }

src/app/app.module.ts

@@ -10,6 +10,7 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {CoreModule} from "./core/core.module";
 import {SharedModule} from "./shared/shared.module";
 import {HttpClient, HttpClientModule} from "@angular/common/http";
+import {FormsModule} from "@angular/forms";
 
 @NgModule({
   declarations: [
@@ -18,20 +19,21 @@ import {HttpClient, HttpClientModule} from "@angular/common/http";
     UserFormComponent,
     UserSearchComponent,
   ],
-  imports: [
-    BrowserAnimationsModule,
-    BrowserModule,
-    CoreModule,
-    HttpClientModule,
-    RouterModule.forRoot([
-      {path: 'user', redirectTo: 'user/search', pathMatch: 'full' },
-      {path: 'user/form', component: UserFormComponent },
-      {path: 'user/search', component: UserSearchComponent },
-      {path: '', component: HomeComponent },
-      {path: '**', redirectTo: '', pathMatch: 'full' },
-    ]),
-    SharedModule,
-  ],
+    imports: [
+        BrowserAnimationsModule,
+        BrowserModule,
+        CoreModule,
+        HttpClientModule,
+        RouterModule.forRoot([
+            {path: 'user', redirectTo: 'user/search', pathMatch: 'full'},
+            {path: 'user/form', component: UserFormComponent},
+            {path: 'user/search', component: UserSearchComponent},
+            {path: '', component: HomeComponent},
+            {path: '**', redirectTo: '', pathMatch: 'full'},
+        ]),
+        SharedModule,
+        FormsModule,
+    ],
   providers: [HttpClient],
   bootstrap: [AppComponent]
 })

src/app/core/service/user/user.service.ts

@@ -12,6 +12,8 @@ export class UserService {
   constructor(private httpClient: HttpClient) {}
 
   retrieve(): Observable<User[]> {
-    return this.httpClient.post<User[]>(AppComponent.api.user.retrieve, {});
+    const resposne = this.httpClient.get<User[]>(AppComponent.api.user.retrieve, {});
+    console.log(resposne);
+    return resposne;
   }
 }

src/app/core/store/user/user.state.ts

@@ -4,9 +4,13 @@ export interface UserState {
 }
 
 export interface User {
-  id: string;
-  name: string;
-  updated: string;
+  firstName: string;
+  middleName: string;
+  lastName: string;
+  phoneNumber: string;
+  email: string;
+  password: string;
+  role: string;
 }
 
 export const initialUserState: UserState = {

src/app/user/user-form/user-form.component.html

@@ -2,24 +2,42 @@
   User Form
 </div>
 <div class="form-container">
-  <mat-form-field appearance="fill">
-    <mat-label>First Name</mat-label>
-    <input matInput>
-  </mat-form-field>
-  <mat-form-field appearance="fill">
-    <mat-label>Middle Name</mat-label>
-    <input matInput>
-  </mat-form-field>
-  <mat-form-field appearance="fill">
-    <mat-label>Last Name</mat-label>
-    <input matInput>
-  </mat-form-field>
-  <div class="button-container">
-    <button mat-raised-button color="primary">
-      Save
-    </button>
-    <button routerLink="/user" mat-raised-button color="accent">
-      Back
-    </button>
-  </div>
+  <form #loginForm=ngForm (ngSubmit)="submit(loginForm)">
+      <mat-form-field appearance="fill">
+        <mat-label>First Name</mat-label>
+        <input matInput ngModel name="firstName" >
+      </mat-form-field>
+      <mat-form-field appearance="fill">
+        <mat-label>Middle Name</mat-label>
+        <input matInput ngModel name="middleName">
+      </mat-form-field>
+      <mat-form-field appearance="fill">
+        <mat-label>Last Name</mat-label>
+        <input matInput ngModel name="lastName">
+      </mat-form-field>
+      <mat-form-field appearance="fill">
+        <mat-label>Phone Number</mat-label>
+        <input matInput ngModel name="phoneNumber">
+      </mat-form-field>
+      <mat-form-field appearance="fill">
+        <mat-label>Email</mat-label>
+        <input matInput ngModel name="email">
+      </mat-form-field>
+      <mat-form-field appearance="fill">
+          <mat-label>Password</mat-label>
+          <input matInput ngModel name="password">
+      </mat-form-field>
+      <mat-form-field appearance="fill">
+        <mat-label>Role</mat-label>
+        <input matInput ngModel name="role">
+      </mat-form-field>
+      <div class="button-container">
+        <button mat-raised-button color="primary">
+          Save
+        </button>
+        <button routerLink="/user" mat-raised-button color="accent">
+          Back
+        </button>
+      </div>
+  </form>
 </div>

src/app/user/user-form/user-form.component.ts

@@ -1,14 +1,40 @@
 import { Component, OnInit } from '@angular/core';
+import {NgForm} from "@angular/forms";
+import {HttpClient, HttpErrorResponse} from "@angular/common/http";
+import {AppComponent} from "../../app.component";
+import {throwError} from "rxjs";
+import {catchError} from "rxjs/operators";
 
 @Component({
   templateUrl: './user-form.component.html',
   styleUrls: ['./user-form.component.scss']
 })
 export class UserFormComponent implements OnInit {
 
-  constructor() { }
+  constructor(private httpClient: HttpClient) {
+
+  }
 
   ngOnInit(): void {
+
+  }
+
+  private  handleError(errorRes: HttpErrorResponse) {
+    return throwError(errorRes.error.error.message);
+  }
+
+  submit(loginForm: NgForm) {
+    const data = loginForm.value;
+    console.log("button clicked " + data.firstName + " " + data.lastName + ' ' + AppComponent.api.user.create);
+    return  this.httpClient.post(AppComponent.api.user.create, {
+      firstName: data.firstName,
+      middleName: data.middleName,
+      lastName: data.lastName,
+      phoneNumber: data.phoneNumber,
+      email: data.email,
+      password: data.password,
+      role: data.role
+    }).subscribe();
   }
 
 }

src/app/user/user-search/user.ts

@@ -0,0 +1,9 @@
+export interface User {
+  firstName: string;
+  middleName: string;
+  lastName: string;
+  phoneNumber: string;
+  email: string;
+  password: string;
+  role: string;
+}

src/environments/environment.prod.ts

@@ -1,5 +1,5 @@
 
 export const environment = {
-  backend: "https://java.bravolt.dev",
+  backend: "http://localhost:9999",
   production: true
 };

src/environments/environment.ts

@@ -1,6 +1,6 @@
 
 export const environment = {
-  backend: "https://java.bravolt.dev",
+  backend: "http://localhost:9999",
   production: false,
 };