Add base template

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

@@ -1,38 +1,42 @@
-
 <template>
-    <div>
-        <p>{{ ticket.externalRef }}</p>
-        <p>{{ ticket.currentMotive }}</p>
+    <banner-component :ticket="ticket" />
+    <div class="container-xxl p-2">
+        <ticket-selector-component :tickets="[]" />
+        <ticket-history-list-component :history="ticket.history" />
+        <motive-list-component :motives="motives" />
     </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>
-
+    <action-toolbar-component />
 </template>
 
 <script lang="ts">
 
-    import { computed, defineComponent, inject, onMounted } from 'vue';
-    import { useStore } from 'vuex';
+import { computed, defineComponent, inject, onMounted, ref } from 'vue';
+import { useStore } from 'vuex';
 
 
-    // Types
-    import { Person } from '../../../../../../ChillPersonBundle/Resources/public/types';
-    import { Motive, Ticket } from '../../types';
+// Types
+import { Motive, Ticket } from '../../types';
 
+// Components
+import TicketSelectorComponent from './components/TicketSelectorComponent.vue';
+import TicketHistoryListComponent from './components/TicketHistoryListComponent.vue';
+import ActionToolbarComponent from './components/ActionToolbarComponent.vue';
+import BannerComponent from './components/BannerComponent.vue';
+import MotiveListComponent from './components/MotiveListComponent.vue';
 
-    export default defineComponent({
+export default defineComponent({
     name: 'App',
-
+    components: {
+        BannerComponent,
+        TicketSelectorComponent,
+        TicketHistoryListComponent,
+        MotiveListComponent,
+        ActionToolbarComponent
+    },
     setup() {
         const store = useStore();
         const toast = inject('toast') as any;
+        const headline = ref({} as HTMLHeadingElement);
 
         store.commit('setTicket', JSON.parse(window.initialTicket) as Ticket);
 
@@ -40,6 +44,8 @@
         const ticket = computed(() => store.getters.getTicket as Ticket)
 
         onMounted(() => {
+            console.log(headline.value.textContent);
+
             try {
                 store.dispatch('fetchMotives')
             } catch (error) {
@@ -48,12 +54,12 @@
         });
 
         return {
+            headline,
             motives,
             ticket,
         };
     },
-    });
+});
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="sticky-bottom">
+        <div class="footer-ticket-details"><button class="btn btn-chill-green text-white">Enregistrer</button></div>
+        <div class="footer-ticket-main">
+            <ul class="nav nav-tabs justify-content-end">
+
+                <li class="nav-item">
+                    <button type="button" class="m-2 btn btn-light">
+                        <i class="fa fa-plus"></i>
+                        Commentaire
+                    </button>
+                </li>
+                <li class="nav-item">
+                    <button type="button" class="m-2 btn btn-light">
+                        <i class="fa fa-paper-plane"></i>
+                        Transfert
+                    </button>
+                </li>
+                <li class="nav-item">
+                    <button type="button" class="m-2 btn btn-light">
+                        <i class="fa fa-paint-brush"></i>
+                        Motif
+                    </button>
+                </li>
+                <li class="nav-item">
+                    <button type="button" class="m-2 btn btn-light">
+                        <i class="fa fa-bolt"></i>
+                        Fermer
+                    </button>
+                </li>
+            </ul>
+        </div>
+
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from 'vuex';
+
+
+export default defineComponent({
+    name: 'ActionToolbarComponent',
+    setup(props, ctx) {
+        const store = useStore();
+    },
+});
+</script>
+<style lang="scss" scoped>
+div.sticky-bottom {
+    div.footer-ticket-main {
+        background: none repeat scroll 0 0 #CABB9F;
+    }
+
+    div.footer-ticket-details {
+        background: none repeat scroll 0 0 #EFE2CA;
+    }
+}
+</style>

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="banner banner-ticket ">
+        <div id="header-ticket-main" class="header-name">
+            <div class="container-xxl text-primary">
+                <div class="row">
+                    <div class="col-md-6 ps-md-5 ps-xxl-0 ">
+                        <h2>
+                            # {{ ticket.externalRef }}
+                        </h2>
+                        <h1>
+                            {{ ticket.currentMotive ? ticket.currentMotive.label.fr : 'Aucun motif' }}
+                        </h1>
+                    </div>
+
+                    <div class="col-md-6">
+                        <div class="float-end">
+                            <h1><span class="badge text-bg-chill-green text-white">Ouvert</span></h1>
+                            <h3 class="fst-italic">Depuis</h3>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="header-ticket-details" class="header-details">
+            <div class="container-xxl">
+                <div class="row justify-content-between">
+                    <div class="col-md-4 col-sm-12">
+                        <h3 class="text-primary">Patient concerné</h3>
+                        <h2><span class="badge text-bg-light" v-for="person in ticket.currentPersons"> {{ person.text
+                                }}</span></h2>
+                    </div>
+                    <div class="col-md-4 col-sm-12">
+                        <h3 class="text-primary">Appelant</h3>
+                        <h2><span class="badge text-bg-light" v-for="person in ticket.currentPersons"> {{ person.text
+                                }}</span></h2>
+
+                    </div>
+                    <div class="col-md-4 col-sm-12">
+                        <h3 class="text-primary">Intervenant</h3>
+                        <h2><span class="badge text-bg-light" v-for="person in ticket.currentPersons"> {{ person.text
+                                }}</span></h2>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import { Ticket } from '../../../types';
+
+export default defineComponent({
+    name: 'BannerComponent',
+    props: {
+        ticket: {
+            type: Object as PropType<Ticket>,
+            required: true,
+        },
+    },
+    setup() {
+        return {}
+    }
+});
+</script>

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveListComponent.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="card my-2 bg-light" v-for="motive in motives" :key="motive.id">
+        <div class="card-header">
+            <span class="fw-bold fst-italic">
+
+            </span>
+            <span class="badge bg-white text-black mx-1">{{motive.active}}</span>
+        </div>
+        <div class="card-body row fst-italic">
+            <div class="col-12">
+                <i class="fa fa-comment" style="min-width: 16px;"></i>
+                <span class="mx-1">
+                  {{ motive.label.fr }}
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+
+import {  PropType, defineComponent } from 'vue';
+
+
+
+// Types
+import { Motive } from '../../../types';
+
+export default defineComponent({
+    name: 'MotiveListComponent',
+    props: {
+        motives: {
+            type: Object as PropType<Motive[]>,
+            required: true,
+        },
+    },
+    setup() {
+        return {}
+    }
+});
+</script>
+
+<style lang="scss" scoped></style>

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryListComponent.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="card my-2 bg-light" v-for="history_line in history" :key="history_line.data.id">
+        <div class="card-header">
+            <span class="fw-bold fst-italic">
+                {{ formatDate(history_line.at) }}
+            </span>
+            <span class="badge bg-white text-black mx-1">{{ history_line.by.username }}</span>
+        </div>
+        <div class="card-body row fst-italic" v-if="history_line.event_type == 'add_person'">
+            <div class="col-12">
+                <i class="fa fa-bolt" style="min-width: 16px;"></i>
+                <span class="mx-1">
+                    {{ $t('history.person',{ text: history_line.data.person.text }) }}
+                </span>
+            </div>
+            <div class="col-12">
+                <i class="fa fa-eyedropper"></i>
+                <span class="mx-1">
+                    {{ $t('history.user',{ username: history_line.by.username }) }}
+                </span>
+            </div>
+
+            <div class="col-12">
+                <i class="fa fa-paint-brush"></i>
+                <span class="mx-1">
+                    {{ $t('history.motive',{ text: history_line.data.person.text }) }}
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+
+import { PropType, defineComponent } from 'vue';
+import { DateTime } from '../../../../../../../ChillMainBundle/Resources/public/types';
+import { Ticket } from '../../../types';
+
+export default defineComponent({
+    name: 'TicketHistoryListComponent',
+    props: {
+        history: {
+            type: Array as PropType<Ticket["history"]>,
+            required: true,
+        },
+    },
+
+    setup() {
+
+        function formatDate(d: DateTime) {
+            const date = new Date(d.datetime);
+            const month = date.toLocaleString('default', { month: 'long' });
+            return `${date.getDate()} ${month} ${date.getFullYear()}, ${date.getHours()}:${date.getMinutes()}`
+        }
+
+        return { formatDate }
+    }
+});
+</script>
+
+<style lang="scss" scoped></style>

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketSelectorComponent.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="btn-group">
+        <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+            {{ $t('ticket.previous_tickets') }}
+            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
+                {{ tickets.length }}
+                <span class="visually-hidden">unread messages</span>
+            </span>
+
+        </button>
+        <ul class="dropdown-menu">
+            <li><button class="dropdown-item" type="button">Action</button></li>
+            <li><button class="dropdown-item" type="button">Another action</button></li>
+            <li><button class="dropdown-item" type="button">Something else here</button></li>
+        </ul>
+    </div>
+</template>
+
+<script lang="ts">
+
+import { PropType, defineComponent } from 'vue';
+
+
+
+// Types
+import { Ticket } from '../../../types';
+
+export default defineComponent({
+    name: 'TicketSelectorComponent',
+    props: {
+        tickets: {
+            type: Object as PropType<Ticket[]>,
+            required: true,
+        },
+    },
+    setup() {
+        return {}
+    }
+});
+</script>
+
+<style lang="scss" scoped></style>

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/i18n/messages.ts

@@ -1,5 +1,12 @@
 export const messages = {
     fr: {
-        hello: "Bonjour {name}"
-    }
+        ticket: {
+            previous_tickets: "Précédents tickets",
+        },
+        history: {
+            person: "Ouverture par appel téléphonique de {text}",
+            user: "Prise en charge par {username}",
+            motive: "Motif indiqué: {motive}",
+        },
+    },
 };

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

@@ -2,12 +2,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 { store } from "./store";
+import { messages } from './i18n/messages';
 
 declare global {
     interface Window {

src/Bundle/ChillTicketBundle/src/Resources/views/layout.html.twig

@@ -13,9 +13,5 @@
 {% endblock %}
 
 {% block wrapping_content %}
-    <div class="row">
-        <div class="col-md-8 col-sm-12">
     {% block content %}{% endblock %}
-        </div>
-    </div>
 {% endblock %}