personnal notes on materails on modalCard is ok

web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue

@@ -50,6 +50,12 @@
             </ul>
           </div>
         </section>
+        <section class="tool note">
+          <span class="btn mdi mdi-square-edit-outline"/>
+          <div class="tool-content">
+            <textarea spellcheck="false" v-model="note" name="note"/>
+          </div>
+        </section>
         <section class="tool print">
           <a :href="material.path+'/printable/print'" target="_blank">
             <span class="btn mdi mdi-printer"/>
@@ -198,6 +204,7 @@ import LinkedMaterialCard from 'vuejs/components/Content/LinkedMaterialCard'
 
 import cardMixins from 'vuejs/components/cardMixins'
 
+import { REST } from 'vuejs/api/rest-axios'
 import { MGQ } from 'vuejs/api/graphql-axios'
 import { print } from 'graphql/language/printer'
 import gql from 'graphql-tag'
@@ -205,6 +212,8 @@ import materiauFields from 'vuejs/api/gql/materiaumodal.fragment.gql'
 
 const prettyBytes = require('pretty-bytes')
 
+const _debounce = require('lodash/debounce')
+
 export default {
   name: "ModalCard",
   props: ['item'],
@@ -218,11 +227,14 @@ export default {
       loading: false,
       blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
       loadingFlag: false,
-      lightbox_index: null
+      lightbox_index: null,
+      note: "",
+      note_nid: null
     }
   },
   computed: {
     ...mapState({
+      csrf_token: state => state.User.csrf_token,
       flagcolls: state => state.User.flagcolls,
       showrooms: state => state.Showrooms.showrooms_by_tid
     })
@@ -230,6 +242,14 @@ export default {
   created () {
     console.log('modale item', this.item)
     this.loadMaterial()
+    this.debouncedSaveNote = _debounce(this.saveNote, 500)
+  },
+  watch: {
+    // whenever question changes, this function will run
+    note: function (n, o) {
+      console.log("note watcher: note", n)
+      this.debouncedSaveNote()
+    }
   },
   methods: {
     ...mapActions({
@@ -251,6 +271,10 @@ export default {
           console.log('loadMaterial material loaded', materiau )
           this.material = materiau
           this.loading = false
+          if(materiau.note && materiau.note.id){
+            this.note_id = materiau.note.id
+            this.note = materiau.note.contenu
+          }
           // delay the lazyload to let the card the time to update dom
           // maybe not the best method
           setTimeout(function () {
@@ -298,6 +322,53 @@ export default {
     },
     shortUrl(url){
       return url.replace(/^http:\/\//, '').replace(/^www\./, '')
+    },
+    saveNote(){
+      console.log("saveNote", this.note);
+      if(this.note_nid){
+        this.updateNote()
+      }else{
+        this.createNote()
+      }
+    },
+    updateNote(){
+      let params = {
+        type: [{target_id:'note'}],
+        field_contenu: this.note
+      }
+      let config = {
+        headers:{
+          "X-CSRF-Token": this.csrf_token
+        }
+      }
+      REST.patch(`/node/${this.note_nid}?_format=json`, params, config)
+        .then(({ data }) => {
+          console.log('updateNote REST data', data)
+        })
+        .catch(error => {
+          console.warn('Issue with updateNote', error)
+        })
+    },
+    createNote(){
+      let params = {
+        type: [{target_id:'note'}],
+        title: [{value:`note`}],
+        field_contenu: this.note,
+        field_target: this.item.id
+      }
+      let config = {
+        headers:{
+          "X-CSRF-Token": this.csrf_token
+        }
+      }
+      REST.post('/node?_format=json', params, config)
+        .then(({ data }) => {
+          console.log('createNote REST data', data)
+          this.note_nid = data.nid[0].value
+        })
+        .catch(error => {
+          console.warn('Issue with createNote', error)
+        })
     }
   }
 }