alx/procat2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

get vuex working

Browse Source
This commit is contained in:
Seth Ladygo
2019-04-03 17:07:12 -07:00
parent e092aa730b
commit dea7bf09de
5 changed files with 112 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
cateditor/src/components/CategoryPopup.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="text-xs-center">
<v-dialog v-model="show" width="200">
<v-dialog v-model="show" width="250">
<v-card>
<v-toolbar dark dense>
<v-toolbar-title>Category Info</v-toolbar-title>
@ -10,9 +10,10 @@
<v-card-text>
<v-text-field v-model="name" label="Name" required></v-text-field>
<input v-model="families"></input>
<input v-model="models"></input>
<input v-model="materials"></input>
<input v-model="category"/>
<input v-model="families"/>
<input v-model="models"/>
<input v-model="materials"/>
</v-card-text>
<v-card-actions>
@ -29,14 +30,16 @@
// https://stackoverflow.com/questions/48035310/open-a-vuetify-dialog-from-a-component-template-in-vuejs
export default {
data: () => ({
//dialog: false
name: 'Trailhead (Men)',
families: '3 product families',
/* name: 'Trailhead (Men)', */
models: '5 models',
materials: '12 materials'
}),
props: {
value: Boolean
value: Boolean,
category: {
type: Number,
required: false
}
},
computed: {
show: {
@ -46,6 +49,19 @@ export default {
set (value) {
this.$emit('input', value)
}
},
name: {
get () {
var section = this.$store.getters.CAT_SECTION(this.category)
return section ? section.name : '(none)'
},
set (value) {
this.$store.dispatch('SET_CAT_SECTION_NAME',
{ id: this.category, name: value })
}
},
families () {
return this.$store.getters.CAT_FAMILIES
}
}
}

68
cateditor/src/components/FancyList.vue
View File

@ -1,20 +1,21 @@
<template>
<v-container fluid grid-list-lg>
<v-layout row>
<v-flex xs4>
<v-flex xs5>
<v-card>
<v-toolbar color="cyan" dense dark>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Items</v-toolbar-title>
<v-toolbar-title>Categories</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon><v-icon>search</v-icon></v-btn>
<v-btn icon><v-icon>add</v-icon></v-btn>
</v-toolbar>
<draggable v-model="items" group="people" @start="drag=true" @end="drag=false">
<div v-for="item in items" :key="item.id">
<draggable v-model="sections" @start="drag=true" @end="drag=false">
<div v-for="item in sections" :key="item.id">
<v-hover>
<v-list-tile :key="item.id" avatar @click=""
slot-scope="{ hover }" :class="`elevation-${hover ? 2 : 0}`">
<v-list-tile
:key="item.id"
slot-scope="{ hover }"
:class="`${hover ? 'grey lighten-4' : ''}`">
<v-list-tile-action>
<v-icon color="black">drag_handle</v-icon>
@ -22,14 +23,16 @@
<v-list-tile-content>
<v-list-tile-title v-html="item.name"></v-list-tile-title>
<v-list-tile-sub-title v-html="item.name"></v-list-tile-sub-title>
<!-- <v-list-tile-sub-title v-html="item.name"></v-list-tile-sub-title> -->
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon>
<v-icon color="blue" small>info</v-icon>
<v-btn icon @click="popInfo(item.id)">
<v-icon small>info</v-icon>
</v-btn>
<v-btn icon ripple>
</v-list-tile-action>
<v-list-tile-action>
<v-btn icon>
<v-icon color="red" small>delete</v-icon>
</v-btn>
</v-list-tile-action>
@ -41,17 +44,11 @@
</v-card>
</v-flex>
<v-flex xs3>
<v-btn color="red lighten-2" dark @click="showCatPopup = true" >
Click Me
</v-btn>
<CategoryPopup v-model="showCatPopup"/>
<v-flex xs5>
<RawDisplayer :value="sections" title="Data" />
</v-flex>
<v-flex xs3>
<RawDisplayer :value="items" title="List" />
</v-flex>
<CategoryPopup v-model="showCatPopup" v-bind:category="selectedCategory"/>
</v-layout>
</v-container>
@ -68,26 +65,27 @@ export default {
CategoryPopup,
RawDisplayer
},
props: {
selected: Number
},
data: () => ({
items: [{ id: 12, name: 'twelve' },
{ id: 42, name: 'forty two' },
{ id: 19, name: 'nineteen' }
],
showCatPopup: true,
dragging: false
showCatPopup: false,
selectedCategory: null
}),
computed: {
draggingInfo() {
return this.dragging ? "under drag" : "";
sections: {
get () {
return this.$store.getters.CAT_SECTIONS
},
set (value) {
this.$store.dispatch('SET_CAT_SECTIONS', value)
}
}
},
methods: {
removeAt(idx) {
this.list.splice(idx, 1);
},
add: function() {
id++;
this.list.push({ name: "Juan " + id, id, text: "" });
popInfo: function (id) {
this.selectedCategory = id
this.showCatPopup = true
}
}
}

2
cateditor/src/main.js
View File

@ -1,7 +1,7 @@
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import store from './store'
import { store } from './store'
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
Vue.config.productionTip = false

16
cateditor/src/store.js
View File

@ -1,16 +0,0 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
}
})

54
cateditor/src/store/index.js Normal file
View File

@ -0,0 +1,54 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
catalog: {
name: 'my catalog',
sections: [{ id: 1, name: 'trailhead (men)' },
{ id: 2, name: 'trailhead (women)' },
{ id: 3, name: 'waterfront (men)' },
{ id: 4, name: 'waterfront (women)' }],
families: 5,
models: 12,
materials: 27
}
},
getters: {
CAT_NAME: state => {
return state.catalog.name
},
CAT_SECTIONS: state => {
return state.catalog.sections
},
CAT_SECTION: (state) => (id) => {
return state.catalog.sections.find(s => s.id === id)
},
CAT_FAMILIES: state => {
return state.catalog.families + ' product families'
}
},
mutations: {
SET_CAT_SECTIONS: (state, payload) => {
state.catalog.sections = payload
},
SET_CAT_SECTION_NAME: (state, payload) => {
var section = state.catalog.sections.find(s => s.id === payload.id)
section.name = payload.name
}
},
actions: {
SET_CAT_SECTIONS: (context, payload) => {
context.commit('SET_CAT_SECTIONS', payload)
},
SET_CAT_SECTION_NAME: (context, payload) => {
context.commit('SET_CAT_SECTION_NAME', payload)
}
// SAVE_TODO : async (context,payload) => {
// let { data } = await Axios.post('http://yourwebsite.com/api/todo')
// context.commit('ADD_TODO',payload)
// },
}
})