Multiple fixes and improvements

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: 0.2rem 0.1rem;
-    margin-bottom: 0.2rem;
     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 {

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",

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"

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 v-if="users.length > 0" class="col-12">
-    <div class="col-12">
+            <span class="badge-user">
-        <span class="badge bg-primary m-1" v-for="user in users" :key="user.id">
+                <user-render-box-badge v-for="user in users" :key="user.id" :user="user"></user-render-box-badge>
-            {{ user.label }}
+            </span>
-        </span>
+        </div>
-    </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[]>,

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" style="font-size: 1rem;">
-                            <span class="badge text-bg-chill-green text-white">
+                            {{ $t("banner.open") }}
-                                {{ $t("banner.open") }}
+                        </span>
-                            </span>
-                        </h1>
                     </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";

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>
+            <div class="history-header">
-            <span class="fw-bold fst-italic mx-1">
+                <div class="description">
-                {{ formatDate(history_line.at) }}
+                    <i :class="`${actionIcons[history_line.event_type]} me-1`"></i>
-            </span>
+                    <span>{{ explainSentence(history_line) }}</span>
-            <span class="badge bg-white text-black mx-1">
+                </div>
-                {{ history_line.by.username }}
+                <div>
-            </span>
+                    <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 explainSentence = (history: TicketHistoryLine): string => {
-            const date = new Date(d.datetime);
+            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>

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",
+            title: "Attribuer",
-            user_group_label: "Transferer vers un groupe",
+            user_group_label: "Attributer à un groupe",
-            user_label: "Transferer vers un ou plusieurs utilisateurs",
+            user_label: "Attribuer à un ou plusieurs utilisateurs",
-            success: "Transfert effectué",
+            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",

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 %}

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');