Adds 'Creation' field to Items List. This field is the default on sorting, has the value of wordpress 'post_date'. Alings vertically items o table.

This commit is contained in:
Mateus Machado Luna 2018-04-12 10:42:12 -03:00
parent 4628572373
commit 0e513d7a95
6 changed files with 51 additions and 17 deletions

View File

@ -221,7 +221,7 @@ export default {
@import "../../scss/_variables.scss";
.table-thumb {
max-height: 38px !important;
max-height: 55px !important;
vertical-align: middle !important;
}

View File

@ -28,38 +28,51 @@
:custom-key="column.slug"
:label="column.name"
:visible="column.visible"
:width="column.field == 'row_actions' ? 78 : column.field == 'featured_image' ? 55 : undefined ">
:class="column.field == 'row_creation' ? 'row-creation' : ''"
:width="column.field == 'row_actions' ? 78 : column.field == 'row_thumbnail' ? 55 : undefined ">
<template>
<span
<span
class="clickable-row"
@click.prevent="goToItemPage(props.row.id)"
v-if="column.field != 'featured_image' && column.field != 'row_actions'"
v-if="column.field != 'row_thumbnail' && column.field != 'row_actions' && column.field != 'row_creation'"
v-html="renderMetadata( props.row.metadata[column.slug] )" />
</template>
<template v-if="column.field == 'featured_image'">
<template v-if="column.field == 'row_thumbnail'">
<router-link
tag="img"
class="table-thumb clickable-row"
:to="{path: $routerHelper.getItemPath(collectionId, props.row.id)}"
:src="props.row[column.slug]"/>
</template>
<template
class="row-creation"
v-if="column.field == 'row_creation'">
<router-link
class="clickable-row"
v-html="getCreationHtml(props.row)"
tag="span"
:to="{path: $routerHelper.getItemPath(collectionId, props.row.id)}"/>
</template>
<template v-if="column.field == 'row_actions'">
<!-- <a id="button-view" @click.prevent.stop="goToItemPage(props.row.id)"><b-icon icon="eye"></a> -->
<a
id="button-edit"
:aria-label="$i18n.getFrom('items','edit_item')"
@click="goToItemEditPage(props.row.id)"><b-icon
type="is-gray"
icon="pencil"/></a>
@click="goToItemEditPage(props.row.id)">
<b-icon
type="is-gray"
icon="pencil"/></a>
<a
id="button-delete"
:aria-label="$i18n.get('label_button_delete')"
@click="deleteOneItem(props.row.id)"><b-icon
type="is-gray"
icon="delete"/></a>
@click="deleteOneItem(props.row.id)">
<b-icon
type="is-gray"
icon="delete"/></a>
</template>
</b-table-column>
</template>
@ -69,6 +82,7 @@
<script>
import { mapActions } from 'vuex';
import moment from 'moment';
export default {
name: 'ItemsList',
@ -163,17 +177,31 @@ export default {
return '';
else
return metadata.value_as_html;
},
getCreationHtml(item) {
return this.$i18n.get('info_created_by') + item['author_name'] + '<br>' + this.$i18n.get('info_date') + moment( item['creation_date'], 'YYYY-MM-DD').format('DD/MM/YYYY');
}
}
}
</script>
<style scoped>
<style lang="scss" scoped>
@import "../../scss/_variables.scss";
.table-thumb {
max-height: 55px !important;
}
td {
vertical-align: middle !important;
}
.row-creation span {
color: $gray-light;
font-size: 0.75em;
line-height: 1.5
}
.clickable-row{ cursor: pointer !important }
</style>

View File

@ -29,11 +29,12 @@
<option
v-for="field in tableFields"
v-if="
field.id == 'date' || (
field.id != undefined &&
field.field_type_object.related_mapped_prop != 'description' &&
field.field_type_object.primitive_type != 'term' &&
field.field_type_object.primitive_type != 'item' &&
field.field_type_object.primitive_type != 'compound'"
field.field_type_object.primitive_type != 'compound')"
:value="field"
:key="field.id">
{{ field.name }}

View File

@ -150,8 +150,8 @@ export default {
@import '../../scss/_variables.scss';
.sub-header {
max-height: $header-height;
height: $header-height;
min-height: $subheader-height;
height: $subheader-height;
margin-left: -$page-small-side-padding;
margin-right: -$page-small-side-padding;
margin-top: -$page-small-top-padding;

View File

@ -165,13 +165,16 @@ export default {
this.isLoadingFields = true;
this.fetchFields({ collectionId: this.collectionId, isRepositoryLevel: this.isRepositoryLevel, isContextEdit: false }).then(() => {
this.tableFields.push({ name: this.$i18n.get('label_thumbnail'), field: 'featured_image', field_type: undefined, slug: 'featured_image', id: undefined, visible: true });
this.tableFields.push({ name: this.$i18n.get('label_thumbnail'), field: 'row_thumbnail', field_type: undefined, slug: 'featured_image', id: undefined, visible: true });
for (let field of this.fields) {
this.tableFields.push(
{name: field.name, field: field.description, slug: field.slug, field_type: field.field_type, field_type_object: field.field_type_object, id: field.id, visible: true }
);
}
this.tableFields.push({ name: this.$i18n.get('label_creation'), field: 'row_creation', field_type: undefined, slug: 'creation', id: 'date', visible: true});
this.tableFields.push({ name: this.$i18n.get('label_actions'), field: 'row_actions', field_type: undefined, slug: 'actions', id: undefined, visible: true });
//this.prefTableFields = this.tableFields;
// this.$userPrefs.get('table_columns_' + this.collectionId)
// .then((value) => {

View File

@ -37,7 +37,9 @@ export const setItemsPerPage = ({ commit }, page ) => {
export const setOrderBy = ({ commit }, orderBy ) => {
// Primitive Types: string, date, item, term, compound, float
if (orderBy.field_type_object.primitive_type == 'float' || orderBy.field_type_object.primitive_type == 'int') {
if (orderBy.id == 'date') {
commit('setPostQueryAttribute', { attr: 'orderby', value: 'date' } );
} else if (orderBy.field_type_object.primitive_type == 'float' || orderBy.field_type_object.primitive_type == 'int') {
commit('setPostQueryAttribute', { attr: 'meta_key', value: orderBy.id } );
commit('setPostQueryAttribute', { attr: 'orderby', value: 'meta_value_num' } );
} else if (orderBy.field_type_object.primitive_type == 'date') {