Uses routerHelper on all existing router-links and router.push. Removes CollectionFieldsEditPage and moves it's content to FieldsList component. It should be reusable on Repository level inside FieldsPage.
This commit is contained in:
mateuswetah
parent
640f1ffb01
commit
6b0e7f2a8d
|
|
@ -37,6 +37,12 @@
|
|||
margin: 0 auto;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
& {
|
||||
overflow-y: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,218 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Fields List</h1>
|
||||
</div>
|
||||
<h1>Fields List and Edition Component</h1>
|
||||
<b-loading :active.sync="isLoadingFieldTypes"></b-loading>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<b-field :label="$i18n.get('label_active_fields')" is-grouped>
|
||||
<draggable
|
||||
class="box active-fields-area"
|
||||
@change="handleChange"
|
||||
:class="{'fields-area-receive': isDraggingFromAvailable}"
|
||||
:list="activeFieldList"
|
||||
:options="{group:'fields', chosenClass: 'sortable-chosen', filter: '.not-sortable-item'}">
|
||||
<div
|
||||
class="active-field-item"
|
||||
:class="{'not-sortable-item': field.id == undefined}"
|
||||
v-for="(field, index) in activeFieldList" :key="index">
|
||||
{{ field.name }}
|
||||
<span class="label-details"><span class="loading-spinner" v-if="field.id == undefined"></span> <b-tag v-if="field.status != undefined">{{field.status}}</b-tag></span>
|
||||
<a @click.prevent="removeField(field)" v-if="field.id != undefined"><b-icon is-small icon="delete"></b-icon></a>
|
||||
<b-icon is-small icon="pencil" v-if="field.id != undefined"></b-icon>
|
||||
</div>
|
||||
<div class="not-sortable-item" slot="footer">Drag and drop Fields here to add them to Collection.</div>
|
||||
</draggable>
|
||||
</b-field>
|
||||
</div>
|
||||
<div class="column">
|
||||
<b-field :label="$i18n.get('label_available_fields')" is-grouped>
|
||||
<draggable class="box available-fields-area" :list="availableFieldList" :options="{ sort: false, group: { name:'fields', pull: 'clone', put: 'false', revertClone: 'true' }}">
|
||||
<div class="available-field-item" v-for="(field, index) in availableFieldList" :key="index">
|
||||
{{ field.name }}
|
||||
</div>
|
||||
</draggable>
|
||||
</b-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'FieldsList',
|
||||
data(){
|
||||
data(){
|
||||
return {
|
||||
collectionId: '',
|
||||
isDraggingFromAvailable: false,
|
||||
isLoadingFieldTypes: true,
|
||||
isLoadingFields: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('collection', [
|
||||
'fetchFieldTypes',
|
||||
'fetchFields',
|
||||
'sendField',
|
||||
'deleteField',
|
||||
'updateCollectionFieldsOrder'
|
||||
]),
|
||||
...mapGetters('collection',[
|
||||
'getFieldTypes',
|
||||
'getFields'
|
||||
]),
|
||||
handleChange($event) {
|
||||
if ($event.added) {
|
||||
this.addNewField($event.added.element, $event.added.newIndex);
|
||||
} else if ($event.removed) {
|
||||
this.removeField($event.removed.element);
|
||||
} else if ($event.moved) {
|
||||
this.updateFieldsOrder();
|
||||
}
|
||||
},
|
||||
updateFieldsOrder() {
|
||||
let fieldsOrder = [];
|
||||
for (let field of this.activeFieldList) {
|
||||
fieldsOrder.push({'id': field.id, 'enabled': true});
|
||||
}
|
||||
this.updateCollectionFieldsOrder({ collectionId: this.collectionId, fieldsOrder: fieldsOrder });
|
||||
},
|
||||
addNewField(newField, newIndex) {
|
||||
this.sendField({collectionId: this.collectionId, name: newField.name, fieldType: newField.className, status: 'auto-draft'})
|
||||
.then((field) => {
|
||||
this.activeFieldList.splice(newIndex, 1, field);
|
||||
this.updateFieldsOrder();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
removeField(removedField) {
|
||||
this.deleteField({ collectionId: this.collectionId, fieldId: removedField.id })
|
||||
.then((field) => {
|
||||
let index = this.activeFieldList.findIndex(deletedField => deletedField.id === field.id);
|
||||
if (index >= 0) {
|
||||
this.activeFieldList.splice(index, 1);
|
||||
}
|
||||
this.updateFieldsOrder();
|
||||
})
|
||||
.catch((error) => {
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
availableFieldList() {
|
||||
return this.getFieldTypes();
|
||||
},
|
||||
activeFieldList() {
|
||||
return this.getFields();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.isLoadingFieldTypes = true;
|
||||
this.isLoadingFields = true;
|
||||
|
||||
this.collectionId = this.$route.params.id;
|
||||
|
||||
this.fetchFieldTypes()
|
||||
.then((res) => {
|
||||
this.isLoadingFieldTypes = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
this.isLoadingFieldTypes = false;
|
||||
});
|
||||
this.fetchFields(this.collectionId)
|
||||
.then((res) => {
|
||||
this.isLoadingFields = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
this.isLoadingFields = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import "../scss/_variables.scss";
|
||||
|
||||
.active-fields-area {
|
||||
min-height: 40px;
|
||||
padding: 10px;
|
||||
|
||||
&.fields-area-receive {
|
||||
background-color: whitesmoke;
|
||||
border: 1px dashed gray;
|
||||
}
|
||||
|
||||
.active-field-item {
|
||||
background-color: white;
|
||||
padding: 0.2em 0.5em;
|
||||
margin: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid gainsboro;
|
||||
display: block;
|
||||
cursor: grab;
|
||||
.icon { float: right }
|
||||
.label-details {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
animation: spinAround 500ms infinite linear;
|
||||
border: 2px solid #dbdbdb;
|
||||
border-radius: 290486px;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
&.not-sortable-item {
|
||||
color: gray;
|
||||
cursor: wait;
|
||||
}
|
||||
}
|
||||
.active-field-item:hover {
|
||||
box-shadow: 0px 0px 2px #777;
|
||||
}
|
||||
|
||||
.sortable-chosen {
|
||||
background-color: $primary-lighter;
|
||||
padding: 0.2em 0.5em;
|
||||
margin: 10px;
|
||||
border-radius: 5px;
|
||||
border: 2px dashed $primary-light;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.available-fields-area {
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: whitesmoke;
|
||||
|
||||
.available-field-item {
|
||||
padding: 0.2em 0.5em;
|
||||
margin: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
border: 1px solid gainsboro;
|
||||
display: inline-flex;
|
||||
cursor: grab;
|
||||
}
|
||||
.available-field-item:hover {
|
||||
border: 1px solid lightgrey;
|
||||
box-shadow: 0px 0px 2px #777;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
<router-link
|
||||
id="button-create"
|
||||
tag="button" class="button is-primary"
|
||||
:to="{ path: `/collections/${collectionId}/items/new` }">
|
||||
:to="{ path: $routerHelper.getNewItemPath(collectionId) }">
|
||||
Criar Item
|
||||
</router-link>
|
||||
</div>
|
||||
|
|
@ -186,10 +186,10 @@ export default {
|
|||
this.loadItems();
|
||||
},
|
||||
goToItemPage(itemId) {
|
||||
this.$router.push(`/collections/${this.collectionId}/items/${itemId}`);
|
||||
this.$router.push(this.$routerHelper.getItemPath(this.collectionId, itemId));
|
||||
},
|
||||
goToItemEditPage(itemId) {
|
||||
this.$router.push(`/collections/${this.collectionId}/items/${itemId}/edit`);
|
||||
this.$router.push(this.$routerHelper.getItemEditPath(this.collectionId, itemId));
|
||||
},
|
||||
onPageChange(page) {
|
||||
this.page = page;
|
||||
|
|
|
|||
|
|
@ -9,16 +9,16 @@
|
|||
</div>
|
||||
|
||||
<ul class="menu-list">
|
||||
<li><router-link tag="a" :to="{ path: `/collections/${id}/items`}" :class="activeRoute == 'ItemsList' ? 'is-active':''" :aria-label="$i18n.get('collection') + ' ' + $i18n.get('items')">
|
||||
<li><router-link tag="a" :to="{ path: $routerHelper.getCollectionItemsPath(id, '') }" :class="activeRoute == 'ItemsList' ? 'is-active':''" :aria-label="$i18n.get('collection') + ' ' + $i18n.get('items')">
|
||||
{{ $i18n.get('items')}}
|
||||
</router-link></li>
|
||||
<li><router-link tag="a" :to="{ path: `/collections/${id}/edit`}" :class="activeRoute == 'CollectionEditionPage' ? 'is-active':''" :aria-label="$i18n.get('edit') + ' ' + $i18n.get('collection')">
|
||||
<li><router-link tag="a" :to="{ path: $routerHelper.getCollectionEditPath(id) }" :class="activeRoute == 'CollectionEditionPage' ? 'is-active':''" :aria-label="$i18n.get('edit') + ' ' + $i18n.get('collection')">
|
||||
{{ $i18n.get('edit')}}
|
||||
</router-link></li>
|
||||
<li><router-link tag="a" :to="{ path: `/collections/${id}/fields`}" :class="activeRoute == 'FieldsList' ? 'is-active':''" :aria-label="$i18n.get('collection') + ' ' + $i18n.get('fields')">
|
||||
<li><router-link tag="a" :to="{ path: $routerHelper.getCollectionFieldsPath(id) }" :class="activeRoute == 'FieldsList' ? 'is-active':''" :aria-label="$i18n.get('collection') + ' ' + $i18n.get('fields')">
|
||||
{{ $i18n.get('fields')}}
|
||||
</router-link></li>
|
||||
<li><router-link tag="a" :to="{ path: `/collections/${id}/filters`}" :class="activeRoute == 'FiltersList' ? 'is-active':''" :aria-label="$i18n.get('collection') + ' ' + $i18n.get('filters')">
|
||||
<li><router-link tag="a" :to="{ path: $routerHelper.getCollectionFiltersPath(id) }" :class="activeRoute == 'FiltersList' ? 'is-active':''" :aria-label="$i18n.get('collection') + ' ' + $i18n.get('filters')">
|
||||
{{ $i18n.get('filters')}}
|
||||
</router-link></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import AdminPage from '../admin.vue'
|
|||
import CollectionsPage from '../pages/lists/collections-page.vue'
|
||||
import CollectionPage from '../pages/singles/collection-page.vue'
|
||||
import CollectionEditionPage from '../pages/edition/collection-edition-page.vue'
|
||||
import CollectionFieldsEditionPage from '../pages/edition/collection-fields-edition-page.vue'
|
||||
import ItemsPage from '../pages/lists/items-page.vue'
|
||||
import ItemPage from '../pages/singles/item-page.vue'
|
||||
import ItemEditionPage from '../pages/edition/item-edition-page.vue'
|
||||
|
|
@ -40,7 +39,7 @@ const routes = [
|
|||
{ path: '', redirect: 'items'},
|
||||
{ path: 'items', component: ItemsList, name: 'ItemsList', meta: {title: i18nGet('title_collection_page')} },
|
||||
{ path: 'edit', component: CollectionEditionPage, name: 'CollectionEditionPage', meta: {title: i18nGet('title_collection_edition')} },
|
||||
{ path: 'fields', component: CollectionFieldsEditionPage, name: 'CollectionFieldsEditionPage', meta: {title: i18nGet('title_collection_fields_edition')} },
|
||||
{ path: 'fields', component: FieldsList, name: 'FieldsList', meta: {title: i18nGet('title_collection_fields_edition')} },
|
||||
{ path: 'filters', component: FiltersList, name: 'FiltersList', meta: {title: i18nGet('title_collection_page')} }
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -23,7 +23,13 @@ RouterHelperPlugin.install = function (Vue, options = {}) {
|
|||
return '/collections/?' + qs.stringify(query);
|
||||
},
|
||||
getCollectionItemsPath(collectionId, query) {
|
||||
return 'collections/'+ collectionId + '/items/?' + qs.stringify(query);
|
||||
return '/collections/'+ collectionId + '/items/?' + qs.stringify(query);
|
||||
},
|
||||
getCollectionFieldsPath(collectionId) {
|
||||
return '/collections/'+ collectionId + '/fields/';
|
||||
},
|
||||
getCollectionFiltersPath(collectionId) {
|
||||
return '/collections/'+ collectionId + '/filters/';
|
||||
},
|
||||
getItemsPath(query) {
|
||||
return '/items/?' + qs.stringify(query);
|
||||
|
|
@ -66,7 +72,7 @@ RouterHelperPlugin.install = function (Vue, options = {}) {
|
|||
getNewCollectionPath() {
|
||||
return '/collections/new';
|
||||
},
|
||||
getNewItemPath() {
|
||||
getNewItemPath(collectionId) {
|
||||
return '/collections/' + collectionId + '/items/new';
|
||||
},
|
||||
getNewFilterPath() {
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ export default {
|
|||
|
||||
this.isLoading = false;
|
||||
|
||||
this.$router.push('/collections/' + this.collectionId);
|
||||
this.$router.push(this.$routerHelper.getCollectionPath(this.collectionId));
|
||||
});
|
||||
},
|
||||
getStatusColor(status) {
|
||||
|
|
@ -159,7 +159,7 @@ export default {
|
|||
.catch(error => console.log(error));
|
||||
},
|
||||
cancelBack(){
|
||||
this.$router.push('/collections/' + this.collectionId);
|
||||
this.$router.push(this.$routerHelper.getCollectionPath(this.collectionId));
|
||||
}
|
||||
},
|
||||
created(){
|
||||
|
|
|
|||
|
|
@ -1,218 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Collection Fields Edition Page</h1>
|
||||
<b-loading :active.sync="isLoadingFieldTypes"></b-loading>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<b-field :label="$i18n.get('label_active_fields')" is-grouped>
|
||||
<draggable
|
||||
class="box active-fields-area"
|
||||
@change="handleChange"
|
||||
:class="{'fields-area-receive': isDraggingFromAvailable}"
|
||||
:list="activeFieldList"
|
||||
:options="{group:'fields', chosenClass: 'sortable-chosen', filter: '.not-sortable-item'}">
|
||||
<div
|
||||
class="active-field-item"
|
||||
:class="{'not-sortable-item': field.id == undefined}"
|
||||
v-for="(field, index) in activeFieldList" :key="index">
|
||||
{{ field.name }}
|
||||
<span class="label-details"><span class="loading-spinner" v-if="field.id == undefined"></span> (not configured)</span>
|
||||
<a @click.prevent="removeField(field)" v-if="field.id != undefined"><b-icon is-small icon="delete"></b-icon></a>
|
||||
<b-icon is-small icon="pencil" v-if="field.id != undefined"></b-icon>
|
||||
</div>
|
||||
<div slot="footer">Drag and drop Fields here to add them to Collection.</div>
|
||||
</draggable>
|
||||
</b-field>
|
||||
</div>
|
||||
<div class="column">
|
||||
<b-field :label="$i18n.get('label_available_fields')" is-grouped>
|
||||
<draggable class="box available-fields-area" :list="availableFieldList" :options="{ group: { name:'fields', pull: 'clone', put: 'false', revertClone: 'true' }}">
|
||||
<div class="available-field-item" v-for="(field, index) in availableFieldList" :key="index">
|
||||
{{ field.name }}
|
||||
</div>
|
||||
</draggable>
|
||||
</b-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'CollectionFieldsEditionPage',
|
||||
data(){
|
||||
return {
|
||||
collectionId: '',
|
||||
isDraggingFromAvailable: false,
|
||||
isLoadingFieldTypes: true,
|
||||
isLoadingFields: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('collection', [
|
||||
'fetchFieldTypes',
|
||||
'fetchFields',
|
||||
'sendField',
|
||||
'deleteField',
|
||||
'updateCollectionFieldsOrder'
|
||||
]),
|
||||
...mapGetters('collection',[
|
||||
'getFieldTypes',
|
||||
'getFields'
|
||||
]),
|
||||
handleChange($event) {
|
||||
|
||||
if ($event.added) {
|
||||
this.addNewField($event.added.element, $event.added.newIndex);
|
||||
} else if ($event.removed) {
|
||||
this.removeField($event.removed.element);
|
||||
} else if ($event.moved) {
|
||||
this.updateFieldsOrder();
|
||||
}
|
||||
|
||||
},
|
||||
updateFieldsOrder() {
|
||||
let fieldsOrder = [];
|
||||
for (let field of this.activeFieldList) {
|
||||
fieldsOrder.push({'id': field.id, 'enabled': true});
|
||||
}
|
||||
this.updateCollectionFieldsOrder({ collectionId: this.collectionId, fieldsOrder: fieldsOrder });
|
||||
},
|
||||
addNewField(newField, newIndex) {
|
||||
this.sendField({collectionId: this.collectionId, name: newField.name, fieldType: newField.className, status: 'publish'})
|
||||
.then((field) => {
|
||||
this.activeFieldList.splice(newIndex, 1, field);
|
||||
this.updateFieldsOrder();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
removeField(removedField) {
|
||||
this.deleteField({ collectionId: this.collectionId, fieldId: removedField.id })
|
||||
.then((field) => {
|
||||
let index = this.activeFieldList.findIndex(deletedField => deletedField.id === field.id);
|
||||
if (index >= 0) {
|
||||
this.activeFieldList.splice(index, 1);
|
||||
}
|
||||
this.updateFieldsOrder();
|
||||
})
|
||||
.catch((error) => {
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
availableFieldList() {
|
||||
return this.getFieldTypes();
|
||||
},
|
||||
activeFieldList() {
|
||||
return this.getFields();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.isLoadingFieldTypes = true;
|
||||
this.isLoadingFields = true;
|
||||
|
||||
this.collectionId = this.$route.params.id;
|
||||
|
||||
this.fetchFieldTypes()
|
||||
.then((res) => {
|
||||
this.isLoadingFieldTypes = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
this.isLoadingFieldTypes = false;
|
||||
});
|
||||
this.fetchFields(this.collectionId)
|
||||
.then((res) => {
|
||||
this.isLoadingFields = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
this.isLoadingFields = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import "../../scss/_variables.scss";
|
||||
|
||||
.active-fields-area {
|
||||
min-height: 40px;
|
||||
padding: 10px;
|
||||
|
||||
&.fields-area-receive {
|
||||
background-color: whitesmoke;
|
||||
border: 1px dashed gray;
|
||||
}
|
||||
|
||||
.active-field-item {
|
||||
background-color: white;
|
||||
padding: 0.2em 0.5em;
|
||||
margin: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid gainsboro;
|
||||
display: block;
|
||||
cursor: grab;
|
||||
.icon { float: right }
|
||||
.label-details {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
animation: spinAround 500ms infinite linear;
|
||||
border: 2px solid #dbdbdb;
|
||||
border-radius: 290486px;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
&.not-sortable-item {
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
.active-field-item:hover {
|
||||
box-shadow: 0px 0px 2px #777;
|
||||
}
|
||||
|
||||
.sortable-chosen {
|
||||
background-color: $primary-lighter;
|
||||
padding: 0.2em 0.5em;
|
||||
margin: 10px;
|
||||
border-radius: 5px;
|
||||
border: 3px dashed $primary-light;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.available-fields-area {
|
||||
padding: 10px;
|
||||
border: 1px dashed gray;
|
||||
border-radius: 5px;
|
||||
background-color: whitesmoke;
|
||||
|
||||
.available-field-item {
|
||||
padding: 0.2em 0.5em;
|
||||
margin: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
border: 1px solid gainsboro;
|
||||
display: inline-flex;
|
||||
cursor: grab;
|
||||
}
|
||||
.available-field-item:hover {
|
||||
border: 1px solid lightgrey;
|
||||
box-shadow: 0px 0px 2px #777;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -113,7 +113,7 @@ export default {
|
|||
|
||||
this.isLoading = false;
|
||||
|
||||
this.$router.push('/collections/' + this.form.collectionId + '/items/' + this.itemId);
|
||||
this.$router.push(this.$routerHelper.getItemPath(this.form.collectionId, this.itemId));
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
|
||||
|
|
@ -160,7 +160,7 @@ export default {
|
|||
});
|
||||
},
|
||||
cancelBack(){
|
||||
this.$router.push('/collections/' + this.collectionId);
|
||||
this.$router.push(this.$routerHelper.getCollectionPath(this.collectionId));
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<router-link
|
||||
tag="a"
|
||||
class="card-footer-item"
|
||||
:to="{ path: `/collections/${collection.id}/items/new`, params: { collection_id: collection.id }}">
|
||||
:to="{ path: $routerHelper.getNewItemPath(collection.id), params: { collection_id: collection.id }}">
|
||||
Criar Item
|
||||
</router-link>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -23,11 +23,11 @@
|
|||
</div>
|
||||
<footer class="card-footer">
|
||||
<router-link
|
||||
class="card-footer-item" :to="{ path: `/collections/${collectionId}`}">
|
||||
class="card-footer-item" :to="{ path: $routerHelper.getCollectionPath(collectionId)}">
|
||||
Ver Coleção
|
||||
</router-link>
|
||||
<router-link
|
||||
class="card-footer-item" :to="{ path: `/collections/${collectionId}/items/${itemId}/edit`}">
|
||||
class="card-footer-item" :to="{ path: $routerHelper.getItemEditPath(collectionId, itemId)}">
|
||||
Editar Item
|
||||
</router-link>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ $secondary: #1F2F56;
|
|||
$secondary-invert: findColorInvert($primary);
|
||||
|
||||
$primary-light:#A5CDD7;
|
||||
$primary-lighter: lighten($primary-light, 10%);
|
||||
$primary-lighter: lighten($primary-light, 15%);
|
||||
$primary-dark: #55A0AF;
|
||||
$primary-darker: darken($primary-dark, 5%);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue