Merge branch 'refs/heads/master' into 321-text-editor

# Conflicts:
#	src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/editor_config.ts
#	src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts
#	src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
#	src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/WriteComment.vue
#	src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
#	src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
#	src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/MemberDetails.vue
#	src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue
#	yarn.lock

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

@@ -11,7 +11,7 @@ import Location from "./components/Location.vue";
 
 export default {
     name: "App",
-    props: ["hasSocialIssues", "hasLocation", "hasPerson"],
+    props: ["hasSocialIssues", "hasLocation", "hasPerson", "isSimpleEditor"],
     components: {
         ConcernedGroups,
         SocialIssuesAcc,

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
     };
   },
 })

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

@@ -126,4 +126,4 @@
 
 {% block css %}
     {{ encore_entry_link_tags('mod_pickentity_type') }}
-{% endblock %}
+{% endblock %}

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,39 @@
+.comment-container {
+    margin-top: 1.5rem;
+}
+
+.toggle-button {
+    background-color: white;
+    font-size: .8rem;
+    text-decoration: none;
+    position: absolute;
+    bottom: -10px;
+    left: 20px;
+    padding: 2px 6px;
+    cursor: pointer;
+    z-index: 10;
+    transition: left 0.1s ease-in-out;
+}
+
+.rich-editor-active .toggle-button {
+    bottom: 0;
+}
+
+.editor-wrapper textarea {
+    resize: vertical;
+    min-height: 100px;
+}
+
+.editor-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.editor-wrapper {
+    position: relative;
+}
+
+.hidden-textarea {
+    display: none;
+}

src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/editor_config.ts

@@ -8,10 +8,10 @@ import {
     Heading,
     Link,
     List,
-} from "ckeditor5";
-import coreTranslations from "ckeditor5/translations/fr.js";
+} from 'ckeditor5';
+import coreTranslations from 'ckeditor5/translations/fr.js';
 
-import "ckeditor5/ckeditor5.css";
+import 'ckeditor5/ckeditor5.css';
 
 import "./index.scss";
 
@@ -41,6 +41,8 @@ export default {
             "redo",
         ],
     },
-    translations: [coreTranslations],
+    translations: [
+        coreTranslations
+    ],
     licenseKey: "GPL",
-};
+} ;

src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts

@@ -1,12 +1,23 @@
-import config from "./editor_config";
-import { ClassicEditor } from "ckeditor5";
+import App from "../../vuejs/CommentEditor/App.vue"
+import { createApp, reactive } from "vue";
 
 const ckeditorFields: NodeListOf<HTMLTextAreaElement> =
-    document.querySelectorAll("textarea[ckeditor]");
-ckeditorFields.forEach((field: HTMLTextAreaElement): void => {
-    ClassicEditor.create(field, config).catch((error) => {
-        console.error(error.stack);
-        throw error;
-    });
+    document.querySelectorAll("[id^='comment-app']");
+
+const globalState = reactive({
+    isSimple: localStorage.getItem('editorMode') === 'simple'
+});
+window.addEventListener('storage', () => {
+    globalState.isSimple = localStorage.getItem('editorMode') === 'simple';
+});
+
+ckeditorFields.forEach((field: HTMLTextAreaElement): void => {
+    const app = createApp(App,{
+        fieldName: field.dataset.fieldName,
+        template: `<app></app>`
+    });
+
+    app.provide('globalState', globalState)
+        .component("app", App)
+        .mount(field);
 });
-//Fields.push.apply(Fields, document.querySelectorAll('.cf-fields textarea'));

src/Bundle/ChillMainBundle/Resources/public/module/pick-entity/index.js

@@ -10,6 +10,10 @@ let appsPerInput = new Map();
 
 function loadDynamicPicker(element) {
   let apps = element.querySelectorAll('[data-module="pick-dynamic"]');
+  let suggested;
+  let as_id;
+  let submit_on_adding_new_entity;
+  let label;
 
   apps.forEach(function (el) {
     const isMultiple = parseInt(el.dataset.multiple) === 1,

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

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <div>
+            <comment-editor
+                :isSimple="globalState.isSimple"
+                :fieldName="fieldName"
+                @toggle="toggleEditorMode"
+                ></comment-editor>
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineComponent, inject } from 'vue';
+import CommentEditor from "../CommentEditor/component/CommentEditor.vue";
+
+export default defineComponent({
+    name: "App",
+    components: { CommentEditor },
+    props: {
+        fieldName: String
+    },
+    setup() {
+        const globalState = inject('globalState');
+        const toggleEditorMode = () => {
+            globalState.isSimple = !globalState.isSimple;
+            localStorage.setItem('editorMode', globalState.isSimple ? 'simple' : 'rich');
+        };
+
+        return {
+            globalState,
+            toggleEditorMode,
+        };
+    }
+});
+</script>

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

@@ -0,0 +1,58 @@
+<template>
+    <div :class="{'editor-container': true, 'rich-editor-active': !isSimple}">
+        <div v-if="!isSimple" class="editor-wrapper">
+            <ckeditor
+                :name="fieldName"
+                :editor="classicEditor"
+                :config="editorConfig"
+                v-model.lazy="content"
+                tag-name="textarea"
+            />
+        </div>
+        <div v-else class="editor-wrapper">
+            <textarea
+                v-model.lazy="content"
+                :name="fieldName"
+                class="form-control"
+            ></textarea>
+        </div>
+        <a @click="toggleSimpleEditor" class="toggle-button">{{ isSimple ? "rich" : "simple" }}</a>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, toRefs } from 'vue';
+import { Ckeditor } from "@ckeditor/ckeditor5-vue";
+import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
+import { ClassicEditor } from "ckeditor5";
+
+export default defineComponent({
+    name: "CommentEditor",
+    components: {
+        ckeditor: Ckeditor,
+    },
+    props: {
+        type: String,
+        isSimple: Boolean,
+        fieldName: String,
+    },
+    setup(props, { emit }) {
+        const { isSimple } = toRefs(props);
+        const content = ref("");
+        const classicEditor = ClassicEditor;
+        const editorConfig = classicEditorConfig;
+
+        const toggleSimpleEditor = () => {
+            emit("toggle");
+        };
+
+        return {
+            isSimple,
+            content,
+            classicEditor,
+            editorConfig,
+            toggleSimpleEditor,
+        };
+    }
+});
+</script>

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: {
+    mode: {
+      simple: "Editeur simple",
+      rich: "Editeur riche"
+    }
+  },
+};
+
+export { appMessages };

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"
+        }
     },
 };
 

src/Bundle/ChillMainBundle/Resources/views/Form/fields.html.twig

@@ -214,7 +214,9 @@
 
 {% block private_comment_widget %}
     {% for entry in form %}
-        {{ form_widget(entry) }}
+        <div id="comment-app-{{ form.vars.id }}" data-field-name="{{ form.vars.full_name }}">
+            {{ form_widget(entry, { attr: { ckeditor: 'true' } }) }}
+        </div>
     {% endfor %}
 {% endblock %}
 
@@ -224,7 +226,9 @@
 
 {% block comment_widget %}
     {% for entry in form %}
-        {{ form_widget(entry) }}
+        <div id="comment-app-{{ form.vars.id }}" data-field-name="{{ form.vars.full_name }}">
+            {{ form_widget(entry, { attr: { ckeditor: 'true' } }) }}
+        </div>
     {% endfor %}
 {% endblock comment_widget %}
 

src/Bundle/ChillMainBundle/translations/messages.fr.yml

@@ -113,6 +113,8 @@ Any comment: Aucun commentaire
 # comment embeddable
 No comment associated: Aucun commentaire
 private comment: Notes privées
+comment_public: Note
+comment_private: Note privée
 
 #pagination
 Previous: Précédent

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue

@@ -61,15 +61,15 @@
 </template>
 
 <script>
-import { ClassicEditor } from "ckeditor5";
-import { Ckeditor } from "@ckeditor/ckeditor5-vue";
+import {ClassicEditor} from "ckeditor5";
+import {Ckeditor} from "@ckeditor/ckeditor5-vue";
 import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
 import { mapState } from "vuex";
 
 export default {
   name: "Comment",
   components: {
-    ckeditor: Ckeditor,
+    ckeditor: Ckeditor
   },
   data() {
     return {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/WriteComment.vue

@@ -39,15 +39,15 @@
 <script>
 import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
-import { Ckeditor } from "@ckeditor/ckeditor5-vue";
+import { Ckeditor }from "@ckeditor/ckeditor5-vue";
 import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
-import { ClassicEditor } from "ckeditor5";
+import {ClassicEditor} from "ckeditor5";
 
 export default {
   name: "WriteComment",
   components: {
     Modal,
-    ckeditor: Ckeditor,
+    ckeditor: Ckeditor
   },
   props: ["resource"],
   emits: ["updateComment"],

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue

@@ -46,8 +46,7 @@
       <label class="col-form-label">{{ $t("comments") }}</label>
       <ckeditor
         v-model="note"
-        :editor="classicEditor"
-        :config="editorConfig"
+        :editor="classicEditor" :config="editorConfig"
         tag-name="textarea"
       ></ckeditor>
     </div>
@@ -463,7 +462,7 @@
 import { mapState, mapGetters } from "vuex";
 import { Ckeditor } from "@ckeditor/ckeditor5-vue";
 import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
-import { ClassicEditor } from "ckeditor5";
+import {ClassicEditor} from "ckeditor5";
 import AddResult from "./components/AddResult.vue";
 import AddEvaluation from "./components/AddEvaluation.vue";
 import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue

@@ -273,7 +273,7 @@
 
 <script>
 import { ISOToDatetime } from "ChillMainAssets/chill/js/date";
-import { Ckeditor } from "@ckeditor/ckeditor5-vue";
+import {Ckeditor} from "@ckeditor/ckeditor5-vue";
 import { ClassicEditor } from "ckeditor5";
 import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
 import { mapState } from "vuex";

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/MemberDetails.vue

@@ -30,8 +30,7 @@
 
     <div class="item-row comment">
       <ckeditor
-        :editor="classicEditor"
-        :config="editorConfig"
+        :editor="classicEditor" :config="editorConfig"
         v-model="comment"
         tag-name="textarea"
       />
@@ -103,9 +102,9 @@ div.participation-details {
 <script>
 import { mapGetters } from "vuex";
 import PersonRenderBox from "ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue";
-import { Ckeditor } from "@ckeditor/ckeditor5-vue";
+import {Ckeditor} from "@ckeditor/ckeditor5-vue";
 import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
-import { ClassicEditor } from "ckeditor5";
+import {ClassicEditor} from "ckeditor5";
 
 export default {
   name: "MemberDetails",

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue

@@ -1,25 +1,25 @@
 <template>
-  <ckeditor
-    name="content"
-    :placeholder="
+    <ckeditor
+        name="content"
+        :placeholder="
       $t('household_members_editor.positioning.comment_placeholder')
     "
-    :editor="editor"
-    :config="editorConfig"
-    v-model="content"
-    tag-name="textarea"
-  />
+        :editor="editor"
+        :config="editorConfig"
+        v-model="content"
+        tag-name="textarea"
+    />
 </template>
 
 <script>
-import { Ckeditor } from "@ckeditor/ckeditor5-vue";
+import  { Ckeditor } from "@ckeditor/ckeditor5-vue";
 import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
-import { ClassicEditor } from "ckeditor5";
+import {ClassicEditor} from "ckeditor5";
 
 export default {
   name: "PersonComment.vue",
   components: {
-    ckeditor: Ckeditor,
+    ckeditor: Ckeditor
   },
   props: ["conc"],
   computed: {