feat: trying to connect to the bach
This commit is contained in:
parent
6d84b3ff93
commit
9f4596d0ba
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user