doleancer added arrow btn to go to previous and next doleance #2303
This commit is contained in:
parent
9b357e6d6e
commit
55cb0698bd
@ -123,14 +123,14 @@ body{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$cartouch_width : 450px;
|
||||
#content{
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
@mixin main-cartouche{
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
box-sizing: border-box;
|
||||
width:450px;
|
||||
width:$cartouch_width;
|
||||
height: 100%;
|
||||
padding: 1rem 1rem 1rem;
|
||||
overflow-y: auto;
|
||||
@ -493,7 +493,6 @@ body{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
section.search{
|
||||
@ -578,6 +577,22 @@ body{
|
||||
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{
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -109,7 +109,7 @@ export const ConcernementsStore = defineStore({
|
||||
for(let superposition of temp_allSuperpositions) {
|
||||
for(let superposition_item of superposition) {
|
||||
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;
|
||||
superposition_item.cid = concernement.id;
|
||||
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 (!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 = [
|
||||
{
|
||||
cid: concernement.id,
|
||||
@ -159,6 +159,7 @@ export const ConcernementsStore = defineStore({
|
||||
// doleance
|
||||
concernement.has_doleance = concernement.doleances.length ? true : false;
|
||||
if (concernement.has_doleance) {
|
||||
console.log('concernement has doleance', concernement.doleances);
|
||||
concernement.opened_doleance = {
|
||||
id: concernement.doleances[0].id
|
||||
};
|
||||
|
||||
@ -161,8 +161,7 @@ export default {
|
||||
components: {
|
||||
TerrainDeVie,
|
||||
PuissanceAgir,
|
||||
Doleancer,
|
||||
SvgIcon
|
||||
Doleancer
|
||||
}
|
||||
}
|
||||
|
||||
@ -186,6 +185,7 @@ export default {
|
||||
<circle cx="12" cy="12" r="12" mask="url(#arrowMask)" fill="white" />
|
||||
</svg>
|
||||
</nav>
|
||||
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user