Turn component into a small vue app and add public private comment logic

src/Bundle/ChillActivityBundle/Form/ActivityType.php

@@ -216,12 +216,12 @@ class ActivityType extends AbstractType
             ]);
         }*/
 
-        if ($activityType->isVisible('privateComment')) {
+/*        if ($activityType->isVisible('privateComment')) {
             $builder->add('privateComment', PrivateCommentType::class, [
                 'label' => '' === $activityType->getLabel('privateComment') ? 'private comment' : $activityType->getPrivateCommentLabel(),
                 'required' => false,
             ]);
-        }
+        }*/
 
         if ($activityType->isVisible('persons')) {
             $builder->add('persons', HiddenType::class);

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue

@@ -9,7 +9,7 @@
 import ConcernedGroups from "./components/ConcernedGroups.vue";
 import SocialIssuesAcc from "./components/SocialIssuesAcc.vue";
 import Location from "./components/Location.vue";
-import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor.vue"
+import CommentEditor from "ChillMainAssets/vuejs/CommentEditor/component/CommentEditor.vue"
 
 export default {
     name: "App",

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

@@ -84,11 +84,11 @@
 {#    {{ form_row(form.comment) }}#}
 {#{% endif %}#}
 
-    <div id="add-comment"></div>
+<div id="comment-widget" data-comment-mode="{{ 'both' }}"></div>
 
-{%- if form.privateComment is defined -%}
+{#{%- if form.privateComment is defined -%}#}
-    {{ form_row(form.privateComment) }}
+{#    {{ form_row(form.privateComment) }}#}
-{% endif %}
+{#{% endif %}#}
 
 {%- if form.attendee is defined -%}
     {{ form_row(form.attendee) }}
@@ -124,6 +124,7 @@
 
 {% block js %}
     {{ encore_entry_script_tags('mod_pickentity_type') }}
+    {{ encore_entry_script_tags('vue_comment_editor') }}
 {% endblock %}
 
 {% block css %}

src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss

@@ -33,6 +33,8 @@
 
 @import './scss/hover.scss';
 
+@import './scss/comment-editor.scss';
+
 /*
  *    BASE LAYOUT POSITION
  */

src/Bundle/ChillMainBundle/Resources/public/chill/scss/comment-editor.scss

@@ -0,0 +1,14 @@
+.comment-container {
+    margin-top: 1.5rem;
+}
+
+.editor-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.editor-wrapper {
+    position: relative;
+}

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

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <div class="comment-container" v-if="shouldRenderPublic">
+            <label class="col-form-label" for="content">{{
+                    $t("comment.label_public")
+                }}</label>
+            <comment-editor type="public"></comment-editor>
+        </div>
+        <div class="comment-container" v-if="shouldRenderPrivate">
+            <label class="col-form-label" for="content">{{
+                    $t("comment.label_private")
+                }}</label>
+            <comment-editor type="private"></comment-editor>
+        </div>
+    </div>
+</template>
+
+<script>
+import CommentEditor from "../CommentEditor/component/CommentEditor.vue";
+
+export default {
+    name: "App",
+    components: { CommentEditor },
+    props: {
+        commentMode: String,
+    },
+    computed: {
+        shouldRenderPublic() {
+            return this.commentMode === "public" || this.commentMode === "both";
+        },
+        shouldRenderPrivate() {
+            return this.commentMode === "private" || this.commentMode === "both";
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,89 @@
+<template>
+    <div class="editor-container">
+        <div v-if="!isSimple" class="editor-wrapper">
+            <ckeditor
+                name="content"
+                :editor="classicEditor"
+                :config="editorConfig"
+                v-model="content"
+                tag-name="textarea"
+            />
+        </div>
+        <div v-else class="editor-wrapper">
+            <textarea
+                v-model="content"
+                name="content"
+                class="form-control"
+            ></textarea>
+        </div>
+        <a @click="toggleSimpleEditor" class="toggle-button">{{ buttonText }}</a>
+    </div>
+</template>
+
+<script lang="ts">
+import {Ckeditor} from "@ckeditor/ckeditor5-vue";
+import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config"
+import {ClassicEditor} from "ckeditor5";
+import {onMounted, ref} from "vue"
+
+export default {
+    name: "CommentEditor",
+    components: {
+        ckeditor: Ckeditor,
+    },
+    setup() {
+        const isSimple = ref(false);
+        const content = ref("");
+        const classicEditor = ClassicEditor;
+        const editorConfig = classicEditorConfig;
+
+        const buttonText = "Simple editor"
+
+        const initializeEditorPreference = () => {
+          const storedValue = localStorage.getItem("isSimpleEditor");
+          if (storedValue !== null) {
+            isSimple.value = storedValue === "true";
+          } else {
+            localStorage.setItem("isSimpleEditor", "false");
+          }
+        };
+
+        const toggleSimpleEditor = () => {
+          isSimple.value = !isSimple.value;
+          localStorage.setItem("isSimpleEditor", String(isSimple.value));
+        };
+
+        onMounted(() => initializeEditorPreference())
+
+        return {
+            isSimple,
+            toggleSimpleEditor,
+            content: "",
+            classicEditor,
+            editorConfig,
+            buttonText
+        };
+    },
+};
+</script>
+
+<style scoped lang="scss">
+.toggle-button {
+    position: absolute;
+    bottom: -10px;
+    left: 10px;
+    background: white;
+    padding: 2px 6px;
+    font-size: 14px;
+    text-decoration: none;
+    border-radius: 4px;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    z-index: 10;
+}
+
+.editor-wrapper textarea {
+    resize: vertical;
+    min-height: 100px;
+}
+</style>

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

@@ -0,0 +1,14 @@
+import {personMessages} from "ChillPersonAssets/vuejs/_js/i18n";
+import {calendarUserSelectorMessages} from "ChillCalendarAssets/vuejs/_components/CalendarUserSelector/js/i18n";
+import {activityMessages} from "ChillActivityAssets/vuejs/Activity/i18n";
+
+const appMessages = {
+  fr: {
+    comment:{
+      label_public: "Note",
+      label_private: "Note privée",
+    }
+  },
+};
+
+export { appMessages };

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

@@ -0,0 +1,16 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import {_createI18n} from "ChillMainAssets/vuejs/_js/i18n";
+import {appMessages} from "ChillMainAssets/vuejs/CommentEditor/i18n";
+
+const i18n = _createI18n(appMessages);
+const commentContainer = document.getElementById('comment-widget');
+
+const commentMode = commentContainer.dataset.commentMode;
+
+const app = createApp({
+  template: `<app></app>`,
+}, { commentMode })
+  .use(i18n)
+  .component("app", App)
+  .mount("#comment-widget");

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

@@ -1,91 +0,0 @@
-<template>
-    <teleport to="#add-comment">
-        <div>
-            <label class="col-form-label" for="content">{{
-                    $t("comment.label")
-                }}</label>
-
-            <div class="text-md-end">
-                <span class="d-block d-sm-inline-block mb-md-2">
-                  <a @click="toggleSimpleEditor" class="flag-toggle">
-                    <span :class="{ on: isSimple }">{{ $t("comment.editor_simple") }}</span>
-                    <i
-                        class="fa"
-                        :class="{
-                        'fa-toggle-on': !isSimple,
-                        'fa-toggle-on fa-flip-horizontal': isSimple,
-                      }"
-                    />
-                    <span :class="{ on: !isSimple }">{{ $t("comment.editor_rich") }}</span>
-                  </a>
-                </span>
-            </div>
-
-            <div v-if="!isSimple">
-                <ckeditor
-                    name="content"
-                    :editor="classicEditor"
-                    :config="editorConfig"
-                    v-model="content"
-                    tag-name="textarea"
-                />
-            </div>
-
-          <div v-else>
-                <textarea
-                    v-model="content"
-                    name="content"
-                    class="form-control"
-                ></textarea>
-          </div>
-        </div>
-    </teleport>
-</template>
-
-<script lang="ts">
-import {Ckeditor} from "@ckeditor/ckeditor5-vue";
-import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config"
-import {ClassicEditor} from "ckeditor5";
-import {onMounted, ref} from "vue"
-
-export default {
-    name: "CommentEditor",
-    components: {
-        ckeditor: Ckeditor,
-    },
-    setup() {
-        const isSimple = ref(false);
-        const content = ref("");
-        const classicEditor = ClassicEditor;
-        const editorConfig = classicEditorConfig;
-
-        const initializeEditorPreference = () => {
-          const storedValue = localStorage.getItem("isSimpleEditor");
-          if (storedValue !== null) {
-            isSimple.value = storedValue === "true"; // Convert string to boolean
-          } else {
-            localStorage.setItem("isSimpleEditor", "false"); // Set default value
-          }
-        };
-
-        const toggleSimpleEditor = () => {
-          isSimple.value = !isSimple.value;
-          localStorage.setItem("isSimpleEditor", String(isSimple.value)); // Update localStorage
-        };
-
-        onMounted(() => initializeEditorPreference())
-
-        return {
-            isSimple,
-            toggleSimpleEditor,
-            content: "",
-            classicEditor,
-            editorConfig,
-        };
-    },
-};
-</script>
-
-<style scoped lang="scss">
-
-</style>

src/Bundle/ChillMainBundle/chill.webpack.config.js

@@ -120,4 +120,8 @@ module.exports = function (encore, entries) {
     "vue_onthefly",
     __dirname + "/Resources/public/vuejs/OnTheFly/index.js",
   );
+  encore.addEntry(
+    "vue_comment_editor",
+    __dirname + "/Resources/public/vuejs/CommentEditor/index.js",
+  );
 };