From 800a952532b3c87a9246a1f6f900c879f90be77a Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@gmail.com>
Date: Tue, 23 Apr 2024 20:41:32 +0200
Subject: [PATCH] Add base template

---
 .../Resources/public/vuejs/TicketApp/App.vue  | 90 ++++++++++---------
 .../components/ActionToolbarComponent.vue     | 59 ++++++++++++
 .../TicketApp/components/BannerComponent.vue  | 65 ++++++++++++++
 .../components/MotiveListComponent.vue        | 43 +++++++++
 .../components/TicketHistoryListComponent.vue | 61 +++++++++++++
 .../components/TicketSelectorComponent.vue    | 42 +++++++++
 .../public/vuejs/TicketApp/i18n/messages.ts   | 11 ++-
 .../Resources/public/vuejs/TicketApp/index.ts |  3 +-
 .../src/Resources/views/layout.html.twig      |  6 +-
 9 files changed, 330 insertions(+), 50 deletions(-)
 create mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
 create mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue
 create mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveListComponent.vue
 create mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryListComponent.vue
 create mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketSelectorComponent.vue

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 b6e28952e..cfe0b31bc 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
@@ -1,59 +1,65 @@
-
 <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({
-        name: 'App',
+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);
 
-        setup() {
-            const store = useStore();
-            const toast = inject('toast') as any;
+        store.commit('setTicket', JSON.parse(window.initialTicket) as Ticket);
 
-            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)
 
-            const motives = computed(() => store.getters.getMotives as Motive[])
-            const ticket = computed(() => store.getters.getTicket as Ticket)
+        onMounted(() => {
+            console.log(headline.value.textContent);
 
-            onMounted(() => {
-                try {
-                    store.dispatch('fetchMotives')
-                } catch (error) {
-                    toast.error(error)
-                };
-            });
-
-            return {
-                motives,
-                ticket,
+            try {
+                store.dispatch('fetchMotives')
+            } catch (error) {
+                toast.error(error)
             };
-        },
-    });
+        });
+
+        return {
+            headline,
+            motives,
+            ticket,
+        };
+    },
+});
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
new file mode 100644
index 000000000..96741bb34
--- /dev/null
+++ b/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>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue
new file mode 100644
index 000000000..31c2f9f63
--- /dev/null
+++ b/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>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveListComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveListComponent.vue
new file mode 100644
index 000000000..12ae6705b
--- /dev/null
+++ b/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>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryListComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryListComponent.vue
new file mode 100644
index 000000000..42f5b071b
--- /dev/null
+++ b/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>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketSelectorComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketSelectorComponent.vue
new file mode 100644
index 000000000..7d1326513
--- /dev/null
+++ b/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>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/i18n/messages.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/i18n/messages.ts
index 4065765f3..9bc5d751c 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/i18n/messages.ts
+++ b/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}",
+        },
+    },
 };
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 c63968469..e6f9011b0 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts
+++ b/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 {
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/views/layout.html.twig b/src/Bundle/ChillTicketBundle/src/Resources/views/layout.html.twig
index 7b397a0e5..8936d1c31 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/views/layout.html.twig
+++ b/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>
+    {% block content %}{% endblock %}
 {% endblock %}