ReactJS - от даты к дате в том же параметре? - PullRequest
0 голосов
/ 17 мая 2019

У меня есть текущий проект, и вот что я сейчас имею в виду - я хочу отфильтровать события по их текущему времени встречи на основе ДАННОГО ДИАПАЗОНА. Вот скриншот того, как это выглядит:

enter image description here

В настоящее время я могу фильтровать по первым трем полям таблицы, но я хочу иметь возможность фильтровать и четвертое поле с диапазоном дат и времени. Вот входные данные формы, о которых я думал:

<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: [] });
            }
        }
    }

Я благодарен всем за предварительный вклад!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...