bodyshop/client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.js

import Icon from "@ant-design/icons";
import { Popover, Statistic } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { MdFileDownload, MdFileUpload } from "react-icons/md";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import {
  selectScheduleLoad,
  selectScheduleLoadCalculating,
} from "../../redux/application/application.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import ScheduleBlockDay from "../schedule-block-day/schedule-block-day.component";

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
  load: selectScheduleLoad,
  calculating: selectScheduleLoadCalculating,
});

const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export function ScheduleCalendarHeaderComponent({
  bodyshop,
  label,
  refetch,
  date,
  load,
  calculating,
  ...otherProps
}) {
  const { t } = useTranslation();
  const loadData = load[date.toISOString().substr(0, 10)];

  const jobsOutPopup = () => (
    <div onClick={(e) => e.stopPropagation()}>
      <table>
        <tbody>
          {loadData && loadData.jobsOut ? (
            loadData.jobsOut.map((j) => (
              <tr key={j.id}>
                <td>
                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
                </td>
                <td>
                  {`(${(
                    j.labhrs.aggregate.sum.mod_lb_hrs +
                    j.larhrs.aggregate.sum.mod_lb_hrs
                  ).toFixed(1)} ${t("general.labels.hours")})`}
                </td>
                <td>
                  <DateTimeFormatter>
                    {j.scheduled_completion}
                  </DateTimeFormatter>
                </td>
              </tr>
            ))
          ) : (
            <tr>
              <td>{t("appointments.labels.nocompletingjobs")}</td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );

  const jobsInPopup = () => (
    <div onClick={(e) => e.stopPropagation()}>
      <table>
        <tbody>
          {loadData && loadData.jobsIn ? (
            loadData.jobsIn.map((j) => (
              <tr key={j.id}>
                <td>
                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
                </td>
                <td>
                  {`(${(
                    j.labhrs.aggregate.sum.mod_lb_hrs +
                    j.larhrs.aggregate.sum.mod_lb_hrs
                  ).toFixed(1)} ${t("general.labels.hours")})`}
                </td>
                <td>
                  <DateTimeFormatter>{j.scheduled_in}</DateTimeFormatter>
                </td>
              </tr>
            ))
          ) : (
            <tr>
              <td>{t("appointments.labels.noarrivingjobs")}</td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );

  const LoadComponent = loadData ? (
    <div className="imex-flex-row imex-flex-row__flex-space-around">
      <Popover
        placement={"bottom"}
        content={jobsInPopup}
        trigger="hover"
        title={t("appointments.labels.arrivingjobs")}
      >
        <Icon component={MdFileDownload} style={{ color: "green" }} />
        {(loadData.hoursIn || 0) && loadData.hoursIn.toFixed(2)}
      </Popover>
      <Popover
        placement={"bottom"}
        content={jobsOutPopup}
        trigger="hover"
        title={t("appointments.labels.completingjobs")}
      >
        <Icon component={MdFileUpload} style={{ color: "red" }} />
        {(loadData.hoursOut || 0) && loadData.hoursOut.toFixed(2)}
      </Popover>
      <Statistic
        value={(
          ((loadData.expectedLoad || 0) / bodyshop.prodtargethrs) *
          100
        ).toFixed(1)}
        suffix={"%"}
        precision={0}
        valueStyle={{
          color:
            Math.abs(
              100 -
                ((loadData.expectedLoad || 0) / bodyshop.prodtargethrs) * 100
            ) <= 10
              ? "green"
              : "red",
        }}
      />
    </div>
  ) : null;

  return (
    <div className="imex-calendar-load">
      <ScheduleBlockDay date={date} refetch={refetch}>
        <div>
          {label}
          {calculating ? <LoadingSkeleton /> : LoadComponent}
        </div>
      </ScheduleBlockDay>
    </div>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ScheduleCalendarHeaderComponent);