Makes ViewModeCards a component instead of a template.
This commit is contained in:
Mateus Machado Luna
parent
9c109eba17
commit
c56f8fd12d
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div
|
||||
class="tainacan-page-title">
|
||||
<h1>{{ pageTitle }} <span class="is-italic">{{ isRepositoryLevel ? '' : entityName }}</span></h1>
|
||||
<h1>{{ pageTitle }} <span class="is-italic has-text-weight-semibold">{{ isRepositoryLevel ? '' : entityName }}</span></h1>
|
||||
<a
|
||||
@click="$router.go(-1)"
|
||||
class="back-link is-secondary">
|
||||
|
|
|
|||
|
|
@ -29,7 +29,8 @@ import FilterCategorySelectbox from '../../classes/filter-types/category/Selectb
|
|||
import TaincanFormItem from '../../classes/metadata-types/tainacan-form-item.vue';
|
||||
import TaincanFiltersList from '../../classes/filter-types/tainacan-filter-item.vue';
|
||||
import ItemsPage from '../pages/lists/items-page.vue';
|
||||
import TableViewMode from '../../theme-helper/table-view-mode.vue';
|
||||
import ViewModeTable from '../../theme-helper/view-mode-table.vue';
|
||||
import ViewModeCards from '../../theme-helper/view-mode-cards.vue';
|
||||
|
||||
// Remaining imports
|
||||
import HelpButton from '../components/other/help-button.vue';
|
||||
|
|
@ -77,7 +78,9 @@ Vue.component('help-button', HelpButton);
|
|||
Vue.component('draggable', draggable);
|
||||
Vue.component('items-page', ItemsPage);
|
||||
|
||||
Vue.component('table-view-mode', TableViewMode);
|
||||
// Oficial view modes
|
||||
Vue.component('view-mode-table', ViewModeTable);
|
||||
Vue.component('view-mode-cards', ViewModeCards);
|
||||
|
||||
Vue.use(eventBusSearch, { store: store, router: routerTheme});
|
||||
|
||||
|
|
|
|||
|
|
@ -326,8 +326,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Admin Table -->
|
||||
|
||||
<!-- When advanced search -->
|
||||
<items-list
|
||||
v-if="!isOnTheme &&
|
||||
|
|
@ -343,7 +341,7 @@
|
|||
:is-on-trash="status == 'trash'"
|
||||
:view-mode="adminViewMode"/>
|
||||
|
||||
<!-- Regular -->
|
||||
<!-- Admin View Modes-->
|
||||
<items-list
|
||||
v-else-if="!isOnTheme &&
|
||||
!isLoadingItems &&
|
||||
|
|
@ -370,10 +368,10 @@
|
|||
registeredViewModes[viewMode] != undefined &&
|
||||
registeredViewModes[viewMode].type == 'component'"
|
||||
:collection-id="collectionId"
|
||||
:table-metadata="tableMetadata"
|
||||
:displayed-metadata="tableMetadata"
|
||||
:items="items"
|
||||
:is-loading="isLoadingItems"
|
||||
:is="'table-view-mode'"/>
|
||||
:is="registeredViewModes[viewMode].component"/>
|
||||
|
||||
<!-- Empty Placeholder (only used in Admin) -->
|
||||
<section
|
||||
|
|
|
|||
|
|
@ -55,7 +55,13 @@ class Theme_Helper {
|
|||
'icon' => '<span class="icon"><i class="mdi mdi-table mdi-24px"></i></span>',
|
||||
'type' => 'component',
|
||||
]);
|
||||
|
||||
$this->register_view_mode('cards', [
|
||||
'label' => __('Cards view', 'tainacan'),
|
||||
'dynamic_metadata' => true,
|
||||
'description' => 'A cards view, flexible for metadata',
|
||||
'icon' => '<span class="icon"><i class="mdi mdi-view-list mdi-24px"></i></span>',
|
||||
'type' => 'component'
|
||||
]);
|
||||
}
|
||||
|
||||
public function enqueue_scripts($force = false) {
|
||||
|
|
@ -298,7 +304,7 @@ class Theme_Helper {
|
|||
* Default: theme-path/tainacan/view-mode-{$slug}.php
|
||||
* @type string $component Component tag name. The web component js must be included and must accept two props:
|
||||
* * items - the list of items to be rendered
|
||||
* * displayed_metadata - list of metadata to be displayed
|
||||
* * displayed-metadata - list of metadata to be displayed
|
||||
* Default view-mode-{$slug}
|
||||
* @type string $thumbnail Full URL to an thumbnail that represents the view mode. Displayed in admin.
|
||||
* @type string $icon HTML that outputs an icon that represents the view mode. Displayed in front end.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<div class="table-container">
|
||||
<div class="table-wrapper">
|
||||
<!-- CARDS VIEW MODE -->
|
||||
<div class="tainacan-cards-container">
|
||||
<div
|
||||
:key="index"
|
||||
v-for="(item, index) of items"
|
||||
class="tainacan-card">
|
||||
|
||||
<!-- Title -->
|
||||
<p
|
||||
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 class="metadata-label">{{ column.name }}</h3>
|
||||
<p
|
||||
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"
|
||||
class="metadata-value"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'ViewModeCards',
|
||||
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-cards.scss";
|
||||
|
||||
.tainacan-cards-container .tainacan-card .metadata-title {
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<tr>
|
||||
<!-- Displayed Metadata -->
|
||||
<th
|
||||
v-for="(column, index) in tableMetadata"
|
||||
v-for="(column, index) in displayedMetadata"
|
||||
:key="index"
|
||||
v-if="column.display"
|
||||
class="column-default-width"
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
<!-- Item Displayed Metadata -->
|
||||
<td
|
||||
:key="index"
|
||||
v-for="(column, index) in tableMetadata"
|
||||
v-for="(column, index) in displayedMetadata"
|
||||
v-if="column.display"
|
||||
:label="column.name"
|
||||
:aria-label="(column.metadatum != 'row_thumbnail' && column.metadatum != 'row_creation' && column.metadatum != 'row_author')
|
||||
|
|
@ -100,10 +100,10 @@
|
|||
<script>
|
||||
|
||||
export default {
|
||||
name: 'TableViewMode',
|
||||
name: 'ViewModeTable',
|
||||
props: {
|
||||
collectionId: Number,
|
||||
tableMetadata: Array,
|
||||
displayedMetadata: Array,
|
||||
items: Array,
|
||||
isLoading: false
|
||||
},
|
||||
Loading…
Reference in New Issue