У меня есть текущий проект, и вот что я сейчас имею в виду - я хочу отфильтровать события по их текущему времени встречи на основе ДАННОГО ДИАПАЗОНА. Вот скриншот того, как это выглядит:
В настоящее время я могу фильтровать по первым трем полям таблицы, но я хочу иметь возможность фильтровать и четвертое поле с диапазоном дат и времени. Вот входные данные формы, о которых я думал:
<th style={{ width: '20%' }}>
<input type="datetime-local" style={{ width: '50%' }}
className="form-control" value={this.state.StartTime}
onChange={this.handleStartTimeChange}
/>
<input type="datetime-local" style={{ width: '50%' }}
className="form-control" value={this.state.EndTime}
onChange={this.handleStartTimeChange}
/>
</th>
Я надеюсь, что они будут обрабатываться одной и той же функцией, которая будет соединять эти значения вместе и использовать это для передачи родительской функции фильтра. Вот текущий код обработчика OnChange:
handleStartTimeChange(e) {
this.setState({ StartTime: e.target.value }, this.handleTicketFilter("currentApptTime", e.target.value));
}
handleEndTimeChange(e) {
this.setState({ EndTime: e.target.value }, this.handleTicketFilter("currentApptTime", e.target.value));
}
Наконец, вот моя текущая функция, которая передает другие данные в родительскую функцию фильтра:
handleTicketFilter(col,inpt) {
//console.log("Col is: " + col + " Inpt is: " + inpt);
const clm = col;
const ipt = inpt;
this.props.filterTix({ collection: this.props.biTicketType, column: clm, input: ipt });
}
Должен ли я попытаться создать две функции фильтрации, чтобы у datetime была своя собственная логика фильтрации, которую я могу пропустить? Каков наилучший способ обеспечить надлежащую фильтрацию ввода даты и времени по коллекции?
Добавление - вот сама родительская функция фильтра, которая работает для полей, которые вы видите на изображении выше:
filterTickets(data) {
//console.log("Collection is: " + collection + " Column is: " + column + " Input is " + input);
var parts = Object.values(data);
console.log(parts);
var collection = parts[0];
var column = parts[1];
var input = parts[2];
console.log("Input is: " + input);
var currUser = this.userState.data;
var currOpen = this.state.data;
console.log(currOpen);
var currCloses = this.state.closedData;
console.log("Current closed collection to filter: " + currCloses);
var myTix = this.state.selectedData.filter(x => x.userOwnerId == currUser.userId);
var myCloseTix = this.state.selClosedData.filter(x => x.userOwnerId == currUser.userId);
var matchedTix = [];
//console.log(JSON.stringify(myTix));
if (input && input != '') {
if (JSON.stringify(this.state.selectedData) == JSON.stringify(myTix) || JSON.stringify(this.state.selClosedData) == JSON.stringify(myCloseTix)) {
//TODO: implement functionality of users searching their own tickets when their own filter has been selected
}
else {
//owner data will need to be handled in its own special way, since it's actually by userId
//same with apptDateTime apparently
if (column != 'Owner' && column != "currentApptTime") {
//if it's coming from the open ticket table, filter that collection
if (collection == 'open') {
//var filter = currOpen.filter(x => x[column].indexOf(input) >= 0);
console.log(currOpen);
matchedTix = currOpen.filter(ticket => { var ticketVal = String(ticket[column]); return ticketVal.includes(input) });
this.setState({ selectedData: matchedTix, filSelData: matchedTix });
}
//otherwise filter the closed collection
else {
matchedTix = currCloses.filter(ticket => { var ticketVal = String(ticket[column]); return ticketVal.includes(input) });
console.log("Closed matches: " + matchedTix);
this.setState({ selClosedData: matchedTix, filSelClosedData: matchedTix });
}
}
}
}
else {
if (collection == 'open') {
this.setState({ selectedData: currOpen, filSelData: [] });
}
else {
this.setState({ selClosedData: currCloses, filSelClosedData: [] });
}
}
}
Я благодарен всем за предварительный вклад!