ouatterrir-app/src/App.vue

<script>
import { RouterLink, RouterView } from 'vue-router'

import { mapState, mapActions } from 'pinia'
import { UserStore } from '@/stores/user'
import { ConcernementsStore } from '@/stores/concernements'

import StaticMenu from '@components/block/StaticMenu.vue'
import UserBlock from '@components/block/UserBlock.vue'
import SearchBlock from '@components/block/SearchBlock.vue'

import MapConcernements from '@components/MapConcernements.vue'
import ConcernementMapItem from '@components/ConcernementMapItem.vue'

export default {
  data() {
    return {
      mapitems: [],
      // not_cloned_mapitems: [],
      // superposed_cloned_mapitems: []
    }
  },
  created () {
    this.loadContentTypeDefinition();
    this.loadConcernements()
  },
  mounted () {
    console.log('APP onMounted')
    this.checkUser()      
  },
  computed: {
    ...mapState(UserStore,['isloggedin']),
    ...mapState(ConcernementsStore,['map_mode',
                                    'concernements',
                                    'concernements_loaded',
                                    'concernementsByID',
                                    'allSuperpositions_byid',
                                    'allMapItems_byid',
                                    'opened_recit']),
  },
  watch: {
    concernements_loaded:{
      handler (n, o) {
        if(n && !o){
          this.parseMapitems()
        }
      },
      deep: true
    }
  },
  methods: {
    ...mapActions(ConcernementsStore,['loadConcernements']),
    ...mapActions(ConcernementsStore,['loadContentTypeDefinition']),
    ...mapActions(UserStore,['checkUser']),
    // parseSuperposedMapitemsClones () {
    //   let clones = [];
    //   // loop through all superposition grouped by concernements couples
    //   for(let [couple_id, superpositions] of Object.entries(this.allSuperpositions_byid)){
    //     // loop through all superpositions for one concernement couple and mark the first as NOT cloned and clone the others and mark them as cloned
    //     let i = 0;
    //     for(let [superposition_id, superposition] of Object.entries(superpositions)){
    //       i++
    //       if (i === 1) {
    //         // first superposition of the couple is not cloned
    //         this.allSuperpositions_byid[couple_id][superposition_id].cloned = false;
    //         continue;
    //       }
    //       // following superpositions of the couple generate concernement map_item clones
    //       // first concernement of the couple
    //       clones.push({
    //         concernement: this.concernementsByID[superposition[0].cid],
    //         superposition_id: superposition_id
    //       })
    //       // second concernement of the couple
    //       clones.push({
    //         concernement: this.concernementsByID[superposition[1].cid],
    //         superposition_id: superposition_id
    //       })

    //       this.allSuperpositions_byid[couple_id][superposition_id].cloned = true;
    //     }
    //   }
    //   this.superposed_cloned_mapitems = clones;
    // },
    parseMapitems() {
      let couple_ids = Object.keys(this.allSuperpositions_byid);
      console.log('App couple_ids', couple_ids);
      // loop through all concernement
      for(let [concernement_id, concernement] of Object.entries(this.concernementsByID)){
        // create the main mapitem object
        let mapitem = {
          id: concernement.id,
          concernement: concernement,
          superposition_ids: [],
          clone: false,
        }
        // loop through superposistions couples
        couple_ids.forEach(couple_id => {
          let cids = couple_id.match(/(\d+)-(\d+)/i);
          // console.log('cids', cids);
          if (concernement.id === parseInt(cids[1]) || concernement.id === parseInt(cids[2])) {
            let i = 0;
            for(let [superposition_id, superposition] of Object.entries(this.allSuperpositions_byid[couple_id])){
              i++;
              if (i === 1) {
                mapitem.superposition_ids.push(superposition_id)
              }else{
                let mapitem_superposition = {
                  id: `${concernement.id}___${superposition_id}`,
                  concernement: concernement,
                  superposition_ids: [superposition_id],
                  clone: true
                };
                this.mapitems.push(mapitem_superposition);
                this.allMapItems_byid[mapitem_superposition.id] = mapitem_superposition;
              }
            }
          }
        });
        this.mapitems.push(mapitem)
        this.allMapItems_byid[mapitem.id] = mapitem;
      }
      console.log('App mapitems', this.mapitems);
    }
  },
  components: {
    MapConcernements,
    ConcernementMapItem,
    StaticMenu,
    UserBlock,
    SearchBlock
  }
}

</script>

<template>
  <header id="header">
    <div class="row title">
      <h1>
        <router-link :to="{ name: 'home' }"><span class="title">Atlas</span> des cartes d'atterrissage</router-link>  
      </h1>

    </div>
    <div class="row top">
      <StaticMenu/>
      <SearchBlock/> 
      <UserBlock/>
    </div>
  </header>

  <div id="main-content">
    <MapConcernements>
      <template v-for="(mapitem,index) in mapitems">
        <ConcernementMapItem
          v-if="mapitem.concernement.visible && ((map_mode === 'superposition' && mapitem.clone) || !mapitem.clone)"
          :key="mapitem.id"
          :mapitem="mapitem"
        />
      </template>
      <!-- <template v-if="map_mode === 'superposition'">
        <template v-for="(mapitem,index) in superposed_cloned_mapitems">
          <ConcernementMapItem
            v-if="mapitem.concernement.visible"
            :key="mapitem.id"
            :mapitem="mapitem"
          />
        </template>
      </template> -->
    </MapConcernements>
    <div id="content" :class="{'recit-opened':opened_recit}">
      <RouterView />
    </div>
  </div>

</template>

<style lang="scss" scoped>
</style>