catalog list: get 'my catalogs' somewhat working
This commit is contained in:
Seth Ladygo
@ -1,5 +1,81 @@
|
||||
<template>
|
||||
<v-btn color="primary">I am catalog list</v-btn>
|
||||
<v-container fluid grid-list-lg>
|
||||
<v-layout row>
|
||||
<v-flex xs3>
|
||||
<v-btn color="primary">New Catalog</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs9>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
<v-layout row>
|
||||
<v-flex xs7>
|
||||
|
||||
<v-card class="pa-2">
|
||||
<v-tabs v-model="activeTab">
|
||||
<v-tab key="mine">My Catalogs</v-tab>
|
||||
<v-tab key="public">Public Catalogs</v-tab>
|
||||
|
||||
<v-tab-item key="mine">
|
||||
<v-card flat>
|
||||
|
||||
<v-card-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="search"
|
||||
label="Search"
|
||||
single-line
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</v-card-title>
|
||||
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="myCatalogs"
|
||||
:search="search"
|
||||
:loading="loadingMyCatalogs"
|
||||
disable-initial-sort
|
||||
class="scroll-area"
|
||||
>
|
||||
<template v-slot:items="cats">
|
||||
<tr @click="selectCatalog(cats.item.id)">
|
||||
<td>{{ cats.item.seasonCode }}</td>
|
||||
<td>{{ cats.item.name }}</td>
|
||||
<td>{{ cats.item.updatedPretty }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:no-results>
|
||||
No catalogs match "{{ search }}"
|
||||
</template>
|
||||
|
||||
<template v-slot:no-data>
|
||||
No Catalogs
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
|
||||
<v-tab-item key="public">
|
||||
<v-card flat>
|
||||
<v-card-text>public</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</v-tabs>
|
||||
</v-card>
|
||||
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs5>
|
||||
<v-card>
|
||||
<v-card-text>{{ getSelectedCatalog }} </v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -8,10 +84,56 @@ export default {
|
||||
components: {
|
||||
},
|
||||
data: () => ({
|
||||
})
|
||||
activeTab: null,
|
||||
search: '',
|
||||
headers: [
|
||||
{
|
||||
text: 'Season',
|
||||
align: 'left',
|
||||
value: 'seasonCode'
|
||||
},
|
||||
{
|
||||
text: 'Name',
|
||||
align: 'left',
|
||||
value: 'name'
|
||||
},
|
||||
{
|
||||
text: 'Updated',
|
||||
value: 'updated'
|
||||
},
|
||||
],
|
||||
}),
|
||||
computed: {
|
||||
myCatalogs() {
|
||||
return this.$store.getters.getMyCatalogs
|
||||
},
|
||||
loadingMyCatalogs() {
|
||||
return this.$store.getters.getLoadingMyCatalogs
|
||||
},
|
||||
publicCatalogs() {
|
||||
return this.$store.getters.getPublicCatalogs
|
||||
},
|
||||
loadingPublicCatalogs() {
|
||||
return this.$store.getters.getLoadingPublicCatalogs
|
||||
},
|
||||
getSelectedCatalog() {
|
||||
return this.$store.getters.getSelectedCatalog
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
selectCatalog: function(id) {
|
||||
this.$store.dispatch('setSelectedCatalog', id)
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
this.$store.dispatch('loadMyCatalogs')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
<style scoped>
|
||||
.scroll-area {
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,193 +1,100 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export const store = new Vuex.Store({
|
||||
// strict: true, // not in production
|
||||
|
||||
state: {
|
||||
catalog: {
|
||||
name: 'my catalog',
|
||||
owner: 12,
|
||||
created: '2019-04-04T22:00:14Z',
|
||||
sections: [
|
||||
{ id: 1,
|
||||
name: 'Trailhead (Men)',
|
||||
pages: [
|
||||
[{ name: 'model name override', size: 2, ids: ['1001001', '1001002'] },
|
||||
{ size: 1, ids: ['1001011', '1001012'] }], // one page, two blocks
|
||||
[{ size: 1,
|
||||
ids: ['1001021', '1001022', '1001023', '1001024', '1001025',
|
||||
'1001026', '1001027', '1001028', '1001029'] }],
|
||||
],
|
||||
},
|
||||
{ id: 2,
|
||||
name: 'Waterfront (Men)',
|
||||
pages: [
|
||||
[{ size: 1, ids: ['1001021'] }],
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
materials: {
|
||||
'1001001': { id: '1001001', // call them sap maybe?
|
||||
model: 'AW123',
|
||||
family: 'MF123',
|
||||
name: 'Targhee WP',
|
||||
color: 'Green / Blue' },
|
||||
'1001002': { id: '1001002',
|
||||
model: 'AW123',
|
||||
family: 'MF123',
|
||||
name: 'Targhee WP',
|
||||
color: 'Red / Purple' },
|
||||
'1001011': { id: '1001011',
|
||||
model: 'WA999',
|
||||
family: 'MF123',
|
||||
name: 'Targhee WP FA',
|
||||
color: 'Green / Blue' },
|
||||
'1001012': { id: '1001012',
|
||||
model: 'WA999',
|
||||
family: 'MF123',
|
||||
name: 'Targhee WP FA',
|
||||
color: 'Green / Blue' },
|
||||
'1001021': { id: '1001021',
|
||||
model: 'BBB22',
|
||||
family: 'BBBMF',
|
||||
name: 'Slither',
|
||||
color: 'Green / Blue' },
|
||||
'1001022': { id: '1001022',
|
||||
model: 'BBB22',
|
||||
family: 'BBBMF',
|
||||
name: 'Slither',
|
||||
color: 'Red / Blue' },
|
||||
'1001023': { id: '1001023',
|
||||
model: 'BBB22',
|
||||
family: 'BBBMF',
|
||||
name: 'Slither',
|
||||
color: 'Blue / Green' },
|
||||
'1001024': { id: '1001024',
|
||||
model: 'BBB22',
|
||||
family: 'BBBMF',
|
||||
name: 'Slither',
|
||||
color: 'Red / Green' },
|
||||
'1001025': { id: '1001025',
|
||||
model: 'BBB22',
|
||||
family: 'BBBMF',
|
||||
name: 'Slither',
|
||||
color: 'Orange / Blue' },
|
||||
'1001026': { id: '1001026',
|
||||
model: 'BBB22',
|
||||
family: 'BBBMF',
|
||||
name: 'Slither',
|
||||
color: 'Yellow / Blue' },
|
||||
'1001027': { id: '1001027',
|
||||
model: 'BBB22',
|
||||
family: 'BBBMF',
|
||||
name: 'Slither',
|
||||
color: 'Yellow / Blue' },
|
||||
'1001028': { id: '1001028',
|
||||
model: 'BBB22',
|
||||
family: 'BBBMF',
|
||||
name: 'Slither',
|
||||
color: 'Yellow / Blue' },
|
||||
'1001029': { id: '1001029',
|
||||
model: 'BBB22',
|
||||
family: 'BBBMF',
|
||||
name: 'Slither',
|
||||
color: 'Yellow / Blue' },
|
||||
},
|
||||
selectedSectionID: null,
|
||||
selectedFamilyID: null,
|
||||
selectedModelID: null,
|
||||
selectedMaterial: null,
|
||||
myCatalogs: [],
|
||||
publicCatalogs: [],
|
||||
loadingMyCatalogs: true,
|
||||
loadingPublicCatalogs: true,
|
||||
selectedCatalog: null,
|
||||
},
|
||||
|
||||
getters: {
|
||||
//
|
||||
// catalog info
|
||||
//
|
||||
CAT_NAME: state => {
|
||||
return state.catalog.name
|
||||
getMyCatalogs(state) {
|
||||
return state.myCatalogs
|
||||
},
|
||||
CAT_SECTIONS: state => {
|
||||
return state.catalog.sections
|
||||
getLoadingMyCatalogs(state) {
|
||||
return state.loadingMyCatalogs
|
||||
},
|
||||
CAT_SECTION: (state) => (id) => {
|
||||
return state.catalog.sections.find(s => s.id === id)
|
||||
getPublicCatalogs(state) {
|
||||
return state.publicCatalogs
|
||||
},
|
||||
//
|
||||
// selection info
|
||||
//
|
||||
SELECTED_SECTION_ID: state => {
|
||||
return state.selectedSectionID
|
||||
getLoadingPublicCatalogs(state) {
|
||||
return state.loadingPublicCatalogs
|
||||
},
|
||||
// SELECTED_SECTION: state => {
|
||||
// return store.getters.CAT_SECTION(state.selectedSectionID)
|
||||
getSelectedCatalog(state) {
|
||||
return state.selectedCatalog
|
||||
},
|
||||
// findCatalog(state) {
|
||||
// return function(id) {
|
||||
// let cat = state.myCatalogs.find(c => c.id === id)
|
||||
// if (cat !== undefined) {
|
||||
// return cat
|
||||
// } else {
|
||||
// return state.publicCatalogs.find(c => c.id === id)
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
SELECTED_FAMILY_ID: state => {
|
||||
return state.selectedFamilyID
|
||||
},
|
||||
SELECTED_MODEL_ID: state => {
|
||||
return state.selectedModelID
|
||||
},
|
||||
SELECTED_MATERIAL_ID: state => {
|
||||
return state.selectedMaterial
|
||||
},
|
||||
//
|
||||
// material info
|
||||
//
|
||||
MATERIAL: (state) => (id) => {
|
||||
return state.materials[id]
|
||||
findCatalog: (state) => (id) => {
|
||||
let cat = state.myCatalogs.find(c => c.id === id)
|
||||
if (cat !== undefined) {
|
||||
return cat
|
||||
} else {
|
||||
return state.publicCatalogs.find(c => c.id === id)
|
||||
}
|
||||
},
|
||||
// CAT_SECTION: (state) => (id) => {
|
||||
// return state.catalog.sections.find(s => s.id === id)
|
||||
// },
|
||||
},
|
||||
|
||||
mutations: {
|
||||
SET_CAT_SECTIONS: (state, payload) => {
|
||||
state.catalog.sections = payload
|
||||
setMyCatalogs(state, cats) {
|
||||
state.myCatalogs = cats
|
||||
},
|
||||
SET_CAT_SECTION_NAME: (state, payload) => {
|
||||
var section = state.catalog.sections.find(s => s.id === payload.id)
|
||||
section.name = payload.name
|
||||
setLoadingMyCatalogs(state, value) {
|
||||
state.loadingMyCatalogs = value
|
||||
},
|
||||
SET_SELECTED_SECTION_ID: (state, payload) => {
|
||||
state.selectedSectionID = payload
|
||||
state.selectedFamilyID = null
|
||||
state.selectedModelID = null
|
||||
state.selectedMaterial = null
|
||||
setPublicCatalogs(state, cats) {
|
||||
state.publicCatalogs = cats
|
||||
},
|
||||
SET_SELECTED_FAMILY_ID: (state, payload) => {
|
||||
state.selectedFamilyID = payload
|
||||
state.selectedModelID = null
|
||||
state.selectedMaterial = null
|
||||
setLoadingPublicCatalogs(state, value) {
|
||||
state.loadingPublicCatalogs = value
|
||||
},
|
||||
SET_SELECTED_MODEL_ID: (state, payload) => {
|
||||
state.selectedModelID = payload
|
||||
state.selectedFamilyID = null
|
||||
state.selectedMaterial = null
|
||||
},
|
||||
SET_SELECTED_MATERIAL_ID: (state, payload) => {
|
||||
state.selectedMaterial = payload
|
||||
setSelectedCatalog(state, cat) {
|
||||
state.selectedCatalog = cat
|
||||
},
|
||||
},
|
||||
|
||||
actions: {
|
||||
SET_CAT_SECTIONS: (context, payload) => {
|
||||
context.commit('SET_CAT_SECTIONS', payload)
|
||||
async loadMyCatalogs({ commit }) {
|
||||
try {
|
||||
commit('setLoadingMyCatalogs', true)
|
||||
const response = await axios.get('/api/v1/catalogs/mine')
|
||||
if ('catalogs' in response.data) {
|
||||
// console.log('recieved catalogs:', response.data.catalogs)
|
||||
commit('setMyCatalogs', response.data.catalogs)
|
||||
} else {
|
||||
// console.log('no catalogs')
|
||||
commit('setMyCatalogs', [])
|
||||
}
|
||||
commit('setLoadingMyCatalogs', false)
|
||||
} catch (error) {
|
||||
// TODO set loading error property
|
||||
console.error(error)
|
||||
commit('setMyCatalogs', [])
|
||||
commit('setLoadingMyCatalogs', false)
|
||||
}
|
||||
},
|
||||
SET_CAT_SECTION_NAME: (context, payload) => {
|
||||
context.commit('SET_CAT_SECTION_NAME', payload)
|
||||
setSelectedCatalog(context, id) {
|
||||
let cat = context.getters.findCatalog(id)
|
||||
context.commit('setSelectedCatalog', cat)
|
||||
},
|
||||
SET_SELECTED_SECTION_ID: (context, payload) => {
|
||||
context.commit('SET_SELECTED_SECTION_ID', payload)
|
||||
},
|
||||
SET_SELECTED_FAMILY_ID: (context, payload) => {
|
||||
context.commit('SET_SELECTED_FAMILY_ID', payload)
|
||||
},
|
||||
SET_SELECTED_MODEL_ID: (context, payload) => {
|
||||
context.commit('SET_SELECTED_MODEL_ID', payload)
|
||||
},
|
||||
SET_SELECTED_MATERIAL_ID: (context, payload) => {
|
||||
context.commit('SET_SELECTED_MATERIAL_ID', payload)
|
||||
},
|
||||
// SAVE_TODO : async (context,payload) => {
|
||||
// let { data } = await Axios.post('http://yourwebsite.com/api/todo')
|
||||
// context.commit('ADD_TODO',payload)
|
||||
// },
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user