132 lines
3.8 KiB
Vue
132 lines
3.8 KiB
Vue
<script>
|
|
|
|
import { mapActions, mapState } from 'pinia'
|
|
import { ConcernementsStore } from '@stores/concernements'
|
|
import { CommonStore } from '@/stores/common'
|
|
|
|
import { print } from 'graphql/language/printer'
|
|
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 { mdiArrowUp } from '@mdi/js';
|
|
|
|
import TerrainDeVie from '@components/contents/TerrainDeVie.vue';
|
|
import PuissanceAgir from '@components/contents/PuissanceAgir.vue';
|
|
import Doleancer from '@components/contents/Doleancer.vue';
|
|
|
|
export default {
|
|
props: ['id', 'eid'],
|
|
data(){
|
|
return {
|
|
entite: null,
|
|
opened_besoin_id: null,
|
|
arrowup_path: mdiArrowUp
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(ConcernementsStore,['map_mode',
|
|
'opened_concernement',
|
|
'concernements_loaded']),
|
|
// ...mapState(CommonStore,['hover_elmt'])
|
|
},
|
|
created () {
|
|
console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened_concernement:${this.opened_concernement}`);
|
|
|
|
// when we arrived directly to the url, load the entite
|
|
// this.eid provided by route params
|
|
if (!this.entity && this.eid) {
|
|
this.openEntity();
|
|
}
|
|
},
|
|
watch: {
|
|
concernements_loaded: {
|
|
handler (n, o){
|
|
// console.log(`watch concernements_loaded n: ${n}, opened_concernement:${this.opened_concernement}, id:${this.id}`);
|
|
// when we arrived directly to the url then all concernement are loaded: do open the concernement
|
|
if (!this.opened_concernement) {
|
|
this.openCloseConcernements(parseInt(this.id))
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
eid: {
|
|
handler (n, o){
|
|
if(n){
|
|
this.openEntity()
|
|
}else{
|
|
this.entite = false;
|
|
this.setOpenedEntityId(null);
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions(ConcernementsStore,['openCloseConcernements',
|
|
'setOpenedEntityId',
|
|
'setMapMode',
|
|
'resetConcernementOpened']),
|
|
openEntity(){
|
|
this.setOpenedEntityId(parseInt(this.eid))
|
|
this.loadEntite()
|
|
},
|
|
loadEntite(){
|
|
const ast = gql`{
|
|
entite (id: ${this.eid}) {
|
|
...EntiteFields
|
|
}
|
|
}
|
|
${EntiteFields}
|
|
`
|
|
console.log('ast', ast);
|
|
GQL.post('', { query: print(ast) })
|
|
.then(({data: { data: { entite }}}) => {
|
|
console.log('load entite loaded', entite)
|
|
this.entite = entite
|
|
})
|
|
.catch(error => {
|
|
console.warn('Issue with load entite', error)
|
|
})
|
|
},
|
|
closeConcernement(){
|
|
this.resetConcernementOpened();
|
|
}
|
|
},
|
|
components: {
|
|
TerrainDeVie,
|
|
PuissanceAgir,
|
|
Doleancer,
|
|
SvgIcon
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<section v-if="opened_concernement" class="concernement">
|
|
<TerrainDeVie v-if="map_mode === 'terraindevie' || map_mode === 'action'|| map_mode === 'superposition'" :id="id" :eid="eid" :entite="entite"/>
|
|
<PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="id"/>
|
|
<Doleancer v-if="map_mode === 'doleancer'" :id="id"/>
|
|
<nav class="close-concernement" @click="closeConcernement">
|
|
<svg class="close-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
|
|
<mask id="arrowMask">
|
|
<rect x="0" y="0" width="24" height="24" fill="white"/>
|
|
<path :d="arrowup_path" fill="black"/>
|
|
</mask>
|
|
<circle cx="12" cy="12" r="12" mask="url(#arrowMask)" fill="white" />
|
|
</svg>
|
|
</nav>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
nav.close-concernement{
|
|
position: absolute;
|
|
top:65px;
|
|
left: -30px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|