Adds first extra visualization forms to Theme Items List. Allows Item to be viwed on theme without being logged in.
This commit is contained in:
mateuswetah
parent
c0e70ef353
commit
f6ce7b023d
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<div class="cards-container">
|
||||
<div
|
||||
class="tainacan-card"
|
||||
v-for="(item, index) of items"
|
||||
:key="index"
|
||||
@click="goToItemPage(item)">
|
||||
|
||||
<img
|
||||
class="card-image"
|
||||
:src="item.thumbnail.medium_large">
|
||||
<div class="card-metadata">
|
||||
<span
|
||||
:key="index"
|
||||
v-for="(field, index) of tableFields">
|
||||
<p
|
||||
v-if="field.display && field.id"
|
||||
:class="{ 'field-main-content': field.field_type_object != undefined ? (field.field_type_object.related_mapped_prop == 'title') : false }"
|
||||
v-html="(field.field == 'row_author' || field.field == 'row_creation') ? item[field.slug] : renderMetadata(item.metadata[field.slug])"/>
|
||||
<p
|
||||
v-if="field.field == 'row_author'">
|
||||
{{ $i18n.get('label_created_by') + ": " + item[field.slug] }}
|
||||
</p>
|
||||
<p
|
||||
v-if="field.field == 'row_creation'">
|
||||
{{ $i18n.get('label_creation_date') + ": " + item[field.slug] }}
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TainacanCardsList',
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
},
|
||||
props: {
|
||||
tableFields: Array,
|
||||
items: Array,
|
||||
isLoading: false,
|
||||
},
|
||||
methods: {
|
||||
renderMetadata(metadata) {
|
||||
|
||||
if (!metadata) {
|
||||
return '';
|
||||
} else if (metadata.date_i18n) {
|
||||
return metadata.date_i18n;
|
||||
} else {
|
||||
return metadata.value_as_html;
|
||||
}
|
||||
},
|
||||
goToItemPage(item) {
|
||||
window.location.href = item.url;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import "../../scss/_variables.scss";
|
||||
|
||||
.cards-container {
|
||||
padding: 20px calc(8.333333% - 12px);
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-flow: wrap;
|
||||
|
||||
.tainacan-card {
|
||||
cursor: pointer;
|
||||
padding: 12px;
|
||||
width: 50%; //258px;
|
||||
|
||||
@media screen and (min-width: 769px) and (max-width: 1216px) { width: 33.33333%; }
|
||||
|
||||
@media screen and (min-width: 1217px) { width: 25%; }
|
||||
|
||||
img.card-image {
|
||||
width: 100%;
|
||||
}
|
||||
.card-metadata {
|
||||
padding: 8px 0px;
|
||||
background: white;
|
||||
font-size: 11px;
|
||||
color: $gray-light;
|
||||
|
||||
p.field-main-content {
|
||||
font-size: 14px;
|
||||
color: $tainacan-input-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<div class="list-container">
|
||||
<div
|
||||
class="tainacan-list"
|
||||
v-for="(item, index) of items"
|
||||
:key="index"
|
||||
@click="goToItemPage(item)">
|
||||
|
||||
<p class="field-main-content">{{ getTitle(item) }}</p>
|
||||
<div>
|
||||
<div class="list-image">
|
||||
<img :src="item.thumbnail.medium">
|
||||
</div>
|
||||
<div class="list-metadata">
|
||||
<span
|
||||
v-for="(field, index) of tableFields"
|
||||
:key="index">
|
||||
<p
|
||||
v-if="field.display && field.id && (field.field_type_object != undefined && field.field_type_object.related_mapped_prop != 'title')"
|
||||
v-html="renderMetadata(item.metadata[field.slug])"/>
|
||||
<p
|
||||
v-if="field.field == 'row_author'">
|
||||
{{ $i18n.get('label_created_by') + ": " + item[field.slug] }}
|
||||
</p>
|
||||
<p
|
||||
v-if="field.field == 'row_creation'">
|
||||
{{ $i18n.get('label_creation_date') + ": " + item[field.slug] }}
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TainacanListList',
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
},
|
||||
props: {
|
||||
tableFields: Array,
|
||||
items: Array,
|
||||
isLoading: false,
|
||||
},
|
||||
methods: {
|
||||
getTitle(item) {
|
||||
for (let field of this.tableFields) {
|
||||
if (field.field_type_object != undefined && field.field_type_object.related_mapped_prop == 'title')
|
||||
return this.renderMetadata(item.metadata[field.slug]);
|
||||
}
|
||||
},
|
||||
renderMetadata(metadata) {
|
||||
|
||||
if (!metadata) {
|
||||
return '';
|
||||
} else if (metadata.date_i18n) {
|
||||
return metadata.date_i18n;
|
||||
} else {
|
||||
return metadata.value_as_html;
|
||||
}
|
||||
},
|
||||
goToItemPage(item) {
|
||||
window.location.href = item.url;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import "../../scss/_variables.scss";
|
||||
|
||||
.list-container {
|
||||
padding: 20px calc(8.333333% - 12px);
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-flow: wrap;
|
||||
|
||||
.tainacan-list {
|
||||
cursor: pointer;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
text-align: left;
|
||||
padding: 16px 12px;
|
||||
width: 100%;
|
||||
|
||||
@media screen and (min-width: 769px) and (max-width: 1216px) { width: 50%; }
|
||||
|
||||
@media screen and (min-width: 1217px) { width: 33.333333%; }
|
||||
|
||||
p.field-main-content {
|
||||
font-size: 14px;
|
||||
color: $tainacan-input-color;
|
||||
}
|
||||
&>div {
|
||||
display: flex;
|
||||
|
||||
.list-image {
|
||||
width: 25%;
|
||||
|
||||
img { width: 100%; }
|
||||
}
|
||||
.list-metadata {
|
||||
width: 75%;
|
||||
padding: 0px 16px;
|
||||
background: white;
|
||||
font-size: 11px;
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
</div>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table class="table">
|
||||
<table class="tainacan-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- Checking list -->
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="table-wrapper">
|
||||
<table class="table">
|
||||
<table class="tainacan-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- Checking list -->
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="table-container">
|
||||
<div class="table-wrapper">
|
||||
<table class="table">
|
||||
<table class="tainacan-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- Title -->
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
</div>
|
||||
<div class="field is-pulled-right">
|
||||
<b-dropdown
|
||||
:mobile-modal="false"
|
||||
position="is-bottom-left"
|
||||
v-if="items.length > 0 && items[0].current_user_can_edit"
|
||||
:disabled="!isSelectingItems"
|
||||
|
|
@ -38,7 +39,7 @@
|
|||
<div class="table-wrapper">
|
||||
<table
|
||||
:class="{'selectable-table': !isOnTheme }"
|
||||
class="table">
|
||||
class="tainacan-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- Checking list -->
|
||||
|
|
@ -164,8 +165,6 @@
|
|||
</a>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -175,7 +174,6 @@
|
|||
|
||||
<script>
|
||||
import { mapActions } from 'vuex';
|
||||
import DataAndTooltip from '../other/data-and-tooltip.vue'
|
||||
|
||||
export default {
|
||||
name: 'ItemsList',
|
||||
|
|
@ -193,9 +191,6 @@ export default {
|
|||
isLoading: false,
|
||||
isOnTheme: false
|
||||
},
|
||||
components: {
|
||||
DataAndTooltip
|
||||
},
|
||||
mounted() {
|
||||
this.selectedItems = [];
|
||||
for (let i = 0; i < this.items.length; i++)
|
||||
|
|
@ -308,15 +303,6 @@ export default {
|
|||
} else {
|
||||
return metadata.value_as_html;
|
||||
}
|
||||
},
|
||||
getCreationHtml(item) {
|
||||
return this.$i18n.get('info_date') + item['creation_date'];
|
||||
},
|
||||
getAuthorHtml(item) {
|
||||
return item['author_name'];
|
||||
},
|
||||
getDecodedURI(url) {
|
||||
return decodeURIComponent(url);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,89 +0,0 @@
|
|||
<template>
|
||||
<span class="data-wrapper">
|
||||
<p
|
||||
class="data-area"
|
||||
v-html="data" />
|
||||
<div class="data-tooltip">
|
||||
<div class="data-tooltip-body">
|
||||
<p v-html="data" />
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DataAndTooltip',
|
||||
props: {
|
||||
data: '',
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@import "../../scss/_variables.scss";
|
||||
|
||||
.data-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.data-area {
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.data-wrapper:hover .data-tooltip {
|
||||
margin-bottom: -8px;
|
||||
margin-left: -8px;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.data-tooltip {
|
||||
z-index: 99999999999999999999;
|
||||
color: $tertiary;
|
||||
background-color: $primary-light;
|
||||
border: none;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
max-width: 280px;
|
||||
min-width: 100px;
|
||||
height: auto;
|
||||
transition: margin-bottom 0.2s ease, opacity 0.3s ease;
|
||||
position: absolute;
|
||||
bottom: calc(100% - 6px);
|
||||
left: 0;
|
||||
margin-bottom: -27px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
.data-tooltip-body {
|
||||
padding: 20px;
|
||||
p {
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 28px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
}
|
||||
&:before {
|
||||
border-color: $primary-light transparent transparent transparent;
|
||||
border-right-width: 6px;
|
||||
border-top-width: 7px;
|
||||
border-left-width: 6px;
|
||||
bottom: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -1,92 +1,143 @@
|
|||
<template>
|
||||
<span>
|
||||
<div
|
||||
class="header-item"
|
||||
v-if="!isOnTheme">
|
||||
<b-dropdown id="item-creation-options-dropdown">
|
||||
<button
|
||||
class="button is-secondary"
|
||||
slot="trigger">
|
||||
<span>{{ $i18n.getFrom('items','add_new') }}</span>
|
||||
<b-icon icon="menu-down"/>
|
||||
</button>
|
||||
|
||||
<b-dropdown-item>
|
||||
<router-link
|
||||
id="a-create-item"
|
||||
tag="div"
|
||||
:to="{ path: $routerHelper.getNewItemPath(collectionId) }">
|
||||
{{ $i18n.get('add_one_item') }}
|
||||
</router-link>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item disabled>
|
||||
{{ $i18n.get('add_items_bulk') + ' (Not ready)' }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item disabled>
|
||||
{{ $i18n.get('add_items_external_source') + ' (Not ready)' }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<b-dropdown
|
||||
ref="displayedFieldsDropdown"
|
||||
class="show">
|
||||
<button
|
||||
class="button is-white"
|
||||
slot="trigger">
|
||||
<span>{{ $i18n.get('label_table_fields') }}</span>
|
||||
<b-icon icon="menu-down"/>
|
||||
</button>
|
||||
<div class="metadata-options-container">
|
||||
<b-dropdown-item
|
||||
v-for="(column, index) in localTableFields"
|
||||
:key="index"
|
||||
class="control"
|
||||
custom>
|
||||
<b-checkbox
|
||||
v-model="column.display"
|
||||
:native-value="column.display">
|
||||
{{ column.name }}
|
||||
</b-checkbox>
|
||||
</b-dropdown-item>
|
||||
</div>
|
||||
<div class="dropdown-item-apply">
|
||||
<button
|
||||
@click="onChangeDisplayedFields()"
|
||||
class="button is-success">
|
||||
{{ $i18n.get('label_apply_changes') }}
|
||||
<div class="sub-header">
|
||||
<div
|
||||
class="header-item"
|
||||
v-if="!isOnTheme">
|
||||
<b-dropdown
|
||||
:mobile-modal="false"
|
||||
id="item-creation-options-dropdown">
|
||||
<button
|
||||
class="button is-secondary"
|
||||
slot="trigger">
|
||||
<span>{{ $i18n.getFrom('items','add_new') }}</span>
|
||||
<b-icon icon="menu-down"/>
|
||||
</button>
|
||||
</div>
|
||||
</b-dropdown>
|
||||
|
||||
<b-dropdown-item>
|
||||
<router-link
|
||||
id="a-create-item"
|
||||
tag="div"
|
||||
:to="{ path: $routerHelper.getNewItemPath(collectionId) }">
|
||||
{{ $i18n.get('add_one_item') }}
|
||||
</router-link>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item disabled>
|
||||
{{ $i18n.get('add_items_bulk') + ' (Not ready)' }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item disabled>
|
||||
{{ $i18n.get('add_items_external_source') + ' (Not ready)' }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<b-dropdown
|
||||
ref="displayedFieldsDropdown"
|
||||
:mobile-modal="false"
|
||||
:disabled="!hasResults"
|
||||
class="show">
|
||||
<button
|
||||
class="button is-white"
|
||||
slot="trigger">
|
||||
<span>{{ $i18n.get('label_table_fields') }}</span>
|
||||
<b-icon icon="menu-down"/>
|
||||
</button>
|
||||
<div class="metadata-options-container">
|
||||
<b-dropdown-item
|
||||
v-for="(column, index) in localTableFields"
|
||||
:key="index"
|
||||
class="control"
|
||||
custom>
|
||||
<b-checkbox
|
||||
v-model="column.display"
|
||||
:native-value="column.display">
|
||||
{{ column.name }}
|
||||
</b-checkbox>
|
||||
</b-dropdown-item>
|
||||
</div>
|
||||
<div class="dropdown-item-apply">
|
||||
<button
|
||||
@click="onChangeDisplayedFields()"
|
||||
class="button is-success">
|
||||
{{ $i18n.get('label_apply_changes') }}
|
||||
</button>
|
||||
</div>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
<div
|
||||
v-if="isOnTheme"
|
||||
class="header-item">
|
||||
<b-field>
|
||||
<b-dropdown
|
||||
@change="$emit('onChangeViewMode', $event)"
|
||||
:value="viewMode">
|
||||
<button
|
||||
class="button is-white"
|
||||
slot="trigger">
|
||||
<span>View (tests)</span>
|
||||
<b-icon icon="menu-down" />
|
||||
</button>
|
||||
<b-dropdown-item :value="'table'">
|
||||
<b-icon icon="table"/>
|
||||
Table
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item :value="'cards'">
|
||||
<b-icon icon="view-grid"/>
|
||||
Cards
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item :value="'list'">
|
||||
<b-icon icon="view-list"/>
|
||||
List
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</b-field>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<b-field>
|
||||
<b-select
|
||||
:disabled="!hasResults"
|
||||
@input="onChangeOrderBy($event)"
|
||||
:placeholder="$i18n.get('label_sorting')">
|
||||
<option
|
||||
v-for="field in tableFields"
|
||||
v-if="
|
||||
field.id === 'creation_date' ||
|
||||
field.id === 'author_name' || (
|
||||
field.id !== undefined &&
|
||||
field.field_type_object.related_mapped_prop !== 'description' &&
|
||||
field.field_type_object.primitive_type !== 'term' &&
|
||||
field.field_type_object.primitive_type !== 'item' &&
|
||||
field.field_type_object.primitive_type !== 'compound'
|
||||
)"
|
||||
:value="field"
|
||||
:key="field.id">
|
||||
{{ field.name }}
|
||||
</option>
|
||||
</b-select>
|
||||
<button
|
||||
:disabled="!hasResults"
|
||||
class="button is-white is-small"
|
||||
@click="onChangeOrder()">
|
||||
<b-icon :icon="order === 'ASC' ? 'sort-ascending' : 'sort-descending'"/>
|
||||
</button>
|
||||
</b-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<b-field>
|
||||
<b-select
|
||||
@input="onChangeOrderBy($event)"
|
||||
:placeholder="$i18n.get('label_sorting')">
|
||||
<option
|
||||
v-for="field in tableFields"
|
||||
v-if="
|
||||
field.id === 'creation_date' ||
|
||||
field.id === 'author_name' || (
|
||||
field.id !== undefined &&
|
||||
field.field_type_object.related_mapped_prop !== 'description' &&
|
||||
field.field_type_object.primitive_type !== 'term' &&
|
||||
field.field_type_object.primitive_type !== 'item' &&
|
||||
field.field_type_object.primitive_type !== 'compound'
|
||||
)"
|
||||
:value="field"
|
||||
:key="field.id">
|
||||
{{ field.name }}
|
||||
</option>
|
||||
</b-select>
|
||||
<button
|
||||
class="button is-white is-small"
|
||||
@click="onChangeOrder()">
|
||||
<b-icon :icon="order === 'ASC' ? 'sort-ascending' : 'sort-descending'"/>
|
||||
</button>
|
||||
</b-field>
|
||||
<div
|
||||
v-if="!isOnTheme"
|
||||
class="tabs">
|
||||
<ul>
|
||||
<li
|
||||
@click="onChangeTab('')"
|
||||
:class="{ 'is-active': status == undefined || status == ''}"><a>{{ $i18n.get('label_all_items') }}</a></li>
|
||||
<li
|
||||
@click="onChangeTab('draft')"
|
||||
:class="{ 'is-active': status == 'draft'}"><a>{{ $i18n.get('label_draft_items') }}</a></li>
|
||||
<li
|
||||
@click="onChangeTab('trash')"
|
||||
:class="{ 'is-active': status == 'trash'}"><a>{{ $i18n.get('label_trash_items') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
|
@ -104,9 +155,11 @@
|
|||
},
|
||||
props: {
|
||||
collectionId: Number,
|
||||
isRepositoryLevel: false,
|
||||
tableFields: Array,
|
||||
isOnTheme: false
|
||||
isOnTheme: false,
|
||||
status: '',
|
||||
hasResults: false ,
|
||||
viewMode: 'table'
|
||||
},
|
||||
watch: {
|
||||
tableFields() {
|
||||
|
|
@ -127,7 +180,8 @@
|
|||
methods: {
|
||||
...mapGetters('search', [
|
||||
'getOrderBy',
|
||||
'getOrder'
|
||||
'getOrder',
|
||||
'getStatus'
|
||||
]),
|
||||
onChangeOrderBy(field) {
|
||||
this.$eventBusSearch.setOrderBy(field);
|
||||
|
|
@ -135,6 +189,9 @@
|
|||
onChangeOrder() {
|
||||
this.order == 'DESC' ? this.$eventBusSearch.setOrder('ASC') : this.$eventBusSearch.setOrder('DESC');
|
||||
},
|
||||
onChangeTab(status) {
|
||||
this.$eventBusSearch.setStatus(status);
|
||||
},
|
||||
onChangeDisplayedFields() {
|
||||
let fetchOnlyFieldIds = [];
|
||||
|
||||
|
|
@ -159,35 +216,71 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
|
||||
@import '../../scss/_variables.scss';
|
||||
|
||||
.sub-header {
|
||||
min-height: $subheader-height;
|
||||
height: $subheader-height;
|
||||
padding-top: $page-small-top-padding;
|
||||
padding-left: $page-side-padding;
|
||||
padding-right: $page-side-padding;
|
||||
border-bottom: 0.5px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
height: 60px;
|
||||
margin-top: 0;
|
||||
|
||||
.header-item {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-item {
|
||||
display: inline-block;
|
||||
|
||||
.field {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#item-creation-options-dropdown {
|
||||
margin-right: 80px;
|
||||
}
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
|
||||
div.dropdown-content {
|
||||
padding: 0;
|
||||
|
||||
.metadata-options-container {
|
||||
max-height: 240px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dropdown-item-apply {
|
||||
width: 100%;
|
||||
border-top: 1px solid #efefef;
|
||||
padding: 8px 12px;
|
||||
text-align: right;
|
||||
}
|
||||
.dropdown-item-apply .button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-item .field {
|
||||
align-items: center;
|
||||
}
|
||||
#item-creation-options-dropdown {
|
||||
margin-right: 80px;
|
||||
}
|
||||
.header-item .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
.metadata-options-container {
|
||||
max-height: 240px;
|
||||
overflow: auto;
|
||||
}
|
||||
.dropdown-content {
|
||||
padding: 0;
|
||||
}
|
||||
.dropdown-item-apply {
|
||||
width: 100%;
|
||||
border-top: 1px solid #efefef;
|
||||
padding: 8px 12px;
|
||||
text-align: right;
|
||||
}
|
||||
.dropdown-item-apply .button {
|
||||
width: 100%;
|
||||
|
||||
.tabs {
|
||||
padding-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding-left: $page-side-padding;
|
||||
padding-right: $page-side-padding;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import Vue from 'vue';
|
|||
import Buefy from 'buefy';
|
||||
import VTooltip from 'v-tooltip'
|
||||
|
||||
|
||||
// Custom elements
|
||||
import Text from '../../classes/field-types/text/Text.vue';
|
||||
import Textarea from '../../classes/field-types/textarea/Textarea.vue';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
// Main imports
|
||||
import Vue from 'vue';
|
||||
import Buefy from 'buefy';
|
||||
import VTooltip from 'v-tooltip'
|
||||
|
||||
// Custom elements
|
||||
import Text from '../../classes/field-types/text/Text.vue';
|
||||
|
|
@ -39,6 +40,7 @@ import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin } from '
|
|||
|
||||
// Configure and Register Plugins
|
||||
Vue.use(Buefy);
|
||||
Vue.use(VTooltip)
|
||||
Vue.use(I18NPlugin);
|
||||
Vue.use(UserPrefsPlugin);
|
||||
Vue.use(RouterHelperPlugin);
|
||||
|
|
|
|||
|
|
@ -91,33 +91,18 @@
|
|||
class="items-list-area"
|
||||
:class="{ 'spaced-to-right': !isFiltersMenuCompressed }">
|
||||
<!-- SEARCH CONTROL ------------------------- -->
|
||||
<div class="sub-header">
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isLoadingFields"/>
|
||||
<search-control
|
||||
v-if="fields.length > 0 && (items.length > 0 || isLoadingItems)"
|
||||
:is-repository-level="isRepositoryLevel"
|
||||
:collection-id="collectionId"
|
||||
:table-fields="tableFields"
|
||||
:pref-table-fields="prefTableFields"
|
||||
:is-on-theme="isOnTheme"/>
|
||||
</div>
|
||||
<div
|
||||
v-if="!isOnTheme"
|
||||
class="tabs">
|
||||
<ul>
|
||||
<li
|
||||
@click="onChangeTab('')"
|
||||
:class="{ 'is-active': status == undefined || status == ''}"><a>{{ $i18n.get('label_all_items') }}</a></li>
|
||||
<li
|
||||
@click="onChangeTab('draft')"
|
||||
:class="{ 'is-active': status == 'draft'}"><a>{{ $i18n.get('label_draft_items') }}</a></li>
|
||||
<li
|
||||
@click="onChangeTab('trash')"
|
||||
:class="{ 'is-active': status == 'trash'}"><a>{{ $i18n.get('label_trash_items') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isLoadingFields"/>
|
||||
<search-control
|
||||
:collection-id="collectionId"
|
||||
:table-fields="tableFields"
|
||||
:pref-table-fields="prefTableFields"
|
||||
:is-on-theme="isOnTheme"
|
||||
:status="status"
|
||||
:has-results="items.length > 0"
|
||||
:view-mode="viewMode"
|
||||
@onChangeViewMode="viewMode = $event"/>
|
||||
|
||||
<!-- <div
|
||||
:items="items"
|
||||
|
|
@ -128,12 +113,25 @@
|
|||
:is-full-page="false"
|
||||
:active.sync="isLoadingItems"/>
|
||||
<items-list
|
||||
v-if="!isLoadingItems && items.length > 0"
|
||||
v-if="viewMode == 'table' && !isLoadingItems && items.length > 0"
|
||||
:collection-id="collectionId"
|
||||
:table-fields="tableFields"
|
||||
:items="items"
|
||||
:is-loading="isLoading"
|
||||
:is-on-theme="isOnTheme"/>
|
||||
|
||||
<tainacan-cards-list
|
||||
v-if="viewMode == 'cards' && !isLoadingItems && items.length > 0"
|
||||
:table-fields="tableFields"
|
||||
:items="items"
|
||||
:is-loading="isLoading"/>
|
||||
|
||||
<tainacan-list-list
|
||||
v-if="viewMode == 'list' && !isLoadingItems && items.length > 0"
|
||||
:table-fields="tableFields"
|
||||
:items="items"
|
||||
:is-loading="isLoading"/>
|
||||
|
||||
<section
|
||||
v-if="!isLoadingItems && items.length <= 0"
|
||||
class="section">
|
||||
|
|
@ -172,6 +170,9 @@
|
|||
import Pagination from '../../components/search/pagination.vue'
|
||||
import {mapActions, mapGetters} from 'vuex';
|
||||
|
||||
import TainacanCardsList from '../../components/item-view-modes/tainacan-cards-list.vue';
|
||||
import TainacanListList from '../../components/item-view-modes/tainacan-list-list.vue';
|
||||
|
||||
export default {
|
||||
name: 'ItemsPage',
|
||||
data() {
|
||||
|
|
@ -187,7 +188,8 @@
|
|||
collapseAll: true,
|
||||
isOnTheme: false,
|
||||
futureSearchQuery: '',
|
||||
isHeaderShrinked: false
|
||||
isHeaderShrinked: false,
|
||||
viewMode: 'table'
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
|
@ -197,7 +199,9 @@
|
|||
SearchControl,
|
||||
ItemsList,
|
||||
FiltersItemsList,
|
||||
Pagination
|
||||
Pagination,
|
||||
TainacanCardsList,
|
||||
TainacanListList
|
||||
},
|
||||
methods: {
|
||||
...mapGetters('collection', [
|
||||
|
|
@ -222,9 +226,6 @@
|
|||
updateSearch() {
|
||||
this.$eventBusSearch.setSearchQuery(this.futureSearchQuery);
|
||||
},
|
||||
onChangeTab(status) {
|
||||
this.$eventBusSearch.setStatus(status);
|
||||
},
|
||||
prepareFieldsAndFilters() {
|
||||
|
||||
this.isLoadingFilters = true;
|
||||
|
|
@ -395,35 +396,9 @@
|
|||
}
|
||||
|
||||
.page-container {
|
||||
padding: 0px;
|
||||
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.sub-header {
|
||||
min-height: $subheader-height;
|
||||
height: $subheader-height;
|
||||
padding-top: $page-small-top-padding;
|
||||
padding-left: $page-side-padding;
|
||||
padding-right: $page-side-padding;
|
||||
border-bottom: 0.5px solid #ddd;
|
||||
position: relative;
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
height: 60px;
|
||||
margin-top: 0;
|
||||
|
||||
.header-item {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
padding-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding-left: $page-side-padding;
|
||||
padding-right: $page-side-padding;
|
||||
}
|
||||
.above-subheader {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
|
|
|
|||
|
|
@ -32,6 +32,12 @@
|
|||
&:focus {
|
||||
outline: 0px;
|
||||
}
|
||||
&[disabled] {
|
||||
border: none;
|
||||
}
|
||||
&.is-white[disabled] {
|
||||
background-color: white !important;
|
||||
}
|
||||
}
|
||||
.button.is-small {
|
||||
height: 26px !important;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,9 @@
|
|||
box-shadow: none !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
&[disabled] {
|
||||
background-color: white !important;
|
||||
}
|
||||
}
|
||||
&:not(.is-multiple)::after {
|
||||
content: "\F35D" !important;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
overflow: auto;
|
||||
margin-bottom: 0px !important;
|
||||
|
||||
table.table {
|
||||
table.tainacan-table {
|
||||
width: 100%;
|
||||
|
||||
.checkbox-cell {
|
||||
|
|
@ -126,6 +126,7 @@
|
|||
|
||||
.th-wrap {
|
||||
font-size: 12px !important;
|
||||
color: $gray-light;
|
||||
font-weight: normal !important;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
color: $tainacan-input-color;
|
||||
|
||||
.form-submit {
|
||||
justify-content: space-between !important;
|
||||
justify-content: start !important;
|
||||
padding: 1em 1.2em 0.4em 1.2em;
|
||||
margin-bottom: 0px;
|
||||
.button {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
padding: 20px;
|
||||
max-width: 280px;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.tooltip-arrow {
|
||||
width: 0;
|
||||
|
|
|
|||
|
|
@ -51,6 +51,9 @@ export default {
|
|||
$danger-invert: findColorInvert($danger);
|
||||
|
||||
$table-side-padding: 4.166666667%;
|
||||
|
||||
@import "../admin/scss/_tables.scss";
|
||||
@import "../admin/scss/_tooltips.scss";
|
||||
|
||||
.theme-items-list {
|
||||
|
||||
|
|
@ -371,234 +374,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
// Tables
|
||||
.table-container {
|
||||
padding: 0 $table-side-padding;
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
|
||||
.table-wrapper {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
border-collapse: separate;
|
||||
overflow: auto;
|
||||
margin-bottom: 0px !important;
|
||||
|
||||
table.table {
|
||||
width: 100%;
|
||||
|
||||
.checkbox-cell {
|
||||
min-width: 38px;
|
||||
width: 38px;
|
||||
padding: 0;
|
||||
left: 0;
|
||||
top: auto;
|
||||
display: table-cell;
|
||||
|
||||
&::before {
|
||||
box-shadow: inset 50px 0 10px -12px #222;
|
||||
content: " ";
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
label.checkbox {
|
||||
border-radius: 0px;
|
||||
background-color: white;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.b-checkbox.checkbox .control-label {
|
||||
display: none;
|
||||
}
|
||||
&.is-selecting {
|
||||
position: sticky !important;
|
||||
position: -webkit-sticky !important;
|
||||
&::before { visibility: visible !important; }
|
||||
}
|
||||
}
|
||||
// Only to be used in case we can implement Column resizing
|
||||
// th:not(:last-child) {
|
||||
// border-right: 1px solid $tainacan-input-background !important;
|
||||
// }
|
||||
|
||||
.thumbnail-cell {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.column-small-width {
|
||||
min-width: 80px;
|
||||
max-width: 80px;
|
||||
p {
|
||||
color: $gray-light;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
.column-default-width {
|
||||
min-width: 80px;
|
||||
max-width: 160px;
|
||||
p {
|
||||
color: $gray-light;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
.column-medium-width {
|
||||
min-width: 120px;
|
||||
max-width: 200px;
|
||||
p {
|
||||
color: $gray-light;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
.column-large-width {
|
||||
min-width: 120px;
|
||||
max-width: 240px;
|
||||
p {
|
||||
color: $gray-light;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
.column-main-content {
|
||||
min-width: 120px !important;
|
||||
max-width: 240px !important;
|
||||
p {
|
||||
font-size: 14px !important;
|
||||
color: $tainacan-input-color !important;
|
||||
margin: 0px !important;
|
||||
}
|
||||
}
|
||||
.column-needed-width {
|
||||
max-width: unset !important;
|
||||
}
|
||||
.column-align-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
th {
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
background-color: white;
|
||||
border-bottom: 1px solid $tainacan-input-background;
|
||||
top: 0px;
|
||||
z-index: 9;
|
||||
padding: 10px;
|
||||
vertical-align: bottom;
|
||||
|
||||
.th-wrap {
|
||||
font-size: 12px !important;
|
||||
font-weight: normal !important;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
|
||||
&.selected-row {
|
||||
background-color: $primary-lighter;
|
||||
.checkbox-cell .checkbox, .actions-cell .actions-container {
|
||||
background-color: $primary-lighter;
|
||||
}
|
||||
}
|
||||
td {
|
||||
height: 60px;
|
||||
max-height: 60px;
|
||||
padding: 10px;
|
||||
vertical-align: middle;
|
||||
line-height: 12px;
|
||||
border: none !important;
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin: 0px;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
img.table-thumb {
|
||||
max-height: 38px !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
td.actions-cell {
|
||||
padding: 0px;
|
||||
position: sticky !important;
|
||||
position: -webkit-sticky !important;
|
||||
right: 0px;
|
||||
top: auto;
|
||||
width: 80px;
|
||||
|
||||
.actions-container {
|
||||
visibility: hidden;
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 80px;
|
||||
z-index: 9;
|
||||
background-color: transparent;
|
||||
float: right;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: auto;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $tainacan-input-background !important;
|
||||
cursor: pointer;
|
||||
|
||||
.checkbox-cell {
|
||||
position: sticky !important;
|
||||
position: -webkit-sticky !important;
|
||||
|
||||
&::before { visibility: visible; }
|
||||
|
||||
.checkbox {
|
||||
background-color: $tainacan-input-background !important;
|
||||
}
|
||||
}
|
||||
.actions-cell {
|
||||
.actions-container {
|
||||
visibility: visible;
|
||||
background: $tainacan-input-background !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
box-shadow: inset -97px 0 17px -21px #222;
|
||||
content: " ";
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination-area {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ export default {
|
|||
this.$emit( 'hasToPrepareFieldsAndFilters');
|
||||
else {
|
||||
this.$emit( 'isLoadingItems', true);
|
||||
this.$store.dispatch('collection/fetchItems', this.collectionId).then((res) => {
|
||||
this.$store.dispatch('collection/fetchItems', { 'collectionId': this.collectionId, 'isOnTheme': (this.$route.name == null) }).then((res) => {
|
||||
this.$emit( 'isLoadingItems', false);
|
||||
this.$emit( 'hasFiltered', res.hasFiltered);
|
||||
//var event = new Event('tainacan-items-change')
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import axios from '../../../axios/axios';
|
||||
import qs from 'qs';
|
||||
|
||||
export const fetchItems = ({ rootGetters, dispatch, commit }, collectionId) => {
|
||||
export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, isOnTheme }) => {
|
||||
commit('cleanItems');
|
||||
return new Promise ((resolve, reject) => {
|
||||
|
||||
|
|
@ -14,10 +14,13 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, collectionId) => {
|
|||
hasFiltered = true;
|
||||
|
||||
// Differentiates between repository level and collection level queries
|
||||
let endpoint = '/collection/'+collectionId+'/items?context=edit&'
|
||||
let endpoint = '/collection/'+collectionId+'/items?'
|
||||
|
||||
if (collectionId == undefined)
|
||||
endpoint = '/items?context=edit&'
|
||||
endpoint = '/items?'
|
||||
|
||||
if (!isOnTheme)
|
||||
endpoint = endpoint + 'context=edit&'
|
||||
|
||||
axios.tainacan.get(endpoint + qs.stringify(postQueries) )
|
||||
.then(res => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue