Как показать скрыть итоговое значение и отобразить значение FilterSummary при фильтре - PullRequest
Новая
       15

Как показать скрыть итоговое значение и отобразить значение FilterSummary при фильтре

0 голосов
/ 07 ноября 2019

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

User.js 

import React, { Component } from "react";
import Summery from "./summery";
import FilterSummaey from "./FilterSummaey";
import DateForm from "../Electric/DateForm";
import Topbar1 from "../../Container/Layout/Topbar1";

import config from "../config";

export class user extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.value,
      user: [],
      c: []
    };
  }
  async componentDidMount() {
    try {
      const res = await fetch(config.apiUrl.user);
      const user = await res.json();
      console.log(user);
      this.setState({
        user
      });
    } catch (e) {
      console.log(e);
    }
  }

  // Get Data from filter date
  getData = async e => {
    try {
      const from = e.target.elements.from.value;
      const to = e.target.elements.to.value;
      e.preventDefault();
      Promise.all([
        fetch(`${config.apiUrl.user}?date__lte=${to}&date__gte=${from}`)
          .then(user => user.json())
          .then(user => {
            // console.log(movies1);
            this.setState({
              user
            });
          }),
        fetch(`${config.apiUrl.dashboard}?date__lte=${to}&date__gte=${from}`)
          .then(c => c.json())
          .then(c => {
            console.log(c);
            this.setState({
              c
            });
          })
      ]);
    } catch (e) {
      console.log(e);
    }
  };

  render() {
    var data;
    if (this.state.c) {
      data = <Summery />;
    } else {
      data = <FilterSummaey movie={this.state.c} />;
    }
    return (
      <div className="container" style={{ marginTop: "20px" }}>
        <DateForm loaddata={this.getData} />
        <Topbar1 />

        {/* <h3 className="text-center" style={{marginTop:"10px"}}> User Details: &nbsp;<strong> POSTMAN NAME</strong> </h3> */}
        <div
          className="bg-white"
          style={{ padding: "15px", borderTop: "2px solid #CCEFDC" }}
        >
          <table class="table table-hover" style={{ marginTop: "20px" }}>
            <thead>
              <tr style={{ background: "#CCEFDC" }} className="thead1">
                <th scope="col" className="t">
                  Id
                </th>
                <th scope="col">
                  Dystans pieszo <br></br> (km)
                </th>
                <th scope="col" style={{ width: "110px" }}>
                  Przeniesiona masa <br></br>przesyłek (kg)
                </th>
                <th scope="col">
                  Dystans rowerem klasycznym <br></br> (km)
                </th>
                <th scope="col">
                  Przewieziona masa przesyłek RK <br></br> (kg)
                </th>
                <th scope="col">
                  Dystans rowerem elektrycznym <br></br> (km)
                </th>
                <th scope="col">
                  Przewieziona masa przesyłek RE<br></br> (kg)
                </th>
                <th scope="col">
                  Całkowity dystans<br></br> (km)
                </th>
                <th scope="col">
                  Całkowita masa przesyłek<br></br> (kg)
                </th>
              </tr>
            </thead>
            {this.state.user.map(c => (
              <tbody key={c.pk}>
                <tr>
                  <td>
                    <a
                      href={"uoverview/" + c.pk}
                      style={{ color: "#13B760" }}
                      class="font-weight-bold"
                    >
                      {c.user}
                    </a>
                  </td>
                  <td>{c.total_walk_milage ? `${c.total_walk_milage}` : 0}</td>
                  <td>{c.total_walk_kg ? `${c.total_walk_kg}` : 0} </td>
                  <td>
                    {c.total_classic_milage ? `${c.total_classic_milage}` : 0}{" "}
                  </td>
                  <td>{c.total_classic_kg ? `${c.total_classic_kg}` : 0} </td>
                  <td>
                    {c.total_electric_milage ? `${c.total_electric_milage}` : 0}{" "}
                  </td>
                  <td>{c.total_electric_kg ? `${c.total_electric_kg}` : 0}</td>
                  <td>{c.total_milage ? `${c.total_milage}` : 0} </td>
                  <td>{c.total_kg ? `${c.total_kg}` : 0} </td>
                </tr>
              </tbody>
            ))}
            {/* {!c && <Summery />}
            {this.state.c && <FilterSummaey movie={c} />} */}
            {data}
          </table>
        </div>
      </div>
    );
  }
}

export default user;

1 Ответ

0 голосов
/ 07 ноября 2019

Вы можете сделать это 

{ this.state.c && this.state.c.length > 0
  ? <FilterSummaey movie={c} />} 
  : <Summery />
}

Надеюсь, это поможет

...