catalog editor: load catalog, region, season data

cateditor/src/components/CatalogEditor.vue

@@ -49,14 +49,18 @@ export default {
     CatalogContents
   },
   data: () => ({
-    /* seasons: [ 'SS19', 'FW19', 'SS20' ],
-     * regions: [ 'US', 'Canada', 'Mexico' ],
-     * season: null,
-     * region: null,
-     * name: null, */
-    /*         ispublic: true, */
-    step: 1
-  })
+    step: 1,
+  }),
+  mounted: function() {
+    // catalogID is set by django
+    // in a script block in our parent page.
+    var catalogID = JSON.parse(document.getElementById('catalogID').textContent)
+    if (catalogID > 0) {
+      this.$store.dispatch('loadCatalog', catalogID)
+    } else {
+      this.$store.dispatch('newCatalog')
+    }
+  }
 }
 </script>
 

cateditor/src/components/CatalogInfo.vue

@@ -4,10 +4,20 @@
 
       <v-layout row>
         <v-flex d-flex shrink>
-          <v-select :items="seasons" v-model="season" label="Season"></v-select>
+          <v-select
+            v-model="season"
+            :items="seasons"
+            item-value="id"
+            item-text="name"
+            label="Season"></v-select>
         </v-flex>
         <v-flex d-flex shrink>
-          <v-select :items="regions" v-model="region" label="Region"></v-select>
+          <v-select
+            v-model="region"
+            :items="regions"
+            item-value="id"
+            item-text="name"
+            label="Region"></v-select>
         </v-flex>
         <v-flex d-flex grow>
           <v-text-field v-model="name" label="Catalog name" required></v-text-field>
@@ -36,15 +46,36 @@
 </template>
 
 <script>
+var seasons = JSON.parse(document.getElementById('seasons').textContent)
+var regions = JSON.parse(document.getElementById('regions').textContent)
+
 export default {
   data: () => ({
-    seasons: [ 'SS19', 'FW19', 'SS20' ],
-    regions: [ 'US', 'Canada', 'Mexico' ],
-    season: null,
-    region: null,
+    seasons: seasons,
+    regions: regions,
     name: null,
     ispublic: true
-  })
+  }),
+  computed: {
+    season: {
+      get() {
+        return this.$store.getters.catalogSeason
+      },
+      set(season) {
+        this.$store.dispatch('setCatalogSeason', season)
+      }
+    },
+
+    region: {
+      get() {
+        return this.$store.getters.catalogRegion
+      },
+      set(region) {
+        this.$store.dispatch('setCatalogRegion', region)
+      }
+    },
+
+  },
 }
 </script>
 

cateditor/src/pages/editor/store/index.js

@@ -1,33 +1,12 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import axios from 'axios'
 
 Vue.use(Vuex)
 
 export const store = new Vuex.Store({
   state: {
-    catalog: {
-      name: 'my catalog',
-      owner: 12,
-      created: '2019-04-04T22:00:14Z',
-      sections: [
-        { id: 1,
-          name: 'Trailhead (Men)',
-          pages: [
-            [{ name: 'model name override', size: 2, ids: ['1001001', '1001002'] },
-             { size: 1, ids: ['1001011', '1001012'] }], // one page, two blocks
-            [{ size: 1,
-               ids: ['1001021', '1001022', '1001023', '1001024', '1001025',
-                     '1001026', '1001027', '1001028', '1001029'] }],
-          ],
-        },
-        { id: 2,
-          name: 'Waterfront (Men)',
-          pages: [
-            [{ size: 1, ids: ['1001021'] }],
-          ],
-        },
-      ],
-    },
+    catalog: null,
     materials: {
       '1001001': { id: '1001001', // call them sap maybe?
                    model: 'AW123',
@@ -99,6 +78,7 @@ export const store = new Vuex.Store({
     selectedFamilyID: null,
     selectedModelID: null,
     selectedMaterial: null,
+    loadingCatalog: true,
   },
   getters: {
     //
@@ -113,6 +93,23 @@ export const store = new Vuex.Store({
     CAT_SECTION: (state) => (id) => {
       return state.catalog.sections.find(s => s.id === id)
     },
+
+    catalogSeason(state) {
+      if (state.catalog != null) {
+        return state.catalog.season
+      } else {
+        return null
+      }
+    },
+
+    catalogRegion(state) {
+      if (state.catalog != null) {
+        return state.catalog.region
+      } else {
+        return null
+      }
+    },
+
     //
     // selection info
     //
@@ -137,6 +134,10 @@ export const store = new Vuex.Store({
     MATERIAL: (state) => (id) => {
       return state.materials[id]
     },
+
+    getLoadingCatalog(state) {
+      return state.loadingCatalog
+    },
   },
   mutations: {
     SET_CAT_SECTIONS: (state, payload) => {
@@ -165,6 +166,14 @@ export const store = new Vuex.Store({
     SET_SELECTED_MATERIAL_ID: (state, payload) => {
       state.selectedMaterial = payload
     },
+
+    setCatalog(state, cat) {
+      state.catalog = cat
+    },
+
+    setLoadingCatalog(state, value) {
+      state.loadingCatalog = value
+    },
   },
   actions: {
     SET_CAT_SECTIONS: (context, payload) => {
@@ -189,5 +198,25 @@ export const store = new Vuex.Store({
     //     let { data } = await Axios.post('http://yourwebsite.com/api/todo')
     //     context.commit('ADD_TODO',payload)
     //   },
+
+    async loadCatalog({ commit }, id) {
+      try {
+        commit('setLoadingCatalog', true)
+        const response = await axios.get('/api/v1/catalogs/id/' + id)
+        if ('catalog' in response.data) {
+          console.log('recieved catalog:', response.data.catalog)
+          commit('setCatalog', response.data.catalog)
+        } else {
+          console.log('no catalog')
+          commit('setCatalog', null)
+        }
+        commit('setLoadingCatalog', false)
+      } catch (error) {
+        // TODO set loading error property
+        console.error('error loading catalog: ', error)
+        commit('setCatalog', null)
+        commit('setLoadingCatalog', false)
+      }
+    },
   }
 })