Merge branch 'ticket-app-create-store' into 'ticket-app-master'

Create vuex store

See merge request Chill-Projet/chill-bundles!678

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

@@ -1,11 +1,59 @@
-<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, inject, 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 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(() => {
+                try {
+                    store.dispatch('fetchMotives')
+                } catch (error) {
+                    toast.error(error)
+                };
+            });
+
+            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,27 +15,18 @@ 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>',
-    })
+    });
+
+    _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

@@ -0,0 +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

@@ -0,0 +1,39 @@
+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: [] as Array<Motive>,
+    }),
+    getters: {
+        getMotives(state) {
+            return state.motives;
+          }
+    },
+    mutations: {
+        setMotives(state, motives) {
+            state.motives = motives;
+        }
+    },
+    actions: {
+        async fetchMotives({ commit }) {
+            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;
+            const result = await makeFetch("POST", `/api/1.0/ticket/${currentMotiveId}/motive/set`, motive);
+            commit("setMotives", result);
+            return result;
+        }
+    },
+};

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: {
+    },
+};