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>