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

module in ts to give an answer to calendar invite

Browse Source
This commit is contained in:
Julien Fastré 2022-05-31 22:45:21 +02:00
parent 840c7e1084
commit 76b49d22e7
3 changed files with 63 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Bundle/ChillCalendarBundle/Controller/InviteApiController.php
View File

@ -57,7 +57,7 @@ class InviteApiController
throw new AccessDeniedHttpException('not allowed to answer on this invitation');
}
if (!in_array($answer, Invite::STATUSES, true) || Invite::PENDING === $answer) {
if (!in_array($answer, Invite::STATUSES, true)) {
throw new BadRequestHttpException('answer not valid');
}

13
src/Bundle/ChillCalendarBundle/Resources/public/module/Invite/answer.js
View File

@ -14,7 +14,18 @@ document.addEventListener('DOMContentLoaded', function (e) {
components: {
Answer,
},
template: '<answer :calendarId="14" :status="defined"></answer>',
data() {
return {
status: el.dataset.status,
calendarId: Number.parseInt(el.dataset.calendarId),
}
},
template: '<answer :calendarId="calendarId" :status="status" @statusChanged="onStatusChanged"></answer>',
methods: {
onStatusChanged: function(newStatus) {
this.$data.status = newStatus;
},
}
});
app.use(i18n).mount(el);

61
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Invite/Answer.vue
View File

@ -1,31 +1,70 @@
<template>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
{{ $t('answer')}}
<template v-if="status === Statuses.PENDING">
<span class="fa fa-hourglass"></span>{{ $t('answer')}}
</template>
<template v-else-if="status === Statuses.ACCEPTED">
<span class="fa fa-check"></span>{{ $t('accepted')}}
</template>
<template v-else-if="status === Statuses.DECLINED">
<span class="fa fa-times"></span>{{ $t('declined')}}
</template>
<template v-else-if="status === Statuses.TENTATIVELY_ACCEPTED">
<span class="fa fa-question"></span>{{ $t('tentative')}}
</template>
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#"><i class="fa fa-check" aria-hidden="true"></i> {{ $t('accept') }}</a></li>
<li><a class="dropdown-item" href="#"><i class="fa fa-times" aria-hidden="true"></i> {{ $t('decline') }}</a></li>
<li><a class="dropdown-item" href="#"><i class="fa fa-question"></i> {{ $t('tentatively_accept') }}</a></li>
<li><a class="dropdown-item" href="#"><i class="fa fa-hourglass-o"></i> {{ $t('pending') }}</a></li>
<li v-if="status !== Statuses.ACCEPTED"><a class="dropdown-item" @click="changeStatus(Statuses.ACCEPTED)"><i class="fa fa-check" aria-hidden="true"></i> {{ $t('accept') }}</a></li>
<li v-if="status !== Statuses.DECLINED"><a class="dropdown-item" @click="changeStatus(Statuses.DECLINED)"><i class="fa fa-times" aria-hidden="true"></i> {{ $t('decline') }}</a></li>
<li v-if="status !== Statuses.TENTATIVELY_ACCEPTED"><a class="dropdown-item" @click="changeStatus(Statuses.TENTATIVELY_ACCEPTED)"><i class="fa fa-question"></i> {{ $t('tentatively_accept') }}</a></li>
<li v-if="status !== Statuses.PENDING"><a class="dropdown-item" @click="changeStatus(Statuses.PENDING)"><i class="fa fa-hourglass-o"></i> {{ $t('pending') }}</a></li>
</ul>
</div>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
import {defineComponent, PropType} from 'vue';
interface Props {
calendarId: number,
status: string
}
enum AnswerStatus {
ACCEPTED = 'accepted',
DECLINED = 'declined',
PENDING = 'pending',
TENTATIVELY_ACCEPTED = 'tentative',
};
export default defineComponent({
name: "Answer",
props: {
calendarId: { type: Number, required: true},
status: {type: String, required: true},
status: {type: Object as PropType<AnswerStatus>, required: true},
},
emits: {
statusChanged(payload: AnswerStatus) {
return true;
}
},
data() {
return {
Statuses: AnswerStatus,
}
},
methods: {
changeStatus: function (newStatus: AnswerStatus) {
console.log('changeStatus', newStatus);
const url = `/api/1.0/calendar/calendar/${this.$props.calendarId}/answer/${newStatus}.json`;
window.fetch(url, {
method: 'POST',
}).then((r: Response) => {
if (!r.ok) {
console.error('could not confirm answer', newStatus);
return;
}
console.log('answer sent', newStatus);
this.$emit('statusChanged', newStatus);
});
},
}
})