mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
module in ts to give an answer to calendar invite
This commit is contained in:
parent
840c7e1084
commit
76b49d22e7
@ -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');
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
});
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user