render OK vueJS
This commit is contained in:
Olivier Legat
parent
f6801d72cd
commit
17fe33ba84
3 changed files with 220 additions and 30 deletions
|
|
@ -21,17 +21,23 @@ class ScheduleController extends Controller
|
|||
public function index(Request $request)
|
||||
{
|
||||
$date = CarbonImmutable::now()->startOfWeek();
|
||||
$nbweek = 2;
|
||||
$users = User::where('role', Role::developper())->get();
|
||||
$nbweeks = 2;
|
||||
if ($request->p) {
|
||||
$date = CarbonImmutable::createFromFormat('d/m/Y', $request->p)->startOfWeek();
|
||||
}
|
||||
|
||||
|
||||
$dbusers = User::where('role', Role::developper())->get();
|
||||
$users = [];
|
||||
foreach ($dbusers as $user) {
|
||||
$users[$user->id] = ['name' => $user->name];
|
||||
}
|
||||
|
||||
$schedules = Schedule::whereDate('date', '>=', $date)
|
||||
->whereDate('date', '<=', $date->addDays($nbweek * 7))
|
||||
->whereDate('date', '<=', $date->addDays($nbweeks * 7 - 1))
|
||||
->orderBy('user_id')
|
||||
->orderBy('date')
|
||||
->orderBy('slot')
|
||||
->orderBy('date')
|
||||
->get();
|
||||
|
||||
$arSchedules = array();
|
||||
|
|
@ -42,8 +48,8 @@ class ScheduleController extends Controller
|
|||
if ($prevUserId != $schedule->user_id) {
|
||||
//nouveau user
|
||||
$arSchedules[$schedule->user_id] = array(
|
||||
$schedule->date->format('d/m/Y') => array(
|
||||
$schedule->slot => array(
|
||||
$schedule->slot => array(
|
||||
$schedule->date->format('d/m/Y') => array(
|
||||
'type' => $schedule->activity,
|
||||
'text' => $schedule->description,
|
||||
'id_lie' => $schedule->id_lie,
|
||||
|
|
@ -53,10 +59,10 @@ class ScheduleController extends Controller
|
|||
);
|
||||
} else {
|
||||
//same user
|
||||
if ($prevDate != $schedule->date) {
|
||||
//new date
|
||||
$arSchedules[$schedule->user_id][$schedule->date->format('d/m/Y')] = array(
|
||||
$schedule->slot => array(
|
||||
if ($prevSlot != $schedule->slot) {
|
||||
//new slot
|
||||
$arSchedules[$schedule->user_id][$schedule->slot] = array(
|
||||
$schedule->date->format('d/m/Y') => array(
|
||||
'type' => $schedule->activity,
|
||||
'text' => $schedule->description,
|
||||
'id_lie' => $schedule->id_lie,
|
||||
|
|
@ -64,28 +70,37 @@ class ScheduleController extends Controller
|
|||
),
|
||||
);
|
||||
} else {
|
||||
//same date
|
||||
if ($prevSlot != $schedule->slot) {
|
||||
//new slot
|
||||
$arSchedules[$schedule->user_id][$schedule->date->format('d/m/Y')][$schedule->slot] = array(
|
||||
//same slot
|
||||
if ($prevDate != $schedule->date) {
|
||||
//new date
|
||||
$arSchedules[$schedule->user_id][$schedule->slot][$schedule->date->format('d/m/Y')] = array(
|
||||
'type' => $schedule->activity,
|
||||
'text' => $schedule->description,
|
||||
'id_lie' => $schedule->id_lie,
|
||||
'model_lie' => $schedule->model_lie,
|
||||
);
|
||||
} else {
|
||||
//same slot ?
|
||||
//should never en here
|
||||
//same date
|
||||
//should never be here
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
$prevUserId = $schedule->user_id;
|
||||
$prevDate = $schedule->date;
|
||||
$prevSlot = $schedule->slot;
|
||||
}
|
||||
|
||||
return view('schedule.index', compact('users', 'date', 'nbweek', 'arSchedules'));
|
||||
$weekCells = array();
|
||||
for ($i=0; $i < $nbweeks; $i++) {
|
||||
$weekCells[] = array(
|
||||
"num" => $date->addDays($i * 7)->weekOfYear,
|
||||
"month" => $date->addDays($i * 7)->shortLocaleMonth,
|
||||
"year" => $date->addDays($i * 7)->format('Y')
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return view('schedule.index', compact('users', 'date', 'weekCells', 'arSchedules'));
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
168
resources/js/components/ScheduleComponent.vue
Normal file
168
resources/js/components/ScheduleComponent.vue
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
<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>
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
@push('customCss')
|
||||
<style>
|
||||
{{--
|
||||
.grid-1week {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr repeat(5, 1fr);
|
||||
|
|
@ -37,7 +38,7 @@
|
|||
grid-column: auto;
|
||||
grid-row: auto /span 4;
|
||||
}
|
||||
|
||||
--}}
|
||||
.support {
|
||||
background-color: {{CellType::support()->value}};
|
||||
}
|
||||
|
|
@ -74,21 +75,26 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="plannings">
|
||||
<schedule-component
|
||||
browse-date='@json($date)'
|
||||
db-schedules='@json($arSchedules)'
|
||||
db-users='@json($users)'
|
||||
weeks='@json($weekCells)'></schedule-component>
|
||||
{{-- <div class="plannings">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-1 text-center">
|
||||
<a class="sticky-top btn btn-primary mt-5" href="{{route('schedule.index')}}?p={{$date->addDays(-7)->format('d/m/Y')}}">←</a>
|
||||
</div>
|
||||
<div class="col-10 grid-week grid-{{$nbweek}}week">
|
||||
<div class="col-10 grid-week grid-{{count($weekCells)}}week">
|
||||
<!--line header 1 -->
|
||||
<div class="empty"></div>
|
||||
@for ($i = 0; $i < $nbweek; $i++)
|
||||
@for ($i = 0; $i < count($weekCells); $i++)
|
||||
<div class="week">
|
||||
S{{$date->addDays($i*7)->weekOfYear}} - {{$date->addDays($i*7)->shortLocaleMonth}} {{$date->addDays($i*7)->format('Y')}}
|
||||
</div>
|
||||
@endfor
|
||||
<!--line header 2 -->
|
||||
@for ($i = 0; $i < ($nbweek*7); $i++)
|
||||
@for ($i = 0; $i < (count($weekCells)*7); $i++)
|
||||
<div class="day {{$date->addDays($i)->shortEnglishDayOfWeek}}">
|
||||
{{$date->addDays($i)->localeDayOfWeek}} {{$date->addDays($i)->format('d')}}
|
||||
</div>
|
||||
|
|
@ -98,14 +104,14 @@
|
|||
}
|
||||
@endphp
|
||||
@endfor
|
||||
@foreach($users as $user)
|
||||
@foreach($users as $id => $user)
|
||||
<!-- user $j -->
|
||||
<div class="name">{{$user->name}}</div>
|
||||
<div class="name">{{$user["name"]}}</div>
|
||||
@for ($k=1; $k < 5; $k++)
|
||||
<!--line slot $k-->
|
||||
@for ($i = 0; $i < ($nbweek*7); $i++)
|
||||
<div class="day {{ $arSchedules[$user->id][$date->addDays($i)->format('d/m/Y')][$k]['type'] ?? '' }} {{$date->addDays($i)->shortEnglishDayOfWeek}}">
|
||||
{{$arSchedules[$user->id][$date->addDays($i)->format('d/m/Y')][$k]['text'] ?? ''}}
|
||||
@for ($i = 0; $i < (count($weekCells)*7); $i++)
|
||||
<div class="day {{ $arSchedules[$id][$k][$date->addDays($i)->format('d/m/Y')]['type'] ?? '' }} {{$date->addDays($i)->shortEnglishDayOfWeek}}">
|
||||
{{$arSchedules[$id][$k][$date->addDays($i)->format('d/m/Y')]['text'] ?? ''}}
|
||||
</div>
|
||||
@php
|
||||
if( $date->addDays($i)->dayOfWeek == 5) {
|
||||
|
|
@ -120,14 +126,15 @@
|
|||
<a class="sticky-top btn btn-primary mt-5" href="{{route('schedule.index')}}?p={{$date->addDays(7)->format('d/m/Y')}}">→</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>--}}
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scriptsConstants')
|
||||
<script>
|
||||
window._routes = {
|
||||
"planning.index": "{{ route('planning.index') }}",
|
||||
"schedule.index": "{{ route('schedule.index') }}",
|
||||
|
||||
"ticket.show": "{{ route('ticket.show', 'TICKET') }}",
|
||||
"projects.show": "{{ route('projects.show', 'PROJECT') }}",
|
||||
"sites.show": "{{ route('sites.show', 'SITE') }}",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue