cateditor: allow selecting sections and models

cateditor/src/components/CatalogContents.vue

@@ -9,36 +9,24 @@
     <v-layout row fill-height>
       <v-flex xs3>
         <v-card>
-          <v-toolbar dense>
+          <v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
-            <v-toolbar-title>Sections</v-toolbar-title>
+            Sections
-          </v-toolbar>
+          </v-card>
 
           <div id="sections" class="list-group">
-            <v-list-tile
+            <div v-for="item in sections" :key="item.id">
-              v-for="item in sections"
+              <v-hover :key="item.id">
-              :key="item.id"
+                <v-list-tile
-              class="v-list__tile list-group-item list-item"
+                  slot-scope="{ hover }"
-              v-bind:class="{'selected': selected === item}"
+                  :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-content class="section-parent">
-                <v-list-tile-sub-title class="section-drop" :section-id="item.id"></v-list-tile-sub-title>
+                    <v-list-tile-title v-html="item.name"></v-list-tile-title>
-              </v-list-tile-content>
+                    <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-list-tile>
-          </div>
+              </v-hover>
-        </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>
           </div>
         </v-card>
@@ -46,17 +34,42 @@
 
       <v-flex xs3>
         <v-card>
-          <v-toolbar dense>
+          <v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
-            <v-toolbar-title>Materials</v-toolbar-title>
+            Models
-          </v-toolbar>
+          </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
+            <div v-for="item in selectedMaterials" :key="item.id">
-              v-for="item in selectedMaterials"
+              <v-hover :key="item.id">
-              :key="item.id"
+                <v-list-tile
-              class="v-list__tile list-item"
+                  slot-scope="{ hover }"
-            >
+                  :class="materialListItemClasses(item.id, hover)"
-              <v-list-tile-title v-html="item.id"></v-list-tile-title>
+                >
+                  <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>

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

@@ -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 => {
+    selectedSection: (state, getters) => {
-      if (state.catalog != null) {
+      if (state.catalog && state.selectedSectionID) {
-        return state.catalog.sections[0]
+        return getters.section(state.selectedSectionID)
       } else {
         return null
       }
     },
 
-    selectedModel: state => {
+    selectedModel: (state, getters) => {
-      if (state.catalog != null) {
+      if (state.catalog && state.selectedModelID) {
-        return state.catalog.sections[0].pages[0][0]
+        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)
     },