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,46 +9,36 @@
     </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 expanded = ref(false);
+const currentDescription = ref(props.description);
-    const currentDescription = ref(props.description);
 
-    const fetchData = async () => {
+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);
   }
-    };
+};
 
-    const toggleExpand = async () => {
+const toggleExpand = async () => {
   if (!expanded.value) {
     await fetchData();
   } else {
     currentDescription.value = props.description;
   }
   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,16 +10,11 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { ref } from "vue";
 import CanvasItem from "@/components/canvas/CanvasItem.vue";
 
-export default {
+const items = ref([
-  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" },
@@ -29,11 +24,7 @@ export default {
   { 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>