bodyshop/client/src/components/schedule-calendar/schedule-calendar.component.jsx

import { SyncOutlined } from "@ant-design/icons";
import { Button, Card, Checkbox, Col, Row, Select, Space } from "antd";
import { PageHeader } from "@ant-design/pro-layout";
import React, { useCallback, useMemo } from "react";
import { useTranslation } from "react-i18next";
import useLocalStorage from "../../utils/useLocalStorage";
import ScheduleAtsSummary from "../schedule-ats-summary/schedule-ats-summary.component";
import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
import ScheduleModal from "../schedule-job-modal/schedule-job-modal.container";
import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
import ScheduleProductionList from "../schedule-production-list/schedule-production-list.component";
import ScheduleVerifyIntegrity from "../schedule-verify-integrity/schedule-verify-integrity.component";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import _ from "lodash";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});

const ScheduleCalendarComponent = React.memo(function ScheduleCalendarComponent({ data, refetch, bodyshop }) {
  const { t } = useTranslation();

  const [filter, setFilter] = useLocalStorage("filter_events", {
    intake: true,
    manual: true,
    employeevacation: true,
    ins_co_nm: null
  });
  const [estimatorsFilter, setEstimatorsFilter] = useLocalStorage("estimators", []);

  const estimators = useMemo(() => {
    return _.uniq([
      ...data
        .filter((d) => d.__typename === "appointments")
        .map((app) => `${app.job?.est_ct_fn || ""} ${app.job?.est_ct_ln || ""}`.trim())
        .filter((e) => e.length > 0),
      ...bodyshop.md_estimators.map((e) => `${e.est_ct_fn || ""} ${e.est_ct_ln || ""}`.trim())
    ]);
  }, [data, bodyshop.md_estimators]);

  const filteredData = useMemo(() => {
    return data.filter((d) => {
      const estFilter =
        d.__typename === "appointments"
          ? estimatorsFilter.length === 0
            ? true
            : estimatorsFilter.includes(`${d.job?.est_ct_fn || ""} ${d.job?.est_ct_ln || ""}`.trim())
          : true;

      return (
        (d.block ||
          (filter.intake && d.isintake) ||
          (filter.manual && !d.isintake && d.block === false) ||
          (d.__typename === "employee_vacation" && filter.employeevacation && !!d.employee)) &&
        (filter.ins_co_nm && filter.ins_co_nm.length > 0 ? filter.ins_co_nm.includes(d.job?.ins_co_nm) : true) &&
        estFilter
      );
    });
  }, [data, filter, estimatorsFilter]);

  const estimatorsOptions = useMemo(() => {
    return estimators.map((e) => ({
      label: e,
      value: e
    }));
  }, [estimators]);

  const insCoNmOptions = useMemo(() => {
    return bodyshop.md_ins_cos.map((i) => ({
      label: i.name,
      value: i.name
    }));
  }, [bodyshop.md_ins_cos]);

  const handleEstimatorsFilterChange = useCallback(
    (e) => {
      setEstimatorsFilter(e);
    },
    [setEstimatorsFilter]
  );

  const handleEstimatorsFilterClear = useCallback(() => {
    setEstimatorsFilter([]);
  }, [setEstimatorsFilter]);

  const handleInsCoNmFilterChange = useCallback(
    (e) => {
      setFilter((prevFilter) => ({ ...prevFilter, ins_co_nm: e }));
    },
    [setFilter]
  );

  const handleInsCoNmFilterClear = useCallback(() => {
    setFilter((prevFilter) => ({ ...prevFilter, ins_co_nm: [] }));
  }, [setFilter]);

  const handleIntakeFilterChange = useCallback(
    (e) => {
      const checked = e.target.checked;
      setFilter((prevFilter) => ({ ...prevFilter, intake: checked }));
    },
    [setFilter]
  );

  const handleManualFilterChange = useCallback(
    (e) => {
      const checked = e.target.checked;
      setFilter((prevFilter) => ({ ...prevFilter, manual: checked }));
    },
    [setFilter]
  );

  const handleEmployeeVacationFilterChange = useCallback(
    (e) => {
      const checked = e.target.checked;
      setFilter((prevFilter) => ({ ...prevFilter, employeevacation: checked }));
    },
    [setFilter]
  );

  const handleRefetch = useCallback(() => {
    refetch();
  }, [refetch]);

  return (
    <Row gutter={[16, 16]}>
      <ScheduleModal />

      <Col span={24}>
        <PageHeader
          extra={
            <Space wrap>
              <ScheduleAtsSummary appointments={filteredData} />
              <Select
                style={{ minWidth: "15rem" }}
                mode="multiple"
                placeholder={t("schedule.labels.estimators")}
                allowClear
                onClear={handleEstimatorsFilterClear}
                value={estimatorsFilter}
                onChange={handleEstimatorsFilterChange}
                options={estimatorsOptions}
              />
              <Select
                style={{ minWidth: "15rem" }}
                mode="multiple"
                placeholder={t("schedule.labels.ins_co_nm_filter")}
                allowClear
                onClear={handleInsCoNmFilterClear}
                value={filter.ins_co_nm || []}
                onChange={handleInsCoNmFilterChange}
                options={insCoNmOptions}
              />
              <Checkbox checked={filter.intake} onChange={handleIntakeFilterChange}>
                {t("schedule.labels.intake")}
              </Checkbox>
              <Checkbox checked={filter.manual} onChange={handleManualFilterChange}>
                {t("schedule.labels.manual")}
              </Checkbox>
              <Checkbox checked={filter.employeevacation} onChange={handleEmployeeVacationFilterChange}>
                {t("schedule.labels.employeevacation")}
              </Checkbox>
              <ScheduleVerifyIntegrity />
              <Button onClick={handleRefetch}>
                <SyncOutlined />
              </Button>
              <ScheduleProductionList />
              <ScheduleManualEvent />
            </Space>
          }
        />
      </Col>

      <Col span={24}>
        <Card>
          <ScheduleCalendarWrapperComponent data={filteredData} refetch={refetch} style={{ height: "100rem" }} />
        </Card>
      </Col>
    </Row>
  );
});

export default connect(mapStateToProps)(ScheduleCalendarComponent);