Use teleport for banner

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;
+    }
+
+
 }

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

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 { computed, defineComponent, inject, onMounted, ref } from 'vue';
+import { useStore } from "vuex";
-import { useStore } from 'vuex';
-
 
 // Types
-import { Motive, Ticket } from '../../types';
+import { Motive, Ticket } from "../../types";
 
 // Components
-import TicketSelectorComponent from './components/TicketSelectorComponent.vue';
+import TicketSelectorComponent from "./components/TicketSelectorComponent.vue";
-import TicketHistoryListComponent from './components/TicketHistoryListComponent.vue';
+import TicketHistoryListComponent from "./components/TicketHistoryListComponent.vue";
-import ActionToolbarComponent from './components/ActionToolbarComponent.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 motives = computed(() => store.getters.getMotives as Motive[]);
-        const ticket = computed(() => store.getters.getTicket as Ticket)
+        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("fetchMotives");
-                await store.dispatch('fetchUserGroups')
+                await store.dispatch("fetchUserGroups");
-                await store.dispatch('fetchUsers')
+                await store.dispatch("fetchUsers");
             } catch (error) {
-                toast.error(error)
+                toast.error(error);
-            };
+            }
         });
 
         return {
             headline,
             motives,
             ticket,
+            getSince,
         };
     },
 });

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"

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

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

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>

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(),
         ];
     }
 

src/Bundle/ChillTicketBundle/src/translations/messages.fr.yaml

@@ -1,6 +0,0 @@
-concerned_patient: Patient concerné
-caller: Appelant
-speaker: Intervenant
-open: Ouvert
-since: Depuis
-no_motive: Pas de motif