cat editor: add 'add product' dialog

cateditor/src/components/AddProductDialog.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="text-xs-center">
+    <v-dialog v-model="show" width="250">
+      <v-card>
+
+        <v-card class="subheading font-weight-bold ma-0 pa-0 white--text" color="keen_dark_grey">
+          <v-card-title class="ma-0 pa-2 pl-3">
+            Add Materials
+            <v-spacer></v-spacer>
+            <v-icon color="white" @click="show = false">clear</v-icon>
+          </v-card-title>
+        </v-card>
+
+        <v-card-text>
+          <p>Enter lots of material numbers to add to the catalog</p>
+          <v-textarea
+            v-model="text"
+            autofocus
+            label="Material numbers"
+            placeholder="1001234
+1001235..."
+            clearable
+          ></v-textarea>
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn small flat @click="show = false">Cancel</v-btn>
+          <v-spacer></v-spacer>
+          <v-btn small color="primary" class="black--text" @click="doAdd()">Add</v-btn>
+          <v-spacer></v-spacer>
+        </v-card-actions>
+
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  data: () => ({
+    text: null,
+  }),
+  props: {
+    value: Boolean,
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value)
+      }
+    },
+  },
+  methods: {
+    ...mapActions([
+      'fetchProducts',
+    ]),
+
+    doAdd: function() {
+      console.log('adding text', this.text)
+      this.show = false
+      this.fetchProducts(this.text)
+    },
+
+  },
+}
+</script>

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>