Source component
This commit is contained in:
parent
b5f8835214
commit
d1716ce7f6
@ -7,6 +7,7 @@ import { mapActions, mapState } from 'pinia'
|
||||
import { ConcernementsStore } from '@stores/concernements'
|
||||
import { UserStore } from '@stores/user'
|
||||
|
||||
import Source from '@components/contents/Source.vue';
|
||||
import ContentEditable from '@components/editable/ContentEditable.vue';
|
||||
import CheckboxEditable from '@components/editable/CheckboxEditable.vue';
|
||||
import ImageEditable from '@components/editable/ImageEditable.vue';
|
||||
@ -22,7 +23,6 @@ export default {
|
||||
...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) {
|
||||
@ -32,15 +32,6 @@ export default {
|
||||
}
|
||||
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(){
|
||||
@ -48,6 +39,7 @@ export default {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Source,
|
||||
ContentEditable,
|
||||
CheckboxEditable,
|
||||
ImageEditable,
|
||||
@ -108,92 +100,14 @@ export default {
|
||||
v-if="entite.sources.length"
|
||||
class="sources multiple">
|
||||
<!-- <h5>Experience(s) Vécue(s)</h5> -->
|
||||
<section
|
||||
<Source
|
||||
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>
|
||||
:concernement="concernement"
|
||||
:entite="entite"
|
||||
:eid="eid"
|
||||
:source="source"
|
||||
v-on:reloadEntite="reloadEntite" />
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
131
src/components/contents/Source.vue
Normal file
131
src/components/contents/Source.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<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>
|
||||
@ -9,7 +9,7 @@ import { UserStore } from '@stores/user'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: Number,
|
||||
value: String,
|
||||
options: Object,
|
||||
label: String,
|
||||
data: Object
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user