Suivi de mission (WIP) (42e9224d) · Commits · open-source / OSE

front/Application/UI/UCalendar.vue

+146 −35

Original line number	Diff line number	Diff line
		<template>
		<select>
		<div class="calendar">
		<div class="recherche">
		<div class="recherche btn-group">
		<button class="btn btn-light" id="prevMois" @click="prevMois" title="Mois précédant">
		<u-icon name="chevron-left"/>
		</button>

		<select class="form-select btn btn-light" id="otherMois" v-model="mois">
		<option v-for="m in listeMois()" :value="m.id">{{ m.libelle }}</option>
		</select>
		<select>

		<select class="form-select btn btn-light" id="otherAnnee" v-model="annee">
		<option v-for="a in listeAnnees()" :value="a">{{ a }}</option>
		</select>
		<table class="table table-bordered">
		<thead>
		<tr>
		<th v-for="j in listeJours()" class="cal-th">{{ j.libelle }}</th>
		</tr>
		</thead>
		<tbody>
		<tr v-for="l in lignes()">
		<td v-for="j in listeJours()" class="cal-td" :data-numero="l*7+j.id"></td>

		<button class="btn btn-light" id="nextMois" @click="nextMois" title="Mois suivant">
		<u-icon name="chevron-right"/>
		</button>
		</div>
		</div>

		<table class="table table-bordered table-hover table-sm">
		<tr v-for="jour in listeJours" :data-jour="jour">
		<th class="nom-jour">
		{{ nomJour(jour) }}
		</th>
		<th class="numero-jour">
		<div class="num-jour badge bg-secondary rounded-circle">{{ jour < 10 ? '0' + jour.toString() : jour }}</div>
		</th>
		<td>
		<div v-for="event in eventsByJour(jour)">
		<component :is="event.component" :event="event"/>
		</div>
		</td>
		</tr>
		</tbody>
		</table>
		</div>
		</template>

		<script>
		@@ -25,21 +44,57 @@ export default {
		name: 'UCalendar',
		props: {
		date: {type: Date, required: true},
		events: {type: Array, required: true},
		},
		methods: {
		data()
		{
		const dateObj = new Date(this.date);

		return {
		mois: dateObj.getMonth() + 1,
		annee: dateObj.getFullYear(),
		};
		},
		computed: {
		listeJours()
		{
		let jours = [];
		const dateObj = new Date(this.date);

		const dateObj = new Date();
		dateObj.setDate(1);
		dateObj.setMonth(dateObj.getMonth() + 1);
		dateObj.setDate(dateObj.getDate() - 1);

		let nombreJours = dateObj.getDate();

		for (let i = 1; i <= 7; i++) {
		dateObj.setDate(dateObj.getDate() - dateObj.getDay() + (i == 7 ? 0 : i));
		let nomJour = dateObj.toLocaleDateString('fr-FR', {weekday: 'long'});
		jours.push({id: i, libelle: nomJour});
		return Array.from({length: nombreJours}, (v, k) => k + 1)
		}
		},
		watch: {
		date: function (newVal, oldVal) { // watch it
		const dateObj = new Date(this.date);

		return jours;
		this.mois = dateObj.getMonth() + 1;
		this.annee = dateObj.getFullYear();
		},
		mois: function (newVal, oldVal) { // watch it
		const dateObj = new Date(this.date);
		dateObj.setMonth(newVal - 1);

		this.$emit('changeDate', dateObj);
		},
		annee: function (newVal, oldVal) { // watch it
		const dateObj = new Date(this.date);
		dateObj.setFullYear(newVal);

		this.$emit('changeDate', dateObj);
		}
		},
		methods: {
		nomJour(numJour)
		{
		const dateObj = new Date(this.date);
		dateObj.setDate(numJour);
		return dateObj.toLocaleString("fr-FR", {weekday: "short"});
		},

		listeMois()
		@@ -72,9 +127,48 @@ export default {
		return annees;
		},

		lignes()
		nombreJours()
		{
		return [0,1,2,3,4];
		const dateObj = new Date(this.date);

		dateObj.setDate(1);
		dateObj.setMonth(dateObj.getMonth() + 1);
		dateObj.setDate(dateObj.getDate() - 1);

		return dateObj.getDate();
		},

		prevMois()
		{
		const dateObj = new Date(this.date);
		dateObj.setMonth(dateObj.getMonth() - 1);

		this.$emit('changeDate', dateObj);
		},

		nextMois()
		{
		const dateObj = new Date(this.date);
		dateObj.setMonth(dateObj.getMonth() + 1);

		this.$emit('changeDate', dateObj);
		},

		eventsByJour(jour)
		{
		const dateObj = new Date(this.date);

		let res = [];
		for (let e in this.events) {
		let event = this.events[e];
		if (event.date.getFullYear() === dateObj.getFullYear()
		&& event.date.getMonth() + 1 === dateObj.getMonth() + 1
		&& event.date.getDate() === jour
		) {
		res.push(event);
		}
		}
		return res;
		},
		}
		}
		@@ -82,14 +176,31 @@ export default {

		<style scoped>

		.cal-th {
		width: 10%;
		.recherche {
		text-align: center;
		}

		.recherche .btn-group {
		box-shadow: none;
		margin: auto;
		}

		.recherche select.btn {
		padding-right: 3em;
		}

		th.nom-jour {
		width: 1%;
		}

		th.numero-jour {
		width: 1%;
		padding-right: .5em;
		}

		.cal-td {
		width: 10%;
		min-height: 10em;
		height: 10em;
		.recherche {
		justify-content: center;
		padding-bottom: 5px;
		}

		</style>
		No newline at end of file

front/Mission/Suivi.vue

+41 −1

Original line number	Diff line number	Diff line
		<template>
		<u-calendar date="2023-02-01"></u-calendar>
		<u-calendar :date="date" @changeDate="changeDate" :events="realise" />
		<button @click="test()">Test</button>
		</template>

		<script>

		import SuiviEvent from './SuiviEvent.vue';

		export default {
		name: 'Suivi',
		props: {
		intervenant: {type: Number, required: true},
		},
		data(){
		return {
		date: new Date(),
		realise: [
		{
		component: SuiviEvent,
		date: new Date(2023,1,5),
		texte:'Coucou, le 50 février 2023',
		},
		{
		component: SuiviEvent,
		date: new Date(2023,1,5),
		texte:'Coucou, le 505 février 2023',

		},
		{
		component: SuiviEvent,
		date: new Date(2023,1,6),
		texte:'Coucou, le 60 février 2023'
		},
		{
		component: SuiviEvent,
		date: new Date(2023,2,6),
		texte:'Coucou, le 6 mars 2023',

		},
		]
		};
		},
		methods: {
		test()
		{
		console.log(this.lignes());
		},

		changeDate(dateObj)
		{
		console.log(dateObj);
		this.date = dateObj;
		}
		}
		}