suppresion de local database

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

@@ -2,67 +2,72 @@
     <div :class="['cell', { expanded }]" @click="handleClick">
         <h3 class="fs-5 fw-medium">{{ titleText }}</h3>
 
-        <div
-            v-for="(desc, index) in currentDescriptions"
-            :key="index"
-            class="section-bloc"
-        >
-            <!-- ADMIN -------------------------------------------------------------------------------------------->
+        <div class="tooltip-explain">{{ description }}</div>
 
-            <template v-if="IS_ADMIN">
-                <div class="description">
-                    <p class="m-0">{{ desc }}</p>
-                </div>
-            </template>
-
-            <!-- ENTREP ------------------------------------------------------------------------------------------->
-
-            <template v-if="!IS_ADMIN">
-                <!-- Mode affichage -->
-                <template v-if="!isEditing[index]">
-                    <div class="description">
-                        <p class="m-0">{{ desc }}</p>
-                    </div>
-                    <div class="button-container">
-                        <button
-                            v-if="expanded"
-                            class="edit-button"
-                            @click.stop="startEditing(index)"
-                        >
-                            Éditer
-                        </button>
-                    </div>
-                </template>
-
-                <!-- Mode édition -->
-                <template v-else>
-                    <textarea
-                        v-model="editedDescriptions[index]"
-                        class="edit-input"
-                    ></textarea>
-                    <div class="button-container">
-                        <button
-                            class="save-button"
-                            @click.stop="saveEdit(index)"
-                        >
-                            Enregistrer
-                        </button>
-                        <button
-                            class="cancel-button"
-                            @click.stop="cancelEdit(index)"
-                        >
-                            Annuler
-                        </button>
-                    </div>
-                </template>
-            </template>
-        </div>
-        <!---------------------------------------------------------------------------------------------------->
         <template v-if="expanded">
-            <div class="canvas-exit-hint">
-                Cliquez n'importe où pour quitter le canvas
-            </div>
+              <div class="explain">
+                <p>
+                    {{ description }}
+                </p>
+              </div>
         </template>
+
+        <div class="description-wrapper custom-flow">
+            <div
+                v-for="(desc, index) in currentDescriptions"
+                :key="index"
+                :class="['section-bloc', index % 2 === 0 ? 'from-left' : 'from-right']"
+                class="section-bloc"
+            >
+              <!-- ADMIN -------------------------------------------------------------------------------------------->
+
+              <template v-if="IS_ADMIN">
+                  <div class="description">
+                      <p class="m-0">{{ desc }}</p>
+                  </div>
+              </template>
+
+              <!-- ENTREP ------------------------------------------------------------------------------------------->
+
+              <template v-if="!IS_ADMIN">
+                  <!-- Mode affichage -->
+                  <template v-if="!isEditing[index]">
+                      <div class="description">
+                          <p class="m-0">{{ desc }}</p>
+                      </div>
+                      <div class="button-container">
+                          <button
+                              v-if="expanded"
+                              class="edit-button"
+                              @click.stop="startEditing(index)"
+                          >
+                              Éditer
+                          </button>
+                      </div>
+                  </template>
+
+                  <!-- Mode édition -->
+                  <template v-else>
+                    <div class="edit-row">
+                        <textarea
+                            v-model="editedDescriptions[index]"
+                            class="edit-input"
+                        ></textarea>
+                        <div class="button-container">
+                            <button class="save-button" @click.stop="saveEdit(index)">Enregistrer</button>
+                            <button class="cancel-button" @click.stop="cancelEdit(index)">Annuler</button>
+                        </div>
+                    </div>
+                  </template>
+              </template>
+          </div>
+          <!---------------------------------------------------------------------------------------------------->
+          <template v-if="expanded">
+              <div class="canvas-exit-hint">
+                Cliquez n'importe où pour quitter le canvas (terminez d'abord vos modifications)
+              </div>
+          </template>
+        </div>
     </div>
 </template>
 
@@ -165,24 +170,72 @@ const mockFetch = async (projectId: number, title: number, date: string) => {
         `Mock fetch pour projectId: ${projectId}, title: ${title}, date: ${date}`
     );
 
+    const leanCanvasData: Record<number, string[]> = {
+        1: [
+            "Les clients ont du mal à trouver des produits écoresponsables abordables.",
+            "Le processus d'achat en ligne est trop complexe.",
+            "Manque de transparence sur l’origine des produits.",
+            "Peu d’alternatives locales et durables sur le marché."
+        ],
+        2: [
+            "Jeunes urbains engagés dans la cause écologique.",
+            "Familles à revenu moyen voulant consommer responsable.",
+            "Entreprises soucieuses de leur empreinte carbone."
+        ],
+        3: [
+            "Une plateforme centralisée avec des produits écologiques certifiés.",
+            "Un service client humain et réactif.",
+            "Livraison éco-responsable avec suivi."
+        ],
+        4: [
+            "Application intuitive avec suggestions personnalisées.",
+            "Emballages recyclables et réutilisables.",
+        ],
+        5: [
+            "Algorithme exclusif de recommandations durables.",
+            "Forte communauté engagée sur les réseaux.",
+        ],
+        6: [
+            "Canaux digitaux : réseaux sociaux, SEO.",
+            "Partenariats avec influenceurs écoresponsables.",
+            "Boutique physique en pop-up stores."
+        ],
+        7: [
+            "Taux de rétention client mensuel.",
+            "Taux de satisfaction utilisateur (NPS)."
+        ],
+        8: [
+            "Coût du développement logiciel initial.",
+            "Campagnes publicitaires et communication.",
+            "Frais logistiques (emballages, transport)."
+        ],
+        9: [
+            "Ventes directes sur la plateforme.",
+            "Abonnement mensuel premium pour livraison gratuite.",
+            "Revenus via partenariats de marque."
+        ]
+    };
+
+    // On extrait les descriptions pour la section demandée
+    const section = leanCanvasData[title] || ["Aucune donnée disponible."];
+
+    // On garde tous les éléments, dans l'ordre
+    const result = section.map((txt) => ({ txt }));
+
     return new Promise<{ txt: string }[]>((resolve) => {
-        setTimeout(() => {
-            resolve([
-                { txt: "Ceci est une description 1 pour tester le front." },
-                { txt: "Deuxième description." },
-                { txt: "Troisième description." },
-            ]);
-        }, 500); // Simule un délai réseau de 500ms
+        setTimeout(() => resolve(result), 500);
     });
 };
 
+
+
 // Utilisation du mock dans handleClick pour tester sans serveur
 const handleClick = async () => {
     if (!expanded.value) {
         await fetchData(props.projectId, props.title, "NaN", IS_MOCK_MODE);
     } else if (!isEditing.value.includes(true)) {
         // Réinitialiser les descriptions si aucune édition n'est en cours
-        currentDescriptions.value = [props.description];
+        //currentDescriptions.value = [props.description];
         editedDescriptions.value = [props.description];
     }
 
@@ -256,6 +309,20 @@ const cancelEdit = (index: number) => {
     editedDescriptions.value[index] = currentDescriptions.value[index];
     isEditing.value[index] = false;
 };
+
+const randomStyle = () => {
+    const offsetX = Math.floor(Math.random() * 20) - 10; // entre -10 et +10px
+    const offsetY = Math.floor(Math.random() * 20) - 10;
+    return {
+        transform: `translate(${offsetX}px, ${offsetY}px)`,
+        transition: 'transform 0.3s ease',
+    };
+};
+
+const styleClasses = ['float-up', 'float-left', 'float-right', 'wiggle', 'tilt'];
+const getRandomClass = () => {
+    return styleClasses[Math.floor(Math.random() * styleClasses.length)];
+};
 </script>
 
 <style scoped>
@@ -276,6 +343,27 @@ const cancelEdit = (index: number) => {
     justify-content: flex-start !important;
 }
 
+.tooltip-explain {
+    position: absolute;
+    bottom: 101%; /* au-dessus de la carte */
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #333;
+    color: #fff;
+    padding: 6px 12px;
+    font-size: 13px;
+    border-radius: 6px;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+    z-index: 10;
+}
+
+.cell:not(.expanded):hover .tooltip-explain {
+    opacity: 0.9;
+}
+
 .cell:not(.expanded):hover {
     transform: scale(1.05);
     box-shadow: 0 8px 9px rgba(0, 0, 0, 0.2);
@@ -309,16 +397,11 @@ const cancelEdit = (index: number) => {
 }
 
 .description {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    width: 100%;
-    height: 100%;
-    font-size: 16px;
-    margin-top: 10px;
-    margin-left: 2%;
-    margin-right: 4%;
+    font-size: 5px;
+    color: #333;
+    word-break: break-word;
+    width: 90%;
+    margin: 5px 0;
 }
 
 .description + .p {
@@ -330,14 +413,18 @@ const cancelEdit = (index: number) => {
 .edit-input {
     width: 100%;
     height: 100%;
+    min-height: 100px;
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
     margin-top: 10px;
     box-sizing: border-box;
     margin-left: 2%;
+    max-height: none;
+    overflow: hidden;
 }
 
+
 .button-container {
     display: block;
     margin-top: 20px;
@@ -347,7 +434,25 @@ const cancelEdit = (index: number) => {
     padding-right: 1%;
 }
 
-.section-bloc,
+.section-bloc {
+    background-color: #f3f3f3;
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-family: "Arial", sans-serif;
+    color: #333;
+    word-break: break-word;
+    flex-shrink: 0;
+    cursor: default;
+
+    max-width: 100%;
+    width: fit-content;     
+    overflow-wrap: break-word;
+    box-sizing: border-box;
+
+    min-width: 120px;
+}
+
+
 .editing-section-bloc {
     width: 100%;
     justify-content: center;
@@ -368,6 +473,10 @@ const cancelEdit = (index: number) => {
     margin-right: 20px;
 }
 
+.description p {
+    font-size: 12px;
+}
+
 .save-button,
 .cancel-button {
     width: 100px;
@@ -417,4 +526,86 @@ const cancelEdit = (index: number) => {
     text-align: center;
     z-index: 1000;
 }
+
+.description-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    padding: 10px;
+    overflow: hidden;
+    max-height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+
+    width: 100%;
+    overflow-x: hidden;
+    max-height: 100%;
+    box-sizing: border-box;
+}
+
+
+.custom-flow {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: flex-start;
+    align-items: flex-start;
+    padding: 10px;
+
+    width: 100%;
+    box-sizing: border-box;
+    overflow-x: hidden;
+}
+
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  grid-auto-rows: min-content;
+  grid-auto-flow: dense;
+  gap: 1rem;
+}
+
+.float-up { transform: translateY(-10px); }
+.float-left { transform: translateX(-10px); }
+.float-right { transform: translateX(10px); }
+.wiggle { transform: rotate(1deg); }
+.tilt { transform: rotate(-1deg); }
+
+.from-left {
+    align-self: flex-start;
+}
+
+.from-right {
+    align-self: flex-end;
+}
+
+.section-bloc.from-left {
+    margin-right: auto;
+    margin-left: 20%;
+}
+
+.section-bloc.from-right {
+    margin-left: auto;
+    margin-right: 20%;
+}
+
+.explain {
+    font-size: 16px;
+    color: #444; /* gris doux pour le texte */
+    background-color: #f9f9f9; /* fond léger pour contraster */
+    padding: 7px;
+    border-left: 4px solid #0d6efd; /* petite bande à gauche type "info" */
+    border-right: 4px solid #0d6efd;
+    border-radius: 6px;
+    margin-bottom: 20px;
+    margin-top: 20px;
+    line-height: 1.6;
+    font-family: "Segoe UI", sans-serif;
+}
+
+
 </style>