Added job login and log off functionality. BOD-183

client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.component.jsx

@@ -0,0 +1,57 @@
+import { useQuery } from "@apollo/react-hooks";
+import { Form } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import JobSearchSelect from "../job-search-select/job-search-select.component";
+import JobsDetailLaborContainer from "../jobs-detail-labor/jobs-detail-labor.container";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+export function TechClockInComponent({ form, bodyshop }) {
+  const { t } = useTranslation();
+  const { loading, data } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
+    variables: {
+      statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"],
+    },
+  });
+
+  return (
+    <div>
+      <Form.Item
+        name="jobid"
+        label={t("jobs.fields.ro_number")}
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required"),
+          },
+        ]}
+      >
+        <JobSearchSelect loading={loading} options={data ? data.jobs : []} />
+      </Form.Item>
+
+      <Form.Item
+        shouldUpdate={(prevValues, curValues) =>
+          prevValues.jobid !== curValues.jobid
+        }
+      >
+        {() => {
+          if (!form.getFieldValue("jobid")) return null;
+          return (
+            <JobsDetailLaborContainer
+              jobId={form.getFieldValue("jobid")}
+              techConsole
+            />
+          );
+        }}
+      </Form.Item>
+    </div>
+  );
+}
+export default connect(mapStateToProps, null)(TechClockInComponent);

client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.container.jsx

@@ -0,0 +1,76 @@
+import { Button, Form, notification, Card } from "antd";
+import React from "react";
+import { useMutation } from "react-apollo";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { INSERT_NEW_TIME_TICKET } from "../../graphql/timetickets.queries";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import TechClockInComponent from "./tech-job-clock-in-form.component";
+
+const mapStateToProps = createStructuredSelector({
+  technician: selectTechnician,
+  bodyshop: selectBodyshop,
+});
+
+export function TechClockInContainer({ technician, bodyshop }) {
+  const [form] = Form.useForm();
+  const [insertTimeTicket] = useMutation(INSERT_NEW_TIME_TICKET, {
+    refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"],
+  });
+  const { t } = useTranslation();
+
+  const handleFinish = async (values) => {
+    const result = await insertTimeTicket({
+      variables: {
+        timeTicketInput: {
+          employeeid: technician.id,
+          date: new Date(),
+          clockon: new Date(),
+          jobid: values.jobid,
+          cost_center: technician.cost_center,
+          ciecacode: Object.keys(
+            bodyshop.md_responsibility_centers.defaults.costs
+          ).find((key) => {
+            console.log(
+              "key",
+              key,
+              bodyshop.md_responsibility_centers.defaults.costs[key]
+            );
+            return (
+              bodyshop.md_responsibility_centers.defaults.costs[key] ===
+              values.cost_center
+            );
+          }),
+        },
+      },
+    });
+
+    if (!!result.errors) {
+      notification["error"]({
+        message: t("timetickets.errors.clockingin", {
+          message: JSON.stringify(result.errors),
+        }),
+      });
+    } else {
+      notification["success"]({
+        message: t("timetickets.successes.clockedin"),
+      });
+    }
+  };
+
+  return (
+    <div>
+      <Card title={t("timetickets.labels.clockintojob")}>
+        <Form form={form} layout="vertical" onFinish={handleFinish}>
+          <Button type="primary" htmlType="submit">
+            {t("timetickets.actions.clockin")}
+          </Button>
+          <TechClockInComponent form={form} />
+        </Form>
+      </Card>
+    </div>
+  );
+}
+export default connect(mapStateToProps, null)(TechClockInContainer);