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

import { useQuery } from "@apollo/client";
import { Form, Input, InputNumber, Select } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
import JobSearchSelect from "../job-search-select/job-search-select.component";
import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import TimeTicketList from "../time-ticket-list/time-ticket-list.component";

export default function TimeTicketModalComponent({
  form,

  employeeAutoCompleteOptions,
}) {
  const { t } = useTranslation();

  return (
    <div>
      <LayoutFormRow grow>
        <Form.Item
          name="jobid"
          label={t("timetickets.fields.ro_number")}
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <JobSearchSelect convertedOnly notExported={false} />
        </Form.Item>
        <Form.Item
          label={t("timetickets.fields.date")}
          name="date"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <FormDatePicker />
        </Form.Item>
        <Form.Item
          name="employeeid"
          label={t("timetickets.fields.employee")}
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <EmployeeSearchSelect options={employeeAutoCompleteOptions} />
        </Form.Item>
        <Form.Item
          shouldUpdate={(prev, cur) => prev.employeeid !== cur.employeeid}
        >
          {() => {
            const employeeId = form.getFieldValue("employeeid");
            const emps =
              employeeAutoCompleteOptions &&
              employeeAutoCompleteOptions.filter((e) => e.id === employeeId)[0];

            return (
              <Form.Item
                name="cost_center"
                label={t("timetickets.fields.cost_center")}
                rules={[
                  {
                    required: true,
                    message: t("general.validation.required"),
                  },
                ]}
              >
                <Select>
                  {emps &&
                    emps.rates.map((item) => (
                      <Select.Option key={item.cost_center}>
                        {item.cost_center}
                      </Select.Option>
                    ))}
                </Select>
              </Form.Item>
            );
          }}
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow>
        <Form.Item
          label={t("timetickets.fields.productivehrs")}
          name="productivehrs"
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <InputNumber min={0} precision={1} />
        </Form.Item>
        <Form.Item
          label={t("timetickets.fields.actualhrs")}
          name="actualhrs"
          // rules={[
          //   {
          //     required: true,
          //     message: t("general.validation.required"),
          //   },
          // ]}
        >
          <InputNumber min={0} precision={1} />
        </Form.Item>

        <Form.Item label={t("timetickets.fields.memo")} name="memo">
          <Input />
        </Form.Item>

        <Form.Item
          name="ciecacode"
          label={t("timetickets.fields.ciecacode")}
          rules={[
            {
              required: true,
              message: t("general.validation.required"),
            },
          ]}
        >
          <Input disabled />
        </Form.Item>
      </LayoutFormRow>
      <Form.Item dependencies={["jobid"]}>
        {() => (
          <LaborAllocationContainer
            jobid={form.getFieldValue("jobid") || null}
          />
        )}
      </Form.Item>
    </div>
  );
}

function LaborAllocationContainer({ jobid }) {
  const { loading, data: lineTicketData } = useQuery(GET_LINE_TICKET_BY_PK, {
    variables: { id: jobid },
    skip: !jobid,
  });
  if (loading) return <LoadingSkeleton />;
  if (!lineTicketData) return null;
  return (
    <div>
      <LaborAllocationsTable
        jobId={jobid}
        joblines={lineTicketData.joblines}
        timetickets={lineTicketData.timetickets}
      />
      <TimeTicketList
        loading={loading}
        timetickets={lineTicketData.timetickets}
        techConsole
      />
    </div>
  );
}