Added job login and log off functionality. BOD-183

client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx

@@ -0,0 +1,130 @@
+import { useMutation } from "@apollo/react-hooks";
+import {
+  Button,
+  Card,
+  Form,
+  InputNumber,
+  notification,
+  Popover,
+  Select,
+} from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { UPDATE_TIME_TICKET } from "../../graphql/timetickets.queries";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  technician: selectTechnician,
+});
+
+export function TechClockOffButton({
+  bodyshop,
+  technician,
+  timeTicketId,
+  completedCallback,
+  otherBtnProps,
+}) {
+  const [loading, setLoading] = useState(false);
+  const [updateTimeticket] = useMutation(UPDATE_TIME_TICKET);
+  const [form] = Form.useForm();
+
+  const { t } = useTranslation();
+
+  const handleFinish = async (values) => {
+    setLoading(true);
+    const result = await updateTimeticket({
+      variables: {
+        timeticketId: timeTicketId,
+        timeticket: { clockoff: new Date(), ...values },
+      },
+    });
+
+    if (!!result.errors) {
+      notification["error"]({
+        message: t("timetickets.errors.clockingout", {
+          message: JSON.stringify(result.errors),
+        }),
+      });
+    } else {
+      notification["success"]({
+        message: t("timetickets.successes.clockedout"),
+      });
+    }
+    setLoading(false);
+    if (completedCallback) completedCallback();
+  };
+
+  const overlay = (
+    <Card>
+      <div>
+        <Form
+          form={form}
+          layout="vertical"
+          onFinish={handleFinish}
+          initialValues={{
+            cost_center: technician ? technician.cost_center : null,
+          }}
+        >
+          <Form.Item
+            label={t("timetickets.fields.actualhrs")}
+            name="actualhrs"
+            rules={[
+              {
+                required: true,
+                message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <InputNumber precision={1} />
+          </Form.Item>
+          <Form.Item
+            label={t("timetickets.fields.productivehrs")}
+            name="productivehrs"
+            rules={[
+              {
+                required: true,
+                message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <InputNumber precision={1} />
+          </Form.Item>
+          <Form.Item
+            name="cost_center"
+            label={t("timetickets.fields.cost_center")}
+            rules={[
+              {
+                required: true,
+                message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <Select>
+              {bodyshop.md_responsibility_centers.costs.map((i, idx) => (
+                <Select.Option key={idx} value={i.name}>
+                  {i.name}
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Button type="primary" htmlType="submit">
+            {t("general.actions.save")}
+          </Button>
+        </Form>
+      </div>
+    </Card>
+  );
+
+  return (
+    <Popover content={overlay} trigger="click">
+      <Button loading={loading} {...otherBtnProps}>
+        {t("timetickets.actions.clockout")}
+      </Button>
+    </Popover>
+  );
+}
+export default connect(mapStateToProps, null)(TechClockOffButton);