product picker: add tabs for new picking methods WIP
This commit is contained in:
89
cateditor/src/components/AddCatalogPanel.vue
Normal file
89
cateditor/src/components/AddCatalogPanel.vue
Normal file
@ -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>
|
||||
44
cateditor/src/components/AddMaterialPanel.vue
Normal file
44
cateditor/src/components/AddMaterialPanel.vue
Normal file
@ -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>
|
||||
92
cateditor/src/components/AddModelPanel.vue
Normal file
92
cateditor/src/components/AddModelPanel.vue
Normal file
@ -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>
|
||||
@ -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-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 class="ma-0 pa-0">
|
||||
|
||||
<v-card-text>
|
||||
<p>Enter material numbers to add to the catalog</p>
|
||||
<v-textarea
|
||||
v-model="text"
|
||||
autofocus
|
||||
label="Material numbers"
|
||||
placeholder="1001234
|
||||
1001235..."
|
||||
clearable
|
||||
/>
|
||||
<v-tabs v-model="tab" grow>
|
||||
<v-tab>By ID</v-tab>
|
||||
<v-tab>By Name</v-tab>
|
||||
<v-tab>From Catalog</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-items v-model="tab">
|
||||
<v-tab-item>
|
||||
<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)
|
||||
this.show = false
|
||||
this.fetchProducts(this.text)
|
||||
if (this.tab === 0) {
|
||||
this.fetchProducts(this.materialText)
|
||||
} else if (this.tab === 1) {
|
||||
console.log('adding models', this.models)
|
||||
} else {
|
||||
console.log('adding from catalog', this.catalog)
|
||||
}
|
||||
/* this.show = false */
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user