displaying all entite fields
This commit is contained in:
parent
965d08c432
commit
689d00d3de
18
package-lock.json
generated
18
package-lock.json
generated
@ -22,6 +22,7 @@
|
||||
"pinia": "^2.0.21",
|
||||
"poly-decomp": "^0.3.0",
|
||||
"vue": "^3.2.38",
|
||||
"vue-easy-lightbox": "^1.16.0",
|
||||
"vue-plyr": "^7.0.0",
|
||||
"vue-router": "^4.1.5",
|
||||
"vue-slider-component": "^4.1.0-beta.7"
|
||||
@ -3713,6 +3714,17 @@
|
||||
"@vue/shared": "3.3.4"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-easy-lightbox": {
|
||||
"version": "1.16.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-easy-lightbox/-/vue-easy-lightbox-1.16.0.tgz",
|
||||
"integrity": "sha512-9ckBIi56kTNkfbxioTBLKR3xnFjmkIs4SOvePn6XUciR+Dzuav0tgNjqDHkfsoo3nxIpUmfpQAT0YDl9TpJ5jA==",
|
||||
"engines": {
|
||||
"node": ">=14.18.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-eslint-parser": {
|
||||
"version": "9.3.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.1.tgz",
|
||||
@ -6498,6 +6510,12 @@
|
||||
"@vue/shared": "3.3.4"
|
||||
}
|
||||
},
|
||||
"vue-easy-lightbox": {
|
||||
"version": "1.16.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-easy-lightbox/-/vue-easy-lightbox-1.16.0.tgz",
|
||||
"integrity": "sha512-9ckBIi56kTNkfbxioTBLKR3xnFjmkIs4SOvePn6XUciR+Dzuav0tgNjqDHkfsoo3nxIpUmfpQAT0YDl9TpJ5jA==",
|
||||
"requires": {}
|
||||
},
|
||||
"vue-eslint-parser": {
|
||||
"version": "9.3.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.1.tgz",
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
"pinia": "^2.0.21",
|
||||
"poly-decomp": "^0.3.0",
|
||||
"vue": "^3.2.38",
|
||||
"vue-easy-lightbox": "^1.16.0",
|
||||
"vue-plyr": "^7.0.0",
|
||||
"vue-router": "^4.1.5",
|
||||
"vue-slider-component": "^4.1.0-beta.7"
|
||||
|
||||
@ -100,21 +100,23 @@ body{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
// layout
|
||||
>header{
|
||||
flex: 0 0 auto;
|
||||
padding: 0 0 1em 0;
|
||||
}
|
||||
>main{
|
||||
flex: 1 1 auto;
|
||||
padding: 1em 0;
|
||||
}
|
||||
>footer{
|
||||
flex: 0 0 auto;
|
||||
padding: 1em 0 0;
|
||||
}
|
||||
|
||||
>header{
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
// contents
|
||||
>header{
|
||||
display: flex;
|
||||
// height: 8rem;
|
||||
|
||||
116
src/components/contents/Entite.vue
Normal file
116
src/components/contents/Entite.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<script>
|
||||
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import { ConcernementsStore } from '@stores/concernements'
|
||||
|
||||
export default {
|
||||
props: ['entite'],
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(ConcernementsStore,['opened_concernement']),
|
||||
...mapState(ConcernementsStore,['ct_concernement']),
|
||||
...mapState(ConcernementsStore,['ct_entite']),
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
components: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="action">
|
||||
<label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
|
||||
<div v-html="entite.action"/>
|
||||
</section>
|
||||
<section class="menace-maintien">
|
||||
<label v-if="ct_entite">{{ ct_entite.field_menace_maintien.description }}</label>
|
||||
<div v-html="entite.menacemaintien"/>
|
||||
</section>
|
||||
<!-- SOURCES (experiences vecues) -->
|
||||
<section
|
||||
v-if="entite.sources.length"
|
||||
class="sources multiple">
|
||||
<section
|
||||
v-for="(source, index) in entite.sources"
|
||||
:key="index"
|
||||
class="source">
|
||||
<section class="description">
|
||||
<label v-if="ct_entite"> {{ ct_entite.field_sources.description }}</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">
|
||||
<img :src="image.url" :alt="image.alt"/>
|
||||
</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">
|
||||
<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">
|
||||
<a
|
||||
v-for="(lien,l) in source.liens"
|
||||
:key="l"
|
||||
:href="lien.url">
|
||||
{{ lien.title }}
|
||||
</a>
|
||||
</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>
|
||||
</template>
|
||||
@ -6,6 +6,7 @@ import { UserStore } from '@/stores/user'
|
||||
// import { CommonStore } from '@/stores/common'
|
||||
|
||||
import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
|
||||
import Entite from '@components/contents/Entite.vue';
|
||||
|
||||
import VueSlider from 'vue-slider-component'
|
||||
import 'vue-slider-component/theme/antd.css'
|
||||
@ -46,6 +47,7 @@ export default {
|
||||
},
|
||||
components: {
|
||||
CartoucheLayout,
|
||||
Entite,
|
||||
VueSlider
|
||||
}
|
||||
}
|
||||
@ -80,52 +82,7 @@ export default {
|
||||
</template>
|
||||
|
||||
<!-- entite -->
|
||||
<template v-if="entite">
|
||||
<section class="action">
|
||||
<label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
|
||||
<div v-html="entite.action"/>
|
||||
</section>
|
||||
<section class="menace-maintien">
|
||||
<label v-if="ct_entite">{{ ct_entite.field_menace_maintien.description }}</label>
|
||||
<div v-html="entite.menacemaintien"/>
|
||||
</section>
|
||||
<section
|
||||
v-if="entite.sources.length"
|
||||
class="sources multiple">
|
||||
<section
|
||||
v-for="(source, index) in entite.sources"
|
||||
:key="index"
|
||||
class="source">
|
||||
<section class="description">
|
||||
<label v-if="ct_entite"> {{ ct_entite.field_sources.description }}</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">
|
||||
<img :src="image.url" :alt="image.alt"/>
|
||||
</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">
|
||||
<iframe
|
||||
:src="video.url"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</vue-plyr>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
<Entite v-if="entite" :entite="entite"/>
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user