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

rdv: add my calendar + checkbox

Browse Source
This commit is contained in:
nobohan 2021-08-19 10:52:47 +02:00
parent 7c4f976230
commit 0457ee2b8d
3 changed files with 36 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,9 @@
<calendar-user-selector <calendar-user-selector
v-bind:users="users" v-bind:users="users"
v-bind:calendarEvents="calendarEvents" v-bind:calendarEvents="calendarEvents"
v-bind:updateEventsSource="updateEventsSource"> v-bind:updateEventsSource="updateEventsSource"
v-bind:showMyCalendar="showMyCalendar"
v-bind:toggleMyCalendar="toggleMyCalendar" >
</calendar-user-selector> </calendar-user-selector>
<h2 class="chill-red">{{ $t('choose_your_date') }}</h2> <h2 class="chill-red">{{ $t('choose_your_date') }}</h2>
<FullCalendar ref="fullCalendar" :options="calendarOptions"> <FullCalendar ref="fullCalendar" :options="calendarOptions">
@ -51,15 +53,16 @@ export default {
calendarEvents: { calendarEvents: {
loaded: [], loaded: [],
selected: [], selected: [],
user: [], //TODO load user calendar events user: [],
current: currentEvent current: currentEvent
}, },
showMyCalendar: true,
calendarOptions: { calendarOptions: {
locale: frLocale, locale: frLocale,
plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin ], plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin ],
initialView: 'timeGridWeek', initialView: 'timeGridWeek',
initialDate: window.startDate !== undefined ? window.startDate : new Date(), initialDate: window.startDate !== undefined ? window.startDate : new Date(),
eventSources: window.startDate !== undefined ? [currentEvent] : [], eventSource: [],
selectable: true, selectable: true,
select: this.onDateSelect, select: this.onDateSelect,
eventChange: this.onEventChange, eventChange: this.onEventChange,
@ -79,19 +82,21 @@ export default {
methods: { methods: {
init() { init() {
console.log(window.startDate) console.log(window.startDate)
// let calendar = this.$refs.fullCalendar.getApi() this.updateEventsSource()
// console.log(calendar) },
this.calendarEvents.selected.push(this.calendarEvents.user); toggleMyCalendar(value) {
this.calendarOptions.eventSources = this.calendarEvents.selected; this.showMyCalendar = value;
console.log(this.calendarOptions.eventSources)
}, },
updateEventsSource() { updateEventsSource() {
this.calendarOptions.eventSources = [];
this.calendarOptions.eventSources.push(...this.calendarEvents.selected);
console.log(this.calendarOptions.eventSources)
if (window.startDate !== undefined) { if (window.startDate !== undefined) {
this.calendarEvents.selected.push(currentEvent); this.calendarOptions.eventSources.push(currentEvent);
}
if (this.showMyCalendar) {
this.calendarOptions.eventSources.push(this.calendarEvents.user);
} }
this.calendarEvents.selected.push(this.calendarEvents.user);
this.calendarOptions.eventSources = this.calendarEvents.selected;
console.log(this.calendarOptions.eventSources) console.log(this.calendarOptions.eventSources)
}, },
onDateSelect(payload) { onDateSelect(payload) {

19
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
View File

@ -19,6 +19,10 @@
:options="options"> :options="options">
</VueMultiselect> </VueMultiselect>
</div> </div>
<div>
<input type="checkbox" id="myCalendar" v-model="showMyCalendarWidget" />
<label for="checkbox">{{ $t('show_my_calendar') }}</label>
</div>
</template> </template>
<script> <script>
@ -44,7 +48,7 @@ const COLORS = [ /* from https://colorbrewer2.org/#type=qualitative&scheme=Set3&
export default { export default {
name: 'CalendarUserSelector', name: 'CalendarUserSelector',
components: { VueMultiselect }, components: { VueMultiselect },
props: ['users', 'updateEventsSource', 'calendarEvents'], props: ['users', 'updateEventsSource', 'calendarEvents', 'showMyCalendar', 'toggleMyCalendar'],
data() { data() {
return { return {
errorMsg: [], errorMsg: [],
@ -52,6 +56,17 @@ export default {
options: [] options: []
} }
}, },
computed: {
showMyCalendarWidget: {
set(value) {
this.toggleMyCalendar(value);
this.updateEventsSource();
},
get() {
return this.showMyCalendar;
}
}
},
methods: { methods: {
init() { init() {
this.fetchData() this.fetchData()
@ -106,7 +121,6 @@ export default {
fetchCalendar(currentUser.id).then(calendar => new Promise((resolve, reject) => { fetchCalendar(currentUser.id).then(calendar => new Promise((resolve, reject) => {
let results = calendar.results; let results = calendar.results;
console.log(results)
let events = results.map(i => let events = results.map(i =>
({ ({
start: i.startDate.datetime, start: i.startDate.datetime,
@ -118,7 +132,6 @@ export default {
color: 'darkblue', color: 'darkblue',
id: 1000 id: 1000
}; };
console.log(calendarEventsCurrentUser);
this.calendarEvents.user = calendarEventsCurrentUser; this.calendarEvents.user = calendarEventsCurrentUser;
this.selectUsers(currentUser); this.selectUsers(currentUser);

5
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/i18n.js
View File

@ -1,7 +1,8 @@
const calendarUserSelectorMessages = { const calendarUserSelectorMessages = {
fr: { fr: {
choose_your_calendar_user: "Afficher les calendriers", choose_your_calendar_user: "Afficher les plages de disponibilités",
select_user: "Sélectionnez des calendriers" select_user: "Sélectionnez des calendriers",
show_my_calendar: "Affichez mon calendrier"
} }
}; };