piair/MyINPulse
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

front_foundation #9

Closed
mohamed_maoulainine wants to merge 181 commits from front_foundation into main
pull from: front_foundation
merge into: piair:main
Conversation 6 Commits 181 Files Changed 93 +141 -185
5 changed files with 141 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9f4596d0ba - Show all commits

22
front/MyINPulse-front/index.html
View File

@ -1,13 +1,13 @@
<!DOCTYPE html>
<!doctype html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

9
front/MyINPulse-front/src/ApiClasses/SectionCell.ts
View File

@ -43,6 +43,15 @@ class SectionCell {
set modificationDate(value: string | undefined) {
this._modificationDate = value;
}
toPlainObject() {
return {
idSectionCell: this._idSectionCell,
sectionId: this._sectionId,
contentSectionCell: this._contentSectionCell,
modificationDate: this._modificationDate,
};
}
}
export default SectionCell;

4
front/MyINPulse-front/src/api_tmp.ts
View File

@ -636,12 +636,12 @@ function requestProjectCreation(
}
function addSectionCell(
sectionCellDetails: SectionCell, // Replace 'any' with a proper type for section cell details if available
sectionCellDetails: SectionCell,
onSuccessHandler?: (response: AxiosResponse) => void,
onErrorHandler?: (error: AxiosError) => void
): void {
axiosInstance
.post("/entrepreneur/sectionCells", sectionCellDetails)
.post("/entrepreneur/sectionCells", sectionCellDetails.toPlainObject()) // <-- Ici
.then((response) => {
if (onSuccessHandler) {
onSuccessHandler(response);

281
front/MyINPulse-front/src/components/canvas/CanvasItem.vue
View File

@ -6,37 +6,32 @@
<template v-if="expanded">
<div class="explain">
<p>
{{ description }}
</p>
<p>{{ description }}</p>
</div>
</template>
<div class="description-wrapper custom-flow">
<div
v-for="(desc, index) in currentDescriptions"
:key="index"
:key="desc.idSectionCell || 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>
<p class="m-0">{{ desc.contentSectionCell }}</p>
</div>
</template>
<!-- ENTREP ------------------------------------------------------------------------------------------->
<template v-if="!IS_ADMIN">
<template v-else>
<!-- Mode affichage -->
<template v-if="!isEditing[index]">
<div class="description">
<p class="m-0">{{ desc }}</p>
<p class="m-0">{{ desc.contentSectionCell }}</p>
</div>
<div class="button-container">
<button
@ -53,7 +48,9 @@
<template v-else>
<div class="edit-row">
<textarea
v-model="editedDescriptions[index]"
v-model="
editedDescriptions[index].contentSectionCell
"
class="edit-input"
></textarea>
<div class="button-container">
@ -74,7 +71,7 @@
</template>
</template>
</div>
<!---------------------------------------------------------------------------------------------------->
<template v-if="expanded">
<div class="canvas-exit-hint">
Cliquez n'importe où pour quitter le canvas (terminez
@ -87,10 +84,10 @@
<script setup lang="ts">
import { ref, defineProps, onMounted } from "vue";
import axios from "axios";
import { axiosInstance } from "@/services/api.ts";
const IS_MOCK_MODE = true;
import { getSectionCellsByDate } from "@/api_tmp.ts";
import SectionCell from "@/ApiClasses/SectionCell.ts";
import { addSectionCell } from "@/api_tmp.ts";
import type { AxiosResponse, AxiosError } from "axios";
const props = defineProps<{
projectId: number;
@ -100,86 +97,125 @@ const props = defineProps<{
isAdmin: number;
}>();
const IS_MOCK_MODE = false;
const IS_ADMIN = props.isAdmin;
const expanded = ref(false);
const currentDescriptions = ref<string[]>([]);
currentDescriptions.value[0] = props.description;
const editedDescriptions = ref<string[]>([]);
const currentDescriptions = ref<SectionCell[]>([]);
const editedDescriptions = ref<SectionCell[]>([]);
const isEditing = ref<boolean[]>([]);
function getCurrentFormattedDate(): string {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // +1 car janvier = 0
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}`;
}
onMounted(() => {
fetchData(props.projectId, props.title, "NaN", IS_MOCK_MODE);
fetchData(props.projectId, props.title, getCurrentFormattedDate(), IS_MOCK_MODE);
});
/* FOR LOCAL DATABASE
const fetchData = async () => {
try {
const response = await axios.get("http://localhost:5000/data"); // Met à jour l'URL
if (response.data.length > 0) {
currentDescription.value = response.data[0].canva_data;
editedDescription.value = response.data[0].canva_data;
} else {
console.warn("Aucune donnée reçue.");
}
} catch (error) {
console.error("Erreur lors de la récupération des données :", error);
}
// Fonctions
const startEditing = (index: number) => {
isEditing.value[index] = true;
};
*/
// Fonction fetchData avec possibilité d'utiliser le mock
/* FOR FETCHING WITH AXIOS DIRECTLY
const fetchData = async (projectId: number, title: number, date: string, useMock = false) => {
try {
const responseData = useMock
? await mockFetch(projectId, title, date)
: (await axios.get<{ txt: string }[]>(
`http://localhost:5000/shared/projects/lcsection/${projectId}/${title}/${date}`
)).data;
if (responseData.length > 0) {
currentDescriptions.value = responseData.map((item) => item.txt);
editedDescriptions.value = [...currentDescriptions.value];
isEditing.value = Array(responseData.length).fill(false);
} else {
console.warn("Aucune donnée reçue.");
}
} catch (error) {
console.error("Erreur lors de la récupération des données :", error);
}
const cancelEdit = (index: number) => {
editedDescriptions.value[index].contentSectionCell =
currentDescriptions.value[index].contentSectionCell;
isEditing.value[index] = false;
};
*/
// Fonction fetchData avec possibilité d'utiliser le mock
const fetchData = async (
projectId: number,
title: number,
date: string,
useMock = false
) => {
const saveEdit = (index: number) => {
currentDescriptions.value[index].contentSectionCell =
editedDescriptions.value[index].contentSectionCell;
isEditing.value[index] = false;
if (!IS_MOCK_MODE){
addSectionCell(currentDescriptions.value[index],
(response) => {
console.log("Modification enregistrée avec succès :", response.data);
},
(error) => {
console.error("Erreur lors de l'enregistrement :", error);
}
);
}
};
const handleClick = () => {
if (expanded.value) {
const editingInProgress = isEditing.value.some((edit) => edit);
if (!editingInProgress) {
expanded.value = false;
}
} else {
expanded.value = true;
}
};
// fetchData
const handleFetchSuccess = (sectionCells: SectionCell[]) => {
currentDescriptions.value = sectionCells;
editedDescriptions.value = sectionCells.map(
(cell) => new SectionCell({
idSectionCell: cell.idSectionCell,
sectionId: cell.sectionId,
contentSectionCell: cell.contentSectionCell,
modificationDate: cell.modificationDate, })
);
isEditing.value = Array(sectionCells.length).fill(false);
};
const handleFetchError = (error: unknown) => {
console.error("Erreur lors de la récupération des données :", error);
};
const fetchData = async ( projectId: number, title: number, date: string, useMock = false ) => {
try {
const responseData = useMock
? await mockFetch(projectId, title, date)
: (
await axiosInstance.get<{ txt: string }[]>(
`/shared/projects/lcsection/${projectId}/${title}/${date}`
)
).data;
if (responseData.length > 0) {
currentDescriptions.value = responseData.map((item) => item.txt);
editedDescriptions.value = [...currentDescriptions.value];
isEditing.value = Array(responseData.length).fill(false);
if (useMock) {
const responseData = await mockFetch(projectId, title, date);
handleFetchSuccess(responseData);
} else {
console.warn("Aucune donnée reçue.");
await new Promise<void>((resolve, reject) => {
getSectionCellsByDate( projectId, title, date,
(response: AxiosResponse) => {
const data = response.data;
if (Array.isArray(data) && data.length > 0) {
const sectionCells = data.map((cellData) => new SectionCell({
idSectionCell: cellData.idSectionCell,
sectionId: cellData.sectionId,
contentSectionCell: cellData.contentSectionCell,
modificationDate:
cellData.modificationDate, })
);
handleFetchSuccess(sectionCells);
} else {
console.warn( "Aucune donnée reçue ou format inattendu :", data);
}
resolve();
},
(error: AxiosError) => {
handleFetchError(error);
reject(error);
}
);
});
}
} catch (error) {
console.error("Erreur lors de la récupération des données :", error);
handleFetchError(error);
}
};
// Fonction de simulation de l'API
const mockFetch = async (projectId: number, title: number, date: string) => {
const mockFetch = async ( projectId: number, title: number, date: string ): Promise<SectionCell[]> => {
console.log(
`Mock fetch pour projectId: ${projectId}, title: ${title}, date: ${date}`
);
@ -233,95 +269,16 @@ const mockFetch = async (projectId: number, title: number, date: string) => {
// 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 }));
// On crée des instances de SectionCell
const result = section.map(
(txt, index) => new SectionCell({ idSectionCell: index + 1, sectionId: title,
contentSectionCell: txt, modificationDate: date, })
);
return new Promise<{ txt: string }[]>((resolve) => {
return new Promise<SectionCell[]>((resolve) => {
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];
editedDescriptions.value = [props.description];
}
if (!isEditing.value.includes(true)) {
expanded.value = !expanded.value;
}
};
const startEditing = (index: number) => {
isEditing.value[index] = true;
};
/*
//FOR LOCAL HOST
const saveEdit = async (index: number) => {
try {
const id = index + 1; // À adapter selon l'ID réel des données
await axios.put(`http://localhost:5000/data/${id}`, {
canva_data: editedDescriptions.value[index]
});
// Mettre à jour l'affichage local après la mise à jour réussie
currentDescriptions.value[index] = editedDescriptions.value[index];
isEditing.value[index] = false;
} catch (error) {
console.error("Erreur lors de la mise à jour des données :", error);
}
};
*/
const saveEdit = async (index: number) => {
if (IS_MOCK_MODE) {
await mockSaveEdit(index);
} else {
try {
const id = index + 1;
await axios.put(`http://localhost:5000/data/${id}`, {
canva_data: editedDescriptions.value[index],
});
// Mettre à jour l'affichage local après la mise à jour réussie
currentDescriptions.value[index] = editedDescriptions.value[index];
isEditing.value[index] = false;
} catch (error) {
console.error("Erreur lors de la mise à jour des données :", error);
}
}
};
// Fonction de mock pour l'enregistrement
const mockSaveEdit = async (index: number) => {
try {
const id = index + 1;
console.log(
`Mock save pour l'ID ${id} avec la description : ${editedDescriptions.value[index]}`
);
await new Promise((resolve) => setTimeout(resolve, 500)); // Simulation de délai réseau
// Mettre à jour l'affichage local après la mise à jour réussie
currentDescriptions.value[index] = editedDescriptions.value[index];
isEditing.value[index] = false;
} catch (error) {
console.error(
"Erreur lors de la mise à jour des données mockées :",
error
);
}
};
const cancelEdit = (index: number) => {
editedDescriptions.value[index] = currentDescriptions.value[index];
isEditing.value[index] = false;
};
</script>
<style scoped>

10
front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
View File

@ -154,16 +154,6 @@ const contactSingle = (email: string) => {
});
};
/*
const copyToClipboard = (email: string) => {
navigator.clipboard.writeText(email).then(() => {
alert(`Adresse copiée : ${email}`);
}).catch(err => {
console.error("Erreur lors de la copie :", err);
});
};
*/
// Cacher le menu si on clique en dehors
const handleClickOutside = (event: MouseEvent) => {
if (