created layout component for concernement content cartouche, continued to integrate entites
This commit is contained in:
@@ -96,19 +96,23 @@ body{
|
||||
padding: 1rem 1rem 1rem;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
header, section{
|
||||
padding:0 0 2em 0;
|
||||
//
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
>header{
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
label{
|
||||
display: block;
|
||||
font-weight: 100;
|
||||
font-size: 0.882em;
|
||||
padding: 0 0 1em 0;
|
||||
>main{
|
||||
// flex: 1 0 auto;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
ul, li{
|
||||
padding:0; margin:0;
|
||||
list-style: none;
|
||||
>footer{
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
>header{
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
>header{
|
||||
@@ -138,7 +142,7 @@ body{
|
||||
padding: 1em 0 1em 0;
|
||||
}
|
||||
}
|
||||
div.concernement-cartouche{
|
||||
div.concernement-cartouche-icons{
|
||||
h2{
|
||||
font-weight: 400;
|
||||
font-size: 1.323em;
|
||||
@@ -169,6 +173,37 @@ body{
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
>main{
|
||||
overflow-y: auto;
|
||||
|
||||
>section:not(:last-of-type),
|
||||
.multiple >section:not(:last-of-type){
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
figure{
|
||||
margin:0.5em 0;
|
||||
img{
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
>footer{
|
||||
section.infos{
|
||||
>p{
|
||||
font-size: 0.882em;
|
||||
font-weight: 100;
|
||||
|
||||
>span{
|
||||
>span{
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3{
|
||||
font-weight: 400;
|
||||
font-size: 1.2em;
|
||||
@@ -185,46 +220,15 @@ body{
|
||||
font-size: 1em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
section.content-concernement{
|
||||
section.infos{
|
||||
>p{
|
||||
font-size: 0.882em;
|
||||
font-weight: 100;
|
||||
|
||||
>span{
|
||||
>span{
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
span.author{
|
||||
span{
|
||||
|
||||
}
|
||||
}
|
||||
span.structure{
|
||||
span{
|
||||
|
||||
}
|
||||
}
|
||||
span.lieu{
|
||||
span{
|
||||
|
||||
}
|
||||
}
|
||||
span.created{
|
||||
span{
|
||||
|
||||
}
|
||||
}
|
||||
span.changed{
|
||||
span{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
label{
|
||||
display: block;
|
||||
font-weight: 100;
|
||||
font-size: 0.882em;
|
||||
padding: 0 0 1em 0;
|
||||
}
|
||||
ul, li{
|
||||
padding:0; margin:0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// PUISSANCE D'AGIR
|
||||
|
||||
@@ -3,13 +3,27 @@
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import { ConcernementsStore } from '@stores/concernements'
|
||||
import { UserStore } from '@/stores/user'
|
||||
import { CommonStore } from '@/stores/common'
|
||||
// import { CommonStore } from '@/stores/common'
|
||||
|
||||
import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
|
||||
|
||||
import { VideoPlayer } from '@videojs-player/vue'
|
||||
import 'videojs-youtube'
|
||||
import 'video.js/dist/video-js.css'
|
||||
|
||||
import VueSlider from 'vue-slider-component'
|
||||
import 'vue-slider-component/theme/antd.css'
|
||||
|
||||
export default {
|
||||
props: ['id', 'eid', 'entite'],
|
||||
data(){
|
||||
return {
|
||||
|
||||
history_value: 0,
|
||||
history_slider_ops: {
|
||||
dotSize:10,
|
||||
min: 0,
|
||||
max: 100,
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -26,49 +40,119 @@ export default {
|
||||
let d = new Date(this.opened_concernement.changed);
|
||||
console.log('d', d);
|
||||
return d.toLocaleDateString("fr-FR");//.toISOString().split('T')[0];
|
||||
},
|
||||
display_concernement(){
|
||||
return this.ct_concernement && !this.entite && this.map_mode !== 'puissancedagir' && this.map_mode !== 'doleancer';
|
||||
}
|
||||
},
|
||||
created () {
|
||||
console.log(`terrain de vie content created, id: ${this.id}, eid: ${this.eid}, opened_concernement:`, this.opened_concernement);
|
||||
},
|
||||
components: {
|
||||
CartoucheLayout,
|
||||
VideoPlayer,
|
||||
VueSlider
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- concernement -->
|
||||
<section
|
||||
v-if="!entite"
|
||||
class="content-concernement">
|
||||
<section class="description">
|
||||
<label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
|
||||
<div v-html="opened_concernement.description"/>
|
||||
</section>
|
||||
<section class="caillou">
|
||||
<label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
|
||||
<div v-html="opened_concernement.caillou "/>
|
||||
</section>
|
||||
<section class="infos">
|
||||
<p>
|
||||
<span class="author"><span>une enquête de</span> {{ opened_concernement.author.username }}</span><br/>
|
||||
<span class="structure" v-if="opened_concernement.author.structure"><span>avec</span> {{ opened_concernement.author.structure[0].name }}</span><br/>
|
||||
<span class="lieu" v-if="opened_concernement.lieu"><span>à</span> {{ opened_concernement.lieu[0].name }}</span><br/>
|
||||
<span class="created"><span>démarrée le</span> {{ created }}</span><br/>
|
||||
<span class="changed"><span>mise à jour le</span> {{ changed }}</span>
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
<!-- entite -->
|
||||
<section
|
||||
v-if="entite"
|
||||
class="content-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>
|
||||
<CartoucheLayout>
|
||||
<template v-slot:header>
|
||||
<div class="pre-header">
|
||||
<!-- concernement -->
|
||||
<label v-if="display_concernement">{{ ct_concernement.title.description }}</label>
|
||||
<!-- entite -->
|
||||
<h3 v-if="entite">{{ entite.title }}</h3>
|
||||
<span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">menace</span>
|
||||
<span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">maintient</span>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<template v-slot:main>
|
||||
<!-- concernement -->
|
||||
<template v-if="!entite">
|
||||
<section v-if="opened_concernement.description" class="description">
|
||||
<label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
|
||||
<div v-html="opened_concernement.description"/>
|
||||
</section>
|
||||
<section v-if="opened_concernement.caillou" class="caillou">
|
||||
<label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
|
||||
<div v-html="opened_concernement.caillou"/>
|
||||
</section>
|
||||
</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">
|
||||
<!-- <a
|
||||
v-for="(video,v) in source.videos"
|
||||
:key="v"
|
||||
:href="video.url">{{ video.url }}</a> -->
|
||||
<VideoPlayer
|
||||
v-for="(video,v) in source.videos"
|
||||
:key="v"
|
||||
type="video/youtube"
|
||||
:src="video.url"
|
||||
controls/>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
<section class="infos">
|
||||
<p>
|
||||
<span class="author"><span>une enquête de</span> {{ opened_concernement.author.username }}<br/></span>
|
||||
<span class="structure" v-if="opened_concernement.author.structure.length"><span>avec</span> {{ opened_concernement.author.structure[0].name }}<br/></span>
|
||||
<span class="lieu" v-if="opened_concernement.lieu.length"><span>à</span> {{ opened_concernement.lieu[0].name }}<br/></span>
|
||||
<span class="created"><span>démarrée le</span> {{ created }}<br/></span>
|
||||
<span class="changed"><span>mise à jour le</span> {{ changed }}</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- <section class="historique">
|
||||
<label>Historique</label>
|
||||
<vue-slider
|
||||
ref="slider"
|
||||
v-model="history_value"
|
||||
v-bind="history_slider_ops"
|
||||
></vue-slider>
|
||||
</section> -->
|
||||
</template>
|
||||
</CartoucheLayout>
|
||||
|
||||
</template>
|
||||
67
src/components/layout/CartoucheLayout.vue
Normal file
67
src/components/layout/CartoucheLayout.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<script>
|
||||
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import { ConcernementsStore } from '@stores/concernements'
|
||||
|
||||
import SvgIcon from '@jamescoyle/vue-icon';
|
||||
import { mdiHeadphones } from '@mdi/js';
|
||||
|
||||
export default {
|
||||
props: ['id', 'eid', 'entite'],
|
||||
data(){
|
||||
return {
|
||||
headphones_path: mdiHeadphones
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(ConcernementsStore,['opened_concernement']),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(ConcernementsStore,['setMapMode'])
|
||||
},
|
||||
components: {
|
||||
SvgIcon
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<slot name="header"></slot>
|
||||
<div class="concernement-cartouche-icons">
|
||||
<h2>{{ opened_concernement.title }}</h2>
|
||||
<nav class="icons">
|
||||
<ul>
|
||||
<li v-if="opened_concernement.has_recit" >
|
||||
<svg-icon type="mdi" :path="headphones_path"></svg-icon>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span></a>
|
||||
</li>
|
||||
<li v-if="opened_concernement.has_puissancedagir" >
|
||||
<a href="#puissanceagir" @click="setMapMode('puissanceagit')"><span class="icon puissancedagir"></span></a>
|
||||
</li>
|
||||
<li v-if="opened_concernement.has_proximite" >
|
||||
<a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span></a>
|
||||
</li>
|
||||
<li v-if="opened_concernement.has_superposition" >
|
||||
<a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span></a>
|
||||
</li>
|
||||
<li v-if="opened_concernement.has_agissantes" >
|
||||
<a href="#action" @click="setMapMode('action')"><span class="icon action"></span></a>
|
||||
</li>
|
||||
<li v-if="opened_concernement.has_doleance" >
|
||||
<a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<slot name="main"></slot>
|
||||
</main>
|
||||
<footer>
|
||||
<slot name="footer"></slot>
|
||||
</footer>
|
||||
</template>
|
||||
@@ -10,8 +10,8 @@ import gql from 'graphql-tag'
|
||||
import GQL from '@api/graphql-axios'
|
||||
import EntiteFields from '@api/gql/entite.fragment.gql'
|
||||
|
||||
import SvgIcon from '@jamescoyle/vue-icon';
|
||||
import { mdiHeadphones } from '@mdi/js';
|
||||
// import SvgIcon from '@jamescoyle/vue-icon';
|
||||
// import { mdiHeadphones } from '@mdi/js';
|
||||
|
||||
import TerrainDeVie from '@components/contents/TerrainDeVie.vue';
|
||||
import PuissanceAgir from '@components/contents/PuissanceAgir.vue';
|
||||
@@ -22,8 +22,7 @@ export default {
|
||||
data(){
|
||||
return {
|
||||
entite: null,
|
||||
opened_besoin_id: null,
|
||||
headphones_path: mdiHeadphones
|
||||
opened_besoin_id: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -39,10 +38,7 @@ export default {
|
||||
...mapState(ConcernementsStore,['p_reception_et_traitement']),
|
||||
...mapState(ConcernementsStore,['p_mise_en_oeuvre_decision']),
|
||||
...mapState(ConcernementsStore,['p_reception_application_decision']),
|
||||
...mapState(CommonStore,['hover_elmt']),
|
||||
display_concernement(){
|
||||
return this.ct_concernement && !this.entite && this.map_mode !== 'puissancedagir'&& this.map_mode !== 'doleancer';
|
||||
}
|
||||
...mapState(CommonStore,['hover_elmt'])
|
||||
},
|
||||
created () {
|
||||
console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened_concernement:${this.opened_concernement}`);
|
||||
@@ -112,7 +108,6 @@ export default {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SvgIcon,
|
||||
TerrainDeVie,
|
||||
PuissanceAgir,
|
||||
Doleancer
|
||||
@@ -123,50 +118,6 @@ export default {
|
||||
|
||||
<template>
|
||||
<section v-if="opened_concernement" class="concernement">
|
||||
<header v-if="concernements_loaded">
|
||||
<div class="pre-header">
|
||||
<!-- concernement -->
|
||||
<label
|
||||
v-if="display_concernement"
|
||||
>
|
||||
{{ ct_concernement.title.description }}
|
||||
</label>
|
||||
<!-- entite -->
|
||||
<h3 v-if="entite">{{ entite.title }}</h3>
|
||||
<span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">menace</span>
|
||||
<span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">maintient</span>
|
||||
</div>
|
||||
<div class="concernement-cartouche">
|
||||
<h2 :class='{ faded: !display_concernement}'>{{ opened_concernement.title }}</h2>
|
||||
<nav class="icons">
|
||||
<ul>
|
||||
<li v-if="opened_concernement.has_recit" >
|
||||
<svg-icon type="mdi" :path="headphones_path"></svg-icon>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span></a>
|
||||
</li>
|
||||
<li v-if="opened_concernement.has_puissancedagir" >
|
||||
<a href="#puissanceagir" @click="setMapMode('puissanceagit')"><span class="icon puissancedagir"></span></a>
|
||||
</li>
|
||||
<li v-if="opened_concernement.has_proximite" >
|
||||
<a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span></a>
|
||||
</li>
|
||||
<li v-if="opened_concernement.has_superposition" >
|
||||
<a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span></a>
|
||||
</li>
|
||||
<li v-if="opened_concernement.has_agissantes" >
|
||||
<a href="#action" @click="setMapMode('action')"><span class="icon action"></span></a>
|
||||
</li>
|
||||
<li v-if="opened_concernement.has_doleance" >
|
||||
<a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<!-- body -->
|
||||
<TerrainDeVie v-if="map_mode === 'terraindevie'" :id="id" :eid="eid" :entite="entite"/>
|
||||
<PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="id"/>
|
||||
<Doleancer v-if="map_mode === 'doleancer'" :id="id"/>
|
||||
|
||||
Reference in New Issue
Block a user