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

<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>