vue make multipage app for catalog list

cateditor/src/components/CatalogList.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-btn color="primary">I am catalog list</v-btn>
+</template>
+
+<script>
+
+export default {
+  components: {
+  },
+  data: () => ({
+  })
+}
+</script>
+
+<style>
+
+</style>

cateditor/src/pages/editor/App.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-app>
+    <Navbar/>
+    <v-content>
+      <CatalogEditor/>
+      <!-- <AddProductDialog value/> -->
+    </v-content>
+  </v-app>
+</template>
+
+<script>
+import Navbar from '../../components/Navbar'
+import CatalogEditor from '../../components/CatalogEditor'
+/* import AddProductDialog from './components/AddProductDialog' */
+
+export default {
+  name: 'App',
+  components: {
+    Navbar,
+    CatalogEditor,
+    /*     AddProductDialog, */
+  },
+  data () {
+    return {
+      //
+    }
+  }
+}
+</script>
+
+<style>
+html { overflow-y: auto }
+</style>

cateditor/src/pages/editor/main.js

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import './../../plugins/vuetify'
+import Vue2Filters from 'vue2-filters'
+import App from './App.vue'
+import { store } from './store'
+import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
+
+Vue.config.productionTip = false
+Vue.use(Vue2Filters)
+
+new Vue({
+  store,
+  render: h => h(App)
+}).$mount('#app')

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

@@ -15,7 +15,9 @@ export const store = new Vuex.Store({
           pages: [
             [{ name: 'model name override', size: 2, ids: ['1001001', '1001002'] },
              { size: 1, ids: ['1001011', '1001012'] }], // one page, two blocks
-            [{ size: 1, ids: ['1001021'] }],
+            [{ size: 1,
+               ids: ['1001021', '1001022', '1001023', '1001024', '1001025',
+                     '1001026', '1001027', '1001028', '1001029'] }],
           ],
         },
         { id: 2,
@@ -52,6 +54,46 @@ export const store = new Vuex.Store({
                    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,

cateditor/src/pages/list/App.vue

@@ -2,20 +2,20 @@
   <v-app>
     <Navbar/>
     <v-content>
-      <CatalogEditor/>
+      <CatalogList/>
     </v-content>
   </v-app>
 </template>
 
 <script>
-import Navbar from './components/Navbar'
+import Navbar from '../../components/Navbar'
-import CatalogEditor from './components/CatalogEditor'
+import CatalogList from '../../components/CatalogList'
 
 export default {
   name: 'App',
   components: {
     Navbar,
-    CatalogEditor
+    CatalogList,
   },
   data () {
     return {

cateditor/src/pages/list/main.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import './plugins/vuetify'
+import '../../plugins/vuetify'
 import Vue2Filters from 'vue2-filters'
 import App from './App.vue'
 import { store } from './store'

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

@@ -0,0 +1,193 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+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'] }],
+          ],
+        },
+      ],
+    },
+    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,
+  },
+  getters: {
+    //
+    // catalog info
+    //
+    CAT_NAME: state => {
+      return state.catalog.name
+    },
+    CAT_SECTIONS: state => {
+      return state.catalog.sections
+    },
+    CAT_SECTION: (state) => (id) => {
+      return state.catalog.sections.find(s => s.id === id)
+    },
+    //
+    // selection info
+    //
+    SELECTED_SECTION_ID: state => {
+      return state.selectedSectionID
+    },
+    // SELECTED_SECTION: state => {
+    //   return store.getters.CAT_SECTION(state.selectedSectionID)
+    // },
+    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]
+    },
+  },
+  mutations: {
+    SET_CAT_SECTIONS: (state, payload) => {
+      state.catalog.sections = payload
+    },
+    SET_CAT_SECTION_NAME: (state, payload) => {
+      var section = state.catalog.sections.find(s => s.id === payload.id)
+      section.name = payload.name
+    },
+    SET_SELECTED_SECTION_ID: (state, payload) => {
+      state.selectedSectionID = payload
+      state.selectedFamilyID = null
+      state.selectedModelID = null
+      state.selectedMaterial = null
+    },
+    SET_SELECTED_FAMILY_ID: (state, payload) => {
+      state.selectedFamilyID = payload
+      state.selectedModelID = null
+      state.selectedMaterial = null
+    },
+    SET_SELECTED_MODEL_ID: (state, payload) => {
+      state.selectedModelID = payload
+      state.selectedFamilyID = null
+      state.selectedMaterial = null
+    },
+    SET_SELECTED_MATERIAL_ID: (state, payload) => {
+      state.selectedMaterial = payload
+    },
+  },
+  actions: {
+    SET_CAT_SECTIONS: (context, payload) => {
+      context.commit('SET_CAT_SECTIONS', payload)
+    },
+    SET_CAT_SECTION_NAME: (context, payload) => {
+      context.commit('SET_CAT_SECTION_NAME', payload)
+    },
+    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)
+    //   },
+  }
+})

cateditor/vue.config.js

@@ -42,6 +42,22 @@ module.exports = {
       .allowedHosts.add('newbeta.keen.apparentinc.com')
   },
 
+  pages: {
+    'editor': {
+      entry: './src/pages/editor/main.js',
+      template: 'public/index.html',
+      filename: 'editor.html',
+      //title: 'Catalog Editor',
+      //hunks: ['chunk-vendors', 'chunk-common', 'editor'],
+    },
+    'list': {
+      entry: './src/pages/list/main.js',
+      template: 'public/index.html',
+      filename: 'list.html',
+      //title: 'Catalog List',
+      //hunks: ['chunk-vendors', 'chunk-common', 'editor'],
+    },
+  }
   // devServer: {
   //   public: 'http://0.0.0.0:8001',
   //   host: '0.0.0.0',

templates/catalogedit/catalogedit.html

@@ -20,7 +20,7 @@
       <app></app>
     </div>
 
-    {% render_bundle 'app' %}
+    {% render_bundle 'editor' %}
 
     <!-- built files will be auto injected -->
 

templates/cataloglist/cataloglist.html

@@ -1,8 +1,28 @@
-{% extends 'base.html' %}
+{% load staticfiles %}
-{% load i18n %}
+{% load render_bundle from webpack_loader %}
 
-{% block title %}{% trans "Catalogs"%}{% endblock %}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <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">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
 
-{% block content %}
+    <div id="app">
+      <app></app>
+    </div>
 
-{% endblock %}
+    {% render_bundle 'list' %}
+
+    <!-- built files will be auto injected -->
+
+  </body>
+</html>