From 0d74f0980fd592c6674e9bf562c91ceecddf9fe4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Mon, 3 Jun 2024 12:50:29 +0200
Subject: [PATCH] Multiple fixes and improvements

---
 .../Resources/public/chill/scss/badge.scss    |  4 +-
 .../src/Resources/public/types.ts             |  2 +-
 .../components/ActionToolbarComponent.vue     |  3 +
 .../components/AddresseeComponent.vue         | 22 +++---
 .../TicketApp/components/BannerComponent.vue  | 19 +++--
 .../components/TicketHistoryListComponent.vue | 69 +++++++++++++++----
 .../public/vuejs/TicketApp/i18n/messages.ts   | 10 +--
 .../src/Resources/views/Ticket/list.html.twig |  2 +-
 .../Normalizer/TicketNormalizer.php           |  4 +-
 9 files changed, 91 insertions(+), 44 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
index 407a17f6d..d1faf5614 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
@@ -6,8 +6,7 @@ span.badge-user,
 span.badge-user-group,
 span.badge-person,
 span.badge-thirdparty {
-    margin-top: 0.2rem;
-    margin-bottom: 0.2rem;
+    margin: 0.2rem 0.1rem;
     display: inline-block;
     padding: 0 0.5em !important;
     background-color: $white;
@@ -23,6 +22,7 @@ span.badge-thirdparty {
 
 span.badge-user-group {
     font-weight: 600;
+    border-width: 0px;
 }
 
 span.badge-user {
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
index 55607e2a4..d4115083e 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
@@ -75,7 +75,7 @@ interface SetMotiveEvent extends TicketHistory<"set_motive", MotiveHistory> {};
 //interface RemoveAddressee extends TicketHistory<"remove_addressee", AddresseeHistory> {};
 interface AddresseesStateEvent extends TicketHistory<"addressees_state", AddresseeState> {};
 
-type TicketHistoryLine = AddPersonEvent | AddCommentEvent | SetMotiveEvent | /*AddAddressee | RemoveAddressee | */ AddresseesStateEvent;
+export type TicketHistoryLine = AddPersonEvent | AddCommentEvent | SetMotiveEvent | /*AddAddressee | RemoveAddressee | */ AddresseesStateEvent;
 
 export interface Ticket {
     type: "ticket_ticket",
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 aa299ad26..f21dc1278 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
@@ -50,6 +50,9 @@
                 <li v-if="hasReturnPath" class="nav-item p-2 go-back">
                     <a :href="returnPath" class="btn btn-cancel">Annuler</a>
                 </li>
+                <li v-else class="nav-item p-2 go-back">
+                    <a href="/fr/ticket/ticket/list" class="btn btn-cancel">Annuler</a>
+                </li>
                 <li class="nav-item p-2">
                     <button
                         type="button"
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeComponent.vue
index 966e15946..9f1d76d59 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeComponent.vue
@@ -1,31 +1,29 @@
 <template>
-    <h3>
         <div class="col-12">
             <span
-                class="badge m-1"
-                :style="`background-color: ${userGroup.backgroundColor}; color: white;`"
                 v-for="userGroup in userGroupLevels"
                 :key="userGroup.id"
+                class="badge-user-group"
+                :style="`background-color: ${userGroup.backgroundColor}; color: ${userGroup.foregroundColor};`"
             >
                 {{ userGroup.label.fr }}
             </span>
         </div>
         <div class="col-12">
             <span
-                class="badge m-1"
-                :style="`background-color: ${userGroup.backgroundColor}; color: white;`"
                 v-for="userGroup in userGroups"
                 :key="userGroup.id"
+                class="badge-user-group"
+                :style="`background-color: ${userGroup.backgroundColor}; color: ${userGroup.foregroundColor};`"
             >
                 {{ userGroup.label.fr }}
             </span>
         </div>
-    </h3>
-    <div class="col-12">
-        <span class="badge bg-primary m-1" v-for="user in users" :key="user.id">
-            {{ user.label }}
-        </span>
-    </div>
+        <div v-if="users.length > 0" class="col-12">
+            <span class="badge-user">
+                <user-render-box-badge v-for="user in users" :key="user.id" :user="user"></user-render-box-badge>
+            </span>
+        </div>
 </template>
 
 <script lang="ts">
@@ -37,9 +35,11 @@ import {
     UserGroup,
     UserGroupOrUser,
 } from "../../../../../../../ChillMainBundle/Resources/public/types";
+import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge.vue";
 
 export default defineComponent({
     name: "AddresseeComponent",
+    components: {UserRenderBoxBadge},
     props: {
         addressees: {
             type: Array as PropType<UserGroupOrUser[]>,
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
index 745847858..b9535c284 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue
@@ -14,20 +14,18 @@
 
                 <div class="col-md-6 col-sm-12">
                     <div class="d-flex justify-content-end">
-                        <h1>
-                            <span class="badge text-bg-chill-green text-white">
-                                {{ $t("banner.open") }}
-                            </span>
-                        </h1>
+                        <span class="badge text-bg-chill-green text-white" style="font-size: 1rem;">
+                            {{ $t("banner.open") }}
+                        </span>
                     </div>
                     <div class="d-flex justify-content-end">
-                        <h3 class="fst-italic" v-if="ticket.createdAt">
+                        <p class="created-at-timespan" v-if="ticket.createdAt">
                             {{
                                 $t("banner.since", {
                                     time: since,
                                 })
                             }}
-                        </h3>
+                        </p>
                     </div>
                 </div>
             </div>
@@ -53,6 +51,13 @@
     </Teleport>
 </template>
 
+<style lang="scss">
+.created-at-timespan {
+    font-weight: 600;
+    font-variant: all-petite-caps;
+}
+</style>
+
 <script lang="ts">
 import { PropType, computed, defineComponent, ref } from "vue";
 import { useI18n } from "vue-i18n";
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 512a1e5c5..c22b625c9 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
@@ -5,13 +5,22 @@
         :key="history.indexOf(history_line)"
     >
         <div class="card-header">
-            <i :class="`${actionIcons[history_line.event_type]} me-1`"></i>
-            <span class="fw-bold fst-italic mx-1">
-                {{ formatDate(history_line.at) }}
-            </span>
-            <span class="badge bg-white text-black mx-1">
-                {{ history_line.by.username }}
-            </span>
+            <div class="history-header">
+                <div class="description">
+                    <i :class="`${actionIcons[history_line.event_type]} me-1`"></i>
+                    <span>{{ explainSentence(history_line) }}</span>
+                </div>
+                <div>
+                    <span class="fw-bold fst-italic mx-1">
+                        {{ formatDate(history_line.at) }}
+                    </span>
+                </div>
+                <div>
+                    <span class="badge-user">
+                    <user-render-box-badge :user="history_line.by"></user-render-box-badge>
+                    </span>
+                </div>
+            </div>
         </div>
         <div class="card-body row">
             <ticket-history-person-component
@@ -35,22 +44,25 @@
 </template>
 
 <script lang="ts">
-import { PropType, defineComponent, ref } from "vue";
+import {PropType, defineComponent, ref, computed} from "vue";
 import { useStore } from "vuex";
 
 // Types
 import { DateTime } from "../../../../../../../ChillMainBundle/Resources/public/types";
-import { Ticket } from "../../../types";
+import {Ticket, TicketHistoryLine} from "../../../types";
 
 // Components
 import TicketHistoryPersonComponent from "./TicketHistoryPersonComponent.vue";
 import TicketHistoryMotiveComponent from "./TicketHistoryMotiveComponent.vue";
 import TicketHistoryCommentComponent from "./TicketHistoryCommentComponent.vue";
 import TicketHistoryAddresseeComponent from "./TicketHistoryAddresseeComponent.vue";
+import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge.vue";
+import {ISOToDatetime} from "../../../../../../../ChillMainBundle/Resources/public/chill/js/date";
 
 export default defineComponent({
     name: "TicketHistoryListComponent",
     components: {
+        UserRenderBoxBadge,
         TicketHistoryPersonComponent,
         TicketHistoryMotiveComponent,
         TicketHistoryCommentComponent,
@@ -58,7 +70,7 @@ export default defineComponent({
     },
     props: {
         history: {
-            type: Array as PropType<Ticket["history"]>,
+            type: Array as PropType<TicketHistoryLine[]>,
             required: true,
         },
     },
@@ -66,15 +78,44 @@ export default defineComponent({
     setup() {
         const store = useStore();
 
-        function formatDate(d: DateTime) {
-            const date = new Date(d.datetime);
+        const explainSentence = (history: TicketHistoryLine): string => {
+            switch (history.event_type) {
+                case "add_comment":
+                    return "Nouveau commentaire";
+                case "addressees_state":
+                    return "Attributions";
+                case "add_person":
+                    return "Patients concernés";
+                case "set_motive":
+                    return "Nouveau motifs";
+                }
+            };
+
+        function formatDate(d: DateTime): string {
+            const date = ISOToDatetime(d.datetime);
+
+            if (date === null) {
+                return "";
+            }
+
             const month = date.toLocaleString("default", { month: "long" });
             return `${date.getDate()} ${month} ${date.getFullYear()}, ${date.toLocaleTimeString()}`;
         }
 
-        return { actionIcons: ref(store.getters.getActionIcons), formatDate };
+        return { actionIcons: ref(store.getters.getActionIcons), formatDate, explainSentence };
     },
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+div.history-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+
+    & > div.description {
+        margin-right: auto;
+    }
+}
+</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 39b034075..92bd7873e 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
@@ -27,15 +27,15 @@ const messages = {
             error: "Aucun motif sélectionné",
         },
         add_addressee: {
-            title: "Transfert",
-            user_group_label: "Transferer vers un groupe",
-            user_label: "Transferer vers un ou plusieurs utilisateurs",
-            success: "Transfert effectué",
+            title: "Attribuer",
+            user_group_label: "Attributer à un groupe",
+            user_label: "Attribuer à un ou plusieurs utilisateurs",
+            success: "Attribution effectuée",
             error: "Aucun destinataire sélectionné",
         },
         banner: {
             concerned_patient: "Patient concerné",
-            speaker: "Destinataire(s)",
+            speaker: "Attribué à",
             open: "Ouvert",
             since: "Depuis {time}",
             and: "et",
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/views/Ticket/list.html.twig b/src/Bundle/ChillTicketBundle/src/Resources/views/Ticket/list.html.twig
index b4e58ca00..a1bc6b2cb 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/views/Ticket/list.html.twig
+++ b/src/Bundle/ChillTicketBundle/src/Resources/views/Ticket/list.html.twig
@@ -62,7 +62,7 @@
                                 {% endif %}
                                 {% if ticket.currentAddressee|length > 0 %}
                                     <div class="wl-row">
-                                        <div class="wl-col title"><h3 class="mb-2">Destinataires</h3></div>
+                                        <div class="wl-col title"><h3 class="mb-2">Attribué à</h3></div>
                                         <div class="wl-col list">
                                             {% for d in ticket.currentAddressee %}
                                                 {% if d.isUser is defined and d.isUser %}
diff --git a/src/Bundle/ChillTicketBundle/src/Serializer/Normalizer/TicketNormalizer.php b/src/Bundle/ChillTicketBundle/src/Serializer/Normalizer/TicketNormalizer.php
index 77dc3da26..8cdaf9988 100644
--- a/src/Bundle/ChillTicketBundle/src/Serializer/Normalizer/TicketNormalizer.php
+++ b/src/Bundle/ChillTicketBundle/src/Serializer/Normalizer/TicketNormalizer.php
@@ -135,8 +135,6 @@ final class TicketNormalizer implements NormalizerInterface, NormalizerAwareInte
 
         foreach ($ticket->getAddresseeHistories() as $history) {
             $changes[$history->getStartDate()->format($dateFormat)]['added'][] = $history;
-        }
-        foreach ($ticket->getAddresseeHistories() as $history) {
             if (null !== $history->getEndDate()) {
                 $changes[$history->getEndDate()->format($dateFormat)]['removed'][] = $history;
             }
@@ -154,7 +152,7 @@ final class TicketNormalizer implements NormalizerInterface, NormalizerAwareInte
                 $at = $historiesAdded[0]->getStartDate();
                 $by = $historiesAdded[0]->getCreatedBy();
             } elseif (0 < count($historiesRemoved)) {
-                $at = $historiesRemoved[0]->getStartDate();
+                $at = $historiesRemoved[0]->getEndDate();
                 $by = $historiesRemoved[0]->getRemovedBy();
             } else {
                 throw new \LogicException('it should have at least one history');