From 90749ea55e2aeb2eed7d4770f5f071cec6cd3af3 Mon Sep 17 00:00:00 2001
From: sanchezvem <mathys.sanchezvende@gmail.com>
Date: Wed, 13 May 2026 20:47:55 +0100
Subject: [PATCH] added form into vue to send message

---
 .../message-form/message-form.component.html  | 11 +++++---
 .../message-form/message-form.component.ts    | 25 ++++++++++++-------
 src/app/pages/home/home.component.html        |  1 +
 src/app/pages/home/home.component.ts          |  2 ++
 4 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/app/components/message-form/message-form.component.html b/src/app/components/message-form/message-form.component.html
index 46be926..a531244 100644
--- a/src/app/components/message-form/message-form.component.html
+++ b/src/app/components/message-form/message-form.component.html
@@ -1,3 +1,8 @@
-<p>
-    message-form works!
-</p>
+<form [formGroup]="messageForm" class="relative">
+    <ion-item lines="none" class="rounded-2xl border border-stone-200 fixed bottom-4 left-4 right-4">
+        <ion-input placeholder="Envoyer un message ..." formControlName="libelle"></ion-input>
+        <ion-button style="--background: white">
+            <ion-icon name="send-outline" class="text-xl text-stone-400"></ion-icon>
+        </ion-button>
+    </ion-item>
+</form>
diff --git a/src/app/components/message-form/message-form.component.ts b/src/app/components/message-form/message-form.component.ts
index d52d767..910c75c 100644
--- a/src/app/components/message-form/message-form.component.ts
+++ b/src/app/components/message-form/message-form.component.ts
@@ -1,16 +1,23 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
+import {IonicModule} from "@ionic/angular";
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {addIcons} from "ionicons";
+import {sendOutline} from 'ionicons/icons';
+addIcons({
+    "send-outline" : sendOutline
+})
 
 @Component({
     selector: 'app-message-form',
     templateUrl: './message-form.component.html',
     styleUrls: ['./message-form.component.scss'],
+    imports: [
+        IonicModule,
+        ReactiveFormsModule
+    ]
 })
-export class MessageFormComponent implements OnInit {
-
-    constructor() {
-    }
-
-    ngOnInit() {
-    }
-
+export class MessageFormComponent {
+    messageForm: FormGroup = new FormGroup({
+        libelle: new FormControl<string>(null, [Validators.required]),
+    })
 }
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 5fbb719..f4a4632 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -50,6 +50,7 @@
     @if (groupSelected()) {
         <app-modal>
             <app-message [groupId]="groupSelected().id"></app-message>
+            <app-message-form></app-message-form>
         </app-modal>
     }
 </ion-content>
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index eb656a7..6f8614f 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -29,6 +29,7 @@ import {GroupsComponent} from "../../components/groups/groups.component";
 import {GroupFormComponent} from "../../components/group-form/group-form.component";
 import {GroupInfoComponent} from "../../components/group-info/group-info.component";
 import {MessageComponent} from "../../components/message/message.component";
+import {MessageFormComponent} from "../../components/message-form/message-form.component";
 
 addIcons({
     'profile': personOutline,
@@ -61,6 +62,7 @@ type View = 'menu' | 'profile' | 'password' | 'designation' | 'gallery' | 'group
         GroupFormComponent,
         GroupInfoComponent,
         MessageComponent,
+        MessageFormComponent,
     ]
 })
 export class HomeComponent implements OnInit {