feat: adding delete button with the corresponding endpoint
This commit is contained in:
parent
592331236e
commit
4356a01e4a
77
front/MyINPulse-front/src/components/AllEntrep.vue
Normal file
77
front/MyINPulse-front/src/components/AllEntrep.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="entrepreneur-list">
|
||||
<button @click="fetchEntrepreneurs">Afficher les entrepreneurs</button>
|
||||
|
||||
<ul v-if="entrepreneurs.length">
|
||||
<li
|
||||
v-for="entrepreneur in entrepreneurs"
|
||||
:key="entrepreneur.idUser"
|
||||
>
|
||||
{{ entrepreneur.userName }} {{ entrepreneur.userSurname }} -
|
||||
{{ entrepreneur.primaryMail }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p v-else-if="loading">Chargement...</p>
|
||||
<p v-else-if="errorMessage">{{ errorMessage }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import type { AxiosResponse, AxiosError } from "axios";
|
||||
import { getAllEntrepreneurs } from "@/services/Apis/Unauth"; // ajuste ce chemin selon ton projet
|
||||
|
||||
// Types
|
||||
interface Entrepreneur {
|
||||
idUser: number;
|
||||
userName: string;
|
||||
userSurname: string;
|
||||
primaryMail: string;
|
||||
}
|
||||
|
||||
// Refs
|
||||
const entrepreneurs = ref<Entrepreneur[]>([]);
|
||||
const loading = ref(false);
|
||||
const errorMessage = ref("");
|
||||
|
||||
// Méthode
|
||||
function fetchEntrepreneurs() {
|
||||
loading.value = true;
|
||||
errorMessage.value = "";
|
||||
getAllEntrepreneurs(
|
||||
(response: AxiosResponse) => {
|
||||
if (Array.isArray(response.data)) {
|
||||
entrepreneurs.value = response.data;
|
||||
} else {
|
||||
console.error("Format inattendu :", response.data);
|
||||
errorMessage.value = "Réponse inattendue du serveur.";
|
||||
}
|
||||
loading.value = false;
|
||||
},
|
||||
(error: AxiosError) => {
|
||||
errorMessage.value = "Erreur lors du chargement des entrepreneurs.";
|
||||
console.error(error);
|
||||
loading.value = false;
|
||||
}
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
</style>
|
@ -30,6 +30,18 @@
|
||||
<template v-else>
|
||||
<!-- Mode affichage -->
|
||||
<template v-if="!isEditing[index]">
|
||||
<template v-if="expanded">
|
||||
<button
|
||||
class="delete-button"
|
||||
title="Supprimer"
|
||||
@click.stop="
|
||||
deleteSectionCell(desc.idSectionCell, index)
|
||||
"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<div class="description">
|
||||
<p class="m-0">{{ desc.contentSectionCell }}</p>
|
||||
</div>
|
||||
@ -87,7 +99,7 @@ import { ref, defineProps, onMounted } from "vue";
|
||||
import { getSectionCellsByDate } from "@/services/Apis/Shared.ts";
|
||||
import { addSectionCell } from "@/services/Apis/Entrepreneurs.ts";
|
||||
import SectionCell from "@/ApiClasses/SectionCell";
|
||||
|
||||
import { removeSectionCell } from "@/services/Apis/Entrepreneurs.ts";
|
||||
import type { AxiosResponse, AxiosError } from "axios";
|
||||
|
||||
const props = defineProps<{
|
||||
@ -137,6 +149,37 @@ const saveEdit = (index: number) => {
|
||||
}
|
||||
};
|
||||
|
||||
const deleteSectionCell = (id: number | undefined, index: number): void => {
|
||||
if (id === -1) {
|
||||
window.confirm("Êtes-vous sûr de vouloir supprimer cet élément ?");
|
||||
console.error("Delete ignored");
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmed = window.confirm(
|
||||
"Êtes-vous sûr de vouloir supprimer cet élément ?"
|
||||
);
|
||||
|
||||
if (!confirmed) return;
|
||||
|
||||
if (id === undefined) {
|
||||
console.error("ID de la cellule non défini");
|
||||
return;
|
||||
}
|
||||
|
||||
removeSectionCell(
|
||||
id,
|
||||
() => {
|
||||
currentDescriptions.value.splice(index, 1);
|
||||
editedDescriptions.value.splice(index, 1);
|
||||
isEditing.value.splice(index, 1);
|
||||
},
|
||||
(error: AxiosError) => {
|
||||
console.error("Erreur lors de la suppression :", error);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
if (expanded.value) {
|
||||
const editingInProgress = isEditing.value.some((edit) => edit);
|
||||
@ -625,4 +668,20 @@ onMounted(() => {
|
||||
line-height: 1.6;
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #a00;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.section-bloc {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
@ -169,7 +169,7 @@ onBeforeUnmount(() => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 30px;
|
||||
padding: 10px 20px;
|
||||
background-color: #f9f9f9;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
@ -52,7 +52,30 @@ function finalizeAccount(
|
||||
// });
|
||||
// }
|
||||
|
||||
function getAllEntrepreneurs(
|
||||
onSuccessHandler?: (response: AxiosResponse) => void,
|
||||
onErrorHandler?: (error: AxiosError) => void
|
||||
): void {
|
||||
axiosInstance
|
||||
.get("/unauth/getAllEntrepreneurs")
|
||||
.then((response) => {
|
||||
if (onSuccessHandler) {
|
||||
onSuccessHandler(response);
|
||||
} else {
|
||||
defaultApiSuccessHandler(response);
|
||||
}
|
||||
})
|
||||
.catch((error: AxiosError) => {
|
||||
if (onErrorHandler) {
|
||||
onErrorHandler(error);
|
||||
} else {
|
||||
defaultApiErrorHandler(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export {
|
||||
finalizeAccount,
|
||||
getAllEntrepreneurs,
|
||||
// requestJoinProject, // Not yet implemented [cite: 4]
|
||||
};
|
||||
|
@ -13,6 +13,8 @@
|
||||
:project-id="0"
|
||||
/>
|
||||
|
||||
<!-- <AllEntrep /> -->
|
||||
|
||||
<div id="main">
|
||||
<h3>Projet en attente</h3>
|
||||
|
||||
@ -45,7 +47,7 @@ import { getProjectEntrepreneurs } from "@/services/Apis/Shared";
|
||||
import { type AxiosError, type AxiosResponse } from "axios";
|
||||
import Project from "@/ApiClasses/Project";
|
||||
import UserEntrepreneur from "@/ApiClasses/UserEntrepreneur";
|
||||
|
||||
//import AllEntrep from "../components/AllEntrep.vue";
|
||||
const projects = ref<
|
||||
{
|
||||
name: string;
|
||||
|
@ -112,7 +112,7 @@ const fetchAdminData = (projectId: number, useMock = IS_MOCK_MODE) => {
|
||||
"Erreur lors de la récupération des données de l'administrateur :",
|
||||
error
|
||||
);
|
||||
|
||||
|
||||
admin.value = new UserAdmin({
|
||||
idUser: 0,
|
||||
userSurname: "Erreur",
|
||||
|
Loading…
x
Reference in New Issue
Block a user