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

cateditor: allow selecting sections and models

Browse Source
This commit is contained in:
Seth Ladygo
2019-05-11 02:24:43 -07:00
parent 26a03fc63f
commit e902aa524a
2 changed files with 134 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
cateditor/src/components/CatalogContents.vue
View File

@ -9,36 +9,24 @@
<v-layout row fill-height>
<v-flex xs3>
<v-card>
<v-toolbar dense>
<v-toolbar-title>Sections</v-toolbar-title>
</v-toolbar>
<v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
Sections
</v-card>
<div id="sections" class="list-group">
<v-list-tile
v-for="item in sections"
:key="item.id"
class="v-list__tile list-group-item list-item"
v-bind:class="{'selected': selected === item}"
>
<v-list-tile-content class="section-parent">
<v-list-tile-title v-html="item.name"></v-list-tile-title>
<v-list-tile-sub-title class="section-drop" :section-id="item.id"></v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</div>
</v-card>
</v-flex>
<v-flex xs3>
<v-card>
<v-toolbar dense>
<v-toolbar-title>Models</v-toolbar-title>
</v-toolbar>
<div id="models" class="list-group">
<div v-for="item in selectedModels" :key="item.model" class="v-list__tile list-item">
<v-list-tile-title v-html="item.name"></v-list-tile-title>
<div v-for="item in sections" :key="item.id">
<v-hover :key="item.id">
<v-list-tile
slot-scope="{ hover }"
:class="sectionListItemClasses(item.id, hover)"
@click="selectSection(item.id)"
>
<v-list-tile-content class="section-parent">
<v-list-tile-title v-html="item.name"></v-list-tile-title>
<v-list-tile-sub-title class="section-drop" :section-id="item.id"></v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</v-hover>
</div>
</div>
</v-card>
@ -46,17 +34,42 @@
<v-flex xs3>
<v-card>
<v-toolbar dense>
<v-toolbar-title>Materials</v-toolbar-title>
</v-toolbar>
<v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
Models
</v-card>
<div id="models" class="list-group">
<div v-for="item in selectedModels" :key="item.model">
<v-hover :key="item.model">
<v-list-tile
slot-scope="{ hover }"
:class="modelListItemClasses(item.model, hover)"
@click="selectModel(item.model)"
>
<v-list-tile-title v-html="item.name"></v-list-tile-title>
</v-list-tile>
</v-hover>
</div>
</div>
</v-card>
</v-flex>
<v-flex xs3>
<v-card>
<v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
Materials
</v-card>
<div id="materials" class="list-group">
<div
v-for="item in selectedMaterials"
:key="item.id"
class="v-list__tile list-item"
>
<v-list-tile-title v-html="item.id"></v-list-tile-title>
<div v-for="item in selectedMaterials" :key="item.id">
<v-hover :key="item.id">
<v-list-tile
slot-scope="{ hover }"
:class="materialListItemClasses(item.id, hover)"
>
<v-list-tile-title v-html="item.id"></v-list-tile-title>
</v-list-tile>
</v-hover>
</div>
</div>
</v-card>
@ -94,6 +107,8 @@ export default {
...mapState([
'catalog',
'materials',
'selectedSectionID',
'selectedModelID',
]),
...mapGetters([
'section',
@ -113,15 +128,46 @@ export default {
return this.modelMaterials(model)
},
},
/*
watch: {
catalog: function(cat) {
console.log('catalog changed')
addSectionDrops(this)
},
},
*/
methods: {
selectSection: function(id) {
console.log('select section', id)
this.$store.dispatch('selectSection', id)
},
selectModel: function(id) {
console.log('select model', id)
this.$store.dispatch('selectModel', id)
},
sectionListItemClasses: function(id, hovering) {
if (id === this.selectedSectionID) {
return 'list-item primary'
} else if (hovering) {
return 'list-item grey lighten-4'
} else {
return ''
}
},
modelListItemClasses: function(id, hovering) {
if (id === this.selectedModelID) {
return 'list-item primary'
} else if (hovering) {
return 'list-item grey lighten-4'
} else {
return 'list-item'
}
},
materialListItemClasses: function(id, hovering) {
if (hovering) {
return 'list-item grey lighten-4'
} else {
return 'list-item'
}
},
reorderModel: function(fromIndex, toIndex) {
let models = this.selectedModels
arrayMove.mutate(models, fromIndex, toIndex)
@ -303,6 +349,6 @@ function addSectionDrops(myvue) {
}
.list-item {
border-bottom: 1px solid #ddd;
//border-bottom: 1px solid #ddd;
}
</style>

50
cateditor/src/pages/editor/store/index.js
View File

@ -77,7 +77,7 @@ export const store = new Vuex.Store({
color: 'Yellow / Blue' },
},
selectedSectionID: null,
selectedFamilyID: null,
//selectedFamilyID: null,
selectedModelID: null,
selectedMaterial: null,
loadingCatalog: false,
@ -100,24 +100,26 @@ export const store = new Vuex.Store({
},
section: (state) => (id) => {
if (state.catalog != null) {
if (state.catalog && id) {
return state.catalog.sections.find(s => s.id === id)
} else {
return null
}
},
selectedSection: state => {
if (state.catalog != null) {
return state.catalog.sections[0]
selectedSection: (state, getters) => {
if (state.catalog && state.selectedSectionID) {
return getters.section(state.selectedSectionID)
} else {
return null
}
},
selectedModel: state => {
if (state.catalog != null) {
return state.catalog.sections[0].pages[0][0]
selectedModel: (state, getters) => {
if (state.catalog && state.selectedModelID) {
let section = getters.selectedSection
let models = getters.sectionModels(section)
return models.find(s => s.model === state.selectedModelID)
} else {
return null
}
@ -218,6 +220,22 @@ export const store = new Vuex.Store({
},
},
mutations: {
//
// selection
//
selectSection(state, id) {
state.selectedSectionID = id
},
selectModel(state, id) {
state.selectedModelID = id
},
//
// manipulation
//
reorderSection(state, { from, to }) {
if (from === to) return
state.catalog.sections = arrayMove(state.catalog.sections, from, to)
@ -283,6 +301,22 @@ export const store = new Vuex.Store({
},
actions: {
//
// selection
//
selectSection(context, id) {
context.commit('selectSection', id)
},
selectModel(context, id) {
context.commit('selectModel', id)
},
//
// manipulation
//
reorderSection({ commit }, payload) {
commit('reorderSection', payload)
},