proxy ready, message request ready

frontend/angular.json

@@ -63,6 +63,10 @@
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "Proof_Of_Concept:build",
+            "proxyConfig": "src/proxy.conf.json"
+          },
           "configurations": {
             "production": {
               "browserTarget": "frontend:build:production"

frontend/src/app/app.module.ts

@@ -6,6 +6,7 @@ import { AppComponent } from './app.component';
 import { ServiceClientComponent } from './pages/service-client/service-client.component';
 import { NavbarComponent } from './navbar/navbar.component';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -16,7 +17,9 @@ import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
   imports: [
     BrowserModule,
     AppRoutingModule, 
-    HttpClientModule
+    HttpClientModule,
+    ReactiveFormsModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

frontend/src/app/pages/service-client/service-client.component.html

@@ -8,14 +8,25 @@ <h3>Service Client</h3>
             <div class="card-body">
                 <p class="card-title h4">Chat service client</p>
 
-                <div *ngFor="let post of posts$ | async" class="col-12 col-md-6 col-lg-6">
-                    <span class="d-flex col-4 mb-3 m-1">
-                        <div class="m-2">{{post.createdAt | date: 'dd/MM/yyyy'}}</div>
-                        <div class="m-2">{{post.author}}</div>
-                    </span>
-                    <p class="card-text">{{post.content}}</p>
+                <!-- Messages list-->
+                <div *ngFor="let post of posts$ | async" class="card-body bg-info col-12 col-md-6 col-lg-6">
+                        <span class="d-flex col-4 mb-3 m-1">
+                            <div class="m-2">{{post.createdAt | date: 'dd/MM/yyyy'}}</div>
+                            <div class="m-2">{{post.author}}</div>
+                        </span>
+                        <p class="card-text">{{post.content}}</p>
+
                 </div>
 
+                <!-- Send message form -->
+                <form class="form-signin d-flex align-items-center flex-column text-center mt-3" [formGroup]="form" (ngSubmit)="submit()">
+
+                    <textarea class="form-control" id="inputDescription" rows="10" placeholder="Contenu du message" formControlName="content">
+                    </textarea>
+
+                    <button class="btn btn-md btn-primary btn-block" type="submit" [disabled] = "form.invalid">Envoyer</button>
+                </form>
+
             </div>
         </div>
     </div>

frontend/src/app/pages/service-client/service-client.component.ts

@@ -1,7 +1,9 @@
 import { Component } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { Message } from 'src/app/interface/message';
+import { MessageRequest } from 'src/app/payload/messageRequest';
 import { MessageService } from 'src/app/service/message.service';
 
 @Component({
@@ -11,8 +13,25 @@ import { MessageService } from 'src/app/service/message.service';
 })
 export class ServiceClientComponent {
   constructor(private router: Router, 
-    private messageService: MessageService) { }
+    private messageService: MessageService,
+    private fb: FormBuilder) { }
 
     // This is subscribed in DOM with async 
   public posts$: Observable<Message[]> = this.messageService.getMessages();
+
+  public form = this.fb.group({
+     content: ['',
+       [ Validators.required,]
+     ],
+     author: ['',
+     [ Validators.required,]
+   ]
+   });
+
+   public submit(): void{
+    const request = this.form.value as MessageRequest;
+    request.author = "Utilisateur";
+    //const createpostRequest = this.form.value as Message;
+    this.messageService.sendMessage(request).subscribe();
+  }
 }

frontend/src/app/payload/messageRequest.ts

@@ -0,0 +1,4 @@
+export interface MessageRequest {
+    content: String; 
+    author: String; 
+}

frontend/src/app/service/message.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Message } from '../interface/message';
 import { HttpClient } from '@angular/common/http';
+import { MessageRequest } from '../payload/messageRequest';
 
 @Injectable({
   providedIn: 'root'
@@ -14,4 +15,8 @@ export class MessageService {
   public getMessages():  Observable<Message[]> {
     return this.httpClient.get<Message[]>(this.pathService);
   }
+
+  public sendMessage(request: MessageRequest):  Observable<Response> {
+    return this.httpClient.post<Response>(this.pathService, request);
+  }
 }

frontend/src/proxy.conf.json

@@ -0,0 +1,6 @@
+{
+    "/api/*": {
+      "target": "http://localhost:8080",
+      "secure": false
+    }
+  }