muntadas-app/src/store/modules/projects.js

// import qs from 'querystring'
// import { REST } from 'api/rest-axios'
import { GRAPHQL } from 'api/graphql-axios'
import projectMod from 'store/modules/project'

export default {
  namespaced: true,

  // initial state
  state: {
    projects: [],
    marginBetweenBuildings: 5,
    totalW: 0
  },

  // getters
  getters: {
    totalW: (state) => {
      return state.totalW
    },
    marginBetweenBuildings: (state) => {
      return state.marginBetweenBuildings
    },
    projectID: (state) => (index) => {
      // console.log('getter projectID index', index)
      return state.projects[index].id
    }
  },

  // mutations
  mutations: {
    setProjects (state, projects) {
      // record the projects
      state.projects = projects
    },
    increaseTotalW (state, w) {
      state.totalW += w
    }
  },

  // actions
  actions: {
    // async load projects
    loadProjects ({ dispatch, commit, state }) {
      // GRAPHQL
      GRAPHQL.post('', { query: `query {
          projects(sort: "Weight:asc") {
            id
            Weight
            Titre
            Faces_opaques
          }
        }` })
        .then(({ data: { data: { projects } = null } }) => {
          console.log('graphql projects', projects)
          dispatch('computeProjects', projects)
        })
        .catch((error) => {
          console.warn('Issue with loadProjects', error)
          Promise.reject(error)
        })

      // REST
      // let params = {
      //   _sort: `weight:ASC`
      // }
      // let q = qs.stringify(params)
      // REST.get(`projects?` + q, {})
      //   .then(({ data }) => {
      //     console.log('projects getProjects REST: data', data)
      //     commit('setProjects', data)
      //   })
      //   .catch((error) => {
      //     console.warn('Issue with getProjects', error)
      //     Promise.reject(error)
      //   })
    },
    computeProjects ({ dispatch, commit, state }, projects) {
      console.log('computeProjects', this)
      // register a new module only if doesn't exist
      let name, size, w
      // console.log('state.marginBetweenBuildings', state.marginBetweenBuildings)
      // console.log('state.count', state.count)
      commit('increaseTotalW', state.marginBetweenBuildings * (projects.length - 1))
      // console.log('PROJECTS state.totalW', state.totalW)
      projects.forEach((project, i) => {
        name = `project:${project.id}`
        // convert to number the project id
        projects[i].id = parseInt(projects[i].id, 10)
        if (!(this.state && this.state[name])) {
          // Randomly Define the size and position of each building as here we need to know the totalW (not so clean)
          w = Math.round(21 + Math.random() * 15)
          // console.log('w', w)
          commit('increaseTotalW', w)
          size = {
            x: w,
            y: Math.round(110 + Math.random() * 100),
            z: Math.round(10 + Math.random() * 30)
          }
          // convert to number the project id
          project.id = parseInt(project.id, 10)
          // fill the dynamic store module with data
          // merge default sate with loaded data, with calculated size, with index
          projectMod.state = { ...projectMod.state, ...project, size: size, index: i }
          // register the module
          this.registerModule(name, projectMod)
        } else {
          // re-use the already existing module
          console.log(`reusing module project:${project.id}`)
        }
      })

      // record loaded projects
      commit('setProjects', projects)

      // init each dynamic modules
      state.projects.forEach((project, i) => {
        dispatch(`project:${project.id}/init`, null, { root: true })
      })
    }
  }

}