Merge branch 'develop' of https://github.com/tainacan/tainacan into develop
This commit is contained in:
weryques
commit
9259e08505
|
|
@ -278,7 +278,7 @@
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
top: 32px;
|
||||
top: 35%;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
z-index: 99;
|
||||
|
|
|
|||
|
|
@ -58,6 +58,12 @@
|
|||
<!-- 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')"
|
||||
|
|
@ -119,6 +125,12 @@
|
|||
<!-- 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')"
|
||||
|
|
@ -152,19 +164,135 @@
|
|||
<div
|
||||
class="media"
|
||||
@click="goToItemPage(item)">
|
||||
<a
|
||||
|
||||
<img
|
||||
v-if="item.thumbnail != undefined"
|
||||
@click="goToItemPage(item)">
|
||||
<img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
|
||||
</a>
|
||||
:src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
|
||||
|
||||
<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">
|
||||
<span
|
||||
v-for="(column, index) in tableMetadata"
|
||||
:key="index"
|
||||
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
|
||||
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>
|
||||
|
|
@ -459,6 +587,9 @@ export default {
|
|||
} else {
|
||||
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/_view-mode-grid.scss";
|
||||
@import "../../scss/_view-mode-cards.scss";
|
||||
@import "../../scss/_view-mode-records.scss";
|
||||
|
||||
.selection-control {
|
||||
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ import TaincanFiltersList from '../../classes/filter-types/tainacan-filter-item.
|
|||
import ItemsPage from '../pages/lists/items-page.vue';
|
||||
import ViewModeTable from '../../theme-helper/view-mode-table.vue';
|
||||
import ViewModeCards from '../../theme-helper/view-mode-cards.vue';
|
||||
import ViewModeRecords from '../../theme-helper/view-mode-records.vue';
|
||||
|
||||
// Remaining imports
|
||||
import HelpButton from '../components/other/help-button.vue';
|
||||
|
|
@ -81,6 +82,7 @@ Vue.component('items-page', ItemsPage);
|
|||
// Oficial view modes
|
||||
Vue.component('view-mode-table', ViewModeTable);
|
||||
Vue.component('view-mode-cards', ViewModeCards);
|
||||
Vue.component('view-mode-records', ViewModeRecords);
|
||||
|
||||
Vue.use(eventBusSearch, { store: store, router: routerTheme});
|
||||
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@
|
|||
<b-dropdown
|
||||
ref="displayedMetadataDropdown"
|
||||
:mobile-modal="false"
|
||||
:disabled="totalItems <= 0 || adminViewMode == 'grid'"
|
||||
:disabled="totalItems <= 0 || adminViewMode == 'grid'|| adminViewMode == 'cards'"
|
||||
class="show">
|
||||
<button
|
||||
class="button is-white"
|
||||
|
|
@ -287,6 +287,12 @@
|
|||
icon="view-list"/>
|
||||
{{ $i18n.get('label_cards') }}
|
||||
</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-icon
|
||||
class="gray-icon"
|
||||
|
|
@ -861,7 +867,7 @@
|
|||
.filters-menu {
|
||||
position: relative;
|
||||
width: $filter-menu-width;
|
||||
max-width: $filter-menu-width;
|
||||
min-width: 180px;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ $size-small: 0.85em; // 0.75em on Bulma.
|
|||
$header-height: 53px;
|
||||
$subheader-height: 82px;
|
||||
$side-menu-width: 180px;
|
||||
$filter-menu-width: 200px;
|
||||
$filter-menu-width: 16.666666667%;
|
||||
$filter-menu-width-theme: 20.833333333%;
|
||||
$page-height: calc(100% - 53px);
|
||||
|
||||
|
|
|
|||
|
|
@ -70,9 +70,12 @@
|
|||
padding: 0.75rem 4.75rem 0.75rem 2.75rem;
|
||||
margin-bottom: -27px;
|
||||
min-height: 42px;
|
||||
|
||||
p {
|
||||
font-size: 0.875rem;
|
||||
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;
|
||||
|
|
@ -92,22 +95,16 @@
|
|||
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-description {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.metadata-value {
|
||||
.metadata-author-creation {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -149,9 +149,9 @@ return apply_filters('tainacan-admin-i18n',[
|
|||
'label_unique_value' => __( 'Unique value', 'tainacan' ),
|
||||
'label_yes' => __( 'Yes', 'tainacan' ),
|
||||
'label_no' => __( 'No', 'tainacan' ),
|
||||
'label_approved' => __( 'Approved', 'tainacan' ),
|
||||
'label_approved' => __( 'Approved', '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_select_taxonomy' => __( 'Select taxonomy', 'tainacan' ),
|
||||
'label_select_taxonomy_input_type' => __( 'Input type', 'tainacan' ),
|
||||
|
|
@ -162,10 +162,10 @@ return apply_filters('tainacan-admin-i18n',[
|
|||
'label_attachment' => __( 'Attachment', 'tainacan' ),
|
||||
'label_enabled' => __( 'Enabled', 'tainacan' ),
|
||||
'label_disabled' => __( 'Disabled', 'tainacan' ),
|
||||
'label_creation' => __( 'Creation', 'tainacan' ),
|
||||
'label_creation' => __( 'Creation', 'tainacan' ),
|
||||
'label_creation_date' => __( 'Creation date', '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_parent_term' => __( 'Parent 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_enable_cover_page' => __( 'Enable 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_default' => __( 'Display by default', 'tainacan' ),
|
||||
'label_display_never' => __( 'Never displayed', 'tainacan' ),
|
||||
|
|
@ -224,6 +224,7 @@ return apply_filters('tainacan-admin-i18n',[
|
|||
'label_grid' => __( 'Grid', 'tainacan' ),
|
||||
'label_table' => __( 'Table', 'tainacan' ),
|
||||
'label_cards' => __( 'Cards', 'tainacan' ),
|
||||
'label_records' => __( 'Records', 'tainacan' ),
|
||||
'label_visualization' => __( 'Visualization', 'tainacan' ),
|
||||
'label_available_importers' => __( 'Available Importers', 'tainacan' ),
|
||||
'label_target_collection' => __( 'Target Collection', 'tainacan' ),
|
||||
|
|
|
|||
|
|
@ -7,6 +7,12 @@
|
|||
class="show"
|
||||
:open="open">
|
||||
<label
|
||||
v-tooltip="{
|
||||
content: filter.name,
|
||||
html: false,
|
||||
autoHide: false,
|
||||
placement: 'top-start'
|
||||
}"
|
||||
class="label"
|
||||
slot="trigger"
|
||||
slot-scope="props">
|
||||
|
|
@ -195,9 +201,8 @@
|
|||
}
|
||||
|
||||
.label {
|
||||
font-weight: normal;
|
||||
font-weight: normal !important;
|
||||
font-size: 14px;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -127,7 +127,9 @@
|
|||
eventBus.isChangingValue(true);
|
||||
},
|
||||
changeValue(){
|
||||
|
||||
if(this.metadatum.value != this.inputs){
|
||||
|
||||
if(this.inputs.length > 0 && this.inputs[0].value){
|
||||
let terms = []
|
||||
|
||||
|
|
@ -153,6 +155,7 @@
|
|||
}
|
||||
}
|
||||
} else if(this.metadatum.value.constructor.name == 'Object'){
|
||||
|
||||
if(this.metadatum.value.id == this.inputs){
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export const eventBus = new Vue({
|
|||
if( tainacan_plugin.components ){
|
||||
this.componentsTag = tainacan_plugin.components;
|
||||
}
|
||||
this.$on('input', data => this.updateValue(data) );
|
||||
this.$on('input', data => this.updateValue(data) );
|
||||
},
|
||||
methods : {
|
||||
registerComponent( name ){
|
||||
|
|
@ -38,9 +38,10 @@ export const eventBus = new Vue({
|
|||
this.$emit('isChangingValue', true);
|
||||
},
|
||||
updateValue(data){
|
||||
|
||||
this.$emit('isUpdatingValue', true);
|
||||
if ( data.item_id ){
|
||||
|
||||
|
||||
if(data.values.length > 0 && data.values[0].value){
|
||||
let val = [];
|
||||
for(let i of data.values){
|
||||
|
|
|
|||
|
|
@ -57,11 +57,18 @@ class Theme_Helper {
|
|||
]);
|
||||
$this->register_view_mode('cards', [
|
||||
'label' => __('Cards view', 'tainacan'),
|
||||
'dynamic_metadata' => true,
|
||||
'description' => 'A cards view, flexible for metadata',
|
||||
'dynamic_metadata' => false,
|
||||
'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>',
|
||||
'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) {
|
||||
|
|
|
|||
|
|
@ -10,9 +10,15 @@
|
|||
|
||||
<!-- 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')"
|
||||
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) : ''" />
|
||||
|
|
@ -21,22 +27,42 @@
|
|||
<div
|
||||
class="media"
|
||||
@click="goToItemPage(item)">
|
||||
<a
|
||||
|
||||
<img
|
||||
v-if="item.thumbnail != undefined"
|
||||
@click="goToItemPage(item)">
|
||||
<img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
|
||||
</a>
|
||||
:src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
|
||||
|
||||
<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"
|
||||
:key="index"
|
||||
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>
|
||||
<p
|
||||
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"
|
||||
class="metadata-value"/>
|
||||
</span>
|
||||
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 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>
|
||||
|
||||
|
|
@ -71,6 +97,9 @@ export default {
|
|||
} else {
|
||||
return metadata.value_as_html;
|
||||
}
|
||||
},
|
||||
getLimitedDescription(description) {
|
||||
return description.length > 120 ? description.substring(0, 117) + '...' : description;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue