333 lines
8.3 KiB
Vue
Executable File
333 lines
8.3 KiB
Vue
Executable File
<template>
|
|
<div :class="['cell', { expanded }]" @click="handleClick">
|
|
<h3>{{ title_text }}</h3>
|
|
|
|
<div class="section-bloc" v-for="(desc, index) in currentDescriptions" :key="index">
|
|
<!-- Mode affichage -->
|
|
<template v-if="!isEditing[index]">
|
|
<div class="description">
|
|
<p>{{ desc }}</p>
|
|
</div>
|
|
<div class="button-container">
|
|
<button v-if="expanded" @click.stop="startEditing(index)" class="edit-button">Éditer</button>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Mode édition -->
|
|
<template v-else>
|
|
<textarea v-model="editedDescriptions[index]" class="edit-input"></textarea>
|
|
<div class="button-container">
|
|
<button @click.stop="saveEdit(index)" class="save-button">Enregistrer</button>
|
|
<button @click.stop="cancelEdit(index)" class="cancel-button">Annuler</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, defineProps } from "vue";
|
|
import axios from "axios";
|
|
|
|
const IS_MOCK_MODE = true;
|
|
|
|
const props = defineProps<{
|
|
projectId: number;
|
|
title: number;
|
|
title_text: string;
|
|
description: string;
|
|
}>();
|
|
|
|
const expanded = ref(false);
|
|
const currentDescriptions = ref<string[]>([]);
|
|
const editedDescriptions = ref<string[]>([]);
|
|
const isEditing = ref<boolean[]>([]);
|
|
|
|
|
|
/*
|
|
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);
|
|
}
|
|
};
|
|
*/
|
|
|
|
// Fonction de simulation de l'API
|
|
const mockFetch = async (projectId: number, title: number, date: string) => {
|
|
console.log(`Mock fetch pour projectId: ${projectId}, title: ${title}, date: ${date}`);
|
|
|
|
return new Promise<{ txt: string }[]>((resolve) => {
|
|
setTimeout(() => {
|
|
resolve([
|
|
{ txt: "Ceci est une description 1 pour tester the damn front, Why are u still reading dumbass this is just some nonsense sentence XD" },
|
|
{ txt: "Ceci est une description 1 pour tester the damn front, Bruh are u still here?" },
|
|
{ txt: "Ceci est une description 1 pour tester the damn front, .-. BRUH" }
|
|
]);
|
|
}, 500); // Simule un délai réseau de 500ms
|
|
});
|
|
};
|
|
|
|
// Fonction fetchData avec possibilité d'utiliser le mock
|
|
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);
|
|
}
|
|
};
|
|
|
|
// 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); // true pour activer le mock
|
|
} 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;
|
|
};
|
|
|
|
/*
|
|
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);
|
|
}
|
|
};
|
|
*/
|
|
|
|
// Fonction de mock pour l'enregistrement
|
|
const mockSaveEdit = async (index: number) => {
|
|
try {
|
|
const id = index + 1; // À adapter selon l'ID réel des données
|
|
console.log(`Mock save pour l'ID ${id} avec la description : ${editedDescriptions.value[index]}`);
|
|
|
|
// Simuler un délai d'enregistrement comme une requête réseau
|
|
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);
|
|
}
|
|
};
|
|
|
|
// Utilisation de `mockSaveEdit` au lieu de `saveEdit` dans `handleClick` ou tout autre endroit
|
|
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);
|
|
}
|
|
}
|
|
};
|
|
|
|
const cancelEdit = (index: number) => {
|
|
editedDescriptions.value[index] = currentDescriptions.value[index];
|
|
isEditing.value[index] = false;
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import "@/components/canvas/style-project.css";
|
|
|
|
.cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.expanded-content {
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
.cell:not(.expanded):hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 8px 9px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.cell h3 {
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
/*margin-bottom: 10px;*/
|
|
}
|
|
|
|
.cell p {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.cell {
|
|
width: 100%;
|
|
height: 100px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 10px;
|
|
}
|
|
|
|
.expanded {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: white;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.description {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 16px;
|
|
margin-top: 10px;
|
|
/*box-sizing: border-box;*/
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
margin-left: 2%;
|
|
}
|
|
|
|
.description + .p {
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.edit-input {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 16px;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
margin-top: 10px;
|
|
box-sizing: border-box;
|
|
margin-left: 2%;
|
|
}
|
|
|
|
.button-container {
|
|
display: block;
|
|
margin-top: 20px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.section-bloc ,.editing-section-bloc {
|
|
width: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
margin-right: 10%;
|
|
margin: 10px;
|
|
}
|
|
|
|
.edit-button {
|
|
width: 100px;
|
|
height: 40px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background 0.3s ease;
|
|
font-size: 12px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.save-button, .cancel-button {
|
|
width: 100px;
|
|
height: 40px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background 0.3s ease;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.edit-button {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
|
|
.save-button {
|
|
background-color: #28a745;
|
|
color: white;
|
|
}
|
|
|
|
.cancel-button {
|
|
background-color: #dc3545;
|
|
color: white;
|
|
}
|
|
|
|
.edit-button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
.save-button:hover {
|
|
background-color: #218838;
|
|
}
|
|
|
|
.cancel-button:hover {
|
|
background-color: #c82333;
|
|
}
|
|
|
|
</style> |