ldc-supportweb/resources/js/components/PlanningsComponent.vue
Jérémy Munsch 7cc4303f03
Add Planning functionnality
- bump kwaadpepper/crud-policies
- npm i vue-select moment --save-dev
- Add Planning components
- csrf_token to axios
- Add Model WeekendPlanning
- Add Enums CellModel, CellType, TableRow
2021-10-02 13:57:00 +02:00

68 lines
2 KiB
Vue

<template>
<div class="plannings">
<div class="row justify-content-center">
<div class="col-1 text-center">
<button class="sticky-top btn btn-primary mt-5" @click="goToPlanning(false)">←</button>
</div>
<div class="col-10" v-if="weeks.length">
<template v-for="week in weeks">
<planning-component
:key="week.id"
:db-current-week='week'
:db-models='models'
:db-types='types'
:db-rows='rows'></planning-component>
</template>
</div>
<div v-else class="col-10">
<h3>Pas de planning à afficher</h3>
</div>
<div class="col-1 text-center">
<button class="sticky-top btn btn-primary mt-5" @click="goToPlanning(true)">→</button>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
this.weeks = JSON.parse(this.dbWeeks);
this.models = JSON.parse(this.dbModels);
this.types = JSON.parse(this.dbTypes);
this.rows = JSON.parse(this.dbRows);
this.currentDate = JSON.parse(this.browseDate);
},
props: ["browseDate", "dbWeeks", "dbModels", "dbTypes", "dbRows"],
data() {
return {
currentDate: null,
types: [],
rows: [],
models: [],
weeks: []
};
},
watch: {
},
methods: {
goToPlanning(forward) {
let date = this.moment(this.currentDate).startOf('week').subtract(1, 'day');
if(forward) {
date = this.moment(this.currentDate).endOf('week').add(1, 'day')
}
let url = new URL(this.route('planning.index'))
location = url.origin+ url.pathname + '?p='+date.unix()
}
}
};
</script>
<style lang="scss">
@import "vue-select/src/scss/vue-select.scss";
.plannings {
.sticky-top {
top: 20rem !important;
}
}
</style>