From 2a23bf19cbb876b3f9ed4818a29935daf3cedd66 Mon Sep 17 00:00:00 2001
From: Boris Waaub <boriswaaub@Mac-Studio-de-Boris.local>
Date: Tue, 21 May 2024 10:53:25 +0200
Subject: [PATCH] use record_actions sticky-form-buttons

---
 .../components/ActionToolbarComponent.vue     | 154 +++++++++++-------
 .../public/vuejs/TicketApp/i18n/messages.ts   |   2 +
 2 files changed, 95 insertions(+), 61 deletions(-)

diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
index 818a46536..cf24952b2 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
@@ -1,83 +1,102 @@
 <template>
     <div class="fixed-bottom">
-        <div class="footer-ticket-details">
+        <div class="footer-ticket-details" v-if="activeTab">
             <div class="tab-content p-2">
-
-                <div v-if="activeTab">
+                <div>
                     <label class="col-form-label">
                         {{ $t(`${activeTab}.title`) }}
                     </label>
                 </div>
 
-                <div v-if="activeTab === 'comment'">
+                <div v-if="activeTab === 'comment'" class="p-2">
                     <form @submit.prevent="createComment">
                         <ckeditor
-                        name="content"
-                        :placeholder="$t('comment.content')"
-                        :editor="editor"
-                        v-model="content"
-                        tag-name="textarea">
+                            name="content"
+                            :placeholder="$t('comment.content')"
+                            :editor="editor"
+                            v-model="content"
+                            tag-name="textarea"
+                        >
                         </ckeditor>
-
-                        <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>
                     </form>
                 </div>
 
                 <div v-if="activeTab === 'transfert'">
-                    <form @submit.prevent="setAdressees" v-if="userGroups.length && users.length">
-                        <addressee-selector-component v-model="addressees" :user-groups="userGroups" :users="users" />
-                        <div class="d-flex justify-content-end p-1">
-                            <button class="btn btn-chill-green text-white float-right" type="submit">
-                                <i class="fa fa-pencil"></i>
-                                {{ $t("transfert.save") }}
-                            </button>
-                        </div>
+                    <form
+                        @submit.prevent="setAdressees"
+                        v-if="userGroups.length && users.length"
+                    >
+                        <addressee-selector-component
+                            v-model="addressees"
+                            :user-groups="userGroups"
+                            :users="users"
+                        />
                     </form>
                 </div>
 
                 <div v-if="activeTab === 'motive'">
                     <form @submit.prevent="createMotive">
-
-                        <motive-selector-component v-model="motive" :motives="motives" />
-                        <div class="d-flex justify-content-end p-1">
-                            <button class="btn btn-chill-green text-white float-right" type="submit">
-                                <i class="fa fa-pencil"></i>
-                                {{ $t("motive.save") }}
-                            </button>
-                        </div>
+                        <motive-selector-component
+                            v-model="motive"
+                            :motives="motives"
+                        />
                     </form>
                 </div>
+
+                <ul class="record_actions sticky-form-buttons">
+                    <li class="cancel">
+                        <button @click="activeTab = ''" class="btn btn-cancel">
+                            {{ $t("ticket.cancel") }}
+                        </button>
+                    </li>
+                    <li>
+                        <button class="btn btn-update" type="submit">
+                            {{ $t("comment.save") }}
+                        </button>
+                    </li>
+                </ul>
             </div>
         </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" @click="activeTab = 'comment'">
+                    <button
+                        type="button"
+                        class="m-2 btn btn-light"
+                        @click="activeTab = 'comment'"
+                    >
                         <i class="fa fa-plus"></i>
-                        {{ $t('comment.title') }}
+                        {{ $t("comment.title") }}
                     </button>
                 </li>
                 <li class="nav-item">
-                    <button type="button" class="m-2 btn btn-light" @click="activeTab = 'transfert'">
+                    <button
+                        type="button"
+                        class="m-2 btn btn-light"
+                        @click="activeTab = 'transfert'"
+                    >
                         <i class="fa fa-paper-plane"></i>
-                        {{ $t('transfert.title') }}
+                        {{ $t("transfert.title") }}
                     </button>
                 </li>
                 <li class="nav-item">
-                    <button type="button" class="m-2 btn btn-light" @click="activeTab = 'motive'">
+                    <button
+                        type="button"
+                        class="m-2 btn btn-light"
+                        @click="activeTab = 'motive'"
+                    >
                         <i class="fa fa-paint-brush"></i>
-                        {{ $t('motive.title') }}
+                        {{ $t("motive.title") }}
                     </button>
                 </li>
                 <li class="nav-item">
-                    <button type="button" class="m-2 btn btn-light" @click="activeTab = ''">
+                    <button
+                        type="button"
+                        class="m-2 btn btn-light"
+                        @click="handleClick()"
+                    >
                         <i class="fa fa-bolt"></i>
-                        Fermer
+                        {{ $t("ticket.close") }}
                     </button>
                 </li>
             </ul>
@@ -89,11 +108,15 @@
 import { computed, defineComponent, inject, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
-import CKEditor from '@ckeditor/ckeditor5-vue';
+import CKEditor from "@ckeditor/ckeditor5-vue";
 import ClassicEditor from "../../../../../../../ChillMainBundle/Resources/public/module/ckeditor5";
 
 // Types
-import { User, UserGroup, UserGroupOrUser } from "../../../../../../../ChillMainBundle/Resources/public/types";
+import {
+    User,
+    UserGroup,
+    UserGroupOrUser,
+} from "../../../../../../../ChillMainBundle/Resources/public/types";
 import { Comment, Motive, Ticket } from "../../../types";
 
 // Component
@@ -110,29 +133,33 @@ export default defineComponent({
     setup() {
         const store = useStore();
         const { t } = useI18n();
-        const toast = inject('toast') as any;
+        const toast = inject("toast") as any;
         const activeTab = ref("");
 
         const ticket = computed(() => store.getters.getTicket as Ticket);
         const motives = computed(() => store.getters.getMotives as Motive[]);
-        const userGroups = computed(() => store.getters.getUserGroups as UserGroup[]);
+        const userGroups = computed(
+            () => store.getters.getUserGroups as UserGroup[]
+        );
         const users = computed(() => store.getters.getUsers as User[]);
 
-        const motive = ref(ticket.value.currentMotive ? ticket.value.currentMotive: {} as Motive);
-        const content = ref('' as Comment["content"]);
+        const motive = ref(
+            ticket.value.currentMotive
+                ? ticket.value.currentMotive
+                : ({} as Motive)
+        );
+        const content = ref("" as Comment["content"]);
         const addressees = ref([] as Array<UserGroupOrUser>);
 
-
-
         async function createMotive() {
             try {
                 await store.dispatch("createMotive", {
                     ticketId: ticket.value.id,
                     motive: motive.value,
                 });
-                toast.success(t("motive.success"))
+                toast.success(t("motive.success"));
             } catch (error) {
-                toast.error(error)
+                toast.error(error);
             }
         }
 
@@ -143,9 +170,9 @@ export default defineComponent({
                     content: content.value,
                 });
                 content.value = "";
-                toast.success(t("comment.success"))
+                toast.success(t("comment.success"));
             } catch (error) {
-                toast.error(error)
+                toast.error(error);
             }
         }
 
@@ -155,11 +182,14 @@ export default defineComponent({
                     ticketId: ticket.value.id,
                     addressees: addressees.value,
                 });
-                toast.success(t("transfert.success"))
+                toast.success(t("transfert.success"));
             } catch (error) {
-                toast.error(error)
+                toast.error(error);
             }
         }
+        function handleClick() {
+            alert("Sera disponible plus tard");
+        }
 
         return {
             activeTab,
@@ -174,18 +204,20 @@ export default defineComponent({
             createMotive,
             createComment,
             setAdressees,
+            handleClick,
         };
     },
 });
 </script>
 <style lang="scss" scoped>
-div.fixed-bottom {
-    div.footer-ticket-main {
-        background: none repeat scroll 0 0 #cabb9f;
-    }
+.fixed-bottom {
+    margin-bottom: 100px;
+}
+div.footer-ticket-main {
+    background: none repeat scroll 0 0 #cabb9f;
+}
 
-    div.footer-ticket-details {
-        background: none repeat scroll 0 0 #efe2ca;
-    }
+div.footer-ticket-details {
+    background: none repeat scroll 0 0 #efe2ca;
 }
 </style>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/i18n/messages.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/i18n/messages.ts
index 7175a7fe3..5649a9849 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/i18n/messages.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/i18n/messages.ts
@@ -5,6 +5,8 @@ const messages = {
     fr: {
         ticket: {
             previous_tickets: "Précédents tickets",
+            cancel: "Annuler",
+            close: "Fermer",
         },
         history: {
             person: "Ouverture par appel téléphonique de {person}",