product picker: add tabs for new picking methods WIP

cateditor/src/components/AddCatalogPanel.vue

@@ -0,0 +1,89 @@
+<template>
+  <v-card flat>
+    <v-card-text>
+      <v-container fluid class="pa-0 ma-0">
+        <v-row class="pa-0 ma-0">
+          <v-col cols="6" class="pa-0 ma-0">
+            <v-radio-group v-model="catalogType" class="pa-0 ma-0">
+              <v-radio class="pa-0 ma-0"
+                       label="My catalogs"
+                       on-icon="radio_button_checked"
+                       off-icon="radio_button_unchecked"
+                       value="mine"/>
+            </v-radio-group>
+          </v-col>
+          <v-col cols="6" class="pa-0 ma-0">
+            <v-radio-group v-model="catalogType" class="pa-0 ma-0">
+              <v-radio class="pa-0 ma-0"
+                       label="Public catalogs"
+                       value="public"/>
+            </v-radio-group>
+          </v-col>
+        </v-row>
+      </v-container>
+
+      <v-autocomplete
+        v-model="selectedCatalog"
+        :items="catalogChoices"
+        :loading="isLoading"
+        :search-input.sync="search"
+        item-text="name"
+        item-value="id"
+        label="Select catalog"
+        :no-data-text="noDataText"
+        outlined
+      />
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Number,
+      required: true,
+      default: -1,
+    },
+  },
+  data: () => ({
+    myCatalogs: null,
+    publicCatalogs: null,
+    catalogTypeInternal: 'mine',
+    isLoading: false,
+    search: null,
+  }),
+  computed: {
+    catalogType: {
+      get() {
+        return this.catalogTypeInternal
+      },
+      set(value) {
+        this.catalogTypeInternal = value
+        this.value = -1
+      }
+    },
+    catalogChoices: {
+      get() {
+        if (this.catalogTypeInternal === 'mine') {
+          //if (this.myCatalogs.length < 1) {
+          //this.isLoading = true
+          /* fetch('/api/v1/catalogs/mine')
+             *   .then(res => this.myCatalogs = res.json())
+             *   .catch(err => {
+             *     // TODO
+             *     console.log(err)
+             *   })
+             *   .finally(() => (this.isLoading = false))
+             * } */
+          //}
+          //return this.myCatalogs
+          return [{ name: 'SS20 New Zealand' }, { name: 'SS20 Australia' }]
+        } else {
+          return [{ name: 'SS20 New Zealand - Joe User' }, { name: 'SS20 Australia - Joe User' }]
+        }
+      },
+    },
+  },
+}
+</script>

cateditor/src/components/AddMaterialPanel.vue

@@ -0,0 +1,44 @@
+b
+<template>
+  <v-card flat>
+    <v-card-text>
+      <v-textarea
+        v-model="text"
+        label="Enter material numbers"
+        autofocus
+        outlined
+        clearable
+        clear-icon="cancel"
+        rows="6"
+        placeholder="1001234
+1001235..."
+      />
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+//import { mapActions } from 'vuex'
+
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true,
+      default: '',
+    },
+  },
+  data: () => ({
+  }),
+  computed: {
+    text: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value)
+      }
+    },
+  },
+}
+</script>

cateditor/src/components/AddModelPanel.vue

@@ -0,0 +1,92 @@
+<template>
+  <v-card flat>
+    <v-card-text>
+      <v-autocomplete
+        v-model="selectedModels"
+        :items="items"
+        :loading="isLoading"
+        :search-input.sync="search"
+        item-text="name"
+        item-value="name"
+        label="Select models by name"
+        :no-data-text="noDataText"
+        multiple
+        chips
+        small-chips
+        deletable-chips
+        dense
+        outlined>
+
+        <template v-slot:item="data">
+          <v-list-item-content>
+            <v-list-item-title v-text="data.item.name"/>
+            <v-list-item-subtitle>{{ data.item.total }} {{ data.item.total | pluralize('material') }}</v-list-item-subtitle>
+          </v-list-item-content>
+        </template>
+
+      </v-autocomplete>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Array,
+      required: true,
+    },
+  },
+  data: () => ({
+    entries: [],
+    isLoading: false,
+    search: null,
+  }),
+  computed: {
+    noDataText() {
+      if (this.items.length > 0) {
+        return 'No models found for: ' + this.search
+      } else {
+        return 'Start typing to search...'
+      }
+    },
+    selectedModels: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value)
+      }
+    },
+    items() {
+      return this.entries
+      /* return this.entries.map(entry => {
+       *   const Description = entry.Description.length > this.descriptionLimit
+       *     ? entry.Description.slice(0, this.descriptionLimit) + '...'
+       *     : entry.Description
+
+       *   return Object.assign({}, entry, { Description })
+      })
+       */
+    },
+  },
+  watch: {
+    search(val) {
+      if (this.items.length > 0) return
+      if (this.isLoading) return
+      this.isLoading = true
+
+      fetch('/api/v1/products/models')
+        .then(res => res.json())
+        .then(res => {
+          this.entries = res
+        })
+        .catch(err => {
+          // TODO
+          console.log(err)
+        })
+        .finally(() => (this.isLoading = false))
+    },
+  },
+}
+</script>

cateditor/src/components/AddProductDialog.vue

@@ -1,33 +1,39 @@
 <template>
   <div class="text-center">
-    <v-dialog v-model="show" width="280">
+    <v-dialog v-model="show" width="500">
       <v-card>
+        <DialogHeading title="Add Materials">
+          <v-btn icon class="ma-0 pa-0" @click="show = false">
+            <v-icon color="white">clear</v-icon>
+          </v-btn>
+        </DialogHeading>
 
-        <v-card class="subheading font-weight-bold ma-0 pa-0 white--text" color="keen_dark_grey">
+        <v-card-text class="ma-0 pa-0">
-          <v-card-title class="ma-0 pa-2 pl-3">
-            Add Materials
-            <v-spacer/>
-            <v-icon color="white" @click="show = false">clear</v-icon>
-          </v-card-title>
-        </v-card>
 
-        <v-card-text>
+          <v-tabs v-model="tab" grow>
-          <p>Enter material numbers to add to the catalog</p>
+            <v-tab>By ID</v-tab>
-          <v-textarea
+            <v-tab>By Name</v-tab>
-            v-model="text"
+            <v-tab>From Catalog</v-tab>
-            autofocus
+          </v-tabs>
-            label="Material numbers"
+
-            placeholder="1001234
+          <v-tabs-items v-model="tab">
-1001235..."
+            <v-tab-item>
-            clearable
+              <AddMaterialPanel v-model="materialText"/>
-          />
+            </v-tab-item>
+            <v-tab-item>
+              <AddModelPanel v-model="models"/>
+            </v-tab-item>
+            <v-tab-item>
+              <AddCatalogPanel v-model="catalog"/>
+            </v-tab-item>
+          </v-tabs-items>
         </v-card-text>
 
         <v-card-actions>
           <v-spacer/>
-          <v-btn small text @click="show = false">Cancel</v-btn>
+          <v-btn depressed @click="show = false">Cancel</v-btn>
           <v-spacer/>
-          <v-btn small text color="primary" @click="doAdd()">Add</v-btn>
+          <v-btn depressed color="primary" class="black--text" @click="doAdd()">Add</v-btn>
           <v-spacer/>
         </v-card-actions>
 
@@ -38,13 +44,26 @@
 
 <script>
 import { mapActions } from 'vuex'
+import AddMaterialPanel from './AddMaterialPanel'
+import AddModelPanel from './AddModelPanel'
+import AddCatalogPanel from './AddCatalogPanel'
+import DialogHeading from './DialogHeading'
 
 export default {
+  components: {
+    AddMaterialPanel,
+    AddModelPanel,
+    AddCatalogPanel,
+    DialogHeading,
+  },
   props: {
     value: Boolean,
   },
   data: () => ({
-    text: null,
+    tab: 1,
+    materialText: '',
+    models: [],
+    catalog: null,
   }),
   computed: {
     show: {
@@ -60,11 +79,15 @@ export default {
     ...mapActions([
       'fetchProducts',
     ]),
-
     doAdd: function() {
-      console.log('adding text', this.text)
+      if (this.tab === 0) {
-      this.show = false
+        this.fetchProducts(this.materialText)
-      this.fetchProducts(this.text)
+      } else if (this.tab === 1) {
+        console.log('adding models', this.models)
+      } else {
+        console.log('adding from catalog', this.catalog)
+      }
+      /*       this.show = false */
     },
 
   },