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',
                                    'concernements_loading_nb',
                                    'concernementsByID',
                                    'allSuperpositions_bycids',
                                    'allSuperpositions_clustered',
                                    'allMapItems_byid',
                                    'opened_recit']),
  },
  watch: {
    concernements_loaded:{
      handler (n, o) {
        if(n && !o){
          this.parseMapitems()
        }
      },
      deep: true
    },
    concernements_loading_nb: {
      handler (n, o) {
        console.log('App watch concernements_loading_nb o, n', o, n);
        this.parseMapitems();
      },
      deep: true
    },
    // concernementsByID:{
    //   handler (n, o) {
    //     console.log('App watch concernementsByID o, n', o, n);
    //     this.parseMapitems();
    //   },
    //   deep: true
    // }
  },
  methods: {
    ...mapActions(ConcernementsStore,['loadConcernements']),
    ...mapActions(ConcernementsStore,['loadContentTypeDefinition']),
    ...mapActions(UserStore,['checkUser']),
    parseMapitems() {
      console.log(`App parseMapitems`);
      this.mapitems = [];
      // 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)){
        concernement.mapitems_ids = [];
        // TODO check if more than 3 entities or if connected user if author
        if (concernement.entites.length > 3 || concernement.can_update) {
          // create the main mapitem object
          let mapitem = {
            id: concernement.id,
            cid: concernement.id,
            visible: concernement.visible,
            // concernement: concernement,
            // superposition_ids: [],
            superposition_cluster_index: -1,
            clone: false,
            concernements_loading_nb: this.concernements_loading_nb
          }
  
          // 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}`,
                  cid: concernement.id,
                  // concernement: concernement,
                  superposition_cluster_index: cluster_index,
                  clone: true
                };
                this.mapitems.push(mapitem_superposition);
                this.allMapItems_byid[mapitem_superposition.id] = mapitem_superposition;
                concernement.mapitems_ids.push(mapitem_superposition.id)
              }
            }
          }
          this.mapitems.push(mapitem)
          this.allMapItems_byid[mapitem.id] = mapitem;
          concernement.mapitems_ids.push(mapitem.id)
          
        }
      }
      console.log('App mapitems', this.mapitems);
      console.log('this.allMapItems_byid', this.allMapItems_byid);
      
    }
  },
  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.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>