feat: switching to composition API standard

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

@@ -1,25 +1,40 @@
 <template>
-    <div :class="['cell', { expanded }]" @click="toggleExpand">
+    <div :class="['cell', { expanded }]"
+    @click="toggleExpand"
+    :style="{ justifyContent: expanded ? 'flex-start' : 'center' }"> <!-- Looking for finding a way 
+                                                          to make this style in the toggleExpand event -->
+
       <h3>{{ title }}</h3>
-      <p>{{ description }}</p>
+      <p>{{ currentDescription }}</p>
     </div>
   </template>
   
   <script>
+  import { ref } from "vue";
+  
   export default {
     props: {
       title: String,
       description: String
     },
-    data() {
-      return {
-        expanded: false
+
+    setup(props) {
+      const expanded = ref(false);
+      const currentDescription = ref(props.description);
+  
+      const toggleExpand = () => {
+        currentDescription.value = expanded.value
+          ? "3 problèmes essentiels à résoudre pour le client"
+          : "FAKE DATA";
+        
+          expanded.value = !expanded.value;
+      };
+  
+      return {
+        expanded,
+        currentDescription,
+        toggleExpand
       };
-    },
-    methods: {
-      toggleExpand() {
-        this.expanded = !this.expanded;
-      }
     }
   };
   </script>
@@ -29,14 +44,21 @@
   
 	.cell {
 		display: flex;
-		flex-direction: column; /* Pour empiler le titre et la description */
-		align-items: center; /* Centre horizontalement */
-		justify-content: center; /* Centre verticalement */
-		text-align: center; /* Centre le texte */
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
 		transition: all 0.3s ease;
 		cursor: pointer;
 	}
 
+  .cell_Expanded {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		transition: all 0.3s ease;
+		cursor: pointer;
+	}
 
 	.expanded {
     position: fixed;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="LeanCanvas">
+  <div class="canvas">
     <CanvasItem
       v-for="(item, index) in items"
       :key="index"
@@ -11,60 +11,34 @@
 </template>
 
 <script>
-import CanvasItem from "./CanvasItem.vue";
+import { ref } from "vue";
+import CanvasItem from "@/components/canvas/CanvasItem.vue";
 
 export default {
   components: {
     CanvasItem
   },
-  data() {
-    return {
-      items: [
-        { title: "1. Problème",
-          description: "3 problèmes essentiels à résoudre pour le client",
-          class: "Probleme"
-        },
-        { title: "2. Segments",
-          description: "Les segments de clientèle visés",
-          class: "Segments"
-        },
-        { title: "3. Valeur",
-          description: "La proposition de valeur",
-          class: "Valeur"
-        },
-        { title: "4. Solution",
-          description: "Les solutions proposées",
-          class: "Solution"
-        },
-        { title: "5. Avantage",
-          description: "Les avantages concurrentiels",
-          class: "Avantage"
-        },
-        { title: "6. Canaux",
-          description: "Les canaux de distribution",
-          class: "Canaux"
-        },
-        { title: "7. Indicateurs",
-          description: "Les indicateurs clés de performance",
-          class: "Indicateurs"
-        },
-        { title: "8. Coûts",
-          description: "Les coûts associés",
-          class: "Couts"
-        },
-        { title: "9. Revenus",
-          description: "Les sources de revenus",
-          class: "Revenus"
-        }
-      ]
-    };
+  setup() {
+    const items = ref([
+      { title: "1. Problème", description: "3 problèmes essentiels à résoudre pour le client", class: "Probleme" },
+      { title: "2. Segments", description: "Les segments de clientèle visés", class: "Segments" },
+      { title: "3. Valeur", description: "La proposition de valeur", class: "Valeur" },
+      { title: "4. Solution", description: "Les solutions proposées", class: "Solution" },
+      { title: "5. Avantage", description: "Les avantages concurrentiels", class: "Avantage" },
+      { title: "6. Canaux", description: "Les canaux de distribution", class: "Canaux" },
+      { title: "7. Indicateurs", description: "Les indicateurs clés de performance", class: "Indicateurs" },
+      { title: "8. Coûts", description: "Les coûts associés", class: "Couts" },
+      { title: "9. Revenus", description: "Les sources de revenus", class: "Revenus" }
+    ]);
+
+    return { items };
   }
 };
 </script>
 
 <style scoped>
 
-.LeanCanvas {
+.canvas {
   display: grid;
   grid-template-columns: repeat(10, 1fr);
   grid-template-rows: repeat(6, 1fr);

front/MyINPulse-front/src/views/CanvasView.vue

@@ -1,4 +1,3 @@
-<!-- src/views/CanvasView.vue -->
 <template>
     <div>
       <header>
@@ -9,10 +8,10 @@
       <h1>Page Canvas</h1>
       <LeanCanvas />
     </div>
-  </template>
+</template>
   
-  <script setup lang="ts">
-  import HeaderCanvas from '../components/canvas/HeaderCanvas.vue';
-  import LeanCanvas from '../components/canvas/LeanCanvas.vue';
-  </script>
+<script setup lang="ts">
+import HeaderCanvas from '../components/canvas/HeaderCanvas.vue';
+import LeanCanvas from '../components/canvas/LeanCanvas.vue';
+</script>