displaying all entite fields

package-lock.json

@@ -22,6 +22,7 @@
         "pinia": "^2.0.21",
         "poly-decomp": "^0.3.0",
         "vue": "^3.2.38",
+        "vue-easy-lightbox": "^1.16.0",
         "vue-plyr": "^7.0.0",
         "vue-router": "^4.1.5",
         "vue-slider-component": "^4.1.0-beta.7"
@@ -3713,6 +3714,17 @@
         "@vue/shared": "3.3.4"
       }
     },
+    "node_modules/vue-easy-lightbox": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/vue-easy-lightbox/-/vue-easy-lightbox-1.16.0.tgz",
+      "integrity": "sha512-9ckBIi56kTNkfbxioTBLKR3xnFjmkIs4SOvePn6XUciR+Dzuav0tgNjqDHkfsoo3nxIpUmfpQAT0YDl9TpJ5jA==",
+      "engines": {
+        "node": ">=14.18.3"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.1.tgz",
@@ -6498,6 +6510,12 @@
         "@vue/shared": "3.3.4"
       }
     },
+    "vue-easy-lightbox": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/vue-easy-lightbox/-/vue-easy-lightbox-1.16.0.tgz",
+      "integrity": "sha512-9ckBIi56kTNkfbxioTBLKR3xnFjmkIs4SOvePn6XUciR+Dzuav0tgNjqDHkfsoo3nxIpUmfpQAT0YDl9TpJ5jA==",
+      "requires": {}
+    },
     "vue-eslint-parser": {
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.1.tgz",

package.json

@@ -22,6 +22,7 @@
     "pinia": "^2.0.21",
     "poly-decomp": "^0.3.0",
     "vue": "^3.2.38",
+    "vue-easy-lightbox": "^1.16.0",
     "vue-plyr": "^7.0.0",
     "vue-router": "^4.1.5",
     "vue-slider-component": "^4.1.0-beta.7"

src/assets/main.scss

@@ -100,21 +100,23 @@ body{
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
+      // layout
       >header{
         flex: 0 0 auto;
+        padding: 0 0 1em 0;
       }
       >main{
         flex: 1 1 auto;
-        padding: 1em 0;
       }
       >footer{
         flex: 0 0 auto;
+        padding: 1em 0 0;
       }
       
       >header{
         flex: 0 0 auto;
       }
-
+      // contents
       >header{
         display: flex;
         // height: 8rem;

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>