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';
import VideoEditable from '@components/editable/VideoEditable.vue';

export default {
  props: ['concernement', 'entite', "eid", 'source'],
  emits: ['reloadEntite'],
  data() {
    return {
      // plyr_options: {
      //   controls: ['play', 'progress', 'current-time', 'mute', 'volume']
      // }
    }
  },
  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,
    VideoEditable,
  }
}
</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"/> -->
      <ContentEditable 
          tag="div"
          :value="source.description"
          :contenteditable="entite.can_update"
          :html="true"
          :data="{
            entitytype: 'paragraph',
            bundle: 'source',
            id: this.source.id,
            field: {field_name: 'field_description', value:'value'}
          }"
          v-on:updated="reloadEntite" />
    </section>
      
    <!-- v-if="source.images.length"
      :key="j" 
      -->
    <section
      class="images">
        <ImageEditable
          :can_update="entite.can_update"
          :image="source.images[0]"
          :data="{
            entitytype: 'paragraph',
            bundle: 'source',
            id: this.source.id,
            uuid: this.source.uuid,
            field: 'field_images'
          }"
          v-on:updated="reloadEntite" />
    </section>

    <!-- v-if="source.videos.length" -->
    <section
      class="video">
        <VideoEditable
          :can_update="entite.can_update"
          :video="source.videos[0]"
          :data="{
            entitytype: 'paragraph',
            bundle: 'source',
            id: this.source.id,
            uuid: this.source.uuid,
            field: {
              field_name: 'field_videos',
              value: 'value'
            }
          }"
          v-on:updated="reloadEntite"/>
    </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  :options="plyr_options">
              <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>