catalog list: get 'my catalogs' somewhat working

cataloglist/views.py

@@ -1,13 +1,25 @@
-from django.contrib import messages
+#from django.contrib import messages
+from django.core import serializers
 from django.http import HttpResponseRedirect, HttpResponse, JsonResponse
 from django.shortcuts import render, get_object_or_404
-from django.urls import reverse
-from django.utils.translation import gettext as _
+#from django.urls import reverse
+#from django.utils.translation import gettext as _
 
-from lazysignup.decorators import allow_lazy_user
+#from lazysignup.decorators import allow_lazy_user
 from account.decorators import login_required
 
+from procat2.models import Catalog
+
 
 @login_required
 def cataloglist(request):
     return render(request, 'cataloglist/cataloglist.html')
+
+
+@login_required
+def my_catalogs(request):
+    cats = Catalog.objects.filter(owner=request.user).order_by('-updated')
+    data = [c.summary() for c in cats]
+    # from time import sleep
+    # sleep(5)
+    return JsonResponse({'catalogs': data})

cateditor/src/components/CatalogList.vue

@@ -1,5 +1,81 @@
 <template>
-  <v-btn color="primary">I am catalog list</v-btn>
+  <v-container fluid grid-list-lg>
+    <v-layout row>
+      <v-flex xs3>
+        <v-btn color="primary">New Catalog</v-btn>
+      </v-flex>
+      <v-flex xs9>
+      </v-flex>
+    </v-layout>
+
+    <v-layout row>
+      <v-flex xs7>
+
+        <v-card class="pa-2">
+          <v-tabs v-model="activeTab">
+            <v-tab key="mine">My Catalogs</v-tab>
+            <v-tab key="public">Public Catalogs</v-tab>
+
+            <v-tab-item key="mine">
+              <v-card flat>
+
+                <v-card-title>
+                  <v-spacer></v-spacer>
+                  <v-text-field
+                    v-model="search"
+                    append-icon="search"
+                    label="Search"
+                    single-line
+                    hide-details
+                  ></v-text-field>
+                </v-card-title>
+
+                <v-data-table
+                  :headers="headers"
+                  :items="myCatalogs"
+                  :search="search"
+                  :loading="loadingMyCatalogs"
+                  disable-initial-sort
+                  class="scroll-area"
+                >
+                  <template v-slot:items="cats">
+                    <tr @click="selectCatalog(cats.item.id)">
+                      <td>{{ cats.item.seasonCode }}</td>
+                      <td>{{ cats.item.name }}</td>
+                      <td>{{ cats.item.updatedPretty }}</td>
+                    </tr>
+                  </template>
+
+                  <template v-slot:no-results>
+                    No catalogs match "{{ search }}"
+                  </template>
+
+                  <template v-slot:no-data>
+                    No Catalogs
+                  </template>
+                </v-data-table>
+
+              </v-card>
+            </v-tab-item>
+
+            <v-tab-item key="public">
+              <v-card flat>
+                <v-card-text>public</v-card-text>
+              </v-card>
+            </v-tab-item>
+          </v-tabs>
+        </v-card>
+
+      </v-flex>
+
+      <v-flex xs5>
+        <v-card>
+          <v-card-text>{{ getSelectedCatalog }} </v-card-text>
+        </v-card>
+      </v-flex>
+    </v-layout>
+
+  </v-container>
 </template>
 
 <script>
@@ -8,10 +84,56 @@ export default {
   components: {
   },
   data: () => ({
-  })
+    activeTab: null,
+    search: '',
+    headers: [
+      {
+        text: 'Season',
+        align: 'left',
+        value: 'seasonCode'
+      },
+      {
+        text: 'Name',
+        align: 'left',
+        value: 'name'
+      },
+      {
+        text: 'Updated',
+        value: 'updated'
+      },
+    ],
+  }),
+  computed: {
+    myCatalogs() {
+      return this.$store.getters.getMyCatalogs
+    },
+    loadingMyCatalogs() {
+      return this.$store.getters.getLoadingMyCatalogs
+    },
+    publicCatalogs() {
+      return this.$store.getters.getPublicCatalogs
+    },
+    loadingPublicCatalogs() {
+      return this.$store.getters.getLoadingPublicCatalogs
+    },
+    getSelectedCatalog() {
+      return this.$store.getters.getSelectedCatalog
+    },
+  },
+  methods: {
+    selectCatalog: function(id) {
+      this.$store.dispatch('setSelectedCatalog', id)
+    }
+  },
+  mounted: function() {
+    this.$store.dispatch('loadMyCatalogs')
+  }
 }
 </script>
 
-<style>
-
+<style scoped>
+.scroll-area {
+  height: 300px;
+  overflow-y: auto;
+}
 </style>

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

@@ -1,193 +1,100 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import axios from 'axios'
 
 Vue.use(Vuex)
 
 export const store = new Vuex.Store({
+  // strict: true,  // not in production
+
   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'] }],
-          ],
-        },
-      ],
-    },
-    materials: {
-      '1001001': { id: '1001001', // call them sap maybe?
-                   model: 'AW123',
-                   family: 'MF123',
-                   name: 'Targhee WP',
-                   color: 'Green / Blue' },
-      '1001002': { id: '1001002',
-                   model: 'AW123',
-                   family: 'MF123',
-                   name: 'Targhee WP',
-                   color: 'Red / Purple' },
-      '1001011': { id: '1001011',
-                   model: 'WA999',
-                   family: 'MF123',
-                   name: 'Targhee WP FA',
-                   color: 'Green / Blue' },
-      '1001012': { id: '1001012',
-                   model: 'WA999',
-                   family: 'MF123',
-                   name: 'Targhee WP FA',
-                   color: 'Green / Blue' },
-      '1001021': { id: '1001021',
-                   model: 'BBB22',
-                   family: 'BBBMF',
-                   name: 'Slither',
-                   color: 'Green / Blue' },
-      '1001022': { id: '1001022',
-                   model: 'BBB22',
-                   family: 'BBBMF',
-                   name: 'Slither',
-                   color: 'Red / Blue' },
-      '1001023': { id: '1001023',
-                   model: 'BBB22',
-                   family: 'BBBMF',
-                   name: 'Slither',
-                   color: 'Blue / Green' },
-      '1001024': { id: '1001024',
-                   model: 'BBB22',
-                   family: 'BBBMF',
-                   name: 'Slither',
-                   color: 'Red / Green' },
-      '1001025': { id: '1001025',
-                   model: 'BBB22',
-                   family: 'BBBMF',
-                   name: 'Slither',
-                   color: 'Orange / Blue' },
-      '1001026': { id: '1001026',
-                   model: 'BBB22',
-                   family: 'BBBMF',
-                   name: 'Slither',
-                   color: 'Yellow / Blue' },
-      '1001027': { id: '1001027',
-                   model: 'BBB22',
-                   family: 'BBBMF',
-                   name: 'Slither',
-                   color: 'Yellow / Blue' },
-      '1001028': { id: '1001028',
-                   model: 'BBB22',
-                   family: 'BBBMF',
-                   name: 'Slither',
-                   color: 'Yellow / Blue' },
-      '1001029': { id: '1001029',
-                   model: 'BBB22',
-                   family: 'BBBMF',
-                   name: 'Slither',
-                   color: 'Yellow / Blue' },
-    },
-    selectedSectionID: null,
-    selectedFamilyID: null,
-    selectedModelID: null,
-    selectedMaterial: null,
+    myCatalogs: [],
+    publicCatalogs: [],
+    loadingMyCatalogs: true,
+    loadingPublicCatalogs: true,
+    selectedCatalog: null,
   },
+
   getters: {
-    //
-    // catalog info
-    //
-    CAT_NAME: state => {
-      return state.catalog.name
+    getMyCatalogs(state) {
+      return state.myCatalogs
     },
-    CAT_SECTIONS: state => {
-      return state.catalog.sections
+    getLoadingMyCatalogs(state) {
+      return state.loadingMyCatalogs
     },
-    CAT_SECTION: (state) => (id) => {
-      return state.catalog.sections.find(s => s.id === id)
+    getPublicCatalogs(state) {
+      return state.publicCatalogs
     },
-    //
-    // selection info
-    //
-    SELECTED_SECTION_ID: state => {
-      return state.selectedSectionID
+    getLoadingPublicCatalogs(state) {
+      return state.loadingPublicCatalogs
     },
-    // SELECTED_SECTION: state => {
-    //   return store.getters.CAT_SECTION(state.selectedSectionID)
+    getSelectedCatalog(state) {
+      return state.selectedCatalog
+    },
+    // findCatalog(state) {
+    //   return function(id) {
+    //     let cat = state.myCatalogs.find(c => c.id === id)
+    //     if (cat !== undefined) {
+    //       return cat
+    //     } else {
+    //       return state.publicCatalogs.find(c => c.id === id)
+    //     }
+    //   }
     // },
-    SELECTED_FAMILY_ID: state => {
-      return state.selectedFamilyID
-    },
-    SELECTED_MODEL_ID: state => {
-      return state.selectedModelID
-    },
-    SELECTED_MATERIAL_ID: state => {
-      return state.selectedMaterial
-    },
-    //
-    // material info
-    //
-    MATERIAL: (state) => (id) => {
-      return state.materials[id]
+    findCatalog: (state) => (id) => {
+      let cat = state.myCatalogs.find(c => c.id === id)
+      if (cat !== undefined) {
+        return cat
+      } else {
+        return state.publicCatalogs.find(c => c.id === id)
+      }
     },
+    // CAT_SECTION: (state) => (id) => {
+    //   return state.catalog.sections.find(s => s.id === id)
+    // },
   },
+
   mutations: {
-    SET_CAT_SECTIONS: (state, payload) => {
-      state.catalog.sections = payload
+    setMyCatalogs(state, cats) {
+      state.myCatalogs = cats
     },
-    SET_CAT_SECTION_NAME: (state, payload) => {
-      var section = state.catalog.sections.find(s => s.id === payload.id)
-      section.name = payload.name
+    setLoadingMyCatalogs(state, value) {
+      state.loadingMyCatalogs = value
     },
-    SET_SELECTED_SECTION_ID: (state, payload) => {
-      state.selectedSectionID = payload
-      state.selectedFamilyID = null
-      state.selectedModelID = null
-      state.selectedMaterial = null
+    setPublicCatalogs(state, cats) {
+      state.publicCatalogs = cats
     },
-    SET_SELECTED_FAMILY_ID: (state, payload) => {
-      state.selectedFamilyID = payload
-      state.selectedModelID = null
-      state.selectedMaterial = null
+    setLoadingPublicCatalogs(state, value) {
+      state.loadingPublicCatalogs = value
     },
-    SET_SELECTED_MODEL_ID: (state, payload) => {
-      state.selectedModelID = payload
-      state.selectedFamilyID = null
-      state.selectedMaterial = null
-    },
-    SET_SELECTED_MATERIAL_ID: (state, payload) => {
-      state.selectedMaterial = payload
+    setSelectedCatalog(state, cat) {
+      state.selectedCatalog = cat
     },
   },
+
   actions: {
-    SET_CAT_SECTIONS: (context, payload) => {
-      context.commit('SET_CAT_SECTIONS', payload)
+    async loadMyCatalogs({ commit }) {
+      try {
+        commit('setLoadingMyCatalogs', true)
+        const response = await axios.get('/api/v1/catalogs/mine')
+        if ('catalogs' in response.data) {
+          // console.log('recieved catalogs:', response.data.catalogs)
+          commit('setMyCatalogs', response.data.catalogs)
+        } else {
+          // console.log('no catalogs')
+          commit('setMyCatalogs', [])
+        }
+        commit('setLoadingMyCatalogs', false)
+      } catch (error) {
+        // TODO set loading error property
+        console.error(error)
+        commit('setMyCatalogs', [])
+        commit('setLoadingMyCatalogs', false)
+      }
     },
-    SET_CAT_SECTION_NAME: (context, payload) => {
-      context.commit('SET_CAT_SECTION_NAME', payload)
+    setSelectedCatalog(context, id) {
+      let cat = context.getters.findCatalog(id)
+      context.commit('setSelectedCatalog', cat)
     },
-    SET_SELECTED_SECTION_ID: (context, payload) => {
-      context.commit('SET_SELECTED_SECTION_ID', payload)
-    },
-    SET_SELECTED_FAMILY_ID: (context, payload) => {
-      context.commit('SET_SELECTED_FAMILY_ID', payload)
-    },
-    SET_SELECTED_MODEL_ID: (context, payload) => {
-      context.commit('SET_SELECTED_MODEL_ID', payload)
-    },
-    SET_SELECTED_MATERIAL_ID: (context, payload) => {
-      context.commit('SET_SELECTED_MATERIAL_ID', payload)
-    },
-    //   SAVE_TODO : async (context,payload) => {
-    //     let { data } = await Axios.post('http://yourwebsite.com/api/todo')
-    //     context.commit('ADD_TODO',payload)
-    //   },
-  }
+  },
 })

procat2/models.py

@@ -1,6 +1,7 @@
 from django.db import models
 from django.conf import settings
 from django.contrib.postgres.fields import JSONField
+import datetime
 
 
 class Season(models.Model):
@@ -15,6 +16,15 @@ class Region(models.Model):
     ordering = models.PositiveIntegerField(unique=True, default=1000)
 
 
+def pretty_datetime(date):
+    # Oct 16 2018 10:58 am
+    return "{:%b %-d %Y, %-I:%M %p}".format(date)
+
+
+def unix_datetime(date):
+    return date.timestamp()
+
+
 class Catalog(models.Model):
     owner = models.ForeignKey(settings.AUTH_USER_MODEL,
                               on_delete=models.CASCADE)
@@ -31,3 +41,20 @@ class Catalog(models.Model):
 
     # JSONField docs:
     # https://docs.djangoproject.com/en/2.2/ref/contrib/postgres/fields/#jsonfield
+
+    def summary(self):
+        return {
+            'id': self.id,
+            'seasonCode': self.season.id,
+            'regionCode': self.region.id,
+            'name': self.name,
+            'ownerName': self.owner.get_full_name(),
+            'public': self.public,
+            'updated': unix_datetime(self.updated),
+            'updatedPretty': pretty_datetime(self.updated),
+            'created': unix_datetime(self.created),
+            'createdPretty': pretty_datetime(self.created),
+            'pages': self.pages,
+            'sections': self.sections,
+            'materials': self.materials,
+        }

procat2/urls.py

@@ -20,7 +20,7 @@ from django.conf import settings
 from lazysignup.views import convert
 
 from dashboard.views import dashboard
-from cataloglist.views import cataloglist
+from cataloglist.views import cataloglist, my_catalogs, public_catalogs
 from catalogedit.views import catalogedit
 
 from .forms import UserCreationForm
@@ -31,8 +31,12 @@ urlpatterns = [
     path('guest', login_guest, name='login_guest'),
     path('', dashboard, name='home'),
     path('dashboard', dashboard, name='dashboard'),
+
     path('catalogs', cataloglist, name='cataloglist'),
+    path('api/v1/catalogs/mine', my_catalogs, name='my_catalogs'),
+
     path('edit', catalogedit, name='catalogedit'),
+
     path('admin/', admin.site.urls),
     path("account/", include("account.urls")),
     path('convert/', convert, { 'form_class': UserCreationForm }, name='lazysignup_convert'),