From baab8e94ce13fa86eaec4fbb2fd05ee806bec132 Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@gmail.com>
Date: Fri, 19 Apr 2024 17:46:12 +0200
Subject: [PATCH] Add ticket to storeand  catch error with toast in component

---
 .../Resources/public/vuejs/TicketApp/App.vue  | 15 ++++++++--
 .../Resources/public/vuejs/TicketApp/index.ts |  8 ++++--
 .../public/vuejs/TicketApp/store/index.ts     |  3 ++
 .../vuejs/TicketApp/store/modules/motive.ts   | 22 +++++----------
 .../vuejs/TicketApp/store/modules/ticket.ts   | 28 +++++++++++++++++++
 5 files changed, 56 insertions(+), 20 deletions(-)
 create mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/ticket.ts

diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
index 19989d16f..b6e28952e 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
+++ b/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 {
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts
index 182925b92..c63968469 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts
+++ b/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');
 
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/index.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/index.ts
index 013a6d68a..b26eaa611 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/index.ts
+++ b/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,
       }
 });
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/motive.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/motive.ts
index 85aa0e36c..88d6091ba 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/motive.ts
+++ b/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[];
-                commit("setMotives", results);
-            }
-            catch (e) {
-                console.error("Error while fetching motives", e);
-            }
+            const results = await fetchResults("/api/1.0/ticket/motive.json") as Motive[];
+            commit("setMotives", results);
+            return results;
         },
         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);
-            }
+            const result = await makeFetch("POST", `/api/1.0/ticket/${currentMotiveId}/motive/set`, motive);
+            commit("setMotives", result);
+            return result;
         }
     },
 };
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/ticket.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/ticket.ts
new file mode 100644
index 000000000..4e3a55762
--- /dev/null
+++ b/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: {
+    },
+};