fix: to composition api

front/MyINPulse-front/src/components/Project-comp.vue

@@ -31,11 +31,7 @@ const router = useRouter();
 const goToLink = () => {
   if (props.projectLink) {
     router.push(props.projectLink);
-    /*
-        window.location.href = props.projectLink;
-        */
-
-    }
+  }
  
 };
 </script>

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

@@ -9,46 +9,36 @@
     </div>
 </template>
   
-<script>
-import { ref, onMounted } from "vue";
+<script setup lang="ts">
+import { ref, defineProps, onMounted } from "vue";
 import axios from "axios";
 
-export default {
-  props: {
-    title: String,
-    description: String,
-  },
+const props = defineProps<{  
+    title: string;
+    description: string;
+}>();
 
-  setup(props) {
-    const expanded = ref(false);
-    const currentDescription = ref(props.description);
+const expanded = ref(false);
+const currentDescription = ref(props.description);
 
-    const fetchData = async () => {
-      try {
-        const response = await axios.get("http://localhost:5000/data"); // to edit later!
-        currentDescription.value = response.data[0].canva_data;
-
-      } catch (error) {
-        console.error("Erreur lors de la récupération des données :", error);
-      }
-    };
-
-    const toggleExpand = async () => {
-      if (!expanded.value) {
-        await fetchData();
-      } else {
-        currentDescription.value = props.description;
-      }
-      expanded.value = !expanded.value;
-    };
-
-    return {
-      expanded,
-      currentDescription,
-      toggleExpand
-    };
+const fetchData = async () => {
+  try {
+    const response = await axios.get("http://localhost:5000/data"); // Update the URL if needed
+    currentDescription.value = response.data[0].canva_data;
+  } catch (error) {
+    console.error("Erreur lors de la récupération des données :", error);
   }
 };
+
+const toggleExpand = async () => {
+  if (!expanded.value) {
+    await fetchData();
+  } else {
+    currentDescription.value = props.description;
+  }
+  expanded.value = !expanded.value;
+};
+
 </script>
 
   

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

@@ -10,7 +10,9 @@
             {{ email }}
           </button>
         </div>
-        <button class="return-button"><a href="/">Return to list project</a></button>
+        <button class="return-button">
+            <RouterLink to="/">Return to list project</RouterLink>
+        </button>
       </div>
     </div>
   </header>

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

@@ -10,30 +10,21 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { ref } from "vue";
 import CanvasItem from "@/components/canvas/CanvasItem.vue";
 
-export default {
-  components: {
-    CanvasItem
-  },
-  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 };
-  }
-};
+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" }
+]);
 </script>
 
 <style scoped>