chill-bundles/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Invite/Answer.vue

<template>
  <div class="btn-group" role="group">
    <button
      id="btnGroupDrop1"
      type="button"
      class="btn btn-misc dropdown-toggle"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      <template v-if="status === Statuses.PENDING">
        <span class="fa fa-hourglass"></span> {{ $t("Give_an_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 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("Set_pending") }}</a
        >
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";

const ACCEPTED = "accepted";
const DECLINED = "declined";
const PENDING = "pending";
const TENTATIVELY_ACCEPTED = "tentative";

const i18n = {
  messages: {
    fr: {
      Give_an_answer: "Répondre",
      Accepted: "Accepté",
      Declined: "Refusé",
      Tentative: "Accepté provisoirement",
      Accept: "Accepter",
      Decline: "Refuser",
      Tentatively_accept: "Accepter provisoirement",
      Set_pending: "Ne pas répondre",
    },
  },
};

export default defineComponent({
  name: "Answer",
  i18n,
  props: {
    calendarId: { type: Number, required: true },
    status: {
      type: String as PropType<
        "accepted" | "declined" | "pending" | "tentative"
      >,
      required: true,
    },
  },
  emits: {
    statusChanged(payload: "accepted" | "declined" | "pending" | "tentative") {
      return true;
    },
  },
  data() {
    return {
      Statuses: {
        ACCEPTED,
        DECLINED,
        PENDING,
        TENTATIVELY_ACCEPTED,
      },
    };
  },
  methods: {
    changeStatus: function (
      newStatus: "accepted" | "declined" | "pending" | "tentative",
    ) {
      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);
        });
    },
  },
});
</script>

<style scoped></style>