bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

splitted concernement content cartouche into components for each mapmode, completed terrain de vie concernement display

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-07-03 16:09:36 +02:00
parent 524b815d37
commit e162adaae8
6 changed files with 355 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/gql/concernement.fragment.gql
View File

@ -13,7 +13,17 @@ fragment ConcernementFields on Concernement {
}
description
}
author
author {
username
structure {
name
}
}
created
changed
lieu {
name
}
entites {
menacemaintien
prise

41
src/assets/main.scss
View File

@ -186,6 +186,47 @@ body{
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{
}
}
}
}
}
// PUISSANCE D'AGIR
section.content-besoins{
li.besoin{

127
src/components/contents/Doleancer.vue Normal file
View File

@ -0,0 +1,127 @@
<script>
import { mapActions, mapState } from 'pinia'
import { ConcernementsStore } from '@stores/concernements'
import { UserStore } from '@/stores/user'
import { CommonStore } from '@/stores/common'
export default {
props: ['id'],
data(){
return {
}
},
computed: {
...mapState(ConcernementsStore,['opened_concernement']),
...mapState(ConcernementsStore,['ct_concernement']),
...mapState(ConcernementsStore,['ct_entite']),
},
created () {
console.log(`Doleancer content created, id: ${this.id}, opened_concernement:`,this.opened_concernement);
}
}
</script>
<template>
<section
class="content-doleances">
<section
v-for="doleance in opened_concernement.doleances"
class="doleance">
<header>
<label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>
<h3 name="leprobleme">{{ doleance.leprobleme }}</h3>
<label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label>
<h4 name="lenquete">{{ doleance.lenquete }}</h4>
</header>
<section class="groupesinterets">
<h5>{{ ct_cercle_politique.field_groupes.label }}</h5>
<ul>
<li
v-for="groupe in doleance.groupesinterets">
<label for="groupe">{{ p_groupes_interets.field_groupe_interets.label }}</label>
<p name="groupe" v-html="groupe.groupe_interets" />
<label for="accorder">{{ p_groupes_interets.field_accorder_interets.label }}</label>
<p name="accorder" v-html="groupe.accorder_interets" />
<label for="formuler">{{ p_groupes_interets.field_formuler.label }}</label>
<p name="formuler" v-html="groupe.formuler" />
</li>
</ul>
</section>
<section class="adresse">
<label for="entite_addresse_doleance">{{ ct_cercle_politique.field_entite_adresse_doleance.label }}</label>
<p name="entite_addresse_doleance" v-html="doleance.entite_addresse_doleance" />
<label for="comment_ennonce_doleance">{{ ct_cercle_politique.field_comment_enonce_doleance.label }}</label>
<p name="comment_ennonce_doleance" v-html="doleance.comment_ennonce_doleance" />
<label for="aqui_addresse_doleance">{{ ct_cercle_politique.field_a_qui_adresse_doleance.label }}</label>
<p name="aqui_addresse_doleance" v-html="doleance.aqui_addresse_doleance" />
<h5>{{ ct_cercle_politique.field_receptions_et_traitements.label }}</h5>
<ul class="reception_traitement">
<li
v-for="rec in doleance.reception_traitement">
<label for="entite_adressee">{{ p_reception_et_traitement.field_entite_adressee.label }}</label>
<p name="entite_adressee" v-html="rec.entite_adressee" />
<label for="doleance_formulee">{{ p_reception_et_traitement.field_doleance_formulee.label }}</label>
<p name="doleance_formulee" v-html="rec.doleance_formulee" />
<label for="traite_doleance">{{ p_reception_et_traitement.field_traite_doleance.label }}</label>
<p name="traite_doleance" v-html="rec.traite_doleance" />
<label for="entite_recoit_doleance">{{ p_reception_et_traitement.field_entite_recoit_doleance.label }}</label>
<p name="entite_recoit_doleance" v-html="rec.entite_recoit_doleance" />
</li>
</ul>
</section>
<section class="miseenoeuvre">
<label for="entites_decisionnaires">{{ ct_cercle_politique.field_entites_decisionnaires.label }}</label>
<p name="entites_decisionnaires" v-html="doleance.entites_decisionnaires" />
<label for="decision_formule">{{ ct_cercle_politique.field_decision_formulee.label }}</label>
<p name="decision_formule" v-html="doleance.decision_formule" />
<h5>{{ ct_cercle_politique.field_mise_en_oeuvre_decision.label }}</h5>
<ul class="mise_en_oeuvre_decision">
<li
v-for="dec in doleance.mise_en_oeuvre_decision">
<label for="entite_adresse_decision">{{ p_mise_en_oeuvre_decision.field_entite_adresse_decision.label }}</label>
<p name="entite_adresse_decision" v-html="dec.entite_adresse_decision" />
<label for="formule_decision">{{ p_mise_en_oeuvre_decision.field_formule_decision.label }}</label>
<p name="formule_decision" v-html="dec.formule_decision" />
<label for="entite_metenoeuvre_decisio">{{ p_mise_en_oeuvre_decision.field_entite_metenoeuvre_decisio.label }}</label>
<p name="entite_metenoeuvre_decisio" v-html="dec.entite_metenoeuvre_decisio" />
</li>
</ul>
</section>
<section class="receptions_et_applications">
<label for="entite_adresse_application">{{ ct_cercle_politique.field_entite_adresse_application.label }}</label>
<p name="entite_adresse_application" v-html="doleance.entite_adresse_application" />
<label for="aqui_adresse_decision">{{ ct_cercle_politique.field_aqui_adresse_decision.label }}</label>
<p name="aqui_adresse_decision" v-html="doleance.aqui_adresse_decision" />
<label for="comment_formule_decision">{{ ct_cercle_politique.field_comment_formule_decision.label }}</label>
<p name="comment_formule_decision" v-html="doleance.comment_formule_decision" />
<h5>{{ ct_cercle_politique.field_receptions_et_applications.label }}</h5>
<ul class="receptions_et_applications">
<li
v-for="app in doleance.receptions_et_applications">
<label for="applique_decision">{{ p_reception_application_decision.field_applique_decision.label }}</label>
<p name="applique_decision" v-html="app.applique_decision" />
<label for="formule_decision_applic">{{ p_reception_application_decision.field_formule_decision_applic.label }}</label>
<p name="formule_decision_applic" v-html="app.formule_decision_applic" />
<label for="entite_recoit_decision">{{ p_reception_application_decision.field_entite_recoit_decision.label }}</label>
<p name="entite_recoit_decision" v-html="app.entite_recoit_decision" />
</li>
</ul>
<label for="probleme_initial_resolu">{{ ct_cercle_politique.field_probleme_initial_resolu.label }}</label>
<p name="probleme_initial_resolu" v-html="doleance.probleme_initial_resolu" />
<label for="oui_nouvelle_situation">{{ ct_cercle_politique.field_oui_nouvelle_situation.label }}</label>
<p name="oui_nouvelle_situation" v-html="doleance.oui_nouvelle_situation" />
<label for="non_adresse_doleance">{{ ct_cercle_politique.field_non_adresse_doleance.label }}</label>
<p name="non_adresse_doleance" v-html="doleance.non_adresse_doleance" />
</section>
</section>
</section>
</template>

90
src/components/contents/PuissanceAgir.vue Normal file
View File

@ -0,0 +1,90 @@
<script>
import { mapActions, mapState } from 'pinia'
import { ConcernementsStore } from '@stores/concernements'
import { UserStore } from '@/stores/user'
import { CommonStore } from '@/stores/common'
export default {
props: ['id'],
data(){
return {
}
},
computed: {
...mapState(ConcernementsStore,['opened_concernement']),
...mapState(ConcernementsStore,['ct_concernement']),
...mapState(ConcernementsStore,['ct_entite']),
},
created () {
console.log(`puissance d'agir content created, id: ${this.id}, opened_concernement:`,this.opened_concernement);
}
}
</script>
<template>
<section
class="content-besoins">
<ul class="besoins">
<li
v-for="besoin in opened_concernement.besoins"
:key="besoin.id"
class="besoin"
:id="besoin.id"
:class="besoinClass(besoin.id)"
>
<span
class="open-btn mdi"
:class="{ 'mdi-chevron-right': besoin.id !== opened_besoin_id, 'mdi-chevron-down': besoin.id === opened_besoin_id } "
@click="onClickBesoin(besoin.id)"
/>
<header>
<label
class="mdi mdi-rhombus"
:class="{ hover: hover_elmt && hover_elmt.type === 'besoin' && (hover_elmt.id === besoin.id || hover_elmt.bid === besoin.id) }"
@click="onClickBesoin(besoin.id)"
>
Besoin de l'enqueteur
</label>
<h4 class="besoin-description" v-html="besoin.description"/>
<a
v-if="isloggedin"
:href="'/api/node/add/reponse?besoin_id='+besoin.id"
target="_blank"
rel="noopener noreferrer"
class="contribute-link mdi mdi-pencil-plus">
contribuer à ce besoin
</a>
</header>
<ul class="reponses">
<li
v-for="reponse in besoin.reponses"
:key="reponse.id"
class="reponse"
:id="reponse.id"
>
<label class="mdi mdi-rhombus-outline">Ressource</label>
<section v-if="reponse.qui">
<label for="reponse-qui">Qui</label>
<p name="reponse-qui" v-html="reponse.qui" />
</section>
<section v-if="reponse.quoi">
<label for="reponse-quoi">Quoi</label>
<p name="reponse-quoi" v-html="reponse.quoi" />
</section>
<section v-if="reponse.ou">
<label for="reponse-ou">Où</label>
<p name="reponse-ou" v-html="reponse.ou" />
</section>
<section v-if="reponse.avec">
<label for="reponse-avec">Avec</label>
<p name="reponse-avec" v-html="reponse.avec" />
</section>
</li>
</ul>
</li>
</ul>
</section>
</template>

74
src/components/contents/TerrainDeVie.vue Normal file
View File

@ -0,0 +1,74 @@
<script>
import { mapActions, mapState } from 'pinia'
import { ConcernementsStore } from '@stores/concernements'
import { UserStore } from '@/stores/user'
import { CommonStore } from '@/stores/common'
export default {
props: ['id', 'eid', 'entite'],
data(){
return {
}
},
computed: {
...mapState(ConcernementsStore,['opened_concernement']),
...mapState(ConcernementsStore,['ct_concernement']),
...mapState(ConcernementsStore,['ct_entite']),
...mapState(UserStore,['name']),
created(){
let d = new Date(this.opened_concernement.created);
console.log('d', d);
return d.toLocaleDateString("fr-FR");//.toISOString().split('T')[0];
},
changed(){
let d = new Date(this.opened_concernement.changed);
console.log('d', d);
return d.toLocaleDateString("fr-FR");//.toISOString().split('T')[0];
}
},
created () {
console.log(`terrain de vie content created, id: ${this.id}, eid: ${this.eid}, opened_concernement:`, this.opened_concernement);
}
}
</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>
</template>

203
src/views/Concernement.vue
View File

@ -13,6 +13,9 @@ import EntiteFields from '@api/gql/entite.fragment.gql'
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';
import Doleancer from '@components/contents/Doleancer.vue';
export default {
props: ['id', 'eid'],
@ -109,7 +112,10 @@ export default {
}
},
components: {
SvgIcon
SvgIcon,
TerrainDeVie,
PuissanceAgir,
Doleancer
}
}
@ -160,196 +166,11 @@ export default {
</div>
</header>
<!-- concernement -->
<section
v-if="map_mode === 'terraindevie' && !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>
<!-- entite -->
<section
v-if="map_mode === 'terraindevie' && 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>
<!-- puissance d'agir -->
<section
v-if="map_mode === 'puissancedagir'"
class="content-besoins">
<ul class="besoins">
<li
v-for="besoin in opened_concernement.besoins"
:key="besoin.id"
class="besoin"
:id="besoin.id"
:class="besoinClass(besoin.id)"
>
<span
class="open-btn mdi"
:class="{ 'mdi-chevron-right': besoin.id !== opened_besoin_id, 'mdi-chevron-down': besoin.id === opened_besoin_id } "
@click="onClickBesoin(besoin.id)"
/>
<header>
<label
class="mdi mdi-rhombus"
:class="{ hover: hover_elmt && hover_elmt.type === 'besoin' && (hover_elmt.id === besoin.id || hover_elmt.bid === besoin.id) }"
@click="onClickBesoin(besoin.id)"
>
Besoin de l'enqueteur
</label>
<h4 class="besoin-description" v-html="besoin.description"/>
<a
v-if="isloggedin"
:href="'/api/node/add/reponse?besoin_id='+besoin.id"
target="_blank"
rel="noopener noreferrer"
class="contribute-link mdi mdi-pencil-plus">
contribuer à ce besoin
</a>
</header>
<ul class="reponses">
<li
v-for="reponse in besoin.reponses"
:key="reponse.id"
class="reponse"
:id="reponse.id"
>
<label class="mdi mdi-rhombus-outline">Ressource</label>
<section v-if="reponse.qui">
<label for="reponse-qui">Qui</label>
<p name="reponse-qui" v-html="reponse.qui" />
</section>
<section v-if="reponse.quoi">
<label for="reponse-quoi">Quoi</label>
<p name="reponse-quoi" v-html="reponse.quoi" />
</section>
<section v-if="reponse.ou">
<label for="reponse-ou">Où</label>
<p name="reponse-ou" v-html="reponse.ou" />
</section>
<section v-if="reponse.avec">
<label for="reponse-avec">Avec</label>
<p name="reponse-avec" v-html="reponse.avec" />
</section>
</li>
</ul>
</li>
</ul>
</section>
<section
v-if="map_mode === 'doleancer'"
class="content-doleances">
<section
v-for="doleance in opened_concernement.doleances"
class="doleance">
<header>
<label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>
<h3 name="leprobleme">{{ doleance.leprobleme }}</h3>
<label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label>
<h4 name="lenquete">{{ doleance.lenquete }}</h4>
</header>
<section class="groupesinterets">
<h5>{{ ct_cercle_politique.field_groupes.label }}</h5>
<ul>
<li
v-for="groupe in doleance.groupesinterets">
<label for="groupe">{{ p_groupes_interets.field_groupe_interets.label }}</label>
<p name="groupe" v-html="groupe.groupe_interets" />
<label for="accorder">{{ p_groupes_interets.field_accorder_interets.label }}</label>
<p name="accorder" v-html="groupe.accorder_interets" />
<label for="formuler">{{ p_groupes_interets.field_formuler.label }}</label>
<p name="formuler" v-html="groupe.formuler" />
</li>
</ul>
</section>
<section class="adresse">
<label for="entite_addresse_doleance">{{ ct_cercle_politique.field_entite_adresse_doleance.label }}</label>
<p name="entite_addresse_doleance" v-html="doleance.entite_addresse_doleance" />
<label for="comment_ennonce_doleance">{{ ct_cercle_politique.field_comment_enonce_doleance.label }}</label>
<p name="comment_ennonce_doleance" v-html="doleance.comment_ennonce_doleance" />
<label for="aqui_addresse_doleance">{{ ct_cercle_politique.field_a_qui_adresse_doleance.label }}</label>
<p name="aqui_addresse_doleance" v-html="doleance.aqui_addresse_doleance" />
<h5>{{ ct_cercle_politique.field_receptions_et_traitements.label }}</h5>
<ul class="reception_traitement">
<li
v-for="rec in doleance.reception_traitement">
<label for="entite_adressee">{{ p_reception_et_traitement.field_entite_adressee.label }}</label>
<p name="entite_adressee" v-html="rec.entite_adressee" />
<label for="doleance_formulee">{{ p_reception_et_traitement.field_doleance_formulee.label }}</label>
<p name="doleance_formulee" v-html="rec.doleance_formulee" />
<label for="traite_doleance">{{ p_reception_et_traitement.field_traite_doleance.label }}</label>
<p name="traite_doleance" v-html="rec.traite_doleance" />
<label for="entite_recoit_doleance">{{ p_reception_et_traitement.field_entite_recoit_doleance.label }}</label>
<p name="entite_recoit_doleance" v-html="rec.entite_recoit_doleance" />
</li>
</ul>
</section>
<section class="miseenoeuvre">
<label for="entites_decisionnaires">{{ ct_cercle_politique.field_entites_decisionnaires.label }}</label>
<p name="entites_decisionnaires" v-html="doleance.entites_decisionnaires" />
<label for="decision_formule">{{ ct_cercle_politique.field_decision_formulee.label }}</label>
<p name="decision_formule" v-html="doleance.decision_formule" />
<h5>{{ ct_cercle_politique.field_mise_en_oeuvre_decision.label }}</h5>
<ul class="mise_en_oeuvre_decision">
<li
v-for="dec in doleance.mise_en_oeuvre_decision">
<label for="entite_adresse_decision">{{ p_mise_en_oeuvre_decision.field_entite_adresse_decision.label }}</label>
<p name="entite_adresse_decision" v-html="dec.entite_adresse_decision" />
<label for="formule_decision">{{ p_mise_en_oeuvre_decision.field_formule_decision.label }}</label>
<p name="formule_decision" v-html="dec.formule_decision" />
<label for="entite_metenoeuvre_decisio">{{ p_mise_en_oeuvre_decision.field_entite_metenoeuvre_decisio.label }}</label>
<p name="entite_metenoeuvre_decisio" v-html="dec.entite_metenoeuvre_decisio" />
</li>
</ul>
</section>
<section class="receptions_et_applications">
<label for="entite_adresse_application">{{ ct_cercle_politique.field_entite_adresse_application.label }}</label>
<p name="entite_adresse_application" v-html="doleance.entite_adresse_application" />
<label for="aqui_adresse_decision">{{ ct_cercle_politique.field_aqui_adresse_decision.label }}</label>
<p name="aqui_adresse_decision" v-html="doleance.aqui_adresse_decision" />
<label for="comment_formule_decision">{{ ct_cercle_politique.field_comment_formule_decision.label }}</label>
<p name="comment_formule_decision" v-html="doleance.comment_formule_decision" />
<h5>{{ ct_cercle_politique.field_receptions_et_applications.label }}</h5>
<ul class="receptions_et_applications">
<li
v-for="app in doleance.receptions_et_applications">
<label for="applique_decision">{{ p_reception_application_decision.field_applique_decision.label }}</label>
<p name="applique_decision" v-html="app.applique_decision" />
<label for="formule_decision_applic">{{ p_reception_application_decision.field_formule_decision_applic.label }}</label>
<p name="formule_decision_applic" v-html="app.formule_decision_applic" />
<label for="entite_recoit_decision">{{ p_reception_application_decision.field_entite_recoit_decision.label }}</label>
<p name="entite_recoit_decision" v-html="app.entite_recoit_decision" />
</li>
</ul>
<label for="probleme_initial_resolu">{{ ct_cercle_politique.field_probleme_initial_resolu.label }}</label>
<p name="probleme_initial_resolu" v-html="doleance.probleme_initial_resolu" />
<label for="oui_nouvelle_situation">{{ ct_cercle_politique.field_oui_nouvelle_situation.label }}</label>
<p name="oui_nouvelle_situation" v-html="doleance.oui_nouvelle_situation" />
<label for="non_adresse_doleance">{{ ct_cercle_politique.field_non_adresse_doleance.label }}</label>
<p name="non_adresse_doleance" v-html="doleance.non_adresse_doleance" />
</section>
</section>
</section>
<!-- 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"/>
</section>
</template>