chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix calendar UI

Browse Source
pull/4334/head
Angel Fernando Quiroz Campos 3 years ago
parent 53374ed2d9
commit beec0d19f5
5 changed files with 543 additions and 581 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      assets/vue/App.vue
  2. 253
      assets/vue/components/ccalendarevent/Form.vue
  3. 36
      assets/vue/components/ccalendarevent/Info.vue
  4. 7
      assets/vue/components/ccalendarevent/Layout.vue
  5. 434
      assets/vue/views/ccalendarevent/List.vue

2
assets/vue/App.vue
Unescape View File

@ -139,6 +139,8 @@ store.dispatch('security/onRefresh', payload);
const flashMessageList = ref([]); const flashMessageList = ref([]);
provide('flashMessageList', flashMessageList);
onMounted(() => { onMounted(() => {
const app = document.getElementById('app'); const app = document.getElementById('app');

253
assets/vue/components/ccalendarevent/Form.vue
Unescape View File

@ -1,83 +1,61 @@
<template> <template>
<q-form> <form
<v-container> action="#"
<v-row> class="flex flex-col gap-4"
<v-col> >
<q-input <div class="form__field">
<div class="p-float-label">
<InputText
id="item_title" id="item_title"
v-model="item.title" v-model="v$.item.title.$model"
:error="v$.item.title.$error" :class="{'p-invalid': v$.item.title.$invalid}"
:error-message="titleErrors" />
:placeholder="$t('Title')" <label
@blur="v$.item.title.$touch()" v-t="'Title'"
@input="v$.item.title.$touch()" for="item_title"
/>
</div>
<small
v-if="v$.item.title.$invalid || v$.item.title.$pending.$response"
v-t="v$.item.title.required.$message"
class="p-error"
/> />
</div>
<q-input v-model="item.startDate" filled> <div class="flex gap-4">
<template v-slot:prepend> <div class="w-1/2 flex flex-col gap-4">
<q-icon class="cursor-pointer" name="event"> <div class="form__field">
<q-popup-proxy transition-hide="scale" transition-show="scale"> <div class="p-float-label">
<q-date v-model="item.startDate" mask="YYYY-MM-DD HH:mm"> <Calendar
<div class="row items-center justify-end"> id="start_date"
<q-btn v-close-popup color="primary" flat label="Close"/> v-model="item.startDate"
:show-icon="true"
:show-time="true"
/>
<label
v-t="'From'"
for="start_date"
/>
</div> </div>
</q-date>
</q-popup-proxy>
</q-icon>
</template>
<template v-slot:append>
<q-icon class="cursor-pointer" name="access_time">
<q-popup-proxy transition-hide="scale" transition-show="scale">
<q-time v-model="item.startDate" format24h mask="YYYY-MM-DD HH:mm">
<div class="row items-center justify-end">
<q-btn v-close-popup color="primary" flat label="Close"/>
</div> </div>
</q-time>
</q-popup-proxy> <div class="form__field">
</q-icon> <div class="p-float-label">
</template> <Calendar
</q-input> id="end_date"
v-model="item.endDate"
<q-input v-model="item.endDate" filled> :show-icon="true"
<template v-slot:prepend> :show-time="true"
<q-icon class="cursor-pointer" name="event"> />
<q-popup-proxy transition-hide="scale" transition-show="scale"> <label
<q-date v-model="item.endDate" mask="YYYY-MM-DD HH:mm"> v-t="'From'"
<div class="row items-center justify-end"> for="end_date"
<q-btn v-close-popup color="primary" flat label="Close"/> />
</div> </div>
</q-date>
</q-popup-proxy>
</q-icon>
</template>
<template v-slot:append>
<q-icon class="cursor-pointer" name="access_time">
<q-popup-proxy transition-hide="scale" transition-show="scale">
<q-time v-model="item.endDate" format24h mask="YYYY-MM-DD HH:mm">
<div class="row items-center justify-end">
<q-btn v-close-popup color="primary" flat label="Close"/>
</div> </div>
</q-time>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
<!-- <q-input-->
<!-- v-model="item.content"-->
<!-- :error="v$.item.content.$error"-->
<!-- :error-message="contentErrors"-->
<!-- :placeholder="$t('Content')"-->
<!-- type="textarea"-->
<!-- @blur="v$.item.content.$touch()"-->
<!-- @input="v$.item.content.$touch()"-->
<!-- />-->
<TinyEditor <TinyEditor
v-model="item.content" v-model="item.content"
required
:init="{ :init="{
skin_url: '/build/libs/tinymce/skins/ui/oxide', skin_url: '/build/libs/tinymce/skins/ui/oxide',
content_css: '/build/libs/tinymce/skins/content/default/content.css', content_css: '/build/libs/tinymce/skins/content/default/content.css',
@ -94,111 +72,71 @@
], ],
toolbar: 'undo redo | bold italic underline strikethrough | insertfile image media template link | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen preview save print | code codesample | ltr rtl', toolbar: 'undo redo | bold italic underline strikethrough | insertfile image media template link | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen preview save print | code codesample | ltr rtl',
}" }"
required
/> />
</v-col> </div>
<v-col> <div class="w-1/2 flex flex-col gap-4">
<div <div
v-text="$t('Invitees')" v-t="'Invitees'"
class="text-h6" class="text-h6"
> />
</div>
<EditLinks <EditLinks
:item="item"
:show-status="false"
:edit-status="false" :edit-status="false"
:item="item"
:links-type="linksType" :links-type="linksType"
:show-status="false"
/> />
<q-checkbox
<div class="form__field">
<Checkbox
id="is_collective"
v-model="item.collective" v-model="item.collective"
:label="$t('Is it editable by the invitees?')"
/> />
</v-col> <label
v-t="'Is it editable by the invitees?'"
for="is_collective"
/>
</div>
</div>
</div>
<slot></slot> <slot />
</v-row> </form>
</v-container>
</q-form>
</template> </template>
<script> <script setup>
import has from 'lodash/has'; import { computed, ref } from 'vue';
import useVuelidate from '@vuelidate/core'; import { useStore } from 'vuex';
import {required} from '@vuelidate/validators'; import { useVuelidate } from '@vuelidate/core';
import EditLinks from "../resource_links/EditLinks.vue"; import { required } from '@vuelidate/validators';
import {computed, ref} from "vue"; import InputText from 'primevue/inputtext';
import {useStore} from "vuex"; import Calendar from 'primevue/calendar';
import EditLinks from '../resource_links/EditLinks.vue';
export default { import Checkbox from 'primevue/checkbox';
name: 'CCalendarEventForm',
components: {
EditLinks
},
setup() {
const store = useStore();
const linksType = ref('users');
const isCurrentTeacher = computed(() => store.getters['security/isCurrentTeacher']);
const isAdmin = computed(() => store.getters['security/isAdmin']);
if (!isAdmin.value) { const store = useStore();
if (isCurrentTeacher.value) {
linksType.value = 'course_students';
} else {
linksType.value = 'user_rel_users';
}
}
return { // eslint-disable-next-line no-undef
v$: useVuelidate(), const props = defineProps({
linksType
}
},
props: {
values: { values: {
type: Object, type: Object,
required: true required: true,
}, },
errors: { errors: {
type: Object, type: Object,
default: () => { default: () => {},
}
}, },
initialValues: { initialValues: {
type: Object, type: Object,
default: () => { default: () => {},
}
},
},
data() {
return {
title: null,
content: null,
parentResourceNodeId: null,
collective: null,
};
},
computed: {
item() {
return this.initialValues || this.values;
}, },
titleErrors() { });
const errors = [];
if (!this.v$.item.title.$dirty) return errors;
has(this.violations, 'title') && errors.push(this.violations.title);
if (this.v$.item.title.required) { const item = computed(() => props.initialValues || props.values);
return this.$t('Field is required')
}
return errors;
},
violations() { const rules = computed(() => ({
return this.errors || {};
}
},
validations: {
item: { item: {
title: { title: {
required, required,
@ -212,7 +150,26 @@ export default {
endDate: { endDate: {
required, required,
}, },
collective: {}
} }
}));
const v$ = useVuelidate(rules, { item });
// eslint-disable-next-line no-undef
defineExpose({
v$,
})
const linksType = ref('users');
const isCurrentTeacher = computed(() => store.getters['security/isCurrentTeacher']);
const isAdmin = computed(() => store.getters['security/isAdmin']);
if (!isAdmin.value) {
if (isCurrentTeacher.value) {
linksType.value = 'course_students';
} else {
linksType.value = 'user_rel_users';
} }
}; }
</script> </script>

36
assets/vue/components/ccalendarevent/Info.vue
Unescape View File

@ -1,33 +1,37 @@
<template> <template>
<h5>{{ event.title }}</h5> <div class="flex flex-col gap-4">
{{ $filters.abbreviatedDatetime(event.startDate) }} <h5 v-text="event.title" />
<p v-if="event.endDate"> <p v-text="useAbbreviatedDatetime(event.startDate)" />
{{ $filters.abbreviatedDatetime(event.endDate) }}
</p>
<hr class="my-2"> <p
v-if="event.endDate"
v-text="useAbbreviatedDatetime(event.endDate)"
/>
<hr>
<div class="mb-3" v-html="event.content" /> <div v-html="event.content" />
<h6 class="text-h5"> {{ $t('Invitees') }}</h6> <h6 v-t="'Invitees'" />
<ShowLinks <ShowLinks
:item="event" :item="event"
:show-status="false" :show-status="false"
/> />
</div>
</template> </template>
<script> <script setup>
import ShowLinks from "../resource_links/ShowLinks"; import { useAbbreviatedDatetime } from '../../composables/formatDate.js';
export default {
name: "CCalendarEventInfo", import ShowLinks from '../resource_links/ShowLinks';
components: {ShowLinks},
props: { // eslint-disable-next-line no-undef
defineProps({
event: { event: {
type: Object, type: Object,
required: true required: true
} }
} });
}
</script> </script>

7
assets/vue/components/ccalendarevent/Layout.vue
Unescape View File

@ -1,9 +1,6 @@
<template> <template>
<router-view></router-view> <router-view />
</template> </template>
<script> <script setup>
export default {
name: 'CCalendarEventLayout'
}
</script> </script>

434
assets/vue/views/ccalendarevent/List.vue
Unescape View File

@ -1,130 +1,134 @@
<template> <template>
<div> <div>
<FullCalendar ref="cal" :options="calendarOptions"/> <FullCalendar
ref="cal"
:options="calendarOptions"
/>
<Loading :visible="isLoading"/> <Loading :visible="isLoading" />
<!-- Add form--> <!-- Add form-->
<q-dialog v-model="dialog" persistent> <Dialog
<q-card style="min-width: 800px"> v-model:visible="dialog"
<q-card-section> :header="item['@id'] ? t('Edit event') : t('Add event')"
<div class="text-h6">{{ item['@id'] ? $t('Edit event') : $t('Add event') }}</div> :modal="true"
</q-card-section> >
<q-card-section class="q-pt-none">
<CCalendarEventForm <CCalendarEventForm
v-if="dialog" v-if="dialog"
ref="createForm" ref="createForm"
:values="item" :values="item"
> />
</CCalendarEventForm> <template #footer>
</q-card-section> <Button
:label="t('Cancel')"
<q-card-actions align="right" class="text-primary"> class="p-button-outlined p-button-plain"
<q-btn v-close-popup flat :label="$t('Cancel')" /> icon="pi pi-times"
<q-btn :label="item['@id'] ? $t('Edit') : $t('Add') " flat @click="onCreateEventForm"/> @click="dialog = false"
</q-card-actions> />
</q-card> <Button
</q-dialog> :label="item['@id'] ? t('Edit') : t('Add')"
class="p-button-secondary"
@click="onCreateEventForm"
/>
</template>
</Dialog>
<!-- Show form--> <!-- Show form-->
<q-dialog v-model="dialogShow" persistent> <Dialog
<q-card style="min-width: 500px"> v-model:visible="dialogShow"
<q-card-section> :header="t('Event')"
:modal="true"
>
<CCalendarEventInfo :event="item" /> <CCalendarEventInfo :event="item" />
</q-card-section>
<q-card-actions align="right" class="text-primary"> <template #footer>
<q-btn color="primary" flat no-caps :label="$t('Delete')" @click="confirmDelete"/> <Button
<q-btn v-if="isEventEditable" color="primary" flat no-caps :label="$t('Edit')" @click="dialog = true"/> :label="t('Cancel')"
<q-btn v-close-popup flat no-caps :label="$t('Close')" /> class="p-button-outlined p-button-plain"
</q-card-actions> icon="pi pi-times"
</q-card> @click="dialogShow = false"
</q-dialog> />
<Button
:label="t('Delete')"
class="p-button-outlined p-button-danger"
icon="pi pi-trash"
@click="confirmDelete"
/>
<Button
v-if="isEventEditable"
:label="t('Edit')"
class="p-button-secondary"
@click="dialog = true"
/>
</template>
</Dialog>
<!-- Show form--> <!-- Show form-->
<q-dialog v-model="showSessionDialog"> <Dialog
<q-card> v-model:visible="sessionState.showSessionDialog"
<q-card-section class="row items-center q-pb-none" icon="mdi-book-open"> :header="t('Session')"
<div class="text-h6">{{ sessionAsEvent.title }}</div> :modal="true"
<q-space/> >
<q-btn v-close-popup dense flat icon="close" round/> <div class="flex flex-col gap-4">
</q-card-section> <h5>{{ sessionState.sessionAsEvent.title }}</h5>
<p
<q-card-section> v-if="sessionState.sessionAsEvent.start"
<div v-if="sessionAsEvent.start"> v-t="{ path: 'From: {date}', args: { 'date': useAbbreviatedDatetime(sessionState.sessionAsEvent.start) } }"
<q-icon name="event"/> />
{{ $t('From:') }} <p
{{ $filters.abbreviatedDatetime(sessionAsEvent.start) }} v-if="sessionState.sessionAsEvent.end"
v-t="{ path: 'Until: {date}', args: { 'date': useAbbreviatedDatetime(sessionState.sessionAsEvent.end) } }"
/>
</div> </div>
<div v-if="sessionAsEvent.end"> <template #footer>
<q-icon name="event"/> <a
{{ $t('Until:') }} v-t="'Go to session'"
{{ $filters.abbreviatedDatetime(sessionAsEvent.end) }} :href="`/sessions/${sessionState.sessionAsEvent.id}/about`"
</div> class="btn btn--secondary"
</q-card-section> />
<q-card-actions align="right" class="text-primary"> </template>
<q-btn color="primary" flat :label="$t('Go to session')" type="a" </Dialog>
:href="`/sessions/${sessionAsEvent.id}/about`" />
</q-card-actions>
</q-card>
</q-dialog>
</div> </div>
</template> </template>
<script> <script setup>
import {mapActions, mapGetters, useStore} from 'vuex'; import { computed, inject, reactive, ref, watch } from 'vue';
import {mapFields} from 'vuex-map-fields'; import { useStore } from 'vuex';
import Loading from '../../components/Loading.vue'; import { useRoute } from 'vue-router';
import Toolbar from '../../components/Toolbar.vue'; import { useI18n } from 'vue-i18n';
import {computed, reactive, ref, toRefs, onMounted} from "vue"; import axios from 'axios';
import { useConfirm } from 'primevue/useconfirm';
import { useAbbreviatedDatetime } from '../../composables/formatDate.js';
//import '@fullcalendar/core/vdom' // solve problem with Vite import Loading from '../../components/Loading.vue';
import FullCalendar from '@fullcalendar/vue3'; import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid'; import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction'; import interactionPlugin from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid'; import timeGridPlugin from '@fullcalendar/timegrid';
import axios from "axios"; import CCalendarEventForm from '../../components/ccalendarevent/Form.vue';
import CCalendarEventForm from "../../components/ccalendarevent/Form.vue"; import CCalendarEventInfo from '../../components/ccalendarevent/Info';
import CreateMixin from "../../mixins/CreateMixin"; import { ENTRYPOINT } from '../../config/entrypoint';
import {useRoute, useRouter} from "vue-router";
import {useQuasar} from 'quasar';
import CCalendarEventInfo from "../../components/ccalendarevent/Info";
import {ENTRYPOINT} from "../../config/entrypoint";
import {useI18n} from "vue-i18n";
import allLocales from '@fullcalendar/core/locales-all'; import allLocales from '@fullcalendar/core/locales-all';
import toInteger from "lodash/toInteger"; import toInteger from 'lodash/toInteger';
const servicePrefix = 'CCalendarEvent'; import Dialog from 'primevue/dialog';
import Button from 'primevue/button';
export default {
name: 'CCalendarEventList',
components: {
CCalendarEventInfo,
CCalendarEventForm,
Loading,
Toolbar,
FullCalendar
},
mixins: [CreateMixin], const store = useStore();
//mixins: [ShowMixin], const route = useRoute();
setup() { const confirm = useConfirm();
const $q = useQuasar();
const calendarOptions = ref([]); const item = ref({});
const item = ref({}); const dialog = ref(false);
const dialog = ref(false); const dialogShow = ref(false);
const dialogShow = ref(false); const isEventEditable = ref(false);
const isEventEditable = ref(false);
const store = useStore(); const currentUser = computed(() => store.getters['security/getUser']);
const route = useRoute(); const { t, locale } = useI18n();
const currentUser = computed(() => store.getters['security/getUser']);
const { t, locale } = useI18n();
let currentEvent = null; let currentEvent = null;
const sessionState = reactive({ const sessionState = reactive({
sessionAsEvent: { sessionAsEvent: {
id: '', id: '',
title: '', title: '',
@ -133,69 +137,83 @@ export default {
extendedProps: {}, extendedProps: {},
}, },
showSessionDialog: false showSessionDialog: false
}); });
const cid = toInteger(route.query.cid); const cid = toInteger(route.query.cid);
const sid = toInteger(route.query.sid); const sid = toInteger(route.query.sid);
const gid = toInteger(route.query.gid); const gid = toInteger(route.query.gid);
if (cid) { if (cid) {
let courseIri = '/api/courses/' + cid; let courseIri = '/api/courses/' + cid;
store.dispatch('course/findCourse', { id: courseIri }); store.dispatch('course/findCourse', { id: courseIri });
} }
function onCreated(item) { async function getCalendarEvents ({ startStr, endStr }) {
//showNotification(t('Updated')); const calendarEvents = await axios.get(
reFetch(); ENTRYPOINT + 'c_calendar_events',
} {
async function getCalendarEvents({startStr, endStr}) {
const calendarEvents = await axios.get(ENTRYPOINT + 'c_calendar_events', {
params: { params: {
'startDate': startStr, 'startDate': startStr,
'endDate': endStr, 'endDate': endStr,
// 'startDate[after]': startStr, // 'startDate[after]': startStr,
// 'startDate[before]': startStr, // 'startDate[before]': startStr,
//'startDate[between]': startStr+'..'+endStr, //'startDate[between]': startStr+'..'+endStr,
'cid': cid, 'cid': cid,
'sid': sid, 'sid': sid,
'gid': gid, 'gid': gid,
} }
});
return calendarEvents.data['hydra:member'];
} }
);
async function getSessions({startStr, endStr}) { return calendarEvents.data['hydra:member'].map(event => ({
...event,
start: event.startDate,
end: event.endDate,
})
);
}
async function getSessions ({ startStr, endStr }) {
if ('true' !== window.config['agenda.personal_calendar_show_sessions_occupation']) { if ('true' !== window.config['agenda.personal_calendar_show_sessions_occupation']) {
return []; return [];
} }
const sessions = await axios.get(ENTRYPOINT + `users/${currentUser.value['id']}/sessions_rel_users`, { const sessions = await axios.get(
ENTRYPOINT + `session_rel_users`,
{
params: { params: {
'user': currentUser.value['@id'],
'displayStartDate[after]': startStr, 'displayStartDate[after]': startStr,
'displayEndDate[before]': endStr 'displayEndDate[before]': endStr,
'relationType': 3
} }
});
return sessions.data['hydra:member'];
} }
);
// @todo fix locale connection between fullcalendar + chamilo return sessions.data['hydra:member'].map(sessionRelUser => ({
...sessionRelUser.session,
title: sessionRelUser.session.name,
start: sessionRelUser.session.displayStartDate,
end: sessionRelUser.session.displayEndDate,
})
);
}
// @todo fix locale connection between fullcalendar + chamilo
if ('en_US' === locale.value) { if ('en_US' === locale.value) {
locale.value = 'en'; locale.value = 'en';
} }
if ('fr_FR' === locale.value) { if ('fr_FR' === locale.value) {
locale.value = 'fr'; locale.value = 'fr';
} }
if ('pl_PL' === locale.value) { if ('pl_PL' === locale.value) {
locale.value = 'pl'; locale.value = 'pl';
} }
calendarOptions.value = { const calendarOptions = ref({
plugins: [ plugins: [
dayGridPlugin, dayGridPlugin,
timeGridPlugin, timeGridPlugin,
@ -222,10 +240,10 @@ export default {
}, },
nowIndicator: true, nowIndicator: true,
initialView: 'dayGridMonth', initialView: 'dayGridMonth',
startParam: "startDate[after]", startParam: 'startDate[after]',
endParam: 'endDate[before]', endParam: 'endDate[before]',
selectable: true, selectable: true,
eventClick(EventClickArg) { eventClick (EventClickArg) {
let event = EventClickArg.event.toPlainObject(); let event = EventClickArg.event.toPlainObject();
if (event.extendedProps['@type'] && event.extendedProps['@type'] === 'Session') { if (event.extendedProps['@type'] && event.extendedProps['@type'] === 'Session') {
@ -238,7 +256,7 @@ export default {
currentEvent = event; currentEvent = event;
item.value = {...event.extendedProps}; item.value = { ...event.extendedProps };
item.value['title'] = event.title; item.value['title'] = event.title;
item.value['startDate'] = event.start; item.value['startDate'] = event.start;
@ -260,7 +278,7 @@ export default {
dialogShow.value = true; dialogShow.value = true;
}, },
dateClick(info) { dateClick (info) {
item.value = {}; item.value = {};
item.value['parentResourceNodeId'] = currentUser.value.resourceNode['id']; item.value['parentResourceNodeId'] = currentUser.value.resourceNode['id'];
item.value['collective'] = false; item.value['collective'] = false;
@ -270,7 +288,7 @@ export default {
dialog.value = true; dialog.value = true;
}, },
select(info) { select (info) {
item.value = {}; item.value = {};
item.value['parentResourceNodeId'] = currentUser.value.resourceNode['id']; item.value['parentResourceNodeId'] = currentUser.value.resourceNode['id'];
item.value['collective'] = false; item.value['collective'] = false;
@ -280,47 +298,31 @@ export default {
dialog.value = true; dialog.value = true;
}, },
events(info, successCallback, failureCallback) { events (info, successCallback) {
Promise Promise
.all([getCalendarEvents(info), getSessions(info)]) .all([getCalendarEvents(info), getSessions(info)])
.then(values => { .then(values => {
const calendarEvents = Array.prototype.slice.call(values[0]) const events = values[0].concat(values[1]);
.map(event => ({
...event,
start: event.startDate,
end: event.endDate,
}));
const sessionEvents = values[1].map(sessionRelUser => (
{
...sessionRelUser.session,
title: sessionRelUser.session.name,
start: sessionRelUser.session.displayStartDate,
end: sessionRelUser.session.displayEndDate,
}
));
const events = [...calendarEvents, ...sessionEvents];
successCallback(events); successCallback(events);
}); });
}, },
} });
const cal = ref(null); const cal = ref(null);
function reFetch() {
const calendarApi = cal.value.getApi(); function reFetch () {
calendarApi.refetchEvents(); cal.value.getApi().refetchEvents();
} }
function confirmDelete() { function confirmDelete () {
$q.dialog({ confirm.require({
title: 'Delete', message: t('Are you sure you want to delete this event?'),
message: 'Are you sure you want to delete this event?', header: t('Delete'),
persistent: true, icon: 'pi pi-exclamation-triangle',
cancel: true acceptClass: 'p-button-danger',
}) rejectClass: 'p-button-plain p-button-outlined',
.onOk(function () { accept () {
if (item.value['parentResourceNodeId'] === currentUser.value['id']) { if (item.value['parentResourceNodeId'] === currentUser.value['id']) {
store.dispatch('ccalendarevent/del', item.value); store.dispatch('ccalendarevent/del', item.value);
@ -332,7 +334,7 @@ export default {
.filter(resourceLinkFromEntity => resourceLinkFromEntity['user']['id'] === currentUser.value['id']); .filter(resourceLinkFromEntity => resourceLinkFromEntity['user']['id'] === currentUser.value['id']);
if (filteredLinks.length > 0) { if (filteredLinks.length > 0) {
store.dispatch('resourcelink/del', {'@id': `/api/resource_links/${filteredLinks[0]['id']}`}) store.dispatch('resourcelink/del', { '@id': `/api/resource_links/${filteredLinks[0]['id']}` });
currentEvent.remove(); currentEvent.remove();
dialogShow.value = false; dialogShow.value = false;
@ -340,60 +342,60 @@ export default {
reFetch(); reFetch();
} }
} }
},
}); });
}
const isLoading = computed(() => store.getters['ccalendarevent/isLoading']);
const createForm = ref(null);
function onCreateEventForm () {
if (createForm.value.v$.$invalid) {
return;
} }
return { let itemModel = createForm.value.v$.item.$model;
cal,
onCreated,
calendarOptions,
dialog,
item,
dialogShow,
reFetch,
isEventEditable,
confirmDelete,
...toRefs(sessionState),
};
},
computed: {
...mapFields('ccalendarevent', {
isLoading: 'isLoading',
created: 'created',
violations: 'violations',
}),
...mapGetters('ccalendarevent', ['find']),
...mapGetters({
'isAuthenticated': 'security/isAuthenticated',
'isAdmin': 'security/isAdmin',
'isCurrentTeacher': 'security/isCurrentTeacher',
}),
},
methods: {
onCreateEventForm() {
const createForm = this.$refs.createForm;
createForm.v$.$touch();
if (!createForm.v$.$invalid) {
let itemModel = createForm.v$.item.$model;
if (itemModel['@id']) { if (itemModel['@id']) {
this.updateItem(itemModel); store.dispatch('ccalendarevent/update', itemModel);
} else { } else {
this.create(itemModel); store.dispatch('ccalendarevent/create', itemModel);
} }
this.reFetch(); dialog.value = false;
this.dialog = false; }
const flashMessageList = inject('flashMessageList');
watch(
() => store.state.ccalendarevent.created,
(created) => {
flashMessageList.value.push({
severity: 'success',
detail: t(
'{resource} created',
{ 'resource': created.resourceNode.title }
),
});
reFetch();
} }
}, );
...mapActions('ccalendarevent', {
create: 'create', watch(
deleteItem: 'del', () => store.state.ccalendarevent.updated,
reset: 'resetShow', (updated) => {
retrieve: 'loadWithQuery', flashMessageList.value.push({
updateItem: 'update' severity: 'success',
}), detail: t(
}, '{resource} updated',
servicePrefix { 'resource': updated.resourceNode.title }
}; ),
});
reFetch();
}
);
</script> </script>

Write Preview
Loading…
Cancel
Save