tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds item creation via api to Item Creation Page.

This commit is contained in:
mateuswetah 2018-01-26 10:25:14 -02:00
parent 961ed8debd
commit 81e54a9dcf
10 changed files with 95 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
package-lock.json generated
View File

@ -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",

16
src/admin/components/itens-list.vue → src/admin/components/items-list.vue
View File

@ -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
src/admin/js/router.js
View File

@ -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: '/'}
]

2
src/admin/pages/collection-page.vue
View File

@ -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>

24
src/admin/pages/item-creation-page.vue
View File

@ -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;
}
}

3
src/admin/scss/tainacan-admin.scss
View File

@ -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';

29
src/js/store/modules/item/actions.js
View File

@ -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
})
@ -25,3 +25,30 @@ 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 });
};

4
src/js/store/modules/item/getters.js
View File

@ -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;
}

2
src/js/store/modules/item/index.js
View File

@ -3,7 +3,7 @@ import * as getters from './getters';
import * as mutations from './mutations';
const state = {
item: null,
item: [],
metadata: [],
error: []
};

10
src/js/store/modules/item/mutations.js
View File

@ -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){