front_foundation #9
@ -35,14 +35,13 @@
|
||||
|
||||
<button type="submit">Ajouter</button>
|
||||
</form>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { postApi } from "@/services/api.ts";
|
||||
|
||||
const project = ref({
|
||||
idProject: 0,
|
||||
projectName: "",
|
||||
creationDate: "",
|
||||
logo: "to be discussed not yet fixed",
|
||||
@ -54,6 +53,15 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
|
||||
h2{
|
||||
font-size: 1.5rem;
|
||||
color: #333;
|
||||
margin-bottom: 1.2rem;
|
||||
border-bottom: 2px solid #ddd;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.add-project-form {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
|
||||
@ -2,12 +2,22 @@
|
||||
<div id="agenda">
|
||||
<h3>Rendez-vous</h3>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr v-for=" (p, index) in projectRDV" :key="index" >
|
||||
<td>{{ p.projectName }} </td> <td>{{ p.date }}</td> <td>{{ p.lieu }}</td>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Projet</th>
|
||||
<th>Date</th>
|
||||
<th>Lieu</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(p, index) in projectRDV" :key="index">
|
||||
<td>{{ p.projectName }}</td>
|
||||
<td>{{ p.date }}</td>
|
||||
<td>{{ p.lieu }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -23,13 +33,27 @@
|
||||
const props = defineProps<{
|
||||
Theo
commented
où est-ce que les RDV sont récupérés ? où est-ce que les RDV sont récupérés ?
|
||||
projectRDV: rendezVous[]
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
piair
commented
same comment as before, most of the style here is not for this part only, so it should not be here same comment as before, most of the style here is not for this part only, so it should not be here
|
||||
<style scoped>
|
||||
#agenda {
|
||||
padding: 20px;
|
||||
|
||||
h3{
|
||||
font-size: 1.5rem;
|
||||
color: #333;
|
||||
margin-bottom: 1.2rem;
|
||||
border-bottom: 2px solid #ddd;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#agenda {
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
|
||||
/* Table Styling */
|
||||
table {
|
||||
width: 100%;
|
||||
@ -40,13 +64,13 @@
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* Header Row (if exists) */
|
||||
th {
|
||||
background-color: #f4f4f4;
|
||||
padding: 12px;
|
||||
font-weight: bold;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
background-color: #f0f2f5;
|
||||
padding: 12px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
/* Table Body Rows */
|
||||
tbody tr {
|
||||
@ -23,14 +23,24 @@ onMounted(() => {
|
||||
|
||||
if (roles.includes("MyINPulse-admin")) {
|
||||
router.push("/");
|
||||
} else if (roles.includes("entrepreneur")) {
|
||||
router.push("/entrepreneur");
|
||||
} else if (roles.includes("MyINPulse-entrepreneur")) {
|
||||
router.push("/leanCanva");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to decode token", err);
|
||||
}
|
||||
}
|
||||
});
|
||||
/*
|
||||
|
piair
commented
should this commented part really stay should this commented part really stay
|
||||
const loading = ref(false);
|
||||
|
||||
const callApiWithLoading = async (path: string) => {
|
||||
loading.value = true;
|
||||
await callApi(path);
|
||||
loading.value = false;
|
||||
};
|
||||
*/
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -170,4 +180,19 @@ h1 {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
}
|
||||
/*
|
||||
.status {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
display: inline-block;
|
||||
background-color: #e0f7e9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
*/
|
||||
.status.error {
|
||||
background-color: #ffe2e2;
|
||||
color: #c62828;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<h2>{{ projectName }}</h2>
|
||||
<p>Projet mis le: {{ creationDate }}</p>
|
||||
</div>
|
||||
<div class="project-button">
|
||||
<div class="project-buttons">
|
||||
<button id="accept" @click="acceptProject">Accepter</button>
|
||||
<button id="refus" @click="refuseProject">Refuser</button>
|
||||
</div>
|
||||
@ -56,20 +56,26 @@ const refuseProject = () => sendDecision("false");
|
||||
|
||||
<style scoped>
|
||||
.project {
|
||||
background: linear-gradient(to right, #f4f4f4, #ffffff);
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
background: linear-gradient(to right, #f8f9fb, #ffffff);
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
font-family: Arial, sans-serif;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.project:hover {
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* Header Styling */
|
||||
.project-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
@ -78,72 +84,50 @@ const refuseProject = () => sendDecision("false");
|
||||
}
|
||||
|
||||
.project-title h2 {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
font-size: 1.25rem;
|
||||
color: #222;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.project-title p {
|
||||
font-size: 14px;
|
||||
color: #777;
|
||||
margin-top: 4px;
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Button Container */
|
||||
.project-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#accept {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
#refus {
|
||||
background-color: red;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 15px;
|
||||
padding: 0.5rem 1.1rem;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: scale(1.05);
|
||||
#accept {
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
|
||||
#accept:hover {
|
||||
background-color: #3e8e41;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
#refus {
|
||||
background-color: #e74c3c;
|
||||
}
|
||||
|
||||
#refus:hover {
|
||||
background-color: darkred;
|
||||
}
|
||||
|
||||
/* Project Body (unchanged) */
|
||||
.project-body {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.project-body p {
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.project-body ul {
|
||||
list-style-type: disc;
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.project-body ul li {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
background-color: #c0392b;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -151,127 +151,83 @@ onMounted(() => fetchEntrepreneurs(props.projectId, IS_MOCK_MODE));
|
||||
|
||||
<style scoped>
|
||||
.project {
|
||||
|
adnane marked this conversation as resolved
Outdated
piair
commented
I personally hate that, can't we use an error mesage in green ? I personally hate that, can't we use an error mesage in green ?
adnane
commented
ok ok
|
||||
background: linear-gradient(to right, #f4f4f4, #ffffff);
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
background: linear-gradient(to right, #f8f9fb, #ffffff);
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
transition: box-shadow 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Header Styling */
|
||||
.project-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.project:hover {
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.project-header h2 {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Button Container */
|
||||
.project-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
.info-btn {
|
||||
background-color: #4CAF50;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.info-btn:hover {
|
||||
background-color: #45a049;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.project-body {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.project-body p {
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.project-body ul {
|
||||
list-style-type: disc;
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.project-body ul li {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
||||
.header-actions {
|
||||
.project-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.contact-button,
|
||||
.return-button {
|
||||
background-color: #009CDE;
|
||||
color: white;
|
||||
.project-header h2 {
|
||||
font-size: 1.25rem;
|
||||
color: #222;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.project-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.contact-btn {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s ease;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.return-button:hover,
|
||||
.contact-button:hover {
|
||||
background-color: #007bad;
|
||||
}
|
||||
|
||||
|
||||
.contact-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background-color: #000;
|
||||
color: white;
|
||||
box-shadow: 0px 4px 8px rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
z-index: 1000;
|
||||
min-width: 200px;
|
||||
display: none;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.contact-dropdown button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
.contact-btn:hover {
|
||||
background-color: #0056b3;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.project-body {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.project-body ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 1.25rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.project-body ul li {
|
||||
font-size: 0.95rem;
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
padding: 10px 15px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.contact-dropdown button:hover {
|
||||
background-color: #009CDE;
|
||||
}
|
||||
|
||||
.contact-dropdown.dropdown-visible {
|
||||
display: block;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -33,17 +33,17 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { callApi } from "@/services/api";
|
||||
import { ref/*, onMounted*/ } from "vue";
|
||||
//import { callApi } from "@/services/api";
|
||||
|
||||
import Header from "../components/HeaderComponent.vue";
|
||||
import Agenda from "../components/Agenda.vue";
|
||||
import Agenda from "../components/AgendaComponent.vue";
|
||||
import ProjectComp from "../components/ProjectComponent.vue";
|
||||
import PendingProjectComponent from "@/components/PendingProjectComponent.vue";
|
||||
import AddProjectForm from "@/components/AddProjectForm.vue";
|
||||
|
||||
const PORT = "8081";
|
||||
const URI = `http://localhost:${PORT}`;
|
||||
//const PORT = "8081";
|
||||
//const URI = `http://localhost:${PORT}`;
|
||||
|
||||
//const projects = ref<{ name: string; link: string; members: string[] }[]>([]);
|
||||
|
piair
commented
remove this comment remove this comment
|
||||
|
||||
@ -119,10 +119,28 @@ const rendezVous = ref([
|
||||
<style scoped>
|
||||
|
||||
#container {
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr; /* Main body takes 3/4, agenda 1/4 */
|
||||
height: 100vh; /* Full viewport height */
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
gap: 2rem;
|
||||
padding: 2rem;
|
||||
background-color: #f4f6f9;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#main {
|
||||
background-color: #fff;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
color: #333;
|
||||
margin-bottom: 1.2rem;
|
||||
border-bottom: 2px solid #ddd;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
@ -131,10 +149,19 @@ button {
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Add spacing between project sections */
|
||||
#main > * + * {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user
The h2 from this file is the same as the h3 from the next (AgendaComponent). It would be better to have a single css file for this part.