Mohamed Maoulainine Maoulainine
parent
14a2a59786
commit
b9f3bbbe15
@ -1,215 +0,0 @@
|
||||
<template>
|
||||
<div :class="['cell', { expanded }]" @click="handleClick">
|
||||
<h3>{{ title_text }}</h3>
|
||||
|
||||
<!-- Mode affichage -->
|
||||
<template v-if="!isEditing">
|
||||
<p>{{ currentDescription }}</p>
|
||||
<div class="button-container">
|
||||
<button v-if="expanded" @click.stop="startEditing" class="edit-button">Éditer</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Mode édition -->
|
||||
<template v-else>
|
||||
<textarea v-model="editedDescription" class="edit-input"></textarea>
|
||||
<div class="button-container">
|
||||
<button @click.stop="saveEdit" class="save-button">Enregistrer</button>
|
||||
<button @click.stop="cancelEdit" class="cancel-button">Annuler</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps } from "vue";
|
||||
import axios from "axios";
|
||||
|
||||
const props = defineProps<{
|
||||
projectId: number;
|
||||
title: number;
|
||||
title_text: string;
|
||||
description: string;
|
||||
}>();
|
||||
|
||||
const expanded = ref(false);
|
||||
const isEditing = ref(false);
|
||||
const currentDescription = ref(props.description);
|
||||
const editedDescription = ref(props.description);
|
||||
|
||||
|
||||
/*
|
||||
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);
|
||||
}
|
||||
};
|
||||
*/
|
||||
|
||||
const fetchData = async (projectId: number, title: number, date: string) => {
|
||||
try {
|
||||
const response = await axios.get(
|
||||
`http://localhost:5000/shared/projects/lcsection/${projectId}/${title}/${date}`
|
||||
);
|
||||
|
||||
if (response.data.length > 0) {
|
||||
currentDescription.value = response.data[0].txt;
|
||||
editedDescription.value = response.data[0].txt;
|
||||
} else {
|
||||
console.warn("Aucune donnée reçue.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la récupération des données :", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClick = async () => {
|
||||
if (!expanded.value) {
|
||||
await fetchData(props.projectId, props.title, "NaN");
|
||||
} else if (!isEditing.value) {
|
||||
currentDescription.value = props.description;
|
||||
editedDescription.value = props.description;
|
||||
}
|
||||
|
||||
if (!isEditing.value) {
|
||||
expanded.value = !expanded.value;
|
||||
}
|
||||
};
|
||||
|
||||
const startEditing = () => {
|
||||
isEditing.value = true;
|
||||
};
|
||||
|
||||
const saveEdit = async () => {
|
||||
try {
|
||||
const id = 1;
|
||||
|
||||
await axios.put(`http://localhost:5000/data/${id}`, {
|
||||
canva_data: editedDescription.value
|
||||
});
|
||||
|
||||
// Mettre à jour l'affichage local après la mise à jour réussie
|
||||
currentDescription.value = editedDescription.value;
|
||||
isEditing.value = false;
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la mise à jour des données :", error);
|
||||
}
|
||||
};
|
||||
|
||||
const cancelEdit = () => {
|
||||
editedDescription.value = currentDescription.value;
|
||||
isEditing.value = 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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.edit-input {
|
||||
width: 80%;
|
||||
height: 100px;
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.edit-button, .save-button, .cancel-button {
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.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>
|
||||
Loading…
x
Reference in New Issue
Block a user