Within my app I'm trying to develop the ability to filter my returned array of offers if they fall within a set of dates set using a datepicker.
My datepicker emits the values to two properties within a range object - this is filters.range.startDate & filters.range.endDate. Each offer in my array has the properties, offer.dates.start & offer.dates.end.
I've added the below statement in my computed property which doesn't break the computed, just returns no results regardless of dates.
Does anyone have any advice?
EDIT- Added the entire computed property with the date range statement as the last condition.
computed: {
filteredOffers() {
let filtered = this.offers.filter(offer => {
return (offer.island === this.filters.islandFilter || this.filters.islandFilter === 'All') // Island
&& (offer.starrating === this.filters.starRating || this.filters.starRating === 'All') // Star Rating
&& (offer.board === this.filters.boardBasis || this.filters.boardBasis === 'All') // Board Basis
&& (offer.duration === this.filters.duration || this.filters.duration === 'All') // Duration
&& (offer.price.from < this.filters.price) // Price
&& (this.filters.travelby === 'sea' && offer.travel.air === false || this.filters.travelby === 'All') // Sea or Air
&& (this.filters.range.startDate >= offer.dates.start && offer.dates.end <= this.filters.range.endDate) // DATE RANGE!!
});
if (this.sortby === 'ascending') {
return filtered.sort((a, b) => {
return a.price.from - b.price.from;
})
} else {
return filtered.sort((a, b) => {
return b.price.from - a.price.from;
})
}
}
}
First, I would transform your date objects to timestamp in milliseconds, just avoid some format errors when you compare.
let date = new Date();
let timestamp = date.getTime();
After that, I guess your logic is not correct, because your end date on filter should be greater than your offer end date, and your start date on filter should be smaller than your offer start date.
this.filters.range.startDate <= offer.dates.start && this.filters.range.endDate >= offer.dates.end
Related
I am new to this and I found an old post with this code. I am currently using it but it affects all tabs of my spreadsheet. Is there a way for it to work on a specific tab only? Thank you.
`const separator = ', ';
const dvType = SpreadsheetApp.DataValidationCriteria.VALUE_IN_RANGE;
function onEdit(e) {
if (e.value != null && e.oldValue != null && e.value !== "") {
var dataValidation = e.range.getDataValidation();
if(dataValidation != null && dataValidation.getCriteriaType() == dvType &&
e.value.indexOf(separator) < 0 && e.oldValue.indexOf(e.value) < 0) {
e.range.setValue(e.oldValue + separator + e.value);
}
}
}`
I tried to change the criteria but since I am new to coding, I always get error.
setState in reactnative is asynchronous and I have a series of setState statements in my code and I want the code after these setState statements execute only after all the setState returns
Code
validate = () => {
this.changedNumber();
const reg = /^[0]?[789]\d{9}$/;
if (this.state.spaceName == null || this.state.spaceName =='') {
this.setState({
error_spaceName: "Name of space is required",
})
} else if (this.state.spaceName.length < 3) {
this.setState({
error_spaceName: "Name of space should be of minimum 3 character length",
})
}
else {
this.setState({
error_spaceName: null,
})
}
if (this.state.code === null || this.state.code === '') {
this.setState({
error_phone: "Phone Number is required",
})
} else if (isValidNumber(Number(this.state.code)) === false) {
this.setState({
error_phone: "Contact number should be a Kuwait number",
})
}
else {
this.setState({
error_phone: null,
})
}
if (this.state.error == null && this.state.error_spaceName == null && this.state.error_phone == null) {
this.props.navigation.navigate("LocationScreen")
}
}
What happnes here is that
if (this.state.error == null && this.state.error_spaceName == null && this.state.error_phone == null) {
this.props.navigation.navigate("LocationScreen")
}
this part of code gets executed before all the setState returns .I want to wait till all the setStates returns before checking the conditions? What's the proper way to acheieve this?
You are't able to use was updated state after setState in one block , so because you use class components , you are able to use componentDidUpdate for solving it :
//...
componentDidUpdate(prevProps, prevState){
if (prevState.error != this.state.error
|| prevState.error_spaceName != this.state.error_spaceName
|| prevState.error_phone != this.state.error_phone){
if (this.state.error == null && this.state.error_spaceName == null && this.state.error_phone == null) {
this.props.navigation.navigate("LocationScreen")
}
}
}
//...
I have the following function that is formating font colour based on the value returned. The value returned is from a GraphQl non-nullable field and is in a range from 0-10. It works perfectly if the value is 1-10, if the value is zero it does not run as expected.
formatFont: function (state) {
if (state) {
if (state >= 0 && state <= 6) {
return 'red--text';
} else if (state >= 7 && state <= 8) {
return 'orange--text';
} else if (state >= 9 && state <= 10) {
return 'green--text';
} else {
return 'white-text' // i.e. white on white = invisible
}
} else {
console.log('Output else')
return 'white--text' // i.e. white on white = invisible
}
}
If the value is zero it will return the else statement, I have a solution to increment each value by 1 which resolves but it feels like a hack, I want to understand why it doesn't recognise zero?
change
if (state) {
to
if (typeof state !== 'undefined') {
why because 0 is falsey
var a= 0
var b= '0'
var c= 1
if(a) {
console.info('a',a)
}
if(b){
console.info('b',b)
}
if(c){
console.info('c',c)
}
Because of the 0 as a false consider but you pass as a string then it will go the true.
Basically, I have very less edge cases where I need to change the value of props on init like so,
props : {
columnName : String,
setValue: {
validator: function (value) {
//enum edge cases
let _value = value;
if(value === 'YES' || value === 'ACTIVE'){
value = 0;
}
else if(value === 'NO' || value === 'VOID'){
value = 1;
}
console.log(_value);
return _value;
}
}
},
Is this possible, I did try this but it is still sending the actual values instead of 0/1.
You could try to return 'value' rather than '_value'.
However, I believe this is a job for a computed property, rather than trying to manipulate the prop directly.
computed:{
computedSetValue(){
if(this.setValue === 'YES' || this.setValue === 'ACTIVE'){
return 0
}
else if(this.setValue=== 'NO' || this.setValue=== 'VOID'){
return 1
}
return 0
}
}
Then, you may use this.computedSetValue as you do this.setValue
I am bit curious if there is any way where i can have multiple conditions dynamically in the filter expression. For example
dataSource.filter(data => data.x === a && data.x === b && data.x === c)
it can have 'n' number of conditions, all will be dynamic only.
Thanks
Not like that, no. You would have to pass in a function that accepts data or data.x and check against every possible condition.
function filterData(possibleValuesOfX: number[] = []) {
return (data: Data) => {
for (let value of possibleValuesOfX) {
if (data.x === value) {
return true;
}
}
return false;
}
}
const filteredDataSource = dataSource.filter(filterData([a, b, c]));