Adds Clear all tags button. Adjustments on ItemEditionPage css and introdution of toasts notices to updated metadata.

This commit is contained in:
Mateus Machado Luna 2018-07-06 15:38:32 -03:00
parent fb56186cb6
commit 0b3c96c400
17 changed files with 338 additions and 167 deletions

View File

@ -13,52 +13,6 @@
<div class="columns"> <div class="columns">
<div class="column is-5-5"> <div class="column is-5-5">
<!-- Status -------------------------------- -->
<div class="section-label">
<label>{{ $i18n.get('label_status') }}</label>
<span class="required-metadatum-asterisk">*</span>
<help-button
:title="$i18n.getHelperTitle('items', 'status')"
:message="$i18n.getHelperMessage('items', 'status')"/>
</div>
<!-- Last Updated Info -->
<p>{{ ($i18n.get('info_updated_at') + ' ' + lastUpdated) }}
<em>
<span v-if="isUpdatingValues && !isEditingValues">&nbsp;&nbsp;{{ $i18n.get('info_updating_metadata_values') }}</span>
<span v-if="isEditingValues">&nbsp;&nbsp;{{ $i18n.get('info_editing_metadata_values') }}</span>
</em>
</p>
<div class="section-status">
<div class="field has-addons">
<b-select
v-model="form.status"
:placeholder="$i18n.get('instruction_select_a_status')">
<option
:id="`status-option-${statusOption.value}`"
v-for="statusOption in statusOptions"
:key="statusOption.value"
:value="statusOption.value"
:disabled="statusOption.disabled">{{ statusOption.label }}
</option>
</b-select>
<div class="control">
<button
type="button"
id="button-submit-item-creation"
@click.prevent="onSubmit"
class="button is-success">
{{ $i18n.get('save') }}
</button>
</div>
</div>
<p
v-if="item.status == 'auto-draft'"
class="help is-danger">
{{ $i18n.get('info_item_not_saved') }}
</p>
<p class="help is-danger">{{ formErrorMessage }}</p>
</div>
<!-- Document -------------------------------- --> <!-- Document -------------------------------- -->
<div class="section-label"> <div class="section-label">
<label>{{ form.document != undefined && form.document != null && form.document != '' ? $i18n.get('label_document') : $i18n.get('label_document_empty') }}</label> <label>{{ form.document != undefined && form.document != null && form.document != '' ? $i18n.get('label_document') : $i18n.get('label_document_empty') }}</label>
@ -66,61 +20,84 @@
:title="$i18n.getHelperTitle('items', 'document')" :title="$i18n.getHelperTitle('items', 'document')"
:message="$i18n.getHelperMessage('items', 'document')"/> :message="$i18n.getHelperMessage('items', 'document')"/>
</div> </div>
<div class="section-box "> <div class="section-box document-field">
<div <div
v-if="form.document != undefined && form.document != null && v-if="form.document != undefined && form.document != null &&
form.document_type != undefined && form.document_type != null && form.document_type != undefined && form.document_type != null &&
form.document != '' && form.document_type != 'empty'"> form.document != '' && form.document_type != 'empty'">
<div v-if="form.document_type == 'attachment'"> <div v-if="form.document_type == 'attachment'">
<div v-html="item.document_as_html" /> <div v-html="item.document_as_html" />
<button <div class="document-buttons-row">
type="button" <a
class="button is-primary" class="button is-rounded is-secondary"
size="is-small" size="is-small"
id="button-edit-document"
:aria-label="$i18n.get('label_button_edit_document')"
@click.prevent="setFileDocument($event)"> @click.prevent="setFileDocument($event)">
{{ $i18n.get('edit') }} <b-icon
</button>
<button
type="button"
class="button is-primary"
size="is-small" size="is-small"
icon="pencil" />
</a>
<a
class="button is-rounded is-secondary"
size="is-small"
id="button-delete-document"
:aria-label="$i18n.get('label_button_delete_document')"
@click.prevent="removeDocument()"> @click.prevent="removeDocument()">
{{ $i18n.get('remove') }} <b-icon
</button> size="is-small"
icon="delete" />
</a>
</div>
</div> </div>
<div v-if="form.document_type == 'text'"> <div v-if="form.document_type == 'text'">
<div v-html="item.document_as_html" /> <div v-html="item.document_as_html" />
<button <div class="document-buttons-row">
type="button" <a
class="button is-primary" class="button is-rounded is-secondary"
size="is-small" :aria-label="$i18n.get('label_button_edit_document')"
id="button-edit-document"
@click.prevent="setTextDocument()"> @click.prevent="setTextDocument()">
{{ $i18n.get('edit') }} <b-icon
</button>
<button
type="button"
class="button is-primary"
size="is-small" size="is-small"
icon="pencil" />
</a>
<a
class="button is-rounded is-secondary"
size="is-small"
:aria-label="$i18n.get('label_button_delete_document')"
id="button-delete-document"
@click.prevent="removeDocument()"> @click.prevent="removeDocument()">
{{ $i18n.get('remove') }} <b-icon
</button> size="is-small"
icon="delete" />
</a>
</div>
</div> </div>
<div v-if="form.document_type == 'url'"> <div v-if="form.document_type == 'url'">
<div v-html="item.document_as_html" /> <div v-html="item.document_as_html" />
<button <div class="document-buttons-row">
type="button" <a
class="button is-secondary" class="button is-rounded is-secondary"
size="is-small" size="is-small"
:aria-label="$i18n.get('label_button_edit_document')"
id="button-edit-document"
@click.prevent="setURLDocument()"> @click.prevent="setURLDocument()">
{{ $i18n.get('edit') }} <b-icon
</button>
<button
type="button"
class="button is-secondary"
size="is-small" size="is-small"
icon="pencil" />
</a>
<a
class="button is-rounded is-secondary"
size="is-small"
:aria-label="$i18n.get('label_button_delete_document')"
id="button-delete-document"
@click.prevent="removeDocument()"> @click.prevent="removeDocument()">
{{ $i18n.get('remove') }} <b-icon
</button> size="is-small"
icon="delete" />
</a>
</div>
</div> </div>
</div> </div>
<ul v-else> <ul v-else>
@ -229,16 +206,10 @@
</div> </div>
<div class="section-box section-thumbnail"> <div class="section-box section-thumbnail">
<div class="thumbnail-field"> <div class="thumbnail-field">
<a
class="button is-rounded is-secondary"
id="button-edit-thumbnail"
:aria-label="$i18n.get('label_button_edit_thumb')"
@click.prevent="thumbnailMediaFrame.openFrame($event)">
<b-icon icon="pencil" />
</a>
<file-item <file-item
v-if="item.thumbnail.thumb != undefined && item.thumbnail.thumb != false" v-if="item.thumbnail.thumb != undefined && item.thumbnail.thumb != false"
:show-name="false" :show-name="false"
:size="178"
:file="{ :file="{
media_type: 'image', media_type: 'image',
guid: { rendered: item.thumbnail.thumb }, guid: { rendered: item.thumbnail.thumb },
@ -254,13 +225,22 @@
</figure> </figure>
<div class="thumbnail-buttons-row"> <div class="thumbnail-buttons-row">
<a <a
id="button-delete" class="button is-rounded is-secondary"
id="button-edit-thumbnail"
:aria-label="$i18n.get('label_button_edit_thumb')"
@click.prevent="thumbnailMediaFrame.openFrame($event)">
<b-icon
size="is-small"
icon="pencil" />
</a>
<a
id="button-delete-thumbnail"
class="button is-rounded is-secondary"
:aria-label="$i18n.get('label_button_delete_thumb')" :aria-label="$i18n.get('label_button_delete_thumb')"
@click="deleteThumbnail()"> @click="deleteThumbnail()">
<b-icon <b-icon
type="is-gray" size="is-small"
icon="delete" /> icon="delete" />
<span class="text">{{ $i18n.get('remove') }} </span>
</a> </a>
</div> </div>
</div> </div>
@ -294,6 +274,53 @@
<div <div
class="column is-4-5" class="column is-4-5"
v-show="!isMetadataColumnCompressed"> v-show="!isMetadataColumnCompressed">
<!-- Status -------------------------------- -->
<div class="section-label">
<label>{{ $i18n.get('label_status') }}</label>
<span class="required-metadatum-asterisk">*</span>
<help-button
:title="$i18n.getHelperTitle('items', 'status')"
:message="$i18n.getHelperMessage('items', 'status')"/>
</div>
<!-- Last Updated Info -->
<p>{{ ($i18n.get('info_updated_at') + ' ' + lastUpdated) }}
<em>
<span v-if="isUpdatingValues && !isEditingValues">&nbsp;&nbsp;{{ $i18n.get('info_updating_metadata_values') }}</span>
<span v-if="isEditingValues">&nbsp;&nbsp;{{ $i18n.get('info_editing_metadata_values') }}</span>
</em>
</p>
<div class="section-status">
<div class="field has-addons">
<b-select
v-model="form.status"
:placeholder="$i18n.get('instruction_select_a_status')">
<option
:id="`status-option-${statusOption.value}`"
v-for="statusOption in statusOptions"
:key="statusOption.value"
:value="statusOption.value"
:disabled="statusOption.disabled">{{ statusOption.label }}
</option>
</b-select>
<div class="control">
<button
type="button"
id="button-submit-item-creation"
@click.prevent="onSubmit"
class="button is-success">
{{ $i18n.get('save') }}
</button>
</div>
</div>
<p
v-if="item.status == 'auto-draft'"
class="help is-danger">
{{ $i18n.get('info_item_not_saved') }}
</p>
<p class="help is-danger">{{ formErrorMessage }}</p>
</div>
<label class="section-label">{{ $i18n.get('metadata') }}</label> <label class="section-label">{{ $i18n.get('metadata') }}</label>
<br> <br>
<a <a
@ -673,10 +700,22 @@ export default {
this.isEditingValues = true; this.isEditingValues = true;
setTimeout(()=> { setTimeout(()=> {
this.isEditingValues = false; this.isEditingValues = false;
}, 1000) }, 2000)
this.$toast.open({
duration: 2000,
message: this.$i18n.get('info_editing_metadata_values'),
position: 'is-bottom',
})
}); });
eventBus.$on('isUpdatingValue', (status) => { eventBus.$on('isUpdatingValue', (status) => {
this.isUpdatingValues = status; this.isUpdatingValues = status;
if (this.isUpdatingValues) {
this.$toast.open({
duration: 2000,
message: this.$i18n.get('info_updating_metadata_values'),
position: 'is-bottom',
})
}
}); });
this.cleanLastUpdated(); this.cleanLastUpdated();
}, },
@ -784,7 +823,7 @@ export default {
} }
.section-box { .section-box {
border: 1px solid $draggable-border-color;
background-color: white; background-color: white;
padding: 26px; padding: 26px;
margin-top: 16px; margin-top: 16px;
@ -815,12 +854,8 @@ export default {
.section-status{ .section-status{
padding: 16px 0; padding: 16px 0;
} }
.section-thumbnail {
width: 174px;
padding-top: 0;
padding-bottom: 0;
}
.section-attachments { .section-attachments {
border: 1px solid $draggable-border-color;
height: 250px; height: 250px;
max-width: 100%; max-width: 100%;
resize: vertical; resize: vertical;
@ -836,8 +871,36 @@ export default {
margin-right: -15px; margin-right: -15px;
} }
.document-field {
.document-buttons-row {
text-align: right;
top: -21px;
position: relative;
}
}
#button-edit-thumbnail,
#button-edit-document,
#button-delete-thumbnail,
#button-delete-document {
border-radius: 100px !important;
height: 30px !important;
width: 30px !important;
z-index: 99;
margin-left: 10px !important;
.icon {
display: inherit;
padding: 0;
margin: 0;
margin-top: 1px;
font-size: 18px;
}
}
.thumbnail-field { .thumbnail-field {
margin-top: -8px;
.content { .content {
padding: 10px; padding: 10px;
@ -859,36 +922,11 @@ export default {
top: 38px; top: 38px;
max-width: 90px; max-width: 90px;
} }
#button-edit-thumbnail {
border-radius: 100px !important;
height: 40px !important;
width: 40px !important;
bottom: -20px;
left: -20px;
z-index: 99;
.icon {
display: inherit;
padding: 0;
margin: 0;
margin-top: 1px;
}
}
.thumbnail-buttons-row { .thumbnail-buttons-row {
display: inline-block;
padding: 8px 0px;
border-radius: 0px 0px 0px 4px;
font-size: 14px;
a { color: $tainacan-input-color; }
.text {
top: -3px;
position: relative; position: relative;
} left: 90px;
i.mdi-24px.mdi-set, i.mdi-24px.mdi::before { bottom: 22px;
font-size: 20px;
}
} }
} }

View File

@ -0,0 +1,43 @@
<template>
<form action="">
<div
class="tainacan-modal-content"
style="width: auto">
<header class="tainacan-modal-title">
<h2>{{ this.$i18n.get('filter') }} <em>{{ title }}</em></h2>
<hr>
</header>
<section class="tainacan-form">
<footer class="field is-grouped form-submit">
<div class="control">
<button
class="button is-outlined"
type="button"
@click="$parent.close()">Close</button>
</div>
<div class="control">
<button class="button is-success">Login</button>
</div>
</footer>
</section>
</div>
</form>
</template>
<script>
export default {
name: 'CheckboxFilterModal',
props: {
title: ''
}
}
</script>
<style lang="scss" scoped>
</style>

View File

@ -18,7 +18,7 @@
</section> </section>
<footer class="modal-card-foot form-submit"> <footer class="modal-card-foot form-submit">
<button <button
class="button is-outline" class="button is-outlined"
type="button" type="button"
@click="$parent.close()"> @click="$parent.close()">
{{ $i18n.get('cancel') }} {{ $i18n.get('cancel') }}

View File

@ -3,7 +3,11 @@
<figure <figure
class="file-item" class="file-item"
@click="isPreviewModalActive = true"> @click="isPreviewModalActive = true">
<div class="image-wrapper"> <figcaption v-if="showName">{{ file.title.rendered }}</figcaption>
<div
:class="{ 'rounded': showName }"
:style="{ 'width': size != undefined ? size + 'px' : '112px', 'height': size != undefined ? size + 'px' : '112px' }"
class="image-wrapper">
<div <div
v-if="file.media_type == 'image'" v-if="file.media_type == 'image'"
class="image" class="image"
@ -17,7 +21,6 @@
type="is-gray"/> type="is-gray"/>
</div> </div>
</div> </div>
<figcaption v-if="showName">{{ file.title.rendered }}</figcaption>
</figure> </figure>
<!-- Preview Modal ----------------- --> <!-- Preview Modal ----------------- -->
@ -54,6 +57,7 @@ export default {
name: 'FileItem', name: 'FileItem',
props: { props: {
file: Object, file: Object,
size: 112,
showName: false, showName: false,
isSelected: false, isSelected: false,
isPreviewModalActive: false isPreviewModalActive: false
@ -100,14 +104,16 @@ export default {
} }
} }
.image-wrapper { .image-wrapper {
height: 112px;
width: 112px;
border-radius: 2px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
display: inline-block; display: inline-block;
background-color: $tainacan-input-background; background-color: $tainacan-input-background;
&.rounded {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.image { .image {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -136,12 +142,11 @@ export default {
figcaption { figcaption {
background-color: $tainacan-input-background; background-color: $tainacan-input-background;
border-bottom-left-radius: 7px; border-top-left-radius: 5px;
border-bottom-right-radius: 7px; border-top-right-radius: 5px;
padding: 5px 15px; padding: 8px 15px;
font-size: 9px; font-size: 9px;
margin-top: -4px; width: 100%;
width: 112px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;

View File

@ -10,6 +10,12 @@
@close="removeMetaQuery(filterTag.filterId, filterTag.value, filterTag.singleValue)"> @close="removeMetaQuery(filterTag.filterId, filterTag.value, filterTag.singleValue)">
{{ filterTag.singleValue != undefined ? filterTag.singleValue : filterTag.value }} {{ filterTag.singleValue != undefined ? filterTag.singleValue : filterTag.value }}
</b-tag> </b-tag>
<button
@click="clearAllFilters()"
id="button-clear-all"
class="button is-outlined">
{{ $i18n.get('label_clear_filters') }}
</button>
</div> </div>
</template> </template>
<script> <script>
@ -48,6 +54,12 @@
this.$eventBusSearch.removeMetaFromFilterTag({ filterId: filterId, singleValue: singleValue }); this.$eventBusSearch.removeMetaFromFilterTag({ filterId: filterId, singleValue: singleValue });
else else
this.$eventBusSearch.removeMetaFromFilterTag({ filterId: filterId, value: value }); this.$eventBusSearch.removeMetaFromFilterTag({ filterId: filterId, value: value });
},
clearAllFilters() {
// this.$eventBusSearch.clearAllFilters();
for (let tag of this.filterTags) {
this.removeMetaQuery(tag.filterId, tag.value, tag.singleValue);
}
} }
} }
} }
@ -67,6 +79,10 @@
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
} }
#button-clear-all {
margin-left: auto;
}
} }
</style> </style>

View File

@ -914,7 +914,6 @@
visibility: visible; visibility: visible;
display: block; display: block;
transition: visibility ease 0.5s, display ease 0.5s; transition: visibility ease 0.5s, display ease 0.5s;
margin-bottom: -0.1rem;
h3 { h3 {
font-size: 100%; font-size: 100%;

View File

@ -28,7 +28,7 @@
} }
&.is-outlined { &.is-outlined {
color: #150e38 !important; color: #150e38 !important;
background-color: white; background-color: white !important;
border-color: $gray-light !important; border-color: $gray-light !important;
} }
&:focus { &:focus {

View File

@ -0,0 +1,18 @@
.notices .toast {
font-size: 0.75rem;
border-radius: 8px;
box-shadow: none;
&.is-dark {
background-color: $tainacan-input-background;
color: $gray-light;
}
&.is-warning {
background-color: #e7dede;
color: $danger;
}
&.is-success {
background-color: #d6feed;
color: $success;
}
}

View File

@ -21,6 +21,7 @@
@import "../scss/_pagination.scss"; @import "../scss/_pagination.scss";
@import "../scss/_modals.scss"; @import "../scss/_modals.scss";
@import "../scss/_tags.scss"; @import "../scss/_tags.scss";
@import "../scss/_notices.scss";
// Clears wordpress content // Clears wordpress content
body.tainacan-admin-page #adminmenumain, body.tainacan-admin-page #wpfooter, body.tainacan-admin-page #wp-auth-check-wrap { body.tainacan-admin-page #adminmenumain, body.tainacan-admin-page #wpfooter, body.tainacan-admin-page #wp-auth-check-wrap {

View File

@ -103,6 +103,7 @@ return apply_filters( 'tainacan-admin-i18n', [
// Labels (used mainly on Aria Labels and Inputs) // Labels (used mainly on Aria Labels and Inputs)
'label_clean' => __( 'Clear', 'tainacan' ), 'label_clean' => __( 'Clear', 'tainacan' ),
'label_clear_filters' => __( 'Clear filters', 'tainacan' ),
'label_selected' => __( 'Selected', 'tainacan' ), 'label_selected' => __( 'Selected', 'tainacan' ),
'label_relationship_new_search' => __( 'New Search', 'tainacan' ), 'label_relationship_new_search' => __( 'New Search', 'tainacan' ),
'label_relationship_items_found' => __( 'Items found', 'tainacan' ), 'label_relationship_items_found' => __( 'Items found', 'tainacan' ),
@ -128,6 +129,8 @@ return apply_filters( 'tainacan-admin-i18n', [
'label_button_delete_header_image' => __( 'Button Delete Header Image', 'tainacan' ), 'label_button_delete_header_image' => __( 'Button Delete Header Image', 'tainacan' ),
'label_button_edit_thumb' => __( 'Button Edit Thumbnail', 'tainacan' ), 'label_button_edit_thumb' => __( 'Button Edit Thumbnail', 'tainacan' ),
'label_button_edit_header_image' => __( 'Button Edit Header Image', 'tainacan' ), 'label_button_edit_header_image' => __( 'Button Edit Header Image', 'tainacan' ),
'label_button_edit_document' => __( 'Button Edit Document', 'tainacan' ),
'label_button_delete_document' => __( 'Button Delete Document', 'tainacan' ),
'label_choose_thumb' => __( 'Choose Thumbnail', 'tainacan' ), 'label_choose_thumb' => __( 'Choose Thumbnail', 'tainacan' ),
'label_button_delete_thumb' => __( 'Button Delete Thumbnail', 'tainacan' ), 'label_button_delete_thumb' => __( 'Button Delete Thumbnail', 'tainacan' ),
'label_collections_per_page' => __( 'Collections per Page:', 'tainacan' ), 'label_collections_per_page' => __( 'Collections per Page:', 'tainacan' ),
@ -240,6 +243,8 @@ return apply_filters( 'tainacan-admin-i18n', [
'label_remove_value' => __( 'Remove value', 'tainacan' ), 'label_remove_value' => __( 'Remove value', 'tainacan' ),
'label_create_new_page' => __( 'Create new page', 'tainacan' ), 'label_create_new_page' => __( 'Create new page', 'tainacan' ),
'label_total_items' => __( 'Total items', 'tainacan' ), 'label_total_items' => __( 'Total items', 'tainacan' ),
'label_see_more' => __( 'See more', 'tainacan' ),
'label_until' => __( 'until', 'tainacan' ),
// Instructions. More complex sentences to guide user and placeholders // Instructions. More complex sentences to guide user and placeholders
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ), 'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),

View File

@ -7,7 +7,6 @@
v-model="selected" v-model="selected"
:data="options" :data="options"
expanded expanded
:clear-on-select="true"
@input="search" @input="search"
field="label" field="label"
@select="option => setResults(option) " @select="option => setResults(option) "
@ -100,7 +99,7 @@
this.selectedValues(); this.selectedValues();
}, },
search( query ){ search( query ){
if (query != '') {
let promise = null; let promise = null;
this.options = []; this.options = [];
if ( this.type === 'Tainacan\\Metadata_Types\\Relationship' ) { if ( this.type === 'Tainacan\\Metadata_Types\\Relationship' ) {
@ -115,7 +114,9 @@
promise.catch( error => { promise.catch( error => {
this.$console.log('error select', error ); this.$console.log('error select', error );
}); });
} else {
this.cleanSearch();
}
}, },
selectedValues(){ selectedValues(){
const instance = this; const instance = this;
@ -138,6 +139,7 @@
let item = res.data; let item = res.data;
instance.results = item.title; instance.results = item.title;
instance.label = item.title; instance.label = item.title;
instance.selected = item.title;
this.$eventBusSearch.$emit( 'sendValuesToTags', { this.$eventBusSearch.$emit( 'sendValuesToTags', {
filterId: instance.filter.id, filterId: instance.filter.id,
@ -149,6 +151,8 @@
}); });
} else { } else {
instance.results = metadata.value; instance.results = metadata.value;
instance.label = metadata.value;
instance.selected = metadata.value;
this.$eventBusSearch.$emit( 'sendValuesToTags', { this.$eventBusSearch.$emit( 'sendValuesToTags', {
filterId: instance.filter.id, filterId: instance.filter.id,

View File

@ -6,15 +6,22 @@
class="metadatum"> class="metadatum">
<b-checkbox <b-checkbox
v-model="selected" v-model="selected"
:native-value="option.value" :native-value="option.value">
>{{ option.label }}</b-checkbox> {{ option.label }}
</b-checkbox>
</div> </div>
<!-- <a
@click="openCheckboxModal()"
class="add-link">
{{ $i18n.get('label_see_more') }}
</a> -->
</div> </div>
</template> </template>
<script> <script>
import { tainacan as axios } from '../../../js/axios/axios'; import { tainacan as axios } from '../../../js/axios/axios';
import { filter_type_mixin } from '../filter-types-mixin' import { filter_type_mixin } from '../filter-types-mixin'
// import CheckboxFilterModal from '../../../admin/components/other/checkbox-filter-modal.vue'
export default { export default {
created(){ created(){
@ -138,7 +145,16 @@
this.selected = []; this.selected = [];
return false; return false;
} }
} },
// openCheckboxModal() {
// this.$modal.open({
// parent: this,
// component: CheckboxFilterModal,
// props: {
// title: this.filter.name
// }
// });
// }
} }
} }
</script> </script>

View File

@ -9,6 +9,7 @@
@focus="isTouched = true" @focus="isTouched = true"
@input="validate_values()" @input="validate_values()"
icon="calendar-today"/> icon="calendar-today"/>
<p class="is-size-7 has-text-centered">{{ $i18n.get('label_until') }}</p>
<b-datepicker <b-datepicker
:placeholder="$i18n.get('label_selectbox_init')" :placeholder="$i18n.get('label_selectbox_init')"
v-model="date_end" v-model="date_end"

View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div :class="{ 'is-flex': metadatum.metadatum.multiple != 'yes' }">
<b-taginput <b-taginput
:id="id" :id="id"
v-model="selected" v-model="selected"
@ -147,4 +147,7 @@
.help.counter { .help.counter {
display: none; display: none;
} }
div.is-flex {
justify-content: flex-start;
}
</style> </style>

View File

@ -323,6 +323,12 @@ export default {
}, },
setCollectionId(collectionId) { setCollectionId(collectionId) {
this.collectionId = collectionId; this.collectionId = collectionId;
},
clearAllFilters() {
this.$store.dispatch('search/cleanFilterTags');
this.$store.dispatch('search/cleanMetaQueries');
this.$store.dispatch('search/cleanTaxQueries');
this.updateURLQueries();
}, },
/* Dev interfaces methods */ /* Dev interfaces methods */

View File

@ -127,3 +127,11 @@ export const removeFilterTag = ( { commit }, filterTag ) => {
export const cleanFilterTags = ( { commit } ) => { export const cleanFilterTags = ( { commit } ) => {
commit('cleanFilterTags'); commit('cleanFilterTags');
}; };
export const cleanMetaQueries = ( { commit } ) => {
commit('cleanMetaQueries');
};
export const cleanTaxQueries = ({ commit }) => {
commit('cleanTaxQueries');
};

View File

@ -155,3 +155,11 @@ export const removeFilterTag = ( state, filterTag ) => {
export const cleanFilterTags = ( state ) => { export const cleanFilterTags = ( state ) => {
state.filter_tags = []; state.filter_tags = [];
}; };
export const cleanMetaQueries = (state) => {
state.postquery.metaquery = [];
};
export const cleanTaxQueries = (state) => {
state.postquery.taxquery = [];
};