Refactor Vue components: streamline Answer.vue with setup syntax and remove redundant i18n object; update CalendarActive.vue template for clarity.

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue

@@ -7,7 +7,7 @@
         <i v-else-if="invite.status === 'declined'" class="fa fa-times" />
         <i v-else-if="invite.status === 'pending'" class="fa fa-question-o" />
         <i v-else-if="invite.status === 'tentative'" class="fa fa-question" />
-        <span v-else="">{{ invite.status }}</span>
+        <span v-else>{{ invite.status }}</span>
       </template>
     </span>
     <span class="form-check-inline form-switch">
@@ -42,8 +42,6 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-
 export default {
   name: "CalendarActive",
   props: {

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/i18n.js

@@ -24,6 +24,14 @@ const appMessages = {
     list_three_days: "Liste 3 jours",
     current_selected: "Rendez-vous fixé",
     main_user: "Utilisateur principal",
+    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",
   },
 };
 

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Invite/Answer.vue

@@ -47,68 +47,38 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from "vue";
+<script lang="ts" setup>
 import { AnswerStatus } from "../../types";
 
-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",
-    },
-  },
+const props = defineProps<{
+  calendarId: number;
+  status: AnswerStatus;
+}>();
+
+const emit =
+  defineEmits<(e: "statusChanged", newStatus: AnswerStatus) => void>();
+
+const Statuses = {
+  ACCEPTED: AnswerStatus.ACCEPTED,
+  DECLINED: AnswerStatus.DECLINED,
+  PENDING: AnswerStatus.PENDING,
+  TENTATIVELY_ACCEPTED: AnswerStatus.TENTATIVE,
 };
 
-export default defineComponent({
-  name: "Answer",
-  i18n,
-  props: {
-    calendarId: { type: Number, required: true },
-    status: {
-      type: String as PropType<AnswerStatus>,
-      required: true,
-    },
-  },
-  emits: {
-    statusChanged(payload: AnswerStatus) {
-      return payload;
-    },
-  },
-  data() {
-    return {
-      Statuses: {
-        ACCEPTED: AnswerStatus.ACCEPTED,
-        DECLINED: AnswerStatus.DECLINED,
-        PENDING: AnswerStatus.PENDING,
-        TENTATIVELY_ACCEPTED: AnswerStatus.TENTATIVE,
-      },
-    };
-  },
-
-  methods: {
-    changeStatus: function (newStatus: AnswerStatus) {
-      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;
-          }
-          this.$emit("statusChanged", newStatus);
-        });
-    },
-  },
-});
+function changeStatus(newStatus: AnswerStatus) {
+  const url = `/api/1.0/calendar/calendar/${props.calendarId}/answer/${newStatus}.json`;
+  window
+    .fetch(url, {
+      method: "POST",
+    })
+    .then((r: Response) => {
+      if (!r.ok) {
+        console.error("could not confirm answer", newStatus);
+        return;
+      }
+      emit("statusChanged", newStatus);
+    });
+}
 </script>
 
 <style scoped></style>