Added job login and log off functionality. BOD-183

client/src/components/jobs-detail-labor/jobs-detail-labor.component.jsx

@@ -3,19 +3,23 @@ import LaborAllocationsTableComponent from "../labor-allocations-table/labor-all
 import TimeTicketEnterButton from "../time-ticket-enter-button/time-ticket-enter-button.component";
 import TimeTicketList from "../time-ticket-list/time-ticket-list.component";
 import { useTranslation } from "react-i18next";
+
 export default function JobsDetailLaborContainer({
   jobId,
   joblines,
   timetickets,
   refetch,
   loading,
+  techConsole,
 }) {
   const { t } = useTranslation();
   return (
     <div>
-      <TimeTicketEnterButton actions={{ refetch }} context={{ jobId: jobId }}>
-        {t("timetickets.actions.enter")}
-      </TimeTicketEnterButton>
+      {techConsole ? null : (
+        <TimeTicketEnterButton actions={{ refetch }} context={{ jobId: jobId }}>
+          {t("timetickets.actions.enter")}
+        </TimeTicketEnterButton>
+      )}
       <LaborAllocationsTableComponent
         joblines={joblines}
         timetickets={timetickets}
@@ -24,6 +28,7 @@ export default function JobsDetailLaborContainer({
         loading={loading}
         timetickets={timetickets}
         refetch={refetch}
+        techConsole={techConsole}
       />
     </div>
   );

client/src/components/jobs-detail-labor/jobs-detail-labor.container.jsx

@@ -4,7 +4,7 @@ import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
 import AlertComponent from "../alert/alert.component";
 import JobsDetailLaborComponent from "./jobs-detail-labor.component";
 
-export default function JobsDetailLaborContainer({ jobId }) {
+export default function JobsDetailLaborContainer({ jobId, techConsole }) {
   const { loading, error, data, refetch } = useQuery(GET_LINE_TICKET_BY_PK, {
     variables: { id: jobId },
     skip: !!!jobId,
@@ -19,6 +19,7 @@ export default function JobsDetailLaborContainer({ jobId }) {
       timetickets={data ? data.timetickets : []}
       joblines={data ? data.joblines : []}
       refetch={refetch}
+      techConsole={techConsole}
     />
   );
 }

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

@@ -1,44 +0,0 @@
-import { Form, Button } from "antd";
-import React from "react";
-import { useQuery } from "react-apollo";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
-import { selectTechnician } from "../../redux/tech/tech.selectors";
-import AlertComponent from "../alert/alert.component";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import TechClockInComponent from "./tech-clock-in.component";
-import { useTranslation } from "react-i18next";
-const mapStateToProps = createStructuredSelector({
-  technician: selectTechnician,
-});
-
-export function TechClockInContainer({ technician }) {
-  const { loading, error, data } = useQuery(QUERY_ACTIVE_TIME_TICKETS);
-  const [form] = Form.useForm();
-  const { t } = useTranslation();
-  if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
-
-  console.log("data", data);
-
-  if (data.timetickets.length > 0) {
-    return <div>already clock into a job.</div>;
-  }
-
-  const handleFinish = (values) => {
-    console.log("values", values);
-  };
-
-  return (
-    <div>
-      <Form form={form} layout="vertical" onFinish={handleFinish}>
-        <TechClockInComponent form={form} />
-        <Button type="primary" htmlType="submit">
-          {t("timetickets.actions.clockon")}
-        </Button>
-      </Form>
-    </div>
-  );
-}
-export default connect(mapStateToProps, null)(TechClockInContainer);

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

@@ -1,17 +1,17 @@
 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 { selectTechnician } from "../../redux/tech/tech.selectors";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
-import { useTranslation } from "react-i18next";
-import { Form } from "antd";
+import JobsDetailLaborContainer from "../jobs-detail-labor/jobs-detail-labor.container";
+
 const mapStateToProps = createStructuredSelector({
-    bodyshop: selectBodyshop,
-  
-  });
+  bodyshop: selectBodyshop,
+});
 
 export function TechClockInComponent({ form, bodyshop }) {
   const { t } = useTranslation();
@@ -35,6 +35,22 @@ export function TechClockInComponent({ form, bodyshop }) {
       >
         <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>
   );
 }

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);

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);

client/src/components/tech-job-clocked-in-list/tech-job-clocked-in-list.component.jsx

@@ -0,0 +1,93 @@
+import { Card, List, Typography } from "antd";
+import React from "react";
+import { useQuery } from "react-apollo";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import AlertComponent from "../alert/alert.component";
+import DataLabel from "../data-label/data-label.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import TechClockOffButton from "../tech-job-clock-out-button/tech-job-clock-out-button.component";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+const mapStateToProps = createStructuredSelector({
+  technician: selectTechnician,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export  function TechClockedInList({ technician }) {
+  const { loading, error, data, refetch } = useQuery(
+    QUERY_ACTIVE_TIME_TICKETS,
+    {
+      variables: {
+        employeeId: technician.id,
+      },
+    }
+  );
+
+  const { t } = useTranslation();
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <div>
+      {data.timetickets.length > 0 ? (
+        <div>
+          <Typography.Title level={2}>
+            {t("timetickets.labels.alreadyclockedon")}
+          </Typography.Title>
+          <List
+            grid={{
+              gutter: 32,
+              xs: 1,
+              sm: 2,
+              md: 3,
+              lg: 4,
+              xl: 5,
+              xxl: 6,
+            }}
+            dataSource={data.timetickets || []}
+            renderItem={(ticket) => (
+              <List.Item>
+                <Card
+                  title={
+                    <Link to={`/tech/joblookup?selected=${ticket.job.id}`}>
+                      {`${ticket.job.ro_number || ticket.job.est_number} ${
+                        ticket.job.ownr_fn || ""
+                      } ${ticket.job.ownr_ln || ""} ${
+                        ticket.job.ownr_co_nm || ""
+                      }`}
+                    </Link>
+                  }
+                  actions={[
+                    <TechClockOffButton
+                      timeTicketId={ticket.id}
+                      completedCallback={refetch}
+                    />,
+                  ]}
+                >
+                  <div>
+                    {`
+                  ${ticket.job.v_model_yr || ""} ${
+                      ticket.job.v_make_desc || ""
+                    } ${ticket.job.v_model_desc || ""}`}
+                  </div>
+                  <DataLabel label={t("timetickets.fields.clockon")}>
+                    <DateTimeFormatter>{ticket.clockon}</DateTimeFormatter>
+                  </DataLabel>
+                </Card>
+              </List.Item>
+            )}
+          ></List>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+export default connect(mapStateToProps, mapDispatchToProps)(TechClockedInList);

client/src/components/tech-sider/tech-sider.component.jsx

@@ -43,7 +43,7 @@ export function TechSider({ technician, techLogout }) {
           disabled={!!!technician}
           icon={<Icon component={MdTimer} />}
         >
-          <Link to={`/tech/clockin`}>{t("menus.tech.clockin")}</Link>
+          <Link to={`/tech/jobclockin`}>{t("menus.tech.jobclockin")}</Link>
         </Menu.Item>
         <Menu.Item
           key="4"

client/src/components/time-ticket-list/time-ticket-list.component.jsx

@@ -6,7 +6,12 @@ import { alphaSort } from "../../utils/sorters";
 import { DateFormatter } from "../../utils/DateFormatter";
 import TimeTicketEnterButton from "../time-ticket-enter-button/time-ticket-enter-button.component";
 
-export default function TimeTicketList({ loading, timetickets, refetch }) {
+export default function TimeTicketList({
+  loading,
+  timetickets,
+  refetch,
+  techConsole,
+}) {
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" },
@@ -65,14 +70,17 @@ export default function TimeTicketList({ loading, timetickets, refetch }) {
       title: t("general.labels.actions"),
       dataIndex: "actions",
       key: "actions",
-      render: (text, record) => (
-        <TimeTicketEnterButton
-          actions={{ refetch }}
-          context={{ id: record.id, timeticket: record }}
-        >
-          {t("general.actions.edit")}
-        </TimeTicketEnterButton>
-      ),
+      render: (text, record) => {
+        if (techConsole) return null;
+        return (
+          <TimeTicketEnterButton
+            actions={{ refetch }}
+            context={{ id: record.id, timeticket: record }}
+          >
+            {t("general.actions.edit")}
+          </TimeTicketEnterButton>
+        );
+      },
     },
   ];