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

Adds type option to date filter type, to allow month selection. #300.

This commit is contained in:
Mateus Machado Luna 2019-09-02 10:39:48 -03:00
parent 5ecf858bd6
commit 86a2a88ef8
6 changed files with 116 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,6 +35,7 @@ import FilterTaxonomyCheckbox from '../../classes/filter-types/taxonomy/Checkbox
import FilterTaxonomyTaginput from '../../classes/filter-types/taxonomy/Taginput.vue';
import FormNumeric from '../../classes/filter-types/numeric/FormNumeric.vue';
import FormDate from '../../classes/filter-types/date/FormDate.vue';
import TainacanFormItem from '../../classes/metadata-types/tainacan-form-item.vue';
import TainacanFiltersList from '../../classes/filter-types/tainacan-filter-item.vue';
@ -90,6 +91,7 @@ Vue.component('tainacan-filter-taxonomy-checkbox', FilterTaxonomyCheckbox);
Vue.component('tainacan-filter-taxonomy-taginput', FilterTaxonomyTaginput);
/* Filter Metadata Option forms */
Vue.component('tainacan-filter-form-numeric', FormNumeric);
Vue.component('tainacan-filter-form-date', FormDate);
/* Others */
Vue.component('help-button', HelpButton);

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

@ -431,6 +431,9 @@ return apply_filters( 'tainacan-admin-i18n', [
'label_allowed' => __( 'Allowed', 'tainacan' ),
'label_not_allowed' => __( 'Not allowed', 'tainacan' ),
'label_view_as' => __( 'View as...', 'tainacan' ),
'label_day' => __( 'Day', 'tainacan' ),
'label_month' => __( 'Month', 'tainacan' ),
'label_year' => __( 'Year', 'tainacan' ),
// Instructions. More complex sentences to guide user and placeholders
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
@ -476,6 +479,7 @@ return apply_filters( 'tainacan-admin-i18n', [
'instruction_drag_and_drop_filter_sort' => __( 'Drag and drop to change filter order', 'tainacan' ),
'instruction_drag_and_drop_metadatum_sort' => __( 'Drag and drop to change metadatum order', 'tainacan' ),
'instruction_select_a_date' => __( 'Select a date', 'tainacan' ),
'instruction_select_a_month' => __( 'Select a month', 'tainacan' ),
'instruction_select_the_amount_of_copies' => __( 'Select the amount of copies of the item that you want to create', 'tainacan'),
// Info. Other feedback to user.
@ -672,6 +676,20 @@ return apply_filters( 'tainacan-admin-i18n', [
'tainacan-filter-taxonomy-checkbox' => __( 'Taxonomy Check Box', 'tainacan' ),
'tainacan-filter-taxonomy-selectbox' => __( 'Taxonomy Select Box', 'tainacan' ),
// Datepicker months
'datepicker_month_january' => __( 'January', 'tainacan' ),
'datepicker_month_february' => __( 'February', 'tainacan' ),
'datepicker_month_march' => __( 'March', 'tainacan' ),
'datepicker_month_april' => __( 'April', 'tainacan' ),
'datepicker_month_may' => __( 'May', 'tainacan' ),
'datepicker_month_june' => __( 'June', 'tainacan' ),
'datepicker_month_july' => __( 'July', 'tainacan' ),
'datepicker_month_august' => __( 'August', 'tainacan' ),
'datepicker_month_september' => __( 'September', 'tainacan' ),
'datepicker_month_october' => __( 'October', 'tainacan' ),
'datepicker_month_november' => __( 'November', 'tainacan' ),
'datepicker_month_december' => __( 'December', 'tainacan' ),
// Datepicker week days
/* translators: This refers to the short label that will appear on datepickers for Sunday */
'datepicker_short_sunday' => __( 'Su', 'tainacan' ),
@ -687,5 +705,6 @@ return apply_filters( 'tainacan-admin-i18n', [
'datepicker_short_friday' => __( 'F', 'tainacan' ),
/* translators: This refers to the short label that will appear on datepickers for Saturday */
'datepicker_short_saturday' => __( 'Sa', 'tainacan' )
] );
?>

22
src/classes/filter-types/date/Date.vue
View File

@ -58,11 +58,11 @@
≤  {{ $i18n.get('before_or_on_day') }}
</b-dropdown-item>
</b-dropdown>
<b-datepicker
:type="options.type == 'month' ? 'month' : null"
position="is-bottom-left"
:aria-labelledby="labelId"
:placeholder="$i18n.get('instruction_select_a_date')"
:placeholder="options.type == 'month' ? $i18n.get('instruction_select_a_date') : $i18n.get('instruction_select_a_month')"
v-model="value"
@input="emit()"
editable
@ -77,7 +77,21 @@
$i18n.get('datepicker_short_wednesday'),
$i18n.get('datepicker_short_thursday'),
$i18n.get('datepicker_short_friday'),
$i18n.get('datepicker_short_saturday'),
$i18n.get('datepicker_short_saturday')
]"
:month-names="[
$i18n.get('datepicker_month_january'),
$i18n.get('datepicker_month_february'),
$i18n.get('datepicker_month_march'),
$i18n.get('datepicker_month_april'),
$i18n.get('datepicker_month_may'),
$i18n.get('datepicker_month_june'),
$i18n.get('datepicker_month_july'),
$i18n.get('datepicker_month_august'),
$i18n.get('datepicker_month_september'),
$i18n.get('datepicker_month_october'),
$i18n.get('datepicker_month_november'),
$i18n.get('datepicker_month_december')
]"/>
</div>
</template>
@ -92,7 +106,7 @@
created() {
this.collection = ( this.collection_id ) ? this.collection_id : this.filter.collection_id;
this.metadatum = ( this.metadatum_id ) ? this.metadatum_id : (typeof this.filter.metadatum.metadatum_id == 'object' ? this.filter.metadatum.metadatum_id.metadatum_id : this.filter.metadatum.metadatum_id);
// this.options = this.filter.filter_type_options;
this.options = this.filter.filter_type_options;
let in_route = '/collection/' + this.collection + '/metadata/' + this.metadatum;

47
src/classes/filter-types/date/FormDate.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<div>
<b-field :addons="false">
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-filter-date', 'type') }}<span>&nbsp;*&nbsp;</span>
<help-button
:title="$i18n.getHelperTitle('tainacan-filter-date', 'type')"
:message="$i18n.getHelperMessage('tainacan-filter-date', 'type')"/>
</label>
<b-select
name="type_options"
v-model="type"
@input="onUpdateType">
<option value="day">{{ $i18n.get('label_day') }}</option>
<option value="month">{{ $i18n.get('label_month') }}</option>
<!-- <option value="year">{{ $i18n.get('label_year') }}</option> -->
</b-select>
</b-field>
</div>
</template>
<script>
export default {
props: {
filter: {
type: Object
},
value: [String, Number, Array],
id: '',
disabled: false,
},
data() {
return {
type: [String]
}
},
methods: {
onUpdateType(type) {
this.$emit('input', { type: type });
},
},
created() {
this.type = this.type && this.value.type ? this.value.type : 'day';
}
}
</script>

17
src/classes/filter-types/date/class-tainacan-date.php
View File

@ -12,7 +12,11 @@ class Date extends Filter_Type {
function __construct(){
$this->set_supported_types(['date']);
$this->set_component('tainacan-filter-date');
$this->set_form_component('tainacan-filter-form-date');
$this->set_use_max_options(false);
$this->set_default_options([
'type' => 'day'
]);
$this->set_preview_template('
<div>
<div>
@ -56,6 +60,18 @@ class Date extends Filter_Type {
');
}
/**
* @inheritdoc
*/
public function get_form_labels(){
return [
'type' => [
'title' => __( 'Type', 'tainacan' ),
'description' => __( 'The type of the date picker, may be for day, month or year.', 'tainacan' ),
]
];
}
/**
* @param $filter
* @return string
@ -63,6 +79,7 @@ class Date extends Filter_Type {
*/
public function render( $filter ){
return '<tainacan-filter-date
type="' . $this->get_option('type') . '"
name="'.$filter->get_name().'"
collection_id="'.$filter->get_collection_id().'"
metadatum_id="'.$filter->get_metadatum_id().'"></tainacan-filter-date>';

13
src/classes/filter-types/tainacan-filter-item.vue
View File

@ -171,6 +171,19 @@
color: white !important;
background-color: $turquoise5 !important;
}
.datepicker-months {
width: auto;
.datepicker-cell {
height: 2rem;
width: 50%;
padding: 0.3rem 0.25rem !important;
text-overflow: ellipsis;
overflow: hidden;
display: block;
}
}
}
@media screen and (min-width: 1024px) {