WIP Allow for comment content to be submitted to backend

src/Bundle/ChillActivityBundle/Controller/ActivityController.php

@@ -447,6 +447,7 @@ final class ActivityController extends AbstractController
             }
 
             if (\array_key_exists('comment', $activityData) && $activityType->getCommentVisible() > 0) {
+                dump($activityData['comment']);
                 $comment = new CommentEmbeddable();
                 $comment->setComment($activityData['comment']);
                 $comment->setUserId($this->security->getUser()->getId());

src/Bundle/ChillActivityBundle/Form/ActivityType.php

@@ -20,9 +20,7 @@ use Chill\MainBundle\Entity\Center;
 use Chill\MainBundle\Entity\Location;
 use Chill\MainBundle\Entity\User;
 use Chill\MainBundle\Form\Type\ChillDateType;
-use Chill\MainBundle\Form\Type\CommentType;
 use Chill\MainBundle\Form\Type\PickUserDynamicType;
-use Chill\MainBundle\Form\Type\PrivateCommentType;
 use Chill\MainBundle\Form\Type\ScopePickerType;
 use Chill\MainBundle\Security\Authorization\AuthorizationHelper;
 use Chill\MainBundle\Templating\TranslatableStringHelper;
@@ -207,21 +205,17 @@ class ActivityType extends AbstractType
             ]);
         }
 
-/*        if ($activityType->isVisible('comment')) {
+        if ($activityType->isVisible('comment')) {
-            $builder->add('comment', CommentType::class, [
+            $builder->add('comment', HiddenType::class, [
-//                'disable_editor' => true,
+                'data' => '',
-                'label' => empty($activityType->getLabel('comment'))
-                    ? 'activity.comment' : $activityType->getLabel('comment'),
-                'required' => $activityType->isRequired('comment'),
             ]);
-        }*/
+        }
 
-/*        if ($activityType->isVisible('privateComment')) {
+        if ($activityType->isVisible('privateComment')) {
-            $builder->add('privateComment', PrivateCommentType::class, [
+            $builder->add('privateComment', HiddenType::class, [
-                'label' => '' === $activityType->getLabel('privateComment') ? 'private comment' : $activityType->getPrivateCommentLabel(),
+                'data' => '',
-                'required' => false,
             ]);
-        }*/
+        }
 
         if ($activityType->isVisible('persons')) {
             $builder->add('persons', HiddenType::class);

src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig

@@ -80,22 +80,23 @@
     {{ form_row(form.travelTime) }}
 {% endif %}
 
-{#{%- if form.comment is defined -%}#}
+{%- if form.comment is defined -%}
-{#    {{ form_row(form.comment) }}#}
+    {{ form_row(form.comment) }}
-{#{% endif %}#}
+{% endif %}
 
 <div class="comment-container">
     <label class="col-form-label col-sm-4" for="comment-widget-1">{{ 'comment_public'|trans }}</label>
-    <div id="comment-widget-1" data-comment-mode="rich"></div>
+    <div id="comment-widget-1" data-fieldname="chill_activitybundle_activity[comment]"></div>
 </div>
 
 <div class="comment-container">
     <label class="col-form-label col-sm-4" for="comment-widget-2">{{ 'comment_private'|trans }}</label>
-    <div id="comment-widget-2" data-comment-mode="rich"></div>
+    <div id="comment-widget-2" data-fieldname="chill_activitybundle_activity[privateComment]"></div>
 </div>
-{#{%- if form.privateComment is defined -%}#}
+
-{#    {{ form_row(form.privateComment) }}#}
+{%- if form.privateComment is defined -%}
-{#{% endif %}#}
+    {{ form_row(form.privateComment) }}
+{% endif %}
 
 {%- if form.attendee is defined -%}
     {{ form_row(form.attendee) }}

src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/App.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div>
-            <comment-editor :isSimple="globalState.isSimple" @toggle="toggleEditorMode"></comment-editor>
+            <comment-editor :isSimple="globalState.isSimple" @toggle="toggleEditorMode" @change="handleChange"></comment-editor>
         </div>
     </div>
 </template>
@@ -15,14 +15,23 @@ export default defineComponent({
     components: { CommentEditor },
     setup() {
         const globalState = inject('globalState');
+        const fieldName = inject('fieldName')
         const toggleEditorMode = () => {
             globalState.isSimple = !globalState.isSimple;
             localStorage.setItem('editorMode', globalState.isSimple ? 'simple' : 'rich');
         };
 
+        const handleChange = (newContent) => {
+            const hiddenField = document.querySelector(`input[name="${fieldName}"]`);
+            if (hiddenField) {
+                hiddenField.value = newContent || '';
+            }
+        };
+
         return {
             globalState,
-            toggleEditorMode
+            toggleEditorMode,
+            handleChange
         };
     }
 });

src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/component/CommentEditor.vue

@@ -7,6 +7,7 @@
                 :config="editorConfig"
                 v-model="content"
                 tag-name="textarea"
+                @input="emitChange"
             />
         </div>
         <div v-else class="editor-wrapper">
@@ -14,6 +15,7 @@
                 v-model="content"
                 name="content"
                 class="form-control"
+                @input="emitChange"
             ></textarea>
         </div>
         <a @click="toggleSimpleEditor" class="toggle-button btn btn-misc">{{ isSimple ? $t("mode.rich") : $t("mode.simple") }}</a>
@@ -45,12 +47,17 @@ export default defineComponent({
             emit("toggle");
         };
 
+        const emitChange = () => {
+            emit("change", content.value);
+        };
+
         return {
             isSimple,
             content,
             classicEditor,
             editorConfig,
-            toggleSimpleEditor
+            toggleSimpleEditor,
+            emitChange
         };
     }
 });

src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/index.js

@@ -21,9 +21,11 @@ commentWidgets.forEach((commentContainer) => {
     template: `<app></app>`
   });
 
-  // Pass the global state to each app instance
+  const fieldName = commentContainer.dataset.fieldname;
+
   app.use(i18n)
-    .provide('globalState', globalState)  // Provide global state to components
+    .provide('globalState', globalState)
+    .provide( 'fieldName', fieldName)
     .component("app", App)
     .mount(commentContainer);
 });