ça devrait le faire

src/app/components/card-menu/card-menu.component.html

@@ -1,71 +1,3 @@
-<div *ngFor="let menu of listMenus">
-  <div class="menu card mb-4" style="width: 14rem">
-    <p>{{ menu.dateMenu | date: "EEEE, d":"fr" }}</p>
-    <p>{{ menu.repas }}</p>
-    <p>{{ menu.libelle }}</p>
-
-    <ng-template #content let-modal>
-      <div class="modal-header">
-        <h4 class="modal-title" id="modal-basic-title">
-          Mettre à jour un menu
-        </h4>
-        <button
-          type="button"
-          class="close"
-          aria-label="Close"
-          (click)="modal.dismiss('Cross click')"
-        >
-          <span aria-hidden="true"> × </span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <form [formGroup]="upMenuForm">
-          <div class="form-group">
-            <label for="dateMenu"> Date </label>
-            <div class="input-group">
-              <input
-                id="dateMenu"
-                class="form-control"
-                formControlName="dateMenuFc"
-                value="{{ menu.dateMenu }}"
-                placeholder=""
-                name="date"
-              />
-              <input
-                id="libelle"
-                class="form-control"
-                formControlName="libelleFc"
-                value="{{ menu.libelle }}"
-                placeholder=""
-                name="libelle"
-              />
-              <input
-                id="repas"
-                class="form-control"
-                formControlName="repasFc"
-                value="{{ menu.repas }}"
-                placeholder=""
-                name="repas"
-              />
-            </div>
-          </div>
-        </form>
-      </div>
-      <div class="modal-footer">
-        <button
-          type="button"
-          class="btn btn-outline-dark"
-          (click)="modal.close(updateMenu(menu.id))"
-        >
-          Mettre à jour
-        </button>
-      </div>
-    </ng-template>
-
-    <i class="bi bi-pencil-square" (click)="open(content)"></i>
-    <i class="bi bi-trash3" (click)="deleteMenu(menu.id)"></i>
-  </div>
-</div>
 <ng-template #content let-modal>
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title">Ajouter un menu</h4>
@@ -81,28 +13,30 @@
   <div class="modal-body">
     <form [formGroup]="menuForm">
       <div class="form-group">
-        <label for="dateMenu"> Date </label>
         <div class="input-group">
           <input
+            type="date"
             id="dateMenu"
             class="form-control"
             formControlName="dateMenuFc"
-            placeholder="aaaa-mm-jj"
+            placeholder="Date"
             name="date"
           />
+
           <input
-            id="libelle"
+            id="repasMidi"
             class="form-control"
-            formControlName="libelleFc"
-            placeholder="repas"
-            name="libelle"
+            formControlName="repasMidiFc"
+            placeholder="Repas du midi"
+            name="repasMidi"
           />
+
           <input
-            id="repas"
+            id="repasSoir"
             class="form-control"
-            formControlName="repasFc"
-            placeholder="soir ou midi"
-            name="repas"
+            formControlName="repasSoirFc"
+            placeholder="Repas du soir"
+            name="repasSoir"
           />
         </div>
       </div>
@@ -119,6 +53,83 @@
   </div>
 </ng-template>
 
-<button type="button" class="btn btn-outline-dark" (click)="open(content)">
+<button type="button" class="btn btn-outline-warning" (click)="open(content)">
   Ajouter un menu
 </button>
+
+<div class="container mt-5 menu">
+  <div class="row d-flex justify-content-center">
+    <div class="col-md-auto" *ngFor="let menu of listMenus">
+      <div class="card p-3 py-4 align-items" style="width: 14rem">
+        <p class="jour">{{ menu.dateMenu | date: "EEEE":"fr" }}</p>
+        <div class="tag">
+          <p class="repas">Midi</p>
+          <p>{{ menu.repasMidi }}</p>
+        </div>
+        <div class="tag">
+          <p class="repas">Soir</p>
+          <p>{{ menu.repasSoir }}</p>
+        </div>
+        <ng-template #content let-modal>
+          <div class="modal-header">
+            <h4 class="modal-title" id="modal-basic-title">
+              Mettre à jour un menu
+            </h4>
+            <button
+              type="button"
+              class="close"
+              aria-label="Close"
+              (click)="modal.dismiss('Cross click')"
+            >
+              <span aria-hidden="true"> × </span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <form [formGroup]="upMenuForm">
+              <div class="form-group">
+                <div class="input-group">
+                  <input
+                    type="date"
+                    id="dateMenu"
+                    class="form-control"
+                    formControlName="dateMenuFc"
+                    value="{{ menu.dateMenu }}"
+                    placeholder="Date"
+                    name="date"
+                  />
+                  <input
+                    id="repasMidi"
+                    class="form-control"
+                    formControlName="repasMidiFc"
+                    value="{{ menu.repasMidi }}"
+                    placeholder="Repas du midi"
+                    name="repasMidi"
+                  />
+                  <input
+                    id="repasSoir"
+                    class="form-control"
+                    formControlName="repasSoirFc"
+                    value="{{ menu.repasSoir }}"
+                    placeholder="Repas du soir"
+                    name="repasSoir"
+                  />
+                </div>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="button"
+              class="btn btn-outline-dark"
+              (click)="modal.close(updateMenu(menu.id))"
+            >
+              Mettre à jour
+            </button>
+          </div>
+        </ng-template>
+        <i class="bi bi-pencil-square" (click)="open(content)"></i>
+        <i class="bi bi-trash3" (click)="deleteMenu(menu.id)"></i>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/card-menu/card-menu.component.scss

@@ -1,3 +1,36 @@
-.menu {
-  margin-left: 500px;
+.card {
+  min-height: 22rem;
+  margin-left: 75px;
+  margin-bottom: 30px;
+  border: 1px solid #f7c02b;
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 5px 5px 5px gray;
+}
+
+.tag {
+  margin-top: 20px;
+  background-color: #fad980;
+  margin-left: -8px;
+  width: 13rem;
+  border: 1px solid #fad980;
+  border-radius: 8px;
+}
+.bi {
+  margin-top: 10px;
+}
+
+.btn {
+  margin-top: 10px;
+  color: black;
+  box-shadow: 5px 5px 5px gray;
+}
+
+.jour {
+  font-weight: bolder;
+  font-size: 25px;
+}
+.repas {
+  font-weight: bold;
 }

src/app/components/card-menu/card-menu.component.ts

@@ -35,16 +35,6 @@ public upMenuForm : FormGroup;
     this.listMenus=[];
     this.menuForm = new FormGroup({});
     this.upMenuForm = this.initForm();
-   }
-
-     //Méthode qui initialise les champs du formulaire avec les infos de la BDD
-  private initForm(menu?: Menu): FormGroup {
-    return this.fb.group({
-      dateMenu: [menu ? menu.dateMenu : ''],
-      libelle: [menu ? menu.libelle : ''],
-      repas: [menu ? menu.repas : ''],
-
-    });
   }
 
   //delete d'un menu
@@ -58,15 +48,17 @@ this.menusService.deleteMenu(id_menu)?.subscribe((resp) => {
 
 //updateMenu
 updateMenu(id_menu : number): void {
+
     const dateValue = this.menuForm.value['dateMenuFc'];
-    const libelleValue = this.menuForm.value['libelleFc'];
-    const repasValue = this.menuForm.value['repasFc'];
+    const repasMidiValue = this.menuForm.value['repasMidiFc'];
+    const repasSoirValue = this.menuForm.value['repasSoirFc'];
+
 
     const menu: Menu = {
       dateMenu: dateValue,
-      libelle: libelleValue,
-      repas: repasValue,
-      id: id_menu
+      repasMidi: repasMidiValue,
+      repasSoir: repasSoirValue,
+      id: 0
     };
 
     console.log(id_menu);
@@ -77,22 +69,33 @@ updateMenu(id_menu : number): void {
       });
   }
 
+  //Méthode qui initialise les champs du formulaire avec les infos de la BDD
+  private initForm(menu?: Menu): FormGroup {
+    return this.fb.group({
+      dateMenu: [menu ? menu.dateMenu : ''],
+      libelle: [menu ? menu.repasMidi : ''],
+      repas: [menu ? menu.repasSoir : ''],
+
+    });
+  }
+
 
 //ajout d'un menu
 saveMenu(): void {
 
     const dateValue = this.menuForm.value['dateMenuFc'];
-    const libelleValue = this.menuForm.value['libelleFc'];
-    const repasValue = this.menuForm.value['repasFc'];
+    const repasMidiValue = this.menuForm.value['repasMidiFc'];
+    const repasSoirValue = this.menuForm.value['repasSoirFc'];
+
 
     const menu: Menu = {
       dateMenu: dateValue,
-      libelle: libelleValue,
-      repas: repasValue,
+      repasMidi: repasMidiValue,
+      repasSoir: repasSoirValue,
       id: 0
     };
 
-   if (menu.dateMenu !=='' && menu.libelle !== '') {
+  if (menu.dateMenu !=='') {
 
     console.log(menu.dateMenu);
       this.menusService.addMenu(menu)?.subscribe((resp) => {
@@ -110,8 +113,10 @@ saveMenu(): void {
 this.menusService.getMenu()?.subscribe((listMenus: any[])=>{
   console.log(listMenus);
   this.listMenus=listMenus;
+
 });
 
+
   this.menuForm = this.fb.group(
   {
     dateMenuFc: new FormControl('',[Validators.required]),