Mise à jour de l'interface utilisateur pour le composant ActionToolbarComponent

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

@@ -1,6 +1,6 @@
 <template>
     <banner-component :ticket="ticket" />
-    <div class="container-xxl p-2">
+    <div class="container-xxl p-3">
         <ticket-selector-component :tickets="[]" />
         <ticket-history-list-component :history="ticket.history" />
         <motive-list-component :motives="motives" />

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

@@ -1,48 +1,82 @@
 <template>
     <div class="sticky-bottom">
-        <div class="footer-ticket-details"><button class="btn btn-chill-green text-white">Enregistrer</button></div>
+        <div class="footer-ticket-details">
+            <div class="tab-content">
+                <div v-if="activeTab === 'commentaire'" class="p-2">
+
+
+                    <label class="col-form-label" for="content">{{ $t('comment.label') }}</label>
+
+                    <textarea v-model="comment" class="form-control" id="content" rows="3"
+                        placeholder="{{ $t('comment.placeholder') }}">
+                    </textarea>
+
+                </div>
+                <div v-if="activeTab === 'transfert'">
+                    <!-- Content for the 'Transfert' tab pane -->
+                    <p>This is the Transfert tab pane content.</p>
+                </div>
+                <div v-if="activeTab === 'motif'">
+                    <!-- Content for the 'Motif' tab pane -->
+                    <p>This is the Motif tab pane content.</p>
+                </div>
+                <div v-if="activeTab === 'fermer'">
+                    <!-- Content for the 'Fermer' tab pane -->
+                    <p>This is the Fermer tab pane content.</p>
+                </div>
+            </div>
+
+            <button class="btn btn-chill-green text-white">Enregistrer</button>
+        </div>
         <div class="footer-ticket-main">
             <ul class="nav nav-tabs justify-content-end">
-
                 <li class="nav-item">
-                    <button type="button" class="m-2 btn btn-light">
+                    <button type="button" class="m-2 btn btn-light" @click="activeTab = 'commentaire'">
                         <i class="fa fa-plus"></i>
                         Commentaire
                     </button>
                 </li>
                 <li class="nav-item">
-                    <button type="button" class="m-2 btn btn-light">
+                    <button type="button" class="m-2 btn btn-light" @click="activeTab = 'transfert'">
                         <i class="fa fa-paper-plane"></i>
                         Transfert
                     </button>
                 </li>
                 <li class="nav-item">
-                    <button type="button" class="m-2 btn btn-light">
+                    <button type="button" class="m-2 btn btn-light" @click="activeTab = 'motif'">
                         <i class="fa fa-paint-brush"></i>
                         Motif
                     </button>
                 </li>
                 <li class="nav-item">
-                    <button type="button" class="m-2 btn btn-light">
+                    <button type="button" class="m-2 btn btn-light" @click="activeTab = 'fermer'">
                         <i class="fa fa-bolt"></i>
                         Fermer
                     </button>
                 </li>
             </ul>
         </div>
-
     </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useStore } from 'vuex';
 
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { useStore } from 'vuex';
 
 export default defineComponent({
     name: 'ActionToolbarComponent',
     setup(props, ctx) {
         const store = useStore();
+        const editor = ref();
+        const activeTab = ref("");
+        const comment = ref("");
+        return {
+            activeTab,
+            comment,
+            editor,
+        };
+
     },
 });
 </script>

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

@@ -0,0 +1,42 @@
+<template>
+    <div class="btn-group">
+        <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+            {{ $t('ticket.previous_tickets') }}
+            <span class="badge rounded-pill bg-chill-green">
+                {{ tickets.length }}
+                <span class="visually-hidden">Tickets</span>
+            </span>
+
+        </button>
+        <ul class="dropdown-menu">
+            <li><button class="dropdown-item" type="button">Action</button></li>
+            <li><button class="dropdown-item" type="button">Another action</button></li>
+            <li><button class="dropdown-item" type="button">Something else here</button></li>
+        </ul>
+    </div>
+</template>
+
+<script lang="ts">
+
+import { PropType, defineComponent } from 'vue';
+
+
+
+// Types
+import { Ticket } from '../../../types';
+
+export default defineComponent({
+    name: 'MotiveSelectorComponent',
+    props: {
+        tickets: {
+            type: Object as PropType<Ticket[]>,
+            required: true,
+        },
+    },
+    setup() {
+        return {}
+    }
+});
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -2,9 +2,9 @@
     <div class="btn-group">
         <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-danger">
+            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-chill-green">
                 {{ tickets.length }}
-                <span class="visually-hidden">unread messages</span>
+                <span class="visually-hidden">Tickets</span>
             </span>
 
         </button>
@@ -20,8 +20,6 @@
 
 import { PropType, defineComponent } from 'vue';
 
-
-
 // Types
 import { Ticket } from '../../../types';
 

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts

@@ -3,7 +3,6 @@ import {createApp} from "vue";
 
 import { _createI18n } from "../../../../../../ChillMainBundle/Resources/public/vuejs/_js/i18n";
 
-
 import VueToast from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';