From 8de37a9ef3298dfeef10c9daa4c436c797889944 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Thu, 11 Apr 2024 16:45:22 +0200
Subject: [PATCH 01/28] Fix import of postal codes. URL changed + names of keys

---
 .../Service/Import/PostalCodeFRFromOpenData.php  | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Service/Import/PostalCodeFRFromOpenData.php b/src/Bundle/ChillMainBundle/Service/Import/PostalCodeFRFromOpenData.php
index e5934af3b..c073e5bdb 100644
--- a/src/Bundle/ChillMainBundle/Service/Import/PostalCodeFRFromOpenData.php
+++ b/src/Bundle/ChillMainBundle/Service/Import/PostalCodeFRFromOpenData.php
@@ -23,7 +23,7 @@ use Symfony\Contracts\HttpClient\HttpClientInterface;
  */
 class PostalCodeFRFromOpenData
 {
-    private const CSV = 'https://datanova.laposte.fr/data-fair/api/v1/datasets/laposte-hexasmal/data-files/019HexaSmal.csv';
+    private const CSV = 'https://datanova.laposte.fr/data-fair/api/v1/datasets/laposte-hexasmal/metadata-attachments/base-officielle-codes-postaux.csv';
 
     public function __construct(private readonly PostalCodeBaseImporter $baseImporter, private readonly HttpClientInterface $client, private readonly LoggerInterface $logger)
     {
@@ -50,7 +50,7 @@ class PostalCodeFRFromOpenData
         fseek($tmpfile, 0);
 
         $csv = Reader::createFromStream($tmpfile);
-        $csv->setDelimiter(';');
+        $csv->setDelimiter(',');
         $csv->setHeaderOffset(0);
 
         foreach ($csv as $offset => $record) {
@@ -65,23 +65,23 @@ class PostalCodeFRFromOpenData
 
     private function handleRecord(array $record): void
     {
-        if ('' !== trim($record['coordonnees_geographiques'] ?? $record['coordonnees_gps'])) {
-            [$lat, $lon] = array_map(static fn ($el) => (float) trim($el), explode(',', $record['coordonnees_geographiques'] ?? $record['coordonnees_gps']));
+        if ('' !== trim($record['_geopoint'])) {
+            [$lat, $lon] = array_map(static fn ($el) => (float) trim($el), explode(',', $record['_geopoint']));
         } else {
             $lat = $lon = 0.0;
         }
 
-        $ref = trim((string) $record['Code_commune_INSEE']);
+        $ref = trim((string) $record['code_commune_insee']);
 
         if (str_starts_with($ref, '987')) {
             // some differences in French Polynesia
-            $ref .= '.'.trim((string) $record['Libellé_d_acheminement']);
+            $ref .= '.'.trim((string) $record['libelle_d_acheminement']);
         }
 
         $this->baseImporter->importCode(
             'FR',
-            trim((string) $record['Libellé_d_acheminement']),
-            trim((string) $record['Code_postal']),
+            trim((string) $record['libelle_d_acheminement']),
+            trim((string) $record['code_postal']),
             $ref,
             'INSEE',
             $lat,

From e8b95f8491252e64050e9630998930eef3b2b419 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Thu, 11 Apr 2024 16:45:43 +0200
Subject: [PATCH 02/28] Add changie for fix import postal codes

---
 .changes/unreleased/Fixed-20240411-164104.yaml | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changes/unreleased/Fixed-20240411-164104.yaml

diff --git a/.changes/unreleased/Fixed-20240411-164104.yaml b/.changes/unreleased/Fixed-20240411-164104.yaml
new file mode 100644
index 000000000..aa63f022a
--- /dev/null
+++ b/.changes/unreleased/Fixed-20240411-164104.yaml
@@ -0,0 +1,5 @@
+kind: Fixed
+body: 'Postal codes import : fix the source URL and the keys to handle each record'
+time: 2024-04-11T16:41:04.786062252+02:00
+custom:
+  Issue: "250"

From dbb9feb12980f474698dd42a05f6a88bd73c1993 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Fri, 12 Apr 2024 12:35:52 +0200
Subject: [PATCH 03/28] rector correction: cast value to string

---
 .../Service/Import/PostalCodeFRFromOpenData.php               | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Service/Import/PostalCodeFRFromOpenData.php b/src/Bundle/ChillMainBundle/Service/Import/PostalCodeFRFromOpenData.php
index c073e5bdb..e40b4dff9 100644
--- a/src/Bundle/ChillMainBundle/Service/Import/PostalCodeFRFromOpenData.php
+++ b/src/Bundle/ChillMainBundle/Service/Import/PostalCodeFRFromOpenData.php
@@ -65,8 +65,8 @@ class PostalCodeFRFromOpenData
 
     private function handleRecord(array $record): void
     {
-        if ('' !== trim($record['_geopoint'])) {
-            [$lat, $lon] = array_map(static fn ($el) => (float) trim($el), explode(',', $record['_geopoint']));
+        if ('' !== trim((string) $record['_geopoint'])) {
+            [$lat, $lon] = array_map(static fn ($el) => (float) trim($el), explode(',', (string) $record['_geopoint']));
         } else {
             $lat = $lon = 0.0;
         }

From 4091efc72ec308931fcb3d0d740c0895b9c6ff6e Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Fri, 12 Apr 2024 12:58:23 +0200
Subject: [PATCH 04/28] Update bundles version to 2.18.2

---
 .changes/unreleased/Fixed-20240411-164104.yaml | 5 -----
 .changes/v2.18.2.md                            | 3 +++
 CHANGELOG.md                                   | 4 ++++
 3 files changed, 7 insertions(+), 5 deletions(-)
 delete mode 100644 .changes/unreleased/Fixed-20240411-164104.yaml
 create mode 100644 .changes/v2.18.2.md

diff --git a/.changes/unreleased/Fixed-20240411-164104.yaml b/.changes/unreleased/Fixed-20240411-164104.yaml
deleted file mode 100644
index aa63f022a..000000000
--- a/.changes/unreleased/Fixed-20240411-164104.yaml
+++ /dev/null
@@ -1,5 +0,0 @@
-kind: Fixed
-body: 'Postal codes import : fix the source URL and the keys to handle each record'
-time: 2024-04-11T16:41:04.786062252+02:00
-custom:
-  Issue: "250"
diff --git a/.changes/v2.18.2.md b/.changes/v2.18.2.md
new file mode 100644
index 000000000..42eff9e25
--- /dev/null
+++ b/.changes/v2.18.2.md
@@ -0,0 +1,3 @@
+## v2.18.2 - 2024-04-12
+### Fixed
+* ([#250](https://gitlab.com/Chill-Projet/chill-bundles/-/issues/250)) Postal codes import : fix the source URL and the keys to handle each record 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8c0a6b008..ae9407c8a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html),
 and is generated by [Changie](https://github.com/miniscruff/changie).
 
 
+## v2.18.2 - 2024-04-12
+### Fixed
+* ([#250](https://gitlab.com/Chill-Projet/chill-bundles/-/issues/250)) Postal codes import : fix the source URL and the keys to handle each record 
+
 ## v2.18.1 - 2024-03-26
 ### Fixed
 * Fix layout issue in document generation for admin (minor) 

From 8516e89c9cac8b8be16a581ef9a55bafef03e9d7 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Wed, 17 Apr 2024 16:16:56 +0200
Subject: [PATCH 05/28] update docs to include import of countries which is
 necessary to be able to import addresses

---
 docs/source/installation/load-addresses.rst | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/source/installation/load-addresses.rst b/docs/source/installation/load-addresses.rst
index 779032fd0..85c29d618 100644
--- a/docs/source/installation/load-addresses.rst
+++ b/docs/source/installation/load-addresses.rst
@@ -8,6 +8,16 @@ Chill can store a list of geolocated address references, which are used to sugge
 
 Those addresses may be load from a dedicated source.
 
+Countries
+=========
+
+In order to load addresses into the chill application we first have to make sure that a list of countries is present.
+To import the countries run the following command.
+
+.. code-block:: bash
+
+    bin/console chill:main:countries:populate
+
 In France
 =========
 

From ab6feef371eda7885bd6ab80967389fb754303ef Mon Sep 17 00:00:00 2001
From: juminet <juminet@gmail.com>
Date: Thu, 18 Apr 2024 07:37:05 +0000
Subject: [PATCH 06/28] Do not display evaluation from closed accompanying
 period on homepage

---
 .changes/unreleased/Fixed-20240416-161817.yaml              | 6 ++++++
 .../AccompanyingPeriodWorkEvaluationRepository.php          | 3 +++
 2 files changed, 9 insertions(+)
 create mode 100644 .changes/unreleased/Fixed-20240416-161817.yaml

diff --git a/.changes/unreleased/Fixed-20240416-161817.yaml b/.changes/unreleased/Fixed-20240416-161817.yaml
new file mode 100644
index 000000000..6884c11fe
--- /dev/null
+++ b/.changes/unreleased/Fixed-20240416-161817.yaml
@@ -0,0 +1,6 @@
+kind: Fixed
+body: Fix broken link in homepage when a evaluation from a closed acc period was present
+  in the homepage widget
+time: 2024-04-16T16:18:17.888645172+02:00
+custom:
+  Issue: "270"
diff --git a/src/Bundle/ChillPersonBundle/Repository/AccompanyingPeriod/AccompanyingPeriodWorkEvaluationRepository.php b/src/Bundle/ChillPersonBundle/Repository/AccompanyingPeriod/AccompanyingPeriodWorkEvaluationRepository.php
index 9c6ed19fc..6110f8bb0 100644
--- a/src/Bundle/ChillPersonBundle/Repository/AccompanyingPeriod/AccompanyingPeriodWorkEvaluationRepository.php
+++ b/src/Bundle/ChillPersonBundle/Repository/AccompanyingPeriod/AccompanyingPeriodWorkEvaluationRepository.php
@@ -12,6 +12,7 @@ declare(strict_types=1);
 namespace Chill\PersonBundle\Repository\AccompanyingPeriod;
 
 use Chill\MainBundle\Entity\User;
+use Chill\PersonBundle\Entity\AccompanyingPeriod;
 use Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWork;
 use Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation;
 use Doctrine\ORM\EntityManagerInterface;
@@ -88,6 +89,7 @@ class AccompanyingPeriodWorkEvaluationRepository implements ObjectRepository
             ->where(
                 $qb->expr()->andX(
                     $qb->expr()->isNull('e.endDate'),
+                    $qb->expr()->neq('period.step', ':closed'),
                     $qb->expr()->gte(':now', $qb->expr()->diff('e.maxDate', 'e.warningInterval')),
                     $qb->expr()->orX(
                         $qb->expr()->eq('period.user', ':user'),
@@ -100,6 +102,7 @@ class AccompanyingPeriodWorkEvaluationRepository implements ObjectRepository
             ->setParameters([
                 'user' => $user,
                 'now' => new \DateTimeImmutable('now'),
+                'closed' => AccompanyingPeriod::STEP_CLOSED,
             ]);
 
         return $qb;

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 07/28] 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 %}

From 2a1963e993c3a53080e954ce839ba58d5df52dfb Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@gmail.com>
Date: Thu, 25 Apr 2024 10:36:45 +0200
Subject: [PATCH 08/28] =?UTF-8?q?Mise=20=C3=A0=20jour=20de=20l'interface?=
 =?UTF-8?q?=20utilisateur=20pour=20le=20composant=20ActionToolbarComponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Resources/public/vuejs/TicketApp/App.vue  |  2 +-
 .../components/ActionToolbarComponent.vue     | 54 +++++++++++++++----
 .../components/MotiveSelectorComponent.vue    | 42 +++++++++++++++
 .../components/TicketSelectorComponent.vue    |  6 +--
 .../Resources/public/vuejs/TicketApp/index.ts |  1 -
 5 files changed, 89 insertions(+), 16 deletions(-)
 create mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.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 cfe0b31bc..b44e84dc8 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
@@ -1,6 +1,6 @@
 <template>
     <banner-component :ticket="ticket" />
-    <div class="container-xxl p-2">
+    <div class="container-xxl p-3">
         <ticket-selector-component :tickets="[]" />
         <ticket-history-list-component :history="ticket.history" />
         <motive-list-component :motives="motives" />
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
index 96741bb34..f53447c8a 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
@@ -1,48 +1,82 @@
 <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-details">
+            <div class="tab-content">
+                <div v-if="activeTab === 'commentaire'" class="p-2">
+
+
+                    <label class="col-form-label" for="content">{{ $t('comment.label') }}</label>
+
+                    <textarea v-model="comment" class="form-control" id="content" rows="3"
+                        placeholder="{{ $t('comment.placeholder') }}">
+                    </textarea>
+
+                </div>
+                <div v-if="activeTab === 'transfert'">
+                    <!-- Content for the 'Transfert' tab pane -->
+                    <p>This is the Transfert tab pane content.</p>
+                </div>
+                <div v-if="activeTab === 'motif'">
+                    <!-- Content for the 'Motif' tab pane -->
+                    <p>This is the Motif tab pane content.</p>
+                </div>
+                <div v-if="activeTab === 'fermer'">
+                    <!-- Content for the 'Fermer' tab pane -->
+                    <p>This is the Fermer tab pane content.</p>
+                </div>
+            </div>
+
+            <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">
+                    <button type="button" class="m-2 btn btn-light" @click="activeTab = 'commentaire'">
                         <i class="fa fa-plus"></i>
                         Commentaire
                     </button>
                 </li>
                 <li class="nav-item">
-                    <button type="button" class="m-2 btn btn-light">
+                    <button type="button" class="m-2 btn btn-light" @click="activeTab = 'transfert'">
                         <i class="fa fa-paper-plane"></i>
                         Transfert
                     </button>
                 </li>
                 <li class="nav-item">
-                    <button type="button" class="m-2 btn btn-light">
+                    <button type="button" class="m-2 btn btn-light" @click="activeTab = 'motif'">
                         <i class="fa fa-paint-brush"></i>
                         Motif
                     </button>
                 </li>
                 <li class="nav-item">
-                    <button type="button" class="m-2 btn btn-light">
+                    <button type="button" class="m-2 btn btn-light" @click="activeTab = 'fermer'">
                         <i class="fa fa-bolt"></i>
                         Fermer
                     </button>
                 </li>
             </ul>
         </div>
-
     </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useStore } from 'vuex';
 
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { useStore } from 'vuex';
 
 export default defineComponent({
     name: 'ActionToolbarComponent',
     setup(props, ctx) {
         const store = useStore();
+        const editor = ref();
+        const activeTab = ref("");
+        const comment = ref("");
+        return {
+            activeTab,
+            comment,
+            editor,
+        };
+
     },
 });
 </script>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue
new file mode 100644
index 000000000..70f851396
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.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="badge rounded-pill bg-chill-green">
+                {{ tickets.length }}
+                <span class="visually-hidden">Tickets</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: 'MotiveSelectorComponent',
+    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/components/TicketSelectorComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketSelectorComponent.vue
index 7d1326513..bfab4dfb8 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketSelectorComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketSelectorComponent.vue
@@ -2,9 +2,9 @@
     <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">
+            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-chill-green">
                 {{ tickets.length }}
-                <span class="visually-hidden">unread messages</span>
+                <span class="visually-hidden">Tickets</span>
             </span>
 
         </button>
@@ -20,8 +20,6 @@
 
 import { PropType, defineComponent } from 'vue';
 
-
-
 // Types
 import { Ticket } from '../../../types';
 
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 e6f9011b0..f27823031 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts
@@ -3,7 +3,6 @@ import {createApp} from "vue";
 
 import { _createI18n } from "../../../../../../ChillMainBundle/Resources/public/vuejs/_js/i18n";
 
-
 import VueToast from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';
 

From b40ad9e44569e71fce1762272d74dc7fc75adee5 Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@gmail.com>
Date: Thu, 25 Apr 2024 11:16:08 +0200
Subject: [PATCH 09/28] =?UTF-8?q?Mise=20=C3=A0=20jour=20des=20messages=20d?=
 =?UTF-8?q?e=20l'interface=20utilisateur=20pour=20inclure=20les=20fonction?=
 =?UTF-8?q?nalit=C3=A9s=20de=20commentaire,=20de=20motif=20et=20de=20trans?=
 =?UTF-8?q?fert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Resources/public/vuejs/TicketApp/App.vue  |  5 --
 .../components/ActionToolbarComponent.vue     | 53 +++++++++++++------
 .../components/MotiveListComponent.vue        | 43 ---------------
 .../components/MotiveSelectorComponent.vue    | 21 ++++----
 .../public/vuejs/TicketApp/i18n/messages.ts   | 15 ++++++
 5 files changed, 61 insertions(+), 76 deletions(-)
 delete mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveListComponent.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 b44e84dc8..9568dd95e 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
@@ -3,7 +3,6 @@
     <div class="container-xxl p-3">
         <ticket-selector-component :tickets="[]" />
         <ticket-history-list-component :history="ticket.history" />
-        <motive-list-component :motives="motives" />
     </div>
     <action-toolbar-component />
 </template>
@@ -22,7 +21,6 @@ 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',
@@ -30,7 +28,6 @@ export default defineComponent({
         BannerComponent,
         TicketSelectorComponent,
         TicketHistoryListComponent,
-        MotiveListComponent,
         ActionToolbarComponent
     },
     setup() {
@@ -44,8 +41,6 @@ export default defineComponent({
         const ticket = computed(() => store.getters.getTicket as Ticket)
 
         onMounted(() => {
-            console.log(headline.value.textContent);
-
             try {
                 store.dispatch('fetchMotives')
             } catch (error) {
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
index f53447c8a..2c5fc284d 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
@@ -4,29 +4,43 @@
             <div class="tab-content">
                 <div v-if="activeTab === 'commentaire'" class="p-2">
 
-
-                    <label class="col-form-label" for="content">{{ $t('comment.label') }}</label>
+                    <label class="col-form-label" for="content">{{ $t('comment.title') }}</label>
 
                     <textarea v-model="comment" class="form-control" id="content" rows="3"
-                        placeholder="{{ $t('comment.placeholder') }}">
+                        :placeholder="$t('comment.label')">
                     </textarea>
+                    <div class="d-flex justify-content-end p-2">
+                        <button class="btn btn-chill-green text-white float-right" type="submit">
+                            <i class="fa fa-pencil"></i>
+                            {{ $t('comment.save') }}
+                        </button>
+                    </div>
 
                 </div>
-                <div v-if="activeTab === 'transfert'">
-                    <!-- Content for the 'Transfert' tab pane -->
-                    <p>This is the Transfert tab pane content.</p>
+                <div v-if="activeTab === 'transfert'" class="p-2">
+                    <label class="col-form-label" for="content">{{ $t('transfert.title') }}</label>
+
+                    <div class="d-flex justify-content-end p-2">
+                        <button class="btn btn-chill-green text-white float-right" type="submit">
+                            <i class="fa fa-pencil"></i>
+                            {{ $t('transfert.save') }}
+                        </button>
+                    </div>
                 </div>
-                <div v-if="activeTab === 'motif'">
-                    <!-- Content for the 'Motif' tab pane -->
-                    <p>This is the Motif tab pane content.</p>
-                </div>
-                <div v-if="activeTab === 'fermer'">
-                    <!-- Content for the 'Fermer' tab pane -->
-                    <p>This is the Fermer tab pane content.</p>
+                <div v-if="activeTab === 'motif'" class="p-2">
+                    <label class="col-form-label" for="content">{{ $t('motive.title') }}</label>
+                    <div>
+                        <MotiveSelectorComponent :motives="motives" />
+                    </div>
+                    <div class="d-flex justify-content-end p-2">
+                        <button class="btn btn-chill-green text-white float-right" type="submit">
+                            <i class="fa fa-pencil"></i>
+                            {{ $t('motive.save') }}
+                        </button>
+                    </div>
                 </div>
             </div>
 
-            <button class="btn btn-chill-green text-white">Enregistrer</button>
         </div>
         <div class="footer-ticket-main">
             <ul class="nav nav-tabs justify-content-end">
@@ -49,7 +63,7 @@
                     </button>
                 </li>
                 <li class="nav-item">
-                    <button type="button" class="m-2 btn btn-light" @click="activeTab = 'fermer'">
+                    <button type="button" class="m-2 btn btn-light" @click="activeTab = ''">
                         <i class="fa fa-bolt"></i>
                         Fermer
                     </button>
@@ -61,17 +75,24 @@
 
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import { useStore } from 'vuex';
+import MotiveSelectorComponent from './MotiveSelectorComponent.vue';
+import { Motive } from '../../../types';
 
 export default defineComponent({
     name: 'ActionToolbarComponent',
+    components: {
+        MotiveSelectorComponent
+    },
     setup(props, ctx) {
         const store = useStore();
         const editor = ref();
         const activeTab = ref("");
         const comment = ref("");
+        const motives = computed(() => store.getters.getMotives as Motive[])
         return {
+            motives,
             activeTab,
             comment,
             editor,
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
deleted file mode 100644
index 12ae6705b..000000000
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveListComponent.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<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/MotiveSelectorComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue
index 70f851396..b528b2ebb 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue
@@ -1,17 +1,14 @@
 <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="badge rounded-pill bg-chill-green">
-                {{ tickets.length }}
-                <span class="visually-hidden">Tickets</span>
-            </span>
-
+            {{ $t('motive.label') }}
+            <span class="visually-hidden">{{ $t('motive.label') }}</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>
+            <li v-for="motive in motives" :key="motive.label.fr"><button class="dropdown-item" type="button">
+                    {{ motive.label.fr }}
+                </button>
+            </li>
         </ul>
     </div>
 </template>
@@ -23,13 +20,13 @@ import { PropType, defineComponent } from 'vue';
 
 
 // Types
-import { Ticket } from '../../../types';
+import { Motive } from '../../../types';
 
 export default defineComponent({
     name: 'MotiveSelectorComponent',
     props: {
-        tickets: {
-            type: Object as PropType<Ticket[]>,
+        motives: {
+            type: Object as PropType<Motive[]>,
             required: true,
         },
     },
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 9bc5d751c..3b678559b 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
@@ -8,5 +8,20 @@ export const messages = {
             user: "Prise en charge par {username}",
             motive: "Motif indiqué: {motive}",
         },
+        comment: {
+            title: "Commentaire",
+            label: "Ajouter un commentaire",
+            save: "Enregistrer",
+         },
+         motive: {
+            title: "Motif",
+            label: "Ajouter un motif",
+            save: "Enregistrer",
+         },
+         transfert: {
+            title: "Transfert",
+            label: "Transferer vers",
+            save: "Enregistrer",
+         },
     },
 };

From c9f0e9843b2ae27118388582a6c8fac7cd835414 Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@gmail.com>
Date: Wed, 1 May 2024 15:49:32 +0200
Subject: [PATCH 10/28] =?UTF-8?q?D=C3=A9placer=20le=20composant=20=20banne?=
 =?UTF-8?q?r=20dans=20twig?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/Resources/public/types.ts             |  2 +-
 .../Resources/public/vuejs/TicketApp/App.vue  |  2 -
 .../components/ActionToolbarComponent.vue     |  4 +-
 .../TicketApp/components/BannerComponent.vue  | 65 ---------------
 .../Resources/views/Banner/banner.html.twig   | 82 +++++++++++++------
 .../translations/messages.fr.yaml             |  5 ++
 6 files changed, 67 insertions(+), 93 deletions(-)
 delete mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue
 create mode 100644 src/Bundle/ChillTicketBundle/translations/messages.fr.yaml

diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
index 0bcd1ecbb..5fdabec3a 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
@@ -5,7 +5,7 @@ import {
     UserGroup,
     UserGroupOrUser
 } from "../../../../ChillMainBundle/Resources/public/types";
-import {Person} from "../../../../ChillPersonBundle/Resources/public/types";
+import { Person } from "../../../../ChillPersonBundle/Resources/public/types";
 
 export interface Motive {
     type: "ticket_motive"
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 9568dd95e..77acc57d1 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
@@ -20,12 +20,10 @@ import { Motive, Ticket } from '../../types';
 import TicketSelectorComponent from './components/TicketSelectorComponent.vue';
 import TicketHistoryListComponent from './components/TicketHistoryListComponent.vue';
 import ActionToolbarComponent from './components/ActionToolbarComponent.vue';
-import BannerComponent from './components/BannerComponent.vue';
 
 export default defineComponent({
     name: 'App',
     components: {
-        BannerComponent,
         TicketSelectorComponent,
         TicketHistoryListComponent,
         ActionToolbarComponent
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
index 2c5fc284d..70dad6480 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="sticky-bottom">
+    <div class="fixed-bottom">
         <div class="footer-ticket-details">
             <div class="tab-content">
                 <div v-if="activeTab === 'commentaire'" class="p-2">
@@ -102,7 +102,7 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
-div.sticky-bottom {
+div.fixed-bottom {
     div.footer-ticket-main {
         background: none repeat scroll 0 0 #CABB9F;
     }
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
deleted file mode 100644
index 31c2f9f63..000000000
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<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/views/Banner/banner.html.twig b/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
index f7263b387..73e56209a 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
+++ b/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
@@ -1,24 +1,60 @@
-<div class="banner banner-ticket">
-    <div id="header-ticket-main" class="header-name">
-        <div class="container-xxl">
-            <div class="row">
-                <div class="col-md-6 ps-md-5 ps-xxl-0">
-                    TODO
-                </div>
+<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.getExternalRef() }}
+					</h2>
+					<h1>
+						{{ticket.getMotive()}}
+					</h1>
+				</div>
 
-                <div class="col-md-6">
-                    TODO
-                </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-12 ps-md-5 ps-xxl-0 container">
-                    <p>TODO</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
+				<div class="col-md-6">
+					<div class="float-end">
+						<h1>
+							<span class="badge text-bg-chill-green text-white">{{'open' | trans}}</span>
+						</h1>
+						<h3 class="fst-italic">{{'since' | trans}}</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">{{'concerned_patient' | trans}}</h3>
+					<h2>
+						{% for person in ticket.getPersons()  %}
+							<span class="badge text-bg-light" v-for="person in ticket.currentPersons">
+								{{ person.firstName }}
+								{{ person.lastName }}
+							</span>
+						{% endfor %}
+					</h2>
+				</div>
+				<div class="col-md-4 col-sm-12">
+					<h3 class="text-primary">{{'caller' | trans}}</h3>
+					<h2></h2>
+				</div>
+				<div class="col-md-4 col-sm-12">
+					<h3 class="text-primary">{{'speaker' | trans}}</h3>
+					<h2>
+						{% for addressee in ticket.getCurrentAddressee() %}
+							<span class="badge text-bg-light" v-for="person in ticket.currentPersons">
+								{% if addressee.type=='chill_main_user_group'  %}
+									{{ addressee.label.fr }}
+								{% else %}
+									{{ addressee.username }}
+								{% endif %
+							</span>
+						{% endfor %}
+							</h2>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
diff --git a/src/Bundle/ChillTicketBundle/translations/messages.fr.yaml b/src/Bundle/ChillTicketBundle/translations/messages.fr.yaml
new file mode 100644
index 000000000..6f2c57afa
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/translations/messages.fr.yaml
@@ -0,0 +1,5 @@
+concerned_patient: Patient concerné
+caller: Appelant
+speaker: Intervenant
+open: Ouvert
+since: Depuis

From b2587a688f7d36fd4023d59fd0748d11c4a193c9 Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@gmail.com>
Date: Wed, 1 May 2024 15:51:12 +0200
Subject: [PATCH 11/28] =?UTF-8?q?D=C3=A9placer=20le=20composant=20banner?=
 =?UTF-8?q?=20dans=20twig?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/Resources/views/Banner/banner.html.twig           | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig b/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
index 73e56209a..ab53626b2 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
+++ b/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
@@ -49,12 +49,12 @@
 									{{ addressee.label.fr }}
 								{% else %}
 									{{ addressee.username }}
-								{% endif %
+								{% endif %}
 							</span>
 						{% endfor %}
-							</h2>
-						</div>
-					</div>
+					</h2>
 				</div>
 			</div>
 		</div>
+	</div>
+</div>

From 4cffcf4de18d461781fb2f7be6c73d4b5e8da780 Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@gmail.com>
Date: Wed, 1 May 2024 22:03:36 +0200
Subject: [PATCH 12/28] Use translate in setup

---
 .../src/Resources/public/vuejs/TicketApp/index.ts             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 f27823031..753bd6ced 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts
@@ -7,7 +7,7 @@ import VueToast from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';
 
 import { store } from "./store";
-import { messages } from './i18n/messages';
+import messages from './i18n/messages';
 
 declare global {
     interface Window {
@@ -15,7 +15,7 @@ declare global {
     }
 }
 
-const i18n = _createI18n(messages);
+const i18n = _createI18n(messages, false);
 
 const _app = createApp({
         template: '<app></app>',

From 85bdfb9e21e52358860b44ba643f27ed7364b720 Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@gmail.com>
Date: Wed, 1 May 2024 22:04:07 +0200
Subject: [PATCH 13/28] Remove banner component

---
 .../src/Resources/public/vuejs/TicketApp/App.vue                 | 1 -
 1 file changed, 1 deletion(-)

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 77acc57d1..da1c60d2e 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
@@ -1,5 +1,4 @@
 <template>
-    <banner-component :ticket="ticket" />
     <div class="container-xxl p-3">
         <ticket-selector-component :tickets="[]" />
         <ticket-history-list-component :history="ticket.history" />

From a27d92aba02b0c40c4bc13bca17194be9a047356 Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@gmail.com>
Date: Thu, 2 May 2024 00:50:33 +0200
Subject: [PATCH 14/28] Add comment and motive

---
 .../src/Resources/public/types.ts             |   6 +-
 .../Resources/public/vuejs/TicketApp/App.vue  |   2 +-
 .../components/ActionToolbarComponent.vue     | 151 ++++++++++++------
 .../components/MotiveSelectorComponent.vue    |  57 ++++---
 .../TicketHistoryCommentComponent.vue         |  29 ++++
 .../components/TicketHistoryListComponent.vue |  39 +++--
 .../TicketHistoryMotiveComponent.vue          |  30 ++++
 .../TicketHistoryPersonComponent.vue          |  29 ++++
 .../components/TicketSelectorComponent.vue    |  12 +-
 .../public/vuejs/TicketApp/i18n/messages.ts   |  15 +-
 .../public/vuejs/TicketApp/store/index.ts     |   4 +
 .../vuejs/TicketApp/store/modules/comment.ts  |  40 +++++
 .../vuejs/TicketApp/store/modules/motive.ts   |  53 ++++--
 .../Resources/views/Banner/banner.html.twig   |   9 +-
 .../translations/messages.fr.yaml             |   1 +
 15 files changed, 359 insertions(+), 118 deletions(-)
 create mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCommentComponent.vue
 create mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryMotiveComponent.vue
 create mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryPersonComponent.vue
 create mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/comment.ts

diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
index 5fdabec3a..2c347977c 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
@@ -21,7 +21,7 @@ interface TicketHistory<T extends string, D extends object> {
     data: D
 }
 
-interface PersonHistory {
+export interface PersonHistory {
     type: "ticket_person_history",
     id: number,
     startDate: DateTime,
@@ -32,7 +32,7 @@ interface PersonHistory {
     createdAt: DateTime|null
 }
 
-interface MotiveHistory {
+export interface MotiveHistory {
     type: "ticket_motive_history",
     id: number,
     startDate: null,
@@ -42,7 +42,7 @@ interface MotiveHistory {
     createdAt: DateTime|null,
 }
 
-interface Comment {
+export interface Comment {
     type: "ticket_comment",
     id: number,
     content: string,
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 da1c60d2e..b993caa2f 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container-xxl p-3">
+    <div class="container-xxl p-3" style="padding-bottom: 55px;">
         <ticket-selector-component :tickets="[]" />
         <ticket-history-list-component :history="ticket.history" />
     </div>
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
index 70dad6480..986e466eb 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
@@ -1,65 +1,70 @@
 <template>
     <div class="fixed-bottom">
         <div class="footer-ticket-details">
-            <div class="tab-content">
-                <div v-if="activeTab === 'commentaire'" class="p-2">
-
-                    <label class="col-form-label" for="content">{{ $t('comment.title') }}</label>
-
-                    <textarea v-model="comment" class="form-control" id="content" rows="3"
-                        :placeholder="$t('comment.label')">
-                    </textarea>
-                    <div class="d-flex justify-content-end p-2">
-                        <button class="btn btn-chill-green text-white float-right" type="submit">
-                            <i class="fa fa-pencil"></i>
-                            {{ $t('comment.save') }}
-                        </button>
-                    </div>
+            <div class="tab-content p-2">
 
+                <div v-if="activeTab">
+                    <label class="col-form-label">
+                        {{ $t(`${activeTab}.title`) }}
+                    </label>
                 </div>
-                <div v-if="activeTab === 'transfert'" class="p-2">
-                    <label class="col-form-label" for="content">{{ $t('transfert.title') }}</label>
 
+                <div v-if="activeTab === 'comment'">
+                    <form @submit.prevent="createComment">
+                        <textarea v-model="content" class="form-control" id="content" rows="3"
+                            :placeholder="$t('comment.label')"></textarea>
+
+                        <div class="d-flex justify-content-end p-2">
+                            <button class="btn btn-chill-green text-white float-right" type="submit">
+                                <i class="fa fa-pencil"></i>
+                                {{ $t("comment.save") }}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+
+                <div v-if="activeTab === 'transfert'">
                     <div class="d-flex justify-content-end p-2">
                         <button class="btn btn-chill-green text-white float-right" type="submit">
                             <i class="fa fa-pencil"></i>
-                            {{ $t('transfert.save') }}
+                            {{ $t("transfert.save") }}
                         </button>
                     </div>
                 </div>
-                <div v-if="activeTab === 'motif'" class="p-2">
-                    <label class="col-form-label" for="content">{{ $t('motive.title') }}</label>
-                    <div>
-                        <MotiveSelectorComponent :motives="motives" />
-                    </div>
-                    <div class="d-flex justify-content-end p-2">
-                        <button class="btn btn-chill-green text-white float-right" type="submit">
-                            <i class="fa fa-pencil"></i>
-                            {{ $t('motive.save') }}
-                        </button>
-                    </div>
+
+                <div v-if="activeTab === 'motive'">
+                    <form @submit.prevent="createMotive">
+
+                        <motive-selector-component v-model="motive" :motives="motives"
+                            :current-motive="ticket.currentMotive" />
+                        <div class="d-flex justify-content-end p-2">
+                            <button class="btn btn-chill-green text-white float-right" type="submit">
+                                <i class="fa fa-pencil"></i>
+                                {{ $t("motive.save") }}
+                            </button>
+                        </div>
+                    </form>
                 </div>
             </div>
-
         </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" @click="activeTab = 'commentaire'">
+                    <button type="button" class="m-2 btn btn-light" @click="activeTab = 'comment'">
                         <i class="fa fa-plus"></i>
-                        Commentaire
+                        {{ $t('comment.title') }}
                     </button>
                 </li>
                 <li class="nav-item">
                     <button type="button" class="m-2 btn btn-light" @click="activeTab = 'transfert'">
                         <i class="fa fa-paper-plane"></i>
-                        Transfert
+                        {{ $t('transfert.title') }}
                     </button>
                 </li>
                 <li class="nav-item">
-                    <button type="button" class="m-2 btn btn-light" @click="activeTab = 'motif'">
+                    <button type="button" class="m-2 btn btn-light" @click="activeTab = 'motive'">
                         <i class="fa fa-paint-brush"></i>
-                        Motif
+                        {{ $t('motive.title') }}
                     </button>
                 </li>
                 <li class="nav-item">
@@ -73,42 +78,82 @@
     </div>
 </template>
 
-
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue';
-import { useStore } from 'vuex';
-import MotiveSelectorComponent from './MotiveSelectorComponent.vue';
-import { Motive } from '../../../types';
+import { defineComponent, inject, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useStore } from "vuex";
+
+// Types
+import { Comment, Motive, Ticket } from "../../../types";
+
+// Component
+import MotiveSelectorComponent from "./MotiveSelectorComponent.vue";
 
 export default defineComponent({
-    name: 'ActionToolbarComponent',
+    name: "ActionToolbarComponent",
     components: {
-        MotiveSelectorComponent
+        MotiveSelectorComponent,
     },
-    setup(props, ctx) {
+    setup() {
         const store = useStore();
-        const editor = ref();
+        const { t } = useI18n();
+        const toast = inject('toast') as any;
         const activeTab = ref("");
-        const comment = ref("");
-        const motives = computed(() => store.getters.getMotives as Motive[])
-        return {
-            motives,
-            activeTab,
-            comment,
-            editor,
-        };
 
+        const ticket = ref(store.getters.getTicket as Ticket);
+        const motives = ref(store.getters.getMotives as Motive[]);
+
+        const motive = ref({} as Motive);
+        const content = ref('' as Comment["content"]);
+
+
+
+        async function createMotive() {
+            try {
+                await store.dispatch("createMotive", {
+                    ticketId: ticket.value.id,
+                    motive: motive.value,
+                });
+                toast.success(t("motive.success"))
+            } catch (error) {
+                toast.error(error)
+            }
+        }
+
+        async function createComment() {
+            try {
+                await store.dispatch("createComment", {
+                    ticketId: ticket.value.id,
+                    content: content.value,
+                });
+                content.value = "";
+                toast.success(t("comment.success"))
+            } catch (error) {
+                toast.error(error)
+            }
+        }
+
+        return {
+            activeTab,
+            ticket,
+            motives,
+            motive,
+            content,
+            createMotive,
+            createComment,
+        };
     },
 });
 </script>
 <style lang="scss" scoped>
+
 div.fixed-bottom {
     div.footer-ticket-main {
-        background: none repeat scroll 0 0 #CABB9F;
+        background: none repeat scroll 0 0 #cabb9f;
     }
 
     div.footer-ticket-details {
-        background: none repeat scroll 0 0 #EFE2CA;
+        background: none repeat scroll 0 0 #efe2ca;
     }
 }
 </style>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue
index b528b2ebb..7f55443eb 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue
@@ -1,38 +1,55 @@
 <template>
-    <div class="btn-group">
-        <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-            {{ $t('motive.label') }}
-            <span class="visually-hidden">{{ $t('motive.label') }}</span>
-        </button>
-        <ul class="dropdown-menu">
-            <li v-for="motive in motives" :key="motive.label.fr"><button class="dropdown-item" type="button">
-                    {{ motive.label.fr }}
-                </button>
-            </li>
-        </ul>
+    <div class="row">
+        <div class="col-12 col-lg-4 col-md-6">
+            <vue-multiselect name="selectMotive" id="selectMotive" label="label" :custom-label="customLabel"
+                track-by="id" open-direction="top" :multiple="false" :searchable="true"
+                :placeholder="$t('motive.label')" :select-label="$t('multiselect.select_label')"
+                :deselect-label="$t('multiselect.deselect_label')" :selected-label="$t('multiselect.selected_label')"
+                :options="motives" v-model="motive" />
+        </div>
     </div>
 </template>
 
 <script lang="ts">
-
-import { PropType, defineComponent } from 'vue';
-
-
+import { PropType, defineComponent, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import VueMultiselect from "vue-multiselect";
 
 // Types
-import { Motive } from '../../../types';
+import { Motive } from "../../../types";
 
 export default defineComponent({
-    name: 'MotiveSelectorComponent',
+    name: "MotiveSelectorComponent",
     props: {
         motives: {
             type: Object as PropType<Motive[]>,
             required: true,
         },
+        currentMotive: {
+            type: Object as PropType<null|Motive>,
+            required: false,
+        },
+    },
+    components: {
+        VueMultiselect,
+    },
+    emits: ["update:modelValue"],
+
+    setup(props, ctx) {
+        const motive = ref(props.currentMotive ? props.currentMotive : {} as Motive);
+        const { t } = useI18n();
+
+        watch(motive, (motive) => {
+            ctx.emit("update:modelValue", motive);
+        });
+
+        return {
+            motive,
+            customLabel(motive: Motive) {
+                return motive.label ? motive.label.fr : t('motive.label');
+            },
+        };
     },
-    setup() {
-        return {}
-    }
 });
 </script>
 
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCommentComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCommentComponent.vue
new file mode 100644
index 000000000..c793adc05
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCommentComponent.vue
@@ -0,0 +1,29 @@
+<template>
+    <div class="col-12">
+        <i class="fa fa-comment"></i>
+        <span class="mx-1">
+            {{ $t('history.comment',{ comment: commentHistory.content}) }}
+        </span>
+    </div>
+</template>
+
+<script lang="ts">
+
+import { PropType, defineComponent } from 'vue';
+
+// Types
+import { Comment } from '../../../types';
+
+export default defineComponent({
+    name: 'TicketHistoryCommentComponent',
+    props: {
+        commentHistory: {
+            type: Object as PropType<Comment>,
+            required: true,
+        },
+    },
+    setup() {}
+});
+</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
index 42f5b071b..113cfd677 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryListComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryListComponent.vue
@@ -6,26 +6,20 @@
             </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="card-body row fst-italic">
             <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 }) }}
+                    {{ $t('history.user', { username: history_line.by.username }) }}
                 </span>
             </div>
+            <ticket-history-person-component :personHistory="history_line.data"
+                v-if="history_line.event_type == 'add_person'" />
+            <ticket-history-motive-component :motiveHistory="history_line.data"
+                v-else-if="history_line.event_type == 'set_motive'" />
+            <ticket-history-comment-component :commentHistory="history_line.data"
+                v-else-if="history_line.event_type == 'add_comment'" />
         </div>
     </div>
 </template>
@@ -34,10 +28,22 @@
 
 import { PropType, defineComponent } from 'vue';
 import { DateTime } from '../../../../../../../ChillMainBundle/Resources/public/types';
+
+// Types
 import { Ticket } from '../../../types';
 
+// Components
+import TicketHistoryPersonComponent from './TicketHistoryPersonComponent.vue';
+import TicketHistoryMotiveComponent from './TicketHistoryMotiveComponent.vue';
+import TicketHistoryCommentComponent from './TicketHistoryCommentComponent.vue';
+
 export default defineComponent({
     name: 'TicketHistoryListComponent',
+    components: {
+        TicketHistoryPersonComponent,
+        TicketHistoryMotiveComponent,
+        TicketHistoryCommentComponent,
+    },
     props: {
         history: {
             type: Array as PropType<Ticket["history"]>,
@@ -46,11 +52,10 @@ export default defineComponent({
     },
 
     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 `${date.getDate()} ${month} ${date.getFullYear()}, ${date.toLocaleTimeString()}`
         }
 
         return { formatDate }
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryMotiveComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryMotiveComponent.vue
new file mode 100644
index 000000000..132d782c1
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryMotiveComponent.vue
@@ -0,0 +1,30 @@
+<template>
+    <div class="col-12">
+        <i class="fa fa-paint-brush"></i>
+        <span class="mx-1">
+            {{ $t('history.motive',{ motive: motiveHistory.motive.label.fr }) }}
+        </span>
+    </div>
+</template>
+
+<script lang="ts">
+
+import { PropType, defineComponent } from 'vue';
+
+// Types
+import { MotiveHistory } from '../../../types';
+
+export default defineComponent({
+    name: 'TicketHistoryMotiveComponent',
+    props: {
+        motiveHistory: {
+            type: Object as PropType<MotiveHistory>,
+            required: true,
+        },
+    },
+
+    setup() {}
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryPersonComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryPersonComponent.vue
new file mode 100644
index 000000000..6ecd96039
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryPersonComponent.vue
@@ -0,0 +1,29 @@
+<template>
+    <div class="col-12">
+        <i class="fa fa-bolt" style="min-width: 16px;"></i>
+        <span class="mx-1">
+            {{ $t('history.person',{ person: personHistory.person.text }) }}
+        </span>
+    </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+
+// Type
+import { PersonHistory } from '../../../types';
+
+export default defineComponent({
+    name: 'TicketHistoryPersonComponent',
+    props: {
+        personHistory: {
+            type: Object as PropType<PersonHistory>,
+            required: true,
+        },
+    },
+
+    setup() {}
+});
+</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
index bfab4dfb8..ff291a11c 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketSelectorComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketSelectorComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="btn-group">
+    <div class="btn-group" @click="handleClick">
         <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-chill-green">
@@ -8,11 +8,6 @@
             </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>
 
@@ -32,7 +27,10 @@ export default defineComponent({
         },
     },
     setup() {
-        return {}
+        function handleClick() {
+            alert('Sera disponible plus tard')
+        }
+        return { handleClick }
     }
 });
 </script>
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 3b678559b..f1605c4a5 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,27 +1,36 @@
-export const messages = {
+import { multiSelectMessages } from"../../../../../../../ChillMainBundle/Resources/public/vuejs/_js/i18n";
+
+const messages = {
     fr: {
         ticket: {
             previous_tickets: "Précédents tickets",
         },
         history: {
-            person: "Ouverture par appel téléphonique de {text}",
+            person: "Ouverture par appel téléphonique de {person}",
             user: "Prise en charge par {username}",
             motive: "Motif indiqué: {motive}",
+            comment: "Commentaire: {comment}",
         },
         comment: {
             title: "Commentaire",
             label: "Ajouter un commentaire",
             save: "Enregistrer",
+            succcess: "Commentaire enregistré",
          },
          motive: {
             title: "Motif",
-            label: "Ajouter un motif",
+            label: "Choisir un motif",
             save: "Enregistrer",
+            success: "Motif enregistré",
          },
          transfert: {
             title: "Transfert",
             label: "Transferer vers",
             save: "Enregistrer",
+            success: "Transfert effectué",
          },
+         close: "Fermer"
     },
 };
+Object.assign(messages.fr, multiSelectMessages.fr);
+export default messages;
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 b26eaa611..82dd600a9 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,15 +1,19 @@
 import { createStore } from "vuex";
 import { State as MotiveStates, moduleMotive } from "./modules/motive";
 import { State as TicketStates, moduleTicket } from "./modules/ticket";
+import {  State as CommentStates, moduleComment } from "./modules/comment";
 
 export type RootState = {
     motive: MotiveStates;
     ticket: TicketStates;
+    comment: CommentStates;
   };
 
 export const store = createStore({
     modules: {
         motive:moduleMotive,
         ticket:moduleTicket,
+        comment:moduleComment,
+
       }
 });
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/comment.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/comment.ts
new file mode 100644
index 000000000..b457e4e23
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/comment.ts
@@ -0,0 +1,40 @@
+import {
+    fetchResults,
+    makeFetch,
+} from "../../../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
+
+import { Module } from "vuex";
+import { RootState } from "..";
+
+import { Comment } from "../../../../types";
+
+export interface State {
+    comments: Array<Comment>;
+}
+
+export const moduleComment: Module<State, RootState> = {
+    state: () => ({
+        comments: [] as Array<Comment>,
+    }),
+    getters: {},
+    mutations: {},
+    actions: {
+        async createComment(
+            { commit },
+            datas: { ticketId: number; content: Comment["content"] }
+        ) {
+            const { ticketId, content } = datas;
+            try {
+                const result = await makeFetch(
+                    "POST",
+                    `/api/1.0/ticket/${ticketId}/comment/add`,
+                    { content }
+                );
+                commit("setTicket", result);
+            }
+            catch(e: any) {
+                throw e.name;
+            }
+        },
+    },
+};
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 88d6091ba..296301fc2 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
@@ -1,4 +1,7 @@
-import { fetchResults, makeFetch } from "../../../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
+import {
+    fetchResults,
+    makeFetch,
+} from "../../../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
 
 import { Module } from "vuex";
 import { RootState } from "..";
@@ -9,31 +12,55 @@ export interface State {
     motives: Array<Motive>;
 }
 
-export const moduleMotive: Module<State, RootState> ={
+export const moduleMotive: Module<State, RootState> = {
     state: () => ({
         motives: [] as Array<Motive>,
     }),
     getters: {
         getMotives(state) {
             return state.motives;
-          }
+        },
+        getMotiveOptions(state) {
+            return state.motives.map((motive) => ({
+                value: motive.id,
+                text: motive.label.fr,
+            }));
+        },
     },
     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;
+            try {
+                const results = (await fetchResults(
+                    "/api/1.0/ticket/motive.json"
+                )) as Motive[];
+                commit("setMotives", results);
+            }
+            catch(e: any) {
+                throw e.name;
+            }
+        },
+
+        async createMotive(
+            { commit },
+            datas: { ticketId: number; motive: Motive }
+        ) {
+            const { ticketId, motive } = datas;
+            try {
+                const result = await makeFetch(
+                    "POST",
+                    `/api/1.0/ticket/${ticketId}/motive/set`,
+                    { motive }
+                );
+                commit("setTicket", result);
+            }
+            catch(e: any) {
+                throw e.name;
+            }
         },
-        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;
-        }
     },
 };
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig b/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
index ab53626b2..c8a7ff724 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
+++ b/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
@@ -7,7 +7,14 @@
 						#{{ ticket.getExternalRef() }}
 					</h2>
 					<h1>
-						{{ticket.getMotive()}}
+						{% if ticket.getMotive() %}
+							{{ ticket.getMotive().label.fr }}
+						{% else %}
+							{{ ticket.getMotive() }}
+							<p class="chill-no-data-statement">
+								{{ "no_motive"|trans }}
+							</p>
+						{% endif %}
 					</h1>
 				</div>
 
diff --git a/src/Bundle/ChillTicketBundle/translations/messages.fr.yaml b/src/Bundle/ChillTicketBundle/translations/messages.fr.yaml
index 6f2c57afa..bcc75537e 100644
--- a/src/Bundle/ChillTicketBundle/translations/messages.fr.yaml
+++ b/src/Bundle/ChillTicketBundle/translations/messages.fr.yaml
@@ -3,3 +3,4 @@ caller: Appelant
 speaker: Intervenant
 open: Ouvert
 since: Depuis
+no_motive: Pas de motif

From 7b8cd90cf17eda4f2beefe01394d99a014aeffec Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@gmail.com>
Date: Thu, 2 May 2024 12:03:10 +0200
Subject: [PATCH 15/28] Add user store

---
 .../public/vuejs/TicketApp/store/index.ts     |  5 +-
 .../vuejs/TicketApp/store/modules/ticket.ts   |  2 -
 .../vuejs/TicketApp/store/modules/user.ts     | 70 +++++++++++++++++++
 3 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/user.ts

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 82dd600a9..61c13b9b9 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,14 @@
 import { createStore } from "vuex";
 import { State as MotiveStates, moduleMotive } from "./modules/motive";
 import { State as TicketStates, moduleTicket } from "./modules/ticket";
-import {  State as CommentStates, moduleComment } from "./modules/comment";
+import { State as CommentStates, moduleComment } from "./modules/comment";
+import { State as UserStates, moduleUser } from "./modules/user";
 
 export type RootState = {
     motive: MotiveStates;
     ticket: TicketStates;
     comment: CommentStates;
+    user: UserStates;
   };
 
 export const store = createStore({
@@ -14,6 +16,7 @@ export const store = createStore({
         motive:moduleMotive,
         ticket:moduleTicket,
         comment:moduleComment,
+        user:moduleUser,
 
       }
 });
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
index 4e3a55762..c02b520eb 100644
--- 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
@@ -1,5 +1,3 @@
-import { fetchResults, makeFetch } from "../../../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
-
 import { Module } from "vuex";
 import { RootState } from "..";
 
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/user.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/user.ts
new file mode 100644
index 000000000..5fa9e8be1
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/user.ts
@@ -0,0 +1,70 @@
+import {
+    fetchResults,
+    makeFetch,
+} from "../../../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
+
+import { Module } from "vuex";
+import { RootState } from "..";
+
+import {
+    User,
+    UserGroup,
+    UserGroupOrUser,
+} from "../../../../../../../../ChillMainBundle/Resources/public/types";
+
+export interface State {
+    userGroups: Array<UserGroup>;
+    users: Array<User>;
+}
+
+export const moduleUser: Module<State, RootState> = {
+    state: () => ({
+        userGroups: [] as Array<UserGroup>,
+        users: [] as Array<User>,
+    }),
+    getters: {
+        getUserGroups(state) {
+            return state.userGroups;
+        },
+        getUsers(state) {
+            return state.users;
+        },
+    },
+    mutations: {},
+    actions: {
+        getUserGroups({ commit }) {
+            try {
+                fetchResults("/api/1.0/main/user-group.json").then(
+                    (results) => {
+                        commit("setUserGroups", results);
+                    }
+                );
+            } catch (e: any) {
+                throw e.name;
+            }
+        },
+        getUsers({ commit }) {
+            try {
+                fetchResults("/1.0/main/user.json").then((results) => {
+                    commit("setUserGroups", results);
+                });
+            } catch (e: any) {
+                throw e.name;
+            }
+        },
+
+        async setAdressees({ commit }, datas: { ticketId: number; addressees:  Array<UserGroupOrUser>}) {
+            const { ticketId, addressees } = datas;
+            try {
+                const result = await makeFetch(
+                    "POST",
+                    `/api/1.0/ticket/${ticketId}/addressees/set`,
+                    addressees
+                );
+                commit("setTicket", result);
+            } catch (e: any) {
+                throw e.name;
+            }
+        },
+    },
+};

From eb0bf56cff7a1e8df36e6e38ba079efa43c74510 Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@gmail.com>
Date: Thu, 2 May 2024 13:18:45 +0200
Subject: [PATCH 16/28] Add user group addressee

---
 .../src/Resources/public/types.ts             |  2 +-
 .../Resources/public/vuejs/TicketApp/App.vue  |  6 +-
 .../components/ActionToolbarComponent.vue     | 49 ++++++++++----
 .../components/AddresseeSelectorComponent.vue | 65 +++++++++++++++++++
 .../components/MotiveSelectorComponent.vue    | 10 +--
 .../TicketHistoryAddresseeComponent .vue      | 30 +++++++++
 .../components/TicketHistoryListComponent.vue |  2 +
 .../public/vuejs/TicketApp/i18n/messages.ts   |  1 +
 .../vuejs/TicketApp/store/modules/motive.ts   | 19 +++---
 .../vuejs/TicketApp/store/modules/user.ts     | 28 ++++++--
 .../Resources/views/Banner/banner.html.twig   | 12 ++--
 11 files changed, 178 insertions(+), 46 deletions(-)
 create mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue
 create mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent .vue

diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
index 2c347977c..9c0d467f8 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
@@ -52,7 +52,7 @@ export interface Comment {
     updatedAt: DateTime|null,
 }
 
-interface AddresseeHistory {
+export interface AddresseeHistory {
     type: "ticket_addressee_history",
     id: number,
     startDate: DateTime|null,
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 b993caa2f..cf4eff359 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
@@ -37,9 +37,11 @@ export default defineComponent({
         const motives = computed(() => store.getters.getMotives as Motive[])
         const ticket = computed(() => store.getters.getTicket as Ticket)
 
-        onMounted(() => {
+        onMounted(async () => {
             try {
-                store.dispatch('fetchMotives')
+                await store.dispatch('fetchMotives')
+                await store.dispatch('fetchUserGroups')
+                await store.dispatch('fetchUsers')
             } catch (error) {
                 toast.error(error)
             };
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
index 986e466eb..ed38bedae 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
@@ -24,19 +24,21 @@
                 </div>
 
                 <div v-if="activeTab === 'transfert'">
-                    <div class="d-flex justify-content-end p-2">
-                        <button class="btn btn-chill-green text-white float-right" type="submit">
-                            <i class="fa fa-pencil"></i>
-                            {{ $t("transfert.save") }}
-                        </button>
-                    </div>
+                    <form @submit.prevent="setAdressees">
+                        <addressee-selector-component v-model="addressees" :user-groups="userGroups" :users="users" />
+                        <div class="d-flex justify-content-end p-2">
+                            <button class="btn btn-chill-green text-white float-right" type="submit">
+                                <i class="fa fa-pencil"></i>
+                                {{ $t("transfert.save") }}
+                            </button>
+                        </div>
+                    </form>
                 </div>
 
                 <div v-if="activeTab === 'motive'">
                     <form @submit.prevent="createMotive">
 
-                        <motive-selector-component v-model="motive" :motives="motives"
-                            :current-motive="ticket.currentMotive" />
+                        <motive-selector-component v-model="motive" :motives="motives" />
                         <div class="d-flex justify-content-end p-2">
                             <button class="btn btn-chill-green text-white float-right" type="submit">
                                 <i class="fa fa-pencil"></i>
@@ -79,20 +81,23 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, ref } from "vue";
+import { computed, defineComponent, inject, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
 
 // Types
+import { User, UserGroup, UserGroupOrUser } from "../../../../../../../ChillMainBundle/Resources/public/types";
 import { Comment, Motive, Ticket } from "../../../types";
 
 // Component
 import MotiveSelectorComponent from "./MotiveSelectorComponent.vue";
+import AddresseeSelectorComponent from "./AddresseeSelectorComponent.vue";
 
 export default defineComponent({
     name: "ActionToolbarComponent",
     components: {
         MotiveSelectorComponent,
+        AddresseeSelectorComponent,
     },
     setup() {
         const store = useStore();
@@ -100,11 +105,14 @@ export default defineComponent({
         const toast = inject('toast') as any;
         const activeTab = ref("");
 
-        const ticket = ref(store.getters.getTicket as Ticket);
-        const motives = ref(store.getters.getMotives as Motive[]);
+        const ticket = computed(() => store.getters.getTicket as Ticket);
+        const motives = computed(() => store.getters.getMotives as Motive[]);
+        const userGroups = computed(() => store.getters.getUserGroups as UserGroup[]);
+        const users = computed(() => store.getters.getUserGroups as User[]);
 
-        const motive = ref({} as Motive);
+        const motive = ref(ticket.value.currentMotive ? ticket.value.currentMotive: {} as Motive);
         const content = ref('' as Comment["content"]);
+        const addressees = ref(ticket.value.currentAddressees as Array<UserGroupOrUser>);
 
 
 
@@ -133,20 +141,35 @@ export default defineComponent({
             }
         }
 
+        async function setAdressees() {
+            try {
+                await store.dispatch("setAdressees", {
+                    ticketId: ticket.value.id,
+                    addressees: addressees.value,
+                });
+                toast.success(t("transfert.success"))
+            } catch (error) {
+                toast.error(error)
+            }
+        }
+
         return {
             activeTab,
             ticket,
             motives,
             motive,
+            userGroups,
+            addressees,
+            users,
             content,
             createMotive,
             createComment,
+            setAdressees,
         };
     },
 });
 </script>
 <style lang="scss" scoped>
-
 div.fixed-bottom {
     div.footer-ticket-main {
         background: none repeat scroll 0 0 #cabb9f;
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue
new file mode 100644
index 000000000..74affc297
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue
@@ -0,0 +1,65 @@
+<template>
+    <div class="row">
+        <div class="col-12 col-lg-4 col-md-6">
+            <vue-multiselect name="selectMotive" id="selectMotive" label="label" :custom-label="customUserGroupLabel"
+                track-by="id" open-direction="top" :multiple="false" :searchable="true"
+                :placeholder="$t('transfert.label')" :select-label="$t('multiselect.select_label')"
+                :deselect-label="$t('multiselect.deselect_label')" :selected-label="$t('multiselect.selected_label')"
+                :options="userGroups" v-model="userGroup" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import VueMultiselect from "vue-multiselect";
+
+// Types
+import { User, UserGroup, UserGroupOrUser } from "../../../../../../../ChillMainBundle/Resources/public/types";
+
+
+export default defineComponent({
+    name: "AddresseeSelectorComponent",
+    props: {
+        modelValue: {
+            type: Array as PropType<UserGroupOrUser[]>,
+            default: [],
+            required: false,
+        },
+        userGroups: {
+            type: Array as PropType<UserGroup[]>,
+            required: true,
+        },
+        users: {
+            type: Array as PropType<User[]>,
+            required: true,
+        },
+    },
+    components: {
+        VueMultiselect,
+    },
+    emits: ["update:modelValue"],
+
+    setup(props, ctx) {
+        const addressees = ref(props.modelValue as UserGroupOrUser[]);
+        const userGroup = ref({} as UserGroup);
+        const { t } = useI18n();
+
+        watch(userGroup, (userGroup) => {
+            addressees.value.push(userGroup);
+            ctx.emit("update:modelValue", addressees.value);
+        });
+
+        return {
+            addressees,
+            userGroup,
+            customUserGroupLabel(userGroup: UserGroup) {
+                return userGroup.label ? userGroup.label.fr : t('transfert.label');
+            },
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue
index 7f55443eb..c7f7f9b03 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue
@@ -21,14 +21,14 @@ import { Motive } from "../../../types";
 export default defineComponent({
     name: "MotiveSelectorComponent",
     props: {
+        modelValue: {
+            type: Object as PropType<Motive>,
+            required: false,
+        },
         motives: {
             type: Object as PropType<Motive[]>,
             required: true,
         },
-        currentMotive: {
-            type: Object as PropType<null|Motive>,
-            required: false,
-        },
     },
     components: {
         VueMultiselect,
@@ -36,7 +36,7 @@ export default defineComponent({
     emits: ["update:modelValue"],
 
     setup(props, ctx) {
-        const motive = ref(props.currentMotive ? props.currentMotive : {} as Motive);
+        const motive = ref(props.modelValue);
         const { t } = useI18n();
 
         watch(motive, (motive) => {
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent .vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent .vue
new file mode 100644
index 000000000..08d5fcbd3
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent .vue	
@@ -0,0 +1,30 @@
+<template>
+    <div class="col-12">
+        <i class="fa fa-paint-brush"></i>
+        <span class="mx-1">
+            {{ $t('history.user_group.',{ user_group: addresseeHistory.addressee.label }) }}
+        </span>
+    </div>
+</template>
+
+<script lang="ts">
+
+import { PropType, defineComponent } from 'vue';
+
+// Types
+import { AddresseeHistory } from '../../../types';
+
+export default defineComponent({
+    name: 'TicketHistoryAddresseeComponent',
+    props: {
+        addresseeHistory: {
+            type: Object as PropType<AddresseeHistory>,
+            required: true,
+        },
+    },
+
+    setup() {}
+});
+</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
index 113cfd677..50761bc5e 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryListComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryListComponent.vue
@@ -20,6 +20,8 @@
                 v-else-if="history_line.event_type == 'set_motive'" />
             <ticket-history-comment-component :commentHistory="history_line.data"
                 v-else-if="history_line.event_type == 'add_comment'" />
+            <ticket-history-addressee-component :commentHistory="history_line.data"
+                v-else-if="history_line.event_type == 'add_addressee'" />
         </div>
     </div>
 </template>
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 f1605c4a5..e320b84e7 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
@@ -10,6 +10,7 @@ const messages = {
             user: "Prise en charge par {username}",
             motive: "Motif indiqué: {motive}",
             comment: "Commentaire: {comment}",
+            user_group: "Transferer au group: {user_group}",
         },
         comment: {
             title: "Commentaire",
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 296301fc2..1c2696106 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
@@ -20,12 +20,6 @@ export const moduleMotive: Module<State, RootState> = {
         getMotives(state) {
             return state.motives;
         },
-        getMotiveOptions(state) {
-            return state.motives.map((motive) => ({
-                value: motive.id,
-                text: motive.label.fr,
-            }));
-        },
     },
     mutations: {
         setMotives(state, motives) {
@@ -39,8 +33,7 @@ export const moduleMotive: Module<State, RootState> = {
                     "/api/1.0/ticket/motive.json"
                 )) as Motive[];
                 commit("setMotives", results);
-            }
-            catch(e: any) {
+            } catch (e: any) {
                 throw e.name;
             }
         },
@@ -54,11 +47,15 @@ export const moduleMotive: Module<State, RootState> = {
                 const result = await makeFetch(
                     "POST",
                     `/api/1.0/ticket/${ticketId}/motive/set`,
-                    { motive }
+                    {
+                        motive: {
+                            id: motive.id,
+                            type: motive.type,
+                        },
+                    }
                 );
                 commit("setTicket", result);
-            }
-            catch(e: any) {
+            } catch (e: any) {
                 throw e.name;
             }
         },
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/user.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/user.ts
index 5fa9e8be1..f4441e34b 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/user.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/user.ts
@@ -30,9 +30,16 @@ export const moduleUser: Module<State, RootState> = {
             return state.users;
         },
     },
-    mutations: {},
+    mutations: {
+        setUserGroups(state, userGroups) {
+            state.userGroups = userGroups;
+        },
+        setUsers(state, users) {
+            state.users = users;
+        },
+    },
     actions: {
-        getUserGroups({ commit }) {
+        fetchUserGroups({ commit }) {
             try {
                 fetchResults("/api/1.0/main/user-group.json").then(
                     (results) => {
@@ -43,23 +50,30 @@ export const moduleUser: Module<State, RootState> = {
                 throw e.name;
             }
         },
-        getUsers({ commit }) {
+        fetchUsers({ commit }) {
             try {
-                fetchResults("/1.0/main/user.json").then((results) => {
-                    commit("setUserGroups", results);
+                fetchResults("/api/1.0/main/user.json").then((results) => {
+                    commit("setUsers", results);
                 });
             } catch (e: any) {
                 throw e.name;
             }
         },
 
-        async setAdressees({ commit }, datas: { ticketId: number; addressees:  Array<UserGroupOrUser>}) {
+        async setAdressees(
+            { commit },
+            datas: { ticketId: number; addressees: Array<UserGroupOrUser> }
+        ) {
             const { ticketId, addressees } = datas;
             try {
                 const result = await makeFetch(
                     "POST",
                     `/api/1.0/ticket/${ticketId}/addressees/set`,
-                    addressees
+                    {
+                        addressees: addressees.map((addressee) => {
+                            return { id: addressee.id, type: addressee.type };
+                        }),
+                    }
                 );
                 commit("setTicket", result);
             } catch (e: any) {
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig b/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
index c8a7ff724..46f02d298 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
+++ b/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
@@ -36,7 +36,7 @@
 					<h3 class="text-primary">{{'concerned_patient' | trans}}</h3>
 					<h2>
 						{% for person in ticket.getPersons()  %}
-							<span class="badge text-bg-light" v-for="person in ticket.currentPersons">
+							<span class="badge text-bg-light">
 								{{ person.firstName }}
 								{{ person.lastName }}
 							</span>
@@ -51,12 +51,10 @@
 					<h3 class="text-primary">{{'speaker' | trans}}</h3>
 					<h2>
 						{% for addressee in ticket.getCurrentAddressee() %}
-							<span class="badge text-bg-light" v-for="person in ticket.currentPersons">
-								{% if addressee.type=='chill_main_user_group'  %}
-									{{ addressee.label.fr }}
-								{% else %}
-									{{ addressee.username }}
-								{% endif %}
+							<span class="badge text-bg-light">
+
+								{{ addressee.label.fr }}
+
 							</span>
 						{% endfor %}
 					</h2>

From 1d0045714188f791a42a9fe95fdf68373cd66bda Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@gmail.com>
Date: Thu, 2 May 2024 14:09:52 +0200
Subject: [PATCH 17/28] =?UTF-8?q?Ajouter=20les=20propri=C3=A9t=C3=A9s=20cr?=
 =?UTF-8?q?eatedAt=20et=20updatedBy=20=C3=A0=20l'interface=20Ticket?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Bundle/ChillTicketBundle/src/Resources/public/types.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
index 9c0d467f8..6d8657f82 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
@@ -80,5 +80,7 @@ export interface Ticket {
     currentPersons: Person[],
     currentMotive: null|Motive,
     history: TicketHistoryLine[],
+    createdAt: DateTime|null,
+    updatedBy: User|null,
 }
 

From 6500c24a7f436ced4bed0f1963c2f6fa7b7564d2 Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@gmail.com>
Date: Thu, 2 May 2024 14:10:22 +0200
Subject: [PATCH 18/28] =?UTF-8?q?D=C3=A9placer=20le=20r=C3=A9pertoire=20tr?=
 =?UTF-8?q?anslation=20dans=20source?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChillTicketBundle/{ => src}/translations/messages.fr.yaml     | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/Bundle/ChillTicketBundle/{ => src}/translations/messages.fr.yaml (100%)

diff --git a/src/Bundle/ChillTicketBundle/translations/messages.fr.yaml b/src/Bundle/ChillTicketBundle/src/translations/messages.fr.yaml
similarity index 100%
rename from src/Bundle/ChillTicketBundle/translations/messages.fr.yaml
rename to src/Bundle/ChillTicketBundle/src/translations/messages.fr.yaml

From 473765366a6c72f1bc78f2ec98272e095af8a647 Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@gmail.com>
Date: Mon, 6 May 2024 16:38:56 +0200
Subject: [PATCH 19/28] Add tranfert with AddPerson

---
 .../components/ActionToolbarComponent.vue     |  10 +-
 .../components/AddresseeSelectorComponent.vue | 184 ++++++++++++++++--
 .../TicketHistoryAddresseeComponent .vue      |  30 ---
 .../TicketHistoryAddresseeComponent.vue       |  48 +++++
 .../components/TicketHistoryListComponent.vue |  67 ++++---
 .../TicketHistoryPersonComponent.vue          |  20 +-
 .../public/vuejs/TicketApp/i18n/messages.ts   |   6 +-
 7 files changed, 275 insertions(+), 90 deletions(-)
 delete mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent .vue
 create mode 100644 src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent.vue

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
index ed38bedae..d188bdab0 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
@@ -24,9 +24,9 @@
                 </div>
 
                 <div v-if="activeTab === 'transfert'">
-                    <form @submit.prevent="setAdressees">
+                    <form @submit.prevent="setAdressees" v-if="userGroups.length && users.length">
                         <addressee-selector-component v-model="addressees" :user-groups="userGroups" :users="users" />
-                        <div class="d-flex justify-content-end p-2">
+                        <div class="d-flex justify-content-end p-1">
                             <button class="btn btn-chill-green text-white float-right" type="submit">
                                 <i class="fa fa-pencil"></i>
                                 {{ $t("transfert.save") }}
@@ -39,7 +39,7 @@
                     <form @submit.prevent="createMotive">
 
                         <motive-selector-component v-model="motive" :motives="motives" />
-                        <div class="d-flex justify-content-end p-2">
+                        <div class="d-flex justify-content-end p-1">
                             <button class="btn btn-chill-green text-white float-right" type="submit">
                                 <i class="fa fa-pencil"></i>
                                 {{ $t("motive.save") }}
@@ -108,11 +108,11 @@ export default defineComponent({
         const ticket = computed(() => store.getters.getTicket as Ticket);
         const motives = computed(() => store.getters.getMotives as Motive[]);
         const userGroups = computed(() => store.getters.getUserGroups as UserGroup[]);
-        const users = computed(() => store.getters.getUserGroups as User[]);
+        const users = computed(() => store.getters.getUsers as User[]);
 
         const motive = ref(ticket.value.currentMotive ? ticket.value.currentMotive: {} as Motive);
         const content = ref('' as Comment["content"]);
-        const addressees = ref(ticket.value.currentAddressees as Array<UserGroupOrUser>);
+        const addressees = ref([] as Array<UserGroupOrUser>);
 
 
 
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue
index 74affc297..36e6d64a6 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue
@@ -1,23 +1,103 @@
 <template>
     <div class="row">
-        <div class="col-12 col-lg-4 col-md-6">
-            <vue-multiselect name="selectMotive" id="selectMotive" label="label" :custom-label="customUserGroupLabel"
-                track-by="id" open-direction="top" :multiple="false" :searchable="true"
-                :placeholder="$t('transfert.label')" :select-label="$t('multiselect.select_label')"
-                :deselect-label="$t('multiselect.deselect_label')" :selected-label="$t('multiselect.selected_label')"
-                :options="userGroups" v-model="userGroup" />
+        <div class="col-12 col-lg-6 col-md-6 mb-2 text-center">
+            <span class="m-1">
+                <input
+                    type="radio"
+                    class="btn-check"
+                    name="options-outlined"
+                    id="level-none"
+                    autocomplete="off"
+                    :value="{}"
+                    v-model="userGroupLevel"
+                />
+                <label :class="`btn btn-outline-primary`" for="level-none">
+                    Aucun
+                </label>
+            </span>
+            <span
+                v-for="userGroupItem in userGroups.filter(
+                    (userGroup) => userGroup.excludeKey == 'level'
+                )"
+                :key="userGroupItem.id"
+                class="m-1"
+            >
+                <input
+                    type="radio"
+                    class="btn-check"
+                    name="options-outlined"
+                    :id="`level-${userGroupItem.id}`"
+                    autocomplete="off"
+                    :value="userGroupItem"
+                    v-model="userGroupLevel"
+                />
+                <label
+                    :class="`btn btn-${userGroupItem.id}`"
+                    :for="`level-${userGroupItem.id}`"
+                    :style="getUserGroupBtnColor(userGroupItem)"
+                >
+                    {{ userGroupItem.label.fr }}
+                </label>
+            </span>
+        </div>
+        <div class="col-12 col-lg-6 col-md-6 mb-2 text-center">
+            <span
+                v-for="userGroupItem in userGroups.filter(
+                    (userGroup) => userGroup.excludeKey == ''
+                )"
+                :key="userGroupItem.id"
+                class="m-1"
+            >
+                <input
+                    type="checkbox"
+                    class="btn-check"
+                    name="options-outlined"
+                    :id="`user-group-${userGroupItem.id}`"
+                    autocomplete="off"
+                    :value="userGroupItem"
+                    v-model="userGroup"
+                />
+                <label
+                    :class="`btn btn-${userGroupItem.id}`"
+                    :for="`user-group-${userGroupItem.id}`"
+                    :style="getUserGroupBtnColor(userGroupItem)"
+                >
+                    {{ userGroupItem.label.fr }}
+                </label>
+            </span>
+        </div>
+
+        <div class="col-12 col-lg-6 col-md-6 mb-2 text-center">
+            <add-persons
+                :options="addPersonsOptions"
+                key="add-person-ticket"
+                buttonTitle="transfert.user_label"
+                modalTitle="transfert.user_label"
+                ref="addPersons"
+                @addNewPersons="addNewEntity"
+            />
+        </div>
+        <div class="col-12 col-lg-6 col-md-6 mb-2 mb-2 text-center">
+            <span class="badge text-bg-light m-1" v-for="user in users">
+                {{ user.username }}
+            </span>
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { PropType, defineComponent, ref, watch } from "vue";
+import { PropType, computed, defineComponent, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import VueMultiselect from "vue-multiselect";
 
 // Types
-import { User, UserGroup, UserGroupOrUser } from "../../../../../../../ChillMainBundle/Resources/public/types";
+import {
+    User,
+    UserGroup,
+    UserGroupOrUser,
+} from "../../../../../../../ChillMainBundle/Resources/public/types";
 
+// Components
+import AddPersons from "../../../../../../../ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue";
 
 export default defineComponent({
     name: "AddresseeSelectorComponent",
@@ -37,29 +117,99 @@ export default defineComponent({
         },
     },
     components: {
-        VueMultiselect,
+        AddPersons,
     },
     emits: ["update:modelValue"],
 
     setup(props, ctx) {
-        const addressees = ref(props.modelValue as UserGroupOrUser[]);
-        const userGroup = ref({} as UserGroup);
+        // Cant use UserGroupOrUser[] because of TS2367
+        // TS2367: This comparison appears to be unintentional because the types '"user" | "chill_main_user_group"' and '"user_group"' have no overlap.
+        const addressees = ref(props.modelValue as any[]);
+        const userGroupLevel = ref({} as UserGroupOrUser);
+        const userGroup = ref([] as UserGroupOrUser[]);
+        const users = ref([] as User[]);
+        const addPersons = ref();
+
         const { t } = useI18n();
 
-        watch(userGroup, (userGroup) => {
-            addressees.value.push(userGroup);
+        function getUserGroupBtnColor(userGroup: UserGroup) {
+            return [
+                `.btn-check:checked + .btn-${userGroup.id} {
+                color: ${userGroup.foregroundColor};
+                background-color: ${userGroup.backgroundColor};
+                }`,
+            ];
+        }
+        function addNewEntity(datas: any) {
+            const { selected, modal } = datas;
+            users.value = selected.map((selected: any) => selected.result);
+            addressees.value = addressees.value.filter(
+                (addressee) => addressee.type === "user_group"
+            );
+            addressees.value = [...addressees.value, ...users.value];
+            ctx.emit("update:modelValue", addressees.value);
+            addPersons.value.resetSearch();
+            modal.showModal = false;
+        }
+
+        const addPersonsOptions = computed(() => {
+            return {
+                uniq: false,
+                type: ["user"],
+                priority: null,
+                button: {
+                    size: "btn-sm",
+                    class: "btn-submit",
+                },
+            };
+        });
+
+        watch(userGroupLevel, (userGroupLevelAdd, userGroupLevelRem) => {
+            if (userGroupLevelRem) {
+                addressees.value.splice(
+                    addressees.value.indexOf(userGroupLevelRem),
+                    1
+                );
+            }
+            addressees.value.push(userGroupLevelAdd);
+            ctx.emit("update:modelValue", addressees.value);
+        });
+
+        watch(userGroup, (userGroupAdd) => {
+            addressees.value = addressees.value.filter(
+                (addressee) => addressee.excludeKey !== ""
+            );
+            addressees.value = [...addressees.value, ...userGroupAdd];
             ctx.emit("update:modelValue", addressees.value);
         });
 
         return {
             addressees,
+            userGroupLevel,
             userGroup,
-            customUserGroupLabel(userGroup: UserGroup) {
-                return userGroup.label ? userGroup.label.fr : t('transfert.label');
+            users,
+            addPersons,
+            addPersonsOptions,
+            addNewEntity,
+            getUserGroupBtnColor,
+            customUserGroupLabel(selectedUserGroup: UserGroup) {
+                return selectedUserGroup.label
+                    ? selectedUserGroup.label.fr
+                    : t("transfert.user_group_label");
             },
         };
     },
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.btn-check:checked + .btn,
+:not(.btn-check) + .btn:active,
+.btn:first-child:active,
+.btn.active,
+.btn.show {
+    color: white;
+    box-shadow: 0 0 0 0.2rem var(--bs-chill-green);
+    outline: 0;
+}
+</style>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent .vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent .vue
deleted file mode 100644
index 08d5fcbd3..000000000
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent .vue	
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-    <div class="col-12">
-        <i class="fa fa-paint-brush"></i>
-        <span class="mx-1">
-            {{ $t('history.user_group.',{ user_group: addresseeHistory.addressee.label }) }}
-        </span>
-    </div>
-</template>
-
-<script lang="ts">
-
-import { PropType, defineComponent } from 'vue';
-
-// Types
-import { AddresseeHistory } from '../../../types';
-
-export default defineComponent({
-    name: 'TicketHistoryAddresseeComponent',
-    props: {
-        addresseeHistory: {
-            type: Object as PropType<AddresseeHistory>,
-            required: true,
-        },
-    },
-
-    setup() {}
-});
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent.vue
new file mode 100644
index 000000000..3e4203561
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent.vue
@@ -0,0 +1,48 @@
+<template>
+    <div class="col-12" v-if="addressee.type == 'user_group'">
+        <i class="fa fa-paper-plane"></i>
+        <span class="mx-1">
+            {{
+                $t("history.transfert_user_group", {
+                    user_group: addressee.label.fr,
+                })
+            }}
+        </span>
+    </div>
+    <div class="col-12" v-if="addressee.type == 'user'">
+        <i class="fa fa-paper-plane"></i>
+        <span class="mx-1">
+            {{
+                $t("history.transfert_user", {
+                    user: addressee.username,
+                })
+            }}
+        </span>
+    </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, ref } from "vue";
+
+// Types
+import { AddresseeHistory } from "../../../types";
+import { UserGroupOrUser } from "../../../../../../../ChillMainBundle/Resources/public/types";
+
+export default defineComponent({
+    name: "TicketHistoryAddresseeComponent",
+    props: {
+        addresseeHistory: {
+            type: Object as PropType<AddresseeHistory>,
+            required: true,
+        },
+    },
+
+    setup(props, ctx) {
+        return {
+            addressee: ref(props.addresseeHistory.addressee as UserGroupOrUser),
+        };
+    },
+});
+</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
index 50761bc5e..c7d809a3f 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryListComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryListComponent.vue
@@ -1,50 +1,59 @@
 <template>
-    <div class="card my-2 bg-light" v-for="history_line in history" :key="history_line.data.id">
+    <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>
+            <span class="badge bg-white text-black mx-1">{{
+                history_line.by.username
+            }}</span>
         </div>
-
+        {{history_line.event_type}}
         <div class="card-body row fst-italic">
-            <div class="col-12">
-                <i class="fa fa-eyedropper"></i>
-                <span class="mx-1">
-                    {{ $t('history.user', { username: history_line.by.username }) }}
-                </span>
-            </div>
-            <ticket-history-person-component :personHistory="history_line.data"
-                v-if="history_line.event_type == 'add_person'" />
-            <ticket-history-motive-component :motiveHistory="history_line.data"
-                v-else-if="history_line.event_type == 'set_motive'" />
-            <ticket-history-comment-component :commentHistory="history_line.data"
-                v-else-if="history_line.event_type == 'add_comment'" />
-            <ticket-history-addressee-component :commentHistory="history_line.data"
-                v-else-if="history_line.event_type == 'add_addressee'" />
+            <ticket-history-person-component
+                :personHistory="history_line.data"
+                v-if="history_line.event_type == 'add_person'"
+            />
+            <ticket-history-motive-component
+                :motiveHistory="history_line.data"
+                v-else-if="history_line.event_type == 'set_motive'"
+            />
+            <ticket-history-comment-component
+                :commentHistory="history_line.data"
+                v-else-if="history_line.event_type == 'add_comment'"
+            />
+            <ticket-history-addressee-component
+                :addresseeHistory="history_line.data"
+                v-else-if="history_line.event_type == 'add_addressee'"
+            />
         </div>
     </div>
 </template>
 
 <script lang="ts">
-
-import { PropType, defineComponent } from 'vue';
-import { DateTime } from '../../../../../../../ChillMainBundle/Resources/public/types';
+import { PropType, defineComponent } from "vue";
+import { DateTime } from "../../../../../../../ChillMainBundle/Resources/public/types";
 
 // Types
-import { Ticket } from '../../../types';
+import { Ticket } from "../../../types";
 
 // Components
-import TicketHistoryPersonComponent from './TicketHistoryPersonComponent.vue';
-import TicketHistoryMotiveComponent from './TicketHistoryMotiveComponent.vue';
-import TicketHistoryCommentComponent from './TicketHistoryCommentComponent.vue';
+import TicketHistoryPersonComponent from "./TicketHistoryPersonComponent.vue";
+import TicketHistoryMotiveComponent from "./TicketHistoryMotiveComponent.vue";
+import TicketHistoryCommentComponent from "./TicketHistoryCommentComponent.vue";
+import TicketHistoryAddresseeComponent from "./TicketHistoryAddresseeComponent.vue";
 
 export default defineComponent({
-    name: 'TicketHistoryListComponent',
+    name: "TicketHistoryListComponent",
     components: {
         TicketHistoryPersonComponent,
         TicketHistoryMotiveComponent,
         TicketHistoryCommentComponent,
+        TicketHistoryAddresseeComponent,
     },
     props: {
         history: {
@@ -56,12 +65,12 @@ export default defineComponent({
     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.toLocaleTimeString()}`
+            const month = date.toLocaleString("default", { month: "long" });
+            return `${date.getDate()} ${month} ${date.getFullYear()}, ${date.toLocaleTimeString()}`;
         }
 
-        return { formatDate }
-    }
+        return { formatDate };
+    },
 });
 </script>
 
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryPersonComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryPersonComponent.vue
index 6ecd96039..f4831205b 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryPersonComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryPersonComponent.vue
@@ -1,20 +1,26 @@
 <template>
-    <div class="col-12">
-        <i class="fa fa-bolt" style="min-width: 16px;"></i>
+    <div class="col-12" v-if="personHistory.createdBy">
+        <i class="fa fa-eyedropper"></i>
         <span class="mx-1">
-            {{ $t('history.person',{ person: personHistory.person.text }) }}
+            {{ $t("history.user", { username: personHistory.createdBy.username }) }}
+        </span>
+    </div>
+    <div class="col-12">
+        <i class="fa fa-bolt" style="min-width: 16px"></i>
+        <span class="mx-1">
+            {{ $t("history.person", { person: personHistory.person.text }) }}
         </span>
     </div>
 </template>
 
 <script lang="ts">
-import { PropType, defineComponent } from 'vue';
+import { PropType, defineComponent } from "vue";
 
 // Type
-import { PersonHistory } from '../../../types';
+import { PersonHistory, Ticket } from "../../../types";
 
 export default defineComponent({
-    name: 'TicketHistoryPersonComponent',
+    name: "TicketHistoryPersonComponent",
     props: {
         personHistory: {
             type: Object as PropType<PersonHistory>,
@@ -22,7 +28,7 @@ export default defineComponent({
         },
     },
 
-    setup() {}
+    setup() {},
 });
 </script>
 
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 e320b84e7..19a7db452 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
@@ -10,7 +10,8 @@ const messages = {
             user: "Prise en charge par {username}",
             motive: "Motif indiqué: {motive}",
             comment: "Commentaire: {comment}",
-            user_group: "Transferer au group: {user_group}",
+            transfert_user_group: "Transferé au groupe: {user_group}",
+            transfert_user: "Transferé vers l'utilisateur: {user}",
         },
         comment: {
             title: "Commentaire",
@@ -26,7 +27,8 @@ const messages = {
          },
          transfert: {
             title: "Transfert",
-            label: "Transferer vers",
+            user_group_label: "Transferer vers un groupe",
+            user_label: "Transferer vers un ou plusieurs utilisateurs",
             save: "Enregistrer",
             success: "Transfert effectué",
          },

From 3f9745d8cfc0d81ac5c43dbab42ce8ecedef30ec Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@gmail.com>
Date: Mon, 6 May 2024 18:03:04 +0200
Subject: [PATCH 20/28] Use teleport for banner

---
 .../ChillTicketBundle/src/Entity/Ticket.php   |  20 +++
 .../src/Resources/public/types.ts             |   1 -
 .../Resources/public/vuejs/TicketApp/App.vue  | 120 +++++++++++++++---
 .../components/TicketHistoryListComponent.vue |   3 +-
 .../components/TicketSelectorComponent.vue    |   5 +-
 .../public/vuejs/TicketApp/i18n/messages.ts   |  22 +++-
 .../Resources/views/Banner/banner.html.twig   |  57 ---------
 .../Normalizer/TicketNormalizer.php           |   2 +
 .../src/translations/messages.fr.yaml         |   6 -
 9 files changed, 142 insertions(+), 94 deletions(-)
 delete mode 100644 src/Bundle/ChillTicketBundle/src/translations/messages.fr.yaml

diff --git a/src/Bundle/ChillTicketBundle/src/Entity/Ticket.php b/src/Bundle/ChillTicketBundle/src/Entity/Ticket.php
index 04cfe828b..9fc4d6a15 100644
--- a/src/Bundle/ChillTicketBundle/src/Entity/Ticket.php
+++ b/src/Bundle/ChillTicketBundle/src/Entity/Ticket.php
@@ -69,6 +69,13 @@ class Ticket implements TrackCreationInterface, TrackUpdateInterface
     #[ORM\OneToMany(targetEntity: PersonHistory::class, mappedBy: 'ticket')]
     private Collection $personHistories;
 
+    #[ORM\ManyToOne(targetEntity: User::class)]
+    #[ORM\JoinColumn(nullable: true)]
+    private ?User $updatedBy = null;
+
+    #[ORM\Column(type: \Doctrine\DBAL\Types\Types::DATETIME_IMMUTABLE, nullable: true)]
+    private ?\DateTimeImmutable $createdAt = null;
+
     public function __construct()
     {
         $this->addresseeHistory = new ArrayCollection();
@@ -76,6 +83,7 @@ class Ticket implements TrackCreationInterface, TrackUpdateInterface
         $this->motiveHistories = new ArrayCollection();
         $this->personHistories = new ArrayCollection();
         $this->inputHistories = new ArrayCollection();
+
     }
 
     public function getId(): ?int
@@ -211,4 +219,16 @@ class Ticket implements TrackCreationInterface, TrackUpdateInterface
     {
         return $this->addresseeHistory;
     }
+
+    public function getCreatedAt(): \DateTimeImmutable
+    {
+        return $this->createdAt;
+    }
+
+    public function getUpdatedBy(): ?User
+    {
+        return $this->updatedBy;
+    }
+
+
 }
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
index 6d8657f82..1af87d044 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
@@ -2,7 +2,6 @@ import {
     DateTime,
     TranslatableString,
     User,
-    UserGroup,
     UserGroupOrUser
 } from "../../../../ChillMainBundle/Resources/public/types";
 import { Person } from "../../../../ChillPersonBundle/Resources/public/types";
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 cf4eff359..e738bd10a 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
@@ -1,5 +1,75 @@
 <template>
-    <div class="container-xxl p-3" style="padding-bottom: 55px;">
+    <Teleport to="#header-ticket-main">
+        <div class="container-xxl text-primary">
+            <div class="row">
+                <div class="col-md-6 col-sm-12 ps-md-5 ps-xxl-0">
+                    <h2>#{{ ticket.externalRef }}</h2>
+                    <h1 v-if="ticket.currentMotive">
+                        {{ ticket.currentMotive.label.fr }}
+                    </h1>
+                    <p class="chill-no-data-statement" v-else>
+                        {{ $t("banner.no_motive") }}
+                    </p>
+                </div>
+
+                <div class="col-md-6 col-sm-12">
+                    <div class="float-end">
+                        <h1>
+                            <span class="badge text-bg-chill-green text-white">
+                                {{ $t("banner.open") }}
+                            </span>
+                        </h1>
+                        <h3 class="fst-italic" v-if="ticket.createdAt">
+                            {{
+                                $t("banner.since", {
+                                    days: getSince(ticket.createdAt),
+                                })
+                            }}
+                        </h3>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+    <Teleport to="#header-ticket-details">
+        <div class="container-xxl">
+            <div class="row justify-content-between">
+                <!-- <div class="col-md-4 col-sm-12">
+                    <h3 class="text-primary">{{ $t("concerned_patient") }}</h3>
+                </div> -->
+                <div class="col-md-6 col-sm-12 ps-md-5 ps-xxl-0">
+                    <h3 class="text-primary">{{ $t("banner.caller") }}</h3>
+                    <h2>
+                        <span
+                            class="badge text-bg-light m-1"
+                            v-for="person in ticket.currentPersons"
+                            :key="person.id"
+                        >
+                            {{ person.firstName }}
+                            {{ person.lastName }}
+                        </span>
+                    </h2>
+                </div>
+                <div class="col-md-6 col-sm-12">
+                    <h3 class="text-primary">{{ $t("banner.speaker") }}</h3>
+                    <h2>
+                        <span
+                            class="badge text-bg-light m-1"
+                            v-for="addressee in ticket.currentAddressees"
+                            :key="addressee.id"
+                        >
+                            {{
+                                typeof addressee.label == "string"
+                                    ? addressee.label
+                                    : addressee.label.fr
+                            }}
+                        </span>
+                    </h2>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+    <div class="container-xxl pt-1" style="padding-bottom: 55px">
         <ticket-selector-component :tickets="[]" />
         <ticket-history-list-component :history="ticket.history" />
     </div>
@@ -7,50 +77,60 @@
 </template>
 
 <script lang="ts">
-
-import { computed, defineComponent, inject, onMounted, ref } from 'vue';
-import { useStore } from 'vuex';
-
+import { computed, defineComponent, inject, onMounted, ref } from "vue";
+import { useStore } from "vuex";
 
 // Types
-import { Motive, Ticket } from '../../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 TicketSelectorComponent from "./components/TicketSelectorComponent.vue";
+import TicketHistoryListComponent from "./components/TicketHistoryListComponent.vue";
+import ActionToolbarComponent from "./components/ActionToolbarComponent.vue";
+import UserRenderBoxBadge from "../../../../../../ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue";
+import { DateTime } from "../../../../../../ChillMainBundle/Resources/public/types";
 
 export default defineComponent({
-    name: 'App',
+    name: "App",
     components: {
         TicketSelectorComponent,
         TicketHistoryListComponent,
-        ActionToolbarComponent
+        ActionToolbarComponent,
+        UserRenderBoxBadge,
     },
     setup() {
         const store = useStore();
-        const toast = inject('toast') as any;
+        const toast = inject("toast") as any;
         const headline = ref({} as HTMLHeadingElement);
 
-        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);
+
+        function getSince(createdAt: DateTime) {
+            const today = new Date();
+            const date = new Date(createdAt.datetime);
+            const timeDiff = Math.abs(today.getTime() - date.getTime());
+            const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
+            return daysDiff;
+        }
 
         onMounted(async () => {
             try {
-                await store.dispatch('fetchMotives')
-                await store.dispatch('fetchUserGroups')
-                await store.dispatch('fetchUsers')
+                await store.dispatch("fetchMotives");
+                await store.dispatch("fetchUserGroups");
+                await store.dispatch("fetchUsers");
             } catch (error) {
-                toast.error(error)
-            };
+                toast.error(error);
+            }
         });
 
         return {
             headline,
             motives,
             ticket,
+            getSince,
         };
     },
 });
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
index c7d809a3f..4d0722c14 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryListComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryListComponent.vue
@@ -2,7 +2,7 @@
     <div
         class="card my-2 bg-light"
         v-for="history_line in history"
-        :key="history_line.data.id"
+        :key="history.indexOf(history_line)"
     >
         <div class="card-header">
             <span class="fw-bold fst-italic">
@@ -12,7 +12,6 @@
                 history_line.by.username
             }}</span>
         </div>
-        {{history_line.event_type}}
         <div class="card-body row fst-italic">
             <ticket-history-person-component
                 :personHistory="history_line.data"
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
index ff291a11c..2057af898 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketSelectorComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketSelectorComponent.vue
@@ -1,5 +1,6 @@
 <template>
-    <div class="btn-group" @click="handleClick">
+    <div class="d-flex justify-content-end">
+        <div class="btn-group" @click="handleClick">
         <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-chill-green">
@@ -9,6 +10,8 @@
 
         </button>
     </div>
+    </div>
+
 </template>
 
 <script lang="ts">
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 19a7db452..31f5c94d7 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,4 +1,4 @@
-import { multiSelectMessages } from"../../../../../../../ChillMainBundle/Resources/public/vuejs/_js/i18n";
+import { multiSelectMessages } from "../../../../../../../ChillMainBundle/Resources/public/vuejs/_js/i18n";
 
 const messages = {
     fr: {
@@ -18,21 +18,29 @@ const messages = {
             label: "Ajouter un commentaire",
             save: "Enregistrer",
             succcess: "Commentaire enregistré",
-         },
-         motive: {
+        },
+        motive: {
             title: "Motif",
             label: "Choisir un motif",
             save: "Enregistrer",
             success: "Motif enregistré",
-         },
-         transfert: {
+        },
+        transfert: {
             title: "Transfert",
             user_group_label: "Transferer vers un groupe",
             user_label: "Transferer vers un ou plusieurs utilisateurs",
             save: "Enregistrer",
             success: "Transfert effectué",
-         },
-         close: "Fermer"
+        },
+        close: "Fermer",
+        banner: {
+            concerned_patient: "Patient concerné",
+            caller: "Appelant",
+            speaker: "Intervenant",
+            open: "Ouvert",
+            since: "Depuis 1 jour | Depuis {days} jour(s)",
+            no_motive: "Pas de motif",
+        },
     },
 };
 Object.assign(messages.fr, multiSelectMessages.fr);
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig b/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
index 46f02d298..5a33f7fc2 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
+++ b/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
@@ -1,65 +1,8 @@
 <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.getExternalRef() }}
-					</h2>
-					<h1>
-						{% if ticket.getMotive() %}
-							{{ ticket.getMotive().label.fr }}
-						{% else %}
-							{{ ticket.getMotive() }}
-							<p class="chill-no-data-statement">
-								{{ "no_motive"|trans }}
-							</p>
-						{% endif %}
-					</h1>
-				</div>
 
-				<div class="col-md-6">
-					<div class="float-end">
-						<h1>
-							<span class="badge text-bg-chill-green text-white">{{'open' | trans}}</span>
-						</h1>
-						<h3 class="fst-italic">{{'since' | trans}}</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">{{'concerned_patient' | trans}}</h3>
-					<h2>
-						{% for person in ticket.getPersons()  %}
-							<span class="badge text-bg-light">
-								{{ person.firstName }}
-								{{ person.lastName }}
-							</span>
-						{% endfor %}
-					</h2>
-				</div>
-				<div class="col-md-4 col-sm-12">
-					<h3 class="text-primary">{{'caller' | trans}}</h3>
-					<h2></h2>
-				</div>
-				<div class="col-md-4 col-sm-12">
-					<h3 class="text-primary">{{'speaker' | trans}}</h3>
-					<h2>
-						{% for addressee in ticket.getCurrentAddressee() %}
-							<span class="badge text-bg-light">
 
-								{{ addressee.label.fr }}
-
-							</span>
-						{% endfor %}
-					</h2>
-				</div>
-			</div>
-		</div>
 	</div>
 </div>
diff --git a/src/Bundle/ChillTicketBundle/src/Serializer/Normalizer/TicketNormalizer.php b/src/Bundle/ChillTicketBundle/src/Serializer/Normalizer/TicketNormalizer.php
index f7aff602b..938ee2e9b 100644
--- a/src/Bundle/ChillTicketBundle/src/Serializer/Normalizer/TicketNormalizer.php
+++ b/src/Bundle/ChillTicketBundle/src/Serializer/Normalizer/TicketNormalizer.php
@@ -42,6 +42,8 @@ final class TicketNormalizer implements NormalizerInterface, NormalizerAwareInte
             'currentInputs' => $this->normalizer->normalize($object->getCurrentInputs(), $format, ['groups' => 'read']),
             'currentMotive' => $this->normalizer->normalize($object->getMotive(), $format, ['groups' => 'read']),
             'history' => array_values($this->serializeHistory($object, $format, ['groups' => 'read'])),
+            'createdAt' => $object->getCreatedAt(),
+            'updatedBy' => $object->getUpdatedBy(),
         ];
     }
 
diff --git a/src/Bundle/ChillTicketBundle/src/translations/messages.fr.yaml b/src/Bundle/ChillTicketBundle/src/translations/messages.fr.yaml
deleted file mode 100644
index bcc75537e..000000000
--- a/src/Bundle/ChillTicketBundle/src/translations/messages.fr.yaml
+++ /dev/null
@@ -1,6 +0,0 @@
-concerned_patient: Patient concerné
-caller: Appelant
-speaker: Intervenant
-open: Ouvert
-since: Depuis
-no_motive: Pas de motif

From ab850b7b705bedaff2b73875b3eaeddfd988261b Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@gmail.com>
Date: Mon, 6 May 2024 20:07:15 +0200
Subject: [PATCH 21/28] Fusionner les utilisateurs/goupes en une "Card"

---
 .../_components/Entity/UserRenderBoxBadge.vue |  1 +
 .../src/Resources/public/types.ts             |  3 +-
 .../Resources/public/vuejs/TicketApp/App.vue  | 36 +++++++---
 .../TicketHistoryAddresseeComponent.vue       | 21 +++---
 .../components/TicketHistoryListComponent.vue | 67 ++++++++++++-------
 .../public/vuejs/TicketApp/i18n/messages.ts   |  6 +-
 .../vuejs/TicketApp/store/modules/ticket.ts   | 19 +++++-
 7 files changed, 104 insertions(+), 49 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue
index a9c2db9b4..7655f5878 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue
@@ -1,6 +1,7 @@
 <template>
 <span class="chill-entity entity-user">
     {{ user.label }}
+    {{ user }}
     <span class="user-job" v-if="user.user_job !== null">({{ user.user_job.label.fr }})</span> <span class="main-scope" v-if="user.main_scope !== null">({{ user.main_scope.name.fr }})</span> <span v-if="user.isAbsent" class="badge bg-danger rounded-pill" :title="Absent">A</span>
 </span>
 </template>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
index 1af87d044..5ff90bc42 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
@@ -68,8 +68,9 @@ interface AddPersonEvent extends TicketHistory<"add_person", PersonHistory> {};
 interface AddCommentEvent extends TicketHistory<"add_comment", Comment> {};
 interface SetMotiveEvent extends TicketHistory<"set_motive", MotiveHistory> {};
 interface AddAddressee extends TicketHistory<"add_addressee", AddresseeHistory> {};
+interface RemoveAddressee extends TicketHistory<"remove_addressee", AddresseeHistory> {};
 
-type TicketHistoryLine = AddPersonEvent | AddCommentEvent | SetMotiveEvent | AddAddressee;
+type TicketHistoryLine = AddPersonEvent | AddCommentEvent | SetMotiveEvent | AddAddressee | RemoveAddressee;
 
 export interface Ticket {
     type: "ticket_ticket",
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 e738bd10a..a605fd416 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
@@ -52,17 +52,27 @@
                 </div>
                 <div class="col-md-6 col-sm-12">
                     <h3 class="text-primary">{{ $t("banner.speaker") }}</h3>
+
                     <h2>
+                        <!-- Not rendering correctly -->
+                        <!-- <user-render-box-badge
+                            v-for="user in ticket.currentAddressees.filter((addressee) => addressee.type == 'user')"
+                            :user="user"
+                            :key="user.id"
+                        /> -->
                         <span
                             class="badge text-bg-light m-1"
-                            v-for="addressee in ticket.currentAddressees"
-                            :key="addressee.id"
+                            v-for="user_group in ticket.currentAddressees.filter((addressee) => addressee.type == 'user') as Array<User>"
+                            :key="user_group.id"
                         >
-                            {{
-                                typeof addressee.label == "string"
-                                    ? addressee.label
-                                    : addressee.label.fr
-                            }}
+                            {{ user_group.label }}
+                        </span>
+                        <span
+                            class="badge text-bg-light m-1"
+                            v-for="user_group in ticket.currentAddressees.filter((addressee) => addressee.type == 'user_group') as Array<UserGroup>"
+                            :key="user_group.id"
+                        >
+                            {{ user_group.label.fr }}
                         </span>
                     </h2>
                 </div>
@@ -71,7 +81,7 @@
     </Teleport>
     <div class="container-xxl pt-1" style="padding-bottom: 55px">
         <ticket-selector-component :tickets="[]" />
-        <ticket-history-list-component :history="ticket.history" />
+        <ticket-history-list-component :history="ticketHistory" />
     </div>
     <action-toolbar-component />
 </template>
@@ -81,6 +91,11 @@ import { computed, defineComponent, inject, onMounted, ref } from "vue";
 import { useStore } from "vuex";
 
 // Types
+import {
+    DateTime,
+    User,
+    UserGroup,
+} from "../../../../../../ChillMainBundle/Resources/public/types";
 import { Motive, Ticket } from "../../types";
 
 // Components
@@ -88,7 +103,6 @@ import TicketSelectorComponent from "./components/TicketSelectorComponent.vue";
 import TicketHistoryListComponent from "./components/TicketHistoryListComponent.vue";
 import ActionToolbarComponent from "./components/ActionToolbarComponent.vue";
 import UserRenderBoxBadge from "../../../../../../ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue";
-import { DateTime } from "../../../../../../ChillMainBundle/Resources/public/types";
 
 export default defineComponent({
     name: "App",
@@ -107,6 +121,9 @@ export default defineComponent({
 
         const motives = computed(() => store.getters.getMotives as Motive[]);
         const ticket = computed(() => store.getters.getTicket as Ticket);
+        const ticketHistory = computed(
+            () => store.getters.getDistinctAddressesHistory
+        );
 
         function getSince(createdAt: DateTime) {
             const today = new Date();
@@ -127,6 +144,7 @@ export default defineComponent({
         });
 
         return {
+            ticketHistory,
             headline,
             motives,
             ticket,
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent.vue
index 3e4203561..234dfb26f 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent.vue
@@ -1,19 +1,17 @@
 <template>
-    <div class="col-12" v-if="addressee.type == 'user_group'">
-        <i class="fa fa-paper-plane"></i>
-        <span class="mx-1">
+    <div class="col-12" >
+        <i class="fa fa-paper-plane" v-if="event_type === 'add_addressee'"></i>
+        <i class="fa fa-paper-plane-o" v-else></i>
+        <span class="mx-1" v-if="addressee.type == 'user_group'">
             {{
-                $t("history.transfert_user_group", {
+                $t(`history.${event_type}_user_group`, {
                     user_group: addressee.label.fr,
                 })
             }}
         </span>
-    </div>
-    <div class="col-12" v-if="addressee.type == 'user'">
-        <i class="fa fa-paper-plane"></i>
-        <span class="mx-1">
+        <span class="mx-1" v-else-if="addressee.type == 'user'">
             {{
-                $t("history.transfert_user", {
+                $t(`history.${event_type}_user`, {
                     user: addressee.username,
                 })
             }}
@@ -35,8 +33,11 @@ export default defineComponent({
             type: Object as PropType<AddresseeHistory>,
             required: true,
         },
+        event_type: {
+            type: String,
+            required: true,
+        },
     },
-
     setup(props, ctx) {
         return {
             addressee: ref(props.addresseeHistory.addressee as UserGroupOrUser),
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
index 4d0722c14..8c301178f 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryListComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryListComponent.vue
@@ -4,32 +4,47 @@
         v-for="history_line in history"
         :key="history.indexOf(history_line)"
     >
-        <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">
-            <ticket-history-person-component
-                :personHistory="history_line.data"
-                v-if="history_line.event_type == 'add_person'"
-            />
-            <ticket-history-motive-component
-                :motiveHistory="history_line.data"
-                v-else-if="history_line.event_type == 'set_motive'"
-            />
-            <ticket-history-comment-component
-                :commentHistory="history_line.data"
-                v-else-if="history_line.event_type == 'add_comment'"
-            />
-            <ticket-history-addressee-component
-                :addresseeHistory="history_line.data"
-                v-else-if="history_line.event_type == 'add_addressee'"
-            />
-        </div>
+        <template v-if="!Array.isArray(history_line)">
+            <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">
+                <ticket-history-person-component
+                    :personHistory="history_line.data"
+                    v-if="history_line.event_type == 'add_person'"
+                />
+                <ticket-history-motive-component
+                    :motiveHistory="history_line.data"
+                    v-else-if="history_line.event_type == 'set_motive'"
+                />
+                <ticket-history-comment-component
+                    :commentHistory="history_line.data"
+                    v-else-if="history_line.event_type == 'add_comment'"
+                />
+            </div>
+        </template>
+        <template v-else>
+            <div class="card-header">
+                <span class="fw-bold fst-italic">
+                    {{ formatDate(history_line[0].at) }}
+                </span>
+                <span class="badge bg-white text-black mx-1">{{
+                    history_line[0].by.username
+                }}</span>
+            </div>
+            <div
+                class="card-body row fst-italic"
+                v-for="addressee in history_line"
+                :key="history_line.indexOf(addressee)"
+            >
+                <ticket-history-addressee-component :addresseeHistory="addressee.data" :event_type="addressee.event_type"/>
+            </div>
+        </template>
     </div>
 </template>
 
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 31f5c94d7..77b63977e 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
@@ -10,8 +10,10 @@ const messages = {
             user: "Prise en charge par {username}",
             motive: "Motif indiqué: {motive}",
             comment: "Commentaire: {comment}",
-            transfert_user_group: "Transferé au groupe: {user_group}",
-            transfert_user: "Transferé vers l'utilisateur: {user}",
+            add_addressee_user_group: "Groupe {user_group} transferé",
+            remove_addressee_user_group: "Groupe {user_group} retiré",
+            add_addressee_user: " Utilisateur {user} Transferé",
+            remove_addressee_user: "Utilisateur {user} retiré",
         },
         comment: {
             title: "Commentaire",
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
index c02b520eb..f3db197c2 100644
--- 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
@@ -14,7 +14,24 @@ export const moduleTicket: Module<State, RootState> ={
     getters: {
         getTicket(state) {
             return state.ticket;
-          }
+          },
+        getDistinctAddressesHistory(state) {
+            const addresseeHistory = state.ticket.history.reduce((result, item) => {
+                const { datetime } = item.at;
+                if (!["add_addressee","remove_addressee"].includes(item.event_type)) {
+                    result[datetime] = item
+                    return result;
+                }
+
+                if (!result[datetime]) {
+                    result[datetime] = [];
+                }
+                result[datetime].push(item);
+                return result;
+            }, {} as any);
+            return Object.values(addresseeHistory) as Array<Ticket["history"]>;
+        }
+
     },
     mutations: {
         setTicket(state, ticket) {

From 19af0feb5723e0684f1455e9477a717e95353302 Mon Sep 17 00:00:00 2001
From: Boris Waaub <boriswaaub@Mac-Studio-de-Boris.local>
Date: Wed, 8 May 2024 17:54:03 +0200
Subject: [PATCH 22/28] Use PersonRenderBox

---
 .../Resources/public/vuejs/TicketApp/App.vue  | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

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 a605fd416..6a7ee99f0 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
@@ -40,26 +40,29 @@
                 <div class="col-md-6 col-sm-12 ps-md-5 ps-xxl-0">
                     <h3 class="text-primary">{{ $t("banner.caller") }}</h3>
                     <h2>
-                        <span
-                            class="badge text-bg-light m-1"
+                        <person-render-box
+                            render="badge"
                             v-for="person in ticket.currentPersons"
                             :key="person.id"
-                        >
-                            {{ person.firstName }}
-                            {{ person.lastName }}
-                        </span>
+                            :person="person"
+                            :options="{
+                                addLink: true,
+                                addId: false,
+                                addAltNames: false,
+                                addEntity: true,
+                                addInfo: true,
+                                hLevel: 3,
+                                isMultiline: true,
+                                isConfidential: false,
+
+                            }"
+                        />
                     </h2>
                 </div>
                 <div class="col-md-6 col-sm-12">
                     <h3 class="text-primary">{{ $t("banner.speaker") }}</h3>
 
                     <h2>
-                        <!-- Not rendering correctly -->
-                        <!-- <user-render-box-badge
-                            v-for="user in ticket.currentAddressees.filter((addressee) => addressee.type == 'user')"
-                            :user="user"
-                            :key="user.id"
-                        /> -->
                         <span
                             class="badge text-bg-light m-1"
                             v-for="user_group in ticket.currentAddressees.filter((addressee) => addressee.type == 'user') as Array<User>"
@@ -102,7 +105,7 @@ import { Motive, Ticket } from "../../types";
 import TicketSelectorComponent from "./components/TicketSelectorComponent.vue";
 import TicketHistoryListComponent from "./components/TicketHistoryListComponent.vue";
 import ActionToolbarComponent from "./components/ActionToolbarComponent.vue";
-import UserRenderBoxBadge from "../../../../../../ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue";
+import PersonRenderBox from "../../../../../../ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue";
 
 export default defineComponent({
     name: "App",
@@ -110,7 +113,7 @@ export default defineComponent({
         TicketSelectorComponent,
         TicketHistoryListComponent,
         ActionToolbarComponent,
-        UserRenderBoxBadge,
+        PersonRenderBox,
     },
     setup() {
         const store = useStore();

From 1d33ae1e399d609a00a8c5e06457451350098839 Mon Sep 17 00:00:00 2001
From: Boris Waaub <boriswaaub@Mac-Studio-de-Boris.local>
Date: Wed, 8 May 2024 18:03:50 +0200
Subject: [PATCH 23/28] use ckeditor

---
 .../components/ActionToolbarComponent.vue         | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

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
index d188bdab0..9d35dbcd5 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
@@ -11,8 +11,15 @@
 
                 <div v-if="activeTab === 'comment'">
                     <form @submit.prevent="createComment">
-                        <textarea v-model="content" class="form-control" id="content" rows="3"
-                            :placeholder="$t('comment.label')"></textarea>
+                        <ckeditor
+                        name="content"
+                        :placeholder="$t('comment.content')"
+                        :editor="editor"
+                        v-model="content"
+                        tag-name="textarea">
+                        </ckeditor>
+                        <!-- <textarea v-model="content" class="form-control" id="content" rows="3"
+                            :placeholder="$t('comment.label')"></textarea> -->
 
                         <div class="d-flex justify-content-end p-2">
                             <button class="btn btn-chill-green text-white float-right" type="submit">
@@ -84,6 +91,8 @@
 import { computed, defineComponent, inject, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
+import CKEditor from '@ckeditor/ckeditor5-vue';
+import ClassicEditor from "../../../../../../../ChillMainBundle/Resources/public/module/ckeditor5";
 
 // Types
 import { User, UserGroup, UserGroupOrUser } from "../../../../../../../ChillMainBundle/Resources/public/types";
@@ -98,6 +107,7 @@ export default defineComponent({
     components: {
         MotiveSelectorComponent,
         AddresseeSelectorComponent,
+        ckeditor: CKEditor.component,
     },
     setup() {
         const store = useStore();
@@ -162,6 +172,7 @@ export default defineComponent({
             addressees,
             users,
             content,
+            editor: ClassicEditor,
             createMotive,
             createComment,
             setAdressees,

From 821fce3dd8fd83377f1f906de9bb1dfa8f7d3cda Mon Sep 17 00:00:00 2001
From: Boris Waaub <boriswaaub@Mac-Studio-de-Boris.local>
Date: Mon, 13 May 2024 11:38:28 +0200
Subject: [PATCH 24/28] =?UTF-8?q?$tc=20n'est=20plus=20support=C3=A9=20pour?=
 =?UTF-8?q?=20i18n=20composiontion=20api,=20il=20faut=20utiliser=20$t.=20S?=
 =?UTF-8?q?ource=20:=20https://github.com/intlify/vue-cli-plugin-i18n/issu?=
 =?UTF-8?q?es/214=20i18n=20composion=20api=20:=20https://vue-i18n.intlify.?=
 =?UTF-8?q?dev/api/composition?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vuejs/AccompanyingCourse/components/PersonsAssociated.vue | 4 ++--
 .../public/vuejs/AccompanyingCourse/components/Resources.vue  | 4 ++--
 .../vuejs/HouseholdMembersEditor/components/Household.vue     | 2 +-
 .../Resources/public/vuejs/_components/AddPersons.vue         | 4 ++--
 .../public/vuejs/_components/Entity/PersonRenderBox.vue       | 2 +-
 .../Resources/public/vuejs/_components/Entity/PersonText.vue  | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
index 7762ed29e..62f094920 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
@@ -3,10 +3,10 @@
    <h2><a id="section-10"></a>{{ $t('persons_associated.title')}}</h2>
 
    <div v-if="currentParticipations.length > 0">
-      <label class="col-form-label">{{ $tc('persons_associated.counter', counter) }}</label>
+      <label class="col-form-label">{{ $t('persons_associated.counter', { count: counter }) }}</label>
    </div>
    <div v-else>
-      <label class="chill-no-data-statement">{{ $tc('persons_associated.counter', counter) }}</label>
+      <label class="chill-no-data-statement">{{ $t('persons_associated.counter', { count: counter }) }}</label>
    </div>
 
    <div v-if="participationWithoutHousehold.length > 0" class="alert alert-warning no-household">
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
index 7287437a3..78da9ade8 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
@@ -4,10 +4,10 @@
    <h2><a id="section-90"></a>{{ $t('resources.title')}}</h2>
 
    <div v-if="resources.length > 0">
-      <label class="col-form-label">{{ $tc('resources.counter', counter) }}</label>
+      <label class="col-form-label">{{ $t('resources.counter', { count: counter }) }}</label>
    </div>
    <div v-else>
-      <label class="chill-no-data-statement">{{ $tc('resources.counter', counter) }}</label>
+      <label class="chill-no-data-statement">{{ $t('resources.counter', { count: counter }) }}</label>
    </div>
 
    <div class="flex-table mb-3">
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
index c9b1b8f8a..9e129a4e3 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
@@ -23,7 +23,7 @@
                   data-bs-toggle="collapse"
                   aria-expanded="false"
                   @click="toggleHouseholdSuggestion">
-            {{ $tc('household_members_editor.show_household_suggestion', countHouseholdSuggestion) }}
+            {{ $t('household_members_editor.show_household_suggestion', { count: countHouseholdSuggestion }) }}
           </button>
           <button v-if="showHouseholdSuggestion"
                   class="accordion-button"
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index 05f622d00..e24724062 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -17,7 +17,7 @@
                <div class="search">
 
                   <label class="col-form-label" style="float: right;">
-                     {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
+                     {{ $t('add_persons.suggested_counter', { count: suggestedCounter }) }}
                   </label>
 
                   <input id="search-persons"
@@ -42,7 +42,7 @@
                      </a>
                   </span>
                   <span v-if="selectedCounter > 0">
-                     {{ $tc('add_persons.selected_counter', selectedCounter) }}
+                     {{ $t('add_persons.selected_counter', { count: selectedCounter }) }}
                   </span>
                </div>
             </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
index 100dc9caf..e44e10d63 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -53,7 +53,7 @@
               </time>
 
               <span v-if="options.addAge && person.birthdate" class="age">{{
-                  $tc('renderbox.years_old', person.age)
+                    {{ $t('renderbox.years_old', { n: person.age }) }}
                 }}</span>
             </p>
           </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonText.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonText.vue
index 8b991e3da..040a14327 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonText.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonText.vue
@@ -7,7 +7,7 @@
             <span :class="'altname altname-' + altNameKey"> ({{ altNameLabel }})</span>
         </span>
         <span v-if="person.suffixText" class="suffixtext">&nbsp;{{ person.suffixText }}</span>
-        <span class="age" v-if="this.addAge && person.birthdate !== null && person.deathdate === null">{{ $tc('renderbox.years_old', person.age) }}</span>
+        <span class="age" v-if="this.addAge && person.birthdate !== null && person.deathdate === null">{{ $t('renderbox.years_old', { n: person.age }) }}</span>
         <span v-else-if="this.addAge && person.deathdate !== null">&nbsp;(‡)</span>
     </span>
 </template>

From d6f5eae0c90d71e80502df3423930a82650ed9a1 Mon Sep 17 00:00:00 2001
From: Boris Waaub <boriswaaub@Mac-Studio-de-Boris.local>
Date: Mon, 13 May 2024 11:59:50 +0200
Subject: [PATCH 25/28] Rendre les commentaire markdown

---
 .../components/ActionToolbarComponent.vue     |  2 -
 .../TicketHistoryCommentComponent.vue         | 52 ++++++++++++++++---
 2 files changed, 45 insertions(+), 9 deletions(-)

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
index 9d35dbcd5..818a46536 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
@@ -18,8 +18,6 @@
                         v-model="content"
                         tag-name="textarea">
                         </ckeditor>
-                        <!-- <textarea v-model="content" class="form-control" id="content" rows="3"
-                            :placeholder="$t('comment.label')"></textarea> -->
 
                         <div class="d-flex justify-content-end p-2">
                             <button class="btn btn-chill-green text-white float-right" type="submit">
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCommentComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCommentComponent.vue
index c793adc05..c50c44194 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCommentComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCommentComponent.vue
@@ -2,28 +2,66 @@
     <div class="col-12">
         <i class="fa fa-comment"></i>
         <span class="mx-1">
-            {{ $t('history.comment',{ comment: commentHistory.content}) }}
+            {{ $t("history.comment") }}
         </span>
+        <div class="mt-2">
+            <div v-html="convertMarkdownToHtml(commentHistory.content)"></div>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
-
-import { PropType, defineComponent } from 'vue';
+import { PropType, defineComponent } from "vue";
+import { marked } from "marked";
+import DOMPurify from "dompurify";
 
 // Types
-import { Comment } from '../../../types';
+import { Comment } from "../../../types";
 
 export default defineComponent({
-    name: 'TicketHistoryCommentComponent',
+    name: "TicketHistoryCommentComponent",
     props: {
         commentHistory: {
             type: Object as PropType<Comment>,
             required: true,
         },
     },
-    setup() {}
+    setup() {
+
+        const preprocess = (markdown: string): string => {
+            return markdown;
+        };
+
+        const postprocess = (html: string): string => {
+            DOMPurify.addHook("afterSanitizeAttributes", (node: any) => {
+                if ("target" in node) {
+                    node.setAttribute("target", "_blank");
+                    node.setAttribute("rel", "noopener noreferrer");
+                }
+                if (
+                    !node.hasAttribute("target") &&
+                    (node.hasAttribute("xlink:href") ||
+                        node.hasAttribute("href"))
+                ) {
+                    node.setAttribute("xlink:show", "new");
+                }
+            });
+
+            return DOMPurify.sanitize(html);
+        };
+
+        const convertMarkdownToHtml = (markdown: string): string => {
+            marked.use({ hooks: { postprocess, preprocess } });
+            const rawHtml = marked(markdown) as string;
+            return rawHtml;
+        };
+        return {
+            convertMarkdownToHtml,
+        };
+    },
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+
+</style>

From 8991f0ef3f3ec3526bacb708280bcafa1d2623f3 Mon Sep 17 00:00:00 2001
From: Boris Waaub <boriswaaub@Mac-Studio-de-Boris.local>
Date: Mon, 13 May 2024 12:00:11 +0200
Subject: [PATCH 26/28] Modification i18n

---
 .../src/Resources/public/vuejs/TicketApp/i18n/messages.ts    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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 77b63977e..219c834bf 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,4 +1,5 @@
 import { multiSelectMessages } from "../../../../../../../ChillMainBundle/Resources/public/vuejs/_js/i18n";
+import { personMessages } from "../../../../../../../ChillPersonBundle/Resources/public/vuejs/_js/i18n";
 
 const messages = {
     fr: {
@@ -9,7 +10,7 @@ const messages = {
             person: "Ouverture par appel téléphonique de {person}",
             user: "Prise en charge par {username}",
             motive: "Motif indiqué: {motive}",
-            comment: "Commentaire: {comment}",
+            comment: "Commentaire",
             add_addressee_user_group: "Groupe {user_group} transferé",
             remove_addressee_user_group: "Groupe {user_group} retiré",
             add_addressee_user: " Utilisateur {user} Transferé",
@@ -20,6 +21,7 @@ const messages = {
             label: "Ajouter un commentaire",
             save: "Enregistrer",
             succcess: "Commentaire enregistré",
+            content: "Ajouter un commentaire",
         },
         motive: {
             title: "Motif",
@@ -46,4 +48,5 @@ const messages = {
     },
 };
 Object.assign(messages.fr, multiSelectMessages.fr);
+Object.assign(messages.fr, personMessages.fr);
 export default messages;

From d00b76ffcd23aaead1018b2b8cf4124bca5feaf8 Mon Sep 17 00:00:00 2001
From: Boris Waaub <boriswaaub@Mac-Studio-de-Boris.local>
Date: Mon, 13 May 2024 12:16:07 +0200
Subject: [PATCH 27/28] =?UTF-8?q?$tc=20n'est=20plus=20support=C3=A9=20pour?=
 =?UTF-8?q?=20i18n=20composition=20api,=20il=20faut=20utiliser=20$t.=20FIX?=
 =?UTF-8?q?:=20Person=20PersonRenderBox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../public/vuejs/_components/Entity/PersonRenderBox.vue       | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
index e44e10d63..2bd09eb1c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -52,9 +52,7 @@
                 {{ $t('renderbox.deathdate') + ' ' + deathdate }}
               </time>
 
-              <span v-if="options.addAge && person.birthdate" class="age">{{
-                    {{ $t('renderbox.years_old', { n: person.age }) }}
-                }}</span>
+              <span v-if="options.addAge && person.birthdate" class="age">{{ $t('renderbox.years_old', { n: person.age }) }}</span>
             </p>
           </div>
         </div>

From f0045edd6c5cf9289c8bb9257de1b9a2a84d0adf Mon Sep 17 00:00:00 2001
From: Boris Waaub <boriswaaub@Mac-Studio-de-Boris.local>
Date: Mon, 13 May 2024 12:33:11 +0200
Subject: [PATCH 28/28] FIX: Ouvert depuis

---
 .../src/Resources/public/vuejs/TicketApp/App.vue           | 7 ++++---
 .../src/Resources/public/vuejs/TicketApp/i18n/messages.ts  | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

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 6a7ee99f0..305e22896 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
@@ -22,7 +22,7 @@
                         <h3 class="fst-italic" v-if="ticket.createdAt">
                             {{
                                 $t("banner.since", {
-                                    days: getSince(ticket.createdAt),
+                                    count: getSince(ticket.createdAt),
                                 })
                             }}
                         </h3>
@@ -128,9 +128,10 @@ export default defineComponent({
             () => store.getters.getDistinctAddressesHistory
         );
 
-        function getSince(createdAt: DateTime) {
+        function getSince(createdAt: any) {
             const today = new Date();
-            const date = new Date(createdAt.datetime);
+            const date = new Date(createdAt.date);
+
             const timeDiff = Math.abs(today.getTime() - date.getTime());
             const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
             return daysDiff;
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 219c834bf..7175a7fe3 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
@@ -42,7 +42,7 @@ const messages = {
             caller: "Appelant",
             speaker: "Intervenant",
             open: "Ouvert",
-            since: "Depuis 1 jour | Depuis {days} jour(s)",
+            since: "Aucun jour | Depuis 1 jour | Depuis {count} jours",
             no_motive: "Pas de motif",
         },
     },