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

admin front: puiisance dagir: updating besoin reponse is updating mapItem display

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2024-06-04 13:30:59 +02:00
parent 8351ee71e3
commit aba6de580f
5 changed files with 209 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -75,6 +75,7 @@ fragment ConcernementFields on Concernement {
index
confidentialite
reponses {
can_update
author
avec
id

134
src/components/ConcernementMapItem.vue
View File

@@ -295,6 +295,16 @@ export default {
},
deep: true
},
'concernement.besoins': {
handler (n, o){
console.log(`ConcernementMapItem ${this.id} watch concernement.besoins o, n`, o, n);
if (this.is_open && this.map_mode === "puissancedagir") {
// this.resetPaperBesoinReponsePos();
this.setPaperPuissanceagirBesoins(true); // true for update=true
}
},
deep: true
},
'concernement.besoins.length': {
handler (n, o){
console.log(`ConcernementMapItem ${this.id} watch concernement.besoins.length o, n`, o, n);
@@ -1475,12 +1485,24 @@ export default {
// }
// return g;
// },
setPaperPuissanceagirBesoins(){
console.log(`setPaperPuissanceagirBesoins cid:${this.concernement.id}`);
let g = new paper.Group({
pivot: new paper.Point(this.pos),
name: 'puissanceagir_besoins'
});
setPaperPuissanceagirBesoins(update){
console.log(`setPaperPuissanceagirBesoins cid:${this.concernement.id}, update: ${update}`);
let g;
if (update) {
g = this.paper_main_object.children['puissanceagir_besoins'];
console.log('REUSING puissanceagir_besoins group', g);
} else{
console.log('CREATING puissanceagir_besoins group');
g = new paper.Group({
pivot: new paper.Point(this.pos),
name: 'puissanceagir_besoins'
});
}
if (!g) {
console.warn('no puissanceagir_besoins group created nor found')
return;
}
let res_fields = ['qui','quoi','ou','avec'];
let arc = (360 / 16); // unit arc
@@ -1494,17 +1516,31 @@ export default {
let y = Math.sin(center_a*(Math.PI/180)) * br;
// use paper symbol
let besoin = new paper.SymbolItem(this.paper_symbol_definitions['besoin']);
besoin.position = new paper.Point([this.pos.x + x, this.pos.y + y]);
besoin.scale(this.scale);
besoin.item_id = this.concernement.besoins[i].id;
besoin.item_cid = this.concernement.id;
besoin.item_type = 'besoin';
besoin.is_symbol_instance = true;
let paper_besoin;
if (update) {
paper_besoin = this.paper_main_object.getItem({id: this.concernement.besoins[i].paper_id});
// console.log('REUSING besoin paper item', paper_besoin);
} else{
// console.log('CREATING besoin paper item');
paper_besoin = new paper.SymbolItem(this.paper_symbol_definitions['besoin']);
paper_besoin.scale(this.scale);
paper_besoin.item_id = this.concernement.besoins[i].id;
paper_besoin.item_cid = this.concernement.id;
paper_besoin.item_type = 'besoin';
paper_besoin.is_symbol_instance = true;
g.addChild(paper_besoin)
// this is retriggering watch concernement and watch concernement.besoins
this.setBesoinPaperId(paper_besoin.id, this.cid, this.concernement.besoins[i].id);
}
console.log(`paper paper_besoin id:${paper_besoin.id}`);
if (!paper_besoin) {
console.warn('no paper_besoin item created nor found')
return;
}
paper_besoin.position = new paper.Point([this.pos.x + x, this.pos.y + y]);
console.log(`paper besoin id:${besoin.id}`);
this.setBesoinPaperId(besoin.id, this.cid, this.concernement.besoins[i].id);
g.addChild(besoin)
let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number
for (let j = 0; j < this.concernement.besoins[i].reponses.length; j++) {
@@ -1518,16 +1554,31 @@ export default {
let ry = Math.sin(res_a*(Math.PI/180)) * rr;
// use paper symbol
let reponse = new paper.SymbolItem(this.paper_symbol_definitions['reponse']);
reponse.position = new paper.Point([this.pos.x + rx, this.pos.y + ry]);
reponse.scale(this.scale);
reponse.item_id = this.concernement.besoins[i].reponses[j].id;
reponse.item_bid = this.concernement.besoins[i].id;
reponse.item_cid = this.concernement.id;
reponse.item_type = 'reponse';
reponse.is_symbol_instance = true;
this.setBesoinPaperId(reponse.id, this.cid, this.concernement.besoins[i].id, this.concernement.besoins[i].reponses[j].id);
g.addChild(reponse)
let paper_reponse;
let paper_reponse_id = this.concernement.besoins[i].reponses[j].paper_id;
if (update && paper_reponse_id) {
// console.log('paper_reponse_id', paper_reponse_id);
paper_reponse = this.paper_main_object.getItem({id: paper_reponse_id});
// console.log('REUSING reponse paper item', paper_reponse);
} else {
// console.log('CREATING reponse paper item', paper_reponse_id, this.concernement.besoins[i]);
// debugger;
paper_reponse = new paper.SymbolItem(this.paper_symbol_definitions['reponse']);
paper_reponse.scale(this.scale);
paper_reponse.item_id = this.concernement.besoins[i].reponses[j].id;
paper_reponse.item_bid = this.concernement.besoins[i].id;
paper_reponse.item_cid = this.concernement.id;
paper_reponse.item_type = 'reponse';
paper_reponse.is_symbol_instance = true;
this.setBesoinPaperId(paper_reponse.id, this.cid, this.concernement.besoins[i].id, this.concernement.besoins[i].reponses[j].id);
g.addChild(paper_reponse);
}
if (!paper_reponse) {
console.warn('no paper_reponse item created nor found')
return;
}
paper_reponse.position = new paper.Point([this.pos.x + rx, this.pos.y + ry]);
}
}
}
@@ -1535,6 +1586,37 @@ export default {
return g;
},
// resetPaperBesoinReponsePos(){
// console.log(`resetPaperBesoinReponsePos cid:${this.concernement.id}`);
// let res_fields = ['qui','quoi','ou','avec'];
// let arc = (360 / 16); // unit arc
// let r = (this.ray * this.scale)/5; // unit ray
// for (let i = 0; i < this.concernement.besoins.length; i++) {
// let start_a = arc * i;
// let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number
// for (let j = 0; j < this.concernement.besoins[i].reponses.length; j++) {
// let res_a = start_a + res_arc * (j+1); // angle for response line
// for (let f = 0; f < res_fields.length; f++) { // loop through all 4 fields, keep only the last one filled
// if( this.concernement.besoins[i].reponses[j][res_fields[f]] // if field filled
// && (f === res_fields.length -1 || !this.concernement.besoins[i].reponses[j][res_fields[f+1]]) // and is last field or last field filled
// ){
// let rr = this.ray * this.scale - r*f - r/2; // reponse field ray
// let rx = Math.cos(res_a*(Math.PI/180)) * rr;
// let ry = Math.sin(res_a*(Math.PI/180)) * rr;
// let paper_id = this.concernement.besoins[i].reponses[j].paper_id;
// console.log('paper_id', paper_id);
// let paper_reponse = this.paper_main_object.getItem({id: paper_id});
// console.log('paper_reponse', paper_reponse);
// paper_reponse.position = new paper.Point([this.pos.x + rx, this.pos.y + ry]);
// }
// }
// }
// }
// },
setPaperDoleances(){
let g = new paper.Group({
pivot: new paper.Point({x:0,y:0}),

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

@@ -336,24 +336,86 @@ export default {
:path="hover_elmt && hover_elmt.type === 'reponse' && hover_elmt.id === reponse.id ? rhombus_path : rhombusoutline_path"
/>
Ressource</label>
<section v-if="reponse.qui">
<section v-if="reponse.qui || reponse.can_update">
<label for="reponse-qui">Qui</label>
<p name="reponse-qui" v-html="reponse.qui" />
<!-- <p name="reponse-qui" v-html="reponse.qui" /> -->
<ContentEditable
tag="p"
:value="reponse.qui"
:html="true"
:contenteditable="reponse.can_update"
placeholder="Ajouter un élement de réponse."
:data="{
entitytype: 'node',
bundle: 'reponse',
id: reponse.id,
field: {field_name: 'field_qui', value:'value'}
}"
v-on:updated="reloadBesoins" />
</section>
<section v-if="reponse.quoi">
<section v-if="reponse.quoi || reponse.can_update">
<label for="reponse-quoi">Quoi</label>
<p name="reponse-quoi" v-html="reponse.quoi" />
<!-- <p name="reponse-quoi" v-html="reponse.quoi" /> -->
<ContentEditable
tag="p"
:value="reponse.quoi"
:html="true"
:contenteditable="reponse.can_update"
placeholder="Ajouter un élement de réponse."
:data="{
entitytype: 'node',
bundle: 'reponse',
id: reponse.id,
field: {field_name: 'field_quoi', value:'value'}
}"
v-on:updated="reloadBesoins" />
</section>
<section v-if="reponse.ou">
<section v-if="reponse.ou || reponse.can_update">
<label for="reponse-ou">Où</label>
<p name="reponse-ou" v-html="reponse.ou" />
<!-- <p name="reponse-ou" v-html="reponse.ou" /> -->
<ContentEditable
tag="p"
:value="reponse.ou"
:html="true"
:contenteditable="reponse.can_update"
placeholder="Ajouter un élement de réponse."
:data="{
entitytype: 'node',
bundle: 'reponse',
id: reponse.id,
field: {field_name: 'field_ou', value:'value'}
}"
v-on:updated="reloadBesoins" />
</section>
<section v-if="reponse.avec">
<section v-if="reponse.avec || reponse.can_update">
<label for="reponse-avec">Avec</label>
<p name="reponse-avec" v-html="reponse.avec" />
<!-- <p name="reponse-avec" v-html="reponse.avec" /> -->
<ContentEditable
tag="p"
:value="reponse.avec"
:html="true"
:contenteditable="reponse.can_update"
placeholder="Ajouter un élement de réponse."
:data="{
entitytype: 'node',
bundle: 'reponse',
id: reponse.id,
field: {field_name: 'field_avec', value:'value'}
}"
v-on:updated="reloadBesoins" />
</section>
</li>
<li>
<template v-if="isloggedin && !opened_concernement.can_update">
<div v-if="!reloading_concernements" @click="addRessource(besoin.id)" class="add-ressource-btn">
<span>Proposer une ressource</span>
<svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
</div>
<div v-else class="add-ressource-btn">
<div class="loading">Chargement</div>
</div>
</template>
</li>
</ul>
<!-- <a
v-if="isloggedin && !opened_concernement.can_update"
@@ -363,15 +425,7 @@ export default {
class="contribute-link mdi mdi-pencil-plus">
<svg-icon type="mdi" :path="pencilplusoutline_path" /> contribuer à ce besoin
</a> -->
<template v-if="isloggedin && !opened_concernement.can_update">
<div v-if="!reloading_concernements" @click="addRessource(besoin.id)" class="add-ressource-btn">
<span>Proposer une ressource</span>
<svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
</div>
<div v-else class="add-ressource-btn">
<div class="loading">Chargement</div>
</div>
</template>
</li>
</ul>

17
src/components/editable/ContentEditable.vue
View File

@@ -23,7 +23,11 @@ export default {
type : [Boolean, String],
default : false,
},
data: Object
data: Object,
placeholder : {
type : String,
default : 'Ajouter du texte'
}
},
emits: ['updated'],
data(){
@@ -46,11 +50,11 @@ export default {
buttons: ['anchor'],
},
placeholder: {
/* This example includes the default options for placeholder,
if nothing is passed this is what it used */
text: 'Ajouter du text',
hideOnClick: true
}
/* This example includes the default options for placeholder,
if nothing is passed this is what it used */
text: this.placeholder,
hideOnClick: true
}
});
}
},
@@ -62,6 +66,7 @@ export default {
console.log('onContentEditableFocusOut', e);
// console.log('onContentEditableFocusOut data', this.data);
let new_field_content = this.html ? e.target.innerHTML : e.target.innerText;
new_field_content = new_field_content.replace(/<br>$/g, '');
// console.log('onContentEditableFocusOut', new_field_content);
this.$emit('focusout');
if (this.data) {

19
src/stores/concernements.js
View File

@@ -17,6 +17,8 @@ import ConcernementFields from '@api/gql/concernement.fragment.gql'
// import EntityFields from '@api/gql/entitydef.fragment.gql'
import _assign from 'lodash/assign';
import _assignIn from 'lodash/assignIn';
import _merge from 'lodash/merge';
export const ConcernementsStore = defineStore({
@@ -433,6 +435,7 @@ export const ConcernementsStore = defineStore({
ou
qui
quoi
can_update
}
}
}
@@ -442,14 +445,24 @@ export const ConcernementsStore = defineStore({
.then(({ data : { data : { concernement } } }) => {
console.log(`reloadConcernementBesoins loaded len: ${concernement.besoins.length}`, concernement)
let tmp_conc = this.concernementsByID[concernement.id];
// tmp_conc.besoins.forEach(besoin => {
// besoin.reponses.forEach(reponse => {
// console.log(`BEFORE _merge besoin id:${besoin.id} reponse id:${reponse.id}, paper_id:${reponse.paper_id}`);
// });
// });
// merge old concernement besoins with new once
_assign(tmp_conc.besoins, concernement.besoins);
_merge(tmp_conc.besoins, concernement.besoins);
// tmp_conc.besoins.forEach(besoin => {
// besoin.reponses.forEach(reponse => {
// console.log(`AFTER _merge besoin id:${besoin.id} reponse id:${reponse.id}, paper_id:${reponse.paper_id}`);
// });
// });
tmp_conc.has_puissancedagir = tmp_conc.besoins.length ? true : false;
// records and/or merge into general object
tmp_conc.besoins.forEach(besoin => {
besoin.cid = tmp_conc.id;
if (this.allBesoinsById[besoin.id]) {
_assign(this.allBesoinsById[besoin.id], besoin);
_merge(this.allBesoinsById[besoin.id], besoin);
}else{
this.allBesoinsById[besoin.id] = besoin;
}
@@ -659,6 +672,7 @@ export const ConcernementsStore = defineStore({
this.opened_entite_id = id;
},
setBesoinPaperId(paper_id, cid, bid, rid){
console.log(`setBesoinPaperId paper_id: ${paper_id}, cid: ${cid}, bid: ${bid}, rid: ${rid}`);
this.concernementsByID[cid].besoins.forEach((b,j) => {
if(b.id === bid) {
if (!rid) {
@@ -667,6 +681,7 @@ export const ConcernementsStore = defineStore({
this.concernementsByID[cid].besoins[j].reponses.forEach((r,k) => {
if (r.id === rid) {
this.concernementsByID[cid].besoins[j].reponses[k].paper_id = paper_id;
console.log(`this.concernementsByID[${cid}].besoins[${j}].reponses[${k}].paper_id`, this.concernementsByID[cid].besoins[j].reponses[k].paper_id);
}
})
}