tie catalog info ui to vuex catalog data

This commit is contained in:
Seth Ladygo
2019-05-03 00:03:12 -07:00
parent 732159f055
commit 1ed6b4f24b
2 changed files with 138 additions and 89 deletions

View File

@ -25,17 +25,18 @@
</v-layout>
<v-layout row>
<!-- TODO only if admin! -->
<v-flex d-flex shrink>
<v-checkbox v-model="ispublic" label="Public"></v-checkbox>
<v-checkbox v-model="master" label="Region master"></v-checkbox>
</v-flex>
<v-flex d-flex shrink>
<v-checkbox v-model="ispublic" label="Show prices"></v-checkbox>
<v-checkbox v-model="isPublic" label="Public"></v-checkbox>
</v-flex>
<v-flex d-flex shrink>
<v-checkbox v-model="ispublic" label="Region master"></v-checkbox>
<v-checkbox v-model="prices" label="Show prices"></v-checkbox>
</v-flex>
<v-flex d-flex shrink>
<v-checkbox v-model="ispublic" label="I forget"></v-checkbox>
<v-checkbox v-model="utility" label="Is Utility?"></v-checkbox>
</v-flex>
</v-layout>
@ -53,25 +54,68 @@ export default {
data: () => ({
seasons: seasons,
regions: regions,
name: null,
ispublic: true
}),
computed: {
name: {
get() {
return this.$store.getters.catalogProperty('name')
},
set(name) {
this.$store.dispatch('setCatalogProperty', { key: 'name', value: name })
}
},
season: {
get() {
return this.$store.getters.catalogSeason
return this.$store.getters.catalogProperty('season')
},
set(season) {
this.$store.dispatch('setCatalogSeason', season)
this.$store.dispatch('setCatalogProperty', { key: 'season', value: season })
}
},
region: {
get() {
return this.$store.getters.catalogRegion
return this.$store.getters.catalogProperty('region')
},
set(region) {
this.$store.dispatch('setCatalogRegion', region)
this.$store.dispatch('setCatalogProperty', { key: 'region', value: region })
}
},
master: {
get() {
return this.$store.getters.catalogProperty('master')
},
set(master) {
this.$store.dispatch('setCatalogProperty', { key: 'master', value: master })
}
},
isPublic: {
get() {
return this.$store.getters.catalogProperty('public')
},
set(isPublic) {
this.$store.dispatch('setCatalogProperty', { key: 'public', value: isPublic })
}
},
prices: {
get() {
return this.$store.getters.catalogProperty('show_prices')
},
set(showPrices) {
this.$store.dispatch('setCatalogProperty', { key: 'show_prices', value: showPrices })
}
},
utility: {
get() {
return this.$store.getters.catalogProperty('is_utility')
},
set(isUtility) {
this.$store.dispatch('setCatalogProperty', { key: 'is_utility', value: isUtility })
}
},

View File

@ -84,27 +84,19 @@ export const store = new Vuex.Store({
//
// 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)
},
// 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)
// },
catalogSeason(state) {
catalogProperty: (state) => (key) => {
if (state.catalog != null) {
return state.catalog.season
} else {
return null
}
},
catalogRegion(state) {
if (state.catalog != null) {
return state.catalog.region
return state.catalog[key]
} else {
return null
}
@ -113,59 +105,59 @@ export const store = new Vuex.Store({
//
// selection info
//
SELECTED_SECTION_ID: state => {
return state.selectedSectionID
},
// 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
},
// 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]
},
// MATERIAL: (state) => (id) => {
// return state.materials[id]
// },
getLoadingCatalog(state) {
loadingCatalog(state) {
return state.loadingCatalog
},
},
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
},
// 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
// },
setCatalog(state, cat) {
state.catalog = cat
@ -174,26 +166,34 @@ export const store = new Vuex.Store({
setLoadingCatalog(state, value) {
state.loadingCatalog = value
},
setCatalogProperty(state, { key, value }) {
console.log('mutation set prop', key, value)
if (state.catalog) {
state.catalog[key] = value
}
},
},
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)
},
// 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)
@ -218,5 +218,10 @@ export const store = new Vuex.Store({
commit('setLoadingCatalog', false)
}
},
setCatalogProperty(context, data) {
context.commit('setCatalogProperty', data)
},
}
})