fix: to composition api

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

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

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

@@ -9,25 +9,22 @@
     </div>
 </template>
   
-<script>
+<script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, defineProps, onMounted } from "vue";
 import axios from "axios";
 
-export default {
+const props = defineProps<{  
-  props: {
+    title: string;
-    title: String,
+    description: string;
-    description: String,
+}>();
-  },
 
-  setup(props) {
 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!
+    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);
   }
@@ -42,13 +39,6 @@ export default {
   expanded.value = !expanded.value;
 };
 
-    return {
-      expanded,
-      currentDescription,
-      toggleExpand
-    };
-  }
-};
 </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,15 +10,10 @@
   </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" },
@@ -30,10 +25,6 @@ export default {
   { 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>