feat: adding delete button with the corresponding endpoint

front/MyINPulse-front/src/components/canvas/CanvasItem.vue

@@ -30,6 +30,18 @@
                 <template v-else>
                     <!-- Mode affichage -->
                     <template v-if="!isEditing[index]">
+                        <template v-if="expanded">
+                            <button
+                                class="delete-button"
+                                title="Supprimer"
+                                @click.stop="
+                                    deleteSectionCell(desc.idSectionCell, index)
+                                "
+                            >
+                                ✕
+                            </button>
+                        </template>
+
                         <div class="description">
                             <p class="m-0">{{ desc.contentSectionCell }}</p>
                         </div>
@@ -87,7 +99,7 @@ import { ref, defineProps, onMounted } from "vue";
 import { getSectionCellsByDate } from "@/services/Apis/Shared.ts";
 import { addSectionCell } from "@/services/Apis/Entrepreneurs.ts";
 import SectionCell from "@/ApiClasses/SectionCell";
-
+import { removeSectionCell } from "@/services/Apis/Entrepreneurs.ts";
 import type { AxiosResponse, AxiosError } from "axios";
 
 const props = defineProps<{
@@ -137,6 +149,37 @@ const saveEdit = (index: number) => {
     }
 };
 
+const deleteSectionCell = (id: number | undefined, index: number): void => {
+    if (id === -1) {
+        window.confirm("Êtes-vous sûr de vouloir supprimer cet élément ?");
+        console.error("Delete ignored");
+        return;
+    }
+
+    const confirmed = window.confirm(
+        "Êtes-vous sûr de vouloir supprimer cet élément ?"
+    );
+
+    if (!confirmed) return;
+
+    if (id === undefined) {
+        console.error("ID de la cellule non défini");
+        return;
+    }
+
+    removeSectionCell(
+        id,
+        () => {
+            currentDescriptions.value.splice(index, 1);
+            editedDescriptions.value.splice(index, 1);
+            isEditing.value.splice(index, 1);
+        },
+        (error: AxiosError) => {
+            console.error("Erreur lors de la suppression :", error);
+        }
+    );
+};
+
 const handleClick = () => {
     if (expanded.value) {
         const editingInProgress = isEditing.value.some((edit) => edit);
@@ -625,4 +668,20 @@ onMounted(() => {
     line-height: 1.6;
     font-family: "Segoe UI", sans-serif;
 }
+
+.delete-button {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+    background: transparent;
+    border: none;
+    color: #a00;
+    font-size: 1.2rem;
+    cursor: pointer;
+    z-index: 10;
+}
+
+.section-bloc {
+    position: relative;
+}
 </style>

front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue

@@ -169,7 +169,7 @@ onBeforeUnmount(() => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 15px 30px;
+    padding: 10px 20px;
     background-color: #f9f9f9;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }