From 5ef49bff5128ced5d21610c7948d66460f5c6ab0 Mon Sep 17 00:00:00 2001
From: Seth Ladygo <alx-git@apparentinc.com>
Date: Mon, 22 Apr 2019 15:20:03 -0700
Subject: [PATCH] vue make multipage app for catalog list

---
 cateditor/src/components/CatalogList.vue      |  17 ++
 cateditor/src/pages/editor/App.vue            |  33 +++
 cateditor/src/pages/editor/main.js            |  14 ++
 .../src/{ => pages/editor}/store/index.js     |  44 +++-
 cateditor/src/{ => pages/list}/App.vue        |   8 +-
 cateditor/src/{ => pages/list}/main.js        |   2 +-
 cateditor/src/pages/list/store/index.js       | 193 ++++++++++++++++++
 cateditor/vue.config.js                       |  16 ++
 templates/catalogedit/catalogedit.html        |   2 +-
 templates/cataloglist/cataloglist.html        |  30 ++-
 10 files changed, 347 insertions(+), 12 deletions(-)
 create mode 100644 cateditor/src/components/CatalogList.vue
 create mode 100644 cateditor/src/pages/editor/App.vue
 create mode 100644 cateditor/src/pages/editor/main.js
 rename cateditor/src/{ => pages/editor}/store/index.js (72%)
 rename cateditor/src/{ => pages/list}/App.vue (65%)
 rename cateditor/src/{ => pages/list}/main.js (91%)
 create mode 100644 cateditor/src/pages/list/store/index.js

diff --git a/cateditor/src/components/CatalogList.vue b/cateditor/src/components/CatalogList.vue
new file mode 100644
index 0000000..d8eb937
--- /dev/null
+++ b/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>
diff --git a/cateditor/src/pages/editor/App.vue b/cateditor/src/pages/editor/App.vue
new file mode 100644
index 0000000..26d8e04
--- /dev/null
+++ b/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>
diff --git a/cateditor/src/pages/editor/main.js b/cateditor/src/pages/editor/main.js
new file mode 100644
index 0000000..5062007
--- /dev/null
+++ b/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')
diff --git a/cateditor/src/store/index.js b/cateditor/src/pages/editor/store/index.js
similarity index 72%
rename from cateditor/src/store/index.js
rename to cateditor/src/pages/editor/store/index.js
index d58cdb1..fe7e2f3 100644
--- a/cateditor/src/store/index.js
+++ b/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,
diff --git a/cateditor/src/App.vue b/cateditor/src/pages/list/App.vue
similarity index 65%
rename from cateditor/src/App.vue
rename to cateditor/src/pages/list/App.vue
index a45e964..58494c0 100644
--- a/cateditor/src/App.vue
+++ b/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 CatalogEditor from './components/CatalogEditor'
+import Navbar from '../../components/Navbar'
+import CatalogList from '../../components/CatalogList'
 
 export default {
   name: 'App',
   components: {
     Navbar,
-    CatalogEditor
+    CatalogList,
   },
   data () {
     return {
diff --git a/cateditor/src/main.js b/cateditor/src/pages/list/main.js
similarity index 91%
rename from cateditor/src/main.js
rename to cateditor/src/pages/list/main.js
index 9aca3b6..4520dfc 100644
--- a/cateditor/src/main.js
+++ b/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'
diff --git a/cateditor/src/pages/list/store/index.js b/cateditor/src/pages/list/store/index.js
new file mode 100644
index 0000000..fe7e2f3
--- /dev/null
+++ b/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)
+    //   },
+  }
+})
diff --git a/cateditor/vue.config.js b/cateditor/vue.config.js
index ec61817..8618310 100644
--- a/cateditor/vue.config.js
+++ b/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',
diff --git a/templates/catalogedit/catalogedit.html b/templates/catalogedit/catalogedit.html
index d52edff..97eafe5 100644
--- a/templates/catalogedit/catalogedit.html
+++ b/templates/catalogedit/catalogedit.html
@@ -20,7 +20,7 @@
       <app></app>
     </div>
 
-    {% render_bundle 'app' %}
+    {% render_bundle 'editor' %}
 
     <!-- built files will be auto injected -->
 
diff --git a/templates/cataloglist/cataloglist.html b/templates/cataloglist/cataloglist.html
index 8f31872..2ec7922 100644
--- a/templates/cataloglist/cataloglist.html
+++ b/templates/cataloglist/cataloglist.html
@@ -1,8 +1,28 @@
-{% extends 'base.html' %}
-{% load i18n %}
+{% load staticfiles %}
+{% 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>