field video on paragraphe source

src/api/gql/entite.fragment.gql

@@ -14,6 +14,7 @@ fragment EntiteFields on Entite {
   }
   sources {
     id
+    uuid
     description
     images {
       alt

src/assets/main.scss

@@ -397,7 +397,7 @@ body{
           >section{
             padding-bottom: 2em;
           }
-          >section.image{
+          // >section.image{
             figure{
               // border: #333 1px solid;
               position: relative;
@@ -421,11 +421,14 @@ body{
                 opacity: 1;
               }
             }
-          }
+          // }
           .sources{
             // padding-top: 1em;
             .source{
               padding-top: 0.5em;
+              >section{
+                padding-bottom: 0.5em;
+              }
               // div.date{
               //   display: block;
               //   font-weight: 100;
@@ -436,11 +439,20 @@ body{
                 >div{
                   // @include font_reponses();
                   font-size: inherit;
-                  padding-bottom: 1em;
+                  // padding-bottom: 1em;
                 }
 
               }
-              .liens{
+              section.audio{
+                padding:1em 0;
+                label{
+                  padding: 0;
+                }
+                div.plyr__controls{
+                  padding:0;
+                }
+              }
+              section.liens{
                 a{
                   text-decoration: underline;
                   @include font_reponses();
@@ -1056,10 +1068,11 @@ body{
   }
 }
 
-div.editable-image{
+div.editable-image,
+div.editable-video{
   background: #eee;
   max-width: 100%;
-  div.btn{
+  div.file-btn{
     border: #eee 2px solid;
     border-radius: 5px;
     margin: 1em 0 0;
@@ -1083,6 +1096,14 @@ div.editable-image{
     }
 
   }
+  div.video-btn{
+    cursor: pointer;
+  }
+  div.editable-wrapper{
+    padding:0.3em 0.5em;
+    margin:0.5em 0;
+  }
+
   div.delete-btn{
     cursor: pointer;
   }

src/components/contents/Entite.vue

@@ -52,11 +52,11 @@ export default {
     <section v-if="entite.image.length || entite.can_update" class="image">
       <ImageEditable 
         :can_update="entite.can_update"
-        :image="entite.image"
+        :image="entite.image[0]"
         :data="{
           entitytype: 'node',
           bundle: 'entite',
-          nid: this.entite.id,
+          id: this.entite.id,
           uuid: this.entite.uuid,
           field: 'field_image'
         }"

src/components/contents/Source.vue

@@ -8,12 +8,16 @@ import { UserStore } from '@stores/user'
 import ContentEditable from '@components/editable/ContentEditable.vue';
 import CheckboxEditable from '@components/editable/CheckboxEditable.vue';
 import ImageEditable from '@components/editable/ImageEditable.vue';
+import VideoEditable from '@components/editable/VideoEditable.vue';
 
 export default {
   props: ['concernement', 'entite', "eid", 'source'],
   emits: ['reloadEntite'],
   data() {
     return {
+      // plyr_options: {
+      //   controls: ['play', 'progress', 'current-time', 'mute', 'volume']
+      // }
     }
   },
   computed: {
@@ -37,6 +41,7 @@ export default {
     ContentEditable,
     CheckboxEditable,
     ImageEditable,
+    VideoEditable,
   }
 }
 </script>
@@ -61,33 +66,41 @@ export default {
           v-on:updated="reloadEntite" />
     </section>
       
+    <!-- v-if="source.images.length"
+      :key="j" 
+      -->
     <section
-      v-if="source.images.length" 
       class="images">
-        <figure
-          v-for="(image, j) in source.images"
-          :key="j">
-          <figure>
-            <img :src="image.url" :alt="image.alt"/>
-            <figcaption>{{ image.alt }}</figcaption>
-          </figure>
-        </figure>
+        <ImageEditable
+          :can_update="entite.can_update"
+          :image="source.images[0]"
+          :data="{
+            entitytype: 'paragraph',
+            bundle: 'source',
+            id: this.source.id,
+            uuid: this.source.uuid,
+            field: 'field_images'
+          }"
+          v-on:updated="reloadEntite" />
     </section>
 
+    <!-- v-if="source.videos.length" -->
     <section
-      v-if="source.videos.length"
-      class="video multiple">
-        <vue-plyr
-          v-for="(video,v) in source.videos"
-          :key="v">
-            <div class="plyr__video-embed">
-              <!-- TODO fix vimeo embed url -->
-              <iframe 
-                :src="video.url"
-                allowfullscreen
-              ></iframe>
-            </div>
-        </vue-plyr>
+      class="video">
+        <VideoEditable
+          :can_update="entite.can_update"
+          :video="source.videos[0]"
+          :data="{
+            entitytype: 'paragraph',
+            bundle: 'source',
+            id: this.source.id,
+            uuid: this.source.uuid,
+            field: {
+              field_name: 'field_videos',
+              value: 'value'
+            }
+          }"
+          v-on:updated="reloadEntite"/>
     </section>
 
     <section
@@ -98,7 +111,7 @@ export default {
             :key="a">
           <label v-if="audio.description">{{ audio.description }}</label>
           <label v-else>{{ audio.file.filename }}</label>
-          <vue-plyr>
+          <vue-plyr  :options="plyr_options">
               <audio>
                 <source :src="audio.file.url" :type="audio.file.filemime" />
               </audio>

src/components/contents/TerrainDeVie.vue

@@ -202,9 +202,9 @@ export default {
         })
     },
     onMainScrolled(scrolled){
-      console.log('this.$refs', this.$refs);
+      // console.log('this.$refs', this.$refs);
       let cartouche_main = this.$refs.cartouche_layout.$refs.cartouche_main;
-      console.log('cartouche_main', cartouche_main);
+      // console.log('cartouche_main', cartouche_main);
       if(scrolled && cartouche_main.scrollHeight > 600){
         this.headerreduced = true;
       } else {

src/components/editable/ContentEditable.vue

@@ -39,12 +39,14 @@ export default {
     console.log('ContentEditable created');
   },
   mounted () {
-    this.editor = new MediumEditor(this.$refs.html_editable, {
-      toolbar: {
-        allowMultiParagraphSelection: false,
-        buttons: ['anchor'],
-      }
-    });
+    if (this.contenteditable && this.html) {
+      this.editor = new MediumEditor(this.$refs.html_editable, {
+        toolbar: {
+          allowMultiParagraphSelection: false,
+          buttons: ['anchor'],
+        }
+      });
+    }
   },
   beforeUnmount() {
   },
@@ -91,7 +93,7 @@ export default {
           this.$emit('updated');
         })
         .catch(error => {
-          console.warn(`Issue with patch node ${this.data.bundle}`, error)
+          console.warn(`Issue with patch ${this.data.entitytype} ${this.data.bundle}`, error)
           Promise.reject(error)
         })
     }
@@ -106,7 +108,7 @@ export default {
     v-if="!html" 
     :is="tag"
     :contenteditable="contenteditable"
-    :spellcheck="speelcheck"
+    :spellcheck="spellcheck"
     @focusout="onContentEditableFocusOut"
   >{{ value }}</component>
   <component
@@ -116,7 +118,7 @@ export default {
     ref="html_editable"
     v-html="value"
     :contenteditable="contenteditable"
-    :spellcheck="speelcheck"
+    :spellcheck="spellcheck"
     @focusout="onContentEditableFocusOut"
   />
 </template>

src/components/editable/ImageEditable.vue

@@ -71,13 +71,21 @@ export default {
 
       const params = {
         type: this.data.bundle,
-        nid: [{"value":this.data.nid}],
+        // nid: [{"value":this.data.id}],
         [this.data.field]: {value: null}
       };
+      if (this.data.entitytype === 'node') {
+        params.nid = [{"value":this.data.id}];
+      } else {
+        params.id = [{"value":this.data.id}];
+      }
+
       const configs = {
         headers: {'X-CSRF-Token': this.csrf_token}
       };
-      REST.patch(`/node/${this.data.nid}?_format=json`, params, configs)
+      
+      let url_base = `/${this.data.entitytype === 'node' ? '' : 'entity/'}${this.data.entitytype}`;
+      REST.patch(`${url_base}/${this.data.id}?_format=json`, params, configs)
         .then(({ data }) => {
           console.log(`user REST patch node ${this.data.bundle} ${this.data.field}`, data)
           // TODO if success update the data in pinia 
@@ -122,24 +130,24 @@ export default {
 <template>
   <div class="editable-image">
     <!-- with img -->
-    <template v-if="image.length">
+    <template v-if="image">
       <figure>
-        <img :src="image[0].url" :alt="image[0].alt"/>
-        <figcaption 
+        <img :src="image.url" :alt="image.alt"/>
+        <!-- <figcaption 
           :contenteditable="can_update"
-          v-if="image[0].alt || can_update"
+          v-if="image.alt || can_update"
         >
-          {{ image[0].alt }}
-        </figcaption>
+          {{ image.alt }}
+        </figcaption> -->
         <ContentEditable 
           tag="figcaption"
-          :value="image[0].alt"
+          :value="image.alt"
           :contenteditable="can_update"
           :data="{
             entitytype: data.entitytype,
             bundle: data.bundle,
-            nid: data.nid,
-            field: {field_name: data.field, value:'alt', additional_values:{target_id:image[0].id}}
+            id: data.id,
+            field: {field_name: data.field, value:'alt', additional_values:{target_id:image.id}}
           }" />
 
       </figure>
@@ -149,7 +157,7 @@ export default {
     </template>
     <!-- with out img -->
     <template v-else-if="can_update">
-      <div @click="addImage" class="btn">
+      <div @click="addImage" class="file-btn">
         <svg-icon type="mdi" :path="mdiImagePlus_path" @click="onDeleteImg" />
         <!-- <span>ajouter une image</span> -->
       </div>

src/components/editable/VideoEditable.vue

@@ -0,0 +1,211 @@
+<script>
+
+import JSONAPI from '@api/json-axios'
+import REST from '@api/rest-axios'
+
+import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@stores/concernements'
+import { UserStore } from '@stores/user'
+
+import ContentEditable from '@components/editable/ContentEditable.vue';
+
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiTrashCanOutline } from '@mdi/js';
+import { mdiMovieOpenPlusOutline } from '@mdi/js';
+
+
+export default {
+  props: {
+    can_update: Boolean,
+    video: Object,
+    data: Object
+  },
+  emits: ['updated'],
+  data(){
+    return {
+      mdiTrashCanOutline_path: mdiTrashCanOutline,
+      mdiMovieOpenPlusOutline_path: mdiMovieOpenPlusOutline,
+      plyr_options: {
+        controls: ['play', 'progress', 'current-time', 'mute', 'volume']
+      }
+    }
+  },
+  computed: {
+    ...mapState(UserStore,['csrf_token']),
+  },
+  created () {
+    console.log('VideoEditable created');
+  },
+  mounted () {
+
+  },
+  methods: {
+    ...mapActions(ConcernementsStore, ['reloadConcernements']),
+    // addImage(e){
+    //   console.log('addImage', this.$refs);
+    //   this.$refs.image_input.click();
+    // },
+    onSaveVideoLink(e){
+      console.log('onSaveVideoLink', e);
+      let url = this.$refs.video_link_input.innerText;
+      console.log('onSaveVideoLink url', url);
+      this.save(url);
+    },
+    save(content){
+      // console.log('save csrf_token', this.csrf_token);
+      const params = {
+        type: this.data.bundle,
+        [this.data.field.field_name]: [{[this.data.field.value]: content}]
+      };
+      if (this.data.entitytype === 'node') {
+        params.nid = [{"value":this.data.id}];
+      } else {
+        params.id = [{"value":this.data.id}];
+      }
+      // we need additional values for image alt for example
+      // console.log('additional_values', this.data.field.additional_values);
+      if (this.data.field.additional_values) {
+        for (const key in this.data.field.additional_values) {
+          if (Object.hasOwnProperty.call(this.data.field.additional_values, key)) {
+            params[this.data.field.field_name][0][key] = this.data.field.additional_values[key]
+          }
+        }
+      }
+      
+      const configs = {
+        headers: {'X-CSRF-Token': this.csrf_token}
+      };
+
+      let url_base = `/${this.data.entitytype === 'node' ? '' : 'entity/'}${this.data.entitytype}`;
+      REST.patch(`${url_base}/${this.data.id}?_format=json`, params, configs)
+        .then(({ data }) => {
+          console.log('user REST post node data', data)
+          // TODO if success update the data in pinia 
+          // this.reloadConcernements();
+          this.$emit('updated');
+        })
+        .catch(error => {
+          console.warn(`Issue with patch ${this.data.entitytype} ${this.data.bundle}`, error)
+          Promise.reject(error)
+        })
+    },
+    onDeleteVideo(e){
+      console.log('onDeleteVideo', e);
+
+      const params = {
+        type: this.data.bundle,
+        // nid: [{"value":this.data.id}],
+        [this.data.field.field_name]: {[this.data.field.value]: null}
+      };
+      if (this.data.entitytype === 'node') {
+        params.nid = [{"value":this.data.id}];
+      } else {
+        params.id = [{"value":this.data.id}];
+      }
+
+      const configs = {
+        headers: {'X-CSRF-Token': this.csrf_token}
+      };
+      
+      let url_base = `/${this.data.entitytype === 'node' ? '' : 'entity/'}${this.data.entitytype}`;
+      REST.patch(`${url_base}/${this.data.id}?_format=json`, params, configs)
+        .then(({ data }) => {
+          console.log(`user REST patch node ${this.data.bundle} ${this.data.field}`, data)
+          this.$emit('updated');
+        })
+        .catch(error => {
+          console.warn(`Issue with patch node ${this.data.bundle} ${this.data.field}`, error)
+          Promise.reject(error)
+        })
+
+      // 405 JSONAPI operation not allowed, don't know why
+      
+      // const configs = {
+      //   headers: {
+      //     'X-CSRF-Token': this.csrf_token,
+      //     'Content-Type': 'application/octet-stream',
+      //     'Content-Disposition': `file; filename=""`,
+      //   },
+      // };
+
+      // JSONAPI.delete(`/${this.data.entitytype}/${this.data.bundle}/${this.data.uuid}/${this.data.field}`, {}, configs)
+      //   .then(({ data : { data } }) => {
+      //     console.log('jsonapi delete image', data)
+      //     this.$emit('updated');
+      //   })
+      //   .catch(error => {
+      //     console.warn('Issue with jsonapi post image', error)
+      //     Promise.reject(error)
+      //   })
+      // console.log('save csrf_token', this.csrf_token);
+
+    }
+  },
+  components: {
+    SvgIcon,
+    ContentEditable
+  }
+}
+</script>
+
+<template>
+  <div class="editable-video">
+    <!-- with video -->
+    <template v-if="video">
+      <!-- v-for="(video,v) in source.videos"
+      :key="v" -->
+      <vue-plyr
+          >
+            <div class="plyr__video-embed">
+              <!-- TODO fix vimeo embed url -->
+              <iframe 
+                :src="video.url"
+                allowfullscreen
+              ></iframe>
+            </div>
+        </vue-plyr>
+      <div v-if="can_update" @click="onDeleteVideo" class="delete-btn">
+        <svg-icon type="mdi" :path="mdiTrashCanOutline_path" />
+      </div>
+    </template>
+    <!-- with out video -->
+    <template v-else-if="can_update">
+      <!-- <input ref="videolink_input" type="text" @input="onInput"> -->
+      <div class="editable-wrapper">
+        <div 
+          ref="video_link_input"
+          :contenteditable="can_update"
+          :spellcheck="spellcheck"
+          data-placeholder="coller un lien de video" />
+          <!-- @focusout="onVideoInputFocusOut" -->
+        <svg-icon class="video-btn" type="mdi" :path="mdiMovieOpenPlusOutline_path" @click="onSaveVideoLink"/>
+      </div>
+    </template>
+    
+  </div>
+</template>
+
+<style scoped>
+  .editable-wrapper{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5em;
+  }
+  [contenteditable] {
+    flex: auto 1 0;
+    /* display: inline-block; */
+    /* padding:12px;  */
+    /* background:red; */
+    /* min-height: 1em;  */
+  }
+  [data-placeholder]:empty:before{
+    content: attr(data-placeholder);
+    color: #888;
+    font-style: italic;
+  }
+  svg{
+    /* display: inline-block; */
+    flex: auto 0 0;
+  }
+</style>

src/components/layout/CartoucheLayout.vue

@@ -26,7 +26,7 @@ export default {
   mounted () {
     // console.log('cartouche layout mounted', this);
     this.$refs.cartouche_main.addEventListener('scroll', (event) => {
-      console.log('main is scrolling', event);
+      // console.log('main is scrolling', event);
       let $main = event.target;
       let scrolled = $main.scrollTop > 0;
       this.$emit('main_scrolled', scrolled);