tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' of https://github.com/tainacan/tainacan into develop

This commit is contained in:
weryques 2018-06-28 15:06:30 -03:00
parent 7ba2d6cd89 23b17d467d
commit 9259e08505
14 changed files with 467 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/admin/components/edition/term-edition-form.vue
View File

@ -278,7 +278,7 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 100%; width: 100%;
top: 32px; top: 35%;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: bold; font-weight: bold;
z-index: 99; z-index: 99;

142
src/admin/components/lists/items-list.vue
View File

@ -58,6 +58,12 @@
<!-- Title --> <!-- Title -->
<div class="metadata-title"> <div class="metadata-title">
<p <p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
v-for="(column, index) in tableMetadata" v-for="(column, index) in tableMetadata"
:key="index" :key="index"
v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')" v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
@ -119,6 +125,12 @@
<!-- Title --> <!-- Title -->
<div class="metadata-title"> <div class="metadata-title">
<p <p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
v-for="(column, index) in tableMetadata" v-for="(column, index) in tableMetadata"
:key="index" :key="index"
v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')" v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
@ -152,19 +164,135 @@
<div <div
class="media" class="media"
@click="goToItemPage(item)"> @click="goToItemPage(item)">
<a
<img
v-if="item.thumbnail != undefined" v-if="item.thumbnail != undefined"
@click="goToItemPage(item)"> :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
<img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
</a> <div class="list-metadata media-body">
<!-- Description -->
<p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
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) : ''" />
<br>
<!-- Author and Creation Date-->
<p
v-tooltip="{
content: column.metadatum == 'row_author' || column.metadatum == 'row_creation',
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] }}
</p>
</div>
</div>
</div>
</div>
<!-- RECORDS VIEW MODE -->
<div
class="tainacan-records-container"
v-if="viewMode == 'records'">
<div
:key="index"
v-for="(item, index) of items"
:class="{ 'selected-record': selectedItems[index] }"
class="tainacan-record">
<!-- Checkbox -->
<div
:class="{ 'is-selecting': isSelectingItems }"
class="record-checkbox">
<b-checkbox
size="is-small"
v-model="selectedItems[index]"/>
</div>
<!-- Title -->
<div class="metadata-title">
<p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
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)"
class="metadata-title"
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />
</div>
<!-- Actions -->
<div
v-if="item.current_user_can_edit"
class="actions-area"
:label="$i18n.get('label_actions')">
<a
id="button-edit"
:aria-label="$i18n.getFrom('items','edit_item')"
@click.prevent.stop="goToItemEditPage(item.id)">
<b-icon
type="is-secondary"
icon="pencil"/>
</a>
<a
id="button-delete"
:aria-label="$i18n.get('label_button_delete')"
@click.prevent.stop="deleteOneItem(item.id)">
<b-icon
type="is-secondary"
:icon="!isOnTrash ? 'delete' : 'delete-forever'"/>
</a>
</div>
<!-- Remaining metadata -->
<div
class="media"
@click="goToItemPage(item)">
<img
v-if="item.thumbnail != undefined"
:src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
<div class="list-metadata media-body"> <div class="list-metadata media-body">
<span <span
v-for="(column, index) in tableMetadata" v-for="(column, index) in tableMetadata"
:key="index" :key="index"
v-if="column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')"> v-if="column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
<h3 class="metadata-label">{{ column.name }}</h3> <h3
v-tooltip="{
content: column.name,
html: false,
autoHide: false,
placement: 'auto-start'
}"
class="metadata-label">{{ column.name }}</h3>
<p <p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"
class="metadata-value"/> class="metadata-value"/>
</span> </span>
@ -459,6 +587,9 @@ export default {
} else { } else {
return metadata.value_as_html; return metadata.value_as_html;
} }
},
getLimitedDescription(description) {
return description.length > 120 ? description.substring(0, 117) + '...' : description;
} }
} }
} }
@ -469,6 +600,7 @@ export default {
@import "../../scss/_variables.scss"; @import "../../scss/_variables.scss";
@import "../../scss/_view-mode-grid.scss"; @import "../../scss/_view-mode-grid.scss";
@import "../../scss/_view-mode-cards.scss"; @import "../../scss/_view-mode-cards.scss";
@import "../../scss/_view-mode-records.scss";
.selection-control { .selection-control {

2
src/admin/js/theme-main.js
View File

@ -31,6 +31,7 @@ import TaincanFiltersList from '../../classes/filter-types/tainacan-filter-item.
import ItemsPage from '../pages/lists/items-page.vue'; import ItemsPage from '../pages/lists/items-page.vue';
import ViewModeTable from '../../theme-helper/view-mode-table.vue'; import ViewModeTable from '../../theme-helper/view-mode-table.vue';
import ViewModeCards from '../../theme-helper/view-mode-cards.vue'; import ViewModeCards from '../../theme-helper/view-mode-cards.vue';
import ViewModeRecords from '../../theme-helper/view-mode-records.vue';
// Remaining imports // Remaining imports
import HelpButton from '../components/other/help-button.vue'; import HelpButton from '../components/other/help-button.vue';
@ -81,6 +82,7 @@ Vue.component('items-page', ItemsPage);
// Oficial view modes // Oficial view modes
Vue.component('view-mode-table', ViewModeTable); Vue.component('view-mode-table', ViewModeTable);
Vue.component('view-mode-cards', ViewModeCards); Vue.component('view-mode-cards', ViewModeCards);
Vue.component('view-mode-records', ViewModeRecords);
Vue.use(eventBusSearch, { store: store, router: routerTheme}); Vue.use(eventBusSearch, { store: store, router: routerTheme});

10
src/admin/pages/lists/items-page.vue
View File

@ -142,7 +142,7 @@
<b-dropdown <b-dropdown
ref="displayedMetadataDropdown" ref="displayedMetadataDropdown"
:mobile-modal="false" :mobile-modal="false"
:disabled="totalItems <= 0 || adminViewMode == 'grid'" :disabled="totalItems <= 0 || adminViewMode == 'grid'|| adminViewMode == 'cards'"
class="show"> class="show">
<button <button
class="button is-white" class="button is-white"
@ -287,6 +287,12 @@
icon="view-list"/> icon="view-list"/>
{{ $i18n.get('label_cards') }} {{ $i18n.get('label_cards') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item :value="'records'">
<b-icon
class="gray-icon"
icon="view-module"/>
{{ $i18n.get('label_records') }}
</b-dropdown-item>
<b-dropdown-item :value="'grid'"> <b-dropdown-item :value="'grid'">
<b-icon <b-icon
class="gray-icon" class="gray-icon"
@ -861,7 +867,7 @@
.filters-menu { .filters-menu {
position: relative; position: relative;
width: $filter-menu-width; width: $filter-menu-width;
max-width: $filter-menu-width; min-width: 180px;
min-height: 100%; min-height: 100%;
height: 100%; height: 100%;
background-color: white; background-color: white;

2
src/admin/scss/_variables.scss
View File

@ -64,7 +64,7 @@ $size-small: 0.85em; // 0.75em on Bulma.
$header-height: 53px; $header-height: 53px;
$subheader-height: 82px; $subheader-height: 82px;
$side-menu-width: 180px; $side-menu-width: 180px;
$filter-menu-width: 200px; $filter-menu-width: 16.666666667%;
$filter-menu-width-theme: 20.833333333%; $filter-menu-width-theme: 20.833333333%;
$page-height: calc(100% - 53px); $page-height: calc(100% - 53px);

25
src/admin/scss/_view-mode-cards.scss
View File

@ -70,9 +70,12 @@
padding: 0.75rem 4.75rem 0.75rem 2.75rem; padding: 0.75rem 4.75rem 0.75rem 2.75rem;
margin-bottom: -27px; margin-bottom: -27px;
min-height: 42px; min-height: 42px;
font-size: 0.875rem !important;
p { text-overflow: ellipsis;
font-size: 0.875rem; white-space: nowrap;
overflow: hidden;
p {
font-size: 0.875rem !important;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -92,22 +95,16 @@
color: gray; color: gray;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
.metadata-label { .metadata-description {
font-size: 0.75rem; margin-bottom: 1.5rem;
margin-bottom: 0.2rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-weight: 500;
color: $gray-light;
} }
.metadata-value { .metadata-author-creation {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
margin-bottom: 1rem; margin-bottom: 0;
} }
} }

123
src/admin/scss/_view-mode-records.scss Normal file
View File

@ -0,0 +1,123 @@
.tainacan-records-container {
min-height: 200px;
padding: 0;
display: flex;
flex-wrap: wrap;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
.selected-record {
background-color: $primary-lighter;
.metadata-title {
background-color: $primary-lighter-hover;
}
}
.tainacan-record {
padding: 0px;
flex-basis: 0;
margin: 0.75rem;
max-width: 410px;
min-width: 410px;
min-height: 218px;
cursor: pointer;
&:hover {
background-color: $tainacan-input-background !important;
}
.record-checkbox {
position: absolute;
margin-left: 1.0rem;
margin-top: 9px;
}
.actions-area {
position: relative;
float: right;
top: -7px;
padding-right: 12px;
width: 80px;
display: flex;
justify-content: space-between;
visibility: hidden;
opacity: 0;
transition: visibility 0.2s, opacity 0.2s;
}
&:hover .actions-area {
visibility: visible;
opacity: 1.0;
}
.record-line {
height: 1px;
background-color: $tainacan-input-background;
margin-left: -44px;
margin-right: -44px;
opacity: 0;
visibility: hidden;
}
img {
width: 172px;
height: auto;
border-radius: 2px;
}
&:hover img {
border-radius: 0;
}
.metadata-title {
flex-shrink: 0;
padding: 0.75rem 4.75rem 0.75rem 2.75rem;
margin-bottom: -27px;
min-height: 42px;
font-size: 0.875rem !important;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
p {
font-size: 0.875rem !important;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
&:hover .metadata-title {
background-color: $gray-hover !important;
}
.media {
width: 100%;
.list-metadata {
padding: 0.75rem 1.375rem;
flex: 1;
font-size: 0.6875rem;
color: gray;
overflow: hidden;
width: 100%;
.metadata-label {
font-size: 0.75rem;
margin-bottom: 0.2rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-weight: 500;
color: $gray-light;
}
.metadata-value {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-bottom: 1rem;
}
}
}
}
}

11
src/admin/tainacan-admin-i18n.php
View File

@ -149,9 +149,9 @@ return apply_filters('tainacan-admin-i18n',[
'label_unique_value' => __( 'Unique value', 'tainacan' ), 'label_unique_value' => __( 'Unique value', 'tainacan' ),
'label_yes' => __( 'Yes', 'tainacan' ), 'label_yes' => __( 'Yes', 'tainacan' ),
'label_no' => __( 'No', 'tainacan' ), 'label_no' => __( 'No', 'tainacan' ),
'label_approved' => __( 'Approved', 'tainacan' ), 'label_approved' => __( 'Approved', 'tainacan' ),
'label_collection_related' => __( 'Collection Related', 'tainacan' ), 'label_collection_related' => __( 'Collection Related', 'tainacan' ),
'label_metadata_for_search' => __( 'Metadata for search', 'tainacan' ), 'label_metadata_for_search' => __( 'Metadata for search', 'tainacan' ),
'label_allow_repeated_items' => __( 'Allow repeated items', 'tainacan' ), 'label_allow_repeated_items' => __( 'Allow repeated items', 'tainacan' ),
'label_select_taxonomy' => __( 'Select taxonomy', 'tainacan' ), 'label_select_taxonomy' => __( 'Select taxonomy', 'tainacan' ),
'label_select_taxonomy_input_type' => __( 'Input type', 'tainacan' ), 'label_select_taxonomy_input_type' => __( 'Input type', 'tainacan' ),
@ -162,10 +162,10 @@ return apply_filters('tainacan-admin-i18n',[
'label_attachment' => __( 'Attachment', 'tainacan' ), 'label_attachment' => __( 'Attachment', 'tainacan' ),
'label_enabled' => __( 'Enabled', 'tainacan' ), 'label_enabled' => __( 'Enabled', 'tainacan' ),
'label_disabled' => __( 'Disabled', 'tainacan' ), 'label_disabled' => __( 'Disabled', 'tainacan' ),
'label_creation' => __( 'Creation', 'tainacan' ), 'label_creation' => __( 'Creation', 'tainacan' ),
'label_creation_date' => __( 'Creation date', 'tainacan' ), 'label_creation_date' => __( 'Creation date', 'tainacan' ),
'label_collection_items' => __( 'Collection Items', 'tainacan' ), 'label_collection_items' => __( 'Collection Items', 'tainacan' ),
'label_collection_metadata' => __( 'Collection Metadata', 'tainacan' ), 'label_collection_metadata' => __( 'Collection Metadata', 'tainacan' ),
'label_collection_filters' => __( 'Collection Filters', 'tainacan' ), 'label_collection_filters' => __( 'Collection Filters', 'tainacan' ),
'label_parent_term' => __( 'Parent Term', 'tainacan' ), 'label_parent_term' => __( 'Parent Term', 'tainacan' ),
'label_new_term' => __( 'New Term', 'tainacan' ), 'label_new_term' => __( 'New Term', 'tainacan' ),
@ -181,7 +181,7 @@ return apply_filters('tainacan-admin-i18n',[
'label_empty_header_image' => __( 'Empty Header Image', 'tainacan' ), 'label_empty_header_image' => __( 'Empty Header Image', 'tainacan' ),
'label_enable_cover_page' => __( 'Enable Cover Page', 'tainacan' ), 'label_enable_cover_page' => __( 'Enable Cover Page', 'tainacan' ),
'label_cover_page' => __( 'Cover Page', 'tainacan' ), 'label_cover_page' => __( 'Cover Page', 'tainacan' ),
'label_default_displayed_metadata' => __( 'Default Displayed Metadata', 'tainacan' ), 'label_default_displayed_metadata' => __( 'Default Displayed Metadata', 'tainacan' ),
'label_display' => __( 'Display on Listing', 'tainacan' ), 'label_display' => __( 'Display on Listing', 'tainacan' ),
'label_display_default' => __( 'Display by default', 'tainacan' ), 'label_display_default' => __( 'Display by default', 'tainacan' ),
'label_display_never' => __( 'Never displayed', 'tainacan' ), 'label_display_never' => __( 'Never displayed', 'tainacan' ),
@ -224,6 +224,7 @@ return apply_filters('tainacan-admin-i18n',[
'label_grid' => __( 'Grid', 'tainacan' ), 'label_grid' => __( 'Grid', 'tainacan' ),
'label_table' => __( 'Table', 'tainacan' ), 'label_table' => __( 'Table', 'tainacan' ),
'label_cards' => __( 'Cards', 'tainacan' ), 'label_cards' => __( 'Cards', 'tainacan' ),
'label_records' => __( 'Records', 'tainacan' ),
'label_visualization' => __( 'Visualization', 'tainacan' ), 'label_visualization' => __( 'Visualization', 'tainacan' ),
'label_available_importers' => __( 'Available Importers', 'tainacan' ), 'label_available_importers' => __( 'Available Importers', 'tainacan' ),
'label_target_collection' => __( 'Target Collection', 'tainacan' ), 'label_target_collection' => __( 'Target Collection', 'tainacan' ),

9
src/classes/filter-types/tainacan-filter-item.vue
View File

@ -7,6 +7,12 @@
class="show" class="show"
:open="open"> :open="open">
<label <label
v-tooltip="{
content: filter.name,
html: false,
autoHide: false,
placement: 'top-start'
}"
class="label" class="label"
slot="trigger" slot="trigger"
slot-scope="props"> slot-scope="props">
@ -195,9 +201,8 @@
} }
.label { .label {
font-weight: normal; font-weight: normal !important;
font-size: 14px; font-size: 14px;
display: inline-flex;
width: 100%; width: 100%;
} }

3
src/classes/metadata-types/tainacan-form-item.vue
View File

@ -127,7 +127,9 @@
eventBus.isChangingValue(true); eventBus.isChangingValue(true);
}, },
changeValue(){ changeValue(){
if(this.metadatum.value != this.inputs){ if(this.metadatum.value != this.inputs){
if(this.inputs.length > 0 && this.inputs[0].value){ if(this.inputs.length > 0 && this.inputs[0].value){
let terms = [] let terms = []
@ -153,6 +155,7 @@
} }
} }
} else if(this.metadatum.value.constructor.name == 'Object'){ } else if(this.metadatum.value.constructor.name == 'Object'){
if(this.metadatum.value.id == this.inputs){ if(this.metadatum.value.id == this.inputs){
return; return;
} }

5
src/js/event-bus-web-components.js
View File

@ -11,7 +11,7 @@ export const eventBus = new Vue({
if( tainacan_plugin.components ){ if( tainacan_plugin.components ){
this.componentsTag = tainacan_plugin.components; this.componentsTag = tainacan_plugin.components;
} }
this.$on('input', data => this.updateValue(data) ); this.$on('input', data => this.updateValue(data) );
}, },
methods : { methods : {
registerComponent( name ){ registerComponent( name ){
@ -38,9 +38,10 @@ export const eventBus = new Vue({
this.$emit('isChangingValue', true); this.$emit('isChangingValue', true);
}, },
updateValue(data){ updateValue(data){
this.$emit('isUpdatingValue', true); this.$emit('isUpdatingValue', true);
if ( data.item_id ){ if ( data.item_id ){
if(data.values.length > 0 && data.values[0].value){ if(data.values.length > 0 && data.values[0].value){
let val = []; let val = [];
for(let i of data.values){ for(let i of data.values){

11
src/theme-helper/class-tainacan-theme-helper.php
View File

@ -57,11 +57,18 @@ class Theme_Helper {
]); ]);
$this->register_view_mode('cards', [ $this->register_view_mode('cards', [
'label' => __('Cards view', 'tainacan'), 'label' => __('Cards view', 'tainacan'),
'dynamic_metadata' => true, 'dynamic_metadata' => false,
'description' => 'A cards view, flexible for metadata', 'description' => 'A cards view, displaying title, description, author name and creation date.',
'icon' => '<span class="icon"><i class="mdi mdi-view-list mdi-24px"></i></span>', 'icon' => '<span class="icon"><i class="mdi mdi-view-list mdi-24px"></i></span>',
'type' => 'component' 'type' => 'component'
]); ]);
$this->register_view_mode('records', [
'label' => __('Records view', 'tainacan'),
'dynamic_metadata' => true,
'description' => 'A records view, similiar to cards, but flexible for metadata',
'icon' => '<span class="icon"><i class="mdi mdi-view-module mdi-24px"></i></span>',
'type' => 'component'
]);
} }
public function enqueue_scripts($force = false) { public function enqueue_scripts($force = false) {

53
src/theme-helper/view-mode-cards.vue
View File

@ -10,9 +10,15 @@
<!-- Title --> <!-- Title -->
<p <p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
v-for="(column, index) in displayedMetadata" v-for="(column, index) in displayedMetadata"
:key="index" :key="index"
v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')" v-if="column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
class="metadata-title" class="metadata-title"
@click="goToItemPage(item)" @click="goToItemPage(item)"
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" /> v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />
@ -21,22 +27,42 @@
<div <div
class="media" class="media"
@click="goToItemPage(item)"> @click="goToItemPage(item)">
<a
<img
v-if="item.thumbnail != undefined" v-if="item.thumbnail != undefined"
@click="goToItemPage(item)"> :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
<img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
</a>
<div class="list-metadata media-body"> <div class="list-metadata media-body">
<span <!-- Description -->
<p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
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" v-for="(column, index) in displayedMetadata"
:key="index" :key="index"
v-if="column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')"> class="metadata-description"
<h3 class="metadata-label">{{ column.name }}</h3> v-html="(item.metadata != undefined && item.metadata[column.slug] != undefined) ? getLimitedDescription(item.metadata[column.slug].value_as_string) : ''" />
<p <br>
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" <!-- Author and Creation Date-->
class="metadata-value"/> <p
</span> v-tooltip="{
content: column.metadatum == 'row_author' || column.metadatum == 'row_creation',
html: false,
autoHide: false,
placement: 'auto-start'
}"
v-for="(column, index) in displayedMetadata"
: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] }}
</p>
</div> </div>
</div> </div>
@ -71,6 +97,9 @@ export default {
} else { } else {
return metadata.value_as_html; return metadata.value_as_html;
} }
},
getLimitedDescription(description) {
return description.length > 120 ? description.substring(0, 117) + '...' : description;
} }
} }
} }

115
src/theme-helper/view-mode-records.vue Normal file
View File

@ -0,0 +1,115 @@
<template>
<div class="table-container">
<div class="table-wrapper">
<!-- RECORDS VIEW MODE -->
<div class="tainacan-records-container">
<div
:key="index"
v-for="(item, index) of items"
class="tainacan-record">
<!-- 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.display && 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) : ''" />
<!-- Remaining metadata -->
<div
class="media"
@click="goToItemPage(item)">
<a
v-if="item.thumbnail != undefined"
@click="goToItemPage(item)">
<img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
</a>
<div class="list-metadata media-body">
<span
v-for="(column, index) in displayedMetadata"
:key="index"
v-if="column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
<h3
v-tooltip="{
content: column.name,
html: false,
autoHide: false,
placement: 'auto-start'
}"
class="metadata-label">{{ column.name }}</h3>
<p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"
class="metadata-value"/>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ViewModeRecords',
props: {
collectionId: Number,
displayedMetadata: Array,
items: Array,
isLoading: false
},
methods: {
goToItemPage(item) {
window.location.href = item.url;
},
renderMetadata(itemMetadata, column) {
let metadata = itemMetadata[column.slug] != undefined ? itemMetadata[column.slug] : false;
if (!metadata) {
return '';
} else if (metadata.date_i18n) {
return metadata.date_i18n;
} else {
return metadata.value_as_html;
}
}
}
}
</script>
<style lang="scss" scoped>
$primary-lighter: #e6f6f8;
$primary-lighter-hover: #d1e6e6;
$tainacan-input-color: #1d1d1d;
$tainacan-input-background: #e5e5e5;
$tainacan-placeholder-color: #898d8f;
$gray-hover: #dcdcdc;
$gray-light: #898d8f;
@import "../../src/admin/scss/_view-mode-records.scss";
.tainacan-records-container .tainacan-record .metadata-title {
padding: 0.75rem;
margin-bottom: 0px;
}
</style>