accompanyingCourse: ckeditor for comment bloc + sass color variables in app.vue

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

@@ -265,6 +265,17 @@ table.table-bordered {
    }
 }
 
+div.metadata {
+   font-size: smaller;
+   color: $gray-600;
+   span.user, span.date {
+      text-decoration: underline dotted;
+      &:hover {
+         color: $gray-700;
+      }
+   }
+}
+
 /// when there is no data
 .custom_field_no_data,
 .chill-no-data-statement {

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

@@ -54,6 +54,9 @@ export default {
 </script>
 
 <style lang="scss">
+   @import 'ChillMainAssets/module/bootstrap/shared';
+   $chill-accourse-context: #718596;
+
    div#accompanying-course {
       div.vue-component {
          h2 {
@@ -63,7 +66,7 @@ export default {
                position: absolute;
                content: "\f142";  //ellipsis-v
                font-family: "ForkAwesome";
-               color: #718596ab;
+               color: tint-color($chill-accourse-context, 10%);
                left: -22px;
                top: 4px;
             }
@@ -74,10 +77,10 @@ export default {
          }
          padding: 0em 0em;
          margin: 1em 0;
-         border: 1px dotted #718596ab;
+         border: 1px dotted tint-color($chill-accourse-context, 10%);
          border-radius: 5px;
-         border-left: 1px dotted #718596ab;
-         border-right: 1px dotted #718596ab;
+         border-left: 1px dotted tint-color($chill-accourse-context, 10%);
+         border-right: 1px dotted tint-color($chill-accourse-context, 10%);
          dd {
             margin-left: 1em;
          }
@@ -87,6 +90,5 @@ export default {
          table {
          }
       }
-
-}
+   }
 </style>

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

@@ -10,24 +10,23 @@
       <div>
          <form @submit.prevent="submitform">
 
-            <label for="content">{{ $t('comment.label') }}</label>
+            <label class="col-form-label" for="content">{{ $t('comment.label') }}</label>
 
-            <div v-if="initialComment">
+            <ckeditor
+               name="content"
+               v-bind:placeholder="$t('comment.content')"
+               :editor="editor"
+               v-model="content"
+               tag-name="textarea">
+            </ckeditor>
+
+            <div v-if="initialComment" class="metadata">
                {{ $t('comment.created_by', [
                initialComment.creator.text,
                $d(initialComment.createdAt.datetime, 'long')
             ]) }}
             </div>
 
-            <textarea
-               name="content"
-               v-bind:placeholder="$t('comment.content')"
-               rows="8"
-               cols="80"
-               ckeditor="ckeditor"
-               v-model="content">
-            </textarea>
-
             <ul class="record_actions">
                <li>
                   <button type="submit" class="btn btn-save">{{ $t('action.save') }}</button>
@@ -47,10 +46,17 @@
 </template>
 
 <script>
+import CKEditor from '@ckeditor/ckeditor5-vue';
+import ClassicEditor from "ChillMainAssets/module/ckeditor5";
+
 export default {
    name: "Comment",
+   components: {
+      ckeditor: CKEditor.component,
+   },
    data() {
       return {
+         editor: ClassicEditor,
          formdata: {
             type: "accompanying_period_comment",
             content: ''
@@ -66,7 +72,7 @@ export default {
             this.formdata.content = value;
          },
          get() {
-            return (this.initialComment)? this.initialComment.content : null;
+            return (this.initialComment)? this.initialComment.content : {};
          }
       },
       errors() {
@@ -80,7 +86,7 @@ export default {
       },
       removeComment() {
          console.log('remove');
-         this.$store.dispatch('postFirstComment', null);
+         this.$store.dispatch('postFirstComment', {});
       }
    }
 }
@@ -88,12 +94,11 @@ export default {
 * TODO
 * - [x] delete button in ul record_actions, but not in form
 * - [ ] display updatedAt => initialComment fetch PATCH content changes MUST NOT change object id !!
-* - [ ] ckeditor integration
 */
 </script>
 
-<style lang="scss" scoped>
-   div.vue-component > div {
-      //margin: 1em;
-   }
+<style lang="scss">
+div.ck-editor.ck-reset {
+   margin: 0.6em 0;
+}
 </style>