144 lines
3.5 KiB
Vue
144 lines
3.5 KiB
Vue
<template>
|
||
<header class="header">
|
||
<img
|
||
src="@/components/icons/logo inpulse.png"
|
||
alt="INPulse Logo"
|
||
class="logo"
|
||
/>
|
||
</header>
|
||
|
||
<div class="choix-projet">
|
||
<h1>Bienvenue sur MyINPulse</h1>
|
||
<p>
|
||
Souhaitez-vous créer un nouveau projet ou joindre un projet existant
|
||
?
|
||
</p>
|
||
|
||
<div class="button-group">
|
||
<button @click="choisir('creer')">Créer un projet</button>
|
||
<button @click="choisir('joindre')">Joindre un projet</button>
|
||
</div>
|
||
|
||
<div v-if="choix === 'creer'" class="form-creer">
|
||
<h2>Créer un projet</h2>
|
||
<label for="nomProjet">Nom du projet :</label>
|
||
<input
|
||
id="nomProjet"
|
||
v-model="nomProjet"
|
||
type="text"
|
||
placeholder="Nom du projet"
|
||
/>
|
||
<button @click="validerCreation">Valider</button>
|
||
</div>
|
||
|
||
<div v-if="choix === 'joindre'" class="message-indispo">
|
||
<h2>Joindre un projet</h2>
|
||
<p>Cette fonctionnalité n'est pas encore disponible.</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from "vue";
|
||
import Project from "@/ApiClasses/Project";
|
||
import { requestProjectCreation } from "@/services/Apis/Entrepreneurs.ts";
|
||
|
||
const choix = ref<string | null>(null);
|
||
const nomProjet = ref("");
|
||
|
||
const choisir = (option: "creer" | "joindre") => {
|
||
choix.value = option;
|
||
};
|
||
|
||
const validerCreation = () => {
|
||
if (!nomProjet.value.trim()) {
|
||
alert("Veuillez entrer un nom de projet.");
|
||
return;
|
||
}
|
||
|
||
// Obtenir la date actuelle au format YYYY-MM-DD
|
||
const today = new Date();
|
||
const yyyy = today.getFullYear();
|
||
const mm = String(today.getMonth() + 1).padStart(2, "0");
|
||
const dd = String(today.getDate()).padStart(2, "0");
|
||
const formattedDate = `${yyyy}-${mm}-${dd}`;
|
||
|
||
// Créer une instance de Project
|
||
const nouveauProjet = new Project({
|
||
projectName: nomProjet.value.trim(),
|
||
creationDate: formattedDate,
|
||
status: "PENDING",
|
||
});
|
||
|
||
// Appeler l’API
|
||
requestProjectCreation(
|
||
nouveauProjet,
|
||
(response) => {
|
||
console.log("Projet créé :", response.data);
|
||
alert(`Projet "${nomProjet.value}" créé avec succès !`);
|
||
},
|
||
(error) => {
|
||
console.error("Erreur lors de la création du projet :", error);
|
||
alert("Une erreur est survenue lors de la création du projet.");
|
||
}
|
||
);
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import "@/components/canvas/style-project.css";
|
||
|
||
.choix-projet {
|
||
max-width: 500px;
|
||
margin: auto;
|
||
padding: 2rem;
|
||
background-color: #fefefe;
|
||
border-radius: 10px;
|
||
font-family: "Inter", sans-serif;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
text-align: center;
|
||
}
|
||
|
||
.button-group {
|
||
margin: 20px 0;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
button {
|
||
padding: 10px 20px;
|
||
font-size: 1em;
|
||
background-color: #4caf50;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
button:hover {
|
||
background-color: #43a047;
|
||
}
|
||
|
||
input {
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
width: 80%;
|
||
font-size: 1em;
|
||
border-radius: 5px;
|
||
border: 1px solid #ccc;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 15px 30px;
|
||
background-color: #f9f9f9;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.logo {
|
||
height: 50px;
|
||
}
|
||
</style>
|