catalog editor: load catalog, region, season data

catalogedit/views.py

@@ -7,7 +7,22 @@ from django.utils.translation import gettext as _
 from lazysignup.decorators import allow_lazy_user
 from account.decorators import login_required
 
+from procat2.models import Catalog, Season, Region
+
 
 @login_required
-def catalogedit(request):
-    return render(request, 'catalogedit/catalogedit.html')
+def catalogedit(request, id=0):
+    regions = Region.objects.order_by('ordering')
+    seasons = Season.objects.order_by('ordering')
+    context = {
+        'catalogID': id,
+        'regions': [r.serialize() for r in regions],
+        'seasons': [s.serialize() for s in seasons],
+    }
+    return render(request, 'catalogedit/catalogedit.html', context)
+
+
+@login_required
+def get_catalog(request, id):
+    cat = get_object_or_404(Catalog, id=id)
+    return JsonResponse(cat.data, safe=False)

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)
+      }
+    },
   }
 })

procat2/models.py

@@ -11,12 +11,26 @@ class Season(models.Model):
     name = models.CharField(max_length=100)
     ordering = models.PositiveIntegerField(unique=True, default=1000)
 
+    def serialize(self):
+        return {
+            'id': self.id,
+            'name': self.name,
+            'ordering': self.ordering,
+        }
+
 
 class Region(models.Model):
     id = models.CharField(max_length=30, primary_key=True)
     name = models.CharField(max_length=100)
     ordering = models.PositiveIntegerField(unique=True, default=1000)
 
+    def serialize(self):
+        return {
+            'id': self.id,
+            'name': self.name,
+            'ordering': self.ordering,
+        }
+
 
 def pretty_datetime(date):
     # Oct 16 2018 10:58 am

procat2/urls.py

@@ -21,7 +21,7 @@ from lazysignup.views import convert
 
 from dashboard.views import dashboard
 from cataloglist.views import cataloglist, my_catalogs, public_catalogs
-from catalogedit.views import catalogedit
+from catalogedit.views import catalogedit, get_catalog
 
 from .forms import UserCreationForm
 from .views import login_guest, lazy_convert_done
@@ -36,7 +36,9 @@ urlpatterns = [
     path('api/v1/catalogs/mine', my_catalogs, name='my_catalogs'),
     path('api/v1/catalogs/public', public_catalogs, name='public_catalogs'),
 
-    path('edit', catalogedit, name='catalogedit'),
+    path('catalog/new', catalogedit, name='catalogedit'),
+    path('catalog/edit/<int:id>', catalogedit, name='catalogedit'),
+    path('api/v1/catalogs/id/<int:id>', get_catalog, name='catalog'),
 
     path('admin/', admin.site.urls),
     path("account/", include("account.urls")),

templates/catalogedit/catalogedit.html

@@ -10,6 +10,9 @@
     <link href="{% static 'img/favicon.ico' %}" rel="shortcut icon" />
     <title>Django Vue Integration</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    {{ catalogID | json_script:"catalogID" }}
+    {{ regions | json_script:"regions" }}
+    {{ seasons | json_script:"seasons" }}
   </head>
   <body>
     <noscript>