get vuex working

cateditor/src/components/CategoryPopup.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="text-xs-center">
-    <v-dialog v-model="show" width="200">
+    <v-dialog v-model="show" width="250">
       <v-card>
         <v-toolbar dark dense>
           <v-toolbar-title>Category Info</v-toolbar-title>
@@ -10,9 +10,10 @@
 
         <v-card-text>
           <v-text-field v-model="name" label="Name" required></v-text-field>
-          <input v-model="families"></input>
+          <input v-model="category"/>
-          <input v-model="models"></input>
+          <input v-model="families"/>
-          <input v-model="materials"></input>
+          <input v-model="models"/>
+          <input v-model="materials"/>
         </v-card-text>
 
         <v-card-actions>
@@ -29,14 +30,16 @@
 // https://stackoverflow.com/questions/48035310/open-a-vuetify-dialog-from-a-component-template-in-vuejs
 export default {
   data: () => ({
-    //dialog: false
+    /*     name: 'Trailhead (Men)', */
-    name: 'Trailhead (Men)',
-    families: '3 product families',
     models: '5 models',
     materials: '12 materials'
   }),
   props: {
-    value: Boolean
+    value: Boolean,
+    category: {
+      type: Number,
+      required: false
+    }
   },
   computed: {
     show: {
@@ -46,6 +49,19 @@ export default {
       set (value) {
         this.$emit('input', value)
       }
+    },
+    name: {
+      get () {
+        var section = this.$store.getters.CAT_SECTION(this.category)
+        return section ? section.name : '(none)'
+      },
+      set (value) {
+        this.$store.dispatch('SET_CAT_SECTION_NAME',
+                             { id: this.category, name: value })
+      }
+    },
+    families () {
+      return this.$store.getters.CAT_FAMILIES
     }
   }
 }

cateditor/src/components/FancyList.vue

@@ -1,20 +1,21 @@
 <template>
   <v-container fluid grid-list-lg>
     <v-layout row>
-      <v-flex xs4>
+      <v-flex xs5>
         <v-card>
           <v-toolbar color="cyan" dense dark>
-            <v-toolbar-side-icon></v-toolbar-side-icon>
+            <v-toolbar-title>Categories</v-toolbar-title>
-            <v-toolbar-title>Items</v-toolbar-title>
             <v-spacer></v-spacer>
-            <v-btn icon><v-icon>search</v-icon></v-btn>
+            <v-btn icon><v-icon>add</v-icon></v-btn>
           </v-toolbar>
 
-          <draggable v-model="items" group="people" @start="drag=true" @end="drag=false">
+          <draggable v-model="sections" @start="drag=true" @end="drag=false">
-            <div v-for="item in items" :key="item.id">
+            <div v-for="item in sections" :key="item.id">
               <v-hover>
-                <v-list-tile :key="item.id" avatar @click=""
+                <v-list-tile
-                             slot-scope="{ hover }" :class="`elevation-${hover ? 2 : 0}`">
+                  :key="item.id"
+                  slot-scope="{ hover }"
+                  :class="`${hover ? 'grey lighten-4' : ''}`">
 
                   <v-list-tile-action>
                     <v-icon color="black">drag_handle</v-icon>
@@ -22,14 +23,16 @@
 
                   <v-list-tile-content>
                     <v-list-tile-title v-html="item.name"></v-list-tile-title>
-                    <v-list-tile-sub-title v-html="item.name"></v-list-tile-sub-title>
+                    <!-- <v-list-tile-sub-title v-html="item.name"></v-list-tile-sub-title> -->
                   </v-list-tile-content>
 
                   <v-list-tile-action>
-                    <v-btn icon>
+                    <v-btn icon @click="popInfo(item.id)">
-                      <v-icon color="blue" small>info</v-icon>
+                      <v-icon small>info</v-icon>
                     </v-btn>
-                    <v-btn icon ripple>
+                  </v-list-tile-action>
+                  <v-list-tile-action>
+                    <v-btn icon>
                       <v-icon color="red" small>delete</v-icon>
                     </v-btn>
                   </v-list-tile-action>
@@ -41,17 +44,11 @@
         </v-card>
       </v-flex>
 
-      <v-flex xs3>
+      <v-flex xs5>
-        <v-btn color="red lighten-2" dark @click="showCatPopup = true" >
+        <RawDisplayer :value="sections" title="Data" />
-          Click Me
-        </v-btn>
-
-        <CategoryPopup v-model="showCatPopup"/>
       </v-flex>
 
-      <v-flex xs3>
+      <CategoryPopup v-model="showCatPopup" v-bind:category="selectedCategory"/>
-        <RawDisplayer :value="items" title="List" />
-      </v-flex>
 
     </v-layout>
   </v-container>
@@ -68,26 +65,27 @@ export default {
     CategoryPopup,
     RawDisplayer
   },
+  props: {
+    selected: Number
+  },
   data: () => ({
-    items: [{ id: 12, name: 'twelve' },
+    showCatPopup: false,
-            { id: 42, name: 'forty two' },
+    selectedCategory: null
-            { id: 19, name: 'nineteen' }
-    ],
-    showCatPopup: true,
-    dragging: false
   }),
   computed: {
-    draggingInfo() {
+    sections: {
-      return this.dragging ? "under drag" : "";
+      get () {
+        return this.$store.getters.CAT_SECTIONS
+      },
+      set (value) {
+        this.$store.dispatch('SET_CAT_SECTIONS', value)
+      }
     }
   },
   methods: {
-    removeAt(idx) {
+    popInfo: function (id) {
-      this.list.splice(idx, 1);
+      this.selectedCategory = id
-    },
+      this.showCatPopup = true
-    add: function() {
-      id++;
-      this.list.push({ name: "Juan " + id, id, text: "" });
     }
   }
 }

cateditor/src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import './plugins/vuetify'
 import App from './App.vue'
-import store from './store'
+import { store } from './store'
 import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
 
 Vue.config.productionTip = false

cateditor/src/store.js

@@ -1,16 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  state: {
-
-  },
-  mutations: {
-
-  },
-  actions: {
-
-  }
-})

cateditor/src/store/index.js

@@ -0,0 +1,54 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export const store = new Vuex.Store({
+  state: {
+    catalog: {
+      name: 'my catalog',
+      sections: [{ id: 1, name: 'trailhead (men)' },
+                 { id: 2, name: 'trailhead (women)' },
+                 { id: 3, name: 'waterfront (men)' },
+                 { id: 4, name: 'waterfront (women)' }],
+      families: 5,
+      models: 12,
+      materials: 27
+    }
+  },
+  getters: {
+    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_FAMILIES: state => {
+      return state.catalog.families + ' product families'
+    }
+  },
+  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
+    }
+  },
+  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)
+    }
+  //   SAVE_TODO : async (context,payload) => {
+  //     let { data } = await Axios.post('http://yourwebsite.com/api/todo')
+  //     context.commit('ADD_TODO',payload)
+  //   },
+  }
+})