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>