tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Creates date interval filter, extracting from custom interval filter.

This commit is contained in:
Mateus Machado Luna 2019-10-15 14:42:01 -03:00
parent 93c05326c8
commit f6e7ee11da
5 changed files with 247 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/admin/js/main.js
View File

@ -31,6 +31,7 @@ import FilterAutocomplete from '../../classes/filter-types/autocomplete/Autocomp
import FilterCheckbox from '../../classes/filter-types/checkbox/Checkbox.vue';
import FilterTaginput from '../../classes/filter-types/taginput/Taginput.vue';
import FilterNumericInterval from '../../classes/filter-types/numeric-interval/NumericInterval.vue';
import FilterDateInterval from '../../classes/filter-types/date-interval/DateInterval.vue';
import FilterTaxonomyCheckbox from '../../classes/filter-types/taxonomy/Checkbox.vue';
import FilterTaxonomyTaginput from '../../classes/filter-types/taxonomy/Taginput.vue';
@ -97,6 +98,7 @@ Vue.component('tainacan-filter-taxonomy-checkbox', FilterTaxonomyCheckbox);
Vue.component('tainacan-filter-taxonomy-taginput', FilterTaxonomyTaginput);
Vue.component('tainacan-filter-numeric-interval', FilterNumericInterval);
Vue.component('tainacan-filter-numeric-list-interval', FilterNumericListInterval);
Vue.component('tainacan-filter-date-interval', FilterDateInterval);
/* Filter Metadata Option forms */
Vue.component('tainacan-filter-form-numeric', FormNumeric);

3
src/admin/tainacan-admin-i18n.php
View File

@ -650,7 +650,7 @@ return apply_filters( 'tainacan-admin-i18n', [
'info_process_status_cancelled' => __('Cancelled', 'tainacan'),
'info_process_status_paused' => __('Paused', 'tainacan'),
'info_process_status_running' => __('Running', 'tainacan'),
'info_warning_process_cancelled' => __( 'Are you sure? This process will be cancelled', 'tainacan' ),
'info_warning_process_cancelled' => __( 'Are you sure? This process will be cancelled', 'tainacan' ),
'info_empty' => __( 'empty', 'tainacan' ),
'info_url_copied' => __( 'URL link copied', 'tainacan' ),
'info_other_options' => __( 'Other options: ', 'tainacan'),
@ -689,6 +689,7 @@ return apply_filters( 'tainacan-admin-i18n', [
'tainacan-filter-taxonomy-checkbox' => __( 'Taxonomy Check Box', 'tainacan' ),
'tainacan-filter-taxonomy-selectbox' => __( 'Taxonomy Select Box', 'tainacan' ),
'tainacan-filter-numeric-interval' => __( 'Numeric Interval', 'tainacan' ),
'tainacan-filter-date-interval' => __( 'Date Interval', 'tainacan' ),
'tainacan-filter-numeric-list-interval' => __( 'Numeric Interval List', 'tainacan' ),
// Datepicker months

187
src/classes/filter-types/date-interval/DateInterval.vue Normal file
View File

@ -0,0 +1,187 @@
<template>
<div>
<b-datepicker
:aria-labelledby="'filter-label-id-' + filter.id"
:placeholder="$i18n.get('label_selectbox_init')"
v-model="date_init"
size="is-small"
@focus="isTouched = true"
@input="validate_values()"
editable
:date-formatter="(date) => dateFormatter(date)"
:date-parser="(date) => dateParser(date)"
icon="calendar-today"
:day-names="[
$i18n.get('datepicker_short_sunday'),
$i18n.get('datepicker_short_monday'),
$i18n.get('datepicker_short_tuesday'),
$i18n.get('datepicker_short_wednesday'),
$i18n.get('datepicker_short_thursday'),
$i18n.get('datepicker_short_friday'),
$i18n.get('datepicker_short_saturday'),
]"/>
<p class="is-size-7 has-text-centered is-marginless">{{ $i18n.get('label_until') }}</p>
<b-datepicker
:aria-labelledby="'filter-label-id-' + filter.id"
:placeholder="$i18n.get('label_selectbox_init')"
v-model="date_end"
size="is-small"
@input="validate_values()"
@focus="isTouched = true"
editable
:date-formatter="(date) => dateFormatter(date)"
:date-parser="(date) => dateParser(date)"
icon="calendar-today"
:day-names="[
$i18n.get('datepicker_short_sunday'),
$i18n.get('datepicker_short_monday'),
$i18n.get('datepicker_short_tuesday'),
$i18n.get('datepicker_short_wednesday'),
$i18n.get('datepicker_short_thursday'),
$i18n.get('datepicker_short_friday'),
$i18n.get('datepicker_short_saturday'),
]"/>
</div>
</template>
<script>
import { wpAjax, dateInter } from "../../../admin/js/mixins";
import { filterTypeMixin } from '../filter-types-mixin';
import moment from 'moment';
export default {
mixins: [
wpAjax,
dateInter,
filterTypeMixin
],
mounted() {
this.updateSelectedValues();
},
data(){
return {
date_init: undefined,
date_end: undefined,
isTouched: false,
isValid: false,
clear: false
}
},
watch: {
isTouched( val ){
if ( val && this.date_init === null)
this.date_init = new Date();
if ( val && this.date_end === null)
this.date_end = new Date();
},
'query.metaquery'() {
this.updateSelectedValues();
}
},
methods: {
// only validate if the first value is higher than first
validate_values: _.debounce( function (){
if (this.date_init === undefined)
this.date_init = new Date();
if (this.date_end === undefined)
this.date_end = new Date();
if ( this.date_init > this.date_end ) {
this.error_message();
return
}
this.emit();
}, 800),
// message for error
error_message(){
if ( !this.isTouched ) return false;
this.$buefy.toast.open({
duration: 3000,
message: this.$i18n.get('info_error_first_value_greater'),
position: 'is-bottom',
type: 'is-danger'
})
},
dateFormatter(dateObject){
return moment(dateObject, moment.ISO_8601).format(this.dateFormat);
},
dateParser(dateString){
return moment(dateString, this.dateFormat).toDate();
},
updateSelectedValues(){
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )
return false;
let index = this.query.metaquery.findIndex(newMetadatum => newMetadatum.key == this.metadatumId);
if (index >= 0) {
let metadata = this.query.metaquery[ index ];
if (metadata.value && metadata.value.length > 0){
this.date_init = new Date(metadata.value[0]);
this.date_end = new Date(metadata.value[1]);
this.isValid = true;
}
if (metadata.value[0] != undefined && metadata.value[1] != undefined)
this.$emit('sendValuesToTags', {
label: this.parseDateToNavigatorLanguage(metadata.value[0]) + ' - ' + this.parseDateToNavigatorLanguage(metadata.value[1]),
value: [metadata.value[0], metadata.value[1]]
});
} else {
this.date_init = null;
this.date_end = null;
}
},
// emit the operation for listeners
emit() {
let values = [];
if (this.date_init === null && this.date_end === null) {
values = [];
this.isValid = false;
this.clear = true;
} else {
let date_init = this.date_init.getUTCFullYear() + '-' +
('00' + (this.date_init.getUTCMonth() + 1)).slice(-2) + '-' +
('00' + this.date_init.getUTCDate()).slice(-2);
let date_end = this.date_end.getUTCFullYear() + '-' +
('00' + (this.date_end.getUTCMonth() + 1)).slice(-2) + '-' +
('00' + this.date_end.getUTCDate()).slice(-2);
values = [ date_init, date_end ];
this.isValid = true;
this.clear = false;
}
this.$emit('input', {
filter: 'range',
type: 'DATE',
compare: 'BETWEEN',
metadatum_id: this.metadatumId,
collection_id: this.collectionId,
value: values
});
if (values[0] != undefined && values[1] != undefined)
this.$emit( 'sendValuesToTags', {
label: this.parseDateToNavigatorLanguage(values[0]) + ' - ' + this.parseDateToNavigatorLanguage(values[1]),
value: [ values[0], values[1] ]
});
}
}
}
</script>
<style scoped>
.field {
margin-bottom: 0.125rem !important;
}
p.is-size-7 {
margin-bottom: 0.125rem !important;
}
</style>

55
src/classes/filter-types/date-interval/class-tainacan-date-interval.php Normal file
View File

@ -0,0 +1,55 @@
<?php
namespace Tainacan\Filter_Types;
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
/**
* Class TainacanMetadatumType
*/
class Date_Interval extends Filter_Type {
function __construct(){
$this->set_name('Date Interval');
$this->set_supported_types(['date']);
$this->set_component('tainacan-filter-date-interval');
$this->set_use_max_options(false);
$this->set_preview_template('
<div>
<div class="datepicker control is-small">
<div class="dropdown is-bottom-left is-mobile-modal">
<div role="button" class="dropdown-trigger">
<div class="control has-icons-left is-small is-clearfix">
<input type="text" autocomplete="off" placeholder=" '. __('Select a date', 'tainacan') .'" class="input is-small">
<span class="icon is-left is-small"><i class="mdi mdi-calendar-today"></i></span>
</div>
</div>
</div>
</div>
<p class="is-size-7 has-text-centered is-marginless">until</p>
<div class="datepicker control is-small">
<div class="dropdown is-bottom-left is-mobile-modal">
<div role="button" class="dropdown-trigger">
<div class="control has-icons-left is-small is-clearfix">
<input type="text" autocomplete="off" placeholder=" '. __('Select a date', 'tainacan') .'" class="input is-small">
<span class="icon is-left is-small"><i class="mdi mdi-calendar-today"></i></span>
</div>
</div>
</div>
</div>
</div>
');
}
/**
* @param $filter
* @return string
* @internal param $metadatum
*/
public function render( $filter ){
return '<tainacan-filter-date-interval
name="'.$filter->get_name().'"
collection_id="'.$filter->get_collection_id().'"
metadatum_id="'.$filter->get_metadatum()->get_id().'"></tainacan-filter-date-interval>';
}
}

1
src/classes/tainacan-creator.php
View File

@ -141,6 +141,7 @@ $Tainacan_Filters->register_filter_type('Tainacan\Filter_Types\Taginput');
$Tainacan_Filters->register_filter_type('Tainacan\Filter_Types\Checkbox');
$Tainacan_Filters->register_filter_type('Tainacan\Filter_Types\TaxonomyTaginput');
$Tainacan_Filters->register_filter_type('Tainacan\Filter_Types\TaxonomyCheckbox');
$Tainacan_Filters->register_filter_type('Tainacan\Filter_Types\Date_Interval');
$Tainacan_Filters->register_filter_type('Tainacan\Filter_Types\Numeric_Interval');
$Tainacan_Filters->register_filter_type('Tainacan\Filter_Types\Numeric_List_Interval');