Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-07-01 22:46:13 +00:00
Code Issues Actions Projects Releases Wiki Activity

rdv: various UI improvements on my calendar

Browse Source
This commit is contained in:
nobohan 2021-09-10 22:00:24 +02:00
parent 855686c0ba
commit 5dc430ed31
1 changed files with 38 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
View File

@ -14,7 +14,9 @@
<FullCalendar ref="fullCalendar" :options="calendarOptions"> <FullCalendar ref="fullCalendar" :options="calendarOptions">
<template v-slot:eventContent='arg' > <template v-slot:eventContent='arg' >
<span class='calendarRangeItems'> <span class='calendarRangeItems'>
<b>{{ arg.timeText }}</b> <b v-if="arg.event.extendedProps.myCalendar" style="text-decoration: underline" >{{ arg.timeText }}</b>
<b v-else-if="!arg.event.extendedProps.myCalendar && arg.event.extendedProps.toDelete" style="text-decoration: line-through red" >{{ arg.timeText }}</b>
<b v-else >{{ arg.timeText }}</b>
<i>&nbsp;{{ arg.event.title }}</i> <i>&nbsp;{{ arg.event.title }}</i>
<a v-if=!arg.event.extendedProps.myCalendar class="fa fa-fw fa-times" <a v-if=!arg.event.extendedProps.myCalendar class="fa fa-fw fa-times"
@click.prevent="onClickDelete(arg.event)"> @click.prevent="onClickDelete(arg.event)">
@ -23,24 +25,31 @@
</template> </template>
</FullCalendar> </FullCalendar>
<div> <div>
<button class="btn btn-save" :disabled="!dirty" <ul class="record_actions">
@click.prevent="onClickSave"> <li>
{{ $t('action.save')}} <button class="btn btn-save" :disabled="!dirty"
</button> @click.prevent="onClickSave">
<span v-if="flag.loading" class="loading"> {{ $t('action.save')}}
<i class="fa fa-circle-o-notch fa-spin fa-fw"></i> </button>
<span class="sr-only">{{ $t('loading') }}</span> <span v-if="flag.loading" class="loading">
</span> <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
<span class="sr-only">{{ $t('loading') }}</span>
</span>
</li>
<li>
<button v-if="disableCopyDayButton" class="btn btn-action" disabled>
{{ $t('copy_range_to_next_day')}}
</button>
<button v-else class="btn btn-action"
@click.prevent="copyDay">
{{ $t('copy_range_from_day')}} {{this.lastNewDate.toLocaleDateString()}} {{ $t('to_the_next_day')}}
</button>
</li>
</ul>
</div> </div>
<div> <div>
<button v-if="disableCopyDayButton" class="btn btn-action" disabled>
{{ $t('copy_range_to_next_day')}}
</button>
<button v-if="!disableCopyDayButton" class="btn btn-action"
@click.prevent="copyDay">
{{ $t('copy_range_from_day')}} {{this.lastNewDate.toLocaleDateString()}} {{ $t('to_the_next_day')}}
</button>
<p>{{ $t('copy_range_how_to')}}</p> <p>{{ $t('copy_range_how_to')}}</p>
</div> </div>
<div> <div>
@ -77,7 +86,7 @@
@close="modal.showModal = false"> @close="modal.showModal = false">
<template v-slot:header> <template v-slot:header>
<h2 class="modal-title"> {{ this.myCalendarClickedEvent.start.toLocaleString() }} - {{ this.myCalendarClickedEvent.end.toLocaleString() }}</h2> <h2 class="modal-title">{{ this.renderEventDate() }}</h2>
</template> </template>
<template v-slot:body> <template v-slot:body>
@ -165,7 +174,7 @@ export default {
eventDrop: this.onEventDropOrResize, eventDrop: this.onEventDropOrResize,
eventResize: this.onEventDropOrResize, eventResize: this.onEventDropOrResize,
eventClick: this.onEventClick, eventClick: this.onEventClick,
selectMirror: true, selectMirror: false,
editable: true, editable: true,
weekends: false, weekends: false,
headerToolbar: { headerToolbar: {
@ -226,7 +235,7 @@ export default {
start: i.startDate.datetime, start: i.startDate.datetime,
end: i.endDate.datetime, end: i.endDate.datetime,
calendarRangeId: i.id, calendarRangeId: i.id,
toDelete: 0 toDelete: false
}) })
); );
let calendarRangeEvents = { let calendarRangeEvents = {
@ -307,10 +316,6 @@ export default {
this.$store.dispatch('updateRange', payload); this.$store.dispatch('updateRange', payload);
}, },
onEventClick(payload) { onEventClick(payload) {
console.log(payload)
console.log(payload.event)
console.log(payload.event.extendedProps)
if (payload.event.extendedProps.myCalendar) { if (payload.event.extendedProps.myCalendar) {
this.myCalendarClickedEvent = { this.myCalendarClickedEvent = {
id: payload.event.extendedProps.calendarId, id: payload.event.extendedProps.calendarId,
@ -369,12 +374,12 @@ export default {
}, },
onClickDelete(payload) { onClickDelete(payload) {
if (payload.extendedProps.hasOwnProperty("calendarRangeId")) { if (payload.extendedProps.hasOwnProperty("calendarRangeId")) {
if (payload.extendedProps.toDelete === 1) { if (payload.extendedProps.toDelete) {
payload.setExtendedProp('toDelete', 0) payload.setExtendedProp('toDelete', false)
payload.setProp('borderColor', '#79bafc'); payload.setProp('borderColor', '#79bafc');
this.$store.dispatch('removeFromDeleteRange', payload); this.$store.dispatch('removeFromDeleteRange', payload);
} else { } else {
payload.setExtendedProp('toDelete', 1) payload.setExtendedProp('toDelete', true)
payload.setProp('borderColor', '#dddddd'); payload.setProp('borderColor', '#dddddd');
this.$store.dispatch('deleteRange', payload); this.$store.dispatch('deleteRange', payload);
} }
@ -448,6 +453,13 @@ export default {
} else { } else {
console.log('no new events to copy-paste!') console.log('no new events to copy-paste!')
} }
},
renderEventDate() {
let start = this.myCalendarClickedEvent.start;
let end = this.myCalendarClickedEvent.end;
return start.getDate() === end.getDate() ?
`${start.toLocaleDateString()}, ${start.toLocaleTimeString()} - ${end.toLocaleTimeString()}` :
`${start.toLocaleString()} - ${end.toLocaleString()}`;
} }
}, },
mounted() { mounted() {