151 lines
4.3 KiB
Vue
151 lines
4.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="pr-4">
|
|
<label for="projects">Période</label>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<select class="form-control mr-2" v-model="month">
|
|
<option v-for="value, key in months" v-bind:value="key">{{ value }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-6">
|
|
<select class="form-control ml-2" v-model="year">
|
|
<option v-for="value, key in years" v-bind:value="key">{{ value }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="pr-2">
|
|
<label for="projects">Intervenants</label>
|
|
<select class="form-control" v-model="selectedSpeakers" id="speakers" multiple>
|
|
<option v-for="item in speakers" v-bind:value="item.id">{{ item.name }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div>
|
|
<label for="projects">Projets</label>
|
|
<select class="form-control" v-model="selectedProjects" id="projects" multiple>
|
|
<option v-for="item in projects" v-bind:value="item.id">{{ item.label }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" v-if="weeks.length > 0">
|
|
<div class="col-md-12">
|
|
<table class="table table-bordered mt-3">
|
|
<Week v-for="week, key in weeks" v-bind:key="key" v-bind:week="week" />
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
table {
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import Routing from '../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js'
|
|
|
|
const Week = require('./Week').default
|
|
const Choices = require('choices.js')
|
|
const chunk = require('chunk')
|
|
const axios = require('axios').default
|
|
const routes = require('../../../public/js/fos_js_routes.json')
|
|
|
|
Routing.setRoutingData(routes)
|
|
|
|
export default {
|
|
name: 'Calendar',
|
|
components: {
|
|
Week
|
|
},
|
|
data () {
|
|
return {
|
|
projects: [],
|
|
speakers: [],
|
|
month: new Date().getMonth() + 1,
|
|
year: new Date().getFullYear(),
|
|
years: {},
|
|
weeks: [],
|
|
months: {
|
|
1: 'Janvier',
|
|
2: 'Février',
|
|
3: 'Mars',
|
|
4: 'Avril',
|
|
5: 'Mai',
|
|
6: 'Juin',
|
|
7: 'Juillet',
|
|
8: 'Août',
|
|
9: 'Septembre',
|
|
10: 'Octobre',
|
|
11: 'Novembre',
|
|
12: 'Décembre'
|
|
},
|
|
selectedProjects: [],
|
|
selectedSpeakers: []
|
|
}
|
|
},
|
|
methods: {
|
|
refresh () {
|
|
const that = this
|
|
|
|
axios.get(Routing.generate('admin_calendar_month', {
|
|
month: this.month,
|
|
year: this.year,
|
|
projects: this.selectedProjects,
|
|
speakers: this.selectedSpeakers
|
|
}))
|
|
.then((response) => {
|
|
that.weeks = chunk(response.data, 7)
|
|
})
|
|
}
|
|
},
|
|
mounted () {
|
|
const that = this
|
|
|
|
for (let year = 2020; year <= (new Date().getFullYear() + 3); year++) {
|
|
this.years[year] = year
|
|
}
|
|
|
|
axios.get(Routing.generate('admin_calendar_projects'))
|
|
.then((response) => {
|
|
that.projects = response.data
|
|
that.selectedProjects = response.data.map(item => item.id)
|
|
|
|
window.setTimeout(e => new Choices(document.getElementById('projects')), 500)
|
|
})
|
|
|
|
axios.get(Routing.generate('admin_calendar_speakers'))
|
|
.then((response) => {
|
|
that.speakers = response.data
|
|
that.selectedSpeakers = response.data.map(item => item.id)
|
|
|
|
window.setTimeout(e => new Choices(document.getElementById('speakers')), 500)
|
|
})
|
|
},
|
|
watch: {
|
|
year (year) {
|
|
this.refresh()
|
|
},
|
|
month (month) {
|
|
this.refresh()
|
|
},
|
|
selectedProjects (selectedProjects) {
|
|
this.refresh()
|
|
},
|
|
selectedSpeakers (selectedSpeakers) {
|
|
this.refresh()
|
|
}
|
|
}
|
|
}
|
|
</script>
|