bodyshop/client/src/components/time-ticket-task-modal/time-ticket-task-modal.component.jsx

import {
  Alert,
  Col,
  Form,
  Radio,
  Row,
  Skeleton,
  Space,
  Spin,
  Typography,
} from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import ReadOnlyFormItemComponent from "../form-items-formatted/read-only-form-item.component";
import JobSearchSelectComponent from "../job-search-select/job-search-select.component";

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TimeTicketTaskModalComponent);

export function TimeTicketTaskModalComponent({
  bodyshop,
  form,
  loading,
  completedTasks,
  unassignedHours,
}) {
  const { t } = useTranslation();

  return (
    <div>
      <Row gutter={[16, 16]}>
        <Col xl={12} lg={24}>
          <Form.Item
            name="jobid"
            label={t("timetickets.fields.ro_number")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
          >
            <JobSearchSelectComponent convertedOnly={true} notExported={true} />
          </Form.Item>
          <Space wrap>
            <Form.Item name="task" label={t("timetickets.labels.task")}>
              {loading ? (
                <Spin />
              ) : (
                <Radio.Group
                  optionType="button"
                  options={bodyshop.md_tasks_presets.presets.map((preset) => ({
                    value: preset.name,
                    label: preset.name,
                    disabled: completedTasks
                      .map((task) => task.name)
                      .includes(preset.name),
                  }))}
                />
              )}
            </Form.Item>
            <Form.Item dependencies={["task"]}>
              {() => {
                const { task } = form.getFieldsValue();
                const theTaskPreset = bodyshop.md_tasks_presets.presets.find(
                  (tp) => tp.name === task
                );

                if (!task) return null;
                return (
                  <table className="task-tickets-table">
                    <tbody>
                      <tr>
                        <td>{t("bodyshop.fields.md_tasks_presets.percent")}</td>
                        <td>{`${theTaskPreset.percent || 0}%`}</td>
                      </tr>
                      <tr>
                        <td>
                          {t("bodyshop.fields.md_tasks_presets.hourstype")}
                        </td>
                        <td>{theTaskPreset.hourstype.join(", ")}</td>
                      </tr>
                      <tr>
                        <td>
                          {t("bodyshop.fields.md_tasks_presets.nextstatus")}
                        </td>
                        <td>{theTaskPreset.nextstatus}</td>
                      </tr>
                    </tbody>
                  </table>
                );
              }}
            </Form.Item>
          </Space>
        </Col>
        <Col xl={12} lg={24}>
          {loading ? (
            <Skeleton />
          ) : (
            <Form.List name="timetickets">
              {(fields, { add, remove, move }) => {
                return (
                  <>
                    <Typography.Title level={4}>
                      {t("timetickets.labels.claimtaskpreview")}
                    </Typography.Title>
                    <table className="task-tickets-table">
                      <thead>
                        <tr>
                          <th>{t("timetickets.fields.employee")}</th>
                          <th>{t("timetickets.fields.cost_center")}</th>
                          <th>{t("timetickets.fields.ciecacode")}</th>
                          <th>{t("timetickets.fields.productivehrs")}</th>
                        </tr>
                      </thead>
                      <tbody>
                        {fields.map((field, index) => (
                          <tr key={field.key}>
                            <td>
                              <Form.Item
                                key={`${index}employeeid`}
                                name={[field.name, "employeeid"]}
                              >
                                <ReadOnlyFormItemComponent type="employee" />
                              </Form.Item>
                            </td>
                            <td>
                              <Form.Item
                                key={`${index}cost_center`}
                                name={[field.name, "cost_center"]}
                              >
                                <ReadOnlyFormItemComponent />
                              </Form.Item>
                            </td>
                            <td>
                              <Form.Item
                                key={`${index}ciecacode`}
                                name={[field.name, "ciecacode"]}
                              >
                                <ReadOnlyFormItemComponent />
                              </Form.Item>
                            </td>
                            <td>
                              <Form.Item
                                key={`${index}productivehrs`}
                                name={[field.name, "productivehrs"]}
                              >
                                <ReadOnlyFormItemComponent />
                              </Form.Item>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                    <Alert
                      type="success"
                      message={t("timetickets.labels.payrollclaimedtasks")}
                    />
                  </>
                );
              }}
            </Form.List>
          )}
          {unassignedHours > 0 && (
            <Alert
              type="error"
              message={t("timetickets.validation.unassignedlines", {
                unassignedHours: unassignedHours,
              })}
            />
          )}
        </Col>
      </Row>

      {bodyshop?.md_tasks_presets?.use_approvals && (
        <Col xl={12} lg={24}>
          <Alert
            message={t("tt_approvals.labels.approval_queue_in_use")}
            type="warning"
          />
        </Col>
      )}
    </div>
  );
}