Fusionner les utilisateurs/goupes en une "Card"

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>

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

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,

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

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

@@ -4,6 +4,7 @@
         v-for="history_line in history"
         :key="history.indexOf(history_line)"
     >
+        <template v-if="!Array.isArray(history_line)">
             <div class="card-header">
                 <span class="fw-bold fst-italic">
                     {{ formatDate(history_line.at) }}
@@ -25,11 +26,25 @@
                     :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>
+        <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>
 

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

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