Add ticket to storeand catch error with toast in component

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

@@ -18,9 +18,10 @@
 
 <script lang="ts">
 
-    import { computed, defineComponent, onMounted } from 'vue';
+    import { computed, defineComponent, inject, onMounted } from 'vue';
     import { useStore } from 'vuex';
 
+
     // Types
     import { Person } from '../../../../../../ChillPersonBundle/Resources/public/types';
     import { Motive, Ticket } from '../../types';
@@ -31,11 +32,19 @@
 
         setup() {
             const store = useStore();
-            const ticket = JSON.parse(window.initialTicket) as Ticket;
+            const toast = inject('toast') as any;
+
+            store.commit('setTicket', JSON.parse(window.initialTicket) as Ticket);
+
             const motives = computed(() => store.getters.getMotives as Motive[])
+            const ticket = computed(() => store.getters.getTicket as Ticket)
 
             onMounted(() => {
-                store.dispatch('fetchMotives');
+                try {
+                    store.dispatch('fetchMotives')
+                } catch (error) {
+                    toast.error(error)
+                };
             });
 
             return {

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

@@ -19,10 +19,14 @@ const i18n = _createI18n(messages);
 
 const _app = createApp({
         template: '<app></app>',
-    })
+    });
+
+    _app
     .use(store)
     .use(i18n)
-    .use(VueToast)
+    // Cant use this.$toast in components in composition API so we need to provide it
+    // Fix: with vue-toast-notification@^3
+    .use(VueToast).provide('toast', _app.config.globalProperties.$toast)
     .component('app', App)
     .mount('#ticketRoot');
 

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

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

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

@@ -11,7 +11,7 @@ export interface State {
 
 export const moduleMotive: Module<State, RootState> ={
     state: () => ({
-        motives: [],
+        motives: [] as Array<Motive>,
     }),
     getters: {
         getMotives(state) {
@@ -25,23 +25,15 @@ export const moduleMotive: Module<State, RootState> ={
     },
     actions: {
         async fetchMotives({ commit }) {
-            try{
+            const results = await fetchResults("/api/1.0/ticket/motive.json") as Motive[];
-                const results = await fetchResults("/api/1.0/ticket/motive.json") as Motive[];
+            commit("setMotives", results);
-                commit("setMotives", results);
+            return 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);
-                const result = await makeFetch("POST", `/api/1.0/ticket/${currentMotiveId}/motive/set`, motive);
+            commit("setMotives", result);
-                commit("setMotives", result);;
+            return result;
-            }
-            catch (e) {
-                console.error("Error while creating motive", e);
-            }
         }
     },
 };

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

@@ -0,0 +1,28 @@
+import { fetchResults, makeFetch } from "../../../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
+
+import { Module } from "vuex";
+import { RootState } from "..";
+
+import { Ticket } from "../../../../types";
+
+export interface State {
+    ticket: Ticket;
+}
+
+export const moduleTicket: Module<State, RootState> ={
+    state: () => ({
+        ticket: {} as Ticket,
+    }),
+    getters: {
+        getTicket(state) {
+            return state.ticket;
+          }
+    },
+    mutations: {
+        setTicket(state, ticket) {
+            state.ticket = ticket;
+        }
+    },
+    actions: {
+    },
+};