displaying all entite fields

src/components/contents/Entite.vue

@@ -0,0 +1,116 @@
+<script>
+
+import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@stores/concernements'
+
+export default {
+  props: ['entite'],
+  data() {
+    return {
+    }
+  },
+  computed: {
+    ...mapState(ConcernementsStore,['opened_concernement']),
+    ...mapState(ConcernementsStore,['ct_concernement']),
+    ...mapState(ConcernementsStore,['ct_entite']),
+
+  },
+  methods: {
+    
+  },
+  components: {
+  }
+}
+</script>
+
+<template>
+  <section class="action">
+      <label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
+      <div v-html="entite.action"/>
+  </section>
+  <section class="menace-maintien">
+      <label v-if="ct_entite">{{ ct_entite.field_menace_maintien.description }}</label>
+      <div v-html="entite.menacemaintien"/>
+  </section>
+  <!-- SOURCES (experiences vecues) -->
+  <section
+    v-if="entite.sources.length" 
+    class="sources multiple">
+    <section 
+      v-for="(source, index) in entite.sources"
+      :key="index"
+      class="source">
+      <section class="description">
+          <label v-if="ct_entite"> {{ ct_entite.field_sources.description }}</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">
+              <img :src="image.url" :alt="image.alt"/>
+            </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">
+                  <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">
+            <a
+              v-for="(lien,l) in source.liens"
+              :key="l"
+              :href="lien.url">
+              {{ lien.title }}
+            </a>
+        </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>
+  </section>
+</template>

src/components/contents/TerrainDeVie.vue

@@ -6,6 +6,7 @@ import { UserStore } from '@/stores/user'
 // import { CommonStore } from '@/stores/common'
 
 import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
+import Entite from '@components/contents/Entite.vue';
 
 import VueSlider from 'vue-slider-component'
 import 'vue-slider-component/theme/antd.css'
@@ -46,6 +47,7 @@ export default {
   },
   components: {
     CartoucheLayout,
+    Entite,
     VueSlider
   }
 }
@@ -80,52 +82,7 @@ export default {
       </template>
 
       <!-- entite -->
-      <template v-if="entite">
-        <section class="action">
-            <label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
-            <div v-html="entite.action"/>
-        </section>
-        <section class="menace-maintien">
-            <label v-if="ct_entite">{{ ct_entite.field_menace_maintien.description }}</label>
-            <div v-html="entite.menacemaintien"/>
-        </section>
-        <section
-          v-if="entite.sources.length" 
-          class="sources multiple">
-          <section 
-            v-for="(source, index) in entite.sources"
-            :key="index"
-            class="source">
-            <section class="description">
-                <label v-if="ct_entite"> {{ ct_entite.field_sources.description }}</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">
-                  <img :src="image.url" :alt="image.alt"/>
-                </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">
-                        <iframe 
-                          :src="video.url"
-                          allowfullscreen
-                        ></iframe>
-                      </div>
-                  </vue-plyr>
-              </section>
-          </section>
-        </section>
-      </template>
+      <Entite v-if="entite" :entite="entite"/>
     </template>
 
     <template v-slot:footer>