Mise à jour des messages de l'interface utilisateur pour inclure les fonctionnalités de commentaire, de motif et de transfert

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

@@ -3,7 +3,6 @@
     <div class="container-xxl p-3">
         <ticket-selector-component :tickets="[]" />
         <ticket-history-list-component :history="ticket.history" />
-        <motive-list-component :motives="motives" />
     </div>
     <action-toolbar-component />
 </template>
@@ -22,7 +21,6 @@ import TicketSelectorComponent from './components/TicketSelectorComponent.vue';
 import TicketHistoryListComponent from './components/TicketHistoryListComponent.vue';
 import ActionToolbarComponent from './components/ActionToolbarComponent.vue';
 import BannerComponent from './components/BannerComponent.vue';
-import MotiveListComponent from './components/MotiveListComponent.vue';
 
 export default defineComponent({
     name: 'App',
@@ -30,7 +28,6 @@ export default defineComponent({
         BannerComponent,
         TicketSelectorComponent,
         TicketHistoryListComponent,
-        MotiveListComponent,
         ActionToolbarComponent
     },
     setup() {
@@ -44,8 +41,6 @@ export default defineComponent({
         const ticket = computed(() => store.getters.getTicket as Ticket)
 
         onMounted(() => {
-            console.log(headline.value.textContent);
-
             try {
                 store.dispatch('fetchMotives')
             } catch (error) {

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

@@ -4,29 +4,43 @@
             <div class="tab-content">
                 <div v-if="activeTab === 'commentaire'" class="p-2">
 
-
-                    <label class="col-form-label" for="content">{{ $t('comment.label') }}</label>
+                    <label class="col-form-label" for="content">{{ $t('comment.title') }}</label>
 
                     <textarea v-model="comment" class="form-control" id="content" rows="3"
-                        placeholder="{{ $t('comment.placeholder') }}">
+                        :placeholder="$t('comment.label')">
                     </textarea>
+                    <div class="d-flex justify-content-end p-2">
+                        <button class="btn btn-chill-green text-white float-right" type="submit">
+                            <i class="fa fa-pencil"></i>
+                            {{ $t('comment.save') }}
+                        </button>
+                    </div>
 
                 </div>
-                <div v-if="activeTab === 'transfert'">
-                    <!-- Content for the 'Transfert' tab pane -->
-                    <p>This is the Transfert tab pane content.</p>
+                <div v-if="activeTab === 'transfert'" class="p-2">
+                    <label class="col-form-label" for="content">{{ $t('transfert.title') }}</label>
+
+                    <div class="d-flex justify-content-end p-2">
+                        <button class="btn btn-chill-green text-white float-right" type="submit">
+                            <i class="fa fa-pencil"></i>
+                            {{ $t('transfert.save') }}
+                        </button>
                     </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 v-if="activeTab === 'motif'" class="p-2">
+                    <label class="col-form-label" for="content">{{ $t('motive.title') }}</label>
+                    <div>
+                        <MotiveSelectorComponent :motives="motives" />
+                    </div>
+                    <div class="d-flex justify-content-end p-2">
+                        <button class="btn btn-chill-green text-white float-right" type="submit">
+                            <i class="fa fa-pencil"></i>
+                            {{ $t('motive.save') }}
+                        </button>
+                    </div>
                 </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">
@@ -49,7 +63,7 @@
                     </button>
                 </li>
                 <li class="nav-item">
-                    <button type="button" class="m-2 btn btn-light" @click="activeTab = 'fermer'">
+                    <button type="button" class="m-2 btn btn-light" @click="activeTab = ''">
                         <i class="fa fa-bolt"></i>
                         Fermer
                     </button>
@@ -61,17 +75,24 @@
 
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import { useStore } from 'vuex';
+import MotiveSelectorComponent from './MotiveSelectorComponent.vue';
+import { Motive } from '../../../types';
 
 export default defineComponent({
     name: 'ActionToolbarComponent',
+    components: {
+        MotiveSelectorComponent
+    },
     setup(props, ctx) {
         const store = useStore();
         const editor = ref();
         const activeTab = ref("");
         const comment = ref("");
+        const motives = computed(() => store.getters.getMotives as Motive[])
         return {
+            motives,
             activeTab,
             comment,
             editor,

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

@@ -1,43 +0,0 @@
-<template>
-    <div class="card my-2 bg-light" v-for="motive in motives" :key="motive.id">
-        <div class="card-header">
-            <span class="fw-bold fst-italic">
-
-            </span>
-            <span class="badge bg-white text-black mx-1">{{motive.active}}</span>
-        </div>
-        <div class="card-body row fst-italic">
-            <div class="col-12">
-                <i class="fa fa-comment" style="min-width: 16px;"></i>
-                <span class="mx-1">
-                  {{ motive.label.fr }}
-                </span>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-
-import {  PropType, defineComponent } from 'vue';
-
-
-
-// Types
-import { Motive } from '../../../types';
-
-export default defineComponent({
-    name: 'MotiveListComponent',
-    props: {
-        motives: {
-            type: Object as PropType<Motive[]>,
-            required: true,
-        },
-    },
-    setup() {
-        return {}
-    }
-});
-</script>
-
-<style lang="scss" scoped></style>

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

@@ -1,17 +1,14 @@
 <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>
-
+            {{ $t('motive.label') }}
+            <span class="visually-hidden">{{ $t('motive.label') }}</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>
+            <li v-for="motive in motives" :key="motive.label.fr"><button class="dropdown-item" type="button">
+                    {{ motive.label.fr }}
+                </button>
+            </li>
         </ul>
     </div>
 </template>
@@ -23,13 +20,13 @@ import { PropType, defineComponent } from 'vue';
 
 
 // Types
-import { Ticket } from '../../../types';
+import { Motive } from '../../../types';
 
 export default defineComponent({
     name: 'MotiveSelectorComponent',
     props: {
-        tickets: {
-            type: Object as PropType<Ticket[]>,
+        motives: {
+            type: Object as PropType<Motive[]>,
             required: true,
         },
     },

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

@@ -8,5 +8,20 @@ export const messages = {
             user: "Prise en charge par {username}",
             motive: "Motif indiqué: {motive}",
         },
+        comment: {
+            title: "Commentaire",
+            label: "Ajouter un commentaire",
+            save: "Enregistrer",
+         },
+         motive: {
+            title: "Motif",
+            label: "Ajouter un motif",
+            save: "Enregistrer",
+         },
+         transfert: {
+            title: "Transfert",
+            label: "Transferer vers",
+            save: "Enregistrer",
+         },
     },
 };