cat editor: add 'add product' dialog

cateditor/src/components/CatalogContents.vue

@@ -2,8 +2,7 @@
   <v-container fluid grid-list-lg ma-0 pa-1>
 
     <v-layout row fill-height>
-      <v-btn @click="step = 1">Add products</v-btn>
-      <v-btn @click="step = 3">Auto arrange</v-btn>
+      <v-btn @click="showAddProductDialog = true">Add products</v-btn>
     </v-layout>
 
     <v-layout row fill-height>
@@ -20,7 +19,7 @@
                   @click="selectSection(item.id)"
                 >
                   <!-- TODO try move sectionparent into v-list-title
-                  and so section-drop can cover all interior
+                       and so section-drop can cover all interior
                   -->
                   <v-list-tile-content class="section-parent">
                     <v-list-tile-title v-html="item.name"></v-list-tile-title>
@@ -126,6 +125,8 @@
 
     </v-layout>
 
+    <AddProductDialog v-model="showAddProductDialog"/>
+
   </v-container>
 </template>
 
@@ -136,18 +137,17 @@ import arrayMove from 'array-move'
 //import RawDisplayer from './RawDisplayer'
 import { paginateModels } from '@/pagination'
 import DragListHeading from './DragListHeading'
+import AddProductDialog from './AddProductDialog'
 
 export default {
   components: {
     DragListHeading,
+    AddProductDialog,
     //RawDisplayer,
   },
 
   data: () => ({
-    // NOTE do we need?
-    'placeholderText': 'placeholder',
-    // NOTE do we need?
-    'selected': null,
+    showAddProductDialog: false,
   }),
   computed: {
     ...mapState([
@@ -186,13 +186,23 @@ export default {
       this.$store.dispatch('selectModel', id)
     },
 
+    sectionModelCount(sectionID) {
+      let section = this.section(sectionID)
+      if (section) {
+        let models = this.sectionModels(section) || []
+        return models.length
+      } else {
+        return 0
+      }
+    },
+
     sectionListItemClasses: function(id, hovering) {
       if (id === this.selectedSectionID) {
         return 'list-item primary'
       } else if (hovering) {
         return 'list-item grey lighten-4'
       } else {
-        return ''
+        return 'list-item'
       }
     },
 
@@ -395,6 +405,12 @@ function addSectionDrops(myvue) {
 }
 
 .list-item {
-  //border-bottom: 1px solid #ddd;
+  background-color: white;
+  border-bottom: 1px solid #ddd;
+}
+
+.list-group {
+  background-color: #f0f0ff;
+  min-height: 200px;
 }
 </style>