Source component

src/components/contents/Entite.vue

@@ -7,6 +7,7 @@ import { mapActions, mapState } from 'pinia'
 import { ConcernementsStore } from '@stores/concernements'
 import { UserStore } from '@stores/user'
 
+import Source from '@components/contents/Source.vue';
 import ContentEditable from '@components/editable/ContentEditable.vue';
 import CheckboxEditable from '@components/editable/CheckboxEditable.vue';
 import ImageEditable from '@components/editable/ImageEditable.vue';
@@ -22,7 +23,6 @@ export default {
     ...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) {
@@ -32,15 +32,6 @@ export default {
       }
       return str;
     },
-    field_sources_label () {
-      let str;
-      if (this.concernement.entites_byid[this.eid].menacemaintien < 0) {
-        str = this.ct_entite.field_sources.description.replace('/ ce maintien', '')
-      } else {
-        str = this.ct_entite.field_sources.description.replace('cette menace /', '')
-      }
-      return str;
-    }
   },
   methods: {
     reloadEntite(){
@@ -48,6 +39,7 @@ export default {
     }
   },
   components: {
+    Source,
     ContentEditable,
     CheckboxEditable,
     ImageEditable,
@@ -107,93 +99,15 @@ export default {
     <section
       v-if="entite.sources.length" 
       class="sources multiple">
-        <!-- <h5>Experience(s) Vécue(s)</h5> -->
-      <section 
+      <!-- <h5>Experience(s) Vécue(s)</h5> -->
+      <Source 
         v-for="(source, index) in entite.sources"
-        :key="index"
-        class="source">
-        <!-- <div class="date">{{ source.date.start }}</div> -->
-        <section v-if="source.description" class="description">
-          <label v-if="ct_entite"> {{ field_sources_label }}</label>
-          <div v-html="source.description"/>
-        </section>
-          
-        <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>
-        </section>
-
-        <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>
-        </section>
-
-        <section
-          v-if="source.audios.length"
-          class="audio multiple">
-            <div
-                v-for="(audio,a) in source.audios"
-                :key="a">
-              <label v-if="audio.description">{{ audio.description }}</label>
-              <label v-else>{{ audio.file.filename }}</label>
-              <vue-plyr>
-                  <audio>
-                    <source :src="audio.file.url" :type="audio.file.filemime" />
-                  </audio>
-              </vue-plyr>
-
-            </div>
-        </section>
-
-        <section
-          v-if="source.liens.length"
-          class="liens multiple">
-          <ul>
-            <li
-              v-for="(lien,l) in source.liens"
-              :key="l">
-              <a
-              :href="lien.url">
-              {{ lien.title }}
-            </a>
-            </li>
-          </ul>
-            
-        </section>
-
-
-        <section
-          v-if="source.documents.length"
-          class="documents multiple">
-            <a
-              v-for="(doc,d) in source.documents"
-              :key="d"
-              :href="doc.file.url">
-              <template v-if="doc.description">{{ doc.description }}</template>
-              <template v-else>{{ doc.file.url }}</template>
-            </a>
-        </section>
-          
-      </section>
+        :key="index" 
+        :concernement="concernement"
+        :entite="entite"
+        :eid="eid"
+        :source="source"
+        v-on:reloadEntite="reloadEntite" />
     </section>
   </section>
 </template>

src/components/contents/Source.vue

@@ -0,0 +1,131 @@
+<script>
+
+
+import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@stores/concernements'
+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';
+
+export default {
+  props: ['concernement', 'entite', "eid", 'source'],
+  emits: ['reloadEntite'],
+  data() {
+    return {
+    }
+  },
+  computed: {
+    ...mapState(ConcernementsStore,['ct_entite']),
+    field_sources_label () {
+      let str;
+      if (this.concernement.entites_byid[this.eid].menacemaintien < 0) {
+        str = this.ct_entite.field_sources.description.replace('/ ce maintien', '')
+      } else {
+        str = this.ct_entite.field_sources.description.replace('cette menace /', '')
+      }
+      return str;
+    }
+  },
+  methods: {
+    reloadEntite(){
+      this.$emit('reloadEntite');
+    }
+  },
+  components: {
+    ContentEditable,
+    CheckboxEditable,
+    ImageEditable,
+  }
+}
+</script>
+
+<template>
+  <section class="source">
+    <!-- <div class="date">{{ source.date.start }}</div> -->
+    <section v-if="source.description" class="description">
+      <label v-if="ct_entite"> {{ field_sources_label }}</label>
+      <div v-html="source.description"/>
+    </section>
+      
+    <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>
+    </section>
+
+    <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>
+    </section>
+
+    <section
+      v-if="source.audios.length"
+      class="audio multiple">
+        <div
+            v-for="(audio,a) in source.audios"
+            :key="a">
+          <label v-if="audio.description">{{ audio.description }}</label>
+          <label v-else>{{ audio.file.filename }}</label>
+          <vue-plyr>
+              <audio>
+                <source :src="audio.file.url" :type="audio.file.filemime" />
+              </audio>
+          </vue-plyr>
+
+        </div>
+    </section>
+
+    <section
+      v-if="source.liens.length"
+      class="liens multiple">
+      <ul>
+        <li
+          v-for="(lien,l) in source.liens"
+          :key="l">
+          <a
+          :href="lien.url">
+          {{ lien.title }}
+        </a>
+        </li>
+      </ul>
+        
+    </section>
+
+
+    <section
+      v-if="source.documents.length"
+      class="documents multiple">
+        <a
+          v-for="(doc,d) in source.documents"
+          :key="d"
+          :href="doc.file.url">
+          <template v-if="doc.description">{{ doc.description }}</template>
+          <template v-else>{{ doc.file.url }}</template>
+        </a>
+    </section>
+      
+  </section>
+</template>
+
+<style lang="css">
+</style>

src/components/editable/SelectEditable.vue

@@ -9,7 +9,7 @@ import { UserStore } from '@stores/user'
 
 export default {
   props: {
-    value: Number,
+    value: String,
     options: Object,
     label: String, 
     data: Object