Do not pass fetch_only meta on viewmodes that demand only basic information. Requires metadata loading after changing a viewMode.

This commit is contained in:
Mateus Machado Luna 2018-07-19 15:10:08 -03:00
parent 389c4da631
commit 4d09b824ca
11 changed files with 191 additions and 138 deletions

View File

@ -59,17 +59,15 @@
<div class="metadata-title">
<p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
content: item.title != undefined ? item.title : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
v-for="(column, index) in tableMetadata"
:key="index"
v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
@click="goToItemPage(item)"
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"/>
</div>
}"
@click="goToItemPage(item)">
{{ item.title != undefined ? item.title : '' }}
</p>
</div>
<!-- Thumbnail -->
<a
v-if="item.thumbnail != undefined"
@ -126,16 +124,14 @@
<div class="metadata-title">
<p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
content: item.title != undefined ? item.title : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
v-for="(column, index) in tableMetadata"
:key="index"
v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
@click="goToItemPage(item)"
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />
}"
@click="goToItemPage(item)">
{{ item.title != undefined ? item.title : '' }}
</p>
</div>
<!-- Actions -->
<div
@ -173,32 +169,35 @@
<!-- Description -->
<p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
content: item.description != undefined ? item.description : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
v-if="
column.metadata_type_object != undefined &&
(column.metadata_type_object.related_mapped_prop == 'description')"
v-for="(column, index) in tableMetadata"
:key="index"
class="metadata-description"
v-html="(item.metadata != undefined && item.metadata[column.slug] != undefined) ? getLimitedDescription(item.metadata[column.slug].value_as_string) : ''" />
v-html="item.description != undefined ? getLimitedDescription(item.description) : ''" />
<br>
<!-- Author and Creation Date-->
<!-- Author-->
<p
v-tooltip="{
content: column.metadatum == 'row_author' || column.metadatum == 'row_creation',
content: item.author_name != undefined ? item.author_name : '',
html: false,
autoHide: false,
placement: 'auto-start'
}"
v-for="(column, index) in tableMetadata"
:key="index"
v-if="column.metadatum == 'row_author' || column.metadatum == 'row_creation'"
class="metadata-author-creation">
{{ column.metadatum == 'row_author' ? $i18n.get('info_created_by') + ' ' + item[column.slug] : $i18n.get('info_date') + ' ' + item[column.slug] }}
{{ $i18n.get('info_created_by') + ' ' + (item.author_name != undefined ? item.author_name : '') }}
</p>
<!-- Creation Date-->
<p
v-tooltip="{
content: item.creation_date != undefined ? item.creation_date : '',
html: false,
autoHide: false,
placement: 'auto-start'
}"
class="metadata-author-creation">
{{ $i18n.get('info_date') + ' ' + (item.creation_date != undefined ? item.creation_date : '') }}
</p>
</div>
</div>

View File

@ -94,9 +94,6 @@
id="items-list-area"
class="items-list-area"
:class="{ 'spaced-to-right': !isFiltersMenuCompressed }">
<b-loading
:is-full-page="false"
:active.sync="isLoadingItems"/>
<!-- FILTERS TAG LIST-->
<filters-tags-list
@ -423,6 +420,13 @@
<!-- ITEMS LISTING RESULTS ------------------------- -->
<div class="above-search-control">
<div
v-show="isLoadingItems"
class="loading-container">
<b-loading
:is-full-page="false"
:active.sync="isLoadingItems"/>
</div>
<div
v-if="openAdvancedSearch && advancedSearchResults">
<div class="advanced-search-results-title">
@ -679,6 +683,8 @@
this.$eventBusSearch.setStatus(status);
},
onChangeViewMode(viewMode) {
// We need to load metadata again as fetch_only might change from view mode
this.prepareMetadata();
this.$eventBusSearch.setViewMode(viewMode);
// Updates searchControlHeight before in case we need to adjust filters position on mobile
@ -687,6 +693,8 @@
}, 500);
},
onChangeAdminViewMode(adminViewMode) {
// We need to load metadata again as fetch_only might change from view mode
this.prepareMetadata();
this.$eventBusSearch.setAdminViewMode(adminViewMode);
// Updates searchControlHeight before in case we need to adjust filters position on mobile
@ -721,7 +729,7 @@
// Closes dropdown
this.$refs.displayedMetadataDropdown.toggle();
},
prepareMetadataAndFilters() {
prepareFilters() {
this.isLoadingFilters = true;
@ -733,7 +741,10 @@
})
.then(() => this.isLoadingFilters = false)
.catch(() => this.isLoadingFilters = false);
},
prepareMetadata() {
this.$eventBusSearch.cleanFetchOnly();
this.isLoadingMetadata = true;
// Processing is done inside a local variable
@ -744,86 +755,107 @@
isContextEdit: false
})
.then(() => {
// Decides if custom meta will be loaded with item.
let shouldLoadMeta = true;
if (this.isOnTheme)
shouldLoadMeta = this.registeredViewModes[this.viewMode].dynamic_metadata;
else
shouldLoadMeta = this.adminViewMode == 'table' || this.adminViewMode == 'records' || this.adminViewMode == undefined;
if (shouldLoadMeta) {
// Loads user prefs object as we'll need to check if there's something configured by user
let prefsFetchOnly = !this.isRepositoryLevel ? 'fetch_only_' + this.collectionId : 'fetch_only';
let prefsFetchOnlyObject = this.$userPrefs.get(prefsFetchOnly);
let thumbnailMetadatumDisplay = prefsFetchOnlyObject != undefined ? (prefsFetchOnlyObject['0'] != null) : true;
// Loads user prefs object as we'll need to check if there's something configured by user
let prefsFetchOnly = !this.isRepositoryLevel ? 'fetch_only_' + this.collectionId : 'fetch_only';
let prefsFetchOnlyObject = this.$userPrefs.get(prefsFetchOnly);
let thumbnailMetadatumDisplay = prefsFetchOnlyObject != undefined ? (prefsFetchOnlyObject['0'] != null) : true;
metadata.push({
name: this.$i18n.get('label_thumbnail'),
metadatum: 'row_thumbnail',
metadata_type: undefined,
slug: 'thumbnail',
id: undefined,
display: thumbnailMetadatumDisplay
});
metadata.push({
name: this.$i18n.get('label_thumbnail'),
metadatum: 'row_thumbnail',
metadata_type: undefined,
slug: 'thumbnail',
id: undefined,
display: thumbnailMetadatumDisplay
});
let fetchOnlyMetadatumIds = [];
let fetchOnlyMetadatumIds = [];
for (let metadatum of this.metadata) {
if (metadatum.display !== 'never') {
for (let metadatum of this.metadata) {
if (metadatum.display !== 'never') {
let display;
let display;
// Deciding display based on collection settings
if (metadatum.display == 'no')
display = false;
else if (metadatum.display == 'yes')
display = true;
// Deciding display based on collection settings
if (metadatum.display == 'no')
display = false;
else if (metadatum.display == 'yes')
display = true;
// // Deciding display based on user prefs
// if (prefsFetchOnlyObject != undefined &&
// prefsFetchOnlyObject.meta != undefined) {
// let index = prefsFetchOnlyObject.meta.findIndex(metadatumId => metadatumId == metadatum.id);
// if (index >= 0)
// display = true;
// else
// display = false;
// }
// // Deciding display based on user prefs
// if (prefsFetchOnlyObject != undefined &&
// prefsFetchOnlyObject.meta != undefined) {
// let index = prefsFetchOnlyObject.meta.findIndex(metadatumId => metadatumId == metadatum.id);
// if (index >= 0)
// display = true;
// else
// display = false;
// }
metadata.push(
{
name: metadatum.name,
metadatum: metadatum.description,
slug: metadatum.slug,
metadata_type: metadatum.metadata_type,
metadata_type_object: metadatum.metadata_type_object,
id: metadatum.id,
display: display
}
);
if (display)
fetchOnlyMetadatumIds.push(metadatum.id);
metadata.push(
{
name: metadatum.name,
metadatum: metadatum.description,
slug: metadatum.slug,
metadata_type: metadatum.metadata_type,
metadata_type_object: metadatum.metadata_type_object,
id: metadatum.id,
display: display
}
);
if (display)
fetchOnlyMetadatumIds.push(metadatum.id);
}
}
let creationDateMetadatumDisplay = prefsFetchOnlyObject != undefined ? (prefsFetchOnlyObject['1'] != null) : true;
let authorNameMetadatumDisplay = prefsFetchOnlyObject != undefined ? (prefsFetchOnlyObject['2'] != null) : true;
metadata.push({
name: this.$i18n.get('label_creation_date'),
metadatum: 'row_creation',
metadata_type: undefined,
slug: 'creation_date',
id: undefined,
display: creationDateMetadatumDisplay
});
metadata.push({
name: this.$i18n.get('label_created_by'),
metadatum: 'row_author',
metadata_type: undefined,
slug: 'author_name',
id: undefined,
display: authorNameMetadatumDisplay
});
this.$eventBusSearch.addFetchOnly({
'0': (thumbnailMetadatumDisplay ? 'thumbnail' : null),
'meta': fetchOnlyMetadatumIds,
'1': (creationDateMetadatumDisplay ? 'creation_date' : null),
'2': (authorNameMetadatumDisplay ? 'author_name' : null)
});
// Loads only basic attributes necessay to view modes that do not allow custom meta
} else {
this.$eventBusSearch.addFetchOnly({
'0': 'thumbnail',
'meta': [],
'1': 'creation_date',
'2': 'author_name',
'3': 'title',
'4': 'description'
});
}
let creationDateMetadatumDisplay = prefsFetchOnlyObject != undefined ? (prefsFetchOnlyObject['1'] != null) : true;
let authorNameMetadatumDisplay = prefsFetchOnlyObject != undefined ? (prefsFetchOnlyObject['2'] != null) : true;
metadata.push({
name: this.$i18n.get('label_creation_date'),
metadatum: 'row_creation',
metadata_type: undefined,
slug: 'creation_date',
id: undefined,
display: creationDateMetadatumDisplay
});
metadata.push({
name: this.$i18n.get('label_created_by'),
metadatum: 'row_author',
metadata_type: undefined,
slug: 'author_name',
id: undefined,
display: authorNameMetadatumDisplay
});
this.$eventBusSearch.addFetchOnly({
'0': (thumbnailMetadatumDisplay ? 'thumbnail' : null),
'meta': fetchOnlyMetadatumIds,
'1': (creationDateMetadatumDisplay ? 'creation_date' : null),
'2': (authorNameMetadatumDisplay ? 'author_name' : null)
});
this.isLoadingMetadata = false;
this.tableMetadata = metadata;
})
@ -859,7 +891,8 @@
*/
if (this.isOnTheme || this.collectionId === to.params.collectionId) {
this.prepareMetadataAndFilters();
this.prepareMetadata();
this.prepareFilters();
}
});
@ -876,7 +909,8 @@
},
mounted() {
this.prepareMetadataAndFilters();
this.prepareFilters();
this.prepareMetadata();
this.localTableMetadata = JSON.parse(JSON.stringify(this.tableMetadata));
// Setting initial view mode on Theme
@ -1067,6 +1101,7 @@
.search-control {
min-height: $subheader-height;
height: auto;
position: relative;
padding-top: $page-small-top-padding;
padding-left: $page-side-padding;
padding-right: $page-side-padding;
@ -1163,6 +1198,13 @@
margin-bottom: 0;
margin-top: 0;
height: calc(100% - 184px);
min-height: 200px;
.loading-container {
position: relative;
min-height: 200px;
height: auto;
}
}
.tabs {
@ -1183,7 +1225,7 @@
.table-container {
padding-left: 4.166666667%;
padding-right: 4.166666667%;
min-height: 200px;
min-height: 500px;
//height: calc(100% - 82px);
}

View File

@ -64,7 +64,7 @@
}
img {
width: 172px;
height: auto;
height: 172px;
border-radius: 2px;
}
&:hover img {
@ -100,6 +100,7 @@
color: gray;
overflow: hidden;
width: 100%;
height: 172px;
.metadata-description {
margin-bottom: 1.5rem;

View File

@ -23,6 +23,11 @@
min-height: 218px;
cursor: pointer;
@media screen and (max-width: 768px) {
max-width: 100%;
min-width: 100%;
}
&:hover {
background-color: $tainacan-input-background !important;
}

View File

@ -58,7 +58,6 @@ export default {
.button {
height: inherit !important;
box-shadow: none !important;
border: none;
border-radius: 6px;
padding: 2px 15px;
margin-top: 0px;

View File

@ -241,9 +241,12 @@ class REST_Items_Controller extends REST_Controller {
global $wp_query, $view_mode_displayed_metadata;
$wp_query = $items;
$displayed_metadata = array_map(function($el) { return (int) $el; }, $request['fetch_only']['meta']);
$view_mode_displayed_metadata['meta'] = array_map(function($el) { return (int) $el; }, array_key_exists('meta', $request['fetch_only']) ? $request['fetch_only']['meta'] : array());
//$view_mode_displayed_metadata['meta'] = $displayed_metadata;
$view_mode_displayed_metadata = $request['fetch_only'];
$view_mode_displayed_metadata['meta'] = $displayed_metadata;
include $view_mode['template'];

View File

@ -199,6 +199,9 @@ export default {
this.$store.dispatch('search/add_fetchonly', metadatum );
this.updateURLQueries();
},
cleanFetchOnly() {
this.$store.dispatch('search/cleanFetchOnly');
},
removeFetchOnlyMeta( metadatum ){
this.$store.dispatch('search/remove_fetchonly_meta', metadatum );
this.updateURLQueries();
@ -274,7 +277,7 @@ export default {
this.$userPrefs.set(prefsAdminViewMode, adminViewMode)
.catch(() => { });
}
this.$store.dispatch('search/setAdminViewMode', adminViewMode);
this.updateURLQueries();
},

View File

@ -135,3 +135,7 @@ export const cleanMetaQueries = ( { commit } ) => {
export const cleanTaxQueries = ({ commit }) => {
commit('cleanTaxQueries');
};
export const cleanFetchOnly = ({ commit }) => {
commit('cleanFetchOnly');
};

View File

@ -162,4 +162,8 @@ export const cleanMetaQueries = (state) => {
export const cleanTaxQueries = (state) => {
state.postquery.taxquery = [];
};
export const cleanFetchOnly = (state) => {
state.postquery.fetch_only = undefined;
};

View File

@ -243,7 +243,7 @@ function tainacan_current_view_displays($property) {
if (is_string($property)) {
return in_array($property, $view_mode_displayed_metadata);
} elseif (is_integer($property)) {
} elseif (is_integer($property) && array_key_exists('meta', $view_mode_displayed_metadata)) {
return in_array($property, $view_mode_displayed_metadata['meta']);
}
return false;

View File

@ -7,22 +7,20 @@
:key="index"
v-for="(item, index) of items"
class="tainacan-card">
<!-- Title -->
<p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
v-for="(column, index) in displayedMetadata"
:key="index"
v-if="column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
class="metadata-title"
@click="goToItemPage(item)"
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />
<div class="metadata-title">
<p
v-tooltip="{
content: item.title != undefined ? item.title : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
@click="goToItemPage(item)">
{{ item.title != undefined ? item.title : '' }}
</p>
</div>
<!-- Remaining metadata -->
<div
class="media"
@ -33,24 +31,18 @@
:src="item['thumbnail'].medium ? item['thumbnail'].medium : thumbPlaceholderPath">
<div class="list-metadata media-body">
<!-- Description -->
<!-- Description -->
<p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
content: item.description != undefined ? item.description : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
v-if="
column.metadata_type_object != undefined &&
(column.metadata_type_object.related_mapped_prop == 'description')"
v-for="(column, index) in displayedMetadata"
:key="index"
class="metadata-description"
v-html="(item.metadata != undefined && item.metadata[column.slug] != undefined) ? getLimitedDescription(item.metadata[column.slug].value_as_string) : ''" />
<br>
v-html="item.description != undefined ? getLimitedDescription(item.description) : ''" /> <br>
<!-- Author and Creation Date-->
<p
<!-- <p
v-tooltip="{
content: column.metadatum == 'row_author' || column.metadatum == 'row_creation',
html: false,
@ -62,7 +54,8 @@
v-if="column.metadatum == 'row_author' || column.metadatum == 'row_creation'"
class="metadata-author-creation">
{{ column.metadatum == 'row_author' ? $i18n.get('info_created_by') + ' ' + item[column.slug] : $i18n.get('info_date') + ' ' + item[column.slug] }}
</p>
</p>
-->
</div>
</div>
@ -99,7 +92,7 @@ export default {
}
},
getLimitedDescription(description) {
return description.length > 120 ? description.substring(0, 117) + '...' : description;
return description.length > 200 ? description.substring(0, 197) + '...' : description;
}
}
}