amdin front can create paragraphe source on entite via REST

src/assets/main.scss

@@ -453,11 +453,46 @@ body{
                 }
               }
               section.liens{
+                padding:1em 0;
                 a{
                   text-decoration: underline;
                   @include font_reponses();
                 }
               }
+              section.documents{
+                padding:1em 0;
+                a{
+                  text-decoration: underline;
+                  @include font_reponses();
+                }
+              }
+            }
+
+            &.add{
+              div.add-source-btn{
+                border: #eee 2px solid;
+                background-color: #eee;
+                border-radius: 5px;
+                margin: 1em 0 0;
+                font-size: 1em;
+                width: 100%;
+                height: 100px;
+                line-height:100px;
+                text-align: center;
+                transition: all 0.2s ease-in-out;
+                position: relative;
+                >svg{
+                  display: inline-block;
+                  vertical-align: middle;
+                  width:50px; height:50px;
+                  color: #333;
+                }
+                cursor: pointer;
+                box-sizing: border-box;
+                &:hover{
+                  border: #01ffe2 2px solid;
+                }
+              }
             }
           }
         }
@@ -1072,7 +1107,9 @@ div.editable-image,
 div.editable-video,
 div.editable-audios,
 ul.editable-files{
-  background: #eee;
+  &.can_update{
+    background: #eee;
+  }
   max-width: 100%;
   div.file-btn{
     border: #eee 2px solid;

src/components/contents/Entite.vue

@@ -12,17 +12,22 @@ import ContentEditable from '@components/editable/ContentEditable.vue';
 import CheckboxEditable from '@components/editable/CheckboxEditable.vue';
 import ImageEditable from '@components/editable/ImageEditable.vue';
 
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiTextBoxPlusOutline } from '@mdi/js';
+
 export default {
   props: ['concernement', 'entite', 'eid'],
   emits: ['reloadEntite'],
   data() {
     return {
+      mdiTextBoxPlusOutline_path: mdiTextBoxPlusOutline,
     }
   },
   computed: {
     ...mapState(ConcernementsStore,['opened_concernement',
                                     'ct_concernement',
                                     'ct_entite']),
+    ...mapState(UserStore,['csrf_token']),
     field_menace_maintien_label (){
       let str;
       if (this.concernement.entites_byid[this.eid].menacemaintien < 0) {
@@ -36,6 +41,55 @@ export default {
   methods: {
     reloadEntite(){
       this.$emit('reloadEntite');
+    },
+    addSource(){
+      console.log('add source');
+      const params_parag = {
+        type: [{target_id: 'source'}],
+        parent_type:{value: 'node'},
+        parent_id:{value: this.entite.id},
+        parent_field_name:{value: 'field_sources'}
+      };
+      
+      const configs = {
+        headers: {'X-CSRF-Token': this.csrf_token}
+      };
+
+      // call the api
+      // https://www.drupal.org/project/paragraphs/issues/3012600
+      REST.post(`/entity/paragraph?_format=json`, params_parag, configs)
+        .then(({ data }) => {
+          console.log('REST post new source parag', data);
+          
+            const params_node = {
+              type: 'entite',
+              nid: [{value: this.entite.id}],
+              'field_sources': [{
+                target_id: data.id[0].value,
+                target_revision_id: data.revision_id[0].value
+              }]
+            };
+            
+
+            // call the api
+            REST.patch(`/node/${this.entite.id}?_format=json`, params_node, configs)
+              .then(({ data }) => {
+                console.log('REST patch entite new field_sources', data)
+                this.reloadEntite();
+              })
+              .catch(error => {
+                console.warn(`Issue with patch node entite field_sources`, error)
+                Promise.reject(error)
+              })
+    
+    
+        })
+        .catch(error => {
+          console.warn(`Issue with post new paragraph source`, error)
+          Promise.reject(error)
+        })
+
+    
     }
   },
   components: {
@@ -43,6 +97,7 @@ export default {
     ContentEditable,
     CheckboxEditable,
     ImageEditable,
+    SvgIcon
   }
 }
 </script>
@@ -109,6 +164,14 @@ export default {
         :source="source"
         v-on:reloadEntite="reloadEntite" />
     </section>
+    <section 
+      v-else-if="entite.can_update"
+      class="sources add">
+      <div @click="addSource" class="add-source-btn">
+        <span>Ajouter une experience vécue</span>
+        <svg-icon type="mdi" :path="mdiTextBoxPlusOutline_path"/>
+      </div>
+    </section>
   </section>
 </template>
 

src/components/contents/Source.vue

@@ -55,7 +55,7 @@ export default {
 <template>
   <section class="source">
     <!-- <div class="date">{{ source.date.start }}</div> -->
-    <section v-if="source.description" class="description">
+    <section v-if="source.description || entite.can_update" class="description">
       <label v-if="ct_entite"> {{ field_sources_label }}</label>
       <!-- <div v-html="source.description"/> -->
       <ContentEditable 

src/components/editable/ContentEditable.vue

@@ -44,7 +44,13 @@ export default {
         toolbar: {
           allowMultiParagraphSelection: false,
           buttons: ['anchor'],
-        }
+        },
+        placeholder: {
+        /* This example includes the default options for placeholder,
+           if nothing is passed this is what it used */
+        text: 'Ajouter du text',
+        hideOnClick: true
+    }
       });
     }
   },