mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-29 13:36:13 +00:00
remove unused files
This commit is contained in:
parent
4aa8436399
commit
64d7c1fe99
@ -1,328 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="chill-red">{{ $t('edit_your_calendar_range') }}</h2>
|
||||
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="myCalendar" class="form-check-input" v-model="showMyCalendarWidget" />
|
||||
<label class="form-check-label" for="myCalendar">{{ $t('show_my_calendar') }}</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="weekends" class="form-check-input" @click="toggleWeekends" />
|
||||
<label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
|
||||
</div>
|
||||
|
||||
<div>Il y a {{ this.calendarOptions.eventSources[0].events.length }} events</div>
|
||||
|
||||
<FullCalendar ref="fullCalendar" :options="calendarOptions">
|
||||
<template v-slot:eventContent='arg' >
|
||||
<span class='calendarRangeItems'>
|
||||
<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> {{ arg.event.title }}</i>
|
||||
<a v-if=!arg.event.extendedProps.myCalendar class="fa fa-fw fa-times"
|
||||
@click.prevent="onClickDelete(arg.event)">
|
||||
</a>
|
||||
</span>
|
||||
</template>
|
||||
</FullCalendar>
|
||||
|
||||
<div id="copy-widget">
|
||||
<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" />
|
||||
</div>
|
||||
<i class="fa fa-angle-double-right" style="font-size: 2rem; margin-right: 1rem"></i>
|
||||
<div class="col-sm-3" style="margin-right: 1rem">
|
||||
<input class="form-control" type="date" v-model="copyTo" />
|
||||
</div>
|
||||
<button class="btn btn-action" @click="copyDay">
|
||||
{{ $t('copy_range')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<teleport to="body">
|
||||
<modal v-if="modal.showModal"
|
||||
:modalDialogClass="modal.modalDialogClass"
|
||||
@close="modal.showModal = false">
|
||||
|
||||
<template v-slot:header>
|
||||
<h2 class="modal-title">{{ this.renderEventDate() }}</h2>
|
||||
</template>
|
||||
|
||||
<template v-slot:body>
|
||||
<p>{{ $t('by')}} {{this.myCalendarClickedEvent.user.username }}</p>
|
||||
<p>{{ $t('main_user_concerned') }} : {{ this.myCalendarClickedEvent.mainUser.username }}</p>
|
||||
<p v-if="myCalendarClickedEvent.comment.length > 0" >{{ this.myCalendarClickedEvent.comment }}</p>
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a
|
||||
class="btn btn-show"
|
||||
:href=myCalendarEventShowLink() >
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="btn btn-update"
|
||||
:href=myCalendarEventUpdateLink() >
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="btn btn-delete"
|
||||
:href=myCalendarEventDeleteLink() >
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
</modal>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@fullcalendar/core/vdom'; // solves problem with Vite
|
||||
import frLocale from '@fullcalendar/core/locales/fr';
|
||||
import FullCalendar from '@fullcalendar/vue3';
|
||||
import dayGridPlugin from '@fullcalendar/daygrid';
|
||||
import interactionPlugin from '@fullcalendar/interaction';
|
||||
import timeGridPlugin from '@fullcalendar/timegrid';
|
||||
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
|
||||
import { mapGetters, mapActions, mapState } from 'vuex';
|
||||
import { vShow} from 'vue';
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
FullCalendar,
|
||||
Modal
|
||||
},
|
||||
renderTracked(event) {
|
||||
console.log('renderTracked' ,event);
|
||||
},
|
||||
renderTriggered(e) {
|
||||
console.log('renderTriggered', e);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
errorMsg: [],
|
||||
copyFrom: null,
|
||||
copyTo: null,
|
||||
modal: {
|
||||
showModal: false,
|
||||
modalDialogClass: "modal-dialog-scrollable modal-m"
|
||||
},
|
||||
flag: {
|
||||
loading: false
|
||||
},
|
||||
userId: window.userId,
|
||||
showMyCalendar: true,
|
||||
myCalendarClickedEvent: null,
|
||||
lastNewDate: null,
|
||||
disableCopyDayButton: true,
|
||||
showWeekends: false,
|
||||
start: new Date(),
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
rangesToCopy: state => state.rangesToCopy,
|
||||
key: state => {
|
||||
let k = state.fullCalendar.key + state.calendarRanges.key;
|
||||
console.log('key', k);
|
||||
return k;
|
||||
},
|
||||
}),
|
||||
...mapGetters(['getEventSources']),
|
||||
/*, 'appointmentSource'*/
|
||||
showMyCalendarWidget: {
|
||||
set(value) {
|
||||
this.toggleMyCalendar(value);
|
||||
},
|
||||
get() {
|
||||
return this.showMyCalendar;
|
||||
}
|
||||
},
|
||||
/*
|
||||
events() {
|
||||
let sources = this.getEventSources;
|
||||
console.log('events', sources);
|
||||
return function (calendarInfo, successCallback, failureCallback) {
|
||||
successCallback(sources);
|
||||
}
|
||||
},
|
||||
|
||||
*/
|
||||
calendarOptions() {
|
||||
return {
|
||||
locale: frLocale,
|
||||
plugins: [interactionPlugin, timeGridPlugin],
|
||||
initialView: 'timeGridWeek',
|
||||
initialDate: new Date(),
|
||||
selectable: true,
|
||||
select: this.onDateSelect,
|
||||
datesSet: this.onDatesSet,
|
||||
eventChange: this.onEventChange,
|
||||
eventDrop: this.onEventDropOrResize,
|
||||
eventResize: this.onEventDropOrResize,
|
||||
eventClick: this.onEventClick,
|
||||
eventSources: this.getEventSources,
|
||||
selectMirror: false,
|
||||
editable: true,
|
||||
weekends: this.showWeekends,
|
||||
slotDuration: '00:15:00',
|
||||
slotMinTime: "08:00:00",
|
||||
slotMaxTime: "19:00:00",
|
||||
//contentHeight: 500,
|
||||
headerToolbar: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'timeGridWeek timeGridDay'
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
key() {
|
||||
console.log('key changed');
|
||||
this.calendarOptions.initialDate = this.start;
|
||||
//this.$refs.fullCalendar.getApi().render();
|
||||
},
|
||||
calendarOptions() {
|
||||
console.log('calendar options changed');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions([
|
||||
//'fetchRanges',
|
||||
//'fetchAppointments',
|
||||
'postRange',
|
||||
'patchRange',
|
||||
'deleteRange'
|
||||
]),
|
||||
onDatesSet(event) {
|
||||
console.log('onDatesSet', event);
|
||||
this.start = event.start;
|
||||
this.$store.dispatch('fullCalendar/setCurrentDatesView', {start: event.start, end: event.end})
|
||||
.then(source => {
|
||||
console.log('onDatesSet finished');
|
||||
//this.eventSources.push(source);
|
||||
});
|
||||
},
|
||||
openModal() {
|
||||
this.modal.showModal = true;
|
||||
},
|
||||
myCalendarEventShowLink() {
|
||||
return `/fr/calendar/calendar/${this.myCalendarClickedEvent.id}/show?user_id=${ this.userId }`
|
||||
},
|
||||
myCalendarEventUpdateLink() {
|
||||
return `/fr/calendar/calendar/${this.myCalendarClickedEvent.id}/edit?user_id=${ this.userId }`
|
||||
},
|
||||
myCalendarEventDeleteLink() {
|
||||
return `/fr/calendar/calendar/${this.myCalendarClickedEvent.id}/delete?user_id=${ this.userId }`
|
||||
},
|
||||
toggleMyCalendar(value) {
|
||||
this.$store.commit('setAppointmentShown', value);
|
||||
this.showMyCalendar = value;
|
||||
},
|
||||
toggleWeekends: function() {
|
||||
this.showWeekends = !this.showWeekends;
|
||||
},
|
||||
replaceDate(from, to) {
|
||||
|
||||
const fromDate = new Date(from)
|
||||
const toDate = new Date(to);
|
||||
|
||||
let newDate = fromDate.setDate(toDate.getDate());
|
||||
newDate = new Date(newDate).setMonth(toDate.getMonth());
|
||||
newDate = new Date(newDate).setFullYear(toDate.getFullYear());
|
||||
|
||||
newDate = `${new Date(newDate).toISOString().split('.')[0]}+0000`;
|
||||
|
||||
return newDate;
|
||||
},
|
||||
onDateSelect(payload) {
|
||||
const newRange = {
|
||||
user: {
|
||||
type: 'user',
|
||||
id: window.userId,
|
||||
},
|
||||
startDate: {
|
||||
datetime: `${payload.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
|
||||
},
|
||||
endDate: {
|
||||
datetime: `${payload.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
|
||||
},
|
||||
}
|
||||
this.postRange(newRange);
|
||||
},
|
||||
onEventClick(payload) {
|
||||
if (payload.event.extendedProps.myCalendar) {
|
||||
this.myCalendarClickedEvent = {
|
||||
id: payload.event.extendedProps.calendarId,
|
||||
start: payload.event.start,
|
||||
end: payload.event.end,
|
||||
user: payload.event.extendedProps.user,
|
||||
mainUser: payload.event.extendedProps.mainUser,
|
||||
persons: payload.event.extendedProps.persons,
|
||||
professionals: payload.event.extendedProps.professionals,
|
||||
comment: payload.event.extendedProps.comment
|
||||
};
|
||||
this.openModal();
|
||||
}
|
||||
},
|
||||
onClickDelete(payload) {
|
||||
if (payload.extendedProps.hasOwnProperty("calendarRangeId")) {
|
||||
this.deleteRange(payload.extendedProps.calendarRangeId)
|
||||
}
|
||||
},
|
||||
onEventDropOrResize(payload) {
|
||||
const changedEvent = payload.event;
|
||||
this.patchRange(changedEvent);
|
||||
},
|
||||
copyDay() {
|
||||
const payload = {
|
||||
userId: this.userId,
|
||||
dateToCopy: new Date(this.copyFrom).toISOString()
|
||||
}
|
||||
this.fetchRanges(payload).then(
|
||||
r => {
|
||||
r.forEach((range) => {
|
||||
this.postRange({
|
||||
user: {
|
||||
type: 'user',
|
||||
id: range.user.id,
|
||||
},
|
||||
startDate: {
|
||||
datetime: this.replaceDate(range.startDate.datetime, this.copyTo), //should be like "2021-08-20T15:00:00+0200",
|
||||
},
|
||||
endDate: {
|
||||
datetime: this.replaceDate(range.endDate.datetime, this.copyTo),
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
)
|
||||
},
|
||||
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() {
|
||||
if (this.showMyCalendar) {
|
||||
// this.fetchAppointments(this.userId)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,18 +0,0 @@
|
||||
import { createApp } from 'vue';
|
||||
import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
|
||||
import { appMessages } from './i18n'
|
||||
import futureStore from './store/index'
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
futureStore().then((store) => {
|
||||
const i18n = _createI18n(appMessages);
|
||||
|
||||
const app = createApp({
|
||||
template: `<app></app>`,
|
||||
})
|
||||
.use(store)
|
||||
.use(i18n)
|
||||
.component('app', App)
|
||||
.mount('#myCalendar');
|
||||
});
|
||||
@ -1,114 +0,0 @@
|
||||
import {makeFetch, fetchResults} from 'ChillMainAssets/lib/api/apiMethods';
|
||||
import {fetchCalendarRangeForUser} from 'ChillCalendarAssets/vuejs/Calendar/api';
|
||||
import {ActionContext} from 'vuex';
|
||||
import {State} from './index';
|
||||
|
||||
type Context = ActionContext<State, State>;
|
||||
|
||||
const actions = {
|
||||
setCurrentDatesView(, {start, end}) {
|
||||
commit('setCurrentDatesView', {start, end});
|
||||
dispatch('fetchRanges');
|
||||
},
|
||||
fetchRanges({commit, state}, payload = null) {
|
||||
if (state.me === null) {
|
||||
console.log('me is not there');
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
if (state.currentView.start === null || state.currentView.end === null) {
|
||||
console.log('current view dates are null');
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
if (getters.isRangeLoaded) {
|
||||
console.log('range already loaded');
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
commit('addLoaded', {start: state.currentView.start, end: state.currentView.end});
|
||||
|
||||
return fetchCalendarRangeForUser(state.me, state.currentView.start, state.currentView.end)
|
||||
.then(ranges => {
|
||||
commit('setRanges', ranges);
|
||||
return Promise.resolve();
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
return Promise.resolve();
|
||||
})
|
||||
;
|
||||
},
|
||||
postRange({commit}, payload) {
|
||||
const url = `/api/1.0/calendar/calendar-range.json?`;
|
||||
makeFetch('POST', url, payload)
|
||||
.then((response) => {
|
||||
const newRange =
|
||||
{
|
||||
start: response.startDate.datetime,
|
||||
end: response.endDate.datetime,
|
||||
calendarRangeId: response.id,
|
||||
toDelete: false
|
||||
}
|
||||
commit('addRange', newRange)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
})
|
||||
},
|
||||
deleteRange({commit}, payload) {
|
||||
const url = `/api/1.0/calendar/calendar-range/${payload}.json`;
|
||||
makeFetch('DELETE', url)
|
||||
.then((response) => {
|
||||
if (response == 200) {
|
||||
commit('removeRange', payload);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
})
|
||||
},
|
||||
patchRange({commit}, payload) {
|
||||
const url = `/api/1.0/calendar/calendar-range/${payload.extendedProps.calendarRangeId}.json`;
|
||||
const body = {
|
||||
startDate: {
|
||||
datetime: `${payload.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
|
||||
},
|
||||
endDate: {
|
||||
datetime: `${payload.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
|
||||
},
|
||||
}
|
||||
makeFetch('PATCH', url, body)
|
||||
.then((response) => {
|
||||
console.log('response', response);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
})
|
||||
},
|
||||
fetchAppointments({commit}, payload) {
|
||||
const url = `/api/1.0/calendar/calendar.json?main_user=${payload}&item_per_page=1000`
|
||||
makeFetch('GET', url)
|
||||
.then((response) => {
|
||||
const appointments = response.results.map(a => (
|
||||
{
|
||||
myCalendar: true,
|
||||
calendarId: a.id,
|
||||
start: a.startDate.datetime,
|
||||
end: a.endDate.datetime,
|
||||
user: a.user,
|
||||
mainUser: a.mainUser,
|
||||
persons: a.persons,
|
||||
professionals: a.professionals,
|
||||
comment: a.comment
|
||||
})
|
||||
);
|
||||
commit('setAppointments', appointments)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
})
|
||||
},
|
||||
};
|
||||
|
||||
export default actions;
|
||||
@ -1,33 +0,0 @@
|
||||
const getters = {
|
||||
rangeSource(state) {
|
||||
return {
|
||||
events: state.ranges,
|
||||
borderColor: "#3788d8",
|
||||
backgroundColor: '#ffffff',
|
||||
textColor: '#444444',
|
||||
}
|
||||
},
|
||||
appointmentSource(state) {
|
||||
if (state.appointmentsShown) {
|
||||
return {
|
||||
events: state.appointments,
|
||||
color: "darkblue",
|
||||
id: 1000,
|
||||
editable: false
|
||||
}
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
},
|
||||
isRangeLoaded: (state) => (start, end) => {
|
||||
for (let {rStart, rEnd} of state.rangesLoaded) {
|
||||
if (start === rStart && end === rEnd) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
};
|
||||
|
||||
export default getters;
|
||||
@ -1,39 +0,0 @@
|
||||
import {State} from './index';
|
||||
import {CalendarRange, Calendar, User} from 'ChillCalendarAssets/types';
|
||||
|
||||
const mutations = {
|
||||
setCurrentDatesView(state: State, payload: {start: Date, end: Date}) {
|
||||
state.currentView.start = payload.start;
|
||||
state.currentView.end = payload.end;
|
||||
},
|
||||
addRanges(state: State, ranges: CalendarRange[]) {
|
||||
console.log('addRanges', ranges);
|
||||
|
||||
const toAdd = ranges.filter(r => !state.rangesIndex.has(r.id));
|
||||
state.ranges.push(...toAdd);
|
||||
toAdd.forEach((r) => {state.rangesIndex.add(r.id)});
|
||||
},
|
||||
addLoaded(state: State, payload: {start: Date, end: Date}) {
|
||||
state.rangesLoaded.push({start: payload.start, end: payload.end});
|
||||
},/*
|
||||
setRangesToCopy(state: State, payload: CalendarRange[]) {
|
||||
state.rangesToCopy = payload
|
||||
},*/
|
||||
addRange(state: State, payload: CalendarRange) {
|
||||
state.ranges = [...state.ranges, payload];
|
||||
},
|
||||
removeRange(state: State, payload: CalendarRange) {
|
||||
const filteredCollection = state.ranges.filter(
|
||||
(r) => r.calendarRangeId !== payload
|
||||
)
|
||||
state.ranges = filteredCollection;
|
||||
},
|
||||
setAppointments(state: State, payload: Calendar) {
|
||||
state.appointments = payload;
|
||||
},
|
||||
setAppointmentShown(state: State, payload: boolean) {
|
||||
state.appointmentsShown = payload
|
||||
}
|
||||
};
|
||||
|
||||
export default mutations;
|
||||
Loading…
x
Reference in New Issue
Block a user