Adds CollectionEditionPage with basic collection edition (name, description and status).
This commit is contained in:
mateuswetah
parent
836184482f
commit
ace19d4453
|
|
@ -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) {
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'} },
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -19,10 +19,34 @@ export const fetchCollections = ({ commit }) => {
|
|||
}
|
||||
|
||||
export const fetchCollection = ({ commit }, id) => {
|
||||
axios.get('/collections/' + 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 );
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue