dev: Refactor the transfer of events of the editor

There is a transfer of events between the TinyMCE and the MessageDocuments JS controllers. Before, it was handled with the same code duplicated in two different controllers. Now, there is a single `editor` controller to handle that. The FormNewTicket controller is removed as it was used only for this purpose.
Probesys · Sep 12, 2023 · a308460 · a308460
1 parent 2bb4837
commit a308460
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 26 deletions.
diff --git a/assets/javascripts/application.js b/assets/javascripts/application.js
@@ -7,9 +7,9 @@ import { Application } from '@hotwired/stimulus';
 
 import CheckboxesController from '@/controllers/checkboxes_controller.js';
 import ColorSchemeController from '@/controllers/color_scheme_controller.js';
+import EditorController from '@/controllers/editor_controller.js';
 import FormNewAnswerController from '@/controllers/form_new_answer_controller.js';
 import FormNewAuthorizationController from '@/controllers/form_new_authorization_controller.js';
-import FormNewTicketController from '@/controllers/form_new_ticket_controller.js';
 import FormPriorityController from '@/controllers/form_priority_controller.js';
 import MessageDocumentsController from '@/controllers/message_documents_controller.js';
 import ModalController from '@/controllers/modal_controller.js';
@@ -25,9 +25,9 @@ import TinymceController from '@/controllers/tinymce_controller.js';
 const application = Application.start();
 application.register('checkboxes', CheckboxesController);
 application.register('color-scheme', ColorSchemeController);
+application.register('editor', EditorController);
 application.register('form-new-answer', FormNewAnswerController);
 application.register('form-new-authorization', FormNewAuthorizationController);
-application.register('form-new-ticket', FormNewTicketController);
 application.register('form-priority', FormPriorityController);
 application.register('message-documents', MessageDocumentsController);
 application.register('modal', ModalController);

diff --git a/...controllers/form_new_ticket_controller.js → ...ascripts/controllers/editor_controller.js b/...controllers/form_new_ticket_controller.js → ...ascripts/controllers/editor_controller.js
@@ -6,7 +6,7 @@ import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
     static get targets () {
-        return ['editor', 'messageDocuments'];
+        return ['tinymce', 'messageDocuments'];
     }
 
     newDocument (event) {
@@ -16,6 +16,6 @@ export default class extends Controller {
 
     removeDocument (event) {
         const removeDocumentEvent = new CustomEvent('remove-document', { detail: event.detail });
-        this.editorTarget.dispatchEvent(removeDocumentEvent);
+        this.tinymceTarget.dispatchEvent(removeDocumentEvent);
     }
 }
diff --git a/assets/javascripts/controllers/form_new_answer_controller.js b/assets/javascripts/controllers/form_new_answer_controller.js
@@ -6,7 +6,7 @@ import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
     static get targets () {
-        return ['confidentialCheckbox', 'solutionCheckbox', 'statusSelect', 'editor', 'messageDocuments'];
+        return ['confidentialCheckbox', 'solutionCheckbox', 'statusSelect'];
     }
 
     static get values () {
@@ -69,14 +69,4 @@ export default class extends Controller {
     get isFinished () {
         return this.ticketStatusValue === 'resolved' || this.ticketStatusValue === 'closed';
     }
-
-    newDocument (event) {
-        const newDocumentEvent = new CustomEvent('new-document', { detail: event.detail });
-        this.messageDocumentsTarget.dispatchEvent(newDocumentEvent);
-    }
-
-    removeDocument (event) {
-        const removeDocumentEvent = new CustomEvent('remove-document', { detail: event.detail });
-        this.editorTarget.dispatchEvent(removeDocumentEvent);
-    }
 }
diff --git a/templates/organizations/tickets/new.html.twig b/templates/organizations/tickets/new.html.twig
@@ -21,7 +21,7 @@
             action="{{ path('create organization ticket', {'uid': organization.uid}) }}"
             method="post"
             class="wrapper wrapper--center flow"
-            data-controller="form-priority form-new-ticket"
+            data-controller="form-priority"
         >
             <input type="hidden" name="_csrf_token" value="{{ csrf_token('create organization ticket') }}">
 
@@ -105,15 +105,15 @@
                     </p>
                 {% endif %}
 
-                <div class="editor">
+                <div class="editor" data-controller="editor">
                     <textarea
                         id="message"
                         name="message"
                         data-controller="tinymce"
                         data-tinymce-upload-url-value="{{ path('create message document') }}"
                         data-tinymce-upload-csrf-value="{{ csrf_token('create message document') }}"
-                        data-form-new-ticket-target="editor"
-                        data-action="new-document->form-new-ticket#newDocument remove-document->tinymce#removeImage"
+                        data-editor-target="tinymce"
+                        data-action="new-document->editor#newDocument remove-document->tinymce#removeImage"
                         {% if errors.content is defined %}
                             autofocus
                             aria-invalid="true"
@@ -126,8 +126,8 @@
                             id="message-documents"
                             src="{{ path('message documents', { filter: 'unattached' }) }}"
                             data-controller="message-documents"
-                            data-form-new-ticket-target="messageDocuments"
-                            data-action="remove-document->form-new-ticket#removeDocument new-document->message-documents#reload"
+                            data-editor-target="messageDocuments"
+                            data-action="remove-document->editor#removeDocument new-document->message-documents#reload"
                         >
                         </turbo-frame>
                     </div>

diff --git a/templates/tickets/show.html.twig b/templates/tickets/show.html.twig
@@ -193,15 +193,15 @@
                                         </p>
                                     {% endif %}
 
-                                    <div class="editor">
+                                    <div class="editor" data-controller="editor">
                                         <textarea
                                             id="message"
                                             name="message"
                                             data-controller="tinymce"
                                             data-tinymce-upload-url-value="{{ path('create message document') }}"
                                             data-tinymce-upload-csrf-value="{{ csrf_token('create message document') }}"
-                                            data-form-new-answer-target="editor"
-                                            data-action="new-document->form-new-answer#newDocument remove-document->tinymce#removeImage"
+                                            data-editor-target="tinymce"
+                                            data-action="new-document->editor#newDocument remove-document->tinymce#removeImage"
                                             {% if errors.content is defined %}
                                                 autofocus
                                                 aria-invalid="true"
@@ -214,8 +214,8 @@
                                                 id="message-documents"
                                                 src="{{ path('message documents', { filter: 'unattached' }) }}"
                                                 data-controller="message-documents"
-                                                data-form-new-answer-target="messageDocuments"
-                                                data-action="remove-document->form-new-answer#removeDocument new-document->message-documents#reload"
+                                                data-editor-target="messageDocuments"
+                                                data-action="remove-document->editor#removeDocument new-document->message-documents#reload"
                                             >
                                             </turbo-frame>
                                         </div>