piair/MyINPulse
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

front_foundation #5

Open
mohamed_maoulainine wants to merge 73 commits from front_foundation into main
pull from: front_foundation
merge into: piair:main
Conversation 3 Commits 73 Files Changed 27 +155 -72
5 changed files with 155 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit aa5988ce75 - Show all commits

72
front/MyINPulse-front/src/App.vue
View File

@ -1,76 +1,18 @@
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import Header from './components/Header.vue';
import ProjectComp from './components/Project-comp.vue';
import CanvasView from './components/canvas/LeanCanvas.vue';
import ErrorWrapper from "@/views/errorWrapper.vue";
</script>
<template>
<Header />
<error-wrapper></error-wrapper>
<div id="main">
<ProjectComp
v-for="(project, index) in projects"
:key="index"
:projectName="project.name"
:listName="project.members"
:projectLink="project.link"
/>
</div>
<div id="canvas">
<button @click="$router.push('/canvas')">Voir Canvas</button>
</div>
<Header />
<!--<nav>
<RouterLink to="/">Home</RouterLink> |
<RouterLink to="/canvas">Canvas</RouterLink>
</nav>-->
<RouterView />
</template>
<style scoped>
#canvas { /* My shit */
margin-top: 20px;
}
button {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
</style>
<script lang="ts">
//import Header from "@/components/Header.vue";
//import ProjectComp from "@/components/Project-comp.vue";
export default {
name: 'App',
components: {
Header,
ProjectComp,
CanvasView, // My shit
},
data() {
return {
projects: [
{
name: 'Projet Alpha',
link: '/project-alpha.html',//to test
members: ['Alice', 'Bob', 'Charlie'],
},
{
name: 'Projet Beta',
link: './project-beta.html', //to test
members: ['David', 'Eve', 'Frank'],
},
],
};
},
};
</script>

51
front/MyINPulse-front/src/components/Agenda.vue
View File

@ -3,7 +3,7 @@
<h3>Rendez-vous</h3>
<table>
<tbody>
<tr v-for=" (p, index) in projectRDV" :key="p" >
<tr v-for=" (p, index) in projectRDV" :key="index" >
<td>{{ p.projectName }} </td> <td>{{ p.date }}</td> <td>{{ p.lieu }}</td>
</tr>
</tbody>
@ -11,7 +11,7 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { defineProps } from "vue";
interface rendezVous{
@ -23,10 +23,53 @@
const props = defineProps<{
projectRDV: rendezVous[]
}>();
</script>
<style>
<style scoped>
#agenda {
padding: 20px;
}
/* Table Styling */
table {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
text-align: left;
margin-top: 20px;
border: 1px solid #ccc;
}
/* Header Row (if exists) */
th {
background-color: #f4f4f4;
padding: 12px;
font-weight: bold;
border: 1px solid #ccc;
}
/* Table Body Rows */
tbody tr {
border-bottom: 1px solid #ddd;
transition: background-color 0.2s ease; /* Smooth hover effect */
}
tbody tr:hover {
background-color: #f9f9f9; /* Highlight row on hover */
}
/* Cells Styling */
td {
padding: 10px;
border: 1px solid #eee;
font-size: 14px;
vertical-align: middle; /* Align text to middle */
}
/* First Column Styling */
td:first-child {
text-align: center;
width: 50px; /* Adjust width as needed */
}
</style>

12
front/MyINPulse-front/src/components/Project-comp.vue
View File

@ -110,6 +110,16 @@ const goToLink = () => {
}
button {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
</style>

8
front/MyINPulse-front/src/router/router.ts
View File

@ -12,7 +12,13 @@ const router = createRouter({
component: () => import('../views/test.vue'),
},
// route pour les canvas (made by adnane), in fact the two vue apps are separated for now
{
path: '/',
name: 'Admin-main',
component: () => import('../views/AdminMain.vue'),
},
// route pour les canvas (made by adnane), in fact the two vue apps are separated for now
piair commented 2025-02-19 09:22:35 +01:00
Review
Copy Link

c'est en effet a changer pour plus tard, mais ça marche très bien pour le moment.

Pour plus tard il faudra probablement utiliser ça ou ça

c'est en effet a changer pour plus tard, mais ça marche très bien pour le moment. Pour plus tard il faudra probablement utiliser [ça](https://vuejs.org/guide/components/provide-inject) ou [ça](https://stackoverflow.com/a/66891577)
{
path: '/canvas',
name: 'canvas',

82
front/MyINPulse-front/src/views/AdminMain.vue Normal file
View File

@ -0,0 +1,82 @@
<script setup lang="ts">
piair commented 2025-02-19 09:31:47 +01:00
Review
Copy Link

Il est plus logique de mettre un unique script setup.

Je vais mettre içi une fois pour toute:

je trouve beaucoup plus logique l'ordre
<script> => <template> => <style>
que l'ordre qui est utilisé partout dans vos fichiers (<template> => <script> => <style>)
En effet, on utilise dans le template les fonctions qui sont définies dans les scripts, donc c'est plus logique de les définir avant.

C'est ce qui est utilisé par défaut dans le linter (vue-recommanded).

Il est plus logique de mettre un unique script setup. Je vais mettre içi une fois pour toute: je trouve beaucoup plus logique l'ordre `<script>` => `<template>` => `<style>` que l'ordre qui est utilisé partout dans vos fichiers (`<template>` => `<script>` => `<style>`) En effet, on utilise dans le template les fonctions qui sont définies dans les scripts, donc c'est plus logique de les définir avant. C'est ce qui est utilisé par défaut dans le linter (vue-recommanded).
import Header from '../components/Header.vue';
import Agenda from "../components/Agenda.vue"
import ProjectComp from '../components/Project-comp.vue';
</script>
<template>
<Header />
<error-wrapper></error-wrapper>
<div id="container">
<div id="main">
<ProjectComp
v-for="(project, index) in projects"
:key="index"
:projectName="project.name"
:listName="project.members"
:projectLink="project.link"
/>
</div>
<Agenda :projectRDV="rendezVous" />
</div>
</template>
<script lang="ts">
export default {
name: "App",
components: {
Header,
ProjectComp,
},
data() {
return {
projects: [
{
name: "Projet Alpha",
link: "/project-alpha.html", // to test
members: ["Alice", "Bob", "Charlie"],
},
{
name: "Projet Beta",
link: "./project-beta.html", // to test
members: ["David", "Eve", "Frank"],
},
],
rendezVous: [
{ projectName: "Projet Alpha", date: "2025-03-10", lieu: "P106" },
{ projectName: "Projet Beta", date: "2025-04-15", lieu: "Td10" },
],
};
},
};
</script>
<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 */
}
button {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
</style>