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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/assets/main.scss
View File

@ -123,14 +123,14 @@ body{
} }
} }
} }
$cartouch_width : 450px;
#content{ #content{
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
@mixin main-cartouche{ @mixin main-cartouche{
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
box-sizing: border-box; box-sizing: border-box;
width:450px; width:$cartouch_width;
height: 100%; height: 100%;
padding: 1rem 1rem 1rem; padding: 1rem 1rem 1rem;
overflow-y: auto; overflow-y: auto;
@ -494,7 +494,6 @@ body{
} }
} }
section.search{ section.search{
@include main-cartouche(); @include main-cartouche();
@ -578,6 +577,22 @@ body{
text-decoration: underline; text-decoration: underline;
} }
} }
nav.doleance-switch{
div{
position: fixed;
top: calc(100vh * 0.49);
cursor: pointer;
&.prev{
left: 1rem;
}
&.next{
right:calc($cartouch_width + 2rem);
}
}
}
} }
#recit-player{ #recit-player{

8
src/components/ConcernementMapItem.vue
View File

@ -69,12 +69,12 @@ export default {
'paper_symbol_definitions']) 'paper_symbol_definitions'])
}, },
created () { 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.superposition_id ? `${this.cid}___${this.superposition_id}` : this.cid;
this.id = this.mapitem.id; this.id = this.mapitem.id;
this.concernement = this.mapitem.concernement; this.concernement = this.mapitem.concernement;
this.cid = this.concernement.id; 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; this.active_revision = this.concernement.active_revision;
// console.log(`ConcernementsMapItem ${this.id} created`); // console.log(`ConcernementsMapItem ${this.id} created`);
@ -198,7 +198,7 @@ export default {
}, },
active_revision: { active_revision: {
handler (n, o) { 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) if(o & n){ // do not trigger on first variable filling (if o is null)
this.resetPaperActiveRevision(); this.resetPaperActiveRevision();
} }
@ -406,7 +406,7 @@ export default {
} }
} }
} }
console.log('superposedEntitesIDsList', this.superposedEntitesIDsList); // console.log('superposedEntitesIDsList', this.superposedEntitesIDsList);
}, },
// MATTER BODY // 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 CartoucheLayout from '@components/layout/CartoucheLayout.vue';
import SvgIcon from '@jamescoyle/vue-icon';
// import vSelect from 'vue-select'; import { mdiArrowLeft } from '@mdi/js';
// import 'vue-select/dist/vue-select.css'; import { mdiArrowRight } from '@mdi/js';
export default { export default {
props: ['cid'], props: ['cid'],
data(){ data(){
return { return {
doleance: null, doleance: null,
doleance_selected: null doleance_selected: null,
doleance_index: null,
arrowleft_path: mdiArrowLeft,
arrowright_path: mdiArrowRight
} }
}, },
computed: { computed: {
...mapState(ConcernementsStore,['map_mode', ...mapState(ConcernementsStore,['map_mode',
'opened_concernement', 'opened_concernement',
'concernementsByID',
'concernements_loaded', 'concernements_loaded',
'ct_concernement', 'ct_concernement',
'ct_cercle_politique', 'ct_cercle_politique',
@ -30,58 +34,37 @@ export default {
'p_mise_en_oeuvre_decision', 'p_mise_en_oeuvre_decision',
'p_reception_application_decision' 'p_reception_application_decision'
]), ]),
...mapState(CommonStore,['hover_elmt']), ...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;
// }
}, },
created () { created () {
console.log(`Doleancer content created, id: ${this.id}, opened_concernement:`,this.opened_concernement); this.concernement = this.concernementsByID[this.cid];
this.opened_concernement.doleances.forEach((doleance, index) => { console.log(`Doleancer content created, id: ${this.cid}, doleances:`,this.concernement.doleances);
if (doleance.id === this.opened_concernement.opened_doleance.id) { this.concernement.doleances.forEach((doleance, index) => {
if (doleance.id === this.concernement.opened_doleance.id) {
this.doleance = doleance; this.doleance = doleance;
this.doleance_index = index;
} }
}); });
}, },
methods: { methods: {
...mapActions(ConcernementsStore,['setOpenedDoleance']), ...mapActions(ConcernementsStore,['setOpenedDoleance']),
onDoleanceSelected(option){ nextDoleance(){
console.log('openDoleance', option); this.doleance_index ++;
this.setOpenedDoleance(parseInt(this.id), option.id) this.openDoleance()
},
this.opened_concernement.doleances.forEach((doleance, index) => { prevDoleance(){
if (option.id === this.opened_concernement.opened_doleance.id) { this.doleance_index --;
this.doleance = doleance; this.openDoleance()
} },
}); openDoleance(){
console.log('openDoleance');
this.doleance = this.concernement.doleances[this.doleance_index];
this.setOpenedDoleance(parseInt(this.cid), this.doleance.id);
} }
}, },
components: { components: {
CartoucheLayout, CartoucheLayout,
// vSelect SvgIcon
} }
} }
@ -99,17 +82,6 @@ export default {
<section <section
class="content-doleances"> 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"> <main v-if="opened_concernement.opened_doleance.id === doleance.id && opened_concernement.opened_doleance.field">
<section <section
v-if="opened_concernement.opened_doleance.field === 'leprobleme'"> v-if="opened_concernement.opened_doleance.field === 'leprobleme'">
@ -294,6 +266,32 @@ export default {
</template> </template>
</CartoucheLayout> </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> </template>

5
src/stores/concernements.js
View File

@ -109,7 +109,7 @@ export const ConcernementsStore = defineStore({
for(let superposition of temp_allSuperpositions) { for(let superposition of temp_allSuperpositions) {
for(let superposition_item of superposition) { for(let superposition_item of superposition) {
if (superposition_item.eid === entite.entite.id && !superposition_item.cid) { if (superposition_item.eid === entite.entite.id && !superposition_item.cid) {
console.log(`already_recorded, eid:${entite.entite.id}, teid:${entite_superpose.id}`, entite.entite.title); // console.log(`already_recorded, eid:${entite.entite.id}, teid:${entite_superpose.id}`, entite.entite.title);
already_recorded = true; already_recorded = true;
superposition_item.cid = concernement.id; superposition_item.cid = concernement.id;
break; break;
@ -121,7 +121,7 @@ export const ConcernementsStore = defineStore({
} }
// if not already recorded, add it to the array. It is incomplete has it's missing one concernement id wich will be filled in next loops // if not already recorded, add it to the array. It is incomplete has it's missing one concernement id wich will be filled in next loops
if (!already_recorded) { if (!already_recorded) {
console.log(`NOT already_recorded, eid:${entite.entite.id}, teid:${entite_superpose.id}`, entite.entite.title); // console.log(`NOT already_recorded, eid:${entite.entite.id}, teid:${entite_superpose.id}`, entite.entite.title);
let s = [ let s = [
{ {
cid: concernement.id, cid: concernement.id,
@ -159,6 +159,7 @@ export const ConcernementsStore = defineStore({
// doleance // doleance
concernement.has_doleance = concernement.doleances.length ? true : false; concernement.has_doleance = concernement.doleances.length ? true : false;
if (concernement.has_doleance) { if (concernement.has_doleance) {
console.log('concernement has doleance', concernement.doleances);
concernement.opened_doleance = { concernement.opened_doleance = {
id: concernement.doleances[0].id id: concernement.doleances[0].id
}; };

4
src/views/Concernement.vue
View File

@ -161,8 +161,7 @@ export default {
components: { components: {
TerrainDeVie, TerrainDeVie,
PuissanceAgir, PuissanceAgir,
Doleancer, Doleancer
SvgIcon
} }
} }
@ -186,6 +185,7 @@ export default {
<circle cx="12" cy="12" r="12" mask="url(#arrowMask)" fill="white" /> <circle cx="12" cy="12" r="12" mask="url(#arrowMask)" fill="white" />
</svg> </svg>
</nav> </nav>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>