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

starting event bus for filters

This commit is contained in:
Eduardo humberto 2018-02-27 14:07:48 -03:00
parent 481ae36532
commit eec69c1e19
8 changed files with 190 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/classes/field-types/core-description/class-tainacan-core-description.php
View File

@ -25,7 +25,7 @@ class Core_Description extends Field_Type {
public function render( $itemMetadata ){
return '<tainacan-textarea
id="tainacan-textarea-' . $itemMetadata->get_item()->get_slug() . '"
id="tainacan-textarea-' . $itemMetadata->get_item()->WP_Post->post_name . '"
field_id ="'.$itemMetadata->get_field()->get_id().'"
item_id="'.$itemMetadata->get_item()->get_id().'"
value=\''.json_encode( $itemMetadata->get_value() ).'\'

2
src/classes/field-types/core-title/class-tainacan-core-title.php
View File

@ -25,7 +25,7 @@ class Core_Title extends Field_Type {
public function render( $itemMetadata ){
return '<tainacan-text
id="tainacan-text-' . $itemMetadata->get_item()->get_slug() . '"
id="tainacan-text-' . $itemMetadata->get_item()->WP_Post->post_name . '"
field_id ="'.$itemMetadata->get_field()->get_id().'"
item_id="'.$itemMetadata->get_item()->get_id().'"
value=\''.json_encode( $itemMetadata->get_value() ).'\'

114
src/classes/filter-types/range/Range.vue Normal file
View File

@ -0,0 +1,114 @@
<template>
<div class="block">
<div v-if="type === 'date'" class="columns">
<b-datepicker
class="column"
v-model="date_init"
@input="validate_values()"
icon="calendar-today">
</b-datepicker>
<b-datepicker
class="column"
v-model="date_end"
@input="validate_values()"
icon="calendar-today">
</b-datepicker>
<div class="column">
<a class="button is-small" @click="emit">
<b-icon icon="send"></b-icon>
</a>
</div>
</div>
<div class="columns" v-else>
<b-input
type="number"
@input="validate_values()"
class="column"
v-model="value_init">
</b-input>
<b-input
type="number"
@input="validate_values()"
class="column"
v-model="value_end">
</b-input>
<div class="column is-one-fifth">
<a class="button is-small" @click="emit">
<b-icon icon="send"></b-icon>
</a>
</div>
</div>
</div>
</template>
<script>
export default {
created(){
if( this.typeRange ) {
this.type = this.typeRange;
}
},
data(){
return {
value_init: 0,
value_end: 0,
date_init: new Date,
date_end: new Date,
type: 'date'
}
},
props: {
filter: {
type: Object // concentrate all attributes field id and type
},
field_id: [Number], // not required, but overrides the filter field id if is set
typeRange: [String], // not required, but overrides the filter field type if is set
id: ''
},
methods: {
// only validate if the first value is higher than first
validate_values(){
if( this.type === 'date' ){
if ( this.date_init > this.date_end ) {
let result = this.date_init;
result.setDate(result.getDate() + 1);
this.date_end = result;
this.error_message();
}
} else {
if ( parseFloat( this.value_init ) > parseFloat( this.value_end )) {
this.value_end = parseFloat( this.value_init ) + 1;
this.error_message();
}
}
},
// emit the operation for component listener
emit(){
if( this.type === 'date' ){
this.$emit('input', {
filter: 'range',
type: 'date',
field_id: ( this.field_id ) ? this.field_id : this.filter.field,
values: [ this.date_init, this.date_end ]
});
} else {
this.$emit('input', {
filter: 'range',
type: 'numeric',
field_id: ( this.field_id ) ? this.field_id : this.filter.field,
values: [ this.value_init, this.value_end ]
});
}
},
// message for error
error_message(){
this.$toast.open({
duration: 3000,
message: `First value should be lower than second value`,
position: 'is-bottom',
type: 'is-danger'
})
}
}
}
</script>

4
src/classes/filter-types/range/class-tainacan-range.php
View File

@ -19,6 +19,8 @@ class Range extends Filter_Type {
* @return string
*/
public function render( $filter ){
return '<tainacan-filter-range name="'.$filter->get_name().'"></tainacan-filter-range>';
return '<tainacan-filter-range
name="'.$filter->get_name().'"
field_id="'.$filter->get_field()->get_id().'"></tainacan-filter-range>';
}
}

6
src/classes/filter-types/selectbox/class-tainacan-selectbox.php
View File

@ -10,15 +10,15 @@ class Selectbox extends Filter_Type {
function __construct(){
parent::set_supported_types(['string']);
$this->component = 'tainacan-filter-list';
$this->component = 'tainacan-filter-selectbox';
}
/**
* @param $field
* @param $filter
* @return string
*/
public function render( $filter ){
return '<tainacan-filter-list name="'.$filter->get_name().'"></tainacan-filter-list>';
return '<tainacan-filter-selectbox name="'.$filter->get_name().'"></tainacan-filter-selectbox>';
}
}

15
src/dev-interface/class-tainacan-dev-interface.php
View File

@ -186,6 +186,12 @@ class DevInterface {
<?php Helpers\HtmlHelpers::collections_dropdown( $value ); ?>
<?php elseif ($prop == 'collections_ids'): ?>
<?php Helpers\HtmlHelpers::collections_checkbox_list( $value ); ?>
<?php elseif ($prop == 'field'): ?>
<?php Helpers\HtmlHelpers::metadata_dropdown(
$entity->get_collection_id(),
( isset( $value ) ) ? $value : '',
'tnc_prop_field'
) ?>
<?php elseif ($prop == 'field_type_options' || $prop == 'filter_type_options'): ?>
<?php echo $value; ?>
<?php elseif ($prop == 'field_type'): ?>
@ -195,8 +201,8 @@ class DevInterface {
<?php else: ?>
<textarea name="tnc_prop_<?php echo $prop; ?>"><?php echo htmlspecialchars($value); ?></textarea>
<?php endif; ?>
</td>
</tr>
@ -388,6 +394,11 @@ class DevInterface {
$class = ( class_exists( $selected ) ) ? new $selected() : '';
if(is_object( $class )){
$filter = $Tainacan_Filters->fetch( $id );
if ( $filter ) {
echo '<h3>Exemplo:</h3>';
echo $class->render( $filter );
}
$selected = str_replace('Tainacan\Filter_Types\\','', get_class( $class ) );
}

45
src/js/event-bus-filters.js Normal file
View File

@ -0,0 +1,45 @@
import Vue from 'vue';
export const eventFilterBus = new Vue({
data: {
componentsTag: [],
errors : [],
query: {}
},
created(){
this.$on('input', data => this.search(data) );
},
methods: {
search( ){
console.log( data );
},
/* Dev interfaces methods */
registerComponent( name ){
if (this.componentsTag.indexOf(name) < 0) {
this.componentsTag.push( name );
}
},
getAllComponents(){
const components = [];
for( let component of this.componentsTag ){
const eventElements = document.getElementsByTagName( component );
if( eventElements ) {
for (let eventElement of eventElements){
components.push( eventElement );
}
}
}
return components;
},
listener(){
const components = this.getAllComponents();
for (let eventElement of components){
eventElement.addEventListener('input', (event) => {
console.log( event.detail, 'dev' );
});
}
},
}
});

11
src/js/main.js
View File

@ -3,6 +3,7 @@ import Vue from 'vue'
// include vue-custom-element plugin to Vue
import VueCustomElement from 'vue-custom-element';
import { eventBus } from './event-bus-web-components';
import { eventFilterBus } from './event-bus-filters';
import Buefy from 'buefy'
@ -19,6 +20,7 @@ import Numeric from '../classes/field-types/numeric/Numeric.vue';
import Date from '../classes/field-types/date/Date.vue';
import Relationship from '../classes/field-types/relationship/Relationship.vue';
import FilterRange from '../classes/filter-types/range/Range.vue';
Vue.customElement('tainacan-text', Text);
eventBus.registerComponent( 'tainacan-text' );
@ -44,4 +46,11 @@ eventBus.registerComponent( 'tainacan-date' );
Vue.customElement('tainacan-relationship', Relationship);
eventBus.registerComponent( 'tainacan-relationship' );
eventBus.listener();
eventBus.listener();
/* Filters */
Vue.customElement('tainacan-filter-range', FilterRange);
eventFilterBus.registerComponent( 'tainacan-filter-range' );
eventFilterBus.listener();