feat: mode admin added 'first try'
Some checks failed
Format / formatting (push) Successful in 6s
Build / build (push) Successful in 37s
CI / build (push) Failing after 7s
Format / formatting (pull_request) Successful in 5s

This commit is contained in:
ALAMI Adnane 2025-04-02 11:51:39 +02:00
parent 00a733c03b
commit 03897e1139

View File

@ -3,26 +3,41 @@
<h3>{{ title_text }}</h3> <h3>{{ title_text }}</h3>
<div class="section-bloc" v-for="(desc, index) in currentDescriptions" :key="index"> <div class="section-bloc" v-for="(desc, index) in currentDescriptions" :key="index">
<!-- Mode affichage -->
<template v-if="!isEditing[index]"> <!-- ADMIN -------------------------------------------------------------------------------------------->
<template v-if="IS_ADMIN">
<div class="description"> <div class="description">
<p>{{ desc }}</p> <p>{{ desc }}</p>
</div> </div>
<div class="button-container">
<button v-if="expanded" @click.stop="startEditing(index)" class="edit-button">Éditer</button>
</div>
</template> </template>
<!-- ENTREP ------------------------------------------------------------------------------------------->
<template v-if="!IS_ADMIN">
<!-- 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 --> <!-- Mode édition -->
<template v-else> <template v-else>
<textarea v-model="editedDescriptions[index]" class="edit-input"></textarea> <textarea v-model="editedDescriptions[index]" class="edit-input"></textarea>
<div class="button-container"> <div class="button-container">
<button @click.stop="saveEdit(index)" class="save-button">Enregistrer</button> <button @click.stop="saveEdit(index)" class="save-button">Enregistrer</button>
<button @click.stop="cancelEdit(index)" class="cancel-button">Annuler</button> <button @click.stop="cancelEdit(index)" class="cancel-button">Annuler</button>
</div> </div>
</template>
</template> </template>
</div> </div>
<!---------------------------------------------------------------------------------------------------->
</div> </div>
</template> </template>
@ -31,6 +46,7 @@ import { ref, defineProps } from "vue";
import axios from "axios"; import axios from "axios";
const IS_MOCK_MODE = true; const IS_MOCK_MODE = true;
const IS_ADMIN = false;
const props = defineProps<{ const props = defineProps<{
projectId: number; projectId: number;
@ -62,21 +78,6 @@ const fetchData = async () => {
}; };
*/ */
// 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 // Fonction fetchData avec possibilité d'utiliser le mock
const fetchData = async (projectId: number, title: number, date: string, useMock = false) => { const fetchData = async (projectId: number, title: number, date: string, useMock = false) => {
try { try {
@ -98,6 +99,22 @@ const fetchData = async (projectId: number, title: number, date: string, useMock
} }
}; };
// 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
});
};
// Utilisation du mock dans handleClick pour tester sans serveur // Utilisation du mock dans handleClick pour tester sans serveur
const handleClick = async () => { const handleClick = async () => {
if (!expanded.value) { if (!expanded.value) {
@ -135,23 +152,6 @@ const saveEdit = async (index: number) => {
}; };
*/ */
// 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 // Utilisation de `mockSaveEdit` au lieu de `saveEdit` dans `handleClick` ou tout autre endroit
const saveEdit = async (index: number) => { const saveEdit = async (index: number) => {
if (IS_MOCK_MODE) { if (IS_MOCK_MODE) {
@ -172,6 +172,23 @@ const saveEdit = async (index: number) => {
} }
}; };
// 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);
}
};
const cancelEdit = (index: number) => { const cancelEdit = (index: number) => {
editedDescriptions.value[index] = currentDescriptions.value[index]; editedDescriptions.value[index] = currentDescriptions.value[index];
isEditing.value[index] = false; isEditing.value[index] = false;