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_bycids',
                                    'allSuperpositions_clustered',
                                    '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']),
    parseMapitems() {
      // let couple_ids = Object.keys(this.allSuperpositions_bycids);
      // 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: [],
          superposition_cluster_index: -1,
          clone: false,
        }

        // loop through all superposition_clusters
        for( let [cluster_index, cluster] of this.allSuperpositions_clustered.entries()){
          let cids = [];
          // console.log(`cluster ${cluster_index}`, cluster);
          for( let s of cluster){
            cids.push(s.cid)
          }
          // console.log(`cids:${cids}`);
          if(cids.indexOf(concernement.id) !== -1){
            // console.log('concernement in cluster');
            if (mapitem.superposition_cluster_index === -1) {
              // if main map item does not yet have a superposition use it and alter his id (for matter constraints)
              mapitem.superposition_cluster_index = cluster_index
              mapitem.id = `${concernement.id}___${cluster_index}`
            }else{
              let mapitem_superposition = {
                id: `${concernement.id}___${cluster_index}`,
                concernement: concernement,
                superposition_cluster_index: cluster_index,
                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>
      <transition name="fade">
        <div class="loading" v-if="mapitems.length === 0">Chargement</div>
      </transition>
      <template v-if="mapitems.length > 0">
        <template v-for="(mapitem,index) in mapitems">
          <!--  && ((map_mode === 'superposition' && mapitem.clone) || !mapitem.clone) -->
          <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>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 1s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
</style>