Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-11-10 14:18:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

edit location on existing ranges

Browse Source
This commit is contained in:
Julien Fastré
2022-06-29 23:47:12 +02:00
parent adad4313a6
commit 9e93e2a3f9
7 changed files with 144 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -64,7 +64,7 @@
<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 }}</b>
<b v-else >no 'is'</b>
<a v-if="arg.event.extendedProps.is === 'range'" class="fa fa-fw fa-times"
<a v-if="arg.event.extendedProps.is === 'range'" class="fa fa-fw fa-times delete"
@click.prevent="onClickDelete(arg.event)">
</a>
</span>
@@ -72,7 +72,7 @@
</FullCalendar>
<div id="copy-widget">
<h4 class="chill-red" style="margin-top: 2rem;">{{ 'copy_range_from_to' }}</h4>
<h4 class="chill-red" style="margin-top: 2rem;">{{ $t('copy_range_from_to') }}</h4>
<div style="display: flex; margin-top: 1rem;">
<div class="col-sm-3" style="margin-right: 1rem">
<input class="form-control" type="date" v-model="copyFrom" />
@@ -82,10 +82,13 @@
<input class="form-control" type="date" v-model="copyTo" />
</div>
<button class="btn btn-action" @click="copyDay">
{{ 'copy_range' }}
{{ $t('copy_range') }}
</button>
</div>
</div>
<!-- not directly seen, but include in a modal -->
<edit-location ref="editLocation"></edit-location>
</template>
<script setup lang="ts">
@@ -104,10 +107,11 @@ import FullCalendar from '@fullcalendar/vue3';
import frLocale from '@fullcalendar/core/locales/fr';
import interactionPlugin, {DropArg, EventResizeDoneArg} from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import {EventApi, DateSelectArg, EventDropArg} from "@fullcalendar/core";
import {EventApi, DateSelectArg, EventDropArg, EventClickArg} from "@fullcalendar/core";
import {ISOToDate, ISOToDatetime} from "../../../../../ChillMainBundle/Resources/public/chill/js/date";
import VueMultiselect from "vue-multiselect";
import {Location} from "../../../../../ChillMainBundle/Resources/public/types";
import EditLocation from "./Components/EditLocation.vue";
const store = useStore(key);
@@ -117,6 +121,7 @@ const slotMinTime = ref('08:00:00');
const slotMaxTime = ref('19:00:00');
const copyFrom = ref<string | null>(null);
const copyTo = ref<string | null>(null);
const editLocation = ref<InstanceType<typeof EditLocation> | null>(null)
const baseOptions = ref<CalendarOptions>({
locale: frLocale,
@@ -133,6 +138,8 @@ const baseOptions = ref<CalendarOptions>({
eventResize: onEventDropOrResize,
// when an event is moved
eventDrop: onEventDropOrResize,
// when an event si clicked
eventClick: onEventClick,
selectMirror: false,
editable: true,
headerToolbar: {
@@ -155,7 +162,7 @@ const pickedLocation = computed<Location | null>({
return store.state.locations.locationPicked || store.state.locations.currentLocation;
},
set(newLocation: Location | null): void {
store.commit('locations/setLocationPicked', newLocation, { root: true});
store.commit('locations/setLocationPicked', newLocation, {root: true});
}
})
@@ -229,8 +236,10 @@ function onClickDelete(event: EventApi): void {
}
function onEventDropOrResize(payload: EventDropArg | EventResizeDoneArg) {
if (payload.event.extendedProps.is !== 'range') {
return;
}
const changedEvent = payload.event;
console.log('eventDropOrResize', payload);
store.dispatch('calendarRanges/patchRangeTime', {
calendarRangeId: payload.event.extendedProps.calendarRangeId,
@@ -239,6 +248,18 @@ function onEventDropOrResize(payload: EventDropArg | EventResizeDoneArg) {
});
};
function onEventClick(payload: EventClickArg): void {
// @ts-ignore TS does not recognize the target. But it does exists.
if (payload.jsEvent.target.classList.contains('delete')) {
return;
}
if (payload.event.extendedProps.is !== 'range') {
return;
}
editLocation.value?.startEdit(payload.event);
}
function copyDay() {
if (null === copyFrom.value || null === copyTo.value) {
return;