Use colors and badges for history and banner

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue

@@ -1,87 +1,5 @@
 <template>
-    <Teleport to="#header-ticket-main">
+    <banner-component :ticket="ticket" />
-        <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.id }}</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", {
-                                    count: 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>
-                        <person-render-box
-                            render="badge"
-                            v-for="person in ticket.currentPersons"
-                            :key="person.id"
-                            :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>
-                        <span
-                            class="badge text-bg-light m-1"
-                            v-for="user_group in ticket.currentAddressees.filter((addressee) => addressee.type == 'user') as Array<User>"
-                            :key="user_group.id"
-                        >
-                            {{ 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>
-            </div>
-        </div>
-    </Teleport>
     <div class="container-xxl pt-1" style="padding-bottom: 55px">
         <ticket-selector-component :tickets="[]" />
         <ticket-history-list-component :history="ticketHistory" />
@@ -94,18 +12,13 @@ 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
 import TicketSelectorComponent from "./components/TicketSelectorComponent.vue";
 import TicketHistoryListComponent from "./components/TicketHistoryListComponent.vue";
 import ActionToolbarComponent from "./components/ActionToolbarComponent.vue";
-import PersonRenderBox from "../../../../../../ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue";
+import BannerComponent from "./components/BannerComponent.vue";
 
 export default defineComponent({
     name: "App",
@@ -113,12 +26,11 @@ export default defineComponent({
         TicketSelectorComponent,
         TicketHistoryListComponent,
         ActionToolbarComponent,
-        PersonRenderBox,
+        BannerComponent,
     },
     setup() {
         const store = useStore();
         const toast = inject("toast") as any;
-        const headline = ref({} as HTMLHeadingElement);
 
         store.commit("setTicket", JSON.parse(window.initialTicket) as Ticket);
 
@@ -128,15 +40,6 @@ export default defineComponent({
             () => store.getters.getDistinctAddressesHistory
         );
 
-        function getSince(createdAt: any) {
-            const today = new Date();
-            const date = new Date(createdAt.date);
-
-            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");
@@ -149,10 +52,8 @@ export default defineComponent({
 
         return {
             ticketHistory,
-            headline,
             motives,
             ticket,
-            getSince,
         };
     },
 });

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeComponent.vue

@@ -0,0 +1,74 @@
+<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"
+            >
+                {{ 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"
+            >
+                {{ 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>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, ref } from "vue";
+
+// Types
+import {
+    User,
+    UserGroup,
+    UserGroupOrUser,
+} from "../../../../../../../ChillMainBundle/Resources/public/types";
+import { Ticket } from "../../../types";
+
+export default defineComponent({
+    name: "AddresseeComponent",
+    props: {
+        addressees: {
+            type: Array as PropType<UserGroupOrUser[]>,
+            required: true,
+        },
+    },
+    setup(props, ctx) {
+        const userGroups = ref(
+            props.addressees.filter(
+                (addressee) =>
+                    addressee.type == "user_group" && addressee.excludeKey == ""
+            ) as UserGroup[]
+        );
+        const userGroupLevels = ref(
+            props.addressees.filter(
+                (addressee) =>
+                    addressee.type == "user_group" &&
+                    addressee.excludeKey == "level"
+            ) as UserGroup[]
+        );
+        const users = ref(
+            props.addressees.filter(
+                (addressee) => addressee.type == "user"
+            ) as User[]
+        );
+        return { userGroups, users, userGroupLevels };
+    },
+});
+</script>
+
+<style lang="scss" scoped></style>

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue

@@ -0,0 +1,106 @@
+<template>
+    <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.id }}</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", {
+                                    count: 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-6 col-sm-12 ps-md-5 ps-xxl-0">
+                    <h3 class="text-primary">{{ $t("banner.caller") }}</h3>
+
+                    <person-render-box
+                        render="badge"
+                        v-for="person in ticket.currentPersons"
+                        :key="person.id"
+                        :person="person"
+                        :options="{
+                            addLink: true,
+                            addId: false,
+                            addAltNames: false,
+                            addEntity: true,
+                            addInfo: true,
+                            hLevel: 3,
+                            isMultiline: true,
+                            isConfidential: false,
+                        }"
+                    />
+                </div>
+                <div class="col-md-6 col-sm-12">
+                    <h3 class="text-primary">{{ $t("banner.speaker") }}</h3>
+                    <addressee-component
+                        :addressees="ticket.currentAddressees"
+                    />
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, ref, watch } from "vue";
+
+// Components
+import PersonRenderBox from "../../../../../../../ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue";
+import AddresseeComponent from "./AddresseeComponent.vue";
+
+// Types
+import {
+    User,
+    UserGroup,
+} from "../../../../../../../ChillMainBundle/Resources/public/types";
+import { Ticket } from "../../../types";
+
+export default defineComponent({
+    name: "BannerComponent",
+    props: {
+        ticket: {
+            type: Object as PropType<Ticket>,
+            required: true,
+        },
+    },
+    components: {
+        PersonRenderBox,
+        AddresseeComponent,
+    },
+    setup() {
+        function getSince(createdAt: any) {
+            const today = new Date();
+            const date = new Date(createdAt.date);
+
+            const timeDiff = Math.abs(today.getTime() - date.getTime());
+            const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
+            return daysDiff;
+        }
+        return { getSince };
+    },
+});
+</script>

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent.vue

@@ -1,21 +1,6 @@
 <template>
     <div class="col-12">
-        <i class="fa fa-paper-plane"></i>
+        <addressee-component :addressees="addressees" />
-
-        <span class="mx-1" v-if="addressee.type == 'user_group'">
-            {{
-                $t(`history.${event_type}_user_group`, {
-                    user_group: addressee.label.fr,
-                })
-            }}
-        </span>
-        <span class="mx-1" v-else-if="addressee.type == 'user'">
-            {{
-                $t(`history.${event_type}_user`, {
-                    user: addressee.username,
-                })
-            }}
-        </span>
     </div>
 </template>
 
@@ -23,25 +8,24 @@
 import { PropType, defineComponent, ref } from "vue";
 
 // Types
-import { AddresseeHistory } from "../../../types";
 import { UserGroupOrUser } from "../../../../../../../ChillMainBundle/Resources/public/types";
 
+// Components
+import AddresseeComponent from "./AddresseeComponent.vue";
+
 export default defineComponent({
     name: "TicketHistoryAddresseeComponent",
     props: {
-        addresseeHistory: {
+        addressees: {
-            type: Object as PropType<AddresseeHistory>,
+            type: Array as PropType<UserGroupOrUser[]>,
-            required: true,
-        },
-        event_type: {
-            type: String,
             required: true,
         },
     },
+    components: {
+        AddresseeComponent,
+    },
     setup(props, ctx) {
-        return {
+        return {};
-            addressee: ref(props.addresseeHistory.addressee as UserGroupOrUser),
-        };
     },
 });
 </script>

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryListComponent.vue

@@ -13,7 +13,7 @@
                     history_line.by.username
                 }}</span>
             </div>
-            <div class="card-body row fst-italic">
+            <div class="card-body row">
                 <ticket-history-person-component
                     :personHistory="history_line.data"
                     v-if="history_line.event_type == 'add_person'"
@@ -30,21 +30,21 @@
         </template>
         <template v-else>
             <div class="card-header">
-                <span class="fw-bold fst-italic">
+                <i class="fa fa-paper-plane me-1"></i>
+                <span class="fw-bold fst-italic mx-1">
                     {{ formatDate(history_line[0].at) }}
                 </span>
-                <span class="badge bg-white text-black mx-1">{{
+                <span class="badge bg-white text-black mx-1">
-                    history_line[0].by.username
+                    {{ history_line[0].by.username }}
-                }}</span>
+                </span>
             </div>
-            <div
+            <div class="card-body row">
-                class="card-body row fst-italic"
-                v-for="addressee in history_line"
-                :key="history_line.indexOf(addressee)"
-            >
                 <ticket-history-addressee-component
-                    :addresseeHistory="addressee.data"
+                    :addressees="
-                    :event_type="addressee.event_type"
+                        history_line
+                            .map((line) => line.data)
+                            .map((data) => data.addressee)
+                    "
                 />
             </div>
         </template>

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/i18n/messages.ts

@@ -43,7 +43,7 @@ const messages = {
         banner: {
             concerned_patient: "Patient concerné",
             caller: "Appelant",
-            speaker: "Intervenant",
+            speaker: "Destinataire(s)",
             open: "Ouvert",
             since: "Aucun jour | Depuis 1 jour | Depuis {count} jours",
             no_motive: "Pas de motif",