Adds item creation via api to Item Creation Page.
This commit is contained in:
parent
961ed8debd
commit
81e54a9dcf
|
@ -1400,9 +1400,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"commander": {
|
||||
"version": "2.12.2",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.12.2.tgz",
|
||||
"integrity": "sha512-BFnaq5ZOGcDN7FlrtBT4xxkgIToalIIxwjxLWVJ8bGTpe1LroqMiqQXdA7ygc7CRvaYS+9zfPGFnJqFSayx+AA==",
|
||||
"version": "2.13.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz",
|
||||
"integrity": "sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==",
|
||||
"dev": true
|
||||
},
|
||||
"commondir": {
|
||||
|
@ -1849,7 +1849,7 @@
|
|||
"dev": true,
|
||||
"requires": {
|
||||
"bluebird": "3.5.1",
|
||||
"commander": "2.12.2",
|
||||
"commander": "2.13.0",
|
||||
"lru-cache": "3.2.0",
|
||||
"semver": "5.4.1",
|
||||
"sigmund": "1.0.1"
|
||||
|
@ -3565,9 +3565,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"js-beautify": {
|
||||
"version": "1.7.4",
|
||||
"resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.7.4.tgz",
|
||||
"integrity": "sha512-6YX1g+lIl0/JDxjFFbgj7fz6i0bWFa2Hdc7PfGqFhynaEiYe1NJ3R1nda0VGaRiGU82OllR+EGDoWFpGr3k5Kg==",
|
||||
"version": "1.7.5",
|
||||
"resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.7.5.tgz",
|
||||
"integrity": "sha512-9OhfAqGOrD7hoQBLJMTA+BKuKmoEtTJXzZ7WDF/9gvjtey1koVLuZqIY6c51aPDjbNdNtIXAkiWKVhziawE9Og==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"config-chain": "1.1.11",
|
||||
|
@ -6018,9 +6018,9 @@
|
|||
}
|
||||
},
|
||||
"vue": {
|
||||
"version": "2.5.9",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.9.tgz",
|
||||
"integrity": "sha512-9B9XBpCtj8y5eJFrspIcKxIWt+lG9FMdF8qgyOlUeOIvcS4xSAvcARygbzHA6Pi0KWFj4BvxjtWbuPVWRx/wuA=="
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.2.tgz",
|
||||
"integrity": "sha512-Au9rf8fPkBulFHfZ406UaQDd1jH9fqGRIM+0IHilrXnJ/0TeeMH4SBkNxWf2dGevl2S3aVeu0E/WklEv0/msag=="
|
||||
},
|
||||
"vue-custom-element": {
|
||||
"version": "1.4.4",
|
||||
|
@ -6034,8 +6034,16 @@
|
|||
"es6-promise": "4.2.4",
|
||||
"prismjs": "1.10.0",
|
||||
"set-prototype-of": "1.0.0",
|
||||
"vue": "2.5.9",
|
||||
"vue": "2.5.13",
|
||||
"vue-router": "3.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": {
|
||||
"version": "2.5.13",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.13.tgz",
|
||||
"integrity": "sha512-3D+lY7HTkKbtswDM4BBHgqyq+qo8IAEE8lz8va1dz3LLmttjgo0FxairO4r1iN2OBqk8o1FyL4hvzzTFEdQSEw==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-hot-reload-api": {
|
||||
|
@ -6052,7 +6060,7 @@
|
|||
"requires": {
|
||||
"consolidate": "0.14.5",
|
||||
"hash-sum": "1.0.2",
|
||||
"js-beautify": "1.7.4",
|
||||
"js-beautify": "1.7.5",
|
||||
"loader-utils": "0.2.17",
|
||||
"lru-cache": "4.1.1",
|
||||
"object-assign": "4.1.1",
|
||||
|
@ -6061,7 +6069,7 @@
|
|||
"source-map": "0.5.7",
|
||||
"vue-hot-reload-api": "2.2.4",
|
||||
"vue-style-loader": "1.0.0",
|
||||
"vue-template-compiler": "2.5.9",
|
||||
"vue-template-compiler": "2.5.2",
|
||||
"vue-template-es2015-compiler": "1.6.0"
|
||||
}
|
||||
},
|
||||
|
@ -6081,9 +6089,9 @@
|
|||
}
|
||||
},
|
||||
"vue-template-compiler": {
|
||||
"version": "2.5.9",
|
||||
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.5.9.tgz",
|
||||
"integrity": "sha512-Icev7QPuQ3flpOvxMe09irgXPklBi/VpiveUDs5nRVH5GA8R9asLBlahsA7AuRZQbaty0cGKm6kh/icDLcr93w==",
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.5.2.tgz",
|
||||
"integrity": "sha512-FtbqBWvEANPZaeRo09VKEF7tET4kPMtJYqwsy/Nm1fdr1zIcwcTI7CXqeraXMviczho5IjtxZ6Fab1Enm4rHmA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"de-indent": "1.0.2",
|
||||
|
|
|
@ -2,13 +2,13 @@
|
|||
<div>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="itens"
|
||||
:data="items"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55">
|
||||
</el-table-column>
|
||||
<el-table-column label="Nome" show-overflow-tooltip>
|
||||
<template slot-scope="scope"><router-link :to="`/itens/${scope.row.id}`" tag="a">{{ scope.row.name }}</router-link></template>
|
||||
<template slot-scope="scope"><router-link :to="`/items/${scope.row.id}`" tag="a">{{ scope.row.name }}</router-link></template>
|
||||
</el-table-column>
|
||||
<el-table-column property="description" label="Descrição" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
@ -26,7 +26,7 @@
|
|||
import { mapActions, mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'ItensList',
|
||||
name: 'ItemsList',
|
||||
data(){
|
||||
return {
|
||||
multipleSelection: []
|
||||
|
@ -34,10 +34,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
...mapActions('item', [
|
||||
'fetchItens'
|
||||
'fetchItems'
|
||||
]),
|
||||
...mapGetters('item', [
|
||||
'getItens'
|
||||
'getItems'
|
||||
]),
|
||||
handleSelectionChange(value) {
|
||||
this.multipleSelection = value;
|
||||
|
@ -50,12 +50,12 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
itens(){
|
||||
return this.getItens();
|
||||
items(){
|
||||
return this.getItems();
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.fetchItens();
|
||||
this.fetchItems();
|
||||
}
|
||||
|
||||
}
|
|
@ -6,7 +6,7 @@ import CollectionPage from '../pages/collection-page.vue'
|
|||
import ItemCreationPage from '../pages/item-creation-page.vue'
|
||||
|
||||
import CollectionsList from '../components/collections-list.vue'
|
||||
import ItensList from '../components/itens-list.vue'
|
||||
import ItemsList from '../components/items-list.vue'
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
|
@ -14,11 +14,11 @@ const routes = [
|
|||
{ path: '/', component: CollectionsList },
|
||||
{ path: '/collections', component: CollectionsList },
|
||||
{ path: '/collections/:id', component: CollectionPage, children: [
|
||||
{ path: 'itens-list', component: ItensList }
|
||||
{ path: 'items-list', component: ItemsList }
|
||||
|
||||
]
|
||||
},
|
||||
{ path: '/collections/:id/itens/create', component: ItemCreationPage },
|
||||
{ path: '/collections/:id/items/create', component: ItemCreationPage },
|
||||
{ path: '*', redirect: '/'}
|
||||
]
|
||||
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<div class="bottom clearfix">
|
||||
<time class="time">{{collection.description}}</time>
|
||||
<el-button type="text">Lista de Itens</el-button>
|
||||
<router-link tag="el-button" :to="`/collections/${collection.id}/itens/create`">Criar Item</router-link>
|
||||
<router-link tag="el-button" :to="{ path: `/collections/${collection.id}/items/create`, params: { collection_id: collection.id }}">Criar Item</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
|
@ -2,11 +2,11 @@
|
|||
<div>
|
||||
<h2>Item creation</h2>
|
||||
<el-form ref="form" :model="form" label-width="120px">
|
||||
<el-form-item label="Nome">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
<el-form-item label="Título">
|
||||
<el-input v-model="form.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Descrição">
|
||||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
<el-input type="textarea" v-model="form.description"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Status">
|
||||
<el-select v-model="form.status" placeholder="Selecione um status">
|
||||
|
@ -46,10 +46,12 @@ export default {
|
|||
name: 'ItemCreationPage',
|
||||
data(){
|
||||
return {
|
||||
collectionId: Number,
|
||||
form: {
|
||||
name: '',
|
||||
collectionId: Number,
|
||||
title: '',
|
||||
status: '',
|
||||
desc: ''
|
||||
description: ''
|
||||
},
|
||||
// can be obtained from api later
|
||||
statusOptions: [{
|
||||
|
@ -67,21 +69,21 @@ export default {
|
|||
}]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
},
|
||||
methods: {
|
||||
...mapActions('item', [
|
||||
'fetchItens'
|
||||
]),
|
||||
...mapGetters('item', [
|
||||
'getItens'
|
||||
'sendItem'
|
||||
]),
|
||||
onSubmit() {
|
||||
|
||||
let data = {collection_id: this.form.collectionId, title: this.form.title, description: this.form.description, status: this.form.status};
|
||||
this.sendItem(data);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
created(){
|
||||
this.collectionId = this.$route.params.id;
|
||||
this.form.collectionId = this.collectionId;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
/* theme color */
|
||||
$--color-primary: teal;
|
||||
$--color-primary:#25a189;
|
||||
$--color-secondary: #01295c;
|
||||
|
||||
/* icon font path, required */
|
||||
//$--font-path: '../../assets/css/fonts/material-icons.css';
|
||||
|
|
|
@ -2,7 +2,7 @@ import axios from '../../../axios/axios';
|
|||
|
||||
export const sendMetadata = ( { commit }, { item_id, metadata_id, values }) => {
|
||||
return new Promise( ( resolve, reject ) => {
|
||||
axios.post('/metadata/item/'+item_id, {
|
||||
axios.post('/item/'+item_id+'/metadata/', {
|
||||
metadata_id: metadata_id,
|
||||
values: values
|
||||
})
|
||||
|
@ -24,4 +24,31 @@ export const sendMetadata = ( { commit }, { item_id, metadata_id, values }) => {
|
|||
|
||||
export const updateMetadata = ({ commit }, { item_id, metadata_id, values }) => {
|
||||
commit('setSingleMetadata', { item_id: item_id, metadata_id: metadata_id, values: values });
|
||||
};
|
||||
};
|
||||
|
||||
export const sendItem= ( { commit }, { collection_id, title, description, status }) => {
|
||||
return new Promise(( resolve, reject ) => {
|
||||
axios.post('/collection/'+ collection_id + '/items/', {
|
||||
title: title,
|
||||
description: description,
|
||||
status: status
|
||||
})
|
||||
.then( res => {
|
||||
console.log( 'success',res.data );
|
||||
commit('setSingleItem', { collection_id: collection_id, title: title, description: description, status: status });
|
||||
commit('removeError', { collection_id });
|
||||
resolve( res.data );
|
||||
})
|
||||
.catch(error => {
|
||||
console.log( 'error',error.response );
|
||||
commit('setSingleItem', { collection_id: collection_id, title: title, description: description, status: status });
|
||||
commit('setError', { collection_id: collection_id, title: title, description: description, status: status, error: error.response.data.errors });
|
||||
reject( error.response );
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
export const updateItem = ({ commit }, { item_id, metadata_id, values }) => {
|
||||
commit('setSingleItem', { collection_id: collection_id, title: title, description: description, status: status });
|
||||
};
|
|
@ -3,6 +3,10 @@ export const getMetadata = state => {
|
|||
return state.metadata;
|
||||
}
|
||||
|
||||
export const getItem = state => {
|
||||
return state.item;
|
||||
}
|
||||
|
||||
export const getError = state => {
|
||||
return state.error;
|
||||
}
|
|
@ -3,7 +3,7 @@ import * as getters from './getters';
|
|||
import * as mutations from './mutations';
|
||||
|
||||
const state = {
|
||||
item: null,
|
||||
item: [],
|
||||
metadata: [],
|
||||
error: []
|
||||
};
|
||||
|
|
|
@ -18,6 +18,16 @@ export const setSingleMetadata = ( state, metadata) => {
|
|||
}
|
||||
}
|
||||
|
||||
export const setSingleItem = ( state, item) => {
|
||||
let index = state.item.findIndex(itemItem => itemItem.item_id === item.item_id);
|
||||
if ( index >= 0){
|
||||
//state.metadata[index] = metadata;
|
||||
Vue.set( state.item, index, item );
|
||||
}else{
|
||||
state.item.push( item );
|
||||
}
|
||||
}
|
||||
|
||||
export const setError = ( state, metadata ) => {
|
||||
let index = state.error.findIndex(itemMetadata => itemMetadata.metadata_id === metadata.metadata_id);
|
||||
if ( index >= 0){
|
||||
|
|
Loading…
Reference in New Issue