114 lines
2.6 KiB
Vue
114 lines
2.6 KiB
Vue
<template>
|
|
<div>
|
|
<header>
|
|
<HeaderCanvas :project-id="1" />
|
|
</header>
|
|
</div>
|
|
<div>
|
|
<h1 class="page-title">PAGE CANVAS</h1>
|
|
|
|
<p class="canvas-help-text">
|
|
Cliquez sur un champ du tableau pour afficher son contenu en détail ci-dessous.
|
|
</p>
|
|
<LeanCanvas />
|
|
|
|
<div class="info-box">
|
|
<p>
|
|
Responsable : <strong>{{ admin.userName }} {{ admin.userSurname }}</strong><br />
|
|
Contact : <a href="mailto:{{ admin.primaryMail }}">{{ admin.primaryMail }}</a> |
|
|
<a href="tel:{{ admin.phoneNumber }}">{{ admin.phoneNumber }}</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
import HeaderCanvas from "../components/canvas/HeaderCanvas.vue";
|
|
import LeanCanvas from '../components/canvas/LeanCanvas.vue';
|
|
import { ref, onMounted } from "vue";
|
|
import { axiosInstance } from "@/services/api.ts";
|
|
|
|
const IS_MOCK_MODE = true;
|
|
|
|
// Variables pour les informations de l'administrateur
|
|
const admin = ref({
|
|
idUser: 0,
|
|
userSurname: "",
|
|
userName: "",
|
|
primaryMail: "",
|
|
secondaryMail: "",
|
|
phoneNumber: ""
|
|
});
|
|
|
|
const mockAdminData = {
|
|
idUser: 1,
|
|
userSurname: "ALAMI",
|
|
userName: "Adnane",
|
|
primaryMail: "mock.admin@example.com",
|
|
secondaryMail: "admin.backup@example.com",
|
|
phoneNumber: "0600000000"
|
|
};
|
|
|
|
// Fonction pour récupérer les données de l'administrateur
|
|
const fetchAdminData = async (projectId: number, useMock = IS_MOCK_MODE) => {
|
|
try {
|
|
if (useMock) {
|
|
console.log("Utilisation des données mockées pour l'administrateur");
|
|
admin.value = mockAdminData;
|
|
return;
|
|
}
|
|
|
|
const response = await axiosInstance.get(`/shared/projects/admin/${projectId}`);
|
|
admin.value = response.data;
|
|
} catch (error) {
|
|
console.error("Erreur lors de la récupération des données de l'administrateur :", error);
|
|
}
|
|
};
|
|
|
|
// Appeler la fonction fetch au montage du composant
|
|
onMounted(() => {
|
|
const projectId = 1;
|
|
fetchAdminData(projectId);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-title {
|
|
text-align: center;
|
|
font-size: 2.5rem;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.canvas-help-text {
|
|
text-align: center;
|
|
font-size: 0.7rem;
|
|
color: #666;
|
|
}
|
|
|
|
.info-box {
|
|
background-color: #f9f9f9;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
font-family: Arial, sans-serif;
|
|
width: 30%;
|
|
max-width: 600px;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
.info-box p {
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
color: #333;
|
|
}
|
|
|
|
.info-box a {
|
|
color: #007bff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.info-box a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
</style> |