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

<script>

import REST from '@api/rest-axios'
import JSONAPI from '@api/json-axios'

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'],
  emits: ['reloadEntite'],
  data() {
    return {
    }
  },
  computed: {
    ...mapState(ConcernementsStore,['opened_concernement',
                                    'ct_concernement',
                                    'ct_entite']),
    ...mapState(UserStore,['csrf_token']),
    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: {
    reloadEntite(){
      this.$emit('reloadEntite');
    }
  },
  components: {
    ContentEditable,
    CheckboxEditable,
    ImageEditable,
  }
}
</script>

<template>
  <section class="entite">
    <section v-if="entite.image.length || entite.can_update" class="image">
      <ImageEditable 
        :can_update="entite.can_update"
        :image="entite.image"
        :data="{
          entitytype: 'node',
          bundle: 'entite',
          nid: this.entite.id,
          uuid: this.entite.uuid,
          field: 'field_image'
        }"
        v-on:updated="reloadEntite" />

    </section>
    <section v-if="entite.action || entite.can_update" class="action">
        <label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
        <!-- <p>{{ entite.action }}</p> -->
        <ContentEditable 
          tag="p"
          :value="entite.action"
          :contenteditable="entite.can_update"
          :data="{
            entitytype: 'node',
            bundle: 'entite',
            nid: this.entite.id,
            field: {field_name: 'field_action', value:'value'}
          }"
          v-on:updated="reloadEntite" />
          
    </section>
    <section v-if="entite.menacemaintien || entite.can_update" class="menace-maintien">
        <label v-if="ct_entite">{{ field_menace_maintien_label }}</label>
        <!-- <p>{{ entite.menacemaintien }}</p> -->
        <ContentEditable 
          tag="p"
          :value="entite.menacemaintien"
          :contenteditable="entite.can_update"
          :data="{
            entitytype: 'node',
            bundle: 'entite',
            nid: this.entite.id,
            field: {field_name: 'field_menace_maintien', value:'value'}
          }"
          v-on:updated="reloadEntite" />
        
    </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>