ouatterrir-app/src/components/contents/Entite.vue

<script>

import { mapActions, mapState } from 'pinia'
import { ConcernementsStore } from '@stores/concernements'

export default {
  props: ['concernement', 'entite', 'eid'],
  data() {
    return {
    }
  },
  computed: {
    ...mapState(ConcernementsStore,['opened_concernement',
                                    'ct_concernement',
                                    'ct_entite']),
    field_menace_maintien_label (){
      let str;
      if (this.concernement.entites_byid[this.eid].menacemaintien < 0) {
        str = this.ct_entite.field_menace_maintien.description.replace('/maintient', '')
      } else {
        str = this.ct_entite.field_menace_maintien.description.replace('menace/', '')
      }
      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: {
    
  },
  components: {
  }
}
</script>

<template>
  <section class="entite">
    <section v-if="entite.image.length" class="image">
      <figure>
        <img :src="entite.image[0].url" :alt="entite.image[0].alt"/>
        <figcaption>{{ entite.image[0].alt }}</figcaption>
      </figure>
    </section>
    <section v-if="entite.action" class="action">
        <label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
        <p>{{ entite.action }}</p>
    </section>
    <section v-if="entite.menacemaintien" class="menace-maintien">
        <label v-if="ct_entite">{{ field_menace_maintien_label }}</label>
        <p>{{ entite.menacemaintien }}</p>
    </section>
    <!-- SOURCES (experiences vecues) -->
    <section
      v-if="entite.sources.length" 
      class="sources multiple">
        <!-- <h5>Experience(s) Vécue(s)</h5> -->
      <section 
        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>
    </section>
  </section>
</template>

<style lang="css">
  section.action p,
  section.menace-maintien p {
    white-space: pre-wrap;
  }
</style>