catalog editor: load catalog, region, season data

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>