Adds CollectionEditionPage with basic collection edition (name, description and status).

This commit is contained in:
mateuswetah 2018-02-07 16:53:33 -02:00
parent 836184482f
commit ace19d4453
6 changed files with 248 additions and 18 deletions

View File

@ -14,7 +14,6 @@
</template>
</b-table-column>
<b-table-column label="Nome" field="props.row.name" sortable show-overflow-tooltip>
<router-link :to="`/collections/${props.row.id}`" tag="a">{{ props.row.name }}</router-link>
</b-table-column>
@ -25,10 +24,8 @@
<b-table-column label="Ações">
<a @click.native="shareCollection(scope.row.id)">
<b-icon icon="share">
</a>
<a @click.native="showMoreCollection(scope.row.id)">
<router-link :to="`/collections/${props.row.id}/edit`" tag="a"><b-icon icon="pencil"></router-link>
<a @click.native="showMoreCollection(props.row.id)">
<b-icon icon="dots-vertical">
</a>
</b-table-column>
@ -61,9 +58,6 @@ export default {
]),
handleSelectionChange(value) {
this.multipleSelection = value;
},
shareCollection(collectionId) {
},
showMoreCollection(collectionId) {

View File

@ -26,9 +26,7 @@
<b-table-column label="Ações">
<a @click.native="shareItem(props.row.id)">
<b-icon icon="share">
</a>
<router-link :to="`/collections/${collectionId}/items/${props.row.id}/edit`" tag="a"><b-icon icon="pencil"></router-link>
<a @click.native="showMoreItem(props.row.id)">
<b-icon icon="dots-vertical">
</a>

View File

@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
import AdminPage from '../admin.vue'
import CollectionPage from '../pages/collection-page.vue'
import CollectionEditionPage from '../pages/collection-edition-page.vue'
import ItemPage from '../pages/item-page.vue'
import ItemEditionPage from '../pages/item-edition-page.vue'
@ -19,6 +20,8 @@ const routes = [
],
meta: { title: 'Collection Page' }
},
{ path: '/collections/new', component: CollectionEditionPage, meta: {title: 'Create Collection'} },
{ path: '/collections/:id/edit', component: CollectionEditionPage, meta: {title: 'Create Collection'} },
{ path: '/collections/:id/items/new', component: ItemEditionPage, meta: {title: 'Create Item'} },
{ path: '/collections/:collection_id/items/:id/edit', component: ItemEditionPage, meta: {title: 'Edit Item'} },
{ path: '/collections/:collection_id/items/:id', component: ItemPage, meta: {title: 'Item Page'} },

View File

@ -0,0 +1,214 @@
<template>
<div>
<h1 class="is-size-3">Collection creation <b-tag v-if="collection != null && collection != undefined" :type="'is-' + getStatusColor(collection.status)" v-text="collection.status"></b-tag></h1>
<form label-width="120px">
<b-field label="Título">
<b-input
v-model="form.name">
</b-input>
</b-field>
<b-field label="Descrição">
<b-input
type="textarea"
v-model="form.description"
>
</b-input>
</b-field>
<b-field label="Status">
<b-select
v-model="form.status"
placeholder="Selecione um status">
<option
v-for="statusOption in statusOptions"
:key="statusOption.value"
:value="statusOption.value"
:disabled="statusOption.disabled">{{ statusOption.label }}
</option>
</b-select>
</b-field>
<b-field
label="Imagem">
<b-upload v-model="form.files"
multiple
drag-drop>
<section class="section">
<div class="content has-text-centered">
<p>
<b-icon
icon="upload"
size="is-large">
</b-icon>
</p>
<p>Arraste uma imagem aqui <em>ou clique para enviar</em></p>
</div>
</section>
</b-upload>
</b-field>
<!--<tainacan-form-item
v-for="(field, index) in fieldList"
v-bind:key="index"
:field="field"></tainacan-form-item>-->
<button
class="button"
type="button"
@click="cancelBack">Cancelar</button>
<a
@click="onSubmit"
class="button is-success is-hovered">Salvar</a>
</form>
<b-loading :active.sync="isLoading" :canCancel="false">
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
name: 'CollectionEditionPage',
data(){
return {
collectionId: Number,
collection: null,
isLoading: false,
form: {
name: '',
status: '',
description: '',
files:[]
},
// Can be obtained from api later
statusOptions: [{
value: 'publish',
label: 'Publicado'
}, {
value: 'draft',
label: 'Rascunho'
}, {
value: 'private',
label: 'Privado'
}, {
value: 'trash',
label: 'Lixo'
}]
}
},
methods: {
...mapActions('collection', [
'sendCollection',
'updateCollection',
'fetchCollection',
'fetchFields',
'sendField',
'cleanFields'
]),
...mapGetters('collection',[
'getFields',
'getCollection'
]),
onSubmit() {
// Puts loading on Draft Collection creation
this.isLoading = true;
let data = {collection_id: this.collectionId, name: this.form.name, description: this.form.description, status: this.form.status};
this.updateCollection(data).then(updatedCollection => {
this.collection = updatedCollection;
// Fill this.form data with current data.
this.form.name = this.collection.name;
this.form.description = this.collection.description;
this.form.status = this.collection.status;
this.isLoading = false;
this.$router.push('/collections/' + this.collectionId);
});
},
getStatusColor(status) {
switch(status) {
case 'publish':
return 'success'
case 'draft':
return 'info'
case 'private':
return 'warning'
case 'trash':
return 'danger'
default:
return 'info'
}
},
createCollection() {
// Puts loading on Draft Collection creation
this.isLoading = true;
// Creates draft Collection
let data = { title: '', description: '', status: 'draft'};
this.sendCollection(data).then(res => {
this.collectionId = res.id;
this.collection = res;
// Fill this.form data with current data.
this.form.name = this.collection.name;
this.form.description = this.collection.description;
this.form.status = this.collection.status;
//this.loadMetadata();
})
.catch(error => console.log(error));
},
loadMetadata() {
// Obtains Collection Field
this.fetchFields(this.collectionId).then(res => {
this.isLoading = false;
});
},
cancelBack(){
this.$router.push('/collections/' + this.collectionId);
}
},
computed: {
// fieldList(){
// return this.getFields();
// }
},
created(){
this.cleanFields();
if (this.$route.fullPath.split("/").pop() == "new") {
this.createNewCollection();
} else if (this.$route.fullPath.split("/").pop() == "edit") {
this.isLoading = true;
// Obtains current Collection ID from URL
this.pathArray = this.$route.fullPath.split("/").reverse();
this.collectionId = this.pathArray[1];
this.fetchCollection(this.collectionId).then(res => {
this.collection = res;
// Fill this.form data with current data.
this.form.name = this.collection.name;
this.form.description = this.collection.description;
this.form.status = this.collection.status;
this.isLoading = false; //this.loadMetadata();
});
}
}
}
</script>
<style scoped>
</style>

View File

@ -112,7 +112,6 @@ export default {
onSubmit() {
// Puts loading on Draft Item creation
this.isLoading = true;
let loadingInstance = this;
let data = {item_id: this.itemId, title: this.form.title, description: this.form.description, status: this.form.status};
this.updateItem(data).then(updatedItem => {
@ -124,7 +123,7 @@ export default {
this.form.description = this.item.description;
this.form.status = this.item.status;
loadingInstance.isLoading = false;
this.isLoading = false;
this.$router.push('/collections/' + this.form.collectionId + '/items/' + this.itemId);
});
@ -146,7 +145,6 @@ export default {
createNewItem() {
// Puts loading on Draft Item creation
this.isLoading = true;
let loadingInstance = this;
// Creates draft Item
let data = {collection_id: this.form.collectionId, title: '', description: '', status: 'draft'};
@ -191,7 +189,6 @@ export default {
} else if (this.$route.fullPath.split("/").pop() == "edit") {
this.isLoading = true;
let loadingInstance = this;
// Obtains current Item ID from URL
this.pathArray = this.$route.fullPath.split("/").reverse();

View File

@ -19,10 +19,34 @@ export const fetchCollections = ({ commit }) => {
}
export const fetchCollection = ({ commit }, id) => {
return new Promise((resolve, reject) =>{
axios.get('/collections/' + id)
.then(res => {
console.log(res);
let collection = res.data;
commit('setCollection', collection);
resolve( res.data );
})
.catch(error => console.log(error));
.catch(error => {
console.log(error);
reject(error);
})
});
}
export const updateCollection = ({ commit }, { collection_id, name, description, status }) => {
return new Promise((resolve, reject) => {
axios.patch('/collections/' + collection_id, {
name: name,
description: description,
status: status
}).then( res => {
commit('setCollection', { id: collection_id, name: name, description: description, status: status });
resolve( res.data );
}).catch( error => {
commit('setCollection', { id: collection_id, name: name, description: description, status: status });
reject( error.response );
});
});
}