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

doleancer added arrow btn to go to previous and next doleance #2303

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2023-09-29 14:47:29 +02:00
parent 9b357e6d6e
commit 55cb0698bd
5 changed files with 80 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ConcernementMapItem.vue
View File

@@ -69,12 +69,12 @@ export default {
'paper_symbol_definitions'])
},
created () {
console.log('ConcernementMapItem created', this.mapitem);
// console.log('ConcernementMapItem created', this.mapitem);
// this.id = this.superposition_id ? `${this.cid}___${this.superposition_id}` : this.cid;
this.id = this.mapitem.id;
this.concernement = this.mapitem.concernement;
this.cid = this.concernement.id;
console.log('mapitem this.cid', this.cid);
// console.log('mapitem this.cid', this.cid);
this.active_revision = this.concernement.active_revision;
// console.log(`ConcernementsMapItem ${this.id} created`);
@@ -198,7 +198,7 @@ export default {
},
active_revision: {
handler (n, o) {
console.log(`concernementMapItem watch active_revision o:${o}, n:${n}`);
// console.log(`concernementMapItem watch active_revision o:${o}, n:${n}`);
if(o & n){ // do not trigger on first variable filling (if o is null)
this.resetPaperActiveRevision();
}
@@ -406,7 +406,7 @@ export default {
}
}
}
console.log('superposedEntitesIDsList', this.superposedEntitesIDsList);
// console.log('superposedEntitesIDsList', this.superposedEntitesIDsList);
},
// MATTER BODY

108
src/components/contents/Doleancer.vue
View File

@@ -7,21 +7,25 @@ import { CommonStore } from '@/stores/common'
import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
// import vSelect from 'vue-select';
// import 'vue-select/dist/vue-select.css';
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiArrowLeft } from '@mdi/js';
import { mdiArrowRight } from '@mdi/js';
export default {
props: ['cid'],
data(){
return {
doleance: null,
doleance_selected: null
doleance_selected: null,
doleance_index: null,
arrowleft_path: mdiArrowLeft,
arrowright_path: mdiArrowRight
}
},
computed: {
...mapState(ConcernementsStore,['map_mode',
'opened_concernement',
'concernementsByID',
'concernements_loaded',
'ct_concernement',
'ct_cercle_politique',
@@ -30,58 +34,37 @@ export default {
'p_mise_en_oeuvre_decision',
'p_reception_application_decision'
]),
...mapState(CommonStore,['hover_elmt']),
// doleances_select_options () {
// let os = [];
// this.opened_concernement.doleances.forEach((doleance, index) => {
// let o = {
// label: doleance.leprobleme,
// id: doleance.id
// }
// if (doleance.id === this.opened_concernement.opened_doleance.id) {
// this.doleance_selected = o;
// }
// os.push(o);
// })
// return os;
// },
// doleances_select_value () {
// let value;
// this.opened_concernement.doleances.forEach((doleance, index) => {
// if (doleance.id === this.opened_concernement.opened_doleance.id) {
// value = {
// label: doleance.leprobleme,
// id: doleance.id
// }
// }
// });
// return value;
// }
...mapState(CommonStore,['hover_elmt'])
},
created () {
console.log(`Doleancer content created, id: ${this.id}, opened_concernement:`,this.opened_concernement);
this.opened_concernement.doleances.forEach((doleance, index) => {
if (doleance.id === this.opened_concernement.opened_doleance.id) {
this.concernement = this.concernementsByID[this.cid];
console.log(`Doleancer content created, id: ${this.cid}, doleances:`,this.concernement.doleances);
this.concernement.doleances.forEach((doleance, index) => {
if (doleance.id === this.concernement.opened_doleance.id) {
this.doleance = doleance;
this.doleance_index = index;
}
});
},
methods: {
...mapActions(ConcernementsStore,['setOpenedDoleance']),
onDoleanceSelected(option){
console.log('openDoleance', option);
this.setOpenedDoleance(parseInt(this.id), option.id)
this.opened_concernement.doleances.forEach((doleance, index) => {
if (option.id === this.opened_concernement.opened_doleance.id) {
this.doleance = doleance;
}
});
nextDoleance(){
this.doleance_index ++;
this.openDoleance()
},
prevDoleance(){
this.doleance_index --;
this.openDoleance()
},
openDoleance(){
console.log('openDoleance');
this.doleance = this.concernement.doleances[this.doleance_index];
this.setOpenedDoleance(parseInt(this.cid), this.doleance.id);
}
},
components: {
CartoucheLayout,
// vSelect
SvgIcon
}
}
@@ -99,17 +82,6 @@ export default {
<section
class="content-doleances">
<!-- <label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>
<v-select
:options="doleances_select_options"
item-value="id"
v-model="doleance_selected"
:clearable="false"
:searchable="false"
@option:selected="onDoleanceSelected"
>
</v-select> -->
<main v-if="opened_concernement.opened_doleance.id === doleance.id && opened_concernement.opened_doleance.field">
<section
v-if="opened_concernement.opened_doleance.field === 'leprobleme'">
@@ -294,6 +266,32 @@ export default {
</template>
</CartoucheLayout>
<nav v-if="map_mode === 'doleancer'" class="doleance-switch">
<div
v-if="doleance_index > 0"
@click="prevDoleance"
class="prev">
<svg class="prev-doleance-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
<mask id="arrowMaskprev">
<rect x="0" y="0" width="24" height="24" fill="white"/>
<path :d="arrowleft_path" fill="black"/>
</mask>
<circle cx="12" cy="12" r="12" mask="url(#arrowMaskprev)" fill="white" />
</svg>
</div>
<div
v-if="doleance_index < concernement.doleances.length-1"
@click="nextDoleance"
class="next">
<svg class="next-doleance-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
<mask id="arrowMasknext">
<rect x="0" y="0" width="24" height="24" fill="white"/>
<path :d="arrowright_path" fill="black"/>
</mask>
<circle cx="12" cy="12" r="12" mask="url(#arrowMasknext)" fill="white" />
</svg>
</div>
</nav>
</template>