enfrancais-app/src/pages/Map.vue

<template>
  <b-overlay :show="loading" rounded="sm" class="h-100">
    <div class="d-flex flex-column h-100 px-4 py-3">
      <div id="maps">
        <div>
          <h4>Carte avec duplication</h4>
          <div class="node-map">
            <node-map
              v-if="data"
              v-bind="mapSingle"
              :show-id="showId"
            />
          </div>
        </div>
        <div>
          <h4>Carte avec liens multiples</h4>
          <div class="node-map">
            <node-map
              v-if="data"
              v-bind="mapMany"
              :show-id="showId"
              id="map-2"
            />
          </div>
        </div>
      </div>

      <b-form class="mt-4">
        <b-form-group label="Texte de départ :" label-cols="2" class="mb-2">
          <b-form-select
            v-model="textId"
            @input="query"
            :options="textsDepartOptions"
          />
        </b-form-group>

        <b-form-group label="Profondeur :" label-cols="2" class="mb-2">
          <b-form-spinbutton
            v-model="depth"
            @input="query"
            min="0" max="6"
            inline
          />
        </b-form-group>

        <b-form-checkbox v-model="showId" name="check-button" switch>
          Afficher les numéros
        </b-form-checkbox>
      </b-form>
    </div>
  </b-overlay>
</template>

<script>
import { mapGetters } from 'vuex'

import NodeMap from '@/components/NodeMap'
import { toSingleManyData, toManyManyData } from '@/helpers/d3Data'


export default {
  name: 'Home',

  components: {
    NodeMap
  },

  data () {
    return {
      loading: false,
      textId: undefined,
      showId: true,
      depth: 3,
      data: null,
      mapSingle: { nodes: null, links: null },
      mapMany: { nodes: null, links: null }
    }
  },

  computed: {
    ...mapGetters(['textsDepartOptions'])
  },

  methods: {
    query () {
      const { textId: id, depth } = this
      this.data = null
      this.loading = true
      this.$store.dispatch('GET_TREE_WITH_DEPTH', { id, depth }).then((data) => {
        this.mapSingle = toSingleManyData(data)
        this.mapMany = toManyManyData(data)
        this.data = data
        this.loading = false
      })
    }
  },

  created () {
    this.loading = true
    this.$store.dispatch('GET_TEXTS_DEPART').then(textsDepart => {
      this.textId = textsDepart[0].id
    })
  }
}
</script>

<style lang="scss" scoped>
#maps {
  width: 100%;
  height: 100%;
  display: flex;

  & > div {
    flex-basis: 50%;
    display: flex;
    flex-direction: column;

    & + div .node-map {
      border-left: none;
    }
  }

  .node-map {
    height: 100%;
    border: 1px solid grey;
  }

}
.col > * {
  width: auto;
}
</style>