Mise en œuvre de la fonctionnalité de remplacement du motif du ticket

La validation introduit plusieurs fonctionnalités liées à la gestion du motif du ticket dans le bundle Chill-TicketBundle :
- Ajoute la possibilité de remplacer le motif d'un ticket par un nouveau.
- Fournit des fonctionnalités de gestion de l'historique des motifs du ticket.
- Implémente les modifications pertinentes au niveau du contrôleur, du gestionnaire d'actions et de l'entité.
- Intègre de nouvelles points d'API et met à jour le fichier de spécification de l'API pour la nouvelle fonctionnalité.
- Inclut des tests pour garantir le bon fonctionnement de la nouvelle fonctionnalité.

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue

@@ -1,11 +1,50 @@
-<script setup lang="ts">
-
-</script>
 
 <template>
-<p>{{ $t('hello', {'name': 'Boris'})}}</p>
+    <div>
+        <p>{{ ticket.externalRef }}</p>
+        <p>{{ ticket.currentMotive }}</p>
+    </div>
+
+    <div v-for="person in ticket.currentPersons as Person[]" :key="person.id">
+        <p>{{ person.firstName }}</p>
+        <p>{{ person.lastName }}</p>
+    </div>
+    <div v-for="ticket_history_line in ticket.history">
+        <p>{{ ticket_history_line.event_type}}</p>
+        <p>{{ ticket_history_line.data}}</p>
+    </div>
+
 </template>
 
-<style scoped lang="scss">
+<script lang="ts">
 
+    import { computed, defineComponent, onMounted } from 'vue';
+    import { useStore } from 'vuex';
+
+    // Types
+    import { Person } from '../../../../../../ChillPersonBundle/Resources/public/types';
+    import { Motive, Ticket } from '../../types';
+
+
+    export default defineComponent({
+        name: 'App',
+
+        setup() {
+            const store = useStore();
+            const ticket = JSON.parse(window.initialTicket) as Ticket;
+            const motives = computed(() => store.getters.getMotives as Motive[])
+
+            onMounted(() => {
+                store.dispatch('fetchMotives');
+            });
+
+            return {
+                motives,
+                ticket,
+            };
+        },
+    });
+</script>
+
+<style lang="scss" scoped>
 </style>

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts

@@ -1,10 +1,13 @@
+import App from './App.vue';
 import {createApp} from "vue";
+
 import { _createI18n } from "../../../../../../ChillMainBundle/Resources/public/vuejs/_js/i18n";
+import {messages} from "./i18n/messages";
+
 import VueToast from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';
-import {messages} from "./i18n/messages";
-import App from './App.vue';
-import {Ticket} from "../../types";
+
+import { store } from "./store";
 
 declare global {
     interface Window {
@@ -12,25 +15,12 @@ declare global {
     }
 }
 
-const i18n = _createI18n(messages)
-
-// the initial ticket is serialized there:
-console.log(window.initialTicket);
-// to have js object
-const ticket = JSON.parse(window.initialTicket) as Ticket;
-console.log("the ticket for this app (at page loading)", ticket);
-
-for (const eh of ticket.history) {
-    if (eh.event_type === 'add_person') {
-        console.log("add_person", eh.data.person);
-    } else if (eh.event_type === 'set_motive') {
-        console.log("set_motive", eh.data.motive);
-    }
-}
+const i18n = _createI18n(messages);
 
 const _app = createApp({
         template: '<app></app>',
     })
+    .use(store)
     .use(i18n)
     .use(VueToast)
     .component('app', App)

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/index.ts

@@ -0,0 +1,12 @@
+import { createStore } from "vuex";
+import { State as MotiveStates, moduleMotive } from "./modules/motive";
+
+export type RootState = {
+    motive: MotiveStates;
+  };
+
+export const store = createStore({
+    modules: {
+        motive:moduleMotive,
+      }
+});

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/motive.ts

@@ -0,0 +1,47 @@
+import { fetchResults, makeFetch } from "../../../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
+
+import { Module } from "vuex";
+import { RootState } from "..";
+
+import { Motive } from "../../../../types";
+
+export interface State {
+    motives: Array<Motive>;
+}
+
+export const moduleMotive: Module<State, RootState> ={
+    state: () => ({
+        motives: [],
+    }),
+    getters: {
+        getMotives(state) {
+            return state.motives;
+          }
+    },
+    mutations: {
+        setMotives(state, motives) {
+            state.motives = motives;
+        }
+    },
+    actions: {
+        async fetchMotives({ commit }) {
+            try{
+                const results = await fetchResults("/api/1.0/ticket/motive.json") as Motive[];
+                commit("setMotives", results);
+            }
+            catch (e) {
+                console.error("Error while fetching motives", e);
+            }
+        },
+        async createMotive({ commit }, datas: {currentMotiveId: number, motive: Motive}) {
+            const { currentMotiveId, motive } = datas;
+            try {
+                const result = await makeFetch("POST", `/api/1.0/ticket/${currentMotiveId}/motive/set`, motive);
+                commit("setMotives", result);;
+            }
+            catch (e) {
+                console.error("Error while creating motive", e);
+            }
+        }
+    },
+};