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

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'); 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'); 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: { components: {
Answer, 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); app.use(i18n).mount(el);

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

@ -1,31 +1,70 @@
<template> <template>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <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> </button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1"> <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 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><a class="dropdown-item" href="#"><i class="fa fa-times" aria-hidden="true"></i> {{ $t('decline') }}</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><a class="dropdown-item" href="#"><i class="fa fa-question"></i> {{ $t('tentatively_accept') }}</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><a class="dropdown-item" href="#"><i class="fa fa-hourglass-o"></i> {{ $t('pending') }}</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> </ul>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import {defineComponent} from 'vue'; import {defineComponent, PropType} from 'vue';
interface Props { enum AnswerStatus {
calendarId: number, ACCEPTED = 'accepted',
status: string DECLINED = 'declined',
} PENDING = 'pending',
TENTATIVELY_ACCEPTED = 'tentative',
};
export default defineComponent({ export default defineComponent({
name: "Answer", name: "Answer",
props: { props: {
calendarId: { type: Number, required: true}, 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);
});
},
} }
}) })