Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

improve some layout on create calendar

Browse Source
This commit is contained in:
Julien Fastré 2022-06-30 18:36:02 +02:00
parent 64d7c1fe99
commit d87c6305fd
8 changed files with 70 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Bundle/ChillCalendarBundle/Resources/public/types.ts
View File

@ -41,6 +41,7 @@ export interface CalendarRemote {
export type EventInputCalendarRange = EventInput & {
id: string,
userId: number,
userLabel: string,
calendarRangeId: number,
locationId: number,
locationName: string,

74
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
View File

@ -44,43 +44,77 @@
<calendar-active :user="u" :invite="this.$store.getters.getInviteForUser(u)"></calendar-active>
</template>
</div>
<div class="display-options row justify-content-between">
<div class="col-sm col-xs-12">
<div class="display-options row justify-content-between" style="margin-top: 1rem;">
<div class="col-sm-9 col-xs-12">
<div class="input-group mb-3">
<label class="input-group-text" for="slotDuration">Durée des créneaux</label>
<select v-model="this.slotDuration" id="slotDuration" class="form-select">
<select v-model="slotDuration" id="slotDuration" class="form-select">
<option value="00:05:00">5 minutes</option>
<option value="00:10:00">10 minutes</option>
<option value="00:15:00">15 minutes</option>
<option value="00:30:00">30 minutes</option>
</select>
<label class="input-group-text" for="slotMinTime">De</label>
<select v-model="slotMinTime" id="slotMinTime" class="form-select">
<option value="00:00:00">0h</option>
<option value="01:00:00">1h</option>
<option value="02:00:00">2h</option>
<option value="03:00:00">3h</option>
<option value="04:00:00">4h</option>
<option value="05:00:00">5h</option>
<option value="06:00:00">6h</option>
<option value="07:00:00">7h</option>
<option value="08:00:00">8h</option>
<option value="09:00:00">9h</option>
<option value="10:00:00">10h</option>
<option value="11:00:00">11h</option>
<option value="12:00:00">12h</option>
</select>
<label class="input-group-text" for="slotMaxTime">À</label>
<select v-model="slotMaxTime" id="slotMaxTime" class="form-select">
<option value="12:00:00">12h</option>
<option value="13:00:00">13h</option>
<option value="14:00:00">14h</option>
<option value="15:00:00">15h</option>
<option value="16:00:00">16h</option>
<option value="17:00:00">17h</option>
<option value="18:00:00">18h</option>
<option value="19:00:00">19h</option>
<option value="20:00:00">20h</option>
<option value="21:00:00">21h</option>
<option value="22:00:00">22h</option>
<option value="23:00:00">23h</option>
<option value="23:59:59">24h</option>
</select>
</div>
</div>
<div class="col-sm col-xs-12">
<div class="col-sm-3 col-xs-12">
<div class="float-end">
<div class="input-group mb-3">
<div class="input-group-text">
<input id="showHideWE" class="form-check-input mt-0" type="checkbox" v-model="this.hideWeekEnds">
<label for="showHideWE" class="form-check-label"> Masquer les week-ends</label>
</div>
<div class="form-check input-group">
<span class="input-group-text">
<input id="showHideWE" class="mt-0" type="checkbox" v-model="hideWeekends">
</span>
<label for="showHideWE" class="form-check-label input-group-text">Week-ends</label>
</div>
</div>
</div>
</div>
<FullCalendar ref="fullCalendar" :options="calendarOptions">
<template v-slot:eventContent='arg'>
<b>{{ arg.timeText }}</b>
<i>&nbsp;{{ arg.event.title }}</i>
<span>
<b v-if="arg.event.extendedProps.is === 'remote'">{{ arg.event.title}}</b>
<b v-else-if="arg.event.extendedProps.is === 'range'">{{ arg.timeText }} - {{ arg.event.extendedProps.locationName }} <small>{{ arg.event.extendedProps.userLabel }}</small></b>
<b v-else-if="arg.event.extendedProps.is === 'current'">{{ arg.timeText }} - {{ $t('current_selected')}} </b>
<b v-else>{{ arg.timeText }} - {{ $t('current_selected')}} </b>
</span>
</template>
</FullCalendar>
</teleport>
</template>
<script>
//import {mapGetters} from 'vuex';
import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue';
import Location from 'ChillActivityAssets/vuejs/Activity/components/Location.vue';
import CalendarUserSelector from '../_components/CalendarUserSelector/CalendarUserSelector.vue';
import '@fullcalendar/core/vdom'; // solves problem with Vite
import frLocale from '@fullcalendar/core/locales/fr';
import FullCalendar from '@fullcalendar/vue3';
@ -104,7 +138,9 @@ export default {
return {
errorMsg: [],
showMyCalendar: false,
slotDuration: '00:10:00',
slotDuration: '00:05:00',
slotMinTime: '09:00:00',
slotMaxTime: '18:00:00',
hideWeekEnds: true,
}
},
@ -122,6 +158,9 @@ export default {
initialDate: this.$store.getters.getInitialDate,
eventSources: this.events,
selectable: true,
slotMinTime: this.slotMinTime,
slotMaxTime: this.slotMaxTime,
scrollTimeReset: false,
datesSet: this.onDatesSet,
select: this.onDateSelect,
eventChange: this.onEventChange,
@ -132,7 +171,7 @@ export default {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,dayGridThreeDays,timeGridDay',
right: 'timeGridWeek,dayGridThreeDays,timeGridDay',
},
views: {
timeGrid: {
@ -237,4 +276,9 @@ export default {
.display-options {
margin-top: 1rem;
}
/* for events which are range */
.fc-event.isrange {
border-width: 3px;
}
</style>

1
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/i18n.js
View File

@ -18,6 +18,7 @@ const appMessages = {
main_user_is_mandatory: "L'utilisateur principal est requis. Vous pouvez le modifier, mais pas le supprimer",
change_main_user_will_reset_event_data: "Modifier l'utilisateur principal nécessite de choisir une autre plage de disponibilité ou un autre horaire. Ces informations seront perdues. Êtes-vous sûr·e de vouloir continuer ?",
list_three_days: 'Liste 3 jours',
current_selected: 'Rendez-vous fixé',
}
}

6
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js
View File

@ -36,15 +36,14 @@ export default {
if (state.activity.startDate !== null && state.activity.endDate !== null) {
const s = {
id: 'current',
backgroundColor: '#3788d8',
borderColor: '#3788d8',
textColor: '#ffffff',
events: [
{
title: "Rendez-vous",
start: state.activity.startDate,
end: state.activity.endDate,
allDay: false,
is: "current",
classNames: ['iscurrent'],
}
],
editable: state.activity.calendarRange === null,
@ -66,6 +65,7 @@ export default {
id: `ranges_${userId}`,
events: userData.calendarRanges.filter(r => state.activity.calendarRange === null || r.calendarRangeId !== state.activity.calendarRange.calendarRangeId),
color: userData.mainColor,
classNames: ['isrange'],
backgroundColor: 'white',
textColor: 'black',
editable: false,

2
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/index.js
View File

@ -59,6 +59,4 @@ for (let u of store.state.activity.users) {
store.commit('showUserOnCalendar', {ranges: false, remotes: false, user: u});
}
console.log('store', store);
export default store;

3
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.ts
View File

@ -63,7 +63,7 @@ export const createUserData = (user: User, colorIndex: number): UserData => {
}
}
// TODO move this function to a more global namespace, as it is in use in MyCalendarRange app
// TODO move this function to a more global namespace, as it is also in use in MyCalendarRange app
export const calendarRangeToFullCalendarEvent = (entity: CalendarRange): EventInputCalendarRange => {
return {
id: `range_${entity.id}`,
@ -72,6 +72,7 @@ export const calendarRangeToFullCalendarEvent = (entity: CalendarRange): EventIn
end: entity.endDate.datetime8601,
allDay: false,
userId: entity.user.id,
userLabel: entity.user.label,
calendarRangeId: entity.id,
locationId: entity.location.id,
locationName: entity.location.name,

6
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
View File

@ -15,7 +15,7 @@
</div>
</div>
<div class="display-options row justify-content-between" style="margin-top: 1rem;">
<div class="col-sm col-xs-12">
<div class="col-sm-9 col-xs-12">
<div class="input-group mb-3">
<label class="input-group-text" for="slotDuration">Durée des créneaux</label>
<select v-model="slotDuration" id="slotDuration" class="form-select">
@ -58,7 +58,7 @@
</select>
</div>
</div>
<div class="col-sm col-xs-12">
<div class="col-sm-3 col-xs-12">
<div class="float-end">
<div class="form-check input-group">
<span class="input-group-text">
@ -167,7 +167,7 @@ const baseOptions = ref<CalendarOptions>({
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek timeGridDay'
right: 'timeGridWeek,timeGridDay'
},
});

1
src/Bundle/ChillMainBundle/Resources/public/types.ts
View File

@ -32,6 +32,7 @@ export interface User {
text: string;
email: string;
user_job: Job;
label: string;
// todo: mainCenter; mainJob; etc..
}