Merged in feature/IO-2385-Tech-Console-Attendance-Report (pull request #943)

IO-2385 Tech Console to print Attendance Report from Shift Clock

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

@@ -32,7 +32,7 @@ export function TechClockInContainer({
   currentUser,
 }) {
   console.log(
-    "🚀 ~ file: tech-job-clock-in-form.container.jsx:29 ~ technician:",
+    "🚀 ~ file: tech-job-clock-in-form.container.jsx:30 ~ technician:",
     technician
   );
   const [form] = Form.useForm();
@@ -128,7 +128,7 @@ export function TechClockInContainer({
           >
             {t("timetickets.actions.enter")}
           </Button>
-          <TechJobPrintTickets />
+          <TechJobPrintTickets attendacePrint={false} />
           <Button
             type="primary"
             onClick={() => form.submit()}

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

@@ -21,12 +21,13 @@ export default connect(
   mapDispatchToProps
 )(TechJobPrintTickets);
 
-export function TechJobPrintTickets({ technician, event }) {
+export function TechJobPrintTickets({ technician, event, attendacePrint }) {
   const { t } = useTranslation();
 
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const [visibility, setVisibility] = useState(false);
+  const Templates = TemplateList("report_center");
 
   useEffect(() => {
     if (visibility && event) {
@@ -44,7 +45,10 @@ export function TechJobPrintTickets({ technician, event }) {
     try {
       await GenerateDocument(
         {
-          name: TemplateList().timetickets_employee.key,
+          name:
+            attendacePrint === true
+              ? Templates.attendance_employee.key
+              : Templates.timetickets_employee.key,
           variables: {
             ...(start
               ? { start: moment(start).startOf("day").format("YYYY-MM-DD") }
@@ -60,7 +64,10 @@ export function TechJobPrintTickets({ technician, event }) {
         },
         {
           to: technician.email,
-          subject: TemplateList().timetickets_employee.subject,
+          subject:
+            attendacePrint === true
+              ? Templates.attendance_employee.subject
+              : Templates.timetickets_employee.subject,
         },
         "p"
       );

client/src/components/time-ticket-shift-active/time-ticket-shift-active.component.jsx

@@ -4,48 +4,67 @@ import { useTranslation } from "react-i18next";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import DataLabel from "../data-label/data-label.component";
 import TechClockOffButton from "../tech-job-clock-out-button/tech-job-clock-out-button.component";
+import TechJobPrintTickets from "../tech-job-print-tickets/tech-job-print-tickets.component";
 
-export default function TimeTicketShiftActive({ timetickets, refetch }) {
+export default function TimeTicketShiftActive({
+  timetickets,
+  refetch,
+  isTechConsole,
+}) {
   const { t } = useTranslation();
 
   return (
     <div>
       {timetickets.length > 0 ? (
-        <div>
-          <Typography.Title level={2}>
-            {t("timetickets.labels.shiftalreadyclockedon")}
-          </Typography.Title>
-          <List
-            grid={{
-              gutter: 32,
-              xs: 1,
-              sm: 2,
-              md: 3,
-              lg: 4,
-              xl: 5,
-              xxl: 6,
-            }}
-            dataSource={timetickets || []}
-            renderItem={(ticket) => (
-              <List.Item>
-                <Card
-                  title={t(ticket.memo)}
-                  actions={[
-                    <TechClockOffButton
-                      jobId={ticket.jobid}
-                      timeTicketId={ticket.id}
-                      completedCallback={refetch}
-                      isShiftTicket
-                    />,
-                  ]}
-                >
-                  <DataLabel label={t("timetickets.fields.clockon")}>
-                    <DateTimeFormatter>{ticket.clockon}</DateTimeFormatter>
-                  </DataLabel>
-                </Card>
-              </List.Item>
-            )}
-          ></List>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            flexDirection: "column",
+            height: "100%",
+          }}
+        >
+          <div style={{ display: "flex", justifyContent: "space-between" }}>
+            <Typography.Title level={2}>
+              {t("timetickets.labels.shiftalreadyclockedon")}
+            </Typography.Title>
+            {isTechConsole ? (
+              <TechJobPrintTickets attendacePrint={true} />
+            ) : null}
+          </div>
+          <div style={{ flexGrow: 1 }}>
+            <List
+              grid={{
+                gutter: 32,
+                xs: 1,
+                sm: 2,
+                md: 3,
+                lg: 4,
+                xl: 5,
+                xxl: 6,
+              }}
+              dataSource={timetickets || []}
+              renderItem={(ticket) => (
+                <List.Item>
+                  <Card
+                    title={t(ticket.memo)}
+                    actions={[
+                      <TechClockOffButton
+                        jobId={ticket.jobid}
+                        timeTicketId={ticket.id}
+                        completedCallback={refetch}
+                        isShiftTicket
+                      />,
+                    ]}
+                  >
+                    <DataLabel label={t("timetickets.fields.clockon")}>
+                      <DateTimeFormatter>{ticket.clockon}</DateTimeFormatter>
+                    </DataLabel>
+                  </Card>
+                </List.Item>
+              )}
+            ></List>
+          </div>
         </div>
       ) : null}
     </div>

client/src/components/time-ticket-shift-form/time-ticket-shift-form.container.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification } from "antd";
+import { Button, Form, Space, notification } from "antd";
 import axios from "axios";
 import moment from "moment";
 import React, { useMemo, useState } from "react";
@@ -12,6 +12,7 @@ import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import TechJobPrintTickets from "../tech-job-print-tickets/tech-job-print-tickets.component";
 import TimeTicektShiftComponent from "./time-ticket-shift-form.component";
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -29,6 +30,10 @@ export function TimeTicektShiftContainer({
   isTechConsole,
   checkIfAlreadyClocked,
 }) {
+  console.log(
+    "🚀 ~ file: time-ticket-shift-form.container.jsx:28 ~ technician:",
+    technician
+  );
   const [form] = Form.useForm();
   const [insertTimeTicket] = useMutation(INSERT_NEW_TIME_TICKET);
   const { t } = useTranslation();
@@ -113,9 +118,14 @@ export function TimeTicektShiftContainer({
         initialValues={{ cost_center: t("timetickets.labels.shift") }}
       >
         <TimeTicektShiftComponent form={form} />
-        <Button htmlType="submit" loading={loading}>
-          {t("timetickets.actions.clockin")}
-        </Button>
+        <Space wrap>
+          <Button htmlType="submit" loading={loading} type="primary">
+            {t("timetickets.actions.clockin")}
+          </Button>
+          {isTechConsole === true ? (
+            <TechJobPrintTickets attendacePrint={true} />
+          ) : null}
+        </Space>
       </Form>
     </div>
   );

client/src/components/time-ticket-shift/time-ticket-shift.container.jsx

@@ -76,6 +76,7 @@ export function TimeTicketShiftContainer({
         <TimeTicketShiftActive
           timetickets={data ? data.timetickets : []}
           refetch={refetch}
+          isTechConsole={isTechConsole}
         />
       ) : (
         <TimeTicketShiftFormContainer