Puts b-loading css into theme. Creates ViewModeTable component, still out of place
This commit is contained in:
Mateus Machado Luna
parent
348f429d73
commit
2b1acfcd3f
|
|
@ -0,0 +1,125 @@
|
|||
<template>
|
||||
<div class="table-container">
|
||||
<div class="table-wrapper">
|
||||
<table
|
||||
class="tainacan-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- Displayed Fields -->
|
||||
<th
|
||||
v-for="(column, index) in tableFields"
|
||||
:key="index"
|
||||
v-if="column.display"
|
||||
class="column-default-width"
|
||||
:class="{
|
||||
'thumbnail-cell': column.field == 'row_thumbnail',
|
||||
'column-small-width' : column.field_type_object != undefined ? (column.field_type_object.className == 'Tainacan\\Field_Types\\Date' || column.field_type_object.className == 'Tainacan\\Field_Types\\Numeric') : false,
|
||||
'column-medium-width' : column.field_type_object != undefined ? (column.field_type_object.className == 'Tainacan\\Field_Types\\Selectbox' || column.field_type_object.className == 'Tainacan\\Field_Types\\Category' || column.field_type_object.className == 'Tainacan\\Field_Types\\Compound') : false,
|
||||
'column-large-width' : column.field_type_object != undefined ? (column.field_type_object.className == 'Tainacan\\Field_Types\\Textarea') : false,
|
||||
}"
|
||||
:custom-key="column.slug">
|
||||
<div class="th-wrap">{{ column.name }}</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
:key="index"
|
||||
v-for="(item, index) of items">
|
||||
|
||||
<!-- Item Displayed Metadata -->
|
||||
<td
|
||||
:key="index"
|
||||
v-for="(column, index) in tableFields"
|
||||
v-if="column.display"
|
||||
:label="column.name"
|
||||
:aria-label="(column.field != 'row_thumbnail' && column.field != 'row_creation' && column.field != 'row_author')
|
||||
? column.name + '' + (item.metadata ? item.metadata[column.slug].value_as_string : '') : ''"
|
||||
class="column-default-width"
|
||||
:class="{
|
||||
'thumbnail-cell': column.field == 'row_thumbnail',
|
||||
'column-main-content' : column.field_type_object != undefined ? (column.field_type_object.related_mapped_prop == 'title') : false,
|
||||
'column-needed-width column-align-right' : column.field_type_object != undefined ? (column.field_type_object.className == 'Tainacan\\Field_Types\\Numeric') : false,
|
||||
'column-small-width' : column.field_type_object != undefined ? (column.field_type_object.className == 'Tainacan\\Field_Types\\Date' || column.field_type_object.className == 'Tainacan\\Field_Types\\Numeric') : false,
|
||||
'column-medium-width' : column.field_type_object != undefined ? (column.field_type_object.className == 'Tainacan\\Field_Types\\Selectbox' || column.field_type_object.className == 'Tainacan\\Field_Types\\Category' || column.field_type_object.className == 'Tainacan\\Field_Types\\Compound') : false,
|
||||
'column-large-width' : column.field_type_object != undefined ? (column.field_type_object.className == 'Tainacan\\Field_Types\\Textarea') : false,
|
||||
}"
|
||||
@click="goToItemPage(item)">
|
||||
|
||||
<!-- <data-and-tooltip
|
||||
v-if="column.field !== 'row_thumbnail' &&
|
||||
column.field !== 'row_actions' &&
|
||||
column.field !== 'row_creation'"
|
||||
:data="renderMetadata( item.metadata[column.slug] )"/> -->
|
||||
<p
|
||||
v-tooltip="{
|
||||
content: renderMetadata( item.metadata[column.slug] ),
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-if="item.metadata != undefined &&
|
||||
column.field !== 'row_thumbnail' &&
|
||||
column.field !== 'row_actions' &&
|
||||
column.field !== 'row_creation' &&
|
||||
column.field !== 'row_author'"
|
||||
v-html="renderMetadata( item.metadata[column.slug] )"/>
|
||||
|
||||
<span v-if="column.field == 'row_thumbnail'">
|
||||
<img
|
||||
class="table-thumb"
|
||||
:src="item[column.slug].thumb">
|
||||
</span>
|
||||
<p
|
||||
v-tooltip="{
|
||||
content: item[column.slug],
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-if="column.field == 'row_author' || column.field == 'row_creation'">
|
||||
{{ item[column.slug] }}
|
||||
</p>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ItemsList',
|
||||
props: {
|
||||
collectionId: Number,
|
||||
tableFields: Array,
|
||||
items: Array,
|
||||
isLoading: false,
|
||||
isOnTrash: false
|
||||
},
|
||||
methods: {
|
||||
goToItemPage(item) {
|
||||
window.location.href = item.url;
|
||||
},
|
||||
renderMetadata(metadata) {
|
||||
|
||||
if (!metadata) {
|
||||
return '';
|
||||
} else if (metadata.date_i18n) {
|
||||
return metadata.date_i18n;
|
||||
} else {
|
||||
return metadata.value_as_html;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -96,12 +96,15 @@
|
|||
id="items-list-area"
|
||||
class="items-list-area"
|
||||
:class="{ 'spaced-to-right': !isFiltersMenuCompressed }">
|
||||
<!-- SEARCH CONTROL ------------------------- -->
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isLoadingFields"/>
|
||||
|
||||
:active.sync="isLoadingItems"/>
|
||||
|
||||
<!-- SEARCH CONTROL ------------------------- -->
|
||||
<div class="search-control">
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isLoadingFields"/>
|
||||
<!-- Item Creation Dropdown, only on Admin -->
|
||||
<div
|
||||
class="search-control-item"
|
||||
|
|
@ -249,9 +252,6 @@
|
|||
|
||||
<!-- ITEMS LISTING RESULTS ------------------------- -->
|
||||
<div class="above-search-control">
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isLoadingItems"/>
|
||||
|
||||
<!-- Admin Table -->
|
||||
<items-list
|
||||
|
|
@ -261,6 +261,8 @@
|
|||
:items="items"
|
||||
:is-loading="isLoading"
|
||||
:is-on-theme="isOnTheme"/>
|
||||
|
||||
|
||||
|
||||
<!-- Theme View Modes -->
|
||||
<div
|
||||
|
|
@ -469,7 +471,6 @@
|
|||
|
||||
for (let field of this.fields) {
|
||||
if (field.display !== 'never') {
|
||||
// Will be pushed on array
|
||||
|
||||
let display = true;
|
||||
|
||||
|
|
@ -602,8 +603,8 @@
|
|||
}
|
||||
|
||||
#collection-search-button {
|
||||
border-radius: 0px !important;
|
||||
padding: 0px 8px !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0 8px !important;
|
||||
border-color: $tainacan-input-background;
|
||||
&:focus, &:active {
|
||||
border-color: none !important;
|
||||
|
|
@ -616,7 +617,9 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
.filter-menu-compress-button-top-repo {
|
||||
top: 123px !important;
|
||||
}
|
||||
#filter-menu-compress-button {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
|
|
@ -715,6 +718,7 @@
|
|||
transition: margin-left ease 0.5s;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ export default {
|
|||
@import "../../node_modules/buefy/src/scss/components/_checkbox.scss";
|
||||
@import "../../node_modules/buefy/src/scss/components/_radio.scss";
|
||||
@import "../../node_modules/buefy/src/scss/components/_tag.scss";
|
||||
@import "../../node_modules/buefy/src/scss/components/_loading.scss";
|
||||
|
||||
// Tainacan custom colors
|
||||
$primary: #2cb4c1;
|
||||
|
|
|
|||
|
|
@ -130,8 +130,6 @@ export default {
|
|||
.then((res) => {
|
||||
this.$emit( 'isLoadingItems', false);
|
||||
this.$emit( 'hasFiltered', res.hasFiltered);
|
||||
//var event = new Event('tainacan-items-change')
|
||||
//document.dispatchEvent(event);
|
||||
})
|
||||
.catch(() => {
|
||||
this.$emit( 'isLoadingItems', false);
|
||||
|
|
|
|||
|
|
@ -54,8 +54,4 @@ export const getFetchOnly = state => {
|
|||
|
||||
export const getFetchOnlyMeta = state => {
|
||||
return ( ! state.postquery.fetch_only['meta'] ) ? [] : state.postquery.fetch_only['meta'];
|
||||
}
|
||||
|
||||
export const getViewMode = state => {
|
||||
return state.postquery.format;
|
||||
}
|
||||
Loading…
Reference in New Issue