IO-1652 Printing tickets from tech console.

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

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Card, Form, notification } from "antd";
+import { Button, Card, Form, notification, Space } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -9,6 +9,7 @@ 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";
+import TechJobPrintTickets from "../tech-job-print-tickets/tech-job-print-tickets.component";
 
 const mapStateToProps = createStructuredSelector({
   technician: selectTechnician,
@@ -71,9 +72,16 @@ export function TechClockInContainer({ technician, bodyshop }) {
     <Card
       title={t("timetickets.labels.clockintojob")}
       extra={
-        <Button type="primary" onClick={() => form.submit()} loading={loading}>
-          {t("timetickets.actions.clockin")}
-        </Button>
+        <Space wrap>
+          <TechJobPrintTickets />
+          <Button
+            type="primary"
+            onClick={() => form.submit()}
+            loading={loading}
+          >
+            {t("timetickets.actions.clockin")}
+          </Button>
+        </Space>
       }
     >
       <Form form={form} layout="vertical" onFinish={handleFinish}>

client/src/components/tech-job-print-tickets/tech-job-print-tickets.component.jsx

@@ -0,0 +1,125 @@
+import { Button, Card, DatePicker, Form, Popover, Space } from "antd";
+import moment from "moment";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+import DatePIckerRanges from "../../utils/DatePickerRanges";
+import { GenerateDocument } from "../../utils/RenderTemplate";
+import { TemplateList } from "../../utils/TemplateConstants";
+
+const mapStateToProps = createStructuredSelector({
+  technician: selectTechnician,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TechJobPrintTickets);
+
+export function TechJobPrintTickets({ technician, event }) {
+  const { t } = useTranslation();
+
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+  const [visibility, setVisibility] = useState(false);
+
+  useEffect(() => {
+    if (visibility && event) {
+      form.setFieldsValue(event);
+    }
+  }, [visibility, form, event]);
+
+  const handleFinish = async (values) => {
+    logImEXEvent("schedule_manual_event");
+
+    setLoading(true);
+    const start = values.dates[0];
+    const end = values.dates[1];
+
+    try {
+      await GenerateDocument(
+        {
+          name: TemplateList().timetickets_employee.key,
+          variables: {
+            ...(start
+              ? { start: moment(start).startOf("day").format("YYYY-MM-DD") }
+              : {}),
+            ...(end
+              ? { end: moment(end).endOf("day").format("YYYY-MM-DD") }
+              : {}),
+            ...(start ? { starttz: moment(start).startOf("day") } : {}),
+            ...(end ? { endtz: moment(end).endOf("day") } : {}),
+
+            id: technician.id,
+          },
+        },
+        {
+          to: technician.email,
+          subject: TemplateList().timetickets_employee.subject,
+        },
+        "p"
+      );
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLoading(false);
+      setVisibility(false);
+      form.resetFields();
+    }
+  };
+
+  const overlay = (
+    <Card>
+      <div>
+        <Form form={form} layout="vertical" onFinish={handleFinish}>
+          <Form.Item
+            label={t("reportcenter.labels.dates")}
+            name="dates"
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <DatePicker.RangePicker
+              ranges={DatePIckerRanges}
+              format={"MM/DD/YYYY"}
+            />
+          </Form.Item>
+
+          <Space wrap>
+            <Button type="primary" onClick={() => form.submit()}>
+              {t("general.actions.print")}
+            </Button>
+            <Button
+              onClick={() => {
+                setVisibility(false);
+                form.resetFields();
+              }}
+            >
+              {t("general.actions.cancel")}
+            </Button>
+          </Space>
+        </Form>
+      </div>
+    </Card>
+  );
+
+  const handleClick = (e) => {
+    setVisibility(true);
+  };
+
+  return (
+    <Popover content={overlay} visible={visibility}>
+      <Button loading={loading} onClick={handleClick}>
+        {t("general.actions.print")}
+      </Button>
+    </Popover>
+  );
+}