ldc-supportweb/resources/js/components/ScheduleComponent.vue

<template>
<div class="plannings">
    <div class="row justify-content-center">
        <div class="col-1 text-center">
            <a class="sticky-top btn btn-primary mt-5" @click="goToPlanning(false)">←</a>
        </div>
        <div :class="'col-10 grid-week grid-'+weeksCells.length+'week'">
            <!--line header 1 -->
            <div class="empty"></div>
            <div class="week" v-for="item in weeksCells">
                S {{item.num}} - {{item.month}} {{item.year}}
            </div>
            <!--line header 2 -->
            <div v-for="day in days" :class="'day '+day.eday">
                {{day.day}} {{day.num}}
            </div>
            <template v-for="(user,index) in schedules">
                <div class="name">{{users[index].name}}</div>
                <template v-for="(slot,key) in user">
                    <div v-for="day in days" :class="'day '+user[key][day.key].type.value+ ' ' +day.eday">
                        {{user[key][day.key]['text']}}
                    </div>
                </template>
            </template>
        </div>
        <div class="col-1 text-center">
            <a class="sticky-top btn btn-primary mt-5" @click="goToPlanning(true)">→</a>
        </div>
    </div>
</div>
</template>

<script>
export default {
    props: {
        dbSchedules: {
            type: String,
        },
        dbUsers: {
            type: String,
        },
        weeks: {
            type: String,
        },
        browseDate: {
            type: String,
            default: function() {
                return new Date();
            }
        },
    },
    mounted() {
        this.currentDate = JSON.parse(this.browseDate);
        this.weeksCells = JSON.parse(this.weeks);
        this.numweeks = this.weeksCells.length;
        this.days = this.prepareDays();
        this.users = JSON.parse(this.dbUsers);
        this.schedules = this.prepareSched(JSON.parse(this.dbSchedules));
    },
    data() {
        return {
            currentDate: null,
            weeksCells: [],
            days: [],
            users:[],
            schedules: [],
        };
    },
    watch: {
    },
    methods: {
        goToPlanning(forward) {
            console.log(forward);
            let date = this.moment(this.currentDate).startOf('week').subtract(7, 'day');
            if(forward) {
                date = this.moment(this.currentDate).add(7, 'day')
            }
            let url = new URL(this.route('schedule.index'))
            location = url.origin+ url.pathname + '?p='+date.format('DD/MM/YYYY')
        },
        prepareDays() {
            let mydays = [];
            for(let i=0; i < this.numweeks * 7; i++) {
                let date = this.moment(this.currentDate).add(i, 'day');
                let obj = {
                    day: date.format('ddd'),
                    num: date.format('DD'),
                    eday: date.locale("en").format('ddd'),
                    key: date.format('DD/MM/YYYY'),
                }
                mydays.push(obj);
                if(date.day() == 5) {
                    i+=2;
                }
            }
            return mydays;
        },
        prepareSched(dbscheds) {
            var templateObj = {"type":{"label":"","value":""},"text":"","id_lie":null,"model_lie":null}
            //we need to make missing users
            Object.keys(this.users).forEach(id => {
                if(dbscheds[id] === undefined) {
                    dbscheds[id] = {};
                }
            });
            Object.keys(dbscheds).forEach(userid => {
                //what if we missing a slot for the whole period ?
                //we need to make missing slots too
                for(let i=1; i < 5; i++) {
                    if(dbscheds[userid][i] === undefined) {
                        dbscheds[userid][i] = {};
                    }
                }
                Object.keys(dbscheds[userid]).forEach(slotkey => {
                    this.days.forEach(day => {
                        if(dbscheds[userid][slotkey][day.key] === undefined) {
                            //console.log('need ' + day.key + ' for slot ' + slotkey + ' for user ' + userid);
                            dbscheds[userid][slotkey][day.key] = templateObj;
                        }
                    });
                });
            });
            return dbscheds;
        }
    }
};
</script>

<style lang="scss">
@import "vue-select/src/scss/vue-select.scss";
.plannings {
    .sticky-top {
        top: 20rem !important;
    }
}
.grid-1week {
    display: grid;
    grid-template-columns: 2fr repeat(5, 1fr);
    grid-auto-rows: minmax(50px, auto);
}
.grid-2week {
    display: grid;
    grid-template-columns: 2fr repeat(10, 1fr);
    grid-auto-rows: minmax(50px, auto);
    align-items: center;
}
.grid-week div {
    border-width:0 1px 1px 0;
    border-style: solid;
    border-color: var(--bs-cyan);
    display: flex;
    justify-content: center;
    align-self: stretch;
    align-items: center;
}
.empty {
    grid-column: auto;
    grid-row: auto /span 2;
}
.week {
    grid-column: auto /span 5;
    grid-row: auto;
}
.name {
    grid-column: auto;
    grid-row: auto /span 4;
}
</style>