From 578bce31b999b65b76e52867e65502cad7f4d25b Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Mon, 27 Jan 2025 11:28:44 +0100
Subject: [PATCH] Setup new component for text editor

---
 .../ChillActivityBundle/Form/ActivityType.php |  5 +-
 .../Resources/public/vuejs/Activity/App.vue   |  5 +-
 .../Resources/public/vuejs/Activity/index.js  |  3 +
 .../Resources/views/Activity/new.html.twig    | 10 +--
 .../vuejs/_components/CommentEditor.vue       | 62 +++++++++++++++++++
 .../Resources/public/vuejs/_js/i18n.ts        |  5 ++
 6 files changed, 83 insertions(+), 7 deletions(-)
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor.vue

diff --git a/src/Bundle/ChillActivityBundle/Form/ActivityType.php b/src/Bundle/ChillActivityBundle/Form/ActivityType.php
index 28c607acd..00570b16f 100644
--- a/src/Bundle/ChillActivityBundle/Form/ActivityType.php
+++ b/src/Bundle/ChillActivityBundle/Form/ActivityType.php
@@ -207,13 +207,14 @@ class ActivityType extends AbstractType
             ]);
         }
 
-        if ($activityType->isVisible('comment')) {
+/*        if ($activityType->isVisible('comment')) {
             $builder->add('comment', CommentType::class, [
+//                'disable_editor' => true,
                 'label' => empty($activityType->getLabel('comment'))
                     ? 'activity.comment' : $activityType->getLabel('comment'),
                 'required' => $activityType->isRequired('comment'),
             ]);
-        }
+        }*/
 
         if ($activityType->isVisible('privateComment')) {
             $builder->add('privateComment', PrivateCommentType::class, [
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
index f17e42842..dd5b8cb9f 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
@@ -2,20 +2,23 @@
     <concerned-groups v-if="hasPerson" />
     <social-issues-acc v-if="hasSocialIssues" />
     <location v-if="hasLocation" />
+    <comment-editor v-if="isSimpleEditor"/>
 </template>
 
 <script>
 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";
 
 export default {
     name: "App",
-    props: ["hasSocialIssues", "hasLocation", "hasPerson"],
+    props: ["hasSocialIssues", "hasLocation", "hasPerson", "isSimpleEditor"],
     components: {
         ConcernedGroups,
         SocialIssuesAcc,
         Location,
+        CommentEditor
     },
 };
 </script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/index.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/index.js
index 2c0a903e5..a8870a549 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/index.js
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/index.js
@@ -14,18 +14,21 @@ const i18n = _createI18n(activityMessages);
 const hasSocialIssues = document.querySelector("#social-issues-acc") !== null;
 const hasLocation = document.querySelector("#location") !== null;
 const hasPerson = document.querySelector("#add-persons") !== null;
+const isSimpleEditor = true;
 
 const app = createApp({
   template: `<app
        :hasSocialIssues="hasSocialIssues"
        :hasLocation="hasLocation"
        :hasPerson="hasPerson"
+       :isSimpleEditor = "isSimpleEditor"
     ></app>`,
   data() {
     return {
       hasSocialIssues,
       hasLocation,
       hasPerson,
+      isSimpleEditor
     };
   },
 })
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig
index 411380852..e111c4a50 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig
@@ -80,9 +80,11 @@
     {{ form_row(form.travelTime) }}
 {% endif %}
 
-{%- if form.comment is defined -%}
-    {{ form_row(form.comment) }}
-{% endif %}
+{#{%- if form.comment is defined -%}#}
+{#    {{ form_row(form.comment) }}#}
+{#{% endif %}#}
+
+    <div id="add-comment"></div>
 
 {%- if form.privateComment is defined -%}
     {{ form_row(form.privateComment) }}
@@ -126,4 +128,4 @@
 
 {% block css %}
     {{ encore_entry_link_tags('mod_pickentity_type') }}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor.vue
new file mode 100644
index 000000000..86b8e2b49
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor.vue
@@ -0,0 +1,62 @@
+<script lang="ts">
+import CKEditor from "@ckeditor/ckeditor5-vue";
+import ClassicEditor from "../../module/ckeditor5/editor_config";
+
+export default {
+    name: "CommentEditor",
+    components: {
+        ckeditor: CKEditor.component,
+    },
+    data() {
+        return {
+            editor: ClassicEditor,
+            loading: false,
+            lastRecordedContent: null,
+            content: '',
+            richEditor: true,
+        };
+    },
+    props: {
+
+    }
+};
+</script>
+
+<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 class="flag-toggle">
+                    <span :class="{ on: false }">{{ $t("comment.editor_simple") }}</span>
+                    <i
+                        class="fa"
+                        :class="{
+                        'fa-toggle-on': true,
+                        'fa-toggle-on fa-flip-horizontal': false,
+                      }"
+                    />
+                    <span :class="{ on: true }">{{ $t("comment.editor_rich") }}</span>
+                  </a>
+                </span>
+            </div>
+
+            <div v-if="richEditor">
+                <ckeditor
+                    name="content"
+                    :editor="editor"
+                    v-model="content"
+                    tag-name="textarea"
+                />
+            </div>
+        </div>
+    </teleport>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts
index db9a37104..8518147eb 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts
@@ -54,6 +54,11 @@ const messages = {
             residential_address: "Adresse de résidence",
             located_at: "réside chez",
         },
+        comment: {
+            label: "Commentaire",
+            editor_simple: "Simple",
+            editor_rich: "Riche"
+        }
     },
 };