alx/procat2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

vue make multipage app for catalog list

Browse Source
This commit is contained in:
Seth Ladygo
2019-04-22 15:20:03 -07:00
parent 6d1af24a57
commit 5ef49bff51
10 changed files with 347 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
cateditor/src/components/CatalogList.vue Normal file
View File

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

33
cateditor/src/pages/editor/App.vue Normal file
View File

@ -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>

14
cateditor/src/pages/editor/main.js Normal file
View File

@ -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')

44
cateditor/src/store/index.js → cateditor/src/pages/editor/store/index.js
View File

@ -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,

8
cateditor/src/App.vue → cateditor/src/pages/list/App.vue
View File

@ -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 {

2
cateditor/src/main.js → cateditor/src/pages/list/main.js
View File

@ -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'

193
cateditor/src/pages/list/store/index.js Normal file
View File

@ -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)
// },
}
})

16
cateditor/vue.config.js
View File

@ -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',