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

Adds option to display the filter as a range instead of one date. #887.

This commit is contained in:
mateuswetah 2024-06-03 15:53:13 -03:00
parent a9df08c15f
commit ebf478d5ff
4 changed files with 100 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/admin/components/filter-types/date-interval/TainacanFilterDateInterval.vue
View File

@ -3,7 +3,7 @@
<b-datepicker
v-model="dateInit"
:aria-labelledby="'filter-label-id-' + filter.id"
:placeholder="$i18n.get('label_selectbox_init')"
:placeholder="$i18n.get('instruction_select_a_date')"
editable
:trap-focus="false"
:date-formatter="(date) => dateFormatter(date)"
@ -19,6 +19,20 @@
$i18n.get('datepicker_short_friday'),
$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')
]"
@focus="isTouched = true"
@update:model-value="($event) => { resetPage(); validadeValues($event) }" />
<p
@ -45,6 +59,20 @@
$i18n.get('datepicker_short_friday'),
$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')
]"
@update:model-value="validadeValues()"
@focus="isTouched = true" />
</div>

25
src/views/admin/components/filter-types/dates-intersection/FormDatesIntersection.vue
View File

@ -69,6 +69,24 @@
</b-select>
</b-field>
</div>
<b-field
:addons="false"
:label="$i18n.getHelperTitle('tainacan-filter-dates-intersection', 'accept_date_interval')"
style="margin-top: 1.125rem;">
&nbsp;
<b-switch
v-model="acceptDateInterval"
size="is-small"
:true-value="'yes'"
:false-value="'no'"
:native-value="acceptDateInterval == 'yes' ? 'yes' : 'no'"
name="accept_date_interval"
@update:model-value="emitValues()">
<help-button
:title="$i18n.getHelperTitle('tainacan-filter-dates-intersection', 'accept_date_interval')"
:message="$i18n.getHelperMessage('tainacan-filter-dates-intersection', 'accept_date_interval')" />
</b-switch>
</b-field>
</div>
</template>
@ -94,7 +112,8 @@
secondDateMetadatumName: String,
firstComparator: String,
secondComparator: String,
comparatorsObject: {}
comparatorsObject: {},
acceptDateInterval: String
}
},
watch: {
@ -110,6 +129,7 @@
this.secondDateMetadatumName = this.modelValue && this.modelValue.secondary_filter_metadatum_name ? this.modelValue.secondary_filter_metadatum_name : '';
this.firstComparator = this.modelValue && this.modelValue.first_comparator ? this.modelValue.first_comparator : '>=';
this.secondComparator = this.modelValue && this.modelValue.second_comparator ? this.modelValue.second_comparator : '<=';
this.acceptDateInterval = this.modelValue && this.modelValue.accept_date_interval ? this.modelValue.accept_date_interval : 'no';
this.loading = true;
this.fetchMetadata();
@ -168,7 +188,8 @@
first_comparator: this.firstComparator,
second_comparator: this.secondComparator,
secondary_filter_metadatum_id: this.secondDateMetadatumId,
secondary_filter_metadatum_name: this.secondDateMetadatumName
secondary_filter_metadatum_name: this.secondDateMetadatumName,
accept_date_interval: this.acceptDateInterval
});
},
setErrorsAttributes( type, message ) {

44
src/views/admin/components/filter-types/dates-intersection/TainacanFilterDatesIntersection.vue
View File

@ -3,7 +3,7 @@
<b-datepicker
v-model="dateInit"
:aria-labelledby="'filter-label-id-' + filter.id"
:placeholder="$i18n.get('label_selectbox_init')"
:placeholder="$i18n.get('instruction_select_a_date')"
editable
:trap-focus="false"
:date-formatter="(date) => dateFormatter(date)"
@ -19,17 +19,33 @@
$i18n.get('datepicker_short_friday'),
$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')
]"
@focus="isTouched = true"
@update:model-value="($event) => { resetPage(); validadeValues($event) }" />
<p
v-if="filterTypeOptions.accept_date_interval === 'yes'"
style="font-size: 0.75em; margin-bottom: 0.125em;"
class="has-text-centered is-marginless">
{{ $i18n.get('label_until') }}
</p>
<b-datepicker
v-if="filterTypeOptions.accept_date_interval === 'yes'"
v-model="dateEnd"
:aria-labelledby="'filter-label-id-' + filter.id"
:placeholder="$i18n.get('label_selectbox_init')"
:placeholder="$i18n.get('instruction_select_a_date')"
editable
:trap-focus="false"
:date-formatter="(date) => dateFormatter(date)"
@ -45,6 +61,20 @@
$i18n.get('datepicker_short_friday'),
$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')
]"
@update:model-value="validadeValues()"
@focus="isTouched = true" />
</div>
@ -92,13 +122,13 @@
// only validate if the first value is higher than first
validadeValues: _.debounce( function (){
if (this.dateInit === undefined)
if ( this.dateInit === undefined )
this.dateInit = new Date();
if (this.dateEnd === undefined)
if ( this.dateEnd === undefined )
this.dateEnd = new Date();
if (this.dateInit > this.dateEnd) {
if ( this.filterTypeOptions.accept_date_interval === 'yes' && this.dateInit > this.dateEnd ) {
this.showErrorMessage();
return
}
@ -162,7 +192,7 @@
compare: this.filterTypeOptions.first_comparator,
metadatum_id: this.metadatumId,
collection_id: this.collectionId,
value: values
value: this.filterTypeOptions.accept_date_interval === 'yes' ? values : values[0]
});
this.$emit('input', {
filter: 'intersection',
@ -170,7 +200,7 @@
compare: this.filterTypeOptions.second_comparator,
metadatum_id: this.filterTypeOptions.secondary_filter_metadatum_id,
collection_id: this.collectionId,
value: values
value: this.filterTypeOptions.accept_date_interval === 'yes' ? values : values[0]
});
}
}

12
src/views/admin/components/filter-types/dates-intersection/class-tainacan-dates-intersection.php
View File

@ -18,7 +18,8 @@ class Dates_Intersection extends Filter_Type {
'secondary_filter_metadatum_id' => '',
'secondary_filter_metadatum_name' => '',
'first_comparator' => '>=',
'second_comparator' => '<='
'second_comparator' => '<=',
'accept_date_interval' => 'no'
]);
$this->set_use_max_options(false);
$this->set_preview_template('
@ -69,6 +70,10 @@ class Dates_Intersection extends Filter_Type {
'second_comparator' => [
'title' => __( 'Second comparator', 'tainacan' ),
'description' => __( 'Comparator to be used for checking the second metadata value.', 'tainacan' ),
],
'accept_date_interval' => [
'title' => __( 'Accept date interval', 'tainacan' ),
'description' => __( 'If checked, the filter will accept date intervals as values.', 'tainacan' ),
]
];
}
@ -99,6 +104,11 @@ class Dates_Intersection extends Filter_Type {
'second_comparator' => __('The second comparator is required.','tainacan')
];
if ( empty($this->get_option('accept_date_interval')) )
$errors[] = [
'accept_date_interval' => __('The filter should define if it accepts date interval.','tainacan')
];
return count($errors) > 0 ? $errors : true;
}