Solves displayed fields error from recent conversion of buefy to native table. Fixes navigation to clicked item on theme.

This commit is contained in:
Mateus Machado Luna 2018-05-16 15:43:15 -03:00
parent 83a1f6a287
commit f6aa5aac11
4 changed files with 46 additions and 43 deletions

View File

@ -21,12 +21,10 @@
<b-icon icon="menu-down"/> <b-icon icon="menu-down"/>
</button> </button>
<b-dropdown-item> <b-dropdown-item
<a id="item-delete-selected-items"
id="item-delete-selected-items" @click="deleteSelectedCollections()">
@click="deleteSelectedCollections()"> {{ $i18n.get('label_delete_selected_collections') }}
{{ $i18n.get('label_delete_selected_collections') }}
</a>
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item disabled>{{ $i18n.get('label_edit_selected_collections') + ' (Not ready)' }} <b-dropdown-item disabled>{{ $i18n.get('label_edit_selected_collections') + ' (Not ready)' }}
</b-dropdown-item> </b-dropdown-item>

View File

@ -10,7 +10,9 @@
<span>{{ $i18n.get('instruction_delete_selected_items') }} </span><b-icon icon="delete"/> <span>{{ $i18n.get('instruction_delete_selected_items') }} </span><b-icon icon="delete"/>
</button> </button>
</b-field> --> </b-field> -->
<div class="selection-control"> <div
v-if="!isOnTheme"
class="selection-control">
<div class="field select-all is-pulled-left"> <div class="field select-all is-pulled-left">
<span> <span>
<b-checkbox <b-checkbox
@ -31,12 +33,10 @@
<b-icon icon="menu-down"/> <b-icon icon="menu-down"/>
</button> </button>
<b-dropdown-item> <b-dropdown-item
<a @click="deleteSelectedItems()"
id="item-delete-selected-items" id="item-delete-selected-items">
@click="deleteSelectedItems()"> {{ $i18n.get('label_delete_selected_items') }}
{{ $i18n.get('label_delete_selected_items') }}
</a>
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item disabled>{{ $i18n.get('label_edit_selected_items') + ' (Not ready)' }} <b-dropdown-item disabled>{{ $i18n.get('label_edit_selected_items') + ' (Not ready)' }}
</b-dropdown-item> </b-dropdown-item>
@ -58,7 +58,7 @@
<th <th
v-for="(column, index) in tableFields" v-for="(column, index) in tableFields"
:key="index" :key="index"
v-if="column.field != 'row_actions'" v-if="column.field != 'row_actions' && column.display"
:class="{'thumbnail-cell': column.field == 'row_thumbnail'}" :class="{'thumbnail-cell': column.field == 'row_thumbnail'}"
:custom-key="column.slug"> :custom-key="column.slug">
<div class="th-wrap">{{ column.name }}</div> <div class="th-wrap">{{ column.name }}</div>
@ -84,15 +84,14 @@
<td <td
:key="index" :key="index"
v-for="(column, index) in tableFields" v-for="(column, index) in tableFields"
v-if="!(column.field == 'row_actions') || (column.field == 'row_actions' && item.current_user_can_edit && !isOnTheme)" v-if="column.display"
:label="column.name" :label="column.name"
:aria-label="column.field != 'row_thumbnail' && column.field != 'row_actions' && column.field != 'row_creation' ? column.name + '' + item.metadata[column.slug].value_as_string : ''" :aria-label="column.field != 'row_thumbnail' && column.field != 'row_actions' && column.field != 'row_creation' ? column.name + '' + item.metadata[column.slug].value_as_string : ''"
class="column-default-width" class="column-default-width"
:class="{ :class="{
'thumbnail-cell': column.field == 'row_thumbnail', 'thumbnail-cell': column.field == 'row_thumbnail',
'table-creation': column.field == 'row_creation', 'table-creation': column.field == 'row_creation'}"
'actions-cell': column.field == 'row_actions'}" @click="goToItemPage(item)">
@click="goToItemPage(item.id)">
<p <p
v-if="column.field != 'row_thumbnail' && column.field != 'row_actions' && column.field != 'row_creation'" v-if="column.field != 'row_thumbnail' && column.field != 'row_actions' && column.field != 'row_creation'"
v-html="renderMetadata( item.metadata[column.slug] )" /> v-html="renderMetadata( item.metadata[column.slug] )" />
@ -104,9 +103,13 @@
<p <p
v-if="column.field == 'row_creation'" v-if="column.field == 'row_creation'"
v-html="getCreationHtml(item)" /> v-html="getCreationHtml(item)" />
<div </td>
v-if="column.field == 'row_actions' && item.current_user_can_edit && !isOnTheme"
class="actions-container"> <!-- Actions -->
<td
v-if="item.current_user_can_edit && !isOnTheme"
class="column-default-width actions-cell">
<div class="actions-container">
<a <a
id="button-edit" id="button-edit"
:aria-label="$i18n.getFrom('items','edit_item')" :aria-label="$i18n.getFrom('items','edit_item')"
@ -126,6 +129,7 @@
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -327,8 +331,11 @@ export default {
} }
}); });
}, },
goToItemPage(itemId) { goToItemPage(item) {
this.$router.push(this.$routerHelper.getItemPath(this.collectionId, itemId)); if (this.isOnTheme)
window.location.href = item.url;
else
this.$router.push(this.$routerHelper.getItemPath(this.collectionId, item.id));
}, },
goToItemEditPage(itemId) { goToItemEditPage(itemId) {
this.$router.push(this.$routerHelper.getItemEditPath(this.collectionId, itemId)); this.$router.push(this.$routerHelper.getItemEditPath(this.collectionId, itemId));
@ -371,6 +378,10 @@ export default {
.table { .table {
width: 100%; width: 100%;
th:nth-child(2), td:nth-child(2) {
padding-left: 54px;
}
.checkbox-cell { .checkbox-cell {
width: 44px; width: 44px;
height: 58px; height: 58px;
@ -409,7 +420,6 @@ export default {
.thumbnail-cell { .thumbnail-cell {
width: 58px; width: 58px;
padding-left: 54px;
} }
tbody { tbody {

View File

@ -39,8 +39,9 @@
class="control" class="control"
custom> custom>
<b-checkbox <b-checkbox
@input="onChangeDisplayedField($event, column)"
:native-value="column.display"> v-model="column.display"
:native-value="column.field">
{{ column.name }} {{ column.name }}
</b-checkbox> </b-checkbox>
</b-dropdown-item> </b-dropdown-item>
@ -104,7 +105,7 @@
...mapGetters('search', [ ...mapGetters('search', [
'getOrderBy', 'getOrderBy',
'getOrder', 'getOrder',
'getFetchOnlyMeta' //'getFetchOnlyMeta'
]), ]),
onChangeOrderBy(field) { onChangeOrderBy(field) {
this.$eventBusSearch.setOrderBy(field); this.$eventBusSearch.setOrderBy(field);
@ -112,13 +113,16 @@
onChangeOrder() { onChangeOrder() {
this.order == 'DESC' ? this.$eventBusSearch.setOrder('ASC') : this.$eventBusSearch.setOrder('DESC'); this.order == 'DESC' ? this.$eventBusSearch.setOrder('ASC') : this.$eventBusSearch.setOrder('DESC');
}, },
onChangeDisplayedField(event, fieldId) { // onChangeDisplayedField(event, fieldId) {
column.display = event; // column.display = event;
if (event) // if (event)
this.$eventBusSearch.addFetchOnlyMeta(field.id); // this.$eventBusSearch.addFetchOnlyMeta(field.id);
else // else
this.$eventBusSearch.removeFetchOnlyMeta(field.id); // this.$eventBusSearch.removeFetchOnlyMeta(field.id);
} // }
},
mounted() {
console.log(this.tableFields);
} }
} }
</script> </script>

View File

@ -323,15 +323,6 @@
display: true display: true
}); });
this.tableFields.push({
name: this.$i18n.get('label_actions'),
field: 'row_actions',
field_type: undefined,
slug: 'actions',
id: undefined,
display: true
});
// this.prefTableFields = this.tableFields; // this.prefTableFields = this.tableFields;
// this.$userPrefs.get('table_columns_' + this.collectionId) // this.$userPrefs.get('table_columns_' + this.collectionId)
// .then((value) => { // .then((value) => {