admin front create new entite on cartouche

src/api/gql/concernement.fragment.gql

@@ -28,6 +28,8 @@ fragment ConcernementFields on Concernement {
     name
   }
   entites {
+    id
+    revision_id
     menacemaintien
     actuelfuture
     entite {

src/assets/main.scss

@@ -1088,6 +1088,9 @@ body{
     border: #01ffe2 2px solid;
   }
 }
+figcaption[contenteditable="true"]{
+  border: rgba(0,0,0,0.8) 2px solid;
+}
 
 .editable{
   background: #eee;
@@ -1118,15 +1121,17 @@ ul.editable-files{
     margin: 1em 0 0;
     font-size: 1em;
     width: 100%;
-    height: 100px;
+    height: 50px;
-    line-height:100px;
+    line-height:40px;
     text-align: center;
     transition: all 0.2s ease-in-out;
     position: relative;
     >svg{
       display: inline-block;
       vertical-align: middle;
-      width:50px; height:50px;
+      $wh: 30px;
+      width:$wh;
+      height:$wh;
       color: #333;
     }
     cursor: pointer;
@@ -1221,4 +1226,38 @@ ul.editable-files{
     }
   }
 
+}
+
+.delete-btn{
+  text-align: center;
+  background-color: #eee;
+  border: #eee 2px solid;
+  &:hover{
+    border: #01ffe2 2px solid;
+  }
+}
+
+div.add-entite-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;
+  }
 }

src/components/contents/TerrainDeVie.vue

@@ -5,6 +5,9 @@ import { ConcernementsStore } from '@stores/concernements'
 import { UserStore } from '@/stores/user'
 // import { CommonStore } from '@/stores/common'
 
+import REST from '@api/rest-axios'
+
+
 import { print } from 'graphql/language/printer'
 import gql from 'graphql-tag'
 import GQL from '@api/graphql-axios'
@@ -20,6 +23,7 @@ import 'vue-slider-component/theme/default.css'
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiChevronRight } from '@mdi/js';
 import { mdiChevronDown } from '@mdi/js';
+import { mdiStickerPlusOutline } from '@mdi/js';
 
 import ContentEditable from '@components/editable/ContentEditable.vue';
 import CheckboxEditable from '@components/editable/CheckboxEditable.vue';
@@ -39,6 +43,7 @@ export default {
       chevronright_path: mdiChevronRight,
       chevrondown_path: mdiChevronDown,
       headerreduced: false,
+      mdiStickerPlusOutline_path: mdiStickerPlusOutline,
     }
   },
   computed: {
@@ -48,7 +53,7 @@ export default {
                                     'ct_concernement',
                                     'ct_entite',
                                     'detailsZoomValue']),
-    ...mapState(UserStore,['name']),
+    ...mapState(UserStore,['name','csrf_token']),
     created(){
       let d = new Date(this.concernement.created); 
       console.log('d', d);
@@ -216,7 +221,120 @@ export default {
       let new_field_content = e.target.innerText;
       console.log('onContentEditableFocusOut', new_field_content);
       console.log('onContentEditableFocusOut this.concernement.title', this.concernement.title);
+    },
+    addEntite(e){
+      console.log('add entite');
+      // 1 create entite node
+      this.createEntiteNode()
+        .then((entite) => {
+          console.log('createEntiteNode then node', entite);
+          // 2 create entite paragraph with entite in it
+          this.createEntiteParag(entite)
+            .then((parag) => {
+              console.log('createEntiteParag then parag', parag);
+              // 3 record on concernement field_entites
+              this.recordConcernementEntiteField(parag)
+                .then((concernement) => {
+                  console.log('concernement', concernement);
+                  // TODO reload the map item
+                })
+            })
+        })
+
+    },
+    createEntiteNode(){
+      return new Promise((resolve, reject) => {
+        // 1 create entite node
+        const params_node_entite = {
+          type: 'entite',
+          title: [{value:'Titre à personaliser'}],
+          field_confidentialite: [{value:'confidentialite_public'}]
+        };
+        
+        const configs = {
+          headers: {'X-CSRF-Token': this.csrf_token}
+        };
+
+        REST.post(`/node?_format=json`, params_node_entite, configs)
+          .then(({ data }) => {
+            console.log('REST post new node entite', data);
+            resolve(data)
+          })
+          .catch(error => {
+            console.warn(`Issue with post new paragraph source`, error)
+            reject(error)
+          })
+      })
+    },
+    createEntiteParag(entite){
+      return new Promise((resolve, reject) => {
+        // 2 create paragraphe
+        const params_parag_entite = {
+          type: [{target_id: 'entite_concernement'}],
+          parent_type:{value: 'node'},
+          parent_id:{value: this.cid},
+          parent_field_name:{value: 'field_entite'}, // entity reference revision 
+          'field_entite':[{target_id: entite.nid[0].value}] // entity reference
+        };
+        
+        const configs = {
+          headers: {'X-CSRF-Token': this.csrf_token}
+        };
+
+        REST.post(`/entity/paragraph?_format=json`, params_parag_entite, configs)
+          .then(({ data }) => {
+            console.log('REST post new source parag', data);
+            resolve(data)
+      
+          })
+          .catch(error => {
+            console.warn(`Issue with post new paragraph source`, error)
+            reject(error)
+          })
+      })
+    },
+    recordConcernementEntiteField(parag){
+      return new Promise((resolve, reject) => {
+        // 3 record concernement field_entite
+
+        // get all the field_entite values, we don't want to ersae everything
+        let entites = [];
+        this.concernement.entites.forEach((entite) =>{
+          entites.push({
+            target_id: entite.id,
+            target_revision_id: entite.revision_id
+          })
+        })
+        // add the new field value
+        entites.push({
+          target_id: parag.id[0].value,
+          target_revision_id: parag.revision_id[0].value
+        })
+        console.log('entites', entites);
+        
+        const params_node = {
+          type: 'concernement',
+          nid: [{value: this.cid}],
+          'field_entite': entites
+        };
+        
+        const configs = {
+          headers: {'X-CSRF-Token': this.csrf_token}
+        };
+
+        REST.patch(`/node/${this.cid}?_format=json`, params_node, configs)
+          .then(({ data }) => {
+            console.log('REST patch entite new field_sources', data)
+            resolve(data)
+          })
+          .catch(error => {
+            console.warn(`Issue with patch node entite field_sources`, error)
+            reject(error)
+          })
+        // resolve('test')
+      })
     }
+
   },
   components: {
     CartoucheLayout,
@@ -317,6 +435,12 @@ export default {
               }" />
 
         </section>
+        <template v-if="concernement.can_update">
+          <div @click="addEntite" class="add-entite-btn">
+            <span>Ajouter une entité</span>
+            <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
+          </div>
+        </template>
       </template>
 
       <!-- entite -->