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