tie catalog info ui to vuex catalog data

cateditor/src/components/CatalogInfo.vue

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

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

@@ -84,27 +84,19 @@ export const store = new Vuex.Store({
     //
     // catalog info
     //
-    CAT_NAME: state => {
+    // CAT_NAME: state => {
-      return state.catalog.name
+    //   return state.catalog.name
-    },
+    // },
-    CAT_SECTIONS: state => {
+    // CAT_SECTIONS: state => {
-      return state.catalog.sections
+    //   return state.catalog.sections
-    },
+    // },
-    CAT_SECTION: (state) => (id) => {
+    // CAT_SECTION: (state) => (id) => {
-      return state.catalog.sections.find(s => s.id === id)
+    //   return state.catalog.sections.find(s => s.id === id)
-    },
+    // },
 
-    catalogSeason(state) {
+    catalogProperty: (state) => (key) => {
       if (state.catalog != null) {
-        return state.catalog.season
+        return state.catalog[key]
-      } else {
-        return null
-      }
-    },
-
-    catalogRegion(state) {
-      if (state.catalog != null) {
-        return state.catalog.region
       } else {
         return null
       }
@@ -113,59 +105,59 @@ export const store = new Vuex.Store({
     //
     // selection info
     //
-    SELECTED_SECTION_ID: state => {
+    // SELECTED_SECTION_ID: state => {
-      return state.selectedSectionID
+    //   return state.selectedSectionID
-    },
+    // },
     // SELECTED_SECTION: state => {
     //   return store.getters.CAT_SECTION(state.selectedSectionID)
     // },
-    SELECTED_FAMILY_ID: state => {
+    // SELECTED_FAMILY_ID: state => {
-      return state.selectedFamilyID
+    //   return state.selectedFamilyID
-    },
+    // },
-    SELECTED_MODEL_ID: state => {
+    // SELECTED_MODEL_ID: state => {
-      return state.selectedModelID
+    //   return state.selectedModelID
-    },
+    // },
-    SELECTED_MATERIAL_ID: state => {
+    // SELECTED_MATERIAL_ID: state => {
-      return state.selectedMaterial
+    //   return state.selectedMaterial
-    },
+    // },
     //
     // material info
     //
-    MATERIAL: (state) => (id) => {
+    // MATERIAL: (state) => (id) => {
-      return state.materials[id]
+    //   return state.materials[id]
-    },
+    // },
 
-    getLoadingCatalog(state) {
+    loadingCatalog(state) {
       return state.loadingCatalog
     },
   },
   mutations: {
-    SET_CAT_SECTIONS: (state, payload) => {
+    // SET_CAT_SECTIONS: (state, payload) => {
-      state.catalog.sections = payload
+    //   state.catalog.sections = payload
-    },
+    // },
-    SET_CAT_SECTION_NAME: (state, payload) => {
+    // SET_CAT_SECTION_NAME: (state, payload) => {
-      var section = state.catalog.sections.find(s => s.id === payload.id)
+    //   var section = state.catalog.sections.find(s => s.id === payload.id)
-      section.name = payload.name
+    //   section.name = payload.name
-    },
+    // },
-    SET_SELECTED_SECTION_ID: (state, payload) => {
+    // SET_SELECTED_SECTION_ID: (state, payload) => {
-      state.selectedSectionID = payload
+    //   state.selectedSectionID = payload
-      state.selectedFamilyID = null
+    //   state.selectedFamilyID = null
-      state.selectedModelID = null
+    //   state.selectedModelID = null
-      state.selectedMaterial = null
+    //   state.selectedMaterial = null
-    },
+    // },
-    SET_SELECTED_FAMILY_ID: (state, payload) => {
+    // SET_SELECTED_FAMILY_ID: (state, payload) => {
-      state.selectedFamilyID = payload
+    //   state.selectedFamilyID = payload
-      state.selectedModelID = null
+    //   state.selectedModelID = null
-      state.selectedMaterial = null
+    //   state.selectedMaterial = null
-    },
+    // },
-    SET_SELECTED_MODEL_ID: (state, payload) => {
+    // SET_SELECTED_MODEL_ID: (state, payload) => {
-      state.selectedModelID = payload
+    //   state.selectedModelID = payload
-      state.selectedFamilyID = null
+    //   state.selectedFamilyID = null
-      state.selectedMaterial = null
+    //   state.selectedMaterial = null
-    },
+    // },
-    SET_SELECTED_MATERIAL_ID: (state, payload) => {
+    // SET_SELECTED_MATERIAL_ID: (state, payload) => {
-      state.selectedMaterial = 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) => {
+    // SET_CAT_SECTIONS: (context, payload) => {
-      context.commit('SET_CAT_SECTIONS', payload)
+    //   context.commit('SET_CAT_SECTIONS', payload)
-    },
+    // },
-    SET_CAT_SECTION_NAME: (context, payload) => {
+    // SET_CAT_SECTION_NAME: (context, payload) => {
-      context.commit('SET_CAT_SECTION_NAME', payload)
+    //   context.commit('SET_CAT_SECTION_NAME', payload)
-    },
+    // },
-    SET_SELECTED_SECTION_ID: (context, payload) => {
+    // SET_SELECTED_SECTION_ID: (context, payload) => {
-      context.commit('SET_SELECTED_SECTION_ID', payload)
+    //   context.commit('SET_SELECTED_SECTION_ID', payload)
-    },
+    // },
-    SET_SELECTED_FAMILY_ID: (context, payload) => {
+    // SET_SELECTED_FAMILY_ID: (context, payload) => {
-      context.commit('SET_SELECTED_FAMILY_ID', payload)
+    //   context.commit('SET_SELECTED_FAMILY_ID', payload)
-    },
+    // },
-    SET_SELECTED_MODEL_ID: (context, payload) => {
+    // SET_SELECTED_MODEL_ID: (context, payload) => {
-      context.commit('SET_SELECTED_MODEL_ID', payload)
+    //   context.commit('SET_SELECTED_MODEL_ID', payload)
-    },
+    // },
-    SET_SELECTED_MATERIAL_ID: (context, payload) => {
+    // SET_SELECTED_MATERIAL_ID: (context, payload) => {
-      context.commit('SET_SELECTED_MATERIAL_ID', 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)
+    },
+
   }
 })