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="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 -------------------------------- -->
<div class="section-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')"
:message="$i18n.getHelperMessage('items', 'document')"/>
</div>
<div class="section-box ">
<div class="section-box document-field">
<div
v-if="form.document != undefined && form.document != null &&
form.document_type != undefined && form.document_type != null &&
form.document != '' && form.document_type != 'empty'">
<div v-if="form.document_type == 'attachment'">
<div v-html="item.document_as_html" />
<button
type="button"
class="button is-primary"
<div class="document-buttons-row">
<a
class="button is-rounded is-secondary"
size="is-small"
id="button-edit-document"
:aria-label="$i18n.get('label_button_edit_document')"
@click.prevent="setFileDocument($event)">
{{ $i18n.get('edit') }}
</button>
<button
type="button"
class="button is-primary"
<b-icon
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()">
{{ $i18n.get('remove') }}
</button>
<b-icon
size="is-small"
icon="delete" />
</a>
</div>
</div>
<div v-if="form.document_type == 'text'">
<div v-html="item.document_as_html" />
<button
type="button"
class="button is-primary"
size="is-small"
<div class="document-buttons-row">
<a
class="button is-rounded is-secondary"
:aria-label="$i18n.get('label_button_edit_document')"
id="button-edit-document"
@click.prevent="setTextDocument()">
{{ $i18n.get('edit') }}
</button>
<button
type="button"
class="button is-primary"
<b-icon
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()">
{{ $i18n.get('remove') }}
</button>
<b-icon
size="is-small"
icon="delete" />
</a>
</div>
</div>
<div v-if="form.document_type == 'url'">
<div v-html="item.document_as_html" />
<button
type="button"
class="button is-secondary"
<div class="document-buttons-row">
<a
class="button is-rounded is-secondary"
size="is-small"
:aria-label="$i18n.get('label_button_edit_document')"
id="button-edit-document"
@click.prevent="setURLDocument()">
{{ $i18n.get('edit') }}
</button>
<button
type="button"
class="button is-secondary"
<b-icon
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()">
{{ $i18n.get('remove') }}
</button>
<b-icon
size="is-small"
icon="delete" />
</a>
</div>
</div>
</div>
<ul v-else>
@ -229,16 +206,10 @@
</div>
<div class="section-box section-thumbnail">
<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
v-if="item.thumbnail.thumb != undefined && item.thumbnail.thumb != false"
:show-name="false"
:size="178"
:file="{
media_type: 'image',
guid: { rendered: item.thumbnail.thumb },
@ -254,13 +225,22 @@
</figure>
<div class="thumbnail-buttons-row">
<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')"
@click="deleteThumbnail()">
<b-icon
type="is-gray"
size="is-small"
icon="delete" />
<span class="text">{{ $i18n.get('remove') }} </span>
</a>
</div>
</div>
@ -294,6 +274,53 @@
<div
class="column is-4-5"
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>
<br>
<a
@ -673,10 +700,22 @@ export default {
this.isEditingValues = true;
setTimeout(()=> {
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) => {
this.isUpdatingValues = status;
if (this.isUpdatingValues) {
this.$toast.open({
duration: 2000,
message: this.$i18n.get('info_updating_metadata_values'),
position: 'is-bottom',
})
}
});
this.cleanLastUpdated();
},
@ -784,7 +823,7 @@ export default {
}
.section-box {
border: 1px solid $draggable-border-color;
background-color: white;
padding: 26px;
margin-top: 16px;
@ -815,12 +854,8 @@ export default {
.section-status{
padding: 16px 0;
}
.section-thumbnail {
width: 174px;
padding-top: 0;
padding-bottom: 0;
}
.section-attachments {
border: 1px solid $draggable-border-color;
height: 250px;
max-width: 100%;
resize: vertical;
@ -836,8 +871,36 @@ export default {
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 {
margin-top: -8px;
.content {
padding: 10px;
@ -859,36 +922,11 @@ export default {
top: 38px;
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 {
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;
}
i.mdi-24px.mdi-set, i.mdi-24px.mdi::before {
font-size: 20px;
}
left: 90px;
bottom: 22px;
}
}

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>
<footer class="modal-card-foot form-submit">
<button
class="button is-outline"
class="button is-outlined"
type="button"
@click="$parent.close()">
{{ $i18n.get('cancel') }}

View File

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

View File

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

View File

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

View File

@ -28,7 +28,7 @@
}
&.is-outlined {
color: #150e38 !important;
background-color: white;
background-color: white !important;
border-color: $gray-light !important;
}
&: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/_modals.scss";
@import "../scss/_tags.scss";
@import "../scss/_notices.scss";
// Clears wordpress content
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)
'label_clean' => __( 'Clear', 'tainacan' ),
'label_clear_filters' => __( 'Clear filters', 'tainacan' ),
'label_selected' => __( 'Selected', 'tainacan' ),
'label_relationship_new_search' => __( 'New Search', '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_edit_thumb' => __( 'Button Edit Thumbnail', '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_button_delete_thumb' => __( 'Button Delete Thumbnail', '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_create_new_page' => __( 'Create new page', '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
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),

View File

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

View File

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

View File

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

View File

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

View File

@ -323,6 +323,12 @@ export default {
},
setCollectionId(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 */

View File

@ -127,3 +127,11 @@ export const removeFilterTag = ( { commit }, filterTag ) => {
export const cleanFilterTags = ( { commit } ) => {
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 ) => {
state.filter_tags = [];
};
export const cleanMetaQueries = (state) => {
state.postquery.metaquery = [];
};
export const cleanTaxQueries = (state) => {
state.postquery.taxquery = [];
};