module in ts to give an answer to calendar invite

This commit is contained in:
2022-05-31 22:45:21 +02:00
parent 840c7e1084
commit 76b49d22e7
3 changed files with 63 additions and 13 deletions

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);
});
},
}
})