Adapt layout action toolbar

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

@@ -8,53 +8,41 @@
                     </label>
                 </div>
 
-                <div v-if="activeTab === 'comment'" class="p-2">
+                <form @submit.prevent="submitAction">
-                    <form @submit.prevent="createComment">
+                    <add-comment-component
-                        <ckeditor
+                        v-model="content"
-                            name="content"
+                        v-if="activeTab === 'comment'"
-                            :placeholder="$t('comment.content')"
+                    />
-                            :editor="editor"
-                            v-model="content"
-                            tag-name="textarea"
-                        >
-                        </ckeditor>
-                    </form>
-                </div>
 
-                <div v-if="activeTab === 'transfert'">
+                    <addressee-selector-component
-                    <form
+                        v-model="addressees"
-                        @submit.prevent="setAdressees"
+                        :user-groups="userGroups"
-                        v-if="userGroups.length && users.length"
+                        :users="users"
-                    >
+                        v-if="activeTab === 'transfert'"
-                        <addressee-selector-component
+                    />
-                            v-model="addressees"
-                            :user-groups="userGroups"
-                            :users="users"
-                        />
-                    </form>
-                </div>
 
-                <div v-if="activeTab === 'motive'">
+                    <motive-selector-component
-                    <form @submit.prevent="createMotive">
+                        v-model="motive"
-                        <motive-selector-component
+                        :motives="motives"
-                            v-model="motive"
+                        v-if="activeTab === 'motive'"
-                            :motives="motives"
+                    />
-                        />
-                    </form>
-                </div>
 
-                <ul class="record_actions sticky-form-buttons">
+                    <ul class="record_actions sticky-form-buttons">
-                    <li class="cancel">
+                        <li class="cancel">
-                        <button @click="activeTab = ''" class="btn btn-cancel">
+                            <button
-                            {{ $t("ticket.cancel") }}
+                                @click="activeTab = ''"
-                        </button>
+                                class="btn btn-cancel"
-                    </li>
+                            >
-                    <li>
+                                {{ $t("ticket.cancel") }}
-                        <button class="btn btn-update" type="submit">
+                            </button>
-                            {{ $t("comment.save") }}
+                        </li>
-                        </button>
+                        <li>
-                    </li>
+                            <button class="btn btn-create" type="submit">
-                </ul>
+                                {{ $t("ticket.save") }}
+                            </button>
+                        </li>
+                    </ul>
+                </form>
             </div>
         </div>
         <div class="footer-ticket-main">
@@ -63,9 +51,13 @@
                     <button
                         type="button"
                         class="m-2 btn btn-light"
-                        @click="activeTab = 'comment'"
+                        @click="
+                            activeTab === 'comment'
+                                ? (activeTab = '')
+                                : (activeTab = 'comment')
+                        "
                     >
-                        <i class="fa fa-plus"></i>
+                        <i class="fa fa-comment"></i>
                         {{ $t("comment.title") }}
                     </button>
                 </li>
@@ -73,7 +65,11 @@
                     <button
                         type="button"
                         class="m-2 btn btn-light"
-                        @click="activeTab = 'transfert'"
+                        @click="
+                            activeTab === 'transfert'
+                                ? (activeTab = '')
+                                : (activeTab = 'transfert')
+                        "
                     >
                         <i class="fa fa-paper-plane"></i>
                         {{ $t("transfert.title") }}
@@ -83,7 +79,11 @@
                     <button
                         type="button"
                         class="m-2 btn btn-light"
-                        @click="activeTab = 'motive'"
+                        @click="
+                            activeTab === 'motive'
+                                ? (activeTab = '')
+                                : (activeTab = 'motive')
+                        "
                     >
                         <i class="fa fa-paint-brush"></i>
                         {{ $t("motive.title") }}
@@ -108,8 +108,6 @@
 import { computed, defineComponent, inject, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
-import CKEditor from "@ckeditor/ckeditor5-vue";
-import ClassicEditor from "../../../../../../../ChillMainBundle/Resources/public/module/ckeditor5";
 
 // Types
 import {
@@ -122,19 +120,20 @@ import { Comment, Motive, Ticket } from "../../../types";
 // Component
 import MotiveSelectorComponent from "./MotiveSelectorComponent.vue";
 import AddresseeSelectorComponent from "./AddresseeSelectorComponent.vue";
+import AddCommentComponent from "./AddCommentComponent.vue";
 
 export default defineComponent({
     name: "ActionToolbarComponent",
     components: {
+        AddCommentComponent,
         MotiveSelectorComponent,
         AddresseeSelectorComponent,
-        ckeditor: CKEditor.component,
     },
     setup() {
         const store = useStore();
         const { t } = useI18n();
         const toast = inject("toast") as any;
-        const activeTab = ref("");
+        const activeTab = ref("" as "" | "comment" | "motive" | "transfert");
 
         const ticket = computed(() => store.getters.getTicket as Ticket);
         const motives = computed(() => store.getters.getMotives as Motive[]);
@@ -151,42 +150,52 @@ export default defineComponent({
         const content = ref("" as Comment["content"]);
         const addressees = ref([] as Array<UserGroupOrUser>);
 
-        async function createMotive() {
+        async function submitAction() {
             try {
-                await store.dispatch("createMotive", {
+                switch (activeTab.value) {
-                    ticketId: ticket.value.id,
+                    case "comment":
-                    motive: motive.value,
+                        if (!content.value) {
-                });
+                            toast.error(t("comment.error"));
-                toast.success(t("motive.success"));
+                        } else {
+                            await store.dispatch("createComment", {
+                                ticketId: ticket.value.id,
+                                content: content.value,
+                            });
+                            content.value = "";
+                            activeTab.value = "";
+                            toast.success(t("comment.success"));
+                        }
+                        break;
+                    case "motive":
+                        if (!motive.value.id) {
+                            toast.error(t("motive.error"));
+                        } else {
+                            await store.dispatch("createMotive", {
+                                ticketId: ticket.value.id,
+                                motive: motive.value,
+                            });
+                            activeTab.value = "";
+                            toast.success(t("motive.success"));
+                        }
+                        break;
+                    case "transfert":
+                        if (!addressees.value.length) {
+                            toast.error(t("transfert.error"));
+                        } else {
+                            await store.dispatch("setAdressees", {
+                                ticketId: ticket.value.id,
+                                addressees: addressees.value,
+                            });
+                            activeTab.value = "";
+                            toast.success(t("transfert.success"));
+                        }
+                        break;
+                }
             } catch (error) {
                 toast.error(error);
             }
         }
 
-        async function createComment() {
-            try {
-                await store.dispatch("createComment", {
-                    ticketId: ticket.value.id,
-                    content: content.value,
-                });
-                content.value = "";
-                toast.success(t("comment.success"));
-            } catch (error) {
-                toast.error(error);
-            }
-        }
-
-        async function setAdressees() {
-            try {
-                await store.dispatch("setAdressees", {
-                    ticketId: ticket.value.id,
-                    addressees: addressees.value,
-                });
-                toast.success(t("transfert.success"));
-            } catch (error) {
-                toast.error(error);
-            }
-        }
         function handleClick() {
             alert("Sera disponible plus tard");
         }
@@ -200,18 +209,20 @@ export default defineComponent({
             addressees,
             users,
             content,
-            editor: ClassicEditor,
+            submitAction,
-            createMotive,
-            createComment,
-            setAdressees,
             handleClick,
         };
     },
 });
 </script>
 <style lang="scss" scoped>
-.fixed-bottom {
+ul.record_actions.sticky-form-buttons {
-    margin-bottom: 100px;
+    padding-left: 0px;
+    padding-right: 0px;
+}
+.sticky-form-buttons {
+    margin-top: 0px;
+    background: none;
 }
 div.footer-ticket-main {
     background: none repeat scroll 0 0 #cabb9f;

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

@@ -0,0 +1,49 @@
+<template>
+    <div class="row">
+        <div class="col-12">
+            <ckeditor
+                name="content"
+                :placeholder="$t('comment.content')"
+                :editor="editor"
+                v-model="content"
+                tag-name="textarea"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, ref, watch } from "vue";
+
+import CKEditor from "@ckeditor/ckeditor5-vue";
+import ClassicEditor from "../../../../../../../ChillMainBundle/Resources/public/module/ckeditor5";
+
+export default defineComponent({
+    name: "AddCommentComponent",
+    props: {
+        modelValue: {
+            type: String,
+            required: false,
+        },
+    },
+    components: {
+        ckeditor: CKEditor.component,
+    },
+    emits: ["update:modelValue"],
+
+    setup(props, ctx) {
+        const content = ref(props.modelValue);
+
+        watch(content, (content) => {
+            ctx.emit("update:modelValue", content);
+        });
+
+        return {
+            content,
+            editor: ClassicEditor,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -6,6 +6,7 @@ const messages = {
         ticket: {
             previous_tickets: "Précédents tickets",
             cancel: "Annuler",
+            save: "Enregistrer",
             close: "Fermer",
         },
         history: {
@@ -21,22 +22,22 @@ const messages = {
         comment: {
             title: "Commentaire",
             label: "Ajouter un commentaire",
-            save: "Enregistrer",
+            success: "Commentaire enregistré",
-            succcess: "Commentaire enregistré",
             content: "Ajouter un commentaire",
+            error: "Aucun commentaire ajouté",
         },
         motive: {
             title: "Motif",
             label: "Choisir un motif",
-            save: "Enregistrer",
             success: "Motif enregistré",
+            error: "Aucun motif sélectionné",
         },
         transfert: {
             title: "Transfert",
             user_group_label: "Transferer vers un groupe",
             user_label: "Transferer vers un ou plusieurs utilisateurs",
-            save: "Enregistrer",
             success: "Transfert effectué",
+            error: "Aucun destinataire sélectionné",
         },
         close: "Fermer",
         banner: {